es-grid-template/es/table-component/components/EditForm/EditForm.js

es-grid-template

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 { 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
  })))));
};