es-grid-template 1.6.0 → 1.6.2

package/lib/grid-component/EditableCell.js

@@ -19,6 +19,7 @@ var _rcMasterUi = require("rc-master-ui");
 var _asyncSelect = require("./async-select");
 var _asyncTableSelect = require("./async-table-select");
 var _colors = require("@ant-design/colors");
+var _EditForm = require("./EditForm");
 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; }
 // import moment from "moment";
@@ -150,16 +151,7 @@ const EditableCell = props => {
           placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
-          minDate: minDate
-
-          // onOpenChange={(open) => {
-          //   console.log(open)
-          //   if (open) {
-          //     handleSubmit(onSubmit)
-          //   }
-          // }}
-          ,
-
+          minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _hooks.convertDayjsToDate)(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
@@ -198,7 +190,6 @@ const EditableCell = props => {
           minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _hooks.convertDayjsToDate)(dateString, dateFormat)).format() : null;
-            // console.log('newDateValue', newDateValue)
             onChange(newDateValue);
             setTimeout(() => {
               // @ts-ignore
@@ -748,36 +739,51 @@ const EditableCell = props => {
           },
           disabled: (0, _hooks.isDisable)(column, record) ?? false
         }));
+      case 'form':
+        const valueForm = value;
+        return /*#__PURE__*/_react.default.createElement(_EditForm.EditForm, {
+          rowData: record,
+          column: column,
+          t: t,
+          id: `col${indexCol}-record${indexRow}`,
+          value: valueForm
+          // fieldKey={'name'}
+          ,
+          fieldKey: column.editFromSettings?.fieldKey
+          // recordData={record}
+          ,
+          indexRow: indexRow,
+          cellFocus: column.field === cellEditing?.column.field,
+          onChange: val => {
+            const formState = getValues();
 
-      // case 'form':
-      //
-      //   const valueForm = record[column.dataIndex]
-      //
-      //   return (
-      //     <EditForm
-      //       column={col}
-      //       t={t}
-      //       id={`col${indexCol}-record${indexRow}`}
-      //       value={valueForm}
-      //       fieldKey={'name'}
-      //       recordData={record}
-      //       indexRow={indexRow}
-      //       cellFocus={cellFocus}
-      //       onChange={(val: any) => {
-      //         // record[column.dataIndex] = val
-      //         const newrecordData = {
-      //           ...record,
-      //           [column.dataIndex]: val
-      //         }
-      //         handleCellChange(val, val, newrecordData, col, indexRow, indexCol)
-      //       }}
-      //       menuPortalTarget={tableContainerRef}
-      //       classNamePrefix={column.classElement ?? 'select'}
-      //       placeholder={t ? t(column.placeholder ? column.placeholder : '') : (column.placeholder ? column.placeholder : '')}
-      //       menuWidth={column.editFromSettings?.menuWidth}
-      //       menuHeight={column.editFromSettings?.menuHeight}
-      //     />
-      //   )
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              field: column.field ?? column.dataIndex,
+              record: {
+                ...formState,
+                [column.field ?? '']: val
+              },
+              prevState,
+              newState,
+              option: val,
+              indexCol,
+              indexRow,
+              type: 'blur'
+            });
+          }
+          // cellEditing={cellEditing}
+
+          // menuPortalTarget={tableContainerRef}
+          // classNamePrefix={column.classElement ?? 'select'}
+          ,
+          placeholder: t ? t(column.placeholder ? column.placeholder : '') : column.placeholder ? column.placeholder : '',
+          menuWidth: column.editFromSettings?.menuWidth,
+          menuHeight: column.editFromSettings?.menuHeight
+        });
 
       // case 'file':
       //   const valueFile = record[column.dataIndex]
