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
import { TimePicker, Button } from 'antd';
ReactDOM.render(
<TimePicker
addon={panel => (
<Button size="small" type="primary" onClick={() => panel.close()}>
Ok
</Button>
)}
/>
, mountNode);
class TimePickerAddonDemo extends React.Component {
state = { open: false };
handleOpenChange = (open) => {
this.setState({ open });
}
handleClose = () => this.setState({ open: false })
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/) | - |
| 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" |
| 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" |

View File

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

View File

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