es-grid-template 1.8.65 → 1.8.66

package/es/grid-component/ContextMenu.js

@@ -1,130 +0,0 @@
-import * as React from "react";
-// import type { MenuProps } from "antd";
-import { Dropdown, Menu } from "rc-master-ui";
-export const findItemByKey = (array, key, value) => {
-  for (let i = 0; i < array.length; i++) {
-    const item = array[i];
-    if (item[key] === value) {
-      return item;
-    }
-    if (item.children && item.children.length > 0) {
-      const foundInChildren = findItemByKey(item.children, key, value);
-      if (foundInChildren) {
-        return foundInChildren;
-      }
-    }
-  }
-  return null;
-};
-const ContextMenu = props => {
-  const {
-    menuRef,
-    open,
-    setOpen,
-    pos,
-    contextMenuClick,
-    contextMenuItems,
-    rowData
-  } = props;
-
-  // const addPopupOffset = (items: MenuProps["items"]) : any => {
-  //   return items?.map(item =>
-  //     item && "children" in item
-  //       ? {
-  //     ...item,
-  //         // popupOffset: [0, 30],
-  //         children: addPopupOffset(item.children) }
-  //       : item
-  //   );
-  // };
-
-  // const newItems = React.useMemo(() => {
-  //   return addPopupOffset(items)
-  // }, [items])
-
-  return (
-    /*#__PURE__*/
-    // <div>
-    //   {open && (
-    //     <div
-    //       ref={menuRef}
-    //       style={{
-    //         position: "absolute",
-    //         top: pos.y,
-    //         left: pos.x,
-    //         zIndex: 1000,
-    //         background: "white",
-    //         border: "1px solid #ddd",
-    //         boxShadow: "2px 2px 5px rgba(0,0,0,0.2)",
-    //       }}
-    //       // onClick={() => setOpen(false)}
-    //     >
-    //       <Menu
-    //         items={contextMenuItems}
-    //         style={{ minWidth: 200, maxWidth: 400, maxHeight: pos.viewportHeight  - 20 , width: 200 }}
-    //         rootClassName={'popup-context-menu'}
-    //
-    //         onClick={(e) => {
-    //           contextMenuClick?.({
-    //             rowInfo: {
-    //               rowData
-    //             },
-    //             event: e.domEvent,
-    //             item: {
-    //               ...findItemByKey(contextMenuItems as any[], 'key', e.key ),
-    //               id: e.key
-    //             }
-    //           })
-    //         }} >
-    //       </Menu>
-    //     </div>
-    //   )}
-    // </div>
-    React.createElement(Dropdown, {
-      placement: 'topRight',
-      open: open,
-      overlayClassName: 'be-popup-container',
-      overlayStyle: {
-        left: `${pos.x}px`,
-        top: `${pos.y}px`
-      },
-      dropdownRender: () => {
-        return /*#__PURE__*/React.createElement("div", {
-          ref: menuRef
-        }, /*#__PURE__*/React.createElement(Menu, {
-          items: contextMenuItems,
-          style: {
-            minWidth: 200,
-            maxHeight: pos.viewportHeight - 20,
-            width: 'fit-content'
-          },
-          rootClassName: 'popup-context-menu'
-          // rootClassName={'be-popup-container'}
-          ,
-
-          onClick: e => {
-            setOpen(false);
-            contextMenuClick?.({
-              rowInfo: {
-                rowData
-              },
-              event: e.domEvent,
-              item: {
-                ...findItemByKey(contextMenuItems, 'key', e.key),
-                id: e.key
-              }
-            });
-
-            // if (!open) {
-            //   document.addEventListener(`click`, function onClickOutside() {
-            //     setOpen(false);
-            //     document.removeEventListener(`click`, onClickOutside);
-            //   });
-            // }
-          }
-        }));
-      }
-    }, /*#__PURE__*/React.createElement(React.Fragment, null))
-  );
-};
-export default ContextMenu;

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

@@ -1,27 +0,0 @@
-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/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;