Atlaskit's Controlled Component

controlled_component.jsx

/*
Example copied from: https://atlaskit.atlassian.com/packages/core/datetime-picker

Usage:

<Controlled initialValue="2018-01-02">
  {({ value, onValueChange, onBlur }) => (
    <DatePicker
      id="datepicker-2"
      value={value}
      onChange={onValueChange}
      onBlur={onBlur}
    />
  )}
</Controlled>
*/

class Controlled extends Component<Props, State> {
  state: State;
  recentlySelected: boolean = false;

  constructor(props: Props) {
    super(props);
    this.state = {
      value: props.initialValue || '',
      isOpen: props.initialIsOpen || false,
    };
  }

  handleClick = () => {
    if (!this.recentlySelected) {
      this.setState({ isOpen: true });
    }
  };

  onValueChange = (value: string) => {
    console.log(value);
    this.recentlySelected = true;
    this.setState(
      {
        value,
        isOpen: false,
      },
      () => {
        setTimeout(() => {
          this.recentlySelected = false;
        }, 200);
      },
    );
  };

  onBlur = () => {
    this.setState({
      isOpen: false,
    });
  };

  onFocus = () => {
    this.setState({
      isOpen: false,
    });
  };

  render() {
    return (
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      <div onClick={this.handleClick}>
        {this.props.children({
          value: this.state.value,
          onValueChange: this.onValueChange,
          isOpen: this.state.isOpen,
          onBlur: this.onBlur,
        })}
      </div>
    );
  }
}