|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304 |
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
-
- var _extends2 = require('babel-runtime/helpers/extends');
-
- var _extends3 = _interopRequireDefault(_extends2);
-
- var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
- var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
- var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
- var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
- var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
- var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
- var _createClass2 = require('babel-runtime/helpers/createClass');
-
- var _createClass3 = _interopRequireDefault(_createClass2);
-
- var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
- var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
- var _inherits2 = require('babel-runtime/helpers/inherits');
-
- var _inherits3 = _interopRequireDefault(_inherits2);
-
- var _simpleAssign = require('simple-assign');
-
- var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
-
- var _react = require('react');
-
- var _react2 = _interopRequireDefault(_react);
-
- var _propTypes = require('prop-types');
-
- var _propTypes2 = _interopRequireDefault(_propTypes);
-
- var _TimePickerDialog = require('./TimePickerDialog');
-
- var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog);
-
- var _TextField = require('../TextField');
-
- var _TextField2 = _interopRequireDefault(_TextField);
-
- var _timeUtils = require('./timeUtils');
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- var emptyTime = new Date();
- emptyTime.setHours(0);
- emptyTime.setMinutes(0);
- emptyTime.setSeconds(0);
- emptyTime.setMilliseconds(0);
-
- var TimePicker = function (_Component) {
- (0, _inherits3.default)(TimePicker, _Component);
-
- function TimePicker() {
- var _ref;
-
- var _temp, _this, _ret;
-
- (0, _classCallCheck3.default)(this, TimePicker);
-
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
-
- return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TimePicker.__proto__ || (0, _getPrototypeOf2.default)(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
- time: null,
- dialogTime: new Date()
- }, _this.handleAcceptDialog = function (time) {
- _this.setState({
- time: time
- });
- if (_this.props.onChange) _this.props.onChange(null, time);
- }, _this.handleFocusInput = function (event) {
- event.target.blur();
- if (_this.props.onFocus) {
- _this.props.onFocus(event);
- }
- }, _this.handleClickInput = function (event) {
- event.preventDefault();
-
- if (!_this.props.disabled) {
- _this.openDialog();
- }
-
- if (_this.props.onClick) {
- _this.props.onClick(event);
- }
- }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
- }
-
- (0, _createClass3.default)(TimePicker, [{
- key: 'componentWillMount',
- value: function componentWillMount() {
- this.setState({
- time: this.isControlled() ? this.getControlledTime() : this.props.defaultTime
- });
- }
- }, {
- key: 'componentWillReceiveProps',
- value: function componentWillReceiveProps(nextProps) {
- if (nextProps.value !== this.props.value) {
- this.setState({
- time: this.getControlledTime(nextProps)
- });
- }
- }
-
- /**
- * Alias for `openDialog()` for an api consistent with TextField.
- */
-
- }, {
- key: 'focus',
- value: function focus() {
- this.openDialog();
- }
- }, {
- key: 'openDialog',
- value: function openDialog() {
- this.setState({
- dialogTime: this.state.time
- });
- this.refs.dialogWindow.show();
- }
- }, {
- key: 'isControlled',
- value: function isControlled() {
- return this.props.value !== null;
- }
- }, {
- key: 'getControlledTime',
- value: function getControlledTime() {
- var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-
- var result = null;
- if (props.value instanceof Date) {
- result = props.value;
- }
- return result;
- }
- }, {
- key: 'render',
- value: function render() {
- var _props = this.props,
- autoOk = _props.autoOk,
- cancelLabel = _props.cancelLabel,
- defaultTime = _props.defaultTime,
- dialogBodyStyle = _props.dialogBodyStyle,
- dialogStyle = _props.dialogStyle,
- format = _props.format,
- okLabel = _props.okLabel,
- onFocus = _props.onFocus,
- onClick = _props.onClick,
- onShow = _props.onShow,
- onDismiss = _props.onDismiss,
- pedantic = _props.pedantic,
- style = _props.style,
- textFieldStyle = _props.textFieldStyle,
- minutesStep = _props.minutesStep,
- other = (0, _objectWithoutProperties3.default)(_props, ['autoOk', 'cancelLabel', 'defaultTime', 'dialogBodyStyle', 'dialogStyle', 'format', 'okLabel', 'onFocus', 'onClick', 'onShow', 'onDismiss', 'pedantic', 'style', 'textFieldStyle', 'minutesStep']);
- var prepareStyles = this.context.muiTheme.prepareStyles;
- var time = this.state.time;
-
-
- return _react2.default.createElement(
- 'div',
- { style: prepareStyles((0, _simpleAssign2.default)({}, style)) },
- _react2.default.createElement(_TextField2.default, (0, _extends3.default)({}, other, {
- style: textFieldStyle,
- ref: 'input',
- value: time === emptyTime ? null : (0, _timeUtils.formatTime)(time, format, pedantic),
- onFocus: this.handleFocusInput,
- onClick: this.handleClickInput
- })),
- _react2.default.createElement(_TimePickerDialog2.default, {
- ref: 'dialogWindow',
- bodyStyle: dialogBodyStyle,
- initialTime: this.state.dialogTime,
- onAccept: this.handleAcceptDialog,
- onShow: onShow,
- onDismiss: onDismiss,
- format: format,
- okLabel: okLabel,
- cancelLabel: cancelLabel,
- autoOk: autoOk,
- style: dialogStyle,
- minutesStep: minutesStep
- })
- );
- }
- }]);
- return TimePicker;
- }(_react.Component);
-
- TimePicker.defaultProps = {
- autoOk: false,
- cancelLabel: 'Cancel',
- defaultTime: null,
- disabled: false,
- format: 'ampm',
- okLabel: 'OK',
- pedantic: false,
- style: {},
- value: null,
- minutesStep: 1
- };
- TimePicker.contextTypes = {
- muiTheme: _propTypes2.default.object.isRequired
- };
- TimePicker.propTypes = process.env.NODE_ENV !== "production" ? {
- /**
- * If true, automatically accept and close the picker on set minutes.
- */
- autoOk: _propTypes2.default.bool,
- /**
- * Override the label of the 'Cancel' button.
- */
- cancelLabel: _propTypes2.default.node,
- /**
- * The initial time value of the TimePicker.
- */
- defaultTime: _propTypes2.default.object,
- /**
- * Override the inline-styles of TimePickerDialog's body element.
- */
- dialogBodyStyle: _propTypes2.default.object,
- /**
- * Override the inline-styles of TimePickerDialog's root element.
- */
- dialogStyle: _propTypes2.default.object,
- /**
- * If true, the TimePicker is disabled.
- */
- disabled: _propTypes2.default.bool,
- /**
- * Tells the component to display the picker in `ampm` (12hr) format or `24hr` format.
- */
- format: _propTypes2.default.oneOf(['ampm', '24hr']),
- /**
- * How many minutes should be added/subtracted when moving the clock pointer.
- */
- minutesStep: _propTypes2.default.number,
- /**
- * Override the label of the 'OK' button.
- */
- okLabel: _propTypes2.default.node,
- /**
- * Callback function that is fired when the time value changes. The time value is passed in a Date Object.
- * Since there is no particular event associated with the change the first argument will always be null
- * and the second argument will be the new Date instance.
- */
- onChange: _propTypes2.default.func,
- /**
- * Callback function fired when the TimePicker is tapped or clicked.
- */
- onClick: _propTypes2.default.func,
- /**
- * Callback function fired when the TimePicker dialog is dismissed.
- */
- onDismiss: _propTypes2.default.func,
- /**
- * Callback function fired when the TimePicker `TextField` gains focus.
- */
- onFocus: _propTypes2.default.func,
- /**
- * Callback function fired when the TimePicker dialog is shown.
- */
- onShow: _propTypes2.default.func,
- /**
- * If true, uses ("noon" / "midnight") instead of ("12 a.m." / "12 p.m.").
- *
- * It's technically more correct to refer to "12 noon" and "12 midnight" rather than "12 a.m." and "12 p.m."
- * and it avoids confusion between different locales. By default (for compatibility reasons) TimePicker uses
- * ("12 a.m." / "12 p.m.").
- */
- pedantic: _propTypes2.default.bool,
- /**
- * Override the inline-styles of the root element.
- */
- style: _propTypes2.default.object,
- /**
- * Override the inline-styles of TimePicker's TextField element.
- */
- textFieldStyle: _propTypes2.default.object,
- /**
- * Sets the time for the Time Picker programmatically.
- */
- value: _propTypes2.default.object
- } : {};
- exports.default = TimePicker;
|