forstok-ui-lib 6.20.2 → 6.21.2

package/src/components/masterTable/partials/datas/confirm.tsx

@@ -1,92 +0,0 @@
-import CheckboxComponent from '../../../../components/checkbox';
-import IconComponent from '../../../../components/icon';
-import { MasterTableBodyContent } from '../../../../components/masterTable/styles';
-import type { TDataPartial } from '../../../../components/masterTable/typed';
-
-const ConfirmDataPartial = ({ data, heightContent, firstHeaderColumnsWidth, evCheckbox, headerColumns, switchEditor, totalColGroupWidth, lastHeaderColumnsWidth, evRemove, type, isRemovable }: TDataPartial) => {
-  return (
-    data.map((content: any, idx: number) => { 
-      const heightAll = heightContent ? (content.variants.length * heightContent) : content.variants.length;
-      let keyIdx = idx;
-      switch(type) {
-        case 'putaway-inbound':
-          keyIdx = content.id;
-        break;
-        default:
-          keyIdx = idx ;
-        break;
-      }
-      return (
-        <MasterTableBodyContent key={keyIdx} className='_refMasterTableBodyContent' style={{ height: heightAll }}>
-          <div className='cell-colGroup' style={{ height: heightAll }} key={0}>
-            <div key={0} className='cell cell-checkbox' style={{ width: firstHeaderColumnsWidth, height: heightAll }}>
-              <article>
-                <div>{idx + 1}</div>
-                <CheckboxComponent id={`checkbox-list-${idx}`} name='checkbox-list' extendKey={idx.toString()} onClick={evCheckbox} />
-              </article>
-            </div>
-            {
-              headerColumns.filter(header => !header?.isHidden).filter(head => head.type === 'colGroup').map((head, headIdx)=> {
-                const valueKey = content[head.key]
-                const idxKey = headIdx+1
-                const error = content?.[head.key+'_error'] || ''
-                const editorEl = switchEditor(idx, head, valueKey, error, undefined, heightAll, content)
-                return <div key={idxKey} data-idx={idx} data-key={head.key} className={`cell cell-${head.fieldType} ${error ? 'cell-error' : ''}`} style={{ width: head.width, height: heightAll }}>{editorEl}</div>
-              })
-            }
-          </div>
-          <div className='cell-rowGroup' style={{ left: totalColGroupWidth, overflow: 'hidden' }} key={1}>
-            {
-              content.locations.map((locations: any, locationIdx: number) => {
-                const reKey = type === 'create-adjustment' ? locationIdx+'-'+(locations.batchId?.value||'0')+'-'+(locations.location||'0') : locationIdx
-                let hasSaveKey: string[] = []
-                return (
-                  <div className='cell-row' key={reKey} data-row={locationIdx} style={{ height: heightContent }} >
-                    {
-                      headerColumns.filter(header => !header?.isHidden).filter(head => head.type !== 'colGroup').map((head, headIdx)=> {
-                        const idxKey= headIdx+1;
-                        let valueKey = null;
-                        let error = '';
-                        let uneditable = false;
-                        let mainKey = head.key.replace('locations-', '');
-                        if(mainKey.indexOf('-') === -1) {
-                          valueKey = locations[mainKey];
-                          error = content?.locations?.[locationIdx]?.[mainKey+'_error'] || '';
-                        }else {
-                          const modifiedMainKey = mainKey.split('-');
-                          const firstKey = modifiedMainKey[0];
-                          const secondKey = modifiedMainKey[1];
-                          const keyLength = locations[firstKey] ? locations[firstKey].length : 0;
-                          if(keyLength) {
-                            let index = 0;
-                            if(hasSaveKey.filter(key => key === mainKey).length) index = hasSaveKey.filter(key => key === mainKey).length;
-                            valueKey = (keyLength > index) ? locations[firstKey][index][secondKey] : null;
-                            error = (keyLength > index) ? content?.locations?.[locationIdx]?.[firstKey][index][secondKey+'_error'] : null;
-                            hasSaveKey.push(mainKey);
-                          }
-                        }
-                        if ((head?.condition === 'adjustLocation' || head?.condition === 'countAdjustment') && !content.locations[locationIdx]?.location) {
-                          uneditable = true;
-                        }
-                        const editorEl = switchEditor(idx, head, valueKey, error, locationIdx);
-                        return <div key={idxKey} data-idx={idx} data-key={head.key} data-row={locationIdx} className={`cell cell-${head.fieldType} ${error ? 'cell-error' : ''} ${uneditable ? 'cell-disabled': ''}`} style={{ width: head.width }}>{editorEl}</div>;
-                      })
-                    }
-                    {isRemovable ? (
-                      <div key={headerColumns.length+1} data-idx={idx} data-key='trash' data-row={locationIdx}  className='cell cell-trash' onClick={evRemove} style={{ width: lastHeaderColumnsWidth }}>
-                        <div>
-                          <IconComponent $name='trash' $width='18px' data-qa-id={`mt-icon-trash-${idx}${(locationIdx !== null ? '-' + locationIdx : '')}`} />
-                        </div>
-                      </div> ) : null}
-                  </div>
-                )
-              })
-            }
-          </div>
-        </MasterTableBodyContent>
-      );
-    })
-  )
-}
-
-export default ConfirmDataPartial

