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 './password';
|
||||
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
|
||||
|
||||
## 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