Advertisement
ronaldkwandy

default-category-list-bs.tsx

May 18th, 2022
906
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import BottomSheetDynamic from 'components-update/atoms/container/bottom-sheet-dynamic';
  2. import Divider from 'components-update/atoms/marker/divider';
  3. import Icon from 'components-update/atoms/output/icon';
  4. import { useLanguage } from 'Helpers/translation-helper';
  5. import React, { useState } from 'react';
  6. export enum DISPLAYED_CATEGORY_LIST {
  7.   NAME = 'name',
  8. }
  9.  
  10. export interface IDefaultCategoryListBs {
  11.   displayedData: DISPLAYED_CATEGORY_LIST;
  12.   onChange: (e: any) => void;
  13.   content: any;
  14.   activeId?: number;
  15.   isShown?: boolean;
  16.   testingKey?: string;
  17.   isTranslate?: boolean;
  18. }
  19.  
  20. const MemoizedDivider = React.memo(Divider);
  21. const MemoizedIcon = React.memo(Icon);
  22.  
  23. const BSText: React.FC<any> = ({
  24.   text,
  25. }) => {
  26.   return <>{useLanguage(text)}</>;
  27. };
  28.  
  29. export const DefaultCategoryListBs = (props: IDefaultCategoryListBs, ref: any) => {
  30.   const [bsOpen, setBsOpen] = useState(props.isShown);
  31.   const handleSelect = (e: any) => {
  32.     setBsOpen(false);
  33.     props.onChange && props.onChange(e);
  34.     document.body.style.overflow = 'unset';
  35.   };
  36.   React.useImperativeHandle(ref, () => ({
  37.     openModal() {
  38.       setBsOpen(true);
  39.     },
  40.   }));
  41.  
  42.   const BSContent = props.content?.map((e: any, index: number) => {
  43.     return (
  44.       <div
  45.         key={index}
  46.         onClick={() => handleSelect(e)}
  47.         className='w-full flex flex-col justify-between h-12 text-base cursor-pointer'>
  48.         <div className='w-full my-auto flex flex-row justify-between items-center'>
  49.           <p className={`${props.activeId !== e.id ? '' : 'text-cyanBlue'}`}> {props.isTranslate ? <BSText text={e[props.displayedData]} /> : e[props.displayedData]}</p>
  50.           <div className={`${props.activeId !== e.id ? 'hidden' : ''}`}>
  51.             <MemoizedIcon name='check' color='cyanBlue' size='small' />
  52.           </div>
  53.         </div>
  54.         <MemoizedDivider />
  55.       </div>
  56.     );
  57.   });
  58.  
  59.   return (
  60.     <BottomSheetDynamic show={bsOpen} close={() => setBsOpen(false)}>
  61.       <div className='w-full p-4'>
  62.         <div className='text-lg font-bold'>{useLanguage('pilih_kategori_kendala')}</div>
  63.         <div data-cy={'list-' + props.testingKey}>{BSContent}</div>
  64.       </div>
  65.     </BottomSheetDynamic>
  66.   );
  67. };
  68.  
  69. export default React.forwardRef(DefaultCategoryListBs);
  70.  
Advertisement
RAW Paste Data Copied
Advertisement