forstok-ui-lib 5.0.2 → 5.1.0

package/src/components/select/index.tsx

@@ -0,0 +1,331 @@
+import { useEffect, useState } from 'react';
+import ReactSelect from 'react-select';
+import type { SingleValueProps, OptionProps, StylesConfig, ActionMeta, ControlProps, MultiValueProps, OnChangeValue, CSSObjectWithLabel } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import type { CSSObject } from '@emotion/serialize';
+import { generateMessageQuestion } from '../../assets/javascripts/function';
+import type { TState, TObject } from '../../typeds/base.typed';
+import type { TMessageQuestionFunction } from '../message/typed';
+import type { TOption } from './typed';
+
+type TSelect = {
+  type?: string
+  mode?: string
+  isError?: boolean
+  name?: string
+  customOption?: (arg0: OptionProps) => void
+  customLabel?: (arg0: SingleValueProps) => void
+  MenuList?: any
+  isCreateable?: boolean
+  isClearable?: boolean
+  selectKey?: string
+  disabled?: boolean
+  width?: string | number
+  reset?: boolean
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+  isCheckAutoCopy?: boolean
+  isField?: boolean
+  isMulti?: boolean
+  evCreate?: (value: string) => void
+  evChange?: (newValue: OnChangeValue<TOption, boolean>, actionMeta?: ActionMeta<TOption>) => void
+  evChangeCustom? : (key: string, value: any) => void
+  defaultValue?: OnChangeValue<TOption, boolean>
+  options: TOption[] | null
+  isMinOption?: boolean
+  placeholder?: string
+  'data-qa-id'?: string
+  removeMessage?: TObject
+  evCreateMessageQuestion?: TMessageQuestionFunction
+}
+
+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, ...props }: TSelect) => {
+  const [valueState, setValue] = useState<typeof defaultValue>(defaultValue || null)
+
+  useEffect(()=> {
+    if (reset) {
+      setValue(null);
+      setReset && setReset(false);
+    }
+    if (isForceUpdate) {
+      let changeValue = defaultValue;
+      if (isCheckAutoCopy) {
+        if (changeValue) {
+          let isChanging = false;
+          if (isMulti) {
+            let _changeValue = changeValue as OnChangeValue<TOption, true>;
+            if (Array.isArray(_changeValue) && _changeValue.length) {
+              let newValue = [] as OnChangeValue<TOption, true>;
+              for (const _value of _changeValue) {
+                const optionFilter = options?.filter(opt => (opt.label === _value.label && opt.value === _value.value) );
+                if (optionFilter?.length && Array.isArray(newValue)) {
+                  newValue.push(_value);
+                }
+                else { 
+                  !isChanging && (isChanging = true);
+                }
+              }
+              newValue.length && (_changeValue = newValue);
+            }
+          } else {
+            let _changeValue = changeValue as OnChangeValue<TOption, false>;
+            if (_changeValue) {
+              const optionFilter = options?.filter(opt => _changeValue && (opt.label === _changeValue.label && opt.value === _changeValue.value) );
+              if (optionFilter?.length) {
+                changeValue = null;
+                isChanging = true;
+              }
+            }
+          }
+          (isChanging && name) && evChangeCustom && evChangeCustom(name, changeValue);
+        }
+      }
+      setValue(changeValue);
+      setForceUpdate && setForceUpdate(false);
+    }
+  }, [defaultValue, evChangeCustom, isCheckAutoCopy, isForceUpdate, isMulti, name, options, reset, setForceUpdate, setReset])
+  
+  const evToogleSelect = () => {
+    const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
+    if (containerRef.length) {
+      for (let i = 0; i < containerRef.length; i++) {
+        containerRef[i].classList.remove('is-shown');
+      }
+    } 
+  }
+
+  const handleChange = (value: OnChangeValue<TOption, typeof isMulti>, { action, removedValue, option }: any) => {
+    if (isMulti) {
+      const newValue = value as OnChangeValue<TOption, true>;
+      const removeCallback = () => {
+        setValue(newValue);
+        evChange && evChange(newValue, { action, removedValue, option });
+      }
+      switch (action) {
+        case 'remove-value':
+          if (isMinOption) {
+            if (action === 'remove-value' && (Array.isArray(valueState) && valueState.length === 1)) {
+              return false;
+            }
+          }
+          if (removedValue.isFixed) {
+            return;
+          }
+          break;
+        case 'pop-value':
+          if (removedValue.isFixed) {
+            return;
+          }
+          break;
+        case 'clear':
+          value = options?.filter((v) => v.isFixed) || [];
+          break;
+        default:
+          break;
+      }
+      if (removeMessage && action === 'remove-value') {
+        const _confirm_props = generateMessageQuestion('confirm', removeMessage?.title || '', removeMessage?.subtitle || '', removeCallback);
+        evCreateMessageQuestion && evCreateMessageQuestion(_confirm_props);
+        return false;
+      } else {
+        setValue(newValue);
+        evChange && evChange(newValue, { action, removedValue, option });
+      }
+    } else {
+      const newValue = value as OnChangeValue<TOption, false>;
+      mode === 'paymentReceiveStore' ? setValue(newValue ? { value: newValue.value, label : newValue.label, channel: newValue.channel } : newValue) : setValue(newValue ? { value: newValue.value, label : newValue.label } : newValue);
+      evChange && evChange(newValue, { action, removedValue, option });
+    }
+    (!isMulti && isField && evChangeCustom && name) && evChangeCustom(name, value);
+  }
+  
+  const handleBlur = () => {
+    (isField && evChangeCustom && name && valueState) && evChangeCustom(name, valueState);
+  }
+
+  const handleCreate = (inputValue: string) => {
+    setReset && setReset(false);
+    if (isMulti) {
+      !Array.isArray(valueState) ? setValue([{ value: inputValue, label : inputValue }]) : setValue([...valueState, { value: inputValue, label : inputValue }]);
+    }
+    else {
+      setValue({ value: inputValue, label : inputValue });
+    }
+    evCreate && evCreate(inputValue);
+  }
+
+  const isValidNewOption = (inputValue: string, selectOptions: TOption[]) => {
+    return !(inputValue.trim().length === 0 || selectOptions.find(option => option.name === inputValue)); 
+  }
+
+  const customStyles: StylesConfig<TOption, typeof isMulti> = {
+    container: (provided: CSSObject) => ({
+      ...provided,
+      display: 'inline-block',
+      width: width ? width+'px' : '100%',
+      minHeight: '1px',
+      textAlign: 'left',
+      border: 'none',
+    } as CSSObjectWithLabel),
+    control: (provided: CSSObject, state:ControlProps<TOption, typeof isMulti>) => ({
+      ...provided,
+      borderRadius: mode === 'filter' ? 'var(--sec-rd)' : 'var(--ter-rd)',
+      minHeight:  mode === 'picklist' ? '30px': '1px',
+      height: mode === 'orders' ? '90px' : '30px',
+      maxHeight: mode === 'picklist' ? '46px': 'none',
+      cursor: 'pointer',
+      borderWidth:  '1px' ,
+      boxShadow: (state.isFocused && mode === 'filter') ? 'var(--act-shd-bx)' : 'none',
+      borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? 'var(--ter-clr-ln)' : ' var(--ck-clr-ln)' )),
+      background: mode ==='filter' ? 'var(--ter-clr-ln)' : '',
+      overflow: mode === 'picklist' ? 'hidden': (mode === 'orders' ? 'auto' : 'initial'),
+      alignItems:  mode === 'orders' ? 'start' : 'center',
+      padding:  mode === 'orders' ? '6px 0' : 'unset',
+      '&:hover': {
+        borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? 'var(--ter-clr-ln)' : ' var(--ck-clr-ln)' )),
+      }
+    } as CSSObjectWithLabel),
+    placeholder: (provided: CSSObject) => ({
+      ...provided,
+      fontStyle: 'italic'
+    } as CSSObjectWithLabel),
+    input: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      margin: '0 2px',
+      padding: '0',
+      'input': {
+        boxShadow: 'none !important'
+      }
+    } as CSSObjectWithLabel),
+    dropdownIndicator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingTop: '0',
+      paddingBottom: '0',
+      paddingLeft: '2px',
+      paddingRight: '2px',
+      color: '#757575',
+      alignSelf:  mode === 'orders' ? 'start' : 'unset',
+    } as CSSObjectWithLabel),
+    indicatorSeparator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      height: '24px',
+      display: (type=== 'tag') ? 'block' : 'none'
+    } as CSSObjectWithLabel),
+    clearIndicator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      marginRight: '-6px',
+      padding: '0'
+    } as CSSObjectWithLabel),
+    valueContainer: (provided: CSSObject) => ({
+      ...provided,
+      height: '30px',
+      maxHeight: mode === 'picklist' ? '46px': 'none',
+      minHeight:  mode === 'picklist' ? '30px': '1px',
+      overflow: mode === 'picklist' ? 'auto': 'initial',
+      paddingTop: '0',
+      paddingBottom: '0',
+      paddingRight: '2px',
+    } as CSSObjectWithLabel),
+    singleValue: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingBottom: '2px',
+      color: (disabled? '#ADADAD' : (mode === 'form' ? '#2d3c48' : 'initial')),
+      opacity: disabled ? '.7' : 1,
+    } as CSSObjectWithLabel),
+    option: (provided: CSSObject, state: OptionProps<TOption, typeof isMulti>) => ({
+      ...provided,
+      color: state.isSelected ? '#ffffff' : '#000000',
+      backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#ec5b62',
+        color: '#ffffff'
+      }
+    } as CSSObjectWithLabel),
+    menu: (provided: CSSObject) => ({
+      ...provided,
+      borderRadius: mode === 'filter' ? 'var(--sec-rd)' : 'var(--ter-rd)',
+    } as CSSObjectWithLabel), 
+    menuPortal: (provided: CSSObject) => ({ 
+      ...provided, 
+      zIndex: 9999,
+      letterSpacing: 'normal',
+      lineHeight: 'normal',
+    } as CSSObjectWithLabel),
+    multiValue: (base: any, state: MultiValueProps<TOption, typeof isMulti>) => {
+      return state.data.isFixed ? { ...base, backgroundColor: 'gray' } : base
+    },
+    multiValueLabel: (base: any, state: MultiValueProps<TOption, typeof isMulti>) => {
+      return state.data.isFixed ? { ...base, fontWeight: 'bold', color: 'white', paddingRight: 6 } : base
+    },
+    multiValueRemove: (provided: CSSObject, state: MultiValueProps<TOption, typeof isMulti>) => ({
+      ...provided,
+      display: state.data.isFixed ? 'none' : 'block',
+      'svg': {
+        position: 'relative',
+        top: '2px'
+      }
+    } as CSSObjectWithLabel),
+  }
+
+  let SelectEl = isCreateable  ?   
+    <CreatableSelect
+      options={options}
+      styles={customStyles} 
+      onMenuOpen={evToogleSelect}
+      menuPortalTarget={document.body}
+      menuPosition='fixed'
+      menuPlacement='auto'
+      value={valueState}
+      onChange={handleChange}
+      // onInputChange={handleInputChange}
+      onCreateOption= {handleCreate}
+      isValidNewOption={isValidNewOption}
+      noOptionsMessage={() => null} 
+      isClearable={isClearable ? ((Array.isArray(valueState) && valueState.length) ? valueState.some((v) => !v.isFixed) : true) : isClearable}
+      {...isMulti && { isMulti: true }}
+      {...customOption && { components: { Option: customOption } }}
+      {...MenuList && { components: { MenuList, Option: customOption } }}
+      {...selectKey && { key: selectKey }}
+      {...disabled && { isDisabled: disabled }}
+      {...isMulti && { closeMenuOnSelect: false }}
+      {...isMulti && { onBlur: handleBlur }}
+      {...placeholder && { placeholder }}
+      {...props} />
+      : 
+    <ReactSelect 
+      options={options}
+      styles={customStyles} 
+      onMenuOpen={evToogleSelect}
+      menuPortalTarget={document.body}
+      menuPosition='fixed'
+      menuPlacement='auto'
+      value={valueState}
+      onChange={handleChange}
+      noOptionsMessage={() => null} 
+      isClearable={isClearable ? ((Array.isArray(valueState) && valueState.length) ? valueState.some((v) => !v.isFixed) : true) : isClearable}
+      {...isMulti && { isMulti: true }}
+      {...customOption && { components: { Option: customOption } }}
+      {...mode === 'paymentReceiveStore' && { components: { Option: customOption, SingleValue: customLabel } }}
+      {...MenuList && { components: { MenuList, Option: customOption } }}
+      {...selectKey && { key: selectKey }}
+      {...disabled && { isDisabled: disabled }}
+      {...isMulti && { closeMenuOnSelect: false }}
+      {...isMulti && { onBlur: handleBlur }}
+      {...placeholder && { placeholder }}
+      {...props} />
+  
+  return (
+    <section className='_refContainer' {...props}>
+      {SelectEl}
+    </section>
+  )
+}
+
+export default SelectComponent

