forstok-ui-lib 8.3.19 → 8.3.22

package/src/components/icon/typed.ts

@@ -1,106 +1,105 @@
-export type IconName = 
-  | 'search'
-  | 'check'
-  | 'check-grey'
-  | 'arrow-left-blue'
-  | 'edit'
-  | 'arrow'
-  | 'discount'
-  | 'cash'
-  | 'credit'
-  | 'debit'
-  | 'bank'
-  | 'qris'
-  | 'wallet'
-  | 'delivery'
-  | 'success'
-  | 'email'
-  | 'print'
-  | 'warning'
-  | 'alert'
-  | 'barcode'
-  | 'arrow-upload'
-  | 'trash'
-  | 'arrow-left'
-  | 'arrow-left-double'
-  | 'arrow-right'
-  | 'arrow-right-double'
-  | 'arrow-down'
-  | 'calendar'
-  | 'question'
-  | 'sortby'
-  | 'NotificationDownload' 
-  | 'NotificationUpload' 
-  | 'bar'
-  | 'close'
-  | 'person'
-  | 'person-red'
-  | 'cart'
-  | 'back'
-  | 'time'
-  | 'dot'
-  | 'dashboard-left-nav'
-  | 'dashboard-active-left-nav'
-  | 'chat-left-nav'
-  | 'chat-active-left-nav'
-  | 'ai-left-nav'
-  | 'ai-active-left-nav'
-  | 'reporting-left-nav'
-  | 'reporting-active-left-nav'
-  | 'activity-log-left-nav'
-  | 'activity-log-active-left-nav'
-  | 'integration-left-nav'
-  | 'integration-active-left-nav'
-  | 'setting-left-nav'
-  | 'setting-active-left-nav'
-  | 'customer-left-nav'
-  | 'customer-active-left-nav'
-  | 'marketing-left-nav'
-  | 'marketing-active-left-nav'
-  | 'product-left-nav'
-  | 'product-active-left-nav'
-  | 'inventory-left-nav'
-  | 'inventory-active-left-nav'
-  | 'order-left-nav'
-  | 'order-active-left-nav'
-  | 'price-left-nav'
-  | 'price-active-left-nav'
-  | 'invoice-left-nav'
-  | 'invoice-active-left-nav'
-  | 'warning-chat'
-  | 'check-chat'
-  | 'check-chat-blue'
-  | 'phone'
-  | 'location'
-  | 'agent'
-  | 'report'
-  | 'gender'
-  | 'birthday'
-  | 'attach'
-  | 'smile'
-  | 'voucher-left-nav'
-  | 'voucher-active-left-nav'
-  | 'analytic-left-nav'
-  | 'analytic-active-left-nav'
-  | 'label-left-nav'
-  | 'label-active-left-nav'
-  | 'questions'
-  | 'faq'
-  | 'api'
-  | 'gift'
-  | 'document'
-  | 'video'
-  | 'image'
-  | 'emoji'
-  | 'price'
-  | 'thumb'
-  | 'clipboard'
-  | 'reload'
-  | 'arrow-down-grey'
-  | 'cross'
-  | 'link-green'
-  | 'info'
+export type IconName =
+  | "search"
+  | "check"
+  | "check-grey"
+  | "arrow-left-blue"
+  | "edit"
+  | "arrow"
+  | "discount"
+  | "cash"
+  | "credit"
+  | "debit"
+  | "bank"
+  | "qris"
+  | "wallet"
+  | "delivery"
+  | "success"
+  | "email"
+  | "print"
+  | "warning"
+  | "alert"
+  | "barcode"
+  | "arrow-upload"
+  | "trash"
+  | "arrow-left"
+  | "arrow-left-double"
+  | "arrow-right"
+  | "arrow-right-double"
+  | "arrow-down"
+  | "calendar"
+  | "question"
+  | "sortby"
+  | "NotificationDownload"
+  | "NotificationUpload"
+  | "bar"
+  | "close"
+  | "person"
+  | "person-red"
+  | "cart"
+  | "back"
+  | "time"
+  | "dot"
+  | "dashboard-left-nav"
+  | "dashboard-active-left-nav"
+  | "chat-left-nav"
+  | "chat-active-left-nav"
+  | "ai-left-nav"
+  | "ai-active-left-nav"
+  | "reporting-left-nav"
+  | "reporting-active-left-nav"
+  | "activity-log-left-nav"
+  | "activity-log-active-left-nav"
+  | "integration-left-nav"
+  | "integration-active-left-nav"
+  | "setting-left-nav"
+  | "setting-active-left-nav"
+  | "customer-left-nav"
+  | "customer-active-left-nav"
+  | "marketing-left-nav"
+  | "marketing-active-left-nav"
+  | "product-left-nav"
+  | "product-active-left-nav"
+  | "inventory-left-nav"
+  | "inventory-active-left-nav"
+  | "order-left-nav"
+  | "order-active-left-nav"
+  | "price-left-nav"
+  | "price-active-left-nav"
+  | "invoice-left-nav"
+  | "invoice-active-left-nav"
+  | "warning-chat"
+  | "check-chat"
+  | "check-chat-blue"
+  | "phone"
+  | "location"
+  | "agent"
+  | "report"
+  | "gender"
+  | "birthday"
+  | "attach"
+  | "smile"
+  | "voucher-left-nav"
+  | "voucher-active-left-nav"
+  | "analytic-left-nav"
+  | "analytic-active-left-nav"
+  | "label-left-nav"
+  | "label-active-left-nav"
+  | "questions"
+  | "faq"
+  | "api"
+  | "gift"
+  | "document"
+  | "video"
+  | "image"
+  | "emoji"
+  | "price"
+  | "thumb"
+  | "clipboard"
+  | "reload"
+  | "arrow-down-grey"
+  | "cross"
+  | "link-green"
+  | "info"
+  | "headphone";
 
