forstok-ui-lib 6.20.2 → 6.21.2

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

@@ -1,128 +0,0 @@
-import type { JSX } from 'react';
-import ImageComponent from '../../../image';
-import LinkComponent from '../../../link';
-import TextComponent from '../../../text';
-import { currencyNumber } from '../../../../assets/javascripts/function';
-import { colorCommonQuantity } from '../../../../assets/javascripts/helper';
-import { MuteLabel, FigureWraper, InitialContainer } from '../../../../assets/stylesheets/shares.styles';
-import { ProductByLabelContainer, ProductByLabelName, StoreContainer, ActionByLabelContainer, LabelContainer, AdjustedLabel } from '../../styles';
-import type { TEditorProps } from '../../typed';
-
-const LabelEditors = ({ head, value, height, idx, evOpenPopup, content, type }:Omit<TEditorProps, 'evChange' | 'evCloseEditor' | 'error'>) => {
-  const isObject = (x: any) => {
-    return typeof x === 'object' && !Array.isArray(x) && x !== null;
-  }
-
-  let _value:string = value ? ((isObject(value) &&  Object.keys(value).length) ? value[Object.keys(value)[0]] : value) : (head.typeData === 'Integer' ? value.toString() : '');
-  let labelEl:JSX.Element;
-
-  if (head?.condition === 'product') {
-    const imageUrl:string = value.imageUrl ? ((Array.isArray(value.imageUrl) && value.imageUrl.length) ? value.imageUrl[0] : value.imageUrl) : '';
-    labelEl = (
-      <section className="cell-wrapper">
-        <ProductByLabelContainer>
-          <section>
-            <figure className="table-image-figure"><ImageComponent src={imageUrl} /></figure>
-            <div>
-              <ProductByLabelName>{value.name}</ProductByLabelName>
-              {value.totalVariant && <span className='counter-product-label'>{value.totalVariant} variants</span>}
-            </div>
-          </section>
-          <section>
-            <div><MuteLabel $size='medium'>Category: </MuteLabel> {value.category || 'No Category'}</div>
-            <div><MuteLabel $size='medium'>Brand: </MuteLabel> {value.brand || 'No Brand'}</div>
-          </section>
-        </ProductByLabelContainer>
-      </section>
-    );
-  } else if (head?.condition === 'addVariant') {
-    labelEl = (
-      <section className="cell-wrapper" data-detail={JSON.stringify({idx:idx, data: content})} data-popup='add-variant-master'>
-        <ActionByLabelContainer $mode='add'>
-          <div onClick={e=> evOpenPopup && evOpenPopup(e, 'cell-wrapper')}>
-            <TextComponent color='blue' title='Add Variant' style={{ fontWeight: 500 }}>+ Add</TextComponent>
-          </div>
-        </ActionByLabelContainer>
-      </section>
-    );
-  } else if (head?.condition === 'item') {
-    const imageUrl:string = value.imageUrl ? ((Array.isArray(value.imageUrl) && value.imageUrl.length) ? value.imageUrl[0] : value.imageUrl) : '';
-    labelEl = (
-      <section className="cell-wrapper">
-        <LabelContainer>
-          <FigureWraper $size='30px'>
-            <ImageComponent alt={value.name} $mode='product' src={imageUrl || ""}/>
-          </FigureWraper>
-          <div>
-            <ProductByLabelName><strong>{value.name}</strong></ProductByLabelName>
-            {value.sku && (
-              <MuteLabel $size='medium'>
-                <span>SKU:</span>
-                <LinkComponent target='_blank' href={`https://app.forstok.com/dashboard/items/master/${encodeURIComponent(value.sku)}?src=sku`}>{value.sku}</LinkComponent>
-              </MuteLabel>
-            )}
-          </div>
-        </LabelContainer>
-      </section>
-    );
-  } else if (head?.condition === 'productPicklist') {
-    const imageUrl:string = value.imageUrl ? ((Array.isArray(value.imageUrl) && value.imageUrl.length) ? value.imageUrl[0] : value.imageUrl) : '';
-    labelEl = (
-      <section className="cell-wrapper">
-        <LabelContainer>
-          <FigureWraper $size='30px'>
-            <ImageComponent alt={value.name} $mode='product' src={imageUrl || ""}/>
-          </FigureWraper>
-          <div style={{ display: 'grid', gridGap: '4px' }}>
-            <TextComponent style={{ fontWeight: 600 }}>{value.name}</TextComponent>
-            <MuteLabel $size='medium'>
-              <span>SKU:</span>{value.sku ? 
-              <LinkComponent target='_blank' href={`https://app.forstok.com/dashboard/items/master/${encodeURIComponent(value.sku)}?src=sku`}>{value.sku}</LinkComponent> : '-'}
-            </MuteLabel>
-            <MuteLabel $size='medium'>
-              <span>UPC:</span>{value.barcode || '-'}
-            </MuteLabel>
-          </div>
-        </LabelContainer>
-      </section>
-    ) ;
-  } else if (head?.condition === 'option') {
-    labelEl = <TextComponent $elipsis={false} className='multi-elipsis'>{value || '-'}</TextComponent>;
-  } else if (head?.condition === 'adjustment') { 
-    let reValue:number|string = content.quantity - content.availableQuantity;
-    if (reValue > 0) {
-      reValue = '+'+ reValue;
-    } else if (reValue === 0) {
-      reValue = '';
-    }
-    labelEl = <TextComponent $elipsis={false} id={`text-${head.key}-${idx}`} className='multi-elipsis' style={{ display: 'inline', ...head?.align && { textAlign: head.align } }}>{reValue || '-'}</TextComponent>;
-  } else if (head?.condition === 'countAdjustment') { 
-    let reValue:number = 0;
-    if (content.quantity !== null && content.quantity !== undefined) {
-      reValue = content.quantity - content.qtyOnHand;
-    }
-    const adjustedLbl:number|string = (reValue > 0) ? '+'+ reValue : reValue;
-    labelEl = reValue ? <AdjustedLabel id={`text-${head.key}-${idx}`} className='multi-elipsis' style={{ color: colorCommonQuantity(reValue), textAlign: head?.align || ';eft' }}>{adjustedLbl}</AdjustedLabel> : <></>;
-  } else if (head?.condition === 'store') {
-    labelEl = (
-      <section className="cell-wrapper">
-        <StoreContainer>
-          <section>
-            {
-              value.channelImage ? <ImageComponent $mode='store' alt={value.channelName} src={value.channelImage} width='30px' /> : <InitialContainer style={{ fontSize: '10px', width: '30px', height: '30px', backgroundColor: value.channelColor || '#000000' }}>{value.channelInitials}</InitialContainer>
-            }
-            <div>
-              <strong className='multi-elipsis' title={value?.accountName}>{value?.accountName || '-'}</strong>
-              <LinkComponent target='_blank' href={`https://app.forstok.com/dashboard/invoices/salesinvoices/${content.invoiceId}`}>INV-{content.invoiceId}</LinkComponent>
-            </div>
-          </section>
-        </StoreContainer>
-      </section>
-    );
-  } else {
-    labelEl = <section className="cell-wrapper"><div className='truncate-overflow' {...(height && height !== 'auto') && { style: { maxHeight: height ? (parseInt(height as string) - 34) : 'auto' } }} {...head?.align && { style:{ textAlign: head.align } }}>{_value}</div></section>;
-  }
-  return labelEl;
-}
-
-export default LabelEditors;

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