package/src/components/select/styles.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const SelectCheckboxContainer = styled.section`
+  max-width: 530px;
+`

package/src/components/select/typed.ts

@@ -0,0 +1,16 @@
+import type { TChannel } from '../../typeds/shares.typed';
+
+export type TOption = {
+  readonly value: any
+  readonly label: string
+  readonly name?: string
+  readonly isFixed?: boolean
+  readonly channel?: Omit<TChannel, 'stores'>
+  postalCode?: string
+  localId?: string
+  option?: {
+    readonly value: any
+    readonly label: string
+    localId?: string
+  }[]
+}

package/src/typeds/shares.typed.ts

@@ -33,4 +33,24 @@ export type THierarchy = {
   evOpenPopup?: TPopupOpenFunction
   evCloseDropdown?: TCloseDropdownFunction
   evCreateMessageQuestion?: TMessageQuestionFunction
+}
+export type TChannel = {
+  channelName?: string
+  channelInitials?: string
+  channelColor?: string
+  channelImage?: string
+  channelId?: number
+  name?: string | null
+  initials?: string | null
+  color?: string | null
+  icon?: string | null
+  id?: number | null
+  totalStores?: number
+  Stores?: {
+    id?: number
+    storeName?: string
+    storeImage?: string
+    storeImageName?: string
+  }[]
+  availableAPI?: boolean | null
 }

package/tsconfig.json

@@ -22,8 +22,7 @@
   },
   "include": [
     "src",
-    "src/declarations.d.ts"
-  ],
+    "src/declarations.d.ts" ],
   "exclude": [
     "node_modules", 
     "dist"