es-grid-template
Version:
es-grid-template
182 lines (179 loc) • 6.69 kB
JavaScript
import useMergedState from "rc-util/es/hooks/useMergedState";
import React, { Fragment, useState } from "react";
import styled from "styled-components";
import Tree from "rc-master-ui/es/tree";
import SearchOutlined from "@ant-design/icons/SearchOutlined";
import { Settings } from "becoxy-icons";
import { updateColumns1 } from "../../../table-component/hook/utils";
import { convertColumnsToTreeData, filterColumnsByField } from "../../utils/convertColumnsChoose";
import { Input, Popover } from "rc-master-ui";
import Button from "rc-master-ui/es/button";
const CustomStyle = styled.div.withConfig({
displayName: "CustomStyle",
componentId: "es-grid-template__sc-1yz2fsm-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-1yz2fsm-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 {
originColumns,
triggerChangeColumns,
t,
id,
columnsGroup,
locale,
tableLocal
} = props;
const isClickRef = React.useRef(false);
const treeColumns = React.useMemo(() => {
return convertColumnsToTreeData(originColumns ?? [], columnsGroup);
}, [originColumns, columnsGroup]);
const defaultSelectedKeys = React.useMemo(() => {
const colsVisiables = originColumns.filter(it => it.showInColumnChoose !== false && it.visible !== false);
const colsKeys = colsVisiables.map(it => it.field);
return colsKeys.filter(it => !columnsGroup?.includes(it));
}, [columnsGroup, originColumns]);
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 = () => {
setAutoExpandParent(false);
};
const onChange = () => {
setAutoExpandParent(true);
};
const onCheck = keys => {
isClickRef.current = true;
setMergedSelectedKeys(keys);
};
const handleAccept = () => {
if (isClickRef.current) {
const rsOriginColumns = updateColumns1(originColumns, mergedSelectedKeys ?? []);
const rsColumns = filterColumnsByField(originColumns, mergedSelectedKeys ?? []);
triggerChangeColumns?.(rsColumns, rsOriginColumns, 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 / 2 > 450 ? 450 : window.innerHeight / 2 - 110
}), /*#__PURE__*/React.createElement(BoxAction, {
className: 'px-1'
}, /*#__PURE__*/React.createElement(Button, {
onClick: handleAccept
}, 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"
})));
};