migrate TimePicker component into schema components (#164)
* feat: add TimePicker component into schema components * improve * TimePicker.RangePicker Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
parent
091fb7f5ee
commit
b0b79b7d9d
@ -14,4 +14,4 @@ export * from './menu';
|
|||||||
export * from './page';
|
export * from './page';
|
||||||
export * from './password';
|
export * from './password';
|
||||||
export * from './radio';
|
export * from './radio';
|
||||||
|
export * from './time-picker';
|
||||||
|
@ -0,0 +1,19 @@
|
|||||||
|
import { formatMomentValue, usePrefixCls } from '@formily/antd/esm/__builtins__';
|
||||||
|
import { isArr } from '@formily/shared';
|
||||||
|
import { TimeRangePickerProps } from 'antd/lib/time-picker';
|
||||||
|
import cls from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const ReadPretty: React.FC<TimeRangePickerProps> = (props: any) => {
|
||||||
|
const { placeholder } = props;
|
||||||
|
const prefixCls = usePrefixCls('description-text', props);
|
||||||
|
const getLabels = () => {
|
||||||
|
const labels = formatMomentValue(props.value, props.format, placeholder);
|
||||||
|
return isArr(labels) ? labels.join('~') : labels;
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className={cls(prefixCls, props.className)} style={props.style}>
|
||||||
|
{getLabels()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,37 @@
|
|||||||
|
import { formatMomentValue, momentable } from '@formily/antd/esm/__builtins__';
|
||||||
|
import { connect, mapProps, mapReadPretty } from '@formily/react';
|
||||||
|
import { TimePicker as AntdTimePicker } from 'antd';
|
||||||
|
import { TimePickerProps as AntdTimePickerProps, TimeRangePickerProps } from 'antd/lib/time-picker';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { ReadPretty } from './ReadPretty';
|
||||||
|
|
||||||
|
type ComposedTimePicker = React.FC<AntdTimePickerProps> & {
|
||||||
|
RangePicker?: React.FC<TimeRangePickerProps>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapTimeFormat = function () {
|
||||||
|
return (props: any) => {
|
||||||
|
const format = props['format'] || 'HH:mm:ss';
|
||||||
|
const onChange = props.onChange;
|
||||||
|
return {
|
||||||
|
...props,
|
||||||
|
format,
|
||||||
|
value: momentable(props.value, format),
|
||||||
|
onChange: (value: moment.Moment | moment.Moment[]) => {
|
||||||
|
if (onChange) {
|
||||||
|
onChange(formatMomentValue(value, format) || null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TimePicker: ComposedTimePicker = connect(
|
||||||
|
AntdTimePicker,
|
||||||
|
mapProps(mapTimeFormat()),
|
||||||
|
mapReadPretty(ReadPretty),
|
||||||
|
);
|
||||||
|
|
||||||
|
TimePicker.RangePicker = connect(AntdTimePicker.RangePicker, mapProps(mapTimeFormat()), mapReadPretty(ReadPretty));
|
||||||
|
|
||||||
|
export default TimePicker;
|
@ -0,0 +1,41 @@
|
|||||||
|
/**
|
||||||
|
* title: TimePicker
|
||||||
|
*/
|
||||||
|
import { FormItem } from '@formily/antd';
|
||||||
|
import { SchemaComponent, SchemaComponentProvider, TimePicker } from '@nocobase/client';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
input: {
|
||||||
|
type: 'string',
|
||||||
|
title: `Editable`,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'TimePicker',
|
||||||
|
'x-reactions': {
|
||||||
|
target: 'read',
|
||||||
|
fulfill: {
|
||||||
|
state: {
|
||||||
|
value: '{{$self.value}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
read: {
|
||||||
|
type: 'string',
|
||||||
|
title: `Read pretty`,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'TimePicker',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentProvider components={{ TimePicker, FormItem }}>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,42 @@
|
|||||||
|
/**
|
||||||
|
* title: TimePicker.RangePicker
|
||||||
|
*/
|
||||||
|
import { FormItem } from '@formily/antd';
|
||||||
|
import { SchemaComponent, SchemaComponentProvider, TimePicker } from '@nocobase/client';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
input: {
|
||||||
|
type: 'string',
|
||||||
|
title: `Editable`,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'TimePicker.RangePicker',
|
||||||
|
'x-reactions': {
|
||||||
|
target: 'read',
|
||||||
|
fulfill: {
|
||||||
|
state: {
|
||||||
|
value: '{{$self.value}}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
read: {
|
||||||
|
type: 'string',
|
||||||
|
title: `Read pretty`,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'TimePicker.RangePicker',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentProvider components={{ TimePicker, FormItem }}>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -6,3 +6,13 @@ group:
|
|||||||
---
|
---
|
||||||
|
|
||||||
# TimePicker
|
# TimePicker
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### TimePicker
|
||||||
|
|
||||||
|
<code src="./demos/demo1.tsx" />
|
||||||
|
|
||||||
|
### Time Range Picker
|
||||||
|
|
||||||
|
<code src="./demos/demo2.tsx" />
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
export * from './TimePicker';
|
Loading…
Reference in New Issue
Block a user