forstok-ui-lib 5.2.11 → 5.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.11",
+  "version": "5.2.13",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -42,6 +42,7 @@
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
+    "react-select-async-paginate": "^0.7.9",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",

package/src/assets/images/icons/trash.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#808080" width="100%" height="100%" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 44.5235 48.6602 L 46.1407 14.3945 L 48.4844 14.3945 C 49.4454 14.3945 50.2187 13.5976 50.2187 12.6367 C 50.2187 11.6758 49.4454 10.8555 48.4844 10.8555 L 38.2422 10.8555 L 38.2422 7.3398 C 38.2422 3.9883 35.9688 1.8086 32.3595 1.8086 L 23.5938 1.8086 C 19.9844 1.8086 17.7344 3.9883 17.7344 7.3398 L 17.7344 10.8555 L 7.5391 10.8555 C 6.6016 10.8555 5.7813 11.6758 5.7813 12.6367 C 5.7813 13.5976 6.6016 14.3945 7.5391 14.3945 L 9.8829 14.3945 L 11.5000 48.6836 C 11.6641 52.0586 13.8907 54.1914 17.2657 54.1914 L 38.7579 54.1914 C 42.1095 54.1914 44.3595 52.0351 44.5235 48.6602 Z M 21.4844 7.5742 C 21.4844 6.2383 22.4688 5.3008 23.8751 5.3008 L 32.1016 5.3008 C 33.5313 5.3008 34.5157 6.2383 34.5157 7.5742 L 34.5157 10.8555 L 21.4844 10.8555 Z M 17.6173 50.6758 C 16.2579 50.6758 15.2500 49.6445 15.1797 48.2852 L 13.5391 14.3945 L 42.3907 14.3945 L 40.8438 48.2852 C 40.7735 49.6680 39.7891 50.6758 38.4063 50.6758 Z M 34.9610 46.5508 C 35.7344 46.5508 36.3204 45.9180 36.3438 45.0273 L 37.0469 20.2773 C 37.0704 19.3867 36.4610 18.7305 35.6641 18.7305 C 34.9376 18.7305 34.3282 19.4102 34.3048 20.2539 L 33.6016 45.0273 C 33.5782 45.8711 34.1641 46.5508 34.9610 46.5508 Z M 21.0626 46.5508 C 21.8595 46.5508 22.4454 45.8711 22.4219 45.0273 L 21.7188 20.2539 C 21.6954 19.4102 21.0626 18.7305 20.3360 18.7305 C 19.5391 18.7305 18.9532 19.3867 18.9766 20.2773 L 19.7032 45.0273 C 19.7266 45.9180 20.2891 46.5508 21.0626 46.5508 Z M 29.4298 45.0273 L 29.4298 20.2539 C 29.4298 19.4102 28.7969 18.7305 28.0235 18.7305 C 27.2500 18.7305 26.5938 19.4102 26.5938 20.2539 L 26.5938 45.0273 C 26.5938 45.8711 27.2500 46.5508 28.0235 46.5508 C 28.7735 46.5508 29.4298 45.8711 29.4298 45.0273 Z"/></svg>

package/src/components/icon/styles.ts

@@ -21,6 +21,7 @@ import IconPrint from '../../assets/images/icons/print.svg';
 import IconWarning from '../../assets/images/icons/warning.svg';
 import IconAlert from '../../assets/images/icons/alert.svg';
 import IconBarcode from '../../assets/images/icons/barcode.svg';
+import IconTrash from '../../assets/images/icons/trash.svg'
 
 const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: string, $name: string, $width?: string | number, onClick?: (e: MouseEvent<HTMLElement>) => void }) => {
   let style = ``;
@@ -172,6 +173,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break;
+    case 'trash': 
+      style += `
+        &:before { 
+          content: url(${IconTrash}); 
+        }
+      `
+      break;
     default: 
       break;
   }