@@ -1,104 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { OnChangeValue } from 'react-select';
-import moment from 'moment';
-import SelectComponent from '../../../select';
-import { unescapeHTML } from '../../../../assets/javascripts/function';
-import type { TOption } from '../../../select/typed';
-import type { TEditorProps } from '../../typed';
-
-const SelectBareEditors =  ({ head, value, evChange, idx, variantIdx, error, isForceUpdate, setForceUpdate, content }:Omit<TEditorProps, 'evCloseEditor'>) => {
-  const [ selectOptions, setSelectOptions ] = useState<TOption[]|null>(null);
-
-  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 evChangeSelect = (newValue: OnChangeValue<TOption, boolean>) => {
-    const _newValue = newValue as OnChangeValue<TOption, false>;
-    const keyEl = document.getElementById('cur-key');
-    keyEl && (keyEl.innerHTML = eckey)
-    if (head?.condition === 'qtyToReturn') {
-      evCustom(_newValue?.value);
-    } else {
-      evCustom(_newValue);
-    }
-    setForceUpdate && setForceUpdate(true);
-  }
-
-  const evCreateSelect =  (value: string) => {
-    const keyEl = document.getElementById('cur-key');
-    keyEl && (keyEl.innerHTML = eckey);
-    evCustom(value);
-    setForceUpdate && setForceUpdate(true);
-  }
-
-  const evGenerateOptions = useCallback(() => {
-    let options = [];
-    if (content?.dataLocations) {
-      if (head.key === 'locations-batchId') {
-        const optionFilter = content.dataLocations.filter((loc: any) => loc.location === content.locations?.[variantIdx || 0]?.location);
-        if (optionFilter.length) {
-          options = optionFilter.map((opt: any) => opt.batchId).filter((value: any, index: number, current_value: any) => current_value.indexOf(value) === index).map((opt: any) => ({ value: opt, label: opt }));
-        }
-      } else if (head.key === 'locations-expiryDate') {
-        const optionFilter = content.dataLocations.filter((loc: any) => ((loc.location === content.locations?.[variantIdx || 0]?.location) && (loc.batchId === content.locations?.[variantIdx || 0]?.batchId.value))) ;
-        if (optionFilter.length) {
-          options = optionFilter.map((opt: any) => {
-            return ({
-              value: opt.expiryDate,
-              label: moment(opt.expiryDate, 'YYYY-MM-DD HH:mm:ss ZZ').format('D MMM YYYY, hh:mm A')
-            });
-          });
-        }
-      }
-    }
-    return options;
-  }, [content, head, variantIdx])
-
-  useEffect(() => {
-    if(!selectOptions) {
-      const masterCategoryEl = document.getElementById('master-categories');
-      let _newOptions = [];
-      if(head?.condition === 'qtyToReturn') {
-        const maxValue = content.qtyOrdered - content.qtyReturned;
-        for(let i = 0; i <= maxValue; i++) {
-          _newOptions.push({ value: i, label: i });
-        }
-      } else if (head?.schema) {
-        _newOptions = head.schema === 'master_category' ? (masterCategoryEl?.innerHTML !== '' ?  JSON.parse(unescapeHTML(masterCategoryEl?.innerHTML)) : []) : [];
-      } else if (evGenerateOptions().length) {
-        _newOptions = evGenerateOptions();
-      } else {
-        _newOptions = head.options || [];
-      }
-      setSelectOptions(_newOptions);
-    }
-  }, [content, evGenerateOptions, head, selectOptions])
-
-  useEffect(() => {
-    if(isForceUpdate) {
-      const _newOptions = evGenerateOptions();
-      if (_newOptions.length) {
-        setSelectOptions(_newOptions);
-      }
-      setForceUpdate && setForceUpdate(false);
-    }
-  }, [content, evGenerateOptions, head, isForceUpdate, setForceUpdate, variantIdx])
-
-  const selectValue: TOption = head?.condition === 'qtyToReturn' ? { value: value, label: value } : head.typeData === 'Boolean' ? 
-    (head.options?.filter(opt => opt.value === value).length ? head.options.filter(opt => opt.value === value)[0] : value) : 
-    (value ? (typeof value == "string" ? { value: value, label: value }: value ) : {});
-  const qaId = `${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  return (
-    (head?.condition === 'adjustLocation' && !content.locations[variantIdx || 0]?.location) ? null : <div className='master-editor'><SelectComponent {...(head.key === 'category') && { isCreateable: true }} options={selectOptions} defaultValue={selectValue} mode='small-table' name={head.fieldType+'_'+head.key} evCreate={evCreateSelect} evChange={evChangeSelect} isForceUpdate={isForceUpdate} setForceUpdate={setForceUpdate} data-qa-id={`mt-select-${qaId}`} {...error && { isError: true, 'data-tip':error, 'data-place': 'top', 'data-type': 'error' }} placeholder={`Select ${head.name}`} /></div>
-  );
-}
-
-export default SelectBareEditors;

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

@@ -1,142 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { OnChangeValue } from 'react-select';
-import TextComponent from '../../../text';
-import ErrorComponent from '../../../error';
-import SelectComponent from '../../../select';
-import { unescapeHTML } from '../../../../assets/javascripts/function';
-import type { TMouseEvent } from '../../../../typeds/base.typed';
-import type { TOption } from '../../../select/typed';
-import type { TEditorProps } from '../../typed';
-
-const SelectEditors =  ({ head, value, height, evChange, idx, variantIdx, error, evCloseEditor }: TEditorProps) => {
-  const [isEditing, setEdit] = useState<boolean>(false)
-  const [selectOptions, setSelectOptions] = useState<TOption[] | null>(null);
-  const [valueFormState, setValueFormState] = useState<TOption | string>((value !== null || value !== undefined) ? value : '');
-  const [isForceUpdate, setForceUpdate] = useState<boolean>(false);
-  const [isFirstLoadEditor, setFirstLoad] = useState<boolean>(true);
-
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((valueFormState: TOption | string) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if (currentKey && (currentKey === eckey)) {
-      evChange(head, valueFormState, idx, variantIdx);
-      evCloseEditor && evCloseEditor(() => { setEdit(false) });
-    }
-  }, [eckey, head, idx, variantIdx, evChange, evCloseEditor])
-
-  useEffect(() => {
-    if (!isFirstLoadEditor) {
-      evCustom(valueFormState);
-    } else if (isForceUpdate) {
-      evCustom(valueFormState);
-    } else {
-      setFirstLoad(false);
-    }
-  }, [valueFormState, evCustom, isFirstLoadEditor, isForceUpdate])
-
-  useEffect(() => {
-    const docBody = document.body as HTMLBodyElement;
-    const evClick = (e: Event) => {
-      if (!isEditing) {
-        return false;
-      }
-      const target = e.target as HTMLBodyElement;
-      const idTest = target.dataset.id || '';
-      if (idTest && /^react-select/.test(idTest)) {
-        return false;
-      }
-      else if (!target.closest('.master-editor ._refSelectContainer')) {
-        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 HTMLElement;
-    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;
-    !isEditing ? (cellEl && (cellEl.classList.add('cell-editing'))) : (cellEl && (cellEl.classList.remove('cell-editing')));
-  }
-
-  const evChangeSelect = (newValue: OnChangeValue<TOption, boolean>) => {
-    const _newValue = newValue as OnChangeValue<TOption, false>;
-    _newValue?.value && setValueFormState(_newValue.value);
-    setForceUpdate(true);
-  }
-
-  const evCreateSelect = (value: string) => {
-    setValueFormState(value);
-    setForceUpdate(true);
-  }
-
-  useEffect(() => {
-    if (!selectOptions) {
-      const masterCategoryEl = document.getElementById('master-categories') as HTMLDivElement;
-      const _newOptions = (head?.schema && head.schema === 'master_category') ? 
-        (masterCategoryEl.innerHTML !== '' ? JSON.parse(unescapeHTML(masterCategoryEl.innerHTML)) : []) :
-        (head.options || []);
-      setSelectOptions && setSelectOptions(_newOptions);
-    }
-  }, [head, selectOptions])
-
-  const selectValue: TOption = head.typeData === 'Boolean' ? 
-    (head.options?.filter(opt => opt.value === value).length ? head.options.filter(opt => opt.value === value)[0] : value) : 
-    (value ? (typeof value == "string" ? { value: value, label: value }: value ) : {});
-  const labelValue: string = head.typeData === 'Boolean' ? (head.options?.filter(opt => opt.value === value).length ? head.options.filter(opt => opt.value === value)[0].label : value) : value;
-  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' data-qa-id={`mt-select-label-${qaId}`} style={{maxHeight: height ? (parseInt(height as string) - 34) : 'auto'}}>{labelValue}</div>
-              }
-              {error && <ErrorComponent $mode='table'>{error}</ErrorComponent>}
-            </>
-          : 
-            <>
-              {
-                (valueFormState === '' && error) ? 
-                  <TextComponent $color='blue' style={{ fontWeight: 500 }}>+ Add</TextComponent> : 
-                  <div data-qa-id={`mt-select-label-${qaId}`}>{labelValue}</div>
-              }
-              {error && <ErrorComponent $mode='table'>{error}</ErrorComponent>}
-            </>
-        }
-      </section> : 
-      <div className='master-editor'>
-        <SelectComponent 
-          options={selectOptions} 
-          defaultValue={selectValue} 
-          mode='small-table' 
-          name={head.fieldType+'_'+head.key} 
-          evCreate={evCreateSelect} 
-          evChange={evChangeSelect} 
-          isForceUpdate={isForceUpdate} 
-          setForceUpdate={setForceUpdate} 
-          data-qa-id={`mt-select-${qaId}`} 
-          {...head.key === 'category' && { isCreateable: true }} />
-      </div>
-  )
-}
-
-export default SelectEditors

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

@@ -1,56 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import SwitchComponent from '../../../switch';
-import type { TEditorProps } from '../../typed';
-
-const SwitchEditors = ({ head, value, evChange, idx, variantIdx, evCloseEditor }:Omit<TEditorProps, 'error'>) => {
-  const [valueFormState, setValueFormState] = useState<boolean>(value || false);
-  const [isFirstLoadEditor, setFirstLoad] = useState<boolean>(true);
-
-  const nameAlias = `${(head.name).toLowerCase().replaceAll(' ','-')}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  useEffect(() => {
-    const inputSwitchEl = document.getElementById(`${head.fieldType}_${nameAlias}`) as HTMLInputElement;
-    inputSwitchEl && (inputSwitchEl.checked = value);
-    setValueFormState(value);
-  }, [value, head, nameAlias])
-
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((valueCustom: boolean) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if (currentKey && (currentKey === eckey)) {
-      evChange(head, valueCustom, idx, variantIdx);
-      evCloseEditor();
-    }
-  }, [eckey, head, idx, variantIdx, evChange, evCloseEditor])
-
-  useEffect(() => {
-    if (!isFirstLoadEditor) {
-      evCustom(valueFormState);
-    } else {
-      setFirstLoad(false);
-    }
-  }, [valueFormState, evCustom, isFirstLoadEditor])
-
-  const evInput = (currentTarget: HTMLInputElement) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    keyEl && (keyEl.innerHTML = eckey);
-    const cellEl = currentTarget.closest('.cell') as HTMLDivElement;
-    cellEl && (cellEl.classList.add('cell-editing'));
-    const value = currentTarget.checked;
-    const isClosed = valueFormState === value;
-    setValueFormState(value);
-    isClosed && evCloseEditor();
-  }
-
-  const checkedValue = valueFormState as boolean | undefined;
-
-  return (
-    <div className='master-editor'>
-      <SwitchComponent name={head.fieldType+'_'+head.key} id={`${head.fieldType}_${nameAlias}`} aria-label={head.name} value={valueFormState.toString()} defaultChecked={checkedValue} data-qa-id={`mt-checkbox-${nameAlias}`} evChange={e=> { evInput(e.target) }} />
-    </div>
-  );
-}
-
-export default SwitchEditors;

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