-export type IconMode = 
-  | 'filter'
-  | 'disabled'
+export type IconMode = "filter" | "disabled";

package/src/components/table/index.tsx

@@ -1,120 +1,181 @@
-import { isValidElement, useEffect } from 'react'
+import { isValidElement, useEffect } from "react";
 
-import { TableContainer, TableHeadRow, TableHeadColumn, TableBodyRow, TableBodyColumn, TableFootRow, TableFootColumn, TableFinalRow, TableFinalColumn, TableBoldFootRow, TableBoldFootColumn } from './style'
+import {
+  TableContainer,
+  TableHeadRow,
+  TableHeadColumn,
+  TableBodyRow,
+  TableBodyColumn,
+  TableFootRow,
+  TableFootColumn,
+  TableFinalRow,
+  TableFinalColumn,
+  TableBoldFootRow,
+  TableBoldFootColumn,
+} from "./style";
 
-import type { TTable } from './typed'
+import type { TTable } from "./typed";
 
-const nameDefValue = `table_${new Date().getTime()}`
+const nameDefValue = `table_${new Date().getTime()}`;
 
 const TableComponent = (props: TTable) => {
   const {
     children,
     $mode,
-    $name=nameDefValue,
+    $name = nameDefValue,
     $template,
     isForceUpdate,
-    setForceUpdate
-  } = props
+    setForceUpdate,
+  } = props;
 
   useEffect(() => {
     if (isForceUpdate) {
-      setForceUpdate && setForceUpdate(false)
+      setForceUpdate && setForceUpdate(false);
     }
-  }, [isForceUpdate, setForceUpdate])
+  }, [isForceUpdate, setForceUpdate]);
 
   const evGenerateEl = (part: string) => {
-    return children.filter(child => {
+    return children.filter((child) => {
       if (isValidElement(child)) {
-        return (child.props as any)['aria-label'] === part
+        return (child.props as any)["aria-label"] === part;
       } else {
-        return null 
+        return null;
       }
-    })
-  }
+    });
+  };
 
   const evGenerateChildrenArrEl = (childrenFilter: any) => {
-    let childrenArray: any[] = []
+    let childrenArray: any[] = [];
     if (childrenFilter.length) {
       if (childrenFilter[0].props.children.length > 1) {
-        let newArrayBodyChildren: any[] = []
+        let newArrayBodyChildren: any[] = [];
         childrenFilter[0].props.children.forEach((body: any) => {
-          let _bodyArray = Array.isArray(body) ? body : [].concat(body)
+          let _bodyArray = Array.isArray(body) ? body : [].concat(body);
           _bodyArray.forEach((_body: any) => {
-            newArrayBodyChildren.push(_body)
-          })
-        })
-        childrenArray = newArrayBodyChildren
+            newArrayBodyChildren.push(_body);
+          });
+        });
+        childrenArray = newArrayBodyChildren;
       } else {
-        childrenArray = Array.isArray(childrenFilter[0].props.children) ? childrenFilter[0].props.children : [].concat(childrenFilter[0].props.children)
+        childrenArray = Array.isArray(childrenFilter[0].props.children)
+          ? childrenFilter[0].props.children
+          : [].concat(childrenFilter[0].props.children);
       }
     }
