forstok-ui-lib 6.20.2 → 6.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.20.2",
+  "version": "6.21.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/javascripts/function.ts

@@ -113,6 +113,27 @@ export const currencyNumber = (value?: number | null) => {
   return (value !== undefined  && value !== null) ? value.toLocaleString('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }) : '-'
 }
 
+export const generateSUM = (names: string[] | string, data: any, type?: string) => {
+  let result: number = 0
+  if (data && names) {
+    result = data.reduce((_sum: any, cur: any) => {
+      let _name
+      if (Array.isArray(names)) {
+        _name = cur
+        for (const name of names) {
+          if (name in _name) {
+            _name = _name[name]
+          }
+        }
+      } else {
+        _name = cur[names]
+      }
+      return _sum + (type === 'currency' ? parseInt(_name.replace(/,.*|[^0-9]/g, '')) : _name)
+    }, 0)
+  }
+  return result
+}
+
 export const evUpdateInputRc = (input?: HTMLInputElement, value?: string | number) => {
   if (!input) {
     return false;

package/src/assets/javascripts/helper.ts

@@ -1,11 +1,11 @@
-import { TObject } from '../../typeds';
+import { BodyContentMode, TObject } from '../../typeds';
 
 export const dateRangeStatus = (value: string) => {
   const statusObj: TObject = { 'today': 'Today', 'lastweek': 'Last 7 days', 'lastsecondweek': 'Last 14 days', 'lastmonth': 'Last 30 days', 'lastquart': 'Last 90 days', 'custom': 'Date' }
   return statusObj[value]
 }
 
-export const pageMasterTable = (value: string) => {
+export const pageMasterTable = (value?: BodyContentMode) => {
   switch (value) {
     case 'create-master': case 'edit-master':
       return 'master'
@@ -154,6 +154,15 @@ export const typePage = (value?: string) => {
   }
 }
 
+export const isCustomVariantChannel = (channelId: number) => {
+  let result = false
+  if (channelId !== undefined) {
+    const listCompareChannels = [9, 3, 12, 10030, 15, 13] //blibli, lazada, shopee, tiktok, tokopedia, zalora
+    result = listCompareChannels.includes(channelId)
+  }
+  return result
+}
+
 export const historyType = (name?: string) => {
   if(!name) return ''
   switch(name) {

package/src/components/index.ts

@@ -24,7 +24,6 @@ export { default as DateComponent } from './date';
 export { default as DateTimeComponent } from './datetime';
 export { default as RadioComponent } from './radio';
 export { default as SwitchComponent } from './switch';
-export { default as MasterTableComponent } from './masterTable';
 export { default as ListComponent } from './list';
 
 export * from './message/typed';

package/src/components/link/index.tsx

@@ -1,9 +1,12 @@
 import type { AnchorHTMLAttributes, ReactNode, MouseEvent, HTMLAttributes } from 'react';
+
 import { AnchorLinkContainer, ElLinkContainer } from './styles';
 
+import { LinkMode } from './typed'
+
 type TLinkBase = {
   children: ReactNode
-  mode?: string
+  mode?: LinkMode
   $activated?: boolean
   $elipsis?: boolean
   $shadow?: boolean

package/src/components/link/styles.ts

@@ -1,28 +1,10 @@
-import styled, { css } from 'styled-components';
-import { multiElipsis } from '../../assets/stylesheets/bases.styles';
+import { Link } from 'react-router-dom'
+import styled, { css } from 'styled-components'
 
-import IconXLS from '../../assets/images/icons/xls.svg'
+import IconXls from '../../assets/images/icons/xls.svg'
+import { multiElipsis } from '../../assets/stylesheets/bases.styles'
+import { LinkMode } from './typed'
 
-const ClearStyles = css`
-  color: var(--pri-clr-lnk);
-  &, 
-  &:hover {
-    text-decoration: none;
-  }
-  &:hover {
-    color: var(--pri-clr-lnk__hvr);
-  }
-`
-const ClearRStyles = css`
-  color: var(--pri-clr-lnk);
-  &, 
-  &:hover {
-    text-decoration: none;
-  }
-  &:hover {
-    color: var(--sec-clr-lnk__hvr);
-  }
-`
 const ButtonStyles = css`
   position: relative;
   display: inline-grid;
@@ -38,132 +20,158 @@ const ButtonStyles = css`
     text-decoration: none;
   }
 `
-const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight, disabled }:{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }) => {
-  let style = ``;
-  if (mode === 'clear') {
-    style += ClearStyles
-  } else if (mode === 'clearR') {
-    style += ClearRStyles
-  } else if (mode === 'blue') {
-    style += `
-      &, &:hover {
-        color: var(--pri-clr-lnk__hvr);
-        text-decoration: none;
-      }
-    `
-  } else if (mode === 'trans') {
-    style += ButtonStyles + `
-      height: auto;
-      padding: 0;
-      opacity: 1;
-      &, 
-      &:hover { 
-        color: var(--pri-clr-lnk__hvr);
-        text-decoration: none;
-      }  
-      &:hover {
-        opacity: .9; 
-      }
-    `
-  } else if (mode === 'hover') {
-    style += ButtonStyles + `
-      height: auto;
-      width: max-content;
-      padding: 3px 6px;
-      position: relative;
-      left: -6px;
-      color: initial;
-      grid-gap: 4px;
-      &:hover { 
-        border-radius: var(--ter-rd);
-        box-shadow: 1px 1px var(--pri-clr-ln);
-        background-color: var(--mt-clr-bg__fc);
-        text-decoration: none;
-      }
-    `
-  } else if (mode === 'whiteB') {
-    style += ButtonStyles + `
-      color: var(--ter-clr);
-      background-color: var(--cl-clr-bg);
-      border: 1px solid var(--sec-clr-ln);
-      &, 
-      &:hover { 
-        background-color: var(--cl-clr-bg__hvr);
-      }  
-    `
-  } else if (mode === 'redB') {
-    style += ButtonStyles + `
-      color: var(--act-clr);
-      background-color: var(--act-clr-bg);
-      &:hover {
-        background-color: var(--act-clr-bg__hvr);
-      } 
-    `
-  } else if (mode === 'greyB') {
-    style += ButtonStyles + `
-      color: var(--act-clr);
+const modeStyles = {
+  clear: css`
+    color: var(--pri-clr-lnk);
+    &, 
+    &:hover {
+      text-decoration: none;
+    }
+    &:hover {
+      color: var(--pri-clr-lnk__hvr);
+    }
+  `,
+  clearR: css`
+    color: var(--pri-clr-lnk);
+    &, 
+    &:hover {
+      text-decoration: none;
+    }
+    &:hover {
+      color: var(--sec-clr-lnk__hvr);
+    }
+  `,
+  blue: css`
+    &, 
+    &:hover {
+      color: var(--pri-clr-lnk__hvr);
+      text-decoration: none;
+    }
+  `,
+  trans: css`
+    ${ButtonStyles}
+    height: auto;
+    padding: 0;
+    opacity: 1;
+    &, 
+    &:hover { 
+      color: var(--pri-clr-lnk__hvr);
+      text-decoration: none;
+    }  
+    &:hover {
+      opacity: .9; 
+    }
+  `,
+  hover: css`
+    ${ButtonStyles}
+    height: auto;
+    width: max-content;
+    padding: 3px 6px;
+    position: relative;
+    left: -6px;
+    color: initial;
+    grid-gap: 4px;
+    &:hover { 
+      border-radius: var(--ter-rd);
+      box-shadow: 1px 1px var(--pri-clr-ln);
       background-color: var(--mt-clr-bg__fc);
-      &:hover {
-        background-color: var(--cl-clr-bg__hvr);
-      } 
-    `
-  }
-  if ($activated) {
-    style += `
-      color: var(--sta-clr);
-      font-weight: 400;
-    `
-    if (mode === 'clear' || mode === 'clearR') { 
-      style += `
-        color: var(--pri-clr-lnk__act);
-        font-weight: 600;
-      `
+      text-decoration: none;
     }
-  }
-  if ($elipsis) {
-    style += `
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: block;
-      max-width: 100%;
-      width: auto;
-      ${multiElipsis}
-    `
-  }
-  if ($shadow) {
-    style += `
-      box-shadow: var(--act-shd-bx);
-    `
-  }
-  if ($iconRight === 'xls') {
-    style += `
-      position: relative;
-      padding-right: 21px;
-      &:before { 
-        content: url(${IconXLS}); 
-        position: absolute;
-        right: 0px;
-        top: -4px;
-        width: 18px;
-        height: 18px;
-      }
-    `
-  }
-  if(disabled) {
-    style += `
-      color: #A9A9A9;
-      opacity: 0.7;
-      pointer-events: none;
-    `
-  } 
-  return style;
-}
+  `,
+  whiteB: css`
+    ${ButtonStyles}
+    color: var(--ter-clr);
+    background-color: var(--cl-clr-bg);
+    border: 1px solid var(--sec-clr-ln);
+    &, 
+    &:hover { 
+      background-color: var(--cl-clr-bg__hvr);
+    }  
+  `,
+  redB: css`
+    ${ButtonStyles}
+    color: var(--act-clr);
+    background-color: var(--act-clr-bg);
+    &:hover {
+      background-color: var(--act-clr-bg__hvr);
+    } 
+  `,
+  greyB: css`
+    ${ButtonStyles}
+    color: var(--act-clr);
+    background-color: var(--mt-clr-bg__fc);
+    &:hover {
+      background-color: var(--cl-clr-bg__hvr);
+    } 
+  `,
+  table: css`
+    display: block;
+    width: 100%;
+    text-wrap: wrap;
+    word-wrap: break-word;
+    font-size: 13px;
+  `
+} as const
+const getLinkModifiedStyled = ({ mode, $elipsis, $activated, $shadow, $iconRight, disabled }:{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }) => css`
+  ${mode && modeStyles[mode]}
+
+  ${$activated && css`
+    color: var(--sta-clr);
+    font-weight: 400;
+  `}
+
+  ${(mode === 'clear' || mode === 'clearR') && css`
+    font-weight: ${$activated ? '600' : 'normal'};
+    color: ${$activated ? 'var(--pri-clr-lnk__act) !important' : 'inherit'};
+  `}
+
+  ${$elipsis && css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    max-width: 100%;
+    width: auto;
+    ${multiElipsis}
+  `}
 
-export const AnchorLinkContainer = styled.a<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
+  ${$shadow && css`
+    box-shadow: var(--act-shd-bx);
+  `}
+
+  ${$iconRight === 'xls' && css`
+    position: relative;
+    padding-right: 21px;
+    &:before { 
+      content: url(${IconXls}); 
+      position: absolute;
+      right: 0px;
+      top: -4px;
+      width: 18px;
+      height: 18px;
+    }
+  `}
+
+  ${disabled && css`
+    color: #A9A9A9;
+    opacity: 0.7;
+    pointer-events: none;
+  `}
+`
+export const AnchorLinkContainer = styled.a<{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
   ${getLinkModifiedStyled}
 `
-export const ElLinkContainer = styled.span<{ mode?: string, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
+
+export const ElLinkContainer = styled.span<{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
   cursor:pointer;
   ${getLinkModifiedStyled}
+`
+
+export const LinkContainer = styled(Link)<{ mode?: LinkMode, $elipsis: boolean, $activated: boolean, $shadow: boolean, $iconRight?: string, disabled: boolean }>`
+  &._refHoverLink {
+    padding: 3px 0px 0px 6px;
+    position: relative;
+    top: -3px;
+  }
+  ${getLinkModifiedStyled}
 `

package/src/components/link/typed.ts

@@ -0,0 +1,10 @@
+export type LinkMode = 
+  | 'clear'
+  | 'clearR'
+  | 'blue'
+  | 'trans'
+  | 'hover'
+  | 'whiteB'
+  | 'redB'
+  | 'greyB'
+  | 'table'

package/src/typeds/shares.typed.ts

@@ -1,6 +1,5 @@
 import { Dispatch, JSX } from 'react';
 import { TChangeEvent, TMouseEvent, TObject, TPage, TState, TUPage } from './base.typed';
-import { TCustomField, TAutoCopy } from '../components/masterTable/typed';
 import { TMessageFunction, TMessageQuestionFunction } from '../components/message/typed';
 import { TPopupFunction, TPopupOpenFunction } from '../components/popup/typed';
 import { TOption } from '../components/select/typed';
@@ -85,30 +84,7 @@ export type THeadProps = {
   placeholder?: string
   isHidden?: boolean
   showFormat?: string
-}
-export type TMasterProps = {
-  data: any
-  setData: any
-  headerColumns: THeadProps[]
-  evCreateMessage?: TMessageFunction 
-  evCreateMessageQuestion?: TMessageQuestionFunction
-  type?: string
-  isLessField?: boolean
-  isForceUpdateField?: boolean 
-  setForceUpdateField?: TState<boolean> 
-  evOpenPopup?: TPopupOpenFunction
-  autoCopy?: TAutoCopy
-  setAutoCopy?: TState<TAutoCopy>
-  isAutoCopyField?: boolean
-  resultPopup?: TObject | null
-  setResultPopup?: TState<TObject | null>
-  evCheckAllValidation?: any
-  dataCustomField?: TCustomField[] 
-  setDataCustomField?: TState<TCustomField[]>
-  isRemovable?: boolean
-  isForceUpdate?: boolean
-  setForceUpdate?: TState<boolean>
-  evPickAll?: TMouseEvent
+  containOfType?: string[] | null
 }
 
 export type TInData<TData = never> = {
@@ -320,4 +296,28 @@ export type modeTable =
   | 'price'
   | 'price'
   | 'price-full'
-  | 'price-mid'
+  | 'price-mid'
+
+export type BodyContentStyle = 
+  | 'create-return'
+  | 'create-price'
+  | 'create-adjustment'
+  | 'create-outbound'
+  | 'confirm-inbound' 
+  | 'confirm-outbound' 
+  | 'confirm-adjustment' 
+
+export type BodyContentMode = BodyContentStyle 
+  | 'create-promotion'
+  | 'create-inbound'
+  | 'create-transfer'
+  | 'create-picklist'
+  | 'edit-picklist'
+  | 'create-package'
+  | 'edit-master'
+  | 'putaway-inbound'
+  | 'create-paymentreceive'
+  | 'create-master'
+  | 'create-listing'
+  | 'create-adjustment'
+  | 'edit-listing'