forstok-ui-lib 6.18.3 → 6.19.0

package/package.json

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

package/src/components/select/all.tsx

@@ -0,0 +1,189 @@
+import { useRef } from 'react'
+import ReactSelect, { ActionMeta, MultiValue, CSSObjectWithLabel, ControlProps, GroupBase } from 'react-select'
+import type { CSSObject } from '@emotion/serialize'
+
+import { TOption } from './typed'
+
+type TSelect = {
+  mode?: string
+  isError?: boolean
+  'data-qa-id'?: string
+  value: MultiValue<any>
+  options: TOption[] | null
+  evChange: (newValue: any[], actionMeta: ActionMeta<any>) => void
+}
+
+const SelectAll = (props: TSelect) => {
+  const {
+    isError=false,
+    value,
+    options,
+    mode,
+    evChange,
+    ...rest 
+  } = props
+
+  const valueRef = useRef(value as MultiValue<any> | null)
+  valueRef.current = value
+
+  const placeholder = mode === 'store' ? 'Stores' : 'Categories'
+  const selectAllOption = {
+    value: "*",
+    label: "All "+placeholder
+  };
+  const isSelectAllSelected = () => valueRef.current?.length === options?.length
+  const getOptions = () => options ? [selectAllOption, ...options] : [selectAllOption]
+
+  const isOptionSelected = (option: { value: string }) => {
+    return valueRef.current?.some(({ value }: { value: string }) => value === option.value) || isSelectAllSelected()
+  }
+
+  const getValue = () => (valueRef.current && valueRef.current.length >= 5) ? [{ 
+    value: value, 
+    label: `${valueRef.current?.length} ${placeholder}`}
+  ] : isSelectAllSelected() ? [selectAllOption] : value
+
+  const handleChange = (newValue: MultiValue<any>, actionMeta: ActionMeta<any>) => {
+    if (!options) {
+      return false
+    }
+    const { action, option, removedValue } = actionMeta
+    let _newValue = newValue ? [...newValue] : null
+    const mergeVal = (newValue && newValue.length && Array.isArray(newValue[0].value)) ? newValue[0].value : null
+    let result: any[] = []
+    if (action === "select-option" && option.value === selectAllOption.value) {
+      result = options
+    } else if ((action === "deselect-option" && 
+      option.value === selectAllOption.value) || 
+        (action === "remove-value" && removedValue.value === selectAllOption.value)) {
+      result = []
+    } else if (actionMeta.action === "deselect-option" && isSelectAllSelected()) {
+      result = options.filter(({ value }: { value: string }) => value !== option.value)
+    } else if (actionMeta.action === "remove-value" && mergeVal) {
+      valueRef.current = null
+      result = []
+    } else if (actionMeta.action === "deselect-option") {
+      if (mergeVal) {
+        _newValue = mergeVal.filter(({ value }: { value: string }) => value !== option.value)
+        valueRef.current = _newValue
+      } else {
+        _newValue = newValue.filter(({ value }: { value: string }) => value !== option.value)
+      }
+      result = _newValue || []
+    } else {
+      if (mergeVal) {
+        _newValue = [...mergeVal, newValue[1]]
+        valueRef.current = _newValue
+      }
+      result = _newValue || []
+    }
+    evChange(result, actionMeta)
+  }
+
+  const customStyles = {
+    container: (provided: CSSObject) => ({
+      ...provided,
+      display: 'inline-block',
+      minHeight: '1px',
+      textAlign: 'left',
+      border: 'none',
+    } as CSSObjectWithLabel),
+    control: (provided: CSSObjectWithLabel, state:ControlProps<{ value: string; }, true, GroupBase<TOption>>) => ({
+      ...provided,
+      borderRadius: '.5rem',
+      cursor: 'pointer',
+      minHeight: mode === 'store' ? '30px': '38px',
+      borderWidth: isError ? '1px' : '0',
+      boxShadow: (state.isFocused) ? '-.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset' : '0rem -.0625rem 0rem 0rem #b5b5b5 inset,0rem 0rem 0rem .0625rem rgba(0, 0, 0, .1) inset,0rem .03125rem 0rem .09375rem #FFF inset',
+      borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? '#ffffff' : ' var(--ck-clr-ln)' )),
+      background: state.isFocused ? 'rgba(247, 247, 247, 1)' : '#ffffff',
+      '&:hover': {
+        borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? '#ffffff' : ' var(--ck-clr-ln)' )),
+        background: 'rgba(250, 250, 250, 1)',
+        color: 'rgba(48, 48, 48, 1)'
+      }
+    } 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',
+    } as CSSObjectWithLabel),
+    indicatorSeparator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      height: '24px',
+      display: 'none'
+    } as CSSObjectWithLabel),
+    clearIndicator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      marginRight: '-6px',
+      padding: '0'
+    } as CSSObjectWithLabel),
+    valueContainer: (provided: CSSObject) => ({
+      ...provided,
+      height: '30px',
+      overflow: 'auto',
+      paddingTop: '0',
+      paddingBottom: '0',
+      paddingRight: '2px',
+    } as CSSObjectWithLabel),
+    menuPortal: (provided: CSSObject) => ({ 
+      ...provided, 
+      zIndex: 9999,
+      letterSpacing: 'normal',
+      lineHeight: 'normal',
+    } as CSSObjectWithLabel),
+    option: (provided: CSSObject, state: { isSelected: any }) => ({
+      ...provided,
+      color: state.isSelected ? '#ffffff' : '#000000',
+      backgroundColor: state.isSelected ? '#fc5c64' : 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#ec5b62',
+        color: '#ffffff'
+      }
+    } as CSSObjectWithLabel),
+    menu: (provided: CSSObject) => ({
+      ...provided,
+      borderRadius: '.75rem',
+      boxShadow: '0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)',
+      border: 'none'
+    } as CSSObjectWithLabel)
+  }
+
+  return (
+    <div className='_refContainer' {...rest['data-qa-id'] && {'data-qa-id': rest['data-qa-id']}}>
+      <ReactSelect
+        isOptionSelected={isOptionSelected}
+        styles={customStyles} 
+        menuPortalTarget={document.body}
+        options={getOptions()}
+        value={getValue()}
+        onChange={handleChange}
+        hideSelectedOptions={false}
+        closeMenuOnSelect={false}
+        isMulti
+      />
+    </div>
+  )
+}
+
+export default SelectAll