forstok-ui-lib 6.18.2 → 6.19.0

package/package.json

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

package/src/assets/images/navs/left/price-active.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04591 11.603C1.88716 10.4435 1.3074 9.86449 1.09215 9.11224C0.876149 8.35998 1.06065 7.56123 1.42965 5.96447L1.6419 5.04346C1.95166 3.69945 2.10691 3.02745 2.56666 2.56694C3.02641 2.10644 3.69917 1.95194 5.04318 1.64219L5.96418 1.42919C7.56169 1.06093 8.3597 0.876433 9.11195 1.09168C9.86421 1.30769 10.4432 1.88744 11.602 3.0462L12.9745 4.41871C14.9927 6.43622 16 7.44423 16 8.69674C16 9.94999 14.992 10.958 12.9752 12.9748C10.9577 14.9923 9.94971 16.0003 8.69645 16.0003C7.44394 16.0003 6.43519 14.9923 4.41842 12.9755L3.04591 11.603Z" stroke="#086de0"/>
+<path d="M11.0423 11.0434C11.4811 10.6031 11.5403 9.9506 11.1743 9.58384C10.8083 9.21709 10.1551 9.27709 9.71556 9.7166C9.27681 10.1561 8.62355 10.2153 8.25755 9.84935C7.89155 9.48334 7.9508 8.83009 8.3903 8.39134M8.3903 8.39134L8.1248 8.12583M8.3903 8.39134C8.63855 8.14233 8.95505 8.01633 9.2498 8.01858M11.3071 11.3081L11.0416 11.0426C10.7416 11.3434 10.3403 11.4664 9.99981 11.3959" stroke="#086de0" stroke-linecap="round"/>
+<path d="M7.01599 7.21985C7.60178 6.63406 7.60178 5.6843 7.01599 5.09851C6.4302 4.51272 5.48044 4.51272 4.89465 5.09851C4.30886 5.6843 4.30886 6.63406 4.89465 7.21985C5.48044 7.80564 6.4302 7.80564 7.01599 7.21985Z" stroke="#086de0"/>
+</svg>

package/src/assets/images/navs/left/price.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.04591 11.603C1.88716 10.4435 1.3074 9.86449 1.09215 9.11224C0.876149 8.35998 1.06065 7.56123 1.42965 5.96447L1.6419 5.04346C1.95166 3.69945 2.10691 3.02745 2.56666 2.56694C3.02641 2.10644 3.69917 1.95194 5.04318 1.64219L5.96418 1.42919C7.56169 1.06093 8.3597 0.876433 9.11195 1.09168C9.86421 1.30769 10.4432 1.88744 11.602 3.0462L12.9745 4.41871C14.9927 6.43622 16 7.44423 16 8.69674C16 9.94999 14.992 10.958 12.9752 12.9748C10.9577 14.9923 9.94971 16.0003 8.69645 16.0003C7.44394 16.0003 6.43519 14.9923 4.41842 12.9755L3.04591 11.603Z" stroke="black"/>
+<path d="M11.0423 11.0434C11.4811 10.6031 11.5403 9.9506 11.1743 9.58384C10.8083 9.21709 10.1551 9.27709 9.71556 9.7166C9.27681 10.1561 8.62355 10.2153 8.25755 9.84935C7.89155 9.48334 7.9508 8.83009 8.3903 8.39134M8.3903 8.39134L8.1248 8.12583M8.3903 8.39134C8.63855 8.14233 8.95505 8.01633 9.2498 8.01858M11.3071 11.3081L11.0416 11.0426C10.7416 11.3434 10.3403 11.4664 9.99981 11.3959" stroke="black" stroke-linecap="round"/>
+<path d="M7.01599 7.21985C7.60178 6.63406 7.60178 5.6843 7.01599 5.09851C6.4302 4.51272 5.48044 4.51272 4.89465 5.09851C4.30886 5.6843 4.30886 6.63406 4.89465 7.21985C5.48044 7.80564 6.4302 7.80564 7.01599 7.21985Z" stroke="black"/>
+</svg>

package/src/components/icon/styles.ts

@@ -60,6 +60,8 @@ import IconOrderLeftNav from '../../assets/images/navs/left/order.svg'
 import IconProductActiveLeftNav from '../../assets/images/navs/left/products-active.svg'
 import IconInventoryActiveLeftNav from '../../assets/images/navs/left/inventory-active.svg'
 import IconOrderActiveLeftNav from '../../assets/images/navs/left/order-active.svg'
+import IconPriceLeftNav from '../../assets/images/navs/left/price.svg';
+import IconPriceActiveLeftNav from '../../assets/images/navs/left/price-active.svg';
 import IconWarningChat from '../../assets/images/icons/warning-agent.svg';
 import IconCheckChat from '../../assets/images/icons/check.svg';
 import IconCheckChatBlue from '../../assets/images/icons/check-blue.svg';
@@ -527,6 +529,20 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break;
+    case 'price-left-nav': 
+      style += `
+        &:before { 
+          content: url(${IconPriceLeftNav}); 
+        }
+      `
+      break;
+    case 'price-active-left-nav': 
+      style += `
+        &:before { 
+          content: url(${IconPriceActiveLeftNav}); 
+        }
+      `
+      break;
     case 'warning-chat': 
       style += `
         &:before { 

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