package/src/components/select/async.paginate.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { OnChangeValue, OptionProps, GroupBase, ActionMeta, StylesConfig, CSSObjectWithLabel, ControlProps } from 'react-select'
+import { AsyncPaginate } from 'react-select-async-paginate'
+import type { LoadOptions } from 'react-select-async-paginate'
+import { CSSObject } from '@emotion/serialize'
+import type { TLoadOption, TOption } from './typed'
+import { TState } from '../../typeds'
+
+type TSelect = {
+  customOption?: (arg0: OptionProps) => void
+  MenuList?: any
+  evChange?: (newValue: OnChangeValue<TOption, false>, actionMeta?: ActionMeta<TOption>) => void
+  defaultValue?: OnChangeValue<TOption, boolean>
+  loadOptions: TLoadOption | LoadOptions<unknown, GroupBase<unknown>, unknown>
+  loadOptionsOnMenuOpen?: boolean
+  noOptionsMessage?: ((obj: {
+    inputValue: string;
+  }) => React.ReactNode)
+  isSearchable?: boolean
+  isClearable?: boolean
+  placeholder?: string
+  isMenuOpen?: boolean
+  setMenuIsOpen: TState<boolean|undefined>
+  isForceUpdate: boolean
+  setForceUpdate: TState<boolean>
+}
+
+const SelectAsyncPaginate = ({ loadOptions, isForceUpdate, setForceUpdate, ...props }:TSelect) => {
+  const { customOption, MenuList, defaultValue, evChange, loadOptionsOnMenuOpen, noOptionsMessage, isSearchable, placeholder, isMenuOpen, setMenuIsOpen } = props;
+  const [valueSelect, setValueSelect] = useState<typeof defaultValue>(defaultValue || null);
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      setValueSelect(defaultValue || null); 
+      setForceUpdate(false);
+    }
+  }, [defaultValue, isForceUpdate, setForceUpdate, setValueSelect]);
+
+  const handleChange = (value: OnChangeValue<TOption, boolean>, actionMeta?: ActionMeta<TOption>) => {
+    const newValue = value as OnChangeValue<TOption, false>;
+    setValueSelect(newValue ? { value: newValue.value, label : newValue.label } : newValue);
+    evChange && evChange(newValue, actionMeta);
+  }
+
+  const customStyles: StylesConfig<TOption, boolean> = {
+    container: (provided: CSSObject) => ({
+      ...provided,
+      display: 'inline-block',
+      width: '100%',
+      minHeight: '1px',
+      textAlign: 'left',
+      border: 'none',
+    } as CSSObjectWithLabel),
+    control: (provided: CSSObject, state:ControlProps<TOption, boolean>) => ({
+      ...provided,
+      borderRadius: '4px',
+      minHeight: '1px',
+      cursor: 'pointer',
+      borderWidth:  '1px' ,
+      boxShadow: 'none',
+    } as CSSObjectWithLabel),
+    input: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      margin: '0 2px',
+      padding: '0',
+      'input': {
+        boxShadow: 'none !important'
+      }
+    } as CSSObjectWithLabel),
+    singleValue: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingBottom: '2px',
+      color: 'initial',
+    } as CSSObjectWithLabel),
+    option: (provided: CSSObject, state: OptionProps<TOption, boolean>) => ({
+      ...provided,
+      color: state.isSelected ? '#ffffff' : '#000000',
+      backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#ec5b62',
+        color: '#ffffff'
+      }
+    } as CSSObjectWithLabel), 
+    menuPortal: (provided: CSSObject) => ({ 
+      ...provided, 
+      zIndex: 9999,
+      letterSpacing: 'normal',
+      lineHeight: 'normal',
+    } as CSSObjectWithLabel)
+  }
+
+  const onMenuOpen = useCallback(() => {
+    setMenuIsOpen(true);
+  }, [setMenuIsOpen]);
+
+  const onMenuClose = useCallback(() => {
+    setMenuIsOpen(false);
+  }, [setMenuIsOpen]);
+
+  return  <div className='_refContainer'>
+            <AsyncPaginate
+              isSearchable={isSearchable}
+              placeholder={placeholder}
+              debounceTimeout={500}
+              styles={customStyles} 
+              loadOptions={loadOptions}
+              menuPortalTarget={document.body}
+              menuPosition='fixed'
+              menuPlacement='auto'
+              value={valueSelect}
+              onChange={handleChange}
+              loadOptionsOnMenuOpen={loadOptionsOnMenuOpen}
+              noOptionsMessage={noOptionsMessage}
+              menuIsOpen={isMenuOpen}
+              onMenuOpen={onMenuOpen}
+              onMenuClose={onMenuClose}
+              {...customOption && { components: { Option: customOption } }}
+              {...MenuList && { components: { MenuList } }}
+              {...props} />
+          </div>
+}
+
+export default SelectAsyncPaginate

package/src/components/select/typed.ts

@@ -1,4 +1,4 @@
-import type { OnChangeValue } from 'react-select';
+import type { ActionMeta, OnChangeValue } from 'react-select';
 import type { TChannel } from '../../typeds/shares.typed';
 
 export type TOption = {
@@ -17,4 +17,20 @@ export type TOption = {
   }[]
 }
 
-export type TOnChangeValue = OnChangeValue<TOption, boolean>
+export type TLoadOption = (search: string, callback: () => void, { endCursor }: {
+  endCursor: string;
+}) => Promise<{
+  options: any;
+  hasMore: any;
+  additional?: {
+      endCursor: any;
+  };
+} | {
+  options: never[];
+  hasMore: boolean;
+  additional?: undefined;
+} | undefined>
+
+export type TOnChangeValue = OnChangeValue<TOption, boolean>
+
+export type TActionMeta = ActionMeta<TOption>