forstok-ui-lib 3.0.1 → 4.0.0

package/src/components/popup/popup.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode, isValidElement, useEffect, useRef, useCallback } from 'react';
+import ReactTooltip from 'react-tooltip';
+import { useStateWithCallbackLazy } from 'use-state-with-callback';
+import ButtonComponent from '../button/button';
+import IconComponent from '../icon/icon';
+import { PopupPanel, PopupOverlay, PopupContainer, PopupWrapper, PopupHeaderWrapper, PopupHeader, PopupBody, PopupFooter, PopupQuestionWrapper } from './popup.styles';
+import type { TPopup } from './popup.typed';
+
+type TPopupOtherProp = {
+  children: ReactNode[]
+  'data-qa-id'?: string
+}
+
+let timerHandle:ReturnType<typeof setTimeout> 
+const PopupComponent = ({ children, body, mode, height, width, isOpen, evTooglePopup, ...props }: TPopup & TPopupOtherProp) => {
+  const [isOpenWrapper, setOpenWrapper] = useStateWithCallbackLazy<boolean>(false);
+
+  const popupContainerRef = useRef<HTMLElement | null>(null);
+  useEffect(() => { ReactTooltip.rebuild(); }, [])
+
+  const evOpen = useCallback((isOpen: boolean) => {
+    timerHandle = setTimeout(() => {
+      setOpenWrapper(isOpen, () => {
+        const popupContainerEl = (popupContainerRef && popupContainerRef.current) ? popupContainerRef.current :  null;
+        popupContainerEl && (popupContainerEl.scrollTop = 0);
+      });
+      clearTimeout(timerHandle);
+    }, 1);
+  }, [setOpenWrapper])
+
+  const initialize = () => {
+    evOpen(isOpen);
+  }
+  const initRef = useRef({ init: initialize });
+
+  useEffect(() => {
+    const { init } = initRef.current;
+    init();
+
+    return(() => {
+      clearTimeout(timerHandle);
+    })
+  }, []) 
+
+  useEffect(()=> {
+    evOpen(isOpen);
+  }, [isOpen, evOpen])
+
+  let newChildren = [...children];
+  const HeadChildrenFilter = newChildren?.filter((child: any) => isValidElement(child) && (child.props as any)['aria-label'] === 'head') || null;
+  const SubHeadChildrenFilter = newChildren?.filter((child: any) => isValidElement(child) && (child.props as any)['aria-label'] === 'sub-head') || null;
+  const BodyChildrenFilter = newChildren?.filter((child: any) => isValidElement(child) && (child.props as any)['aria-label'] === 'body') || null;
+  const FootChildrenFilter = newChildren?.filter((child: any) => isValidElement(child) && (child.props as any)['aria-label'] === 'foot') || null;
+  const LeftFootChildrenFilter = newChildren?.filter((child: any) => isValidElement(child) && (child.props as any)['aria-label'] === 'left-foot') || null;
+  const SubHeadChildrenEl = SubHeadChildrenFilter.length ? <aside>{(SubHeadChildrenFilter[0] && isValidElement(SubHeadChildrenFilter[0])) ? (SubHeadChildrenFilter[0].props as any).children : null}</aside> : null;
+  const popupHeaderQaId = HeadChildrenFilter.length ? (HeadChildrenFilter[0] && isValidElement(HeadChildrenFilter[0])) ? (HeadChildrenFilter[0].props as any)['data-qa-id'] : '' : '';
+        
+  return (
+    <PopupPanel $isOpen={isOpen}>
+      <PopupOverlay />
+      <PopupContainer ref={popupContainerRef} {...props['data-qa-id'] && { 'data-qa-id': props['data-qa-id'] }}>
+        {
+          mode === 'question' ? (
+            <PopupWrapper $isOpen={isOpenWrapper}>
+              <PopupQuestionWrapper $width={width}>
+                <IconComponent $name='warning' $width='30px' />
+                <PopupHeaderWrapper $mode={mode}>
+                  { HeadChildrenFilter.length ? <PopupHeader>{(HeadChildrenFilter[0] && isValidElement(HeadChildrenFilter[0])) ? (HeadChildrenFilter[0].props as any).children : null}</PopupHeader> : null }
+                  {SubHeadChildrenEl}
+                  { FootChildrenFilter.length ? <PopupFooter>{(FootChildrenFilter[0] && isValidElement(FootChildrenFilter[0])) ? <aside data-type={(FootChildrenFilter[0].props as any).type || ""}>{(FootChildrenFilter[0].props as any).children}</aside> : null}</PopupFooter> : null }
+                </PopupHeaderWrapper>
+              </PopupQuestionWrapper>
+            </PopupWrapper>
+          ) : (
+            <>
+              <PopupHeaderWrapper $width={width} $isOpen={isOpenWrapper} $mode={mode}>
+                {HeadChildrenFilter.length ? <><ButtonComponent $mode='round-close' onClick={evTooglePopup}></ButtonComponent><PopupHeader data-qa-id={popupHeaderQaId}>{(HeadChildrenFilter[0] && isValidElement(HeadChildrenFilter[0])) && (HeadChildrenFilter[0].props as any).children}</PopupHeader></> : null}
+              </PopupHeaderWrapper>
+              <PopupWrapper $width={width} $isOpen={isOpenWrapper} $withHeader={HeadChildrenFilter.length ? true : false}>
+                {SubHeadChildrenEl}
+                { BodyChildrenFilter.length ? <PopupBody $mode={body} $width={width} $height={height}>{(BodyChildrenFilter[0] && isValidElement(BodyChildrenFilter[0])) && (BodyChildrenFilter[0].props as any).children}</PopupBody> : null }
+                { FootChildrenFilter.length ? <PopupFooter $isLeft={LeftFootChildrenFilter.length ? true : false}><aside>{(LeftFootChildrenFilter && LeftFootChildrenFilter.length && LeftFootChildrenFilter[0] && isValidElement(LeftFootChildrenFilter[0])) ? (LeftFootChildrenFilter[0].props as any).children : null}</aside>{(FootChildrenFilter[0] && isValidElement(FootChildrenFilter[0])) ? <aside data-type={(FootChildrenFilter[0].props as any).type || ""}>{mode && mode === 'info' ? <ButtonComponent $mode='white' $size='small' onClick={evTooglePopup}>Close</ButtonComponent> : <ButtonComponent $mode='white' $size='small' onClick={evTooglePopup} data-qa-id='popup-button-cancel'>Cancel</ButtonComponent>}{(FootChildrenFilter[0].props as any).children}</aside> : null}</PopupFooter> : null }
+              </PopupWrapper>
+            </>
+          )
+        }
+      </PopupContainer>
+    </PopupPanel>
+  )
+}
+
+export default PopupComponent

