feat: expose TimePicker[open], close: #5775 & #5829 (#5913)

This commit is contained in:
Benjy Cui 2017-04-28 09:40:20 +08:00 committed by GitHub
parent 5c25452de8
commit d48c2084d5
4 changed files with 40 additions and 9 deletions

View File

@ -16,13 +16,29 @@ Render addon contents to timepicker panel's bottom.
````jsx ````jsx
import { TimePicker, Button } from 'antd'; import { TimePicker, Button } from 'antd';
ReactDOM.render( class TimePickerAddonDemo extends React.Component {
<TimePicker state = { open: false };
addon={panel => (
<Button size="small" type="primary" onClick={() => panel.close()}> handleOpenChange = (open) => {
Ok this.setState({ open });
</Button> }
)}
/> handleClose = () => this.setState({ open: false })
, mountNode);
render() {
return (
<TimePicker
open={this.state.open}
onOpenChange={this.handleOpenChange}
addon={() => (
<Button size="small" type="primary" onClick={this.handleClose}>
Ok
</Button>
)}
/>
);
}
}
ReactDOM.render(<TimePickerAddonDemo />, mountNode);
```` ````

View File

@ -25,6 +25,8 @@ import moment from 'moment';
|---------------------|-----|-----|-------| |---------------------|-----|-----|-------|
| defaultValue | to set default time | [moment](http://momentjs.com/) | - | | defaultValue | to set default time | [moment](http://momentjs.com/) | - |
| value | to set time | [moment](http://momentjs.com/) | - | | value | to set time | [moment](http://momentjs.com/) | - |
| open | whether to popup panel | boolean | false |
| onOpenChange | a callback function which will be called while panel opening/closing | (status: boolean): void | 无 |
| placeholder | display when there's no value | string | "Select a time" | | placeholder | display when there's no value | string | "Select a time" |
| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | | onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
| format | to set the time format | string | "HH:mm:ss" | | format | to set the time format | string | "HH:mm:ss" |

View File

@ -11,8 +11,10 @@ export interface TimePickerProps {
size?: 'large' | 'default' | 'small'; size?: 'large' | 'default' | 'small';
value?: moment.Moment; value?: moment.Moment;
defaultValue?: moment.Moment; defaultValue?: moment.Moment;
open?: boolean;
format?: string; format?: string;
onChange?: (time: moment.Moment, timeString: string) => void; onChange?: (time: moment.Moment, timeString: string) => void;
onOpenChange?: (status: boolean) => void;
disabled?: boolean; disabled?: boolean;
placeholder?: string; placeholder?: string;
hideDisabledOptions?: boolean; hideDisabledOptions?: boolean;
@ -74,6 +76,13 @@ abstract class TimePicker extends React.Component<TimePickerProps, any> {
} }
} }
handleOpenClose = ({ open }) => {
const { onOpenChange } = this.props;
if (onOpenChange) {
onOpenChange(open);
}
}
saveTimePicker = (timePickerRef) => { saveTimePicker = (timePickerRef) => {
this.timePickerRef = timePickerRef; this.timePickerRef = timePickerRef;
} }
@ -121,6 +130,8 @@ abstract class TimePicker extends React.Component<TimePickerProps, any> {
showMinute={format.indexOf('mm') > -1} showMinute={format.indexOf('mm') > -1}
showSecond={format.indexOf('ss') > -1} showSecond={format.indexOf('ss') > -1}
onChange={this.handleChange} onChange={this.handleChange}
onOpen={this.handleOpenClose}
onClose={this.handleOpenClose}
addon={addon} addon={addon}
/> />
); );

View File

@ -26,6 +26,8 @@ import moment from 'moment';
|---------------------|-----|-----|-------| |---------------------|-----|-----|-------|
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 | | defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
| value | 当前时间 | [moment](http://momentjs.com/) | 无 | | value | 当前时间 | [moment](http://momentjs.com/) | 无 |
| open | 面板是否打开 | boolean | false |
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" | | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 | | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss" | | format | 展示的时间格式 | string | "HH:mm:ss" |