es-grid-template
Version:
es-grid-template
236 lines (227 loc) • 9.38 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColumnsChoose = void 0;
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _antd = require("antd");
var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
var _utils = require("./hook/utils");
var _becoxyIcons = require("becoxy-icons");
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; }
const CustomStyle = _styledComponents.default.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 = _styledComponents.default.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;}}"]);
const ColumnsChoose = props => {
const {
columns: propsColumns,
originColumns,
columnHidden,
triggerChangeColumns,
// triggerChangeKeys,
t,
id,
table,
columnsGroup,
locale,
tableLocal
} = props;
const isClickRef = _react.default.useRef(false);
const treeColumns = _react.default.useMemo(() => {
return (0, _utils.convertColumnsToTreeData)(propsColumns, columnsGroup);
}, [propsColumns, columnsGroup]);
const defaultSelectedKeys = _react.default.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] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
value: undefined
});
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)
isClickRef.current = true;
setMergedSelectedKeys(keys);
};
const handleAccept = () => {
if (isClickRef.current) {
const rs1 = (0, _utils.updateColumns1)(originColumns, mergedSelectedKeys ?? []);
triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
}
hide();
};
const handleCancel = () => {
setMergedSelectedKeys(defaultSelectedKeys);
hide();
};
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
placement: 'bottomLeft',
content: /*#__PURE__*/_react.default.createElement(CustomStyle, {
style: {
minWidth: 250,
maxWidth: 320
}
}, /*#__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, {
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.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(_becoxyIcons.Settings, {
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": locale?.table?.setting || tableLocal?.setting || 'Setting',
fontSize: 16,
style: {
cursor: 'pointer'
},
className: "toolbar-icon"
})));
};
exports.ColumnsChoose = ColumnsChoose;