es-grid-template/es/table-component/ColumnsChoose.js

es-grid-template

import useMergedState from "rc-util/es/hooks/useMergedState";
import React, { Fragment, useState } from "react";
import styled from "styled-components";
import { Button, Input, Popover } from "antd";
import Tree from "rc-master-ui/es/tree";
import SearchOutlined from "@ant-design/icons/SearchOutlined";
import { convertColumnsToTreeData, updateColumns1 } from "./hook/utils";
import { Settings } from "becoxy-icons";
const CustomStyle = styled.div.withConfig({
  displayName: "CustomStyle",
  componentId: "es-grid-template__sc-jfujqh-0"
})([".columns-choose-tree{.ui-rc-tree-treenode{.ui-rc-tree-checkbox{align-self:flex-start;margin-top:5px !important;}}}"]);
const BoxAction = styled.div.withConfig({
  displayName: "BoxAction",
  componentId: "es-grid-template__sc-jfujqh-1"
})(["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 ColumnsChoose = props => {
  const {
    columns: propsColumns,
    originColumns,
    columnHidden,
    triggerChangeColumns,
    // triggerChangeKeys,
    t,
    id,
    table,
    columnsGroup,
    locale,
    tableLocal
  } = props;
  const isClickRef = React.useRef(false);
  const treeColumns = React.useMemo(() => {
    return convertColumnsToTreeData(propsColumns, columnsGroup);
  }, [propsColumns, columnsGroup]);
  const defaultSelectedKeys = React.useMemo(() => {
    const colsVisiables = table.getVisibleFlatColumns().filter(it => it.columnDef?.meta?.showInColumnChoose !== false);
    const colsKeys = colsVisiables.map(it => it.id);
    const aa = Object.keys(columnHidden);
    return colsKeys.filter(it => !aa.includes(it) && !columnsGroup?.includes(it));
  }, [columnHidden, columnsGroup, table]);
  const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
    value: undefined
  });
  const [clicked, setClicked] = useState(false);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  // const treeData = useMemo(() => {
  //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
  //     data.map((item) => {
  //       const strTitle = item.title as string;
  //       const index = strTitle.indexOf(searchValue);
  //       const beforeStr = strTitle.substring(0, index);
  //       const afterStr = strTitle.slice(index + searchValue.length);
  //       const title =
  //         index > -1 ? (
  //           <span key={item.key}>
  //             {beforeStr}
  //             <span className="site-tree-search-value">{searchValue}</span>
  //             {afterStr}
  //           </span>
  //         ) : (
  //           <span key={item.key}>{strTitle}</span>
  //         );
  //       if (item.children) {
  //         return { title, key: item.key, children: loop(item.children) };
  //       }
  //
  //       return {
  //         title,
  //         key: item.key,
  //       };
  //     });
  //
  //   // return loop(defaultData);
  //   return loop(columns as any);
  // }, [searchValue, columns]);

  const hide = () => {
    setClicked(false);
  };
  const handleClickChange = open => {
    setClicked(open);
  };
  const onExpand = () => {
    // setExpandedKeys(newExpandedKeys)
    setAutoExpandParent(false);
  };

  // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
  //   let parentKey: React.Key
  //   for (let i = 0; i < tree.length; i++) {
  //     const node = tree[i]
  //     if (node.children) {
  //       if (node.children.some((item) => item.key === key)) {
  //         parentKey = node.key
  //       } else if (getParentKey(key, node.children)) {
  //         parentKey = getParentKey(key, node.children)
  //       }
  //     }
  //   }
  //   return parentKey!
  // }

  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const onChange = () => {
    // const { value } = e.target
    // const newExpandedKeys = dataList
    //   .map((item) => {
    //     if (item.title.indexOf(value) > -1) {
    //       return getParentKey(item.key, defaultData)
    //     }
    //     return null
    //   })
    //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
    // setExpandedKeys(newExpandedKeys)

    // setSearchValue(value)
    setAutoExpandParent(true);
  };
  const onCheck = keys => {
    // setSelectedKeys(keys)
    // setIsManualUpdate(true)

    isClickRef.current = true;
    setMergedSelectedKeys(keys);
  };
  const handleAccept = () => {
    if (isClickRef.current) {
      const rs1 = updateColumns1(originColumns, mergedSelectedKeys ?? []);
      triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
    }
    hide();
  };
  const handleCancel = () => {
    setMergedSelectedKeys(defaultSelectedKeys);
    hide();
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
    placement: 'bottomLeft',
    content: /*#__PURE__*/React.createElement(CustomStyle, {
      style: {
        minWidth: 250,
        maxWidth: 320
      }
    }, /*#__PURE__*/React.createElement(Input, {
      style: {
        marginBottom: 8
      },
      placeholder: t ? t("Search") : 'Search',
      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
      onChange: onChange
    }), /*#__PURE__*/React.createElement(Tree, {
      className: "columns-choose-tree",
      onExpand: onExpand
      // expandedKeys={expandedKeys}
      ,
      autoExpandParent: autoExpandParent
      // treeData={treeData}
      // treeData={columns.filter((it) => !columnsGroup?.includes(it.field as string))}
      ,
      treeData: treeColumns,
      defaultExpandAll: true,
      checkable: true
      // onSelect={(keys, info) => {
      //   const key = info.node.key
      //
      //   const find = findItemByKey(columns, 'key', key)
      //
      //   // const tmpColumn
      //
      //   // if (selectedKeys.includes(key as string)) {
      //   //   const rssss  = findKeyPath(columns, key as string)
      //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
      //   //
      //   //   setSelectedKeys(rs)
      //   // } else {
      //
      //     // const rs  = [...selectedKeys, keys[0]]
      //
      //     // setSelectedKeys(keys)
      //   // }
      // }}
      ,
      onCheck: keys => onCheck(keys),
      multiple: true
      // checkedKeys={selectedKeys}
      ,
      checkedKeys: mergedSelectedKeys ?? defaultSelectedKeys

      // defaultCheckedKeys={selectedKeys}
      ,
      defaultCheckedKeys: defaultSelectedKeys,
      selectedKeys: []

      // height={window.innerHeight - 200}
      ,
      height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
      // style={{height: 300}}
    }), /*#__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: handleAccept
      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
    }, t ? t('OK') : 'OK'), /*#__PURE__*/React.createElement(Button, {
      className: 'btn-action btn-action-cancel',
      onClick: handleCancel
    }, t ? t('Cancel') : 'Cancel'))),
    trigger: "click",
    open: clicked,
    onOpenChange: handleClickChange,
    arrow: false,
    zIndex: 1065
  }, /*#__PURE__*/React.createElement(Settings, {
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-content": locale?.table?.setting || tableLocal?.setting || 'Setting',
    fontSize: 16,
    style: {
      cursor: 'pointer'
    },
    className: "toolbar-icon"
  })));
};