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:
SemmyWong 2022-01-20 20:33:46 +08:00 committed by GitHub
parent 091fb7f5ee
commit b0b79b7d9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 151 additions and 1 deletions

View File

@ -14,4 +14,4 @@ export * from './menu';
export * from './page';
export * from './password';
export * from './radio';
export * from './time-picker';

View File

@ -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>
);
};

View File

@ -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;

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -6,3 +6,13 @@ group:
---
# TimePicker
## Examples
### TimePicker
<code src="./demos/demo1.tsx" />
### Time Range Picker
<code src="./demos/demo2.tsx" />

View File

@ -0,0 +1 @@
export * from './TimePicker';