@schema-render/form-render-react
Version:
Out-of-the-box form rendering library based on Core and Antd.
65 lines (64 loc) • 2.69 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { utils } from "@schema-render/core-react";
import { DatePicker } from "antd";
import dayjs from "dayjs";
import React from "react";
import Description from "../components/Description";
import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../constants";
function toISOString(date) {
return dayjs(date).toISOString();
}
/**
* 编辑与禁用态组件
*/ const DateRangePicker = ({ schema, value, onChange, disabled, validator })=>{
const { showTime } = schema.renderOptions || {};
return /*#__PURE__*/ _jsx(DatePicker.RangePicker, {
allowClear: true,
allowEmpty: true,
style: {
width: '100%'
},
...schema.renderOptions,
disabled: disabled,
status: validator.status,
value: value ? [
dayjs(value[0]),
dayjs(value[1])
] : null,
onChange: (val)=>{
if (val && val[0] && val[1]) {
// 不是 showTime 的情况，endTime 时分秒设置到当日结束时间
const startTime = showTime ? val[0] : val[0].startOf('day');
const endTime = showTime ? val[1] : val[1].endOf('day');
onChange([
toISOString(startTime),
toISOString(endTime)
]);
} else {
onChange(undefined);
}
}
});
};
/**
* 只读态组件
*/ const ReadonlyDateRangePicker = ({ schema, value, locale })=>{
let displayText = '';
if (utils.isArray(value) && value[0] && value[1]) {
var _schema_renderOptions, _schema_renderOptions1, _schema_renderOptions2;
const defaultFormat = ((_schema_renderOptions = schema.renderOptions) === null || _schema_renderOptions === void 0 ? void 0 : _schema_renderOptions.showTime) ? DEFAULT_DATE_TIME_FORMAT : DEFAULT_DATE_FORMAT;
const format = ((_schema_renderOptions1 = schema.renderOptions) === null || _schema_renderOptions1 === void 0 ? void 0 : _schema_renderOptions1.format) || defaultFormat;
const displayTextTemplate = ((_schema_renderOptions2 = schema.renderOptions) === null || _schema_renderOptions2 === void 0 ? void 0 : _schema_renderOptions2.displayTextTemplate) || locale.FormRender.displayDateRange;
displayText = utils.templateCompiled(displayTextTemplate, {
start: dayjs(value[0]).format(format),
end: dayjs(value[1]).format(format)
});
}
return /*#__PURE__*/ _jsx(Description, {
children: displayText
});
};
export default {
component: DateRangePicker,
readonlyComponent: ReadonlyDateRangePicker
};