es-grid-template 1.8.64 → 1.8.66

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

@@ -1,404 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SelectStyle = exports.EditForm = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactHookForm = require("react-hook-form");
-var _yup = require("@hookform/resolvers/yup");
-var _grid = require("rc-master-ui/es/grid");
-var _InputControl = _interopRequireDefault(require("../control/InputControl/InputControl"));
-var _hooks = require("../hooks");
-var _rcMasterUi = require("rc-master-ui");
-var _antd = require("antd");
-var _divider = _interopRequireDefault(require("rc-master-ui/es/divider"));
-var _button = _interopRequireDefault(require("rc-master-ui/es/button"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const SelectStyle = exports.SelectStyle = _styledComponents.default.div.withConfig({
-  displayName: "SelectStyle",
-  componentId: "es-grid-template__sc-7ba05m-0"
-})(["width:100%;&.be-select{.input-group-merge{flex-wrap:nowrap;}}"]);
-const EditForm = props => {
-  const {
-    id,
-    // menuPortalTarget,
-    value,
-    fieldKey,
-    placeholder,
-    // invalid,
-    menuHeight,
-    menuWidth,
-    // classNamePrefix,
-    onChange,
-    rowData,
-    // onKeyDown,
-    t,
-    cellFocus,
-    column
-  } = props;
-  const formRef = (0, _react.useRef)();
-  const divRef = (0, _react.useRef)(null);
-  const inputRef = (0, _react.useRef)(null);
-  const defaultValue = !(0, _hooks.isNullOrUndefined)(value) ? column?.editFromSettings?.formatLabel ? column?.editFromSettings?.formatLabel(value) : value[fieldKey] : '';
-  const {
-    control,
-    handleSubmit,
-    getValues,
-    reset,
-    setValue,
-    setError,
-    formState: {
-      errors
-    }
-  } = (0, _reactHookForm.useForm)({
-    mode: 'onChange',
-    defaultValues: column.editFromSettings?.defaultValues,
-    resolver: column.editFromSettings?.schema ? (0, _yup.yupResolver)(column.editFromSettings?.schema) : undefined
-  });
-  const handleToggle = () => {
-    divRef?.current?.click(); // Giả lập click vào nút để mở dropdown
-  };
-  _react.default.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 ((0, _hooks.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.default.createElement(_grid.Row, {
-      gutter: [0, 10]
-    }, rows.map((item, index) => {
-      return /*#__PURE__*/_react.default.createElement(_grid.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.default.createElement(_InputControl.default, {
-        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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(SelectStyle, {
-    ref: formRef,
-    id: id ? id : ''
-  }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement("div", {
-      style: contentStyle,
-      onKeyDown: e => handleFormKeydown(e),
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }, /*#__PURE__*/_react.default.createElement("form", {
-      className: "todo-modal",
-      onSubmit: handleSubmit(handleOnSubmit)
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'p-1',
-      style: {
-        maxHeight: menuHeight ? menuHeight : 300,
-        overflow: "auto"
-      }
-    }, column.editFromSettings?.items ? renderForm(column.editFromSettings?.items) : ''), /*#__PURE__*/_react.default.createElement(_divider.default, {
-      style: {
-        margin: 0
-      }
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex justify-content-end p-1"
-      // style={{ boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }}
-    }, /*#__PURE__*/_react.default.createElement(_button.default, {
-      variant: "solid",
-      className: ""
-      // onSubmit={handleSubmit(handleOnSubmit)}
-      ,
-      onClick: handleSubmit(handleOnSubmit),
-      color: "primary",
-      style: {}
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex "
-    }, t ? t('Save') : 'Save'))))))
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: divRef,
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.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
-  })))));
-};
-exports.EditForm = EditForm;

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

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

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

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _EditForm = require("./EditForm");
-Object.keys(_EditForm).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _EditForm[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _EditForm[key];
-    }
-  });
-});

package/lib/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;