forstok-ui-lib 5.13.4 → 5.13.6

package/package.json

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

package/src/assets/javascripts/function.ts

@@ -5,30 +5,30 @@ import { TObject } from '../../typeds/base.typed';
 import { errorTitle } from './helper';
 
 export const getStorage = (name: string, type: string = 'string', defaultVal?: any, loadName: string = 'load') => {
-  let result: any;
+  let result: any
   if (sessionStorage.getItem(loadName) !== null) {
-    result = sessionStorage.getItem(name) !== null ? sessionStorage.getItem(name) : defaultVal;
+    result = sessionStorage.getItem(name) !== null ? sessionStorage.getItem(name) : defaultVal
   } else {
-    result = localStorage.getItem(name) !== null ? localStorage.getItem(name) : defaultVal;
-    localStorage.getItem(name) !== null && sessionStorage.setItem(name, result);
+    result = localStorage.getItem(name) !== null ? localStorage.getItem(name) : defaultVal
+    localStorage.getItem(name) !== null && sessionStorage.setItem(name, result)
   }
   switch (type) {
     case 'boolean':
-      result = (result !== undefined && result !== 'undefined') ? (result === 'true') : false;
-      break;
+      result = (result !== undefined && result !== 'undefined') ? (result === 'true') : false
+      break
     case 'number': 
     case 'integer':
-      result = (result !== undefined && result !== 'undefined') ? parseInt(result) : 0;
-      break;
+      result = (result !== undefined && result !== 'undefined') ? parseInt(result) : 0
+      break
     case 'object':
     case 'array':
-      result = (result !== undefined && result !== 'undefined') ? JSON.parse(result) : undefined;
-      break;
+      result = (result !== undefined && result !== 'undefined') ? (typeof result === 'string' ? (result !== '' ? JSON.parse(result) : undefined) : result) : undefined
+      break  
     default:
-      result = (result === undefined || result === 'undefined') ? '' : result;
-      break;
+      result = (result === undefined || result === 'undefined') ? '' : result
+      break
   }
-  return result;
+  return result
 }
 
 export const setStorage = (name: string, value?: any, only?: string) => {

package/src/assets/stylesheets/bases.styles.ts

@@ -51,7 +51,6 @@ export const dropBase = css`
 export const headTable = css`
   font-size: 12px;
   font-weight: 600;
-  letter-spacing: 0.3px;
   text-transform: capitalize;
 `
 export const formLabel = css`

package/src/assets/stylesheets/shares.styles.ts

@@ -1807,7 +1807,6 @@ export const HeaderContainer = styled.aside`
   }
 `
 export const Title = styled.h1`
-  font-family: PT Sans;
   font-size: 22px;
   color: var(--ter-clr);
   > aside {
@@ -2445,7 +2444,6 @@ export const TabsHeader = styled.article`
   ${responseWidth}
 `
 export const TabsItem = styled.div<{ $activated?: boolean }>`
-  font-family: var(--sec-ft-fm);
   cursor: pointer;
   letter-spacing: 0.6px;
   position: relative;

package/src/components/masterTable/index.tsx

@@ -13,7 +13,7 @@ import ImageComponent from '../image';
 import TextComponent from '../text';
 import CheckboxComponent from '../checkbox';
 import LinkComponent from '../link';
-import { generateMessage, generateMessageQuestion, generateValue, validateByApproveJs } from '../../assets/javascripts/function';
+import { evGenerateValueMatch, generateMessage, generateMessageQuestion, generateValue, validateByApproveJs } from '../../assets/javascripts/function';
 
 import DateEditors from './partials/editors/date';
 import DateBareEditors from './partials/editors/date.bare';
@@ -112,7 +112,7 @@ const MasterTableComponent = (props: TMasterProps) => {
   const evChange = (head: THeadProps, value: any, idx: number, variantIdx?: number) => {
     const _type = (head?.condition === 'category') ? 'Array' :  (head.typeData || 'String');
     const _value = generateValue(_type, value);
-    const valid = head?.condition === 'category' ? validateByApproveJs(head, _value, (head?.condition[0].toUpperCase() + head?.condition.substring(1))) : validateByApproveJs(head, _value);
+    const valid = head?.condition === 'category' ? validateByApproveJs(head, _value, (head?.condition[0].toUpperCase() + head?.condition.substring(1))) : validateByApproveJs(head, _value, undefined, evGenerateValueMatch(head.validations, data?.[idx]));
     if (idx >= 0) {
       let newData = [...data];
       let newDataByIdx = newData[idx];

package/src/components/masterTable/styles.tsx

@@ -728,7 +728,6 @@ export const MasterTableBodyContent = styled.article<{ $mode?: string }>`
       background-color: var(--pri-clr-bg);
       border-bottom: 1px solid var(--sec-clr-ln);
       h3 {
-        font-size: 20px;
         padding: 11px 30px;
         color: var(---hd-clr);
       }
@@ -780,7 +779,6 @@ export const TablePopupWrapper = styled.section<{ $mode?: string }>`
       aside {
         font-size: 11px;
         line-height: 15px;
-        letter-spacing: 0.6px;
         padding-top: 6px;
         text-align: center;
         max-height: 36px;

package/src/components/popup/styles.ts

@@ -242,7 +242,6 @@ export const PopupHeader = styled.h3`
     }
   }
   @media only screen and (min-width: 768px) {
-    font-size: 20px;
     padding: 11px 30px;
   }
 `
@@ -293,7 +292,7 @@ export const PopupFooter = styled.div<{ $isLeft?: boolean }>`
   ${({ $isLeft }: { $isLeft?: boolean }) => {
     if ($isLeft) {
       return css` 
-        grid-template-columns: 40% 60%;
+        grid-template-columns: 42% 58%;
       `
     }
   }}

package/src/components/select/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
-import type { SingleValueProps, OptionProps, StylesConfig, ActionMeta, ControlProps, MultiValueProps, OnChangeValue, CSSObjectWithLabel } from 'react-select';
+import type { SingleValueProps, OptionProps, StylesConfig, ActionMeta, ControlProps, MultiValueProps, OnChangeValue, CSSObjectWithLabel, MenuListProps, MultiValueRemoveProps } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import type { CSSObject } from '@emotion/serialize';
 import { generateMessageQuestion } from '../../assets/javascripts/function';
@@ -15,6 +15,8 @@ type TSelect = {
   name?: string
   customOption?: (arg0: OptionProps) => void
   customLabel?: (arg0: SingleValueProps) => void
+  customMenuList?: (arg0: MenuListProps) => void
+  customMultiValueRemove?: (arg0: MultiValueRemoveProps) => void
   MenuList?: any
   isCreateable?: boolean
   isClearable?: boolean
@@ -42,7 +44,7 @@ type TSelect = {
   height?: string
 }
 
-const SelectComponent = ({ type, isError=false, mode, customOption, customLabel, MenuList, isCreateable=false, isClearable=false, selectKey, disabled, defaultValue, width, reset, setReset, isForceUpdate, setForceUpdate, isCheckAutoCopy, evChangeCustom, isField, evCreate, evChange, isMinOption, isMulti=false, options, name, placeholder, removeMessage, evCreateMessageQuestion, isLoading, height, ...props }: TSelect) => {
+const SelectComponent = ({ type, isError=false, mode, customOption, customLabel, MenuList, isCreateable=false, isClearable=false, selectKey, disabled, defaultValue, width, reset, setReset, isForceUpdate, setForceUpdate, isCheckAutoCopy, evChangeCustom, isField, evCreate, evChange, isMinOption, isMulti=false, options, name, placeholder, removeMessage, evCreateMessageQuestion, isLoading, height, customMenuList, customMultiValueRemove, ...props }: TSelect) => {
   const [valueState, setValue] = useState<typeof defaultValue>(defaultValue || null)
 
   useEffect(()=> {
@@ -297,6 +299,8 @@ const SelectComponent = ({ type, isError=false, mode, customOption, customLabel,
       isClearable={isClearable ? ((Array.isArray(valueState) && valueState.length) ? valueState.some((v) => !v.isFixed) : true) : isClearable}
       {...isMulti && { isMulti: true }}
       {...customOption && { components: { Option: customOption } }}
+      {...customMenuList && { components: { MenuList: customMenuList } }}
+      {...customMultiValueRemove && { components: { MultiValueRemove: customMultiValueRemove } }}
       {...MenuList && { components: { MenuList, Option: customOption } }}
       {...selectKey && { key: selectKey }}
       {...disabled && { isDisabled: disabled }}
@@ -321,6 +325,8 @@ const SelectComponent = ({ type, isError=false, mode, customOption, customLabel,
       {...customOption && { components: { Option: customOption } }}
       {...mode === 'paymentReceiveStore' && { components: { Option: customOption, SingleValue: customLabel } }}
       {...customLabel && { components: { SingleValue: customLabel } }}
+      {...customMenuList && { components: { MenuList: customMenuList } }}
+      {...customMultiValueRemove && { components: { MultiValueRemove: customMultiValueRemove } }}
       {...MenuList && { components: { MenuList, Option: customOption } }}
       {...(customLabel && customOption) && { components: { SingleValue: customLabel, Option: customOption } }}
       {...selectKey && { key: selectKey }}

package/src/typeds/shares.typed.ts

@@ -134,10 +134,10 @@ export type TInPart = {
   evCloseDropdown?: TCloseDropdownFunction
   evCreateMessage?: TMessageFunction
   evCreateMessageQuestion?: TMessageQuestionFunction
-  saveSubscription?: (statuses: (string | null)[], id: number) => void
+  saveSubscription?: (statuses: (string | null)[], id: string | number) => void
   clearSubscription?: ()=> void 
   data?: any
-  id?: string
+  id?: string | number
   evPrintReceipt?: (dataOrder: any) => void
 }