Merge pull request #306 from TykTechnologies/TT-10231_add_reveal_panel

new reveal panel is added

lib/sass/common/sass/components.scss

@@ -19,6 +19,7 @@
 @import '../../components/NavBar/sass/NavBar';
 @import '../../components/Panel/sass/Panel';
 @import '../../components/Pill/sass/Pill';
+@import '../../components/RevealPanel/sass/RevealPanel';
 @import '../../components/Sidebar/sass/Sidebar';
 @import '../../components/Table/sass/Table';
 @import '../../components/Tabs/sass/Tabs';

lib/sass/components/RevealPanel/sass/RevealPanel.scss

@@ -0,0 +1,85 @@
+
+.tyk-ui-reveal-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+
+    &__panel {
+        max-height: calc(100% - 2rem);
+        background-color: white;
+        padding: 0;
+        margin: 0;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        pointer-events: all;
+        flex-shrink: 0;
+        overflow: auto;
+    }
+
+    &__hole {
+        flex-grow: 1;
+        opacity: 0;
+        width: 100%;
+        background-color: green;
+        -webkit-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        z-index: -1;
+    }
+
+    &__gutter {
+        height: 2rem;
+        width: 100%;
+        cursor: row-resize;
+        display: flex;
+        background-color: theme-color('primary', 'base');
+        z-index: 2;
+        pointer-events: all;
+        justify-content: space-between;
+        align-items: stretch;
+        position: relative;
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+
+        &__headerleft, &__headerright
+        {
+            display: flex;
+            align-items: center;
+            flex: 1;
+        }
+
+        &__headerleft {
+            justify-content: flex-start;
+        }
+
+        &__headerright {
+            justify-content: flex-end;
+        }
+
+        &__logo {
+            width: 1rem;
+            height: 1rem;
+            -webkit-user-select: none;
+            user-select: none;
+            pointer-events: none;
+            padding: 0.2rem;
+            z-index: 2;
+            background-image: url('#{$component-images-path}/drag.svg');
+            align-self: center;
+        }
+    }
+
+
+    &__gutter__logo:hover {
+        border: dashed;
+    }
+
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {

src/common/sass/components.scss

@@ -19,6 +19,7 @@
 @import '../../components/NavBar/sass/NavBar';
 @import '../../components/Panel/sass/Panel';
 @import '../../components/Pill/sass/Pill';
+@import '../../components/RevealPanel/sass/RevealPanel';
 @import '../../components/Sidebar/sass/Sidebar';
 @import '../../components/Table/sass/Table';
 @import '../../components/Tabs/sass/Tabs';

src/components/RevealPanel/Readme.md

@@ -0,0 +1,14 @@
+
+
+```js
+import { useCallback, useRef, useState } from "react";
+import RevealPanel from "./index";
+<div class='demo' style={{position: "relative"}}>
+e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
+e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
+
+e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including verse and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
+<RevealPanel>eeee</RevealPanel>
+</div>
+
+```

src/components/RevealPanel/RevealPanel.test.js

@@ -0,0 +1,21 @@
+/* eslint-disable react/prop-types, react/jsx-no-constructed-context-values */
+import React from 'react';
+import RevealPanel from './index';
+
+function Component() {
+  return (
+    <div className="demo" style={{ position: 'relative' }}>
+      e and scrambled it to make a type specimen book.
+      It has survived not only five centuries, but also
+      <RevealPanel height="50%">
+        Panel content to make a type specimen book.
+      </RevealPanel>
+    </div>
+  );
+}
+
+describe('RevealPanel.test.js', () => {
+  it('renders RevealPanel component', () => {
+    cy.mount(<Component />);
+  });
+});

src/components/RevealPanel/index.js

@@ -0,0 +1,146 @@
+import React, {
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+} from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import { useRevealPanelService } from './js/RevealPanelService';
+
+function RevealPanelHeaderLeft({ children }) {
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+}
+
+RevealPanelHeaderLeft.propTypes = {
+  children: PropTypes.instanceOf({}),
+};
+
+function RevealPanelHeaderRight({ children }) {
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+}
+
+RevealPanelHeaderRight.propTypes = {
+  children: PropTypes.instanceOf({}),
+};
+
+const mergeClasses = (...classNames) => classNames.map((it) => (it || '').trim()).filter(Boolean).join(' ');
+
+const RevealPanel = forwardRef(({
+  children,
+  height,
+  onHeightChange = null,
+  onDragStart = null,
+  onDragEnd = null,
+  style = null,
+  parentSelector = null,
+  contentStyle,
+  contentClassName,
+  gutterClassName,
+  wrapperClassName,
+// eslint-disable-next-line consistent-return
+}, ref) => {
+  const panelRef = useRef(null);
+  const gutterRef = useRef(null);
+  const wrapperRef = useRef(null);
+
+  const panelService = useRevealPanelService();
+
+  useEffect(() => {
+    if (!panelRef.current || !gutterRef.current || !wrapperRef.current) {
+      return;
+    }
+
+    if (!panelService) {
+      return;
+    }
+
+    panelService.setRefs(wrapperRef.current, panelRef.current, gutterRef.current);
+    panelService.on('onHeightChange', onHeightChange);
+    panelService.on('onDragStart', onDragStart);
+    panelService.on('onDragEnd', onDragEnd);
+    panelService.setHeight(height, 'initialize');
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      panelService.unbindEvents();
+    };
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      // bind this context
+      const bind = (func) => func.bind(panelService);
+
+      return {
+        getHeight: bind(panelService.getHeight),
+        setHeight: bind(panelService.setHeight),
+        hide: bind(panelService.hide),
+        show: bind(panelService.show),
+        isHidden: bind(panelService.isHidden),
+        deinit: bind(panelService.deinit),
+        on: bind(panelService.on),
+        off: bind(panelService.off),
+      };
+    },
+    [],
+  );
+
+  let headerLeft = null;
+  let headerRight = null;
+  const contents = [];
+
+  React.Children.forEach(children, (child) => {
+    if (child && React.isValidElement(child)) {
+      if (child.type === RevealPanelHeaderLeft) {
+        headerLeft = child;
+      } else if (child.type === RevealPanelHeaderRight) {
+        headerRight = child;
+      } else {
+        contents.push(child);
+      }
+    }
+  });
+
+  const element = (
+    <div className={mergeClasses('tyk-ui-reveal-wrapper', wrapperClassName || 'cem')} ref={wrapperRef} style={style}>
+      <div className="tyk-ui-reveal-wrapper__hole" />
+      <div ref={gutterRef} className={mergeClasses('tyk-ui-reveal-wrapper__gutter', gutterClassName)}>
+
+        <div className="tyk-ui-reveal-wrapper__gutter__headerleft">{headerLeft}</div>
+        <div className="tyk-ui-reveal-wrapper__gutter__logo"> </div>
+        <div className="tyk-ui-reveal-wrapper__gutter__headerright">{headerRight}</div>
+
+      </div>
+      <div ref={panelRef} className={mergeClasses('tyk-ui-reveal-wrapper__panel', contentClassName)} style={contentStyle}>
+        {contents}
+      </div>
+    </div>
+  );
+
+  if (parentSelector) {
+    return createPortal(element, document.querySelector(parentSelector));
+  }
+});
+
+RevealPanel.propTypes = {
+  children: PropTypes.instanceOf({}),
+  height: PropTypes.string,
+  onHeightChange: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  parentSelector: PropTypes.string,
+  style: PropTypes.instanceOf({}),
+  contentStyle: PropTypes.instanceOf({}),
+  contentClassName: PropTypes.string,
+  gutterClassName: PropTypes.string,
+  wrapperClassName: PropTypes.string,
+};
+
+RevealPanel.HeaderLeft = RevealPanelHeaderLeft;
+RevealPanel.HeaderRight = RevealPanelHeaderRight;
+
+export default RevealPanel;