es-grid-template 1.8.64 → 1.8.66

package/es/grid-component/EditForm/EditForm.js

@@ -1,394 +0,0 @@
-import React, { Fragment, useRef } from "react";
-import styled from "styled-components";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { Col, Row } from "rc-master-ui/es/grid";
-import InputControl from "../control/InputControl/InputControl";
-import { isNullOrUndefined, isObjEmpty } from "../hooks";
-import { Input } from "rc-master-ui";
-import { Dropdown } from "antd";
-import Divider from "rc-master-ui/es/divider";
-import Button from "rc-master-ui/es/button";
-export const SelectStyle = styled.div.withConfig({
-  displayName: "SelectStyle",
-  componentId: "es-grid-template__sc-7ba05m-0"
-})(["width:100%;&.be-select{.input-group-merge{flex-wrap:nowrap;}}"]);
-export const EditForm = props => {
-  const {
-    id,
-    // menuPortalTarget,
-    value,
-    fieldKey,
-    placeholder,
-    // invalid,
-    menuHeight,
-    menuWidth,
-    // classNamePrefix,
-    onChange,
-    rowData,
-    // onKeyDown,
-    t,
-    cellFocus,
-    column
-  } = props;
-  const formRef = useRef();
-  const divRef = useRef(null);
-  const inputRef = useRef(null);
-  const defaultValue = !isNullOrUndefined(value) ? column?.editFromSettings?.formatLabel ? column?.editFromSettings?.formatLabel(value) : value[fieldKey] : '';
-  const {
-    control,
-    handleSubmit,
-    getValues,
-    reset,
-    setValue,
-    setError,
-    formState: {
-      errors
-    }
-  } = useForm({
-    mode: 'onChange',
-    defaultValues: column.editFromSettings?.defaultValues,
-    resolver: column.editFromSettings?.schema ? yupResolver(column.editFromSettings?.schema) : undefined
-  });
-  const handleToggle = () => {
-    divRef?.current?.click(); // Giả lập click vào nút để mở dropdown
-  };
-  React.useEffect(() => {
-    if (cellFocus) {
-      handleToggle();
-    }
-  }, [cellFocus]);
-  const handleOnSubmit = val => {
-    handleToggle();
-    onChange(val);
-  };
-
-  // const handleOnKeyDown = (e: any) => {
-  //
-  //   if (dropdownOpen) {
-  //     e.preventDefault()
-  //
-  //     if (e.code === 'Tab') {
-  //       e.stopPropagation()
-  //       const formElement  = document.getElementById('edit-form')
-  //
-  //       if (formElement) {
-  //
-  //         formElement.getElementsByTagName('input')[0]?.focus()
-  //
-  //       }
-  //
-  //     }
-  //
-  //     if (e.code === "Escape") {
-  //       e.preventDefault()
-  //       e.stopPropagation()
-  //       return e
-  //     }
-  //
-  //     const formElement  = document.getElementById('edit-form')
-  //
-  //     if (formElement) {
-  //
-  //       formElement.getElementsByTagName('input')[0]?.focus()
-  //
-  //     }
-  //     return e.code
-  //
-  //
-  //   } else {
-  //     if (e.code === 'ArrowDown') {
-  //       e.preventDefault()
-  //
-  //       setTimeout(() => {
-  //         const formElement  = document.getElementById('edit-form')
-  //         if (formElement) {
-  //           formElement.getElementsByTagName('input')[0]?.focus()
-  //
-  //         }
-  //
-  //       }, 100)
-  //
-  //
-  //     }
-  //   }
-  //
-  //   if (onKeyDown) {
-  //     onKeyDown(e)
-  //   }
-  //
-  //
-  // }
-  //
-
-  const handleOnFocus = e => {
-    e.target.setSelectionRange(0, e.target.innerText.length - 1);
-  };
-  const formItemKeyDown = (e, index, length) => {
-    if (e.code === 'Tab' || e.code === 'ArrowDown') {
-      const itemElement = document.getElementById(`edit-form-${index + 1}`);
-      if (itemElement && index < length) {
-        if (itemElement.className.includes('be-select')) {
-          itemElement.getElementsByTagName('input')[0]?.focus();
-        } else {
-          itemElement.focus();
-        }
-      }
-      e.preventDefault();
-    }
-    if (e.code === 'ArrowUp') {
-      const itemElement = document.getElementById(`edit-form-${index - 1}`);
-      if (itemElement && index !== 0) {
-        if (itemElement.className.includes('be-select')) {
-          itemElement.getElementsByTagName('input')[0]?.focus();
-        } else {
-          itemElement.focus();
-        }
-      }
-      e.preventDefault();
-    }
-    if (e.code === 'Enter') {
-      if (isObjEmpty(errors)) {
-        const rs = getValues();
-        if (column.editFromSettings?.schema) {
-          column.editFromSettings?.schema.validate(rs, {
-            abortEarly: false
-          }).then(() => {
-            handleToggle();
-            onChange(rs);
-            if (column.editFromSettings && column?.editFromSettings?.formClose) {
-              column?.editFromSettings?.formClose({
-                value,
-                setValue,
-                getValues,
-                reset
-              });
-            }
-            if (inputRef) {
-              inputRef.current.focus();
-            }
-          }).catch(err => {
-            e.preventDefault();
-            e.stopPropagation();
-            err.inner.forEach(error => {
-              setError(error.path ? error.path : '', {
-                type: "manual",
-                message: error.message
-              });
-            });
-          });
-        }
-      } else {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }
-  };
-
-  // const checkErrors = () => {
-  //
-  //
-  //   if (isObjEmpty(errors)) {
-  //     const rs = getValues()
-  //     if (column.editFromSettings?.schema) {
-  //       column.editFromSettings?.schema.validate(rs, { abortEarly: false })
-  //         .then(() => {
-  //           handleToggle()
-  //           onChange(rs)
-  //
-  //           if (column.editFromSettings && column?.editFromSettings?.formClose) {
-  //             column?.editFromSettings?.formClose({value, setValue, getValues, reset})
-  //           }
-  //           if (inputRef) {
-  //             inputRef.current.focus()
-  //           }
-  //         })
-  //         .catch((err: ValidationError) => {
-  //
-  //           err.inner.forEach((error: ValidationError) => {
-  //
-  //             setError(error.path ? error.path : '', {
-  //               type: "manual",
-  //               message: error.message
-  //             })
-  //           })
-  //         })
-  //     }
-  //
-  //
-  //   } else  {
-  //
-  //   }
-  // }
-
-  const handleFormKeydown = e => {
-    // if (dropdownOpen) {
-
-    if (e.code === 'Tab' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {
-      e.preventDefault();
-      e.stopPropagation();
-      // if (formElement && indexRowForm <= totalRowFrom) {
-      //   setIndexRowForm((prevState) => prevState + 1)
-      //   formElement.getElementsByTagName('input')[indexRowForm + 1]?.focus()
-      // }
-    }
-
-    // if (e.code === 'Enter') {
-    //   const rs = getValues()
-    //
-    //
-    //   onChange(rs)
-    //
-    //   if (column.editFromSettings && column?.editFromSettings?.formClose) {
-    //     column?.editFromSettings?.formClose({value, setValue, getValues, reset})
-    //   }
-    //   if (inputRef) {
-    //     inputRef.current.focus()
-    //   }
-    //
-    //   e.preventDefault()
-    //   e.stopPropagation()
-    // }
-
-    if (e.code === "Escape") {
-      handleToggle();
-      if (inputRef) {
-        inputRef.current.focus();
-      }
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    return e.code;
-    // }
-  };
-  const renderForm = rows => {
-    return /*#__PURE__*/React.createElement(Row, {
-      gutter: [0, 10]
-    }, rows.map((item, index) => {
-      return /*#__PURE__*/React.createElement(Col, {
-        key: `${index}`,
-        xl: column.editFromSettings?.layout?.xl ? column.editFromSettings?.layout?.xl : 24,
-        lg: column.editFromSettings?.layout?.lg ? column.editFromSettings?.layout?.lg : 24,
-        md: column.editFromSettings?.layout?.md ? column.editFromSettings?.layout?.md : 24,
-        sm: column.editFromSettings?.layout?.sm ? column.editFromSettings?.layout?.sm : 24,
-        xs: column.editFromSettings?.layout?.xs ? column.editFromSettings?.layout?.xs : 24,
-        className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(InputControl, {
-        id: `edit-form-${index}`,
-        t: t,
-        control: control
-        // name={`specificationCode${index + 1}`}
-        ,
-        name: item.name,
-        label: item.label ? item.label : '',
-        labelSize: "label-medium",
-        errors: errors[item.name],
-        onKeyDown: e => formItemKeyDown(e, index, column.editFromSettings?.items ? column.editFromSettings?.items.length : 0)
-      }));
-    }));
-  };
-  const contentStyle = {
-    padding: 6,
-    width: menuWidth,
-    backgroundColor: '#fff',
-    borderRadius: '6px',
-    boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)'
-  };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SelectStyle, {
-    ref: formRef,
-    id: id ? id : ''
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    menu: {
-      items: []
-    },
-    autoFocus: true,
-    onOpenChange: open => {
-      if (open) {
-        setTimeout(() => {
-          const formElement = document.getElementById('edit-form-0');
-          if (formElement) {
-            formElement.focus();
-          }
-        }, 10);
-        if (column.editFromSettings && column?.editFromSettings?.formOpen) {
-          column?.editFromSettings?.formOpen({
-            value,
-            setValue,
-            getValues,
-            reset,
-            rowData
-          });
-        }
-      } else {
-        if (column.editFromSettings && column?.editFromSettings?.formClose) {
-          column?.editFromSettings?.formClose({
-            value,
-            setValue,
-            getValues,
-            reset,
-            rowData
-          });
-        }
-      }
-    },
-    trigger: ['click'],
-    destroyPopupOnHide: true,
-    rootClassName: 'be-popup-container',
-    dropdownRender: () => /*#__PURE__*/React.createElement("div", {
-      style: contentStyle,
-      onKeyDown: e => handleFormKeydown(e),
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement("form", {
-      className: "todo-modal",
-      onSubmit: handleSubmit(handleOnSubmit)
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: 'p-1',
-      style: {
-        maxHeight: menuHeight ? menuHeight : 300,
-        overflow: "auto"
-      }
-    }, column.editFromSettings?.items ? renderForm(column.editFromSettings?.items) : ''), /*#__PURE__*/React.createElement(Divider, {
-      style: {
-        margin: 0
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "d-flex justify-content-end p-1"
-      // style={{ boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }}
-    }, /*#__PURE__*/React.createElement(Button, {
-      variant: "solid",
-      className: ""
-      // onSubmit={handleSubmit(handleOnSubmit)}
-      ,
-      onClick: handleSubmit(handleOnSubmit),
-      color: "primary",
-      style: {}
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "d-flex "
-    }, t ? t('Save') : 'Save'))))))
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: divRef,
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Input, {
-    style: {
-      borderRadius: 0,
-      height: '100%'
-    },
-    ref: inputRef,
-    defaultValue: defaultValue,
-    value: defaultValue,
-    placeholder: placeholder,
-    className: 'be-select__input'
-    // onChange={handleOnChange}
-    ,
-    onFocus: handleOnFocus
-    // onClick={handleOnClick}
-    // onKeyDown={handleOnKeyDown}
-    ,
-    readOnly: true
-  })))));
-};

package/es/grid-component/EditForm/index.d.ts

@@ -1 +0,0 @@
-export * from './EditForm';

package/es/grid-component/EditForm/index.js

@@ -1 +0,0 @@
-export * from "./EditForm";

package/es/grid-component/EditableCell.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import type { ColumnTable, IFormat } from "./type";
-import type { EditType } from "rc-master-ui";
-interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
-    t?: any;
-    editing: boolean;
-    dataIndex: string;
-    title: any;
-    editType: EditType;
-    record: DataType;
-    index: number;
-    format?: IFormat;
-    column: ColumnTable<DataType>;
-    indexRow: number;
-    indexCol: number;
-    rowKey: any;
-    cellEditing: any;
-}
-declare const EditableCell: <T>(props: React.PropsWithChildren<EditableCellProps<T>>) => React.JSX.Element;
-export default EditableCell;