@@ -962,9 +968,6 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = value;
-            //
-            // console.log('newState', newState)
-            // console.log('prevState', prevState)
             const key = getRowKey?.(record, index);
             // @ts-ignore
             if (newState !== prevState) {

package/lib/grid-component/InternalTable.js

@@ -337,7 +337,9 @@ const InternalTable = props => {
       setSearchValue
     }) => {
       const type = (0, _hooks.getTypeFilter)(column);
-      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
+      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
+
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           padding: 8,
@@ -836,8 +838,11 @@ const InternalTable = props => {
   };
   const triggerPaste = (pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const newDataUpdate = (0, _hooks.updateData)(mergedData, callbackData, rowKey);
-      triggerChangeData(newDataUpdate);
+      // const newDataUpdate  = updateData(mergedData, callbackData, rowKey as any)
+
+      const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...mergedData]), callbackData);
+      const rs = (0, _hooks.unFlattenData)(rsFilterData);
+      triggerChangeData(rs);
 
       // onCellPaste?.dataChange?.(newDataUpdate)
     };

package/lib/grid-component/control/InputControl/InputControl.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLInputTypeAttribute } from "react";
+import React from "react";
+interface IFFormInput {
+    id?: any;
+    control: any;
+    name: string;
+    type?: HTMLInputTypeAttribute;
+    label: string;
+    labelSize?: string;
+    required?: boolean;
+    errors?: any;
+    height?: number | string;
+    disabled?: boolean;
+    row?: number;
+    isLabel?: boolean;
+    inLine?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    classes?: string;
+    callback?: any;
+    readOnly?: boolean;
+    isView?: boolean;
+    t?: any;
+    onKeyDown?: (event: any) => void;
+}
+declare const InputControl: (props: IFFormInput) => React.JSX.Element;
+export default InputControl;

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reactHookForm = require("react-hook-form");
+var _rcMasterUi = require("rc-master-ui");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _grid = require("rc-master-ui/es/grid");
+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; }
+// import type { InputType } from "reactstrap/types/lib/Input"
+
+// import {isNullOrUndefined} from "../../../hooks"
+
+const {
+  Text
+} = _antd.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.default.createElement(_grid.Col, {
+      span: 8
+    }, isLabel === false ? '' : /*#__PURE__*/_react.default.createElement("label", {
+      className: "form-label"
+    }, t ? t(label ? label : '') : label ? label : '', " ", required ? /*#__PURE__*/_react.default.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.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+      name: name,
+      control: control,
+      render: ({
+        field: {
+          value,
+          onChange
+        }
+      }) => /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, (0, _extends2.default)({}, rest, {
+        id: id,
+        value: !(0, _hooks.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.default.createElement(Text, {
+      type: "danger"
+    }, errors?.message));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_grid.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.default.createElement(_grid.Col, {
+    span: 16,
+    className: (0, _classnames.default)('', {
+      'hidden-label': isLabel === false
+    })
+  }, renderInput())));
+};
+var _default = exports.default = InputControl;

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

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

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

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

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

@@ -31,6 +31,8 @@ var _HeaderContent = _interopRequireDefault(require("../hooks/content/HeaderCont
 var _sortable = require("@dnd-kit/sortable");
 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; }
+// import {Button, Dropdown, Form, Modal, Typography} from "antd"
+
 // import {faker} from "@faker-js/faker";
 
 const {
@@ -413,7 +415,8 @@ const GridEdit = props => {
       })
     }];
   }, [t, locale]);
-  const [form] = _antd.Form.useForm();
+
+  // const [form] = Form.useForm()
 
   // const [editingKey, setEditingKey] = useState<string | number>('')
 
@@ -1365,7 +1368,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)) {
@@ -1834,7 +1837,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-    if (changeType === 'enter') {}
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
         const callbackRecord = callbackData;
@@ -2332,7 +2334,6 @@ const GridEdit = props => {
       //     // },
       //     //
       //     // onPaste: (event: any) => {
-      //     //   console.log('3333', event)
       //     //
       //     //   if (editingKey.current === '') {
       //     //
@@ -2551,7 +2552,7 @@ const GridEdit = props => {
     value: {
       id: id ?? '',
       rowKey,
-      form,
+      // form,
       format,
       control,
       trigger,

package/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -78,7 +78,8 @@
     "sweetalert2": "^11.4.14",
     "sweetalert2-react-content": "^5.0.0",
     "throttle-debounce": "^5.0.2",
-    "vitest": "^2.0.5"
+    "vitest": "^2.0.5",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",