aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorArtem Vasiliev <artem.job@gmail.com>2016-10-20 00:00:17 +0300
committerArtem Vasiliev <artem.job@gmail.com>2016-10-20 00:00:17 +0300
commitb86fe1d16a4ad06951bba9ac2990ec3e4563637a (patch)
tree16cdd2ca2bb19b0a898b2b90b313f96a86f8fe79
parent9c01af6e34f7d63843bacfcffb8c7ad45d6866cf (diff)
downloadtime-picker-b86fe1d16a4ad06951bba9ac2990ec3e4563637a.tar.gz
time-picker-b86fe1d16a4ad06951bba9ac2990ec3e4563637a.tar.zst
time-picker-b86fe1d16a4ad06951bba9ac2990ec3e4563637a.zip
feat: 'addon' property support
..to be able to render something like OK button to timepicker: ``` <TimePicker allowEmpty={false} addon={panel => { return ( <div className="row"> <a role="button" className="btn btn-sm btn-default" onClick={() => panel.close()}> {__('OK')} </a> </div> ) }} /> ```
-rw-r--r--README.md1
-rw-r--r--src/Panel.jsx9
-rw-r--r--src/TimePicker.jsx4
3 files changed, 13 insertions, 1 deletions
diff --git a/README.md b/README.md
index 3ae31aa..5ec960c 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,7 @@ API
67| disabledSeconds | Function | disabled second options | | 67| disabledSeconds | Function | disabled second options | |
68| hideDisabledOptions | Boolean | whether hide disabled options | | 68| hideDisabledOptions | Boolean | whether hide disabled options | |
69| onChange | Function | null | called when select a different value | 69| onChange | Function | null | called when select a different value |
70| addon | Function | nothing | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.|
70| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | 71| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
71| transitionName | String | '' | | 72| transitionName | String | '' | |
72 73
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 9066b03..0ed60e9 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -36,6 +36,7 @@ const Panel = React.createClass({
36 showHour: PropTypes.bool, 36 showHour: PropTypes.bool,
37 showSecond: PropTypes.bool, 37 showSecond: PropTypes.bool,
38 onClear: PropTypes.func, 38 onClear: PropTypes.func,
39 addon: PropTypes.func,
39 }, 40 },
40 41
41 getDefaultProps() { 42 getDefaultProps() {
@@ -47,6 +48,7 @@ const Panel = React.createClass({
47 disabledMinutes: noop, 48 disabledMinutes: noop,
48 disabledSeconds: noop, 49 disabledSeconds: noop,
49 defaultOpenValue: moment(), 50 defaultOpenValue: moment(),
51 addon: noop,
50 }; 52 };
51 }, 53 },
52 54
@@ -79,11 +81,15 @@ const Panel = React.createClass({
79 this.setState({ currentSelectPanel }); 81 this.setState({ currentSelectPanel });
80 }, 82 },
81 83
84 close() {
85 this.props.onEsc();
86 },
87
82 render() { 88 render() {
83 const { 89 const {
84 prefixCls, className, placeholder, disabledHours, disabledMinutes, 90 prefixCls, className, placeholder, disabledHours, disabledMinutes,
85 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, 91 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond,
86 format, defaultOpenValue, clearText, onEsc, 92 format, defaultOpenValue, clearText, onEsc, addon,
87 } = this.props; 93 } = this.props;
88 const { 94 const {
89 value, currentSelectPanel, 95 value, currentSelectPanel,
@@ -133,6 +139,7 @@ const Panel = React.createClass({
133 disabledSeconds={disabledSeconds} 139 disabledSeconds={disabledSeconds}
134 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} 140 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
135 /> 141 />
142 {addon(this)}
136 </div> 143 </div>
137 ); 144 );
138 }, 145 },
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 58f6ea1..358b596 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -39,6 +39,7 @@ const Picker = React.createClass({
39 onChange: PropTypes.func, 39 onChange: PropTypes.func,
40 onOpen: PropTypes.func, 40 onOpen: PropTypes.func,
41 onClose: PropTypes.func, 41 onClose: PropTypes.func,
42 addon: PropTypes.func,
42 }, 43 },
43 44
44 getDefaultProps() { 45 getDefaultProps() {
@@ -61,6 +62,7 @@ const Picker = React.createClass({
61 onChange: noop, 62 onChange: noop,
62 onOpen: noop, 63 onOpen: noop,
63 onClose: noop, 64 onClose: noop,
65 addon: noop,
64 }; 66 };
65 }, 67 },
66 68
@@ -137,6 +139,7 @@ const Picker = React.createClass({
137 prefixCls, placeholder, disabledHours, 139 prefixCls, placeholder, disabledHours,
138 disabledMinutes, disabledSeconds, hideDisabledOptions, 140 disabledMinutes, disabledSeconds, hideDisabledOptions,
139 allowEmpty, showHour, showSecond, defaultOpenValue, clearText, 141 allowEmpty, showHour, showSecond, defaultOpenValue, clearText,
142 addon,
140 } = this.props; 143 } = this.props;
141 return ( 144 return (
142 <Panel 145 <Panel
@@ -157,6 +160,7 @@ const Picker = React.createClass({
157 disabledMinutes={disabledMinutes} 160 disabledMinutes={disabledMinutes}
158 disabledSeconds={disabledSeconds} 161 disabledSeconds={disabledSeconds}
159 hideDisabledOptions={hideDisabledOptions} 162 hideDisabledOptions={hideDisabledOptions}
163 addon={addon}
160 /> 164 />
161 ); 165 );
162 }, 166 },