es-grid-template
Version:
es-grid-template
299 lines (293 loc) • 11.3 kB
JavaScript
// import type { IFormat } from "../../tanstack-table/type";
// import type { AnyObject } from './type';
import React, { Fragment } from "react";
import moment from "moment/moment";
import { DatePicker, DateRangePicker, Empty, Input, Select } from "rc-master-ui";
import dayjs from "dayjs";
import { convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getTypeFilter, isEmpty } from "../hook/utils";
import NumberInput from "../components/number";
import NumberRange from "../components/number-range";
import CheckboxFilter from "../components/checkbox-filter/CheckboxFilter";
export 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 = getTypeFilter(column.meta ?? {});
const dateFormat = getDatepickerFormat(typeFilter ?? columnType, cellFormat) ?? 'DD/MM/YYYY';
const dateRangeFormat = convertFormat(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(NumberInput, {
t: t,
value: selectedKeys[0],
onChange: vals => {
setSelectedKeys(vals);
},
onPressEnter: () => doFilter?.(true)
}))));
case 'NumberRange':
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
t: t,
min: selectedKeys[0],
max: selectedKeys[1],
onChange: vals => {
setSelectedKeys(vals);
},
onPressEnter: () => doFilter?.(true)
})));
case 'Date':
const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(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 ? moment(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(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] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
setSelectedKeys(newDateRangeValue);
}
// onSelect={(val) => {
// }}
// menuClassName="rc-menu-popup"
,
menuClassName: "be-popup-container",
placement: "auto"
}))));
case 'Week':
const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(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 = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(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.createElement(Empty, {
image: Empty.PRESENTED_IMAGE_SIMPLE,
description: locale?.emptyText
}),
onChange: val => {
// setOperatorKey(val)
setSelectedKeys(val ? [val] : []);
},
showSearch: true,
allowClear: true
}))));
case 'Checkbox':
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(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}
}))));
}
};