tuya-panel-kit/lib/components/timer-picker/index.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _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; };

var _jsxFileName = 'src/components/timer-picker/index.js';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator'](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if ((typeof Symbol === 'function' ? Symbol.iterator : '@@iterator') in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _utils = require('../../utils');

var _pickerView = require('../picker-view');

var _pickerView2 = _interopRequireDefault(_pickerView);

var _utils2 = require('./utils');

var _styled = require('../popup/styled');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var omit = _utils.CoreUtils.omit;
var _parseTimer = _utils.TimeUtils.parseTimer;
var cx = _utils.RatioUtils.convertX;
var getPropsFromStyle = _utils.ThemeUtils.getPropsFromStyle;


var TIME_PICKER_PROPS = ['style', 'startTime', 'endTime', 'onTimerChange', 'is12Hours', 'singlePicker', 'prefixPosition'];

var TimerPicker = function (_Component) {
  _inherits(TimerPicker, _Component);

  function TimerPicker(props) {
    _classCallCheck(this, TimerPicker);

    var _this = _possibleConstructorReturn(this, (TimerPicker.__proto__ || Object.getPrototypeOf(TimerPicker)).call(this, props));

    _initialiseProps.call(_this);

    var hours = (0, _utils2.getHourSelections)(props.is12Hours);
    _this.minutes = (0, _utils2.getMinsSelections)();
    _this.prefixs = (0, _utils2.getTimePrefixSelections)(props.amText, props.pmText);

    var _parseTimer$split$map = _parseTimer(props.startTime * 60).split(':').map(function (v) {
      return +v;
    }),
        _parseTimer$split$map2 = _slicedToArray(_parseTimer$split$map, 2),
        startHour = _parseTimer$split$map2[0],
        startMin = _parseTimer$split$map2[1];

    var _parseTimer$split$map3 = _parseTimer(props.endTime * 60).split(':').map(function (v) {
      return +v;
    }),
        _parseTimer$split$map4 = _slicedToArray(_parseTimer$split$map3, 2),
        endHour = _parseTimer$split$map4[0],
        endMin = _parseTimer$split$map4[1];

    _this.state = {
      startHour: startHour,
      startMin: startMin,
      endHour: endHour,
      endMin: endMin,
      hours: hours
    };
    return _this;
  }

  _createClass(TimerPicker, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.startTime !== this.props.startTime || nextProps.endTime !== this.props.endTime) {
        this.parseTimer(nextProps.startTime, nextProps.endTime);
      }
      if (nextProps.is12Hours !== this.props.is12Hours) {
        var hours = (0, _utils2.getHourSelections)(nextProps.is12Hours);
        this.setState({ hours: hours });
      }
    }
  }, {
    key: 'componentWillUpdate',
    value: function componentWillUpdate(nextProps, nextState) {
      var onTimerChange = nextProps.onTimerChange;

      if (nextState !== this.state) {
        var startTime = parseInt(nextState.startHour, 10) * 60 + parseInt(nextState.startMin, 10);
        var endTime = parseInt(nextState.endHour, 10) * 60 + parseInt(nextState.endMin, 10);

        typeof onTimerChange === 'function' && onTimerChange(startTime, endTime);
      }
    }
  }, {
    key: 'parseTimer',
    value: function parseTimer(startTime, endTime) {
      var _parseTimer$split$map5 = _parseTimer(startTime * 60).split(':').map(function (v) {
        return +v;
      }),
          _parseTimer$split$map6 = _slicedToArray(_parseTimer$split$map5, 2),
          startHour = _parseTimer$split$map6[0],
          startMin = _parseTimer$split$map6[1];

      var _parseTimer$split$map7 = _parseTimer(endTime * 60).split(':').map(function (v) {
        return +v;
      }),
          _parseTimer$split$map8 = _slicedToArray(_parseTimer$split$map7, 2),
          endHour = _parseTimer$split$map8[0],
          endMin = _parseTimer$split$map8[1];

      this.setState({
        startHour: startHour,
        startMin: startMin,
        endHour: endHour,
        endMin: endMin
      });
    }
  }, {
    key: 'renderPickView',
    value: function renderPickView(values, value, onValueChange, loop, key) {
      var _props = this.props,
          accessibilityLabel = _props.accessibilityLabel,
          pickerFontColor = _props.pickerFontColor,
          pickerFontSize = _props.pickerFontSize;

      var pickerProps = omit(this.props, TIME_PICKER_PROPS);
      var style = _reactNative.StyleSheet.flatten([this.props.style]);
      return _react2.default.createElement(
        _pickerView2.default,
        _extends({}, pickerProps, {
          accessibilityLabel: accessibilityLabel + '_' + key,
          theme: { fontColor: pickerFontColor, fontSize: pickerFontSize },
          selectedValue: value,
          onValueChange: onValueChange,
          contentContainerStyle: { flex: 1 },
          style: [{
            flex: key === 'symbol' ? 0 : 1,
            height: style.height || 200,
            justifyContent: 'center',
            backgroundColor: getPropsFromStyle('backgroundColor', style) || '#fff'
          }, key === 'symbol' && {
            width: cx(48)
          }],
          loop: loop,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 211
          }
        }),
        values.map(function (d, idx) {
          return _react2.default.createElement(_pickerView2.default.Item, { key: idx, value: d.value, label: d.label, __source: {
              fileName: _jsxFileName,
              lineNumber: 233
            }
          });
        })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          style = _props2.style,
          disabled = _props2.disabled,
          is12Hours = _props2.is12Hours,
          singlePicker = _props2.singlePicker,
          prefixPosition = _props2.prefixPosition,
          symbol = _props2.symbol,
          loop = _props2.loop;
      var _state = this.state,
          startHour = _state.startHour,
          startMin = _state.startMin,
          endHour = _state.endHour,
          endMin = _state.endMin,
          hours = _state.hours;

      var startPrefix = (0, _utils2.getPrefix)(startHour);
      var endPrefix = (0, _utils2.getPrefix)(endHour);
      var prefixPositionStart = prefixPosition;
      var prefixPositionEnd = prefixPosition;
      if (Array.isArray(prefixPosition)) {
        var _prefixPosition = _slicedToArray(prefixPosition, 2);

        prefixPositionStart = _prefixPosition[0];
        prefixPositionEnd = _prefixPosition[1];
      }
      return _react2.default.createElement(
        _styled.StyledTimerPickerContainer,
        { style: style, pointerEvents: disabled ? 'none' : 'auto', __source: {
            fileName: _jsxFileName,
            lineNumber: 250
          }
        },
        _react2.default.createElement(
          _styled.StyledTimerPickerRow,
          {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 251
            }
          },
          is12Hours && prefixPositionStart === 'left' && this.renderPickView(this.prefixs, startPrefix, this.onStartPrefixChange, false, 'StartAmpm'),
          this.renderPickView(hours, startHour, this.onStartHourChange, loop, 'StartHour'),
          this.renderPickView(this.minutes, startMin, this.onStartMinChange, loop, 'StartMinute'),
          is12Hours && prefixPositionStart === 'right' && this.renderPickView(this.prefixs, startPrefix, this.onStartPrefixChange, false, 'StartAmpm')
        ),
        !!symbol && this.renderPickView([{ value: symbol, label: symbol }], symbol, function () {}, false, 'symbol'),
        !singlePicker && _react2.default.createElement(
          _styled.StyledTimerPickerRow,
          {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 282
            }
          },
          is12Hours && prefixPositionEnd === 'left' && this.renderPickView(this.prefixs, endPrefix, this.onEndPrefixChange, false, 'EndAmpm'),
          this.renderPickView(hours, endHour, this.onEndHourChange, loop, 'EndHour'),
          this.renderPickView(this.minutes, endMin, this.onEndMinChange, loop, 'EndMinute'),
          is12Hours && prefixPositionEnd === 'right' && this.renderPickView(this.prefixs, endPrefix, this.onEndPrefixChange, false, 'EndAmpm')
        )
      );
    }
  }]);

  return TimerPicker;
}(_react.Component);

