es-grid-template
Version:
es-grid-template
309 lines (302 loc) • 13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.renderFilter = void 0;
var _react = _interopRequireWildcard(require("react"));
var _moment = _interopRequireDefault(require("moment/moment"));
var _rcMasterUi = require("rc-master-ui");
var _dayjs = _interopRequireDefault(require("dayjs"));
var _utils = require("../hook/utils");
var _number = _interopRequireDefault(require("../components/number"));
var _numberRange = _interopRequireDefault(require("../components/number-range"));
var _CheckboxFilter = _interopRequireDefault(require("../components/checkbox-filter/CheckboxFilter"));
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 type { IFormat } from "../../tanstack-table/type";
// import type { AnyObject } from './type';
const renderFilter = args => {
const {
column,
selectedKeys,
setSelectedKeys,
t,
locale,
dataSourceFilter,
format,
doFilter,
tableLocal
} = args;
const {
format: columnFormat,
typeFilter,
type: columnType,
field,
source
} = column?.meta ?? {};
const cellFormat = columnFormat ? typeof columnFormat === 'function' ? columnFormat({}) : columnFormat : format;
const type = (0, _utils.getTypeFilter)(column.meta ?? {});
const dateFormat = (0, _utils.getDatepickerFormat)(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
const dateRangeFormat = (0, _utils.convertFormat)((0, _utils.getDateRangeFormat)(columnType, cellFormat) ?? 'dd/MM/yyyy');
const find = dataSourceFilter?.find(it => it.key === field);
const options = find ? find.data : [];
switch (type) {
case 'Number':
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_number.default, {
t: t,
value: selectedKeys[0],
onChange: vals => {
setSelectedKeys(vals);
},
onPressEnter: () => doFilter?.(true)
}))));
case 'NumberRange':
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_numberRange.default, {
t: t,
min: selectedKeys[0],
max: selectedKeys[1],
onChange: vals => {
setSelectedKeys(vals);
},
onPressEnter: () => doFilter?.(true)
})));
case 'Date':
const dateValue = selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
format: {
format: dateFormat,
type: 'mask'
}
// locale={buddhistLocale}
,
style: {
width: '100%',
height: '100%'
},
value: dateValue,
defaultValue: dateValue
// placeholder={t ? t(column?.placeholder) : column?.placeholder}
,
onChange: (date, dateString) => {
const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
setSelectedKeys(newDateValue ? [newDateValue] : []);
}
}))));
case 'DateRange':
// const dateRangeValue: any = [selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? convertDateToDayjs(new Date(selectedKeys[1]), dateRangeFormat) : '']
const dateRangeValue = selectedKeys && selectedKeys.length > 0 ? [selectedKeys[0] ? new Date(selectedKeys[0]) : '', selectedKeys[1] ? new Date(selectedKeys[1]) : ''] : null;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DateRangePicker
// placeholder={['Ngày bắt đầu', 'Ngày bắt đầu']}
, {
style: {
width: 300
},
format: dateRangeFormat,
value: dateRangeValue,
onChange: value => {
const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
setSelectedKeys(newDateRangeValue);
}
// onSelect={(val) => {
// }}
// menuClassName="rc-menu-popup"
,
menuClassName: "be-popup-container",
placement: "auto"
}))));
case 'Week':
const weekValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
format: {
format: dateFormat,
type: 'mask'
},
picker: 'week'
// locale={buddhistLocale}
,
style: {
width: '100%',
height: '100%'
},
value: weekValue,
defaultValue: weekValue
// placeholder={column?.placeholder}
,
onChange: (date, dateString) => {
const newDateValue = dateString ?? null;
setSelectedKeys(newDateValue ? [newDateValue] : []);
}
}))));
case 'Month':
const monthValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
format: {
format: dateFormat,
type: 'mask'
},
picker: 'month'
// locale={buddhistLocale}
,
style: {
width: '100%',
height: '100%'
},
value: monthValue,
defaultValue: monthValue
// placeholder={column?.placeholder}
,
onChange: (date, dateString) => {
const newDateValue = dateString ?? null;
setSelectedKeys(newDateValue ? [newDateValue] : []);
}
})));
// // case 'Quarter':
// //
// // // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
// //
// // const pickerFormat = getDatepickerFormat(getEditType(col) as IEditType, col)
// // const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
// //
// // return (
// // <Fragment>
// // <div>
// //
// //
// // <div className={'mb-1'}>
// //
// // <DatePicker
// // format={{
// // format: dateFormat,
// // type: 'mask'
// // }}
// // locale={buddhistLocale}
// // style={{width: '100%', height: '100%'}}
// // value={pickerValue}
// // defaultValue={pickerValue}
// // placeholder={column.placeholder}
// // onChange={(date, dateString) => {
// // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
// // setSelectedKeys(newDateValue ? [newDateValue] : [])
// //
// // }}
// //
// // />
// // </div>
// //
// //
// // </div>
// // </Fragment>
// // )
// //
// // case 'Year':
// //
// // // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
// //
// // const pickerFormat = getDatepickerFormat(getEditType(col) as IEditType, col)
// // const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
// //
// // return (
// // <Fragment>
// // <div>
// //
// //
// // <div className={'mb-1'}>
// //
// // <DatePicker
// // format={{
// // format: dateFormat,
// // type: 'mask'
// // }}
// // locale={buddhistLocale}
// // style={{width: '100%', height: '100%'}}
// // value={pickerValue}
// // defaultValue={pickerValue}
// // placeholder={column.placeholder}
// // onChange={(date, dateString) => {
// // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
// // setSelectedKeys(newDateValue ? [newDateValue] : [])
// //
// // }}
// //
// // />
// // </div>
// //
// //
// // </div>
// // </Fragment>
// // )
case 'Dropdown':
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
// options={translateOption(numberOperator, t)}
// options={find ? options : column.source ?? []}
, {
options: source ? source : options ?? [],
style: {
width: '100%',
marginBottom: 8
},
value: selectedKeys[0],
notFoundContent: /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
description: locale?.emptyText
}),
onChange: val => {
// setOperatorKey(val)
setSelectedKeys(val ? [val] : []);
},
showSearch: true,
allowClear: true
}))));
case 'Checkbox':
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
locale: locale,
selectedKeys: selectedKeys,
onSelect: val => {
setSelectedKeys(val);
}
// options={options}
,
options: source ? source : options ?? [],
filterMultiple: true
// open={visible}
// searchValue={searchValue}
// setSearchValue={setSearchValue}
})))));
case 'Text':
default:
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
className: "",
classNames: {
input: 'filter-input'
}
// placeholder={t ? t('Search') : `Search`}
,
placeholder: tableLocal?.search ?? `Search`,
value: selectedKeys[0],
onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
// onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
,
onPressEnter: () => doFilter?.(true),
allowClear: true
// autoFocus={true}
}))));
}
};
exports.renderFilter = renderFilter;