forstok-ui-lib 5.3.6 → 5.4.4

package/src/components/masterTable/typed.ts

@@ -0,0 +1,87 @@
+import type { JSX } from 'react';
+import type { TMouseEvent, TObject, TState } from '../../typeds/base.typed';
+import type { THeadProps } from '../../typeds/shares.typed';
+import { TPopupOpenFunction } from '../popup/typed';
+
+export type TAutoCopyObj = {
+  category: string
+  copy : {
+    id: number
+    accountIds: number[]
+  }[]
+  channelId?: number
+  start? : {
+    accId: number
+    id: number
+  }
+  keys?: string[]
+}
+
+export type TAutoCopy = TAutoCopyObj[]
+
+export type TCustomField = {
+  accountId: number
+  header: any
+  id: number
+}
+
+export type TEditorProps = {
+  head: THeadProps
+  value: any
+  height?: number | string
+  idx: number 
+  evChange: (head: THeadProps, value: any, idx: number, variantIdx?: number) => void
+  evCloseEditor: (callback?: () => void) => void
+  variantIdx?: number
+  evOpenPopup?: TPopupOpenFunction
+  error: string
+  resultPopup?: TObject | null
+  setResultPopup?: TState<TObject | null>
+  content?: any
+  type?: string
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+}
+
+export type TReloadField = {
+  ids: number[] 
+  accountIds: number[] 
+  start? : {
+    accId: number
+    id: number
+  }
+  isFirst?: boolean
+  next?: {
+    keyAlias: string
+    value: any
+  }
+} | undefined
+
+export type TFieldEditorProps = {
+  custom: any
+  content: any
+  idx: number
+  defaultValue?: any
+  name: string
+  isError?: string | TObject[]
+  'data-qa-id'?: string  
+  'data-tip'?: string
+  'data-place'?: string
+  'data-type'?: string
+  evChangeCustom?: (key: string, value: any) => void
+}
+
+export type TDataPartial = {
+  data: any
+  heightContent?: number
+  firstHeaderColumnsWidth: number
+  evCheckbox: TMouseEvent
+  headerColumns: THeadProps[]
+  switchEditor: (idx: number, head: THeadProps, valueKey: any, error: string, variantIdx?: number, height?: number | string, content?: any) => JSX.Element
+  totalColGroupWidth?: number
+  lastHeaderColumnsWidth: number
+  evRemove: TMouseEvent
+  type?: string
+  isRemovable?: boolean
+  evPickAll?: TMouseEvent
+}

package/src/components/switch/index.tsx

@@ -0,0 +1,52 @@
+import { type ChangeEvent, type InputHTMLAttributes, useState, useEffect } from 'react';
+import { SwitchContainer, InputContainer, LabelContainer } from './styles';
+import type { TState } from '../../typeds/base.typed';
+
+type TInput = InputHTMLAttributes<HTMLInputElement>  & {
+  reset?: boolean 
+  setReset?: TState<boolean>
+  isForceUpdate?: boolean 
+  setForceUpdate?: TState<boolean>
+  evChange?: (e: ChangeEvent<HTMLInputElement>) => void
+} 
+
+const SwitchComponent = ({ isForceUpdate, setForceUpdate, reset, setReset, evChange, ...props }: TInput) => {
+  const { id, defaultChecked } = props;
+
+  const [inputChecked, evInputChecked] = useState<boolean>(defaultChecked||false);
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      evInputChecked(defaultChecked||false);
+      setForceUpdate && setForceUpdate(false);
+    }
+    if (reset) {
+      evInputChecked(false);
+      setReset && setReset(false);
+    }
+  }, [isForceUpdate, setForceUpdate, reset, setReset, defaultChecked, evInputChecked])
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const _value = e.target.checked;
+    evInputChecked(_value);
+  }
+
+  let parseProps = {...props};
+  delete parseProps.defaultChecked;
+
+  return (
+    <SwitchContainer>
+      <InputContainer 
+        type='checkbox' 
+        checked={inputChecked} 
+        onChange={(e: ChangeEvent<HTMLInputElement>) => { 
+          handleChange(e)
+          evChange && evChange(e)
+        }}
+        {...parseProps} />
+      <LabelContainer role='checkbox-label' htmlFor={id} />
+    </SwitchContainer>
+  )
+}
+
+export default SwitchComponent

package/src/components/switch/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const SwitchContainer = styled.div`
+  > input:checked + label::after {
+    left: 16px;
+  }
+  > input:checked + label {
+    background-color: var(--sw-clr-bg__fc);
+  }
+`
+export const InputContainer = styled.input`
+  display: none;
+`
+export const LabelContainer = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 16px;
+  background-color: var(--sw-clr-bg);
+  border-radius: 20px;
+  transition: all 0.3s;
+  cursor: pointer;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius:50%;
+    background-color:var(--pri-clr-bg);
+    top: 1px;
+    left: 1px;
+    transition: all 0.3s;
+  }
+`

package/src/declarations.d.ts

@@ -51,4 +51,6 @@ declare module '*.module.scss' {
 declare module '*.module.sass' {
   const classes: { readonly [key: string]: string };
   export default classes;
-}
+}
+
+declare module 'approvejs';

package/src/typeds/shares.typed.ts

@@ -1,7 +1,9 @@
-import { TObject } from './base.typed';
+import { TMouseEvent, TObject, TState } from './base.typed';
 import { TCloseDropdownFunction } from '../components/dropdown/typed';
+import { TCustomField, TAutoCopy } from '../components/masterTable/typed';
 import { TMessageFunction, TMessageQuestionFunction } from '../components/message/typed';
 import { TPopupFunction, TPopupOpenFunction } from '../components/popup/typed';
+import { TOption } from '../components/select/typed';
 
 export type TUser = {
   profile_id: number,
@@ -53,4 +55,56 @@ export type TChannel = {
     storeImageName?: string
   }[]
   availableAPI?: boolean | null
-}
+}
+export type THeadProps = {
+  key: string
+  name: string
+  fieldType: string
+  validations?: TObject
+  width: number
+  typeData: string
+  condition?: string
+  type?: string
+  bare?: boolean,
+  multiline?: boolean
+  options?: TOption[],
+  isMassEditable?: boolean
+  isMassClearable?: boolean
+  value?: number
+  schema?: string
+  align?: any
+  format?: string
+  allowEmpty?: boolean
+  customOptionKey?: string
+  icon?: string
+  initial?: string
+  color?: string
+  tip?: string
+  placeholder?: string
+  isHidden?: boolean
+  showFormat?: string
+}
+export type TMasterProps = {
+  data: any
+  setData: any
+  headerColumns: THeadProps[]
+  evCreateMessage?: TMessageFunction 
+  evCreateMessageQuestion?: TMessageQuestionFunction
+  type?: string
+  isLessField?: boolean
+  isForceUpdateField?: boolean 
+  setForceUpdateField?: TState<boolean> 
+  evOpenPopup?: TPopupOpenFunction
+  autoCopy?: TAutoCopy
+  setAutoCopy?: TState<TAutoCopy>
+  isAutoCopyField?: boolean
+  resultPopup?: TObject | null
+  setResultPopup?: TState<TObject | null>
+  evCheckAllValidation?: any
+  dataCustomField?: TCustomField[] 
+  setDataCustomField?: TState<TCustomField[]>
+  isRemovable?: boolean
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+  evPickAll?: TMouseEvent
+}