material-ui/lib/time-picker/time-display.js

Material Design UI components built with React

'use strict';

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 _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.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 (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var React = require('react');
var StylePropable = require('../mixins/style-propable');
var DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
var ThemeManager = require('../styles/theme-manager');

var TimeDisplay = React.createClass({
  displayName: 'TimeDisplay',

  mixins: [StylePropable],

  contextTypes: {
    muiTheme: React.PropTypes.object
  },

  propTypes: {
    selectedTime: React.PropTypes.object.isRequired,
    format: React.PropTypes.oneOf(['ampm', '24hr']),
    mode: React.PropTypes.oneOf(['hour', 'minute']),
    affix: React.PropTypes.oneOf(['', 'pm', 'am'])
  },

  //for passing default theme context to children
  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function getChildContext() {
    return {
      muiTheme: this.state.muiTheme
    };
  },

  getInitialState: function getInitialState() {
    return {
      transitionDirection: 'up',
      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme)
    };
  },

  getDefaultProps: function getDefaultProps() {
    return {
      mode: 'hour',
      affix: ''
    };
  },

  componentWillReceiveProps: function componentWillReceiveProps(nextProps, nextContext) {
    var direction = undefined;
    var newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
    this.setState({ muiTheme: newMuiTheme });

    if (nextProps.selectedTime !== this.props.selectedTime) {
      direction = nextProps.selectedTime > this.props.selectedTime ? 'up' : 'down';

      this.setState({
        transitionDirection: direction
      });
    }
  },

  sanitizeTime: function sanitizeTime() {
    var hour = this.props.selectedTime.getHours();
    var min = this.props.selectedTime.getMinutes().toString();

    if (this.props.format === "ampm") {
      hour %= 12;
      hour = hour || 12;
    }

    hour = hour.toString();
    if (hour.length < 2) hour = "0" + hour;
    if (min.length < 2) min = "0" + min;

    return [hour, min];
  },

  getTheme: function getTheme() {
    return this.state.muiTheme.timePicker;
  },

  render: function render() {
    var _props = this.props;
    var selectedTime = _props.selectedTime;
    var mode = _props.mode;

    var other = _objectWithoutProperties(_props, ['selectedTime', 'mode']);

    var styles = {
      root: {
        textAlign: "center",
        position: "relative",
        width: 280,
        height: "100%"
      },

      time: {
        margin: "6px 0",
        lineHeight: "58px",
        height: 58,
        fontSize: "58px"
      },

      box: {
        padding: "16px 0",
        backgroundColor: this.getTheme().color,
        color: this.getTheme().textColor
      },

      hour: {},

      minute: {}
    };

    var _sanitizeTime = this.sanitizeTime();

    var _sanitizeTime2 = _slicedToArray(_sanitizeTime, 2);

    var hour = _sanitizeTime2[0];
    var min = _sanitizeTime2[1];

    styles[mode].color = this.getTheme().accentColor;

    return React.createElement(
      'div',
      _extends({}, other, { style: this.prepareStyles(styles.root) }),
      React.createElement(
        'div',
        { style: this.prepareStyles(styles.box) },
        React.createElement(
          'div',
          { style: this.prepareStyles(styles.time) },
          React.createElement(
            'span',
            { style: this.prepareStyles(styles.hour), onTouchTap: this.props.onSelectHour },
            hour
          ),
          React.createElement(
            'span',
            null,
            ':'
          ),
          React.createElement(
            'span',
            { style: this.prepareStyles(styles.minute), onTouchTap: this.props.onSelectMin },
            min
          )
        ),
        React.createElement(
          'span',
          { key: "affix" },
          this.props.affix.toUpperCase()
        )
      )
    );
  }

});

module.exports = TimeDisplay;