@@ -1,49 +0,0 @@
-import { useEffect, useCallback, ReactNode } from 'react';
-import type { TMouseEvent, TObject } from '../../../../typeds/base.typed';
-import type { TOption } from '../../../select/typed';
-import type { TEditorProps } from '../../typed';
-
-const TagEditors =  ({ head, value, height, evChange, evOpenPopup, idx, variantIdx, resultPopup, setResultPopup, evCloseEditor }:Omit<TEditorProps, 'error'>) => {
-  const eckey = `${head.key}-${idx}${(variantIdx !== undefined ? '-'+variantIdx : '')}`;
-
-  const evCustom = useCallback((result: TObject[string]) => {
-    const keyEl = document.getElementById('cur-key') as HTMLDivElement;
-    const currentKey = keyEl ? keyEl.innerHTML : '';
-    if (currentKey && (currentKey === eckey)) {
-      evChange(head, result, idx, variantIdx);
-      evCloseEditor();
-    }
-  }, [eckey, head, idx, variantIdx, evChange, evCloseEditor])
-
-  useEffect(()=> {
-    if (resultPopup && ('tag' in resultPopup)) {
-      setResultPopup && setResultPopup(null);
-      evCustom(resultPopup.tag);
-    }
-  }, [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-tag' 
-      data-detail={JSON.stringify({ title: head.name, value: value })}>
-        <div className='truncate-overflow' style={{maxHeight:  height ? (parseInt(height as string) - 34) : 'auto'}}>{value && value.map((val: TOption, idx: number) => <span key ={idx}>{(val as unknown as ReactNode)}</span>)}</div>
-    </section>
-  );
-}
-
-export default TagEditors;

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

@@ -1,7 +0,0 @@
-import type { TEditorProps } from '../../typed';
-
-const TextareaEditors = ({ value, height }:Omit<TEditorProps, 'evChange' | 'evCloseEditor' | 'error'>) => {
-  return <section  className="cell-wrapper"><div className='truncate-overflow' {...(height && height !== 'auto') && { style: { maxHeight: height ? (parseInt(height as string) - 34) : 'auto' } }}>{value}</div></section>;
-}
-
-export default TextareaEditors;