es-grid-template 1.7.23 → 1.7.24

package/es/table-component/body/TableBodyRow.d.ts

@@ -0,0 +1,21 @@
+import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+import type { Column, Row, Table } from "@tanstack/react-table";
+import type { CommandClick } from "../type";
+import React from "react";
+interface TableBodyRowProps<T> {
+    tableId: string;
+    table: Table<T>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    row: Row<T>;
+    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    virtualRow: VirtualItem;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+    commandClick?: (args: CommandClick) => void;
+    editAble?: boolean;
+    [key: string]: any;
+}
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, columnVirtualizer, row, rowVirtualizer, virtualPaddingLeft, virtualPaddingRight, virtualRow, fixedLeftColumns, fixedRightColumns, commandClick, editAble, isEditing, contextMenuItems, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
+export default TableBodyRow;

package/es/table-component/body/TableBodyRow.js

@@ -0,0 +1,146 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import TableBodyCell from "./TableBodyCell";
+import TableBodyCellEdit from "./TableBodyCellEdit";
+import React from "react";
+import { TableContext } from "../useContext";
+import classNames from "classnames";
+const TableBodyRow = ({
+  tableId,
+  table,
+  columnVirtualizer,
+  row,
+  rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  fixedLeftColumns,
+  fixedRightColumns,
+  commandClick,
+  editAble,
+  isEditing,
+  contextMenuItems,
+  ...rest
+}) => {
+  const {
+    prefix,
+    recordDoubleClick,
+    onContextMenu
+  } = React.useContext(TableContext);
+  const visibleCells = row.getVisibleCells();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+
+  // table.options.set
+
+  return /*#__PURE__*/React.createElement("tr", {
+    "data-index": virtualRow.index //needed for dynamic row height measurement
+    ,
+    ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
+    ,
+    key: row.id
+
+    // className={} ui-rc-table-row-selected
+    ,
+    className: classNames(`${prefix}-grid-row`, {
+      [`${prefix}-grid-row-selected`]: row.getIsSelected()
+    }),
+    style: {
+      // display: 'flex',
+      // position: 'absolute',
+      transform: `translateY(${virtualRow.start}px)`,
+      //this should always be a `style` as it changes on scroll
+      // width: '100%',
+      // height: isEditing ? '36px' : undefined,
+      height: isEditing ? virtualRow.size : undefined,
+      minHeight: isEditing ? undefined : virtualRow.size
+    },
+    onDoubleClick: e => {
+      recordDoubleClick?.({
+        e,
+        rowData: row.original,
+        rowIndex: row.index
+      });
+    },
+    onContextMenu: e => {
+      if (contextMenuItems && contextMenuItems.length) {
+        onContextMenu?.(row.original)(e);
+      }
+    }
+
+    // onContextMenu={onContextMenu(row.original)}
+  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+    const cell = row.getVisibleCells().find(c => c.column.id === column.id);
+    if (editAble) {
+      return /*#__PURE__*/React.createElement(TableBodyCellEdit, _extends({}, rest, {
+        table: table,
+        tableId: tableId,
+        key: cell.id,
+        cell: cell,
+        commandClick: commandClick,
+        isEditing: isEditing,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer
+      }));
+    }
+    return /*#__PURE__*/React.createElement(TableBodyCell, {
+      key: column.id,
+      table: table,
+      cell: row.getVisibleCells().find(c => c.column.id === column.id),
+      commandClick: commandClick
+    });
+  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("td", {
+    className: "",
+    style: {
+      display: "flex",
+      width: virtualPaddingLeft
+    }
+  }) : null, virtualColumns.map(vc => {
+    const cell = visibleCells[vc.index];
+    const isFixed = table.getState().columnPinning.left?.includes(cell.column.id) || table.getState().columnPinning.right?.includes(cell.column.id);
+    if (cell && !isFixed) {
+      if (editAble) {
+        return /*#__PURE__*/React.createElement(TableBodyCellEdit, _extends({}, rest, {
+          table: table,
+          key: cell.id,
+          tableId: tableId,
+          cell: cell,
+          commandClick: commandClick,
+          isEditing: isEditing,
+          rowVirtualizer: rowVirtualizer,
+          columnVirtualizer: columnVirtualizer
+        }));
+      }
+      return /*#__PURE__*/React.createElement(TableBodyCell, {
+        table: table,
+        key: cell.id,
+        cell: cell,
+        commandClick: commandClick
+      });
+    }
+  }), fixedRightColumns.length > 0 ? fixedRightColumns.map(column => {
+    if (editAble) {
+      return /*#__PURE__*/React.createElement(TableBodyCellEdit, _extends({}, rest, {
+        table: table,
+        key: column.id,
+        tableId: tableId,
+        cell: row.getVisibleCells().find(c => c.column.id === column.id),
+        commandClick: commandClick,
+        isEditing: isEditing,
+        rowVirtualizer: rowVirtualizer,
+        columnVirtualizer: columnVirtualizer
+      }));
+    }
+    return /*#__PURE__*/React.createElement(TableBodyCell, {
+      key: column.id,
+      table: table,
+      cell: row.getVisibleCells().find(c => c.column.id === column.id),
+      commandClick: commandClick
+    });
+  }) : null, virtualPaddingRight ? /*#__PURE__*/React.createElement("td", {
+    className: "",
+    style: {
+      display: "flex",
+      width: virtualPaddingRight
+    }
+  }) : null);
+};
+export default TableBodyRow;

package/es/table-component/components/ControlCheckbox.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ColumnTable } from "../type";
+type Props = {
+    column: ColumnTable;
+    record?: any;
+    rowIndex: number;
+    colIndex: number;
+    checkValue: any;
+    checked: boolean;
+    editAble?: boolean;
+};
+declare const ControlCheckbox: (props: Props) => React.JSX.Element;
+export default ControlCheckbox;