TimerPicker.propTypes = {
  accessibilityLabel: _propTypes2.default.string,

  style: _reactNative.ViewPropTypes.style,

  disabled: _propTypes2.default.bool,

  startTime: _propTypes2.default.number,

  endTime: _propTypes2.default.number,

  onTimerChange: _propTypes2.default.func,

  is12Hours: _propTypes2.default.bool,

  singlePicker: _propTypes2.default.bool,

  prefixPosition: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.oneOf(['left', 'right'])]),

  pickerFontColor: _propTypes2.default.string,

  pickerFontSize: _propTypes2.default.number,

  symbol: _propTypes2.default.string,

  loop: _propTypes2.default.bool,

  amText: _propTypes2.default.string,

  pmText: _propTypes2.default.string
};
TimerPicker.defaultProps = {
  accessibilityLabel: 'TimerPicker',
  style: {},
  disabled: false,
  startTime: 480,
  endTime: 840,
  onTimerChange: null,
  is12Hours: true,
  singlePicker: false,
  prefixPosition: ['left', 'right'],
  pickerFontColor: '#333',
  symbol: '—',
  pickerFontSize: cx(20),
  loop: true,
  amText: 'AM',
  pmText: 'PM'
};

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onStartHourChange = function (startHour) {
    _this2.setState({ startHour: startHour });
  };

  this.onStartMinChange = function (startMin) {
    _this2.setState({ startMin: startMin });
  };

  this.onEndHourChange = function (endHour) {
    _this2.setState({ endHour: endHour });
  };

  this.onEndMinChange = function (endMin) {
    _this2.setState({ endMin: endMin });
  };

  this.onStartPrefixChange = function (startPrefix) {
    var start = _this2.state.startHour;
    if (startPrefix === 'AM' && start >= 12) {
      _this2.setState({
        startHour: start - 12
      });
    }
    if (startPrefix === 'PM' && start < 12) {
      _this2.setState({
        startHour: start + 12
      });
    }
  };

  this.onEndPrefixChange = function (endPrefix) {
    var end = _this2.state.endHour;
    if (endPrefix === 'AM' && end >= 12) {
      _this2.setState({
        endHour: end - 12
      });
    }
    if (endPrefix === 'PM' && end < 12) {
      _this2.setState({
        endHour: end + 12
      });
    }
  };
};

exports.default = TimerPicker;