package/src/components/popup/popup.typed.ts

@@ -0,0 +1,33 @@
+import type { MouseEvent } from 'react'
+
+import type { TMessageFunction } from '../message/message.typed'
+
+export type TPopupOpenFunction = (e: MouseEvent, el?: string) => void
+
+export type TPopupFunctionParam = {
+  mode?: string | null
+  path?: string | null
+  action?: string | null
+  detail?: any
+}
+
+export type TPopupFunction = (props?: TPopupFunctionParam) => void
+
+export type TPopupFunctionGroup = {
+  evTooglePopup?: TPopupFunction
+  evCreateMessage?: TMessageFunction
+  evForcePopUp?: TPopupFunction
+}
+
+export type TPopupContainer = {
+  isOpen: boolean
+} & Required<TPopupFunctionParam> & Required<TPopupFunctionGroup>
+
+
+export type TPopup = {
+  isOpen: boolean
+  body?: string
+  height?: string|number 
+  width?: string|number
+  type?: string
+} & TPopupFunctionParam & TPopupFunctionGroup

package/src/components/portal/react_portal.tsx

@@ -0,0 +1,37 @@
+import { useState, useLayoutEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+  const wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', wrapperId);
+  document.body.appendChild(wrapperElement);
+  return wrapperElement;
+}
+
+function ReactPortalComponent({ children, wrapperId='popup-portal' }:{ children: ReactNode, wrapperId?: string }) {
+  const [wrapperElement, setWrapperElement] = useState<Element | DocumentFragment>();
+
+  useLayoutEffect(() => {
+    let element = document.getElementById(wrapperId);
+    let systemCreated = false;
+    if (!element) {
+      systemCreated = true;
+      element = createWrapperAndAppendToBody(wrapperId);
+    }
+    setWrapperElement(element);
+
+    return () => {
+      if (systemCreated && (element && element.parentNode)) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  }, [wrapperId])
+
+  if (typeof wrapperElement === 'undefined') {
+    return <></>;
+  }
+
+  return createPortal(children, wrapperElement);
+}
+
+export default ReactPortalComponent;

package/src/typeds/shares.typed.ts

@@ -1,3 +1,8 @@
+import { TObject } from './base.typed';
+import { TCloseDropdownFunction } from '../components/dropdown/dropdown.typed';
+import { TMessageFunction, TMessageQuestionFunction } from '../components/message/message.typed';
+import { TPopupFunction, TPopupOpenFunction } from '../components/popup/popup.typed';
+
 export type TUser = {
   profile_id: number,
   profile_name: string,
@@ -15,4 +20,17 @@ export type TUser = {
     shopee_partner_key: string
   },
   has_access_orderV1: boolean
+}
+export type THierarchy = {
+  evTooglePopup?: TPopupFunction
+  evCreateMessage?: TMessageFunction
+  evForcePopUp?: TPopupFunction
+  isOpenPopup: boolean
+  modePopup: string
+  pathPopup: string
+  actionPopup: string
+  detailPopup?: TObject
+  evOpenPopup?: TPopupOpenFunction
+  evCloseDropdown?: TCloseDropdownFunction
+  evCreateMessageQuestion?: TMessageQuestionFunction
 }