es-grid-template/es/grid-component/ColumnsGroup/ColumnsGroup.js

es-grid-template

import { Group } from "becoxy-icons";
import React, { useRef, useState } from "react";
// import {
//   // groupArrayByColumns,
//   // ungroupArray,
//   // useOnClickOutside
// } from "../../hooks"

import { Button, Popover, Tooltip } from "antd";
// import {SettingOutlined} from "@ant-design/icons";
import { Select } from "rc-master-ui";
import styled from "styled-components";
const BoxAction = styled.div.withConfig({
  displayName: "BoxAction",
  componentId: "es-grid-template__sc-1uj3tyy-0"
})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
export const ColumnsGroup = props => {
  const {
    columns,
    columnsGrouped,
    onSubmit,
    unClearableLevel,
    defaultGroupColumns,
    t
  } = props;
  const menuRef = useRef();
  const [tempGroup, setTempGroup] = useState([]);
  const [clicked, setClicked] = useState(false);
  const rsCol = React.useMemo(() => {
    return columns.filter(it => it.hidden !== true && !tempGroup.includes(it.field));
  }, [columns, tempGroup]);
  const options = React.useMemo(() => {
    return rsCol.map(it => ({
      ...it,
      value: it.field,
      label: t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText
    }));
  }, [rsCol, t]);

  // React.useEffect(() => {
  //   if(columnsGrouped) {
  //     setTempGroup([...columnsGrouped])
  //   }
  //
  // }, [!!columnsGrouped])

  const onChangeGroupColumns = (option, index) => {
    // if (option) {
    //   tempGroup[index] = option
    // } else {
    //   tempGroup.splice(index, 1)
    // }
    // setTempGroup([...tempGroup])

    const cloneTemp = [...tempGroup];
    if (option) {
      cloneTemp[index] = option;
    } else {
      cloneTemp.splice(index, 1);
    }
    setTempGroup([...cloneTemp]);
  };
  const handleGroup = () => {
    // setColumnsGrouped([...tempGroup])
    setClicked(false);
    // const dt = ungroupArray(dataSource)

    // const rs = groupArrayByColumns(dt, [...tempGroup])

    // setResource([...rs])
    onSubmit([...tempGroup]);
  };
  const handleClear = () => {
    // setColumnsGrouped([])
    setTempGroup(defaultGroupColumns ? defaultGroupColumns : []);
    // setIsOpen(false)
    setClicked(false);
    // const dt = ungroupArray(dataSource)

    // const rs = groupArrayByColumns(dt, [])

    // setResource([...rs])
    onSubmit(defaultGroupColumns ? defaultGroupColumns : []);
  };
  const handleClickChange = open => {
    console.log('open', open);
    setClicked(open);
    if (open) {
      if (columnsGrouped) {
        setTempGroup([...columnsGrouped]);
      }
    }
    if (!open) {
      setTempGroup([]);
    }
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
    placement: 'bottomLeft',
    content: /*#__PURE__*/React.createElement("div", {
      style: {
        minWidth: 250
      }
    }, /*#__PURE__*/React.createElement("div", {
      ref: menuRef,
      style: {
        position: 'relative'
      }
    }, /*#__PURE__*/React.createElement("p", {
      className: 'fw-bold'
    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/React.createElement("div", {
      className: 'mb-1',
      style: {
        marginBottom: '1rem'
      }
    }, /*#__PURE__*/React.createElement("p", {
      className: 'm-0',
      style: {
        margin: 0
      }
    }, "M\u1EE9c 1"), /*#__PURE__*/React.createElement(Select, {
      style: {
        width: '100%'
      }
      // labelInValue={true}
      // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
      // options={columns && columns.length > 0 ? options : []}
      ,
      options: options,
      value: tempGroup?.[0],
      onChange: val => onChangeGroupColumns(val, 0),
      allowClear: !tempGroup?.[1] && !(unClearableLevel && unClearableLevel - 1 >= 0)
      // fieldNames={{
      //   value: 'field',
      //   label: 'headerText'
      // }}
      ,
      labelRender: labelProps => {
        const it = columns.find(col => col.field === labelProps.value);
        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
      }
      // hideSelectedOptions
    })), /*#__PURE__*/React.createElement("div", {
      className: 'mb-1',
      style: {
        marginBottom: '1rem'
      }
    }, /*#__PURE__*/React.createElement("p", {
      className: 'm-0',
      style: {
        margin: 0
      }
    }, "M\u1EE9c 2"), /*#__PURE__*/React.createElement(Select, {
      style: {
        width: '100%'
      },
      options: options,
      value: tempGroup?.[1],
      onChange: val => onChangeGroupColumns(val, 1),
      allowClear: !tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 2 >= 0)
      // hideSelectedOptions
      // fieldNames={{
      //   value: 'field',
      //   label: 'headerText'
      // }}
      ,
      labelRender: labelProps => {
        const it = columns.find(col => col.field === labelProps.value);
        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: 'mb-1',
      style: {
        marginBottom: '1rem'
      }
    }, /*#__PURE__*/React.createElement("p", {
      className: 'm-0',
      style: {
        margin: 0
      }
    }, "M\u1EE9c 3"), /*#__PURE__*/React.createElement(Select, {
      style: {
        width: '100%'
      },
      options: options,
      value: tempGroup?.[2],
      onChange: val => onChangeGroupColumns(val, 2),
      allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
      // fieldNames={{
      //   value: 'field',
      //   label: 'headerText'
      // }}
      ,
      labelRender: labelProps => {
        const it = columns.find(col => col.field === labelProps.value);
        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
      }
    }))), /*#__PURE__*/React.createElement(BoxAction, {
      className: 'px-1'
    }, /*#__PURE__*/React.createElement(Button
    // className={classnames('btn-action btn-action-submit', {
    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
    // })}
    , {
      onClick: handleGroup
      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
    }, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/React.createElement(Button, {
      className: 'btn-action btn-action-cancel',
      onClick: handleClear
    }, t ? t('Clear') : 'Clear'))),
    trigger: "click",
    open: clicked,
    onOpenChange: handleClickChange,
    arrow: false
  }, /*#__PURE__*/React.createElement(Tooltip, {
    arrow: false,
    title: 'Nhóm dữ liệu'
  }, /*#__PURE__*/React.createElement(Group, {
    fontSize: 18,
    style: {
      cursor: 'pointer'
    }
  }))));
};