-    return childrenArray
-  }
-  
-  const HeadChildrenFilter = evGenerateEl('head')
-  const TableHeadEl = (HeadChildrenFilter && isValidElement(HeadChildrenFilter[0])) ? (HeadChildrenFilter[0] as any).props.children.filter((head: any) => head !== null).map((head: any, index: number) => 
-    <TableHeadColumn 
-      key={index} 
-      role='columnheader' 
-      {...head.props.style && {style: head.props.style}} 
-      {...head.props.className && {className: head.props.className}} 
-      {...head.props}
-    >{head.props.children}</TableHeadColumn>) : null
-  
-  const BodyChildrenFilter = evGenerateEl('body')
-  const BodyChildrenArray = BodyChildrenFilter.length ? evGenerateChildrenArrEl(BodyChildrenFilter) : null
-  const TableBodyEl = BodyChildrenArray ? BodyChildrenArray.map((body: any, index: number) => 
-    <TableBodyRow 
-      key={index} 
-      role='row' 
-      {...body.props?.id && {id: body.props.id}} 
-      {...body.props?.className && {className: body.props.className}}
-    >
-      {body.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
-        <TableBodyColumn key={indexChild} {...child.props}>{child.props.children}</TableBodyColumn>
-      )}
-    </TableBodyRow>) : null
+    return childrenArray;
+  };
+
+  const HeadChildrenFilter = evGenerateEl("head");
+  const TableHeadEl =
+    HeadChildrenFilter && isValidElement(HeadChildrenFilter[0])
+      ? (HeadChildrenFilter[0] as any).props.children
+          .filter((head: any) => head !== null)
+          .map((head: any, index: number) => (
+            <TableHeadColumn
+              key={index}
+              role="columnheader"
+              {...(head.props.style && { style: head.props.style })}
+              {...(head.props.className && { className: head.props.className })}
+              {...head.props}
+            >
+              {head.props.children}
+            </TableHeadColumn>
+          ))
+      : null;
+
+  const BodyChildrenFilter = evGenerateEl("body");
+  const BodyChildrenArray = BodyChildrenFilter.length
+    ? evGenerateChildrenArrEl(BodyChildrenFilter)
+    : null;
+  const TableBodyEl = BodyChildrenArray
+    ? BodyChildrenArray.map((body: any, index: number) => (
+        <TableBodyRow
+          key={index}
+          role="row"
+          {...(body.props?.id && { id: body.props.id })}
+          {...(body.props.style && { style: body.props.style })}
+          {...(body.props?.className && { className: body.props.className })}
+          {...body.props}
+        >
+          {body.props.children
+            .filter((child: any) => child !== null)
+            .map((child: any, indexChild: number) => (
+              <TableBodyColumn key={indexChild} {...child.props}>
+                {child.props.children}
+              </TableBodyColumn>
+            ))}
+        </TableBodyRow>
+      ))
+    : null;
 
