WHAT: Add missing onBlur

WHY: * XXXXX HOW: * NOTHING TO SAY

Author: ecmadao

examples/TimePickerWrapper.js

@@ -37,11 +37,11 @@ class TimePickerWrapper extends React.Component {
  meridiem
  } = options;
 
- console.log(options);
  this.setState({ hour, minute, meridiem });
  }
 
  onFocusChange(focused) {
+ console.log(`onFocusChange: ${focused}`);
  this.setState({ focused });
  }
 

examples/TimePickerWrapper2.js

@@ -49,7 +49,6 @@ class TimePickerWrapper extends React.Component {
  meridiem
  } = options;
 
- console.log(options);
  this.setState({
  [section]: Object.assign({}, this.state[section], {
  hour, minute, meridiem

src/components/MaterialTheme/TwentyFourHoursMode.jsx

@@ -82,8 +82,6 @@ class TwentyFourHoursMode extends React.PureComponent {
  }
 
  handleTimeChange(time, autoMode = null) {
- console.log(`time: ${time}`);
- console.log(`autoMode: ${autoMode}`);
  const validateTime = parseInt(time, 10);
  const { step } = this.state;
  const auto = autoMode === null ? this.props.autoMode : autoMode;

src/components/OutsideClickHandler.jsx

@@ -41,12 +41,10 @@ class OutsideClickHandler extends React.PureComponent {
  }
 
  onOutsideClick(e) {
- console.log('onOutsideClick onOutsideClick onOutsideClick')
  const event = e || window.event;
  const mouseTarget = (typeof event.which !== 'undefined') ? event.which : event.button;
  const isDescendantOfRoot = ReactDOM.findDOMNode(this.childNode).contains(event.target);
 
- console.log(`isDescendantOfRoot: ${isDescendantOfRoot}, mouseTarget: ${mouseTarget}`);
  if (!isDescendantOfRoot && mouseTarget === 1) {
  const { onOutsideClick } = this.props;
  onOutsideClick && onOutsideClick(event);

src/components/Picker/PickerPoint.jsx

@@ -32,8 +32,6 @@ const PickerPoint = (props) => {
  style={inlineStyle}
  className={pointClass}
  onClick={() => {
- console.log('PickerPoint clicked');
- console.log(props);
  let relativeRotate = angle - (pointerRotate % 360);
  if (relativeRotate >= 180) {
  relativeRotate -= 360;

src/components/TimePicker.jsx

@@ -108,9 +108,9 @@ class TimePicker extends React.PureComponent {
  timeChanged: false
  };
 
+ this.onBlur = this.onBlur.bind(this);
  this.onFocus = this.onFocus.bind(this);
  this.timeData = this.timeData.bind(this);
- this.onClearFocus = this.onClearFocus.bind(this);
  this.handleTimeChange = this.handleTimeChange.bind(this);
  this.handleHourChange = this.handleHourChange.bind(this);
  this.handleMinuteChange = this.handleMinuteChange.bind(this);
@@ -132,11 +132,23 @@ class TimePicker extends React.PureComponent {
  }
 
  onFocus() {
- this.setState({
- focused: true
- });
+ const { focused } = this.state;
+ if (!focused) {
+ this.onFocusChange(!focused);
+ }
+ }
+
+ onBlur() {
+ const { focused } = this.state;
+ if (focused) {
+ this.onFocusChange(!focused);
+ }
+ }
+
+ onFocusChange(focused) {
+ this.setState({ focused });
  const { onFocusChange } = this.props;
- onFocusChange && onFocusChange(true);
+ onFocusChange && onFocusChange(focused);
  }
 
  timeData(timeChanged) {
@@ -224,10 +236,6 @@ class TimePicker extends React.PureComponent {
  return m && !!(m.match(/^am|pm/i)) ? localMessages[m.toLowerCase()] : m;
  }
 
- onClearFocus() {
- this.setState({ focused: false });
- }
-
  onTimeChanged(timeChanged) {
  this.setState({ timeChanged });
  }
@@ -271,7 +279,7 @@ class TimePicker extends React.PureComponent {
  handleHourAndMinuteChange(time) {
  this.onTimeChanged(true);
  const { onTimeChange, autoClose } = this.props;
- if (autoClose) this.onClearFocus();
+ if (autoClose) this.onBlur();
  return onTimeChange && onTimeChange(time);
  }
 
@@ -313,7 +321,7 @@ class TimePicker extends React.PureComponent {
  showTimezone={showTimezone}
  phrases={this.languageData}
  colorPalette={colorPalette}
- clearFocus={this.onClearFocus}
+ clearFocus={this.onBlur}
  timeMode={parseInt(timeMode, 10)}
  onTimezoneChange={onTimezoneChange}
  minuteStep={parseInt(minuteStep, 10)}
@@ -366,7 +374,7 @@ class TimePicker extends React.PureComponent {
  )}
  <OutsideClickHandler
  focused={focused}
- onOutsideClick={this.onClearFocus}
+ onOutsideClick={this.onBlur}
  closeOnOutsideClick={closeOnOutsideClick}
  >
  {this.renderDialPlate()}

stories/ClassicThemePicker.js

@@ -8,6 +8,9 @@ storiesOf('Classic Theme', module)
  .addWithInfo('basic', () => (
  <TimePickerWrapper theme="classic" />
  ))
+ .addWithInfo('with default time', () => (
+ <TimePickerWrapper theme="classic" defaultTime="17:00" />
+ ))
  .addWithInfo('dark color', () => (
  <TimePickerWrapper theme="classic" colorPalette="dark" />
  ))

test/components/TimePicker_func_spec.jsx

@@ -16,7 +16,7 @@ describe('TimePicker func', () => {
 
  it('should clear focus', () => {
  const wrapper = shallow(<TimePicker />);
- wrapper.instance().onClearFocus();
+ wrapper.instance().onBlur();
  expect(wrapper.state().focused).to.equal(false);
  });