@cainiaofe/cn-ui-m
Version:
116 lines (115 loc) • 8.94 kB
JavaScript
// 不暴露出去使用，仅作为内部组件测试使用
import * as React from 'react';
import { CnRangeDatePickerPro, CnDemoBlock, CnDemoPage, CnFilter, CnFilterItem, CnFilterPro, CnForm, CnFormField, formilyCore, } from "../../..";
import dayjs from 'dayjs';
var onFieldChange = formilyCore.onFieldChange;
export var 表单自测模型 = function () {
var _a = React.useState(), values = _a[0], setValues = _a[1];
var _b = React.useState([
dayjs('2023-01-11').valueOf(),
dayjs('2023-01-12').valueOf(),
]), val = _b[0], setVal = _b[1];
var defaultValue = ['2023-01-09', '2024-10-10'];
return (React.createElement(CnDemoPage, { title: "\u8868\u5355\u81EA\u6D4B\u6A21\u578B" },
React.createElement(CnDemoBlock, { title: "\u975E\u53D7\u63A7", padding: 0 },
React.createElement(CnRangeDatePickerPro, { mode: "quarter", onChange: function (value, valueStr) {
console.log(value, valueStr);
}, hasClear: true })),
React.createElement(CnDemoBlock, { title: "\u53D7\u63A7\u6A21\u5F0F", padding: 0 },
React.createElement(CnRangeDatePickerPro, { mode: "quarter", value: val, onChange: function (value, valueStr) {
console.log(value, valueStr);
setVal(value);
}, hasClear: true })),
React.createElement(CnDemoBlock, { title: "\u9ED8\u8BA4\u503C", padding: 0 },
React.createElement(CnRangeDatePickerPro, { mode: "quarter", defaultValue: defaultValue, onChange: function (value, valueStr) {
console.log(value, valueStr);
}, hasClear: true })),
React.createElement(CnDemoBlock, { title: "\u53EA\u8BFB\u6A21\u5F0F", padding: 16 },
React.createElement(CnRangeDatePickerPro, { mode: "quarter", value: defaultValue, readOnly: true })),
React.createElement(CnDemoBlock, { title: "\u8868\u5355\u4E2D\u4F7F\u7528", padding: 0 },
React.createElement(CnForm, { formProps: {
values: {
gentle2: '2023-03-10',
},
effects: function () {
onFieldChange('*', function (fieldState) {
console.log(fieldState.path.toString(), fieldState.value);
});
},
} },
React.createElement(CnFormField, { title: "\u8F93\u5165", name: "gentle" },
React.createElement(CnRangeDatePickerPro, { mode: "quarter", onChange: function (value, valueStr) {
console.log(value, valueStr);
}, hasClear: true })))),
React.createElement(CnDemoBlock, { title: "\u7B5B\u9009\u5668\u4E2D\u4F7F\u7528", padding: 0 },
React.createElement(CnFilter, { formProps: {
values: {
// orderType: '天猫',
},
}, onSubmit: function (vals) { return console.log('onSubmit', vals); }, onReset: function () { return console.log('onReset'); }, onChange: function (vals) { return console.log('onChange', vals); }, onSearch: function (vals) { return console.log('onSearch', vals); } },
React.createElement(CnFilterItem, { quick: true, title: "\u65E5\u671F\u533A\u95F4", name: "timeRange", style: { maxWidth: 150 } },
React.createElement(CnRangeDatePickerPro, { mode: "quarter", onChange: function (value, valueStr) {
console.log(value, valueStr);
}, hasClear: true })))),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4\u9009\u62E9\u5668", padding: 0 },
React.createElement(CnRangeDatePickerPro, { onChange: console.log, showTime: true })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u53D7\u63A7", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, value: values, onChange: function (vals) {
setValues(vals);
console.log(vals);
} })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u7981\u7528", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, disabled: true, defaultValue: defaultValue, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u53EA\u8BFB", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, readOnly: true, defaultValue: defaultValue, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u6E05\u7A7A", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, defaultValue: defaultValue, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u9ED8\u8BA4\u503C-Date", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, defaultValue: defaultValue, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u9ED8\u8BA4\u503C-string", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, defaultValue: ['2023-12-11 13:14:15', '2024-1-12 22:33:55'], onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u9ED8\u8BA4\u503C-number", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, defaultValue: [1701753255000, 1706121235000], onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-\u9ED8\u8BA4\u503C-dayjs", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, defaultValue: [dayjs(1701753255000), dayjs(1706121235000)], onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u65E5\u671F\u65F6\u95F4\u533A\u95F4-format", padding: 0 },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, onChange: console.log, format: "YYYY-MM-DD HH:mm" })),
React.createElement(CnDemoBlock, { title: "\u8868\u5355\u4E2D\u4F7F\u7528" },
React.createElement(CnForm, { formProps: {
values: {
opt: [new Date(), new Date()],
opt3: [new Date(), new Date()],
},
effects: function () {
onFieldChange('*', function (fieldState) {
console.log(fieldState.path.toString(), fieldState.value);
});
},
} },
React.createElement(CnFormField, { title: "\u4E0B\u62C9\u6807\u9898", name: "opt" },
React.createElement(CnRangeDatePickerPro, { showTime: true, onChange: console.log })),
React.createElement(CnFormField, { title: "\u7A7A\u503C", name: "opt2" },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, onChange: console.log })),
React.createElement(CnFormField, { title: "\u53EA\u8BFB", name: "opt3", readOnly: true },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, onChange: console.log })),
React.createElement(CnFormField, { title: "outputFormat", name: "outputFormat" },
React.createElement(CnRangeDatePickerPro, { showTime: true, hasClear: true, onChange: console.log, outputFormat: "YYYY-MM-DD HH:mm:ss" })))),
React.createElement(CnDemoBlock, { title: "CnFilter\u4E2D\u4F7F\u7528" },
React.createElement(CnFilterPro, { onSubmit: function (vals) { return console.log('onSubmit', vals); }, onReset: function () { return console.log('onReset'); }, onChange: function (vals) { return console.log('onChange', vals); }, onSearch: function (vals) { return console.log('onSearch', vals); }, schema: {
type: 'object',
properties: {
date: {
title: '日期区间',
'x-decorator': 'CnFilterProItem',
// 'x-decorator-props': {
// quick: true,
// },
'x-component': 'CnRangeDatePickerPro',
'x-component-props': {
showTime: true,
},
},
},
} }))));
};
export default { title: 'demo/CnDatePickerPro' };