es-grid-template
Version:
es-grid-template
555 lines (541 loc) • 19.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColumnsChoose = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _antd = require("antd");
var _icons = require("@ant-design/icons");
var _hooks = require("./hooks");
var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// import React, {Fragment, useMemo, useState} from "react"
//
// import styled from "styled-components"
// import {Button, Input, Popover, Tooltip} from "antd";
// import {SettingOutlined} from "@ant-design/icons";
// import {
// getVisibleColumnKeys,
// updateColumns
// } from "./hooks";
//
// // import type {TableColumnsType} from "rc-master-ui";
// import Tree from "rc-master-ui/es/tree";
// import SearchOutlined from "@ant-design/icons/SearchOutlined";
// import type {ColumnsTable} from "./type";
// import useMergedState from "rc-util/lib/hooks/useMergedState";
//
//
// const BoxAction = styled.div`
// 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 type IColumnsChoose<RecordType> = {
// columns: ColumnsTable<RecordType>
// columnsGroup?: string[]
// triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
// t?: any
//
// }
//
//
// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
// const {
// columns: propsColumns,
// triggerChangeColumns,
// t,
// columnsGroup,
// } = props
//
// // const dataList: { key: React.Key; title: string }[] = [];
//
// // const defaultColumns = useMemo(() => {
// // return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
// // }, [propsColumns])
//
//
// // const columnsChooseRef: any = useRef()
// // const searchRef: any = useRef()
//
//
//
// // const [columns, setColumns] = useState<TableColumnsType>([])
//
// // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
//
// // const [isManualUpdate, setIsManualUpdate] = useState(false);
//
//
// // useEffect(() => {
// //
// // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
// // setColumns(defaultColumns as TableColumnsType)
// //
// // }, [propsColumns])
//
// const columns = useMemo(() => {
//
// // return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
// return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
// // setColumns(defaultColumns as TableColumnsType)
// }, [columnsGroup, propsColumns])
//
//
// // useEffect(() => {
// //
// // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
// //
// // const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
// //
// // if (!isManualUpdate) {
// // setSelectedKeys(defaultSelectedKeys)
// // }
// // setIsManualUpdate(false);
// //
// //
// // }, [isManualUpdate, propsColumns])
//
// const defaultSelectedKeys = React.useMemo(() => {
//
// const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
// return getVisibleColumnKeys(rs)
//
// }, [columnsGroup, propsColumns])
//
// const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
// defaultSelectedKeys || [],
// {
// value: defaultSelectedKeys,
// },
// );
//
// //
// // const defaultSelectedKeys = useMemo(() => {
// //
// // return getVisibleColumnKeys(propsColumns)
// //
// // }, [propsColumns])
//
//
// 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: boolean) => {
// 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: string[]) => {
//
// console.log('keys', keys)
// // setSelectedKeys(keys)
// setMergedSelectedKeys(keys)
// // setIsManualUpdate(true)
//
// }
//
// const handleAccept = () => {
//
// console.log('mergedSelectedKeys', mergedSelectedKeys)
//
// // const rs1 = updateColumns(propsColumns, selectedKeys)
// const rs1 = updateColumns(propsColumns, mergedSelectedKeys)
//
// console.log('rs1', rs1)
//
// triggerChangeColumns?.(rs1, 'columnChoose')
//
// hide()
//
// }
//
// const handleCancel = () => {
// // setSelectedKeys(defaultSelectedKeys)
// hide()
// }
//
//
// return (
// <Fragment>
// <Popover
// placement={'bottomLeft'}
// content={
// <div style={{minWidth: 250}}>
// <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
//
// <Tree
// onExpand={onExpand}
// // expandedKeys={expandedKeys}
// autoExpandParent={autoExpandParent}
// // treeData={treeData}
// treeData={columns}
// 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 as string[])}
//
//
// multiple={true}
// // checkedKeys={selectedKeys}
//
// defaultCheckedKeys={mergedSelectedKeys}
// // defaultCheckedKeys={defaultSelectedKeys}
// // selectedKeys={[]}
//
// height={window.innerHeight - 200}
//
// />
//
//
// <BoxAction className={'px-1'}>
// <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'}
// {/*{'OK'}*/}
// </Button>
//
// {/*<Button className={'btn-action btn-action-cancel'} onClick={hide} >{('Cancel') }</Button>*/}
// <Button className={'btn-action btn-action-cancel'} onClick={handleCancel} >{t ? t('Cancel') : 'Cancel' }</Button>
// </BoxAction>
// </div>
// }
// trigger="click"
// open={clicked}
// onOpenChange={handleClickChange}
// arrow={false}
// >
// <Tooltip arrow={false} title={'Cài đặt'} >
// <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
// </Tooltip>
//
// </Popover>
// </Fragment>
// )
// }
// import type {TableColumnsType} from "rc-master-ui";
const BoxAction = _styledComponents.default.div.withConfig({
displayName: "BoxAction",
componentId: "es-grid-template__sc-1ix8yky-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;}}"]);
const ColumnsChoose = props => {
const {
columns: propsColumns,
triggerChangeColumns,
triggerChangeKeys,
t,
columnsGroup
} = props;
// const dataList: { key: React.Key; title: string }[] = [];
// const defaultColumns = useMemo(() => {
// return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
// }, [propsColumns])
// const columnsChooseRef: any = useRef()
// const searchRef: any = useRef()
// const [columns, setColumns] = useState<TableColumnsType>([])
const [selectedKeys, setSelectedKeys] = (0, _react.useState)([]);
const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
// useEffect(() => {
//
// const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
// setColumns(defaultColumns as TableColumnsType)
//
// }, [propsColumns])
const columns = (0, _react.useMemo)(() => {
return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
// setColumns(defaultColumns as TableColumnsType)
}, [propsColumns]);
(0, _react.useEffect)(() => {
// const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(defaultColumns);
if (!isManualUpdate) {
setSelectedKeys(defaultSelectedKeys);
}
setIsManualUpdate(false);
}, [propsColumns]);
const defaultSelectedKeys = (0, _react.useMemo)(() => {
const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
return (0, _hooks.getVisibleColumnKeys)(defaultColumns);
}, [propsColumns]);
const [clicked, setClicked] = (0, _react.useState)(false);
const [autoExpandParent, setAutoExpandParent] = (0, _react.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);
};
const handleAccept = () => {
const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
triggerChangeKeys?.(selectedKeys);
triggerChangeColumns?.(rs1, 'columnChoose');
hide();
};
const handleCancel = () => {
setSelectedKeys(defaultSelectedKeys);
hide();
};
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
placement: 'bottomLeft',
content: /*#__PURE__*/_react.default.createElement("div", {
style: {
minWidth: 250
}
}, /*#__PURE__*/_react.default.createElement(_antd.Input, {
style: {
marginBottom: 8
},
placeholder: t ? t("Search") : 'Search',
prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
onChange: onChange
}), /*#__PURE__*/_react.default.createElement(_tree.default, {
onExpand: onExpand
// expandedKeys={expandedKeys}
,
autoExpandParent: autoExpandParent
// treeData={treeData}
,
treeData: columns.filter(it => !columnsGroup?.includes(it.field)),
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,
defaultCheckedKeys: selectedKeys
// defaultCheckedKeys={defaultSelectedKeys}
,
selectedKeys: [],
height: window.innerHeight - 200
}), /*#__PURE__*/_react.default.createElement(BoxAction, {
className: 'px-1'
}, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_antd.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.default.createElement(_antd.Tooltip, {
arrow: false,
title: 'Cài đặt'
}, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
};
exports.ColumnsChoose = ColumnsChoose;