package/es/table-component/components/ControlCheckbox.js

@@ -0,0 +1,87 @@
+import React, { useContext } from "react";
+import { Checkbox } from "rc-master-ui";
+import { TableContext } from "../useContext";
+import { isEditable, isDisable, parseBooleanToValue } from "../hook/utils";
+const ControlCheckbox = props => {
+  const {
+    column,
+    record,
+    rowIndex,
+    colIndex,
+    checkValue,
+    editAble,
+    checked
+  } = props;
+  const {
+    handleCellChange,
+    rowKey
+  } = useContext(TableContext);
+
+  // const isEdit  =  getEditType(column, record)
+
+  const isEdit = React.useMemo(() => {
+    return isEditable(column, record);
+  }, [column, record]);
+
+  // const [isHover, setIsHover] = useState(false)
+
+  const inputNode = value => {
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      checked: Boolean(value),
+      defaultChecked: Boolean(checked)
+      // style={{ textAlign: column.align ?? 'left' }}
+      ,
+      onChange: val => {
+        const newVal = typeof checkValue === "number" ? parseBooleanToValue(val.target.checked, typeof value) : val.target.checked;
+
+        // onChange(newVal)
+
+        const key = record[rowKey];
+        // const formState = getValues()
+
+        handleCellChange?.({
+          key: key,
+          // @ts-ignore
+          record: {
+            ...record,
+            [column.field]: newVal
+          },
+          option: value,
+          prevState: value,
+          newState: newVal,
+          field: column.field,
+          indexCol: colIndex,
+          indexRow: rowIndex,
+          type: 'blur'
+        });
+      },
+      disabled: isDisable(column, record) ?? false
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    // onMouseEnter={() => {
+    //   setIsHover(true)
+    // }}
+    //
+    // onMouseLeave={() => {
+    //   setIsHover(false)
+    // }}
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: column.align ?? 'center',
+      paddingInline: 5,
+      height: '100%',
+      width: '100%'
+    }
+  }, editAble && isEdit !== false ? inputNode(checkValue) : /*#__PURE__*/React.createElement(Checkbox, {
+    checked: checked,
+    onChange: e => {
+      e.preventDefault();
+    },
+    style: {
+      textAlign: column.align ?? 'left'
+    }
+  }));
+};
+export default ControlCheckbox;

package/es/table-component/components/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/es/table-component/components/EditForm/EditForm.js

@@ -0,0 +1,395 @@
+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 "../../hook/utils";
+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";
+import InputControl from "../InputControl/InputControl";
+export const SelectStyle = styled.div.withConfig({
+  displayName: "SelectStyle",
+  componentId: "es-grid-template__sc-18plqpt-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/table-component/components/EditForm/index.d.ts

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

package/es/table-component/components/EditForm/index.js

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