WHAT: Add quick version for new disabled props

WHY: * XXXXX HOW: * NOTHING TO SAY

Author: ecmadao

README.md

@@ -309,6 +309,16 @@ timeMode=12
 />
 ```
 
+- `disabled`
+
+> Disable component. Default false
+
+```
+<TimePicker
+ disabled={true}
+/>
+```
+
 - `draggable`
 
 If you don't want to drag the pointer, then you can set `draggable` props to `false`, then users can only use click to change time. Default `true`

css/base.css

@@ -6,12 +6,16 @@
  height: 50px;
 }
 
-.time_picker_preview:active {
+.time_picker_preview:not(.disabled):active, .time_picker_preview:not(.disabled).active {
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.12), 0 0 8px 0 rgba(0, 0, 0, 0.08);
 }
 
+.time_picker_preview.disabled {
+ cursor: not-allowed;
+}
+
 .preview_container {
  position: absolute;
  left: 50%;

doc/README_CN.md

@@ -271,6 +271,26 @@ timeMode=12
 />
 ```
 
+- `closeOnOutsideClick`
+
+> 点击 Modal 外部后是否关闭。默认为 true
+
+```
+<TimePicker
+ closeOnOutsideClick={false}
+/>
+```
+
+- `disabled`
+
+> 禁用组件。默认为 false
+
+```
+<TimePicker
+ disabled={true}
+/>
+```
+
 - `draggable`
 
 如果想禁用拖拽，则可以设置 `draggable` 为 `false`，那样的话用户只能通过点击来改变时间。默认为 `true`

src/components/OutsideClickHandler.jsx

@@ -15,28 +15,45 @@ const defaultProps = {
 class OutsideClickHandler extends React.PureComponent {
  constructor(props) {
  super(props);
+ this.hasAction = false;
  this.onOutsideClick = this.onOutsideClick.bind(this);
  }
 
  componentDidMount() {
+ this.bindActions();
+ }
+
+ componentDidUpdate() {
+ this.bindActions();
+ }
+
+ componentWillUnmount() {
+ this.unbindActions();
+ }
+
+ bindActions() {
  const { closeOnOutsideClick } = this.props;
  if (closeOnOutsideClick) {
+ if (this.hasAction) return;
  if (document.addEventListener) {
  document.addEventListener('mousedown', this.onOutsideClick, true);
  } else {
  document.attachEvent('onmousedown', this.onOutsideClick);
  }
+ this.hasAction = true;
  }
  }
 
- componentWillUnmount() {
+ unbindActions() {
+ if (!this.hasAction) return;
  const { closeOnOutsideClick } = this.props;
  if (closeOnOutsideClick) {
  if (document.removeEventListener) {
  document.removeEventListener('mousedown', this.onOutsideClick, true);
  } else {
  document.detachEvent('onmousedown', this.onOutsideClick);
  }
+ this.hasAction = false;
  }
  }
 

src/components/TimePicker.jsx

@@ -63,6 +63,7 @@ const propTypes = {
  useTz: PropTypes.bool,
  closeOnOutsideClick: PropTypes.bool,
  timeConfig: PropTypes.object,
+ disabled: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -92,7 +93,8 @@ const defaultProps = {
  timeConfig: {
  step: 30,
  unit: 'minutes'
- }
+ },
+ disabled: false,
 };
 
 class TimePicker extends React.PureComponent {
@@ -146,6 +148,9 @@ class TimePicker extends React.PureComponent {
  }
 
  onFocusChange(focused) {
+ const { disabled } = this.props;
+ if (disabled) return;
+
  this.setState({ focused });
  const { onFocusChange } = this.props;
  onFocusChange && onFocusChange(focused);
@@ -286,6 +291,7 @@ class TimePicker extends React.PureComponent {
  renderDialPlate() {
  const {
  theme,
+ disabled,
  timeMode,
  autoMode,
  autoClose,
@@ -300,6 +306,8 @@ class TimePicker extends React.PureComponent {
  timezoneIsEditable,
  } = this.props;
 
+ if (disabled) return null;
+
  const dialTheme = theme === 'material' ? theme : 'classic';
  const DialPlate = DialPlates[dialTheme];
 
@@ -337,6 +345,7 @@ class TimePicker extends React.PureComponent {
  render() {
  const {
  trigger,
+ disabled,
  placeholder,
  withoutIcon,
  colorPalette,
@@ -348,7 +357,8 @@ class TimePicker extends React.PureComponent {
 
  const pickerPreviewClass = cx(
  'time_picker_preview',
- focused && 'active'
+ focused && 'active',
+ disabled && 'disabled'
  );
  const containerClass = cx(
  'time_picker_container',
@@ -375,7 +385,7 @@ class TimePicker extends React.PureComponent {
  <OutsideClickHandler
  focused={focused}
  onOutsideClick={this.onBlur}
- closeOnOutsideClick={closeOnOutsideClick}
+ closeOnOutsideClick={disabled ? false : closeOnOutsideClick}
  >
  {this.renderDialPlate()}
  </OutsideClickHandler>

stories/TimePicker.js

@@ -9,6 +9,9 @@ storiesOf('Default TimePicker', module)
  .addWithInfo('basic', () => (
  <TimePickerWrapper />
  ))
+ .addWithInfo('disabled', () => (
+ <TimePickerWrapper disabled />
+ ))
  .addWithInfo('with default time', () => {
  const aDefaultTime = text('set default time', '22:10');
  return (