@schema-render/form-render-react
Version:
Out-of-the-box form rendering library based on Core and Antd.
42 lines (41 loc) • 1.73 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { utils } from "@schema-render/core-react";
import { DatePicker as AntDatePicker } from "antd";
import dayjs from "dayjs";
import React, { useMemo } from "react";
import Description from "../components/Description";
import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../constants";
/**
* 编辑与禁用态组件
*/ const DatePicker = ({ schema, value, onChange, disabled, locale, validator })=>{
const placeholder = useMemo(()=>utils.templateCompiled(locale.FormRender.placeholderSelect, {
title: schema.title
}), [
schema.title,
locale.FormRender.placeholderSelect
]);
return /*#__PURE__*/ _jsx(AntDatePicker, {
allowClear: true,
placeholder: placeholder,
style: {
width: '100%'
},
...schema.renderOptions,
status: validator.status,
value: value ? dayjs(value) : null,
onChange: (val)=>onChange(val ? dayjs(val).toISOString() : undefined),
disabled: disabled
});
};
/**
* 只读态组件
*/ const ReadonlyDatePicker = ({ schema, value })=>{
var _schema_renderOptions, _schema_renderOptions1;
return /*#__PURE__*/ _jsx(Description, {
children: value ? dayjs(value).format(((_schema_renderOptions = schema.renderOptions) === null || _schema_renderOptions === void 0 ? void 0 : _schema_renderOptions.format) || (((_schema_renderOptions1 = schema.renderOptions) === null || _schema_renderOptions1 === void 0 ? void 0 : _schema_renderOptions1.showTime) ? DEFAULT_DATE_TIME_FORMAT : DEFAULT_DATE_FORMAT)) : ''
});
};
export default {
component: DatePicker,
readonlyComponent: ReadonlyDatePicker
};