zarm-web/es/time-picker/TimePicker.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { Component } from 'react';
import classnames from 'classnames';
import Dropdown from '../dropdown';
import Icon from '../icon';
import TimeSelect from './TimeSelect';
import LocaleReceiver from '../locale-provider/LocaleReceiver';

class TimePicker extends Component {
  constructor(props) {
    super(props);
    this.unmounted = void 0;

    this.onVisibleChange = visible => {
      this.setState({
        dropdown: visible
      });
    };

    const value = props.value || props.defaultValue;
    this.unmounted = false;
    this.state = {
      value,
      dropdown: false
    };
  }

  componentDidMount() {
    this.unmounted = true;
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      this.setState({
        value: nextProps.value
      });
    }
  }

  onDateChange(value) {
    const {
      onChange
    } = this.props;

    if (value.indexOf('undefined') > -1) {
      return;
    }

    this.setState({
      value
    }, () => {
      this.setDropdown(!!value, onChange);
    });
  }

  onConfirmBtn() {
    const {
      onChange
    } = this.props;
    this.setDropdown(false, onChange);
  }

  setDropdown(isOpen, callback) {
    if (!this.unmounted) {
      return;
    }

    const {
      value
    } = this.state;
    this.setState({
      dropdown: isOpen
    }, () => {
      if (callback) {
        callback(value);
      }
    });
  }

  render() {
    const _this$props = this.props,
          {
      defaultValue,
      placeholder,
      isDisabled,
      isRadius,
      size,
      locale,
      style,
      localeCode,
      dropdownStyle,
      placement,
      onChange
    } = _this$props,
          others = _objectWithoutProperties(_this$props, ["defaultValue", "placeholder", "isDisabled", "isRadius", "size", "locale", "style", "localeCode", "dropdownStyle", "placement", "onChange"]);

    const {
      value,
      dropdown
    } = this.state;
    const disabled = 'disabled' in this.props || isDisabled;
    const radius = 'radius' in this.props || isRadius;
    let valueText = placeholder || '00:00:00';
    let hasValue = false;

    if (value) {
      valueText = value;
      hasValue = true;
    }

    const cls = classnames({
      'za-select': true,
      'za-time__select-wrapper': true,
      'za-select--open': dropdown,
      disabled,
      radius,
      [`size-${size}`]: !!size
    });
    const textCls = classnames({
      'za-select__text': true,
      'za-select__text-placeholder': !hasValue
    });
    const overlay = React.createElement(React.Fragment, null, React.createElement(TimeSelect, {
      value: valueText,
      onChange: value1 => this.onDateChange(value1)
    }), React.createElement("div", {
      className: "za-select__bottom"
    }, React.createElement("span", {
      className: "clear-btn",
      onClick: () => this.onDateChange('')
    }, locale.clear), React.createElement("span", {
      className: "confirm-btn",
      onClick: () => this.onConfirmBtn()
    }, locale.confirm)));
    return React.createElement("div", _extends({
      className: cls,
      style: style
    }, others), React.createElement(Dropdown, {
      visible: dropdown,
      disabled: disabled,
      style: _objectSpread({
        width: 240
      }, dropdownStyle),
      zIndex: 2020,
      onVisibleChange: this.onVisibleChange,
      overlay: overlay,
      placement: placement
    }, React.createElement("div", {
      className: "za-select__selection",
      "aria-autocomplete": "list",
      "aria-haspopup": "true",
      "aria-expanded": "false"
    }, React.createElement("span", {
      className: textCls
    }, valueText), React.createElement(Icon, {
      className: "za-time__select-icon",
      type: "time-circle"
    }))));
  }

}

TimePicker.defaultProps = {
  onChange: () => {},
  isRadius: true
};
export default LocaleReceiver('TimePicker')(TimePicker);