-  const FootChildrenFilter = evGenerateEl('foot')
-  const FootChildrenArray = FootChildrenFilter.length ? evGenerateChildrenArrEl(FootChildrenFilter) : null
-  const TableFootEl = FootChildrenArray ? FootChildrenArray.map((foot: any, index: number) => 
-    <TableFootRow key={index} role='row'>
-      {foot.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
-        <TableFootColumn key={indexChild} {...child.props}>{child.props.children}</TableFootColumn>
-      )}
-    </TableFootRow>) : null
+  const FootChildrenFilter = evGenerateEl("foot");
+  const FootChildrenArray = FootChildrenFilter.length
+    ? evGenerateChildrenArrEl(FootChildrenFilter)
+    : null;
+  const TableFootEl = FootChildrenArray
+    ? FootChildrenArray.map((foot: any, index: number) => (
+        <TableFootRow key={index} role="row">
+          {foot.props.children
+            .filter((child: any) => child !== null)
+            .map((child: any, indexChild: number) => (
+              <TableFootColumn key={indexChild} {...child.props}>
+                {child.props.children}
+              </TableFootColumn>
+            ))}
+        </TableFootRow>
+      ))
+    : null;
 
-  const BoldFootChildrenFilter = evGenerateEl('boldFoot')
-  const BoldFootChildrenArray = BoldFootChildrenFilter.length ? evGenerateChildrenArrEl(BoldFootChildrenFilter) : null
-  const TableBoldFootEl = BoldFootChildrenArray ? BoldFootChildrenArray.map((boldFoot: any, index: number) =>
-    <TableBoldFootRow key={index} role='row'>
-      {boldFoot.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
-        <TableBoldFootColumn key={indexChild} {...child.props}>{child.props.children}</TableBoldFootColumn>
-      )}
-    </TableBoldFootRow>) : null
+  const BoldFootChildrenFilter = evGenerateEl("boldFoot");
+  const BoldFootChildrenArray = BoldFootChildrenFilter.length
+    ? evGenerateChildrenArrEl(BoldFootChildrenFilter)
+    : null;
+  const TableBoldFootEl = BoldFootChildrenArray
+    ? BoldFootChildrenArray.map((boldFoot: any, index: number) => (
+        <TableBoldFootRow key={index} role="row">
+          {boldFoot.props.children
+            .filter((child: any) => child !== null)
+            .map((child: any, indexChild: number) => (
+              <TableBoldFootColumn key={indexChild} {...child.props}>
+                {child.props.children}
+              </TableBoldFootColumn>
+            ))}
+        </TableBoldFootRow>
+      ))
+    : null;
 
-  const FinalChildrenFilter = evGenerateEl('final')
-  const FinalChildrenArray = FinalChildrenFilter.length ? evGenerateChildrenArrEl(FinalChildrenFilter) : null
-  const TableFinalEl =  (FinalChildrenArray) ? FinalChildrenArray.map((finalFoot: any, index: number) =>
-    <TableFinalRow key={index} role='row'>
-      {finalFoot.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
-        <TableFinalColumn key={indexChild} {...child.props}>{child.props.children}</TableFinalColumn>)}
-      </TableFinalRow>) : null
+  const FinalChildrenFilter = evGenerateEl("final");
+  const FinalChildrenArray = FinalChildrenFilter.length
+    ? evGenerateChildrenArrEl(FinalChildrenFilter)
+    : null;
+  const TableFinalEl = FinalChildrenArray
+    ? FinalChildrenArray.map((finalFoot: any, index: number) => (
+        <TableFinalRow key={index} role="row">
+          {finalFoot.props.children
+            .filter((child: any) => child !== null)
+            .map((child: any, indexChild: number) => (
+              <TableFinalColumn key={indexChild} {...child.props}>
+                {child.props.children}
+              </TableFinalColumn>
+            ))}
+        </TableFinalRow>
+      ))
+    : null;
 
   return (
-    <TableContainer 
-      $mode={$mode} 
-      $name={$name} 
-      $template={$template} 
-      role='table'
+    <TableContainer
+      $mode={$mode}
+      $name={$name}
+      $template={$template}
+      role="table"
     >
-      <TableHeadRow role='rowheader'>{TableHeadEl}</TableHeadRow>
+      <TableHeadRow role="rowheader">{TableHeadEl}</TableHeadRow>
       {TableBodyEl}
       {TableFootEl && TableFootEl}
       {TableBoldFootEl && TableBoldFootEl}
       {TableFinalEl && TableFinalEl}
     </TableContainer>
-  )
-}
+  );
+};
 
-export default TableComponent
+export default TableComponent;