es-grid-template 1.6.0 → 1.6.2

package/es/grid-component/control/InputControl/InputControl.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { Controller } from "react-hook-form";
+import { Input } from "rc-master-ui";
+import { Typography } from "antd";
+import classnames from "classnames";
+import React, { Fragment } from "react";
+// import type { InputType } from "reactstrap/types/lib/Input"
+import { isNullOrUndefined } from "../../hooks";
+import { Col, Row } from "rc-master-ui/es/grid";
+// import {isNullOrUndefined} from "../../../hooks"
+
+const {
+  Text
+} = Typography;
+const InputControl = props => {
+  const {
+    id,
+    control,
+    name,
+    type,
+    label,
+    labelSize,
+    required,
+    errors,
+    height,
+    disabled,
+    row,
+    isLabel,
+    placeholder,
+    autoFocus,
+    inLine,
+    callback,
+    readOnly,
+    classes,
+    isView,
+    t,
+    onKeyDown,
+    ...rest
+  } = props;
+  const renderLabel = () => {
+    return /*#__PURE__*/React.createElement(Col, {
+      span: 8
+    }, isLabel === false ? '' : /*#__PURE__*/React.createElement("label", {
+      className: "form-label"
+    }, t ? t(label ? label : '') : label ? label : '', " ", required ? /*#__PURE__*/React.createElement("span", {
+      className: "text-danger"
+    }, "*") : '', " "));
+  };
+
+  // const renderText = () => {
+  //   return (
+  //     <Fragment>
+  //       <Controller
+  //         name={name}
+  //         control={control}
+  //         render={({ field: { value } }) => (
+  //           <span>{value}</span>
+  //         )}
+  //       />
+  //     </Fragment>
+  //   )
+  // }
+
+  const renderInput = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(Controller, {
+      name: name,
+      control: control,
+      render: ({
+        field: {
+          value,
+          onChange
+        }
+      }) => /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+        id: id,
+        value: !isNullOrUndefined(value) ? value : '',
+        onChange: val => {
+          onChange(val.target.value);
+          if (callback) {
+            callback(val);
+          }
+        },
+        style: {
+          height: `${height}px`
+        },
+        autoFocus: autoFocus,
+        disabled: disabled,
+        placeholder: placeholder,
+        type: type ? type : 'text'
+        // invalid={errors && true}
+        ,
+        status: errors && true ? 'error' : undefined
+        // rows={row}
+        ,
+        readOnly: readOnly,
+        onKeyDown: onKeyDown
+      }))
+    }), errors && /*#__PURE__*/React.createElement(Text, {
+      type: "danger"
+    }, errors?.message));
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Row, {
+    gutter: [4, 4]
+    // className={classnames(' align', {
+    //   [labelSize ? labelSize : '']: labelSize,
+    //   [classes ? classes : '']: classes,
+    //   'form-row-inline-error': errors
+    // }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'
+    // )}
+  }, renderLabel(), /*#__PURE__*/React.createElement(Col, {
+    span: 16,
+    className: classnames('', {
+      'hidden-label': isLabel === false
+    })
+  }, renderInput())));
+};
+export default InputControl;

package/es/grid-component/control/InputControl/index.d.ts

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

package/es/grid-component/control/InputControl/index.js

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

package/es/grid-component/table/GridEdit.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useMemo, useRef, useState } from 'react';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import classNames from "classnames";
-import { Button, Dropdown, Form, Modal, Typography } from "antd";
+// import {Button, Dropdown, Form, Modal, Typography} from "antd"
+import { Button, Dropdown, Modal, Typography } from "antd";
 import { useForm } from 'react-hook-form';
 import { Toaster } from "react-hot-toast";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -417,7 +418,8 @@ const GridEdit = props => {
       })
     }];
   }, [t, locale]);
-  const [form] = Form.useForm();
+
+  // const [form] = Form.useForm()
 
   // const [editingKey, setEditingKey] = useState<string | number>('')
 
@@ -1369,7 +1371,7 @@ const GridEdit = props => {
     const pasteData = e.clipboardData.getData("text/plain");
 
     // Chuyển đổi dữ liệu từ clipboard thành mảng
-    const rowsPasted = pasteData.split("\n").map(row =>
+    const rowsPasted = pasteData.split("\n").filter(row => row !== '').map(row =>
     // const rows = pasteData.split("\n").map((row: any) =>
     row.replace(/\r/g, "").split("\t"));
     if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
@@ -1838,7 +1840,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-    if (changeType === 'enter') {}
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
         const callbackRecord = callbackData;
@@ -2336,7 +2337,6 @@ const GridEdit = props => {
       //     // },
       //     //
       //     // onPaste: (event: any) => {
-      //     //   console.log('3333', event)
       //     //
       //     //   if (editingKey.current === '') {
       //     //
@@ -2555,7 +2555,7 @@ const GridEdit = props => {
     value: {
       id: id ?? '',
       rowKey,
-      form,
+      // form,
       format,
       control,
       trigger,

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

@@ -132,9 +132,37 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     max?: number;
     min?: number;
     editSelectSettings?: IEditSelectSettings;
+    editFromSettings?: IEditFromSettings;
     fixedType?: FixedType;
     headerTextWrap?: boolean;
 };
+export type IFormOpen = {
+    value?: any;
+    setValue?: any;
+    getValues?: any;
+    reset?: any;
+    rowData?: any;
+};
+export type IEditFromSettings = {
+    fieldKey: string;
+    formOpen?: (props: IFormOpen) => void;
+    formClose?: (props: IFormOpen) => void;
+    formatLabel?: (value: any) => string;
+    menuWidth?: number;
+    menuHeight?: number;
+    labelWith?: number;
+    items: any[];
+    layout?: {
+        xl?: IGrid;
+        lg?: IGrid;
+        md?: IGrid;
+        sm?: IGrid;
+        xs?: IGrid;
+    };
+    defaultValues?: Record<string, any>;
+    schema?: any;
+};
+type IGrid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 export type ColumnTemplate<RecordType> = {
     value: any;
     rowData: RecordType;

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

@@ -9,7 +9,6 @@ export interface IContext<RecordType> {
     setOpen?: any;
     rowKey: string | keyof RecordType | GetRowKey<RecordType>;
     onSave?: any;
-    form?: any;
     format?: IFormat;
     control?: any;
     errors?: any;

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

@@ -0,0 +1,27 @@
+import React from "react";
+type Props = {
+    id?: string;
+    externalClick?: any;
+    menuPortalTarget?: any;
+    value: any;
+    onChange: (props: any) => void;
+    filterKey?: string;
+    customRender?: any;
+    filterHeaderKey?: string;
+    placeholder?: string;
+    invalid?: any;
+    menuHeight?: number;
+    menuWidth?: number;
+    classNamePrefix?: string;
+    cellFocus?: boolean;
+    t?: any;
+    column: any;
+    fieldKey?: any;
+    rowData: any;
+    indexRow: any;
+    template?: any;
+    onKeyDown?: (event: any) => void;
+};
+export declare const SelectStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EditForm: (props: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,404 @@
+"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

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

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

@@ -0,0 +1,16 @@
+"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];
+    }
+  });
+});