es-grid-template
Version:
es-grid-template
234 lines (226 loc) • 8.66 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColumnsGroup = void 0;
var _becoxyIcons = require("becoxy-icons");
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _rcMasterUi = require("rc-master-ui");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _hooks = require("../../grid-component/hooks");
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 BoxAction = _styledComponents.default.div.withConfig({
displayName: "BoxAction",
componentId: "es-grid-template__sc-9e0ekv-0"
})(["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 ColumnsGroup = props => {
const {
id,
tableLocal,
columns,
columnsGrouped,
onSubmit,
unClearableLevel,
defaultGroupColumns,
t
} = props;
const menuRef = (0, _react.useRef)();
const [tempGroup, setTempGroup] = (0, _react.useState)([]);
const [clicked, setClicked] = (0, _react.useState)(false);
const rsCol = _react.default.useMemo(() => {
return columns.filter(it => it.visible !== false && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'selection_column' && it.field !== 'command');
}, [columns, tempGroup]);
const options = _react.default.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 => {
setClicked(open);
if (open) {
if (columnsGrouped) {
setTempGroup([...columnsGrouped]);
}
}
if (!open) {
setTempGroup([]);
}
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
placement: 'bottomLeft',
content: /*#__PURE__*/_react.default.createElement("div", {
style: {
minWidth: 250
}
}, /*#__PURE__*/_react.default.createElement("div", {
ref: menuRef,
style: {
position: 'relative'
}
}, /*#__PURE__*/_react.default.createElement("p", {
className: 'fw-bold'
}, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1',
style: {
marginBottom: '1rem'
}
}, /*#__PURE__*/_react.default.createElement("p", {
className: 'm-0',
style: {
margin: 0
}
}, "M\u1EE9c 1"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
style: {
width: '100%'
},
showSearch: true
// 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;
},
filterOption: _hooks.customFilterOption
// hideSelectedOptions
})), /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1',
style: {
marginBottom: '1rem'
}
}, /*#__PURE__*/_react.default.createElement("p", {
className: 'm-0',
style: {
margin: 0
}
}, "M\u1EE9c 2"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
showSearch: true,
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;
},
filterOption: _hooks.customFilterOption
})), /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1',
style: {
marginBottom: '1rem'
}
}, /*#__PURE__*/_react.default.createElement("p", {
className: 'm-0',
style: {
margin: 0
}
}, "M\u1EE9c 3"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
style: {
width: '100%'
},
options: options,
showSearch: true,
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;
},
filterOption: _hooks.customFilterOption
}))), /*#__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: handleGroup
// disabled={!columns.find((item) => item.visible !== false || item.visible)}
}, t ? t('Thực hiện') : 'Thực hiện'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
className: 'btn-action btn-action-cancel',
onClick: handleClear
}, t ? t('Clear') : 'Clear'))),
trigger: "click",
open: clicked,
onOpenChange: handleClickChange,
arrow: false
}, /*#__PURE__*/_react.default.createElement(_becoxyIcons.Group, {
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": tableLocal?.GroupData || 'Group Data',
fontSize: 18,
color: "#555555",
style: {
cursor: 'pointer'
}
})));
};
exports.ColumnsGroup = ColumnsGroup;