package/src/components/masterTable/partials/datas/index.tsx

@@ -1,81 +0,0 @@
-import ButtonComponent from '../../../button';
-import CheckboxComponent from '../../../checkbox';
-import IconComponent from '../../../icon';
-import { MasterTableBodyContent } from '../../styles';
-import type { TDataPartial } from '../../typed';
-
-const DataPartial = ({data, firstHeaderColumnsWidth, evCheckbox, headerColumns, switchEditor, lastHeaderColumnsWidth, evRemove, type, isRemovable}: TDataPartial) => {
-  return (
-    data.map((content: any, idx: number) => { 
-      let keyIdx = idx;
-      switch(type) {
-        case 'create-promotion':
-          keyIdx = content.id;
-          break;
-        case 'create-adjustment': case 'create-price': case 'create-inbound': case 'create-outbound': case 'create-transfer': case 'confirm-adjustment': case 'confirm-inbound': case 'confirm-outbound':
-          keyIdx = content.id;
-          break;
-        case 'create-return': 
-          keyIdx = content?.product?.id || idx;
-          break;
-        // case 'create-paymentreceive':
-        //   keyIdx = content.invoiceID
-        //   break
-        default:
-          keyIdx = idx;
-          break;
-      }
-      let extraClass = '';
-      if (type === 'edit-picklist') {
-        extraClass = content.qtyOrdered === content.qtyPicked ? 'is-fullfilled' : '';
-      } else if(type === 'create-package') {
-        extraClass = content.qtyOrdered === content.qtyPack ? 'is-fullfilled' : '';
-      } else if(type === 'create-return') {
-        extraClass = (content.qtyOrdered - content.qtyReturned) === content.qtyToReturn ? 'is-fullfilled' : '';
-      }
-
-      return (
-        <MasterTableBodyContent key={keyIdx} $mode={type} id={`row-${keyIdx}`} className={`_refMasterTableBodyContent ${extraClass}`}>
-          <div className='cell-colGroup' key={0}>
-            <div key={0} className='cell cell-checkbox' style={{ width: firstHeaderColumnsWidth }}>
-              {isRemovable ? (
-                <article>
-                  <div>{idx + 1}</div>
-                  <div><CheckboxComponent id={`checkbox-list-${idx}`} name='checkbox-list' extendKey={idx.toString()} onClick={evCheckbox} ></CheckboxComponent></div>
-                </article>
-              )  : <div>{idx + 1}</div>}
-            </div>
-            {
-              headerColumns.filter(header => !header?.isHidden).filter(head => head.type === 'colGroup').map((head, headIdx)=> {
-                const valueKey = content[head.key];
-                const idxKey = headIdx+1;
-                const error = content?.[head.key+'_error'] || '';
-                const editorEl = switchEditor(idx, head, valueKey, error, undefined, 'auto', content);
-                let isDisabledCell = false;
-                if (type === 'create-price' && (head.key !== 'price' && head.key !== 'salePrice' && head.key !== 'item')) {
-                  const aliasKey = head.key.split('_');
-                  if(aliasKey[1] === 'salePrice' || aliasKey[1] === 'saleStartAt' || aliasKey[1] === 'saleEndAt') {
-                    if (content[`${aliasKey[0]}_salePrice`] === undefined && content[`${aliasKey[0]}_saleStartAt`] === undefined && content[`${aliasKey[0]}_saleEndAt`] === undefined) {
-                      isDisabledCell = true;
-                    }
-                  } else if(valueKey === undefined) {
-                    isDisabledCell = true;
-                  }
-                }
-                return <div key={idxKey} data-idx={idx} data-key={head.key} className={`cell cell-${head.fieldType} ${isDisabledCell ? 'cell-disabled' : '' }  ${error ? 'cell-error' : ''}`} style={{ width: head.width }}>{editorEl}</div>;
-              })
-            }
-            {isRemovable ? (
-                <div key={headerColumns.length+1} data-idx={idx} data-key='trash' className='cell cell-trash' style={{ width: lastHeaderColumnsWidth }} onClick={evRemove}>
-                <div>
-                  <IconComponent $name='trash' $width='18px' data-qa-id={`mt-icon-trash-${idx}`} />
-                </div>
-              </div> ) : null}
-          </div>
-        </MasterTableBodyContent>
-      )
-    })
-  );
-}
-
-export default DataPartial;

package/src/components/masterTable/partials/editors/date.bare.tsx

@@ -1,39 +0,0 @@
-import { useCallback } from 'react';
-import moment from 'moment';
-import TextComponent from '../../../text';
-import DateComponent from '../../../date';
-import type { TEditorProps } from '../../typed';
-
-const DateBareEditors =  ({ head, value, evChange, idx, variantIdx, error, isForceUpdate, setForceUpdate }:Omit<TEditorProps, 'evCloseEditor'>) => {
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((valueCustom: any) => {
-    const keyEl = document.getElementById('cur-key');
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if(currentKey && (currentKey === eckey)) {
-      evChange(head, valueCustom, idx, variantIdx);
-    }
-  }, [eckey, head, idx, variantIdx, evChange])
-
-  const saveFormat = head.format || 'DD/MM/YYYY';
-
-  const evChangeDate = (name: string, value: Date | null) => {
-    const keyEl = document.getElementById('cur-key');
-    keyEl && (keyEl.innerHTML = eckey);
-    const _value = value ? moment(value).format(saveFormat) : value;
-    evCustom(_value);
-  }
-
-  const qaId = `${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-  const _value = value ? moment(value, saveFormat).toDate() : value;
-
-  return (
-    <div className='master-editor'>
-      {
-        (value === undefined && head?.condition === 'sale') ? <TextComponent $color='grey'>No Listing yet!</TextComponent> : <DateComponent saveFormat={saveFormat} evChange={evChangeDate} name={head.fieldType+'_'+head.key} value={_value} {...head?.allowEmpty && { allowEmpty: true }} {...error && { isError: true, 'data-tip':error, 'data-place': 'top', 'data-type': 'error' }} isForceUpdate={isForceUpdate} setForceUpdate={setForceUpdate} data-qa-id={`mt-field-date-${qaId}`} {...head?.showFormat && { showFormat: head.showFormat }} />
-      }
-    </div>
-  );
-}
-
-export default DateBareEditors;

package/src/components/masterTable/partials/editors/date.tsx

@@ -1,123 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import type { ReactNode } from 'react';
-import moment from 'moment';
-import DateComponent from '../../../date';
-import ErrorComponent from '../../../error';
-import TextComponent from '../../../text';
-import type { TMouseEvent } from '../../../../typeds/base.typed';
-import type { TEditorProps } from '../../typed';
-
-const DateEditors =  ({ head, value, height, evChange, idx, variantIdx, error, evCloseEditor }: TEditorProps) => {
-  const [isEditing, setEdit] = useState<boolean>(false);
-  const [valueFormState, setValueFormState] = useState<Date | null>(value || null);
-  const [isFirstLoadEditor, setFirstLoad] = useState<boolean>(true);
-  const [ isForceUpdate, setForceUpdate ] = useState(false);
-
-  const datepickerRef = useRef(null);
-  const saveFormat = head.format || 'DD/MM/YYYY';
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  useEffect(() => { 
-    const _value = value ? moment(value, saveFormat).toDate() : value;
-    setValueFormState(_value);
-  }, [saveFormat, value])
-
-  const evCustom = useCallback((valueCustom: any) => {
-    const keyEl = document.getElementById('cur-key');
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if(currentKey && (currentKey === eckey)) {
-      evChange(head, valueCustom, idx, variantIdx);
-      evCloseEditor(() => { setEdit(false) });
-    }
-  }, [eckey, head, idx, variantIdx, evChange, evCloseEditor])
-
-  useEffect(() => {
-    if (!isFirstLoadEditor) {
-      const _value = valueFormState ? moment(valueFormState).format(saveFormat) : valueFormState;
-      evCustom(_value);
-    }
-    else {
-      setFirstLoad(false);
-    }
-  }, [valueFormState, evCustom, isFirstLoadEditor, saveFormat])
-
-  useEffect(() => {
-    const docBody = document.body;
-    const evClick = (e: Event) => {
-      if(!isEditing) {
-        return false;
-      }
-      const target = e.target as HTMLBodyElement;
-      if (target.closest('.react-datepicker') || target.closest('.cell-wrapper')) {
-        return false;
-      } else if(!target.closest('.master-editor')) {
-        setValueFormState(valueFormState);
-        evCloseEditor(() => { setEdit(false) });
-        return;
-      }
-    };
-    docBody.addEventListener('click', evClick);
-    return () => docBody.removeEventListener('click', evClick);
-  }, [valueFormState, isEditing, evCloseEditor])
-
-  const evClick: TMouseEvent = e => {
-    e.preventDefault();   
-    const target = e.target as HTMLInputElement;
-    if (target.closest('.cell-disabled')) {
-      return false;
-    }
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    keyEl && (keyEl.innerHTML = eckey);
-    setEdit(!isEditing);
-    const cellEl = target.closest('.cell') as HTMLDivElement;
-    if (!isEditing) {
-      cellEl && (cellEl.classList.add('cell-editing'));
-    }
-    else {
-      cellEl && (cellEl.classList.remove('cell-editing'));
-    }
-  }
-
-  const evChangeDate = (name: string, value: Date | null) => {
-    setValueFormState(value);
-    setForceUpdate(true);
-  }
-
-  const qaId = `${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  return (
-    !isEditing ? (
-      <section onClick={evClick} className="cell-wrapper">
-        {
-          head.multiline ? (
-            <>
-              {
-                (!valueFormState && error) ? <TextComponent $color='blue' style={{ fontWeight: 500 }}>+ Add</TextComponent> : <div className='truncate-overflow' style={{ maxHeight: height ? (parseInt(height as string) - 34) : 'auto' }} data-qa-id={`mt-input-label-${qaId}`}>
-                  {
-                    ((head?.showFormat && valueFormState) ? moment(valueFormState, saveFormat).format(head.showFormat) : valueFormState as ReactNode)
-                  }
-                </div>
-              }
-              {error && <ErrorComponent $mode='table'>{error}</ErrorComponent> }
-            </>
-          ) : ( 
-            <>
-              {
-                (!valueFormState && error) ? <TextComponent $color='blue' style={{ fontWeight: 500 }}>+ Add</TextComponent> : <div data-qa-id={`mt-input-label-${qaId}`}>
-                  {
-                    ((head?.showFormat && valueFormState) ? moment(valueFormState, saveFormat).format(head.showFormat) : valueFormState as ReactNode)
-                  }
-                </div>
-              }
-              {error && <ErrorComponent $mode='table'>{error}</ErrorComponent> }
-            </>
-          )
-        }
-      </section>
-    ) : (
-      <div className='master-editor'><DateComponent ref={datepickerRef} saveFormat={saveFormat} evChange={evChangeDate} name={head.fieldType+'_'+head.key} {...valueFormState && { value: valueFormState }} isError={error ? true : false} isForceUpdate={isForceUpdate} setForceUpdate={setForceUpdate} data-qa-id={`mt-field-date-${qaId}`} {...head?.allowEmpty && { allowEmpty: head.allowEmpty }} {...head?.showFormat && { showFormat: head.showFormat }} /></div>
-    )
-  );
-}
-
-export default DateEditors;

package/src/components/masterTable/partials/editors/image.tsx

@@ -1,61 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import ErrorComponent from '../../../error';
-import ImageComponent from '../../../image';
-import TextComponent from '../../../text';
-import type { TMouseEvent } from '../../../../typeds/base.typed';
-import type { TEditorProps } from '../../typed';
-
-const ImageEditors = ({ head, value, evChange, evOpenPopup, idx, variantIdx, resultPopup, setResultPopup, error, evCloseEditor }: TEditorProps) => {
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((valueFormState: any) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if (currentKey && (currentKey === eckey)) {
-      evChange(head, valueFormState, idx, variantIdx);
-      evCloseEditor();
-    }
-  }, [eckey, head, idx, variantIdx, evChange, evCloseEditor])
-
-  useEffect(()=> {
-    if (resultPopup && ('image' in resultPopup)) {
-      setResultPopup && setResultPopup(null);
-      evCustom(resultPopup.image);
-    }
-    return () => {
-      setResultPopup && setResultPopup(null);
-    } 
-  }, [resultPopup, setResultPopup, evCustom])
-
-  const evClick: TMouseEvent = e => {
-    e.preventDefault();
-    const target = e.target as HTMLElement;
-    if (target.closest('.cell-disabled')) {
-      return false;
-    }
-    const keyEl = document.getElementById('cur-key')  as HTMLDivElement;
-    keyEl && (keyEl.innerHTML = eckey);
-    const cellEl = target.closest('.cell') as HTMLDivElement;
-    cellEl && (cellEl.classList.add('cell-editing'));
-    evOpenPopup && evOpenPopup(e, 'cell-wrapper');
-  }
-
-  return (
-    <section className="cell-wrapper" onClick={evClick} data-popup='table-image' data-detail={JSON.stringify({ title: head.name, value: value, head: head })}>
-      {
-        (error && !(error.indexOf('minimum') !== -1 || error.indexOf('maximum') !== -1)) ? 
-          <TextComponent $color='blue' style={{ fontWeight: 500 }}>+ Add</TextComponent> : 
-          <div>
-            {
-              value && <figure className="table-image-figure" data-qa-id={`mt-image-${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`}>
-                <ImageComponent src={Array.isArray(value) ? value[0] : value} />
-              </figure> 
-            }
-          </div>
-      }
-      {error && <ErrorComponent $mode='table'>{error.replace('Product', '')}</ErrorComponent>}
-    </section> 
-  );
-}
-
-export default ImageEditors;

package/src/components/masterTable/partials/editors/input.bare.tsx

@@ -1,127 +0,0 @@
-import { useCallback } from 'react';
-import type { KeyboardEvent, FocusEvent, MouseEvent } from 'react';
-import { generateValueTable, debounce, currencyNumber, validateByApproveJs, evGenerateValueMatch } from '../../../../assets/javascripts/function';
-import { colorCommonQuantity } from '../../../../assets/javascripts/helper';
-import { AdjustedLabel, InfoLabel } from '../../styles';
-import type { THeadProps } from '../../../../typeds/shares.typed';
-import type { TMouseEvent } from '../../../../typeds/base.typed';
-import type { TEditorProps } from '../../typed';
-import TextAreaComponent from '../../../textarea';
-import InputComponent from '../../../input';
-
-const InputBareEditors =  ({ head, value, evChange, idx, variantIdx, error, content, type, isForceUpdate, setForceUpdate }:Omit<TEditorProps, 'evCloseEditor'>) => {
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((valueCustom: string) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if (currentKey && (currentKey === eckey)) {
-      evChange(head, valueCustom, idx, variantIdx);
-    }
-  }, [eckey, head, idx, variantIdx, evChange])
-
-
-  const evInput = debounce((currentTarget: HTMLInputElement | HTMLTextAreaElement) => {}, 250);
-
-  const _evBlur = (currentTarget: HTMLInputElement | HTMLTextAreaElement) => {
-    evCustom(currentTarget.value);
-  }
-
-  const evKeyUpInput = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      evCustom(e.currentTarget.value);
-      return;
-    }
-  }
-
-  const evFocusIn = (e: FocusEvent<HTMLInputElement> | MouseEvent<HTMLInputElement>) => {
-    e.persist();
-    setTimeout(() => {
-      const inputEl = e.target as HTMLInputElement;
-      const value = inputEl.value;
-      if (value !== '' && value !== null && value !== undefined) {
-        inputEl && inputEl.focus();
-        inputEl && inputEl.select();
-      } 
-    }, 1)
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    keyEl && (keyEl.innerHTML = eckey);
-  }
-
-  const evClick: TMouseEvent = e => {
-    e.persist();
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    keyEl && (keyEl.innerHTML = eckey);
-  }
-
-  const _defaultValue = generateValueTable(value, head.key);
-  const isSupArr = ['shipping', 'platformRebate'];
-
-  const inputEl = (
-    head.multiline ? 
-      <TextAreaComponent 
-        name={head.fieldType+'_'+head.key} 
-        defaultValue={value} 
-        evChange={e=> { evInput(e.target) }} 
-        evBlur={e=> { evInput(e.target); _evBlur(e.target) }} 
-        onClick={evClick}
-        {...error && { isError: true, 'data-tip':error, 'data-place': 'top', 'data-type': 'error' }} /> : 
-      <InputComponent 
-        type={head.typeData === 'Integer' ? 'number' : 'text'} 
-        name={head.fieldType+'_'+head.key} 
-        defaultValue={value} 
-        evChange={e=> { evInput(e.target) }} 
-        evBlur={e=> { evInput(e.target); _evBlur(e.target) }} 
-        onKeyUp={evKeyUpInput} 
-        onClick={evFocusIn} 
-        onFocus={evFocusIn} 
-        isForceUpdate={isForceUpdate} 
-        setForceUpdate={setForceUpdate}
-        data-qa-id={`mt-input-${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`} 
-        {...head.typeData === 'Currency' && { mode: 'currency', aliasLabel: isSupArr.includes(head.key) ? '+' : '-' }}
-        {...head.placeholder && {placeholder: head.placeholder}} 
-        {...error && { isError: true, 'data-tip':error, 'data-place': 'top', 'data-type': 'error' }} />
-  )
-
-  let el = <div className='master-editor'>{inputEl}</div>;
-
-  if (head?.condition === 'countAdjustment') {
-    el = (
-      <div className='master-editor'>
-        <>
-          {inputEl}
-          { (value !== null && (value < content.qtyReserved)) && <InfoLabel style={{ color: 'red' }}>Qty Available'll be minus</InfoLabel> }
-        </>
-      </div> );
-  } else if (head?.condition === 'countOutbound') {
-    el = (
-      <div className='master-editor'>
-        <>
-          {inputEl}
-          { (value !== null && (value > content.qtyOnHand)) && <InfoLabel style={{ color: 'red' }}>Qty On Hand'll be minus</InfoLabel> }
-        </>
-      </div> );
-  }
-
-  return (
-    type === 'create-paymentreceive' ? 
-      <InputComponent 
-          type={head.typeData === 'Integer' ? 'number' : 'text'} 
-          disabled={(content.orderCashless  && head.key ==='shipping') || false} 
-          name={head.fieldType+'_'+head.key} 
-          defaultValue={_defaultValue} 
-          evChange={e=> { evInput(e.target) }} 
-          evBlur={e=> { evInput(e.target); _evBlur(e.target) }} 
-          evKeyUp={evKeyUpInput} 
-          onClick={evFocusIn} 
-          onFocus={evFocusIn} 
-          data-qa-id={`mt-input-${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`}
-          {...head.typeData === 'Currency' && { mode: 'currency', aliasLabel: isSupArr.includes(head.key) ? '+' : '-' }}
-          {...head.placeholder && {placeholder: head.placeholder}} 
-          {...error && { isError: true, 'data-tip':error, 'data-place': 'top', 'data-type': 'error' }} /> : 
-      el
-  );
-}
-
-export default InputBareEditors;

package/src/components/masterTable/partials/editors/input.tsx

@@ -1,140 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import type { KeyboardEvent } from 'react';
-import ErrorComponent from '../../../error';
-import InputComponent from '../../../input';
-import TextAreaComponent from '../../../textarea';
-import TextComponent from '../../../text';
-import { generateValueTable, debounce, currencyNumber } from '../../../../assets/javascripts/function';
-import { colorCommonQuantity } from '../../../../assets/javascripts/helper';
-import { AdjustedLabel } from '../../styles';
-import type { TMouseEvent } from '../../../../typeds/base.typed';
-import type { TEditorProps } from '../../typed';
-
-const InputEditors =  ({ head, value, height, evChange, idx, variantIdx, error, evCloseEditor, content }: TEditorProps) => {
-  const [isEditing, setEdit] = useState<boolean>(false);
-  const [valueFormState, setValueFormState] = useState<string>(value || '');
-  const [isFirstLoadEditor, setFirstLoad] = useState<boolean>(true);
-
-  useEffect(() => { 
-    setValueFormState(value);
-  }, [value])
-
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((valueCustom: any) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if (currentKey && (currentKey === eckey)) {
-      evChange(head, valueCustom, idx, variantIdx);
-      evCloseEditor(() => { setEdit(false) });
-    }
-  }, [eckey, head, idx, variantIdx, evChange, evCloseEditor])
-
-  useEffect(() => {
-    if (!isFirstLoadEditor) {
-      evCustom(valueFormState);
-    } else {
-      setFirstLoad(false);
-    }
-  }, [valueFormState, evCustom, isFirstLoadEditor])
-
-  const evClick: TMouseEvent = e => {
-    e.preventDefault();
-    const target = e.target as HTMLInputElement;
-    if (target.closest('.cell-disabled')) {
-      return false;
-    }
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    keyEl && (keyEl.innerHTML = eckey);
-    setEdit(!isEditing);
-    const cellEl = target.closest('.cell') as HTMLDivElement;
-    if (!isEditing) {
-      cellEl && (cellEl.classList.add('cell-editing'));
-    } else {
-      cellEl && (cellEl.classList.remove('cell-editing'));
-    }
-    setTimeout(() => {
-      const inputEl = cellEl.querySelector('input');
-      inputEl && inputEl.focus();
-      inputEl && inputEl.select();
-    }, 1)
-  }
-
-  const evInput = debounce((currentTarget: HTMLInputElement | HTMLTextAreaElement) => {}, 250);
-
-  const _evBlur = (currentTarget: HTMLInputElement | HTMLTextAreaElement) => {
-    const _value = currentTarget.value;
-    const isClosed = head.typeData === 'Integer' ? ((valueFormState || _value) ? (parseInt(valueFormState) === parseInt(_value)) : true ) : (valueFormState === _value);
-    setValueFormState(_value);
-    if (isClosed) {
-      evCloseEditor(() => { setEdit(false) });
-    }
-  }
-
-  const evKeyUpInput = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      const _value = e.currentTarget.value;
-      const isClosed = head.typeData === 'Integer' ? (parseInt(valueFormState) === parseInt(_value)) : (valueFormState === _value);
-      setValueFormState(_value);
-      if (isClosed) {
-        evCloseEditor(() => { setEdit(false) });
-      }
-      return;
-    }
-  }
-
-  const qaId = `${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-  const _valueFormState = (head.typeData === 'Currency' || head.typeData === 'Integer') ? (valueFormState !== null ? valueFormState : '') : (valueFormState ? ((typeof valueFormState === 'string') ? valueFormState.toString().trim() : valueFormState) : '');
-
-  let labelEl = <div data-qa-id={`mt-input-label-${qaId}`}>{generateValueTable(value, head.key)}</div>;
-  if (head?.condition === 'priceAdjustment' || head?.condition === 'priceAdjustment-sale') {
-    let adjusted = parseInt(value || 0) - parseInt(content[`${head.key}_base`] || 0);
-    let adjustedLbl = currencyNumber(adjusted);
-    if(adjusted > 0) {
-      adjustedLbl = '+'+ currencyNumber(adjusted);
-    } else if(adjusted === 0) {
-      adjustedLbl = '';
-    }
-    labelEl = (
-      <div>
-        <div data-qa-id={`mt-input-label-${qaId}`}>{generateValueTable(value, head.key)}</div>
-        { (adjusted !== 0 && adjusted !== null && !error) && <AdjustedLabel style={{ color: colorCommonQuantity(adjusted) }}>{adjustedLbl}</AdjustedLabel> }
-      </div>
-    );
-  }
-
-  return (
-    !isEditing ? 
-      <section onClick={evClick} className='cell-wrapper'>
-        {
-          head.multiline ? 
-            <>
-              {
-                (_valueFormState === '' && error) ? 
-                  <TextComponent $color='blue' style={{ fontWeight: 500 }}>+ Add</TextComponent> : 
-                  <div className='truncate-overflow' data-qa-id={`mt-input-label-${qaId}`} style={{ maxHeight: height ? (parseInt(height as string) - 34) : 'auto' }}>{generateValueTable(value, head.key)}</div>
-              }
-              {error && <ErrorComponent $mode='table'>{error}</ErrorComponent>}
-            </>
-          :
-            <>
-              {
-                (_valueFormState === '' && error) ? 
-                  <TextComponent $color='blue' style={{ fontWeight: 500 }}>+ Add</TextComponent> : labelEl
-              }
-              {error && <ErrorComponent $mode='table'>{error}</ErrorComponent>}
-            </>
-        }
-      </section> :
-      <div className='master-editor'>
-        { 
-          head.multiline ? 
-            <TextAreaComponent name={head.fieldType+'_'+head.key} defaultValue={valueFormState} evChange={e=> { evInput(e.target) }} evBlur={e=> { evInput(e.target); _evBlur(e.target) }} ></TextAreaComponent> : 
-            <InputComponent type={head.typeData === 'Integer' ? 'number' : 'text'} {...head.typeData === 'Currency' && { mode: 'currency' }} name={head.fieldType+'_'+head.key} defaultValue={valueFormState} evChange={e=> { evInput(e.target) }} evBlur={e=> { evInput(e.target); _evBlur(e.target) }} evKeyUp={evKeyUpInput} data-qa-id={`mt-input-${qaId}`} />
-        }
-      </div>
-  );
-}
-
-export default InputEditors;