ui(components): New Dialog and Modal components for ui-next (#4772)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/ui/src/components/Labelling/LabellingFlow.tsx

@@ -37,6 +37,7 @@ class LabellingFlow extends Component<PropType> {
     this.state = {
       location,
       label,
+      hide: props.hide,
       componentClassName: className,
       confirmationState: false,
       displayComponent: true,
@@ -56,33 +57,19 @@ class LabellingFlow extends Component<PropType> {
         displayComponent={this.state.displayComponent}
         onTransitionExit={this.props.labellingDoneCallback}
       >
-        <>
-          <div
-            className={className}
-            ref={this.mainElement}
-          >
-            {this.labellingStateFragment()}
-          </div>
-        </>
+        <div
+          className={className}
+          ref={this.mainElement}
+        >
+          {this.labellingStateFragment()}
+        </div>
       </LabellingTransition>
     );
   }
 
-  closePopup = () => {
-    this.setState({
-      displayComponent: false,
-    });
-
-    setTimeout(() => {
-      this.setState({
-        displayComponent: false,
-      });
-    }, 2000);
-  };
-
   selectTreeSelectCalback = (event, itemSelected) => {
     const label = itemSelected.value;
-    this.closePopup();
+    this.props.hide();
     return this.props.labellingDoneCallback(label);
   };
 
@@ -92,7 +79,7 @@ class LabellingFlow extends Component<PropType> {
         items={this.currentItems}
         columns={1}
         onSelected={this.selectTreeSelectCalback}
-        closePopup={this.closePopup}
+        closePopup={this.props.hide}
         selectTreeFirstTitle="Annotation"
         exclusive={this.props.exclusive}
         label={this.state.label}

platform/ui/src/components/Modal/Modal.tsx

@@ -22,7 +22,7 @@ const Modal = ({
   onClose,
   children,
   shouldCloseOnOverlayClick = true,
-  movable = false,
+  isDraggable = false,
   containerDimensions = null,
   contentDimensions = null,
 }) => {
@@ -75,7 +75,7 @@ const Modal = ({
           : 'relative max-h-full w-11/12 text-white outline-none lg:w-10/12 xl:w-9/12'
       }
       overlayClassName={
-        movable
+        isDraggable
           ? 'fixed top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center py-16 pointer-events-none'
           : 'fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-center justify-center py-16'
       }
@@ -85,7 +85,7 @@ const Modal = ({
       title={title}
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
     >
-      {movable ? (
+      {isDraggable ? (
         <Draggable
           handle=".drag-handle"
           defaultClassName="bg-primary-dark pointer-events-auto"
@@ -107,7 +107,7 @@ Modal.propTypes = {
   onClose: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   shouldCloseOnOverlayClick: PropTypes.bool,
-  movable: PropTypes.bool,
+  isDraggable: PropTypes.bool,
   containerDimensions: PropTypes.string,
   contentDimensions: PropTypes.string,
 };

platform/ui/src/components/SelectTree/SelectTree.tsx

@@ -168,20 +168,9 @@ export class SelectTree extends Component<PropType> {
 
   headerItem = () => {
     const inputLeftPadding = this.props.items.length > 0 ? 'pl-8' : 'pl-4';
-    const title = this.props.selectTreeFirstTitle;
 
     return (
-      <div className="flex flex-col justify-between border-b-2 border-solid border-black p-4">
-        <div className="text-primary-active m-0 mb-5 p-2 leading-tight">
-          <span className="text-primary-light align-sub text-xl">{title}</span>
-          <div className="float-right">
-            <Icons.Close
-              className="cursor-pointer"
-              onClick={() => this.props.closePopup()}
-              fill="#a3a3a3"
-            />
-          </div>
-        </div>
+      <div className="flex flex-col justify-between border-b-2 border-solid border-black p-0.5">
         {this.props.searchEnabled && (
           <div className="flex w-full flex-col">
             {this.props.items.length > 0 && (

platform/ui/src/contextProviders/ModalProvider.tsx

@@ -31,7 +31,7 @@ const ModalProvider = ({ children, modal: Modal, service = null }) => {
     closeButton: true,
     title: null,
     customClassName: '',
-    movable: false,
+    isDraggable: false,
     containerDimensions: null,
     contentDimensions: null,
   };
@@ -78,7 +78,7 @@ const ModalProvider = ({ children, modal: Modal, service = null }) => {
     shouldCloseOnEsc,
     closeButton,
     shouldCloseOnOverlayClick,
-    movable,
+    isDraggable,
     containerDimensions,
     contentDimensions,
   } = options;
@@ -96,7 +96,7 @@ const ModalProvider = ({ children, modal: Modal, service = null }) => {
           closeButton={closeButton}
           onClose={hide}
           shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-          movable={movable}
+          isDraggable={isDraggable}
           containerDimensions={containerDimensions}
           contentDimensions={contentDimensions}
         >