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

es-grid-template

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 = 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;