react-cm-ui
Version:
React UI for Healthy Church
694 lines (614 loc) • 28.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _timePickerCreatableOption = _interopRequireDefault(require("./timePickerCreatableOption"));
var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));
var _input = _interopRequireDefault(require("../input"));
var _select = _interopRequireDefault(require("../select/select"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var propTypes = {
/**
* Assign additional class names to the TimePicker.
*/
className: _propTypes["default"].string,
/**
* Deprecated prop. Please use `disabled` instead.
*/
disable: _propTypes["default"].bool,
/**
* A TimePicker can be disabled.
*/
disabled: _propTypes["default"].bool,
/**
* A TimePicker can be in an error state for input validation purposes.
*/
error: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
/**
* The `id` of the TimePicker.
* Individual subcomponents that comprise the TimePicker will have various
* strings appended to this to make up their full `id` prop values.
*/
id: _propTypes["default"].string,
/**
* The label for the TimePicker.
*/
label: _propTypes["default"].string,
/**
* The TimePicker can have "nested" styling applied to it.
*/
nest: _propTypes["default"].bool,
/**
* The `onChange` event handler.
*/
onChange: _propTypes["default"].func,
/**
* Boolean flag indicating whether the TimePicker will be used to select a
* range of time (i.e. 'from' time and 'to' time) or just a single time.
*/
range: _propTypes["default"].bool,
/**
* A TimePicker can be required.
*/
required: _propTypes["default"].bool,
/**
* Boolean flag indicating whether or not the TimePicker should include a
* Time Zone Select as well. This prop is optional, and defaults to `true`
* (meaning the Time Zone Select will be shown).
*/
showTimezone: _propTypes["default"].bool,
/**
* Assign additional inline styles to the TimePicker.
*/
style: _propTypes["default"].shape({}),
/**
* The value of the TimePicker.
*/
value: _propTypes["default"].shape({
timeDisplay: _propTypes["default"].string,
timeFrom: _propTypes["default"].string,
timeTo: _propTypes["default"].string,
timeZone: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({})])
}),
/**
* This prop dictates how the TimePicker will handle searches on its
* Time Zones select (i.e. which attribute will it use to find matches).
*/
zoneMatchProp: _propTypes["default"].oneOf(['any', 'label', 'value']),
/**
* An array of select options representing Time Zones passed to the
* TimePicker.
*
* These should be standard `{ label: '...', value: '...' }` objects.
*
* The `value`s should be IANA/Olson/TZDB style time zone identifiers,
* e.g. 'America/Los_Angeles' for the U.S. Pacific Time Zone.
*
* This prop should be used if a particular style of Time Zone options
* (i.e. with a specific style for the `label`s) is desired (e.g. it is
* supplied by the API and is the standard list for the application).
*
* This prop is optional; if it is elided and if `showTimezone` is `true`
* (or elided) then Moment JS will be used to produce a default set of
* time zone options to use.
*/
zoneOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
/**
* The placeholder text to be used in the Time Zones select in the
* TimePicker.
*/
zonePlaceholderText: _propTypes["default"].string
};
var defaultProps = {
className: undefined,
disable: false,
disabled: false,
error: undefined,
id: undefined,
label: undefined,
nest: false,
onChange: undefined,
range: false,
required: false,
showTimezone: true,
style: undefined,
value: undefined,
zoneMatchProp: 'label',
zoneOptions: undefined,
zonePlaceholderText: 'Select a Time Zone'
};
var creatableSelectPromptTextCreator = function creatableSelectPromptTextCreator(label) {
return label;
};
var createableValueComponent = function createableValueComponent(_ref) {
var children = _ref.children;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "Select-value"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "Select-value-label"
}, /*#__PURE__*/_react["default"].createElement("span", null, children)));
};
/**
* The TimePicker component represents a control that allows the user to
* select a single time of day or a range (with Time From and Time To).
* Usually it also includes a Time Zone selector as well, although this may be
* suppressed if so desired for particular use cases where the Time Zone is not
* needed.
*/
var TimePicker = /*#__PURE__*/function (_React$Component) {
_inherits(TimePicker, _React$Component);
var _super = _createSuper(TimePicker);
function TimePicker(props) {
var _this;
_classCallCheck(this, TimePicker);
_this = _super.call(this, props);
var zoneOptions = _this.renderZoneOptions();
var guessedTimeZone = _momentTimezone["default"].tz.guess();
_this.state = {
hourOptions: _this.renderHourOptions(),
isTimePopoverActive: false,
minuteOptions: _this.renderMinuteOptions(),
periodOptions: _this.renderPeriodOptions(),
value: (0, _lodash.clone)(props.value) || {
timeDisplay: null,
timeFrom: null,
timeTo: null,
timeZone: (0, _lodash.find)(zoneOptions, function (o) {
return o.value === guessedTimeZone;
})
},
zoneOptions: zoneOptions
};
_this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
_this.onClickOutsideRef = _this.onClickOutside.bind(_assertThisInitialized(_this));
_this.onInputKeyDown = _this.onInputKeyDown.bind(_assertThisInitialized(_this));
_this.onInputMask = _this.onInputMask.bind(_assertThisInitialized(_this));
_this.onTimeDropdownChange = _this.onTimeDropdownChange.bind(_assertThisInitialized(_this));
_this.onTimePopoverToggle = _this.onTimePopoverToggle.bind(_assertThisInitialized(_this));
_this.onZoneDropdownChange = _this.onZoneDropdownChange.bind(_assertThisInitialized(_this));
_this.onTimeHourDropdownChange = (0, _lodash.partialRight)(_this.onTimeDropdownChange.bind(null, 'hour'), true);
_this.onTimeHourToDropdownChange = (0, _lodash.partialRight)(_this.onTimeDropdownChange.bind(null, 'hourTo'), true);
_this.onTimeMinuteDropdownChange = (0, _lodash.partialRight)(_this.onTimeDropdownChange.bind(null, 'minute'), true);
_this.onTimeMinuteToDropdownChange = (0, _lodash.partialRight)(_this.onTimeDropdownChange.bind(null, 'minuteTo'), true);
_this.onTimePeriodDropdownChange = (0, _lodash.partialRight)(_this.onTimeDropdownChange.bind(null, 'period'), true);
_this.onTimePeriodToDropdownChange = (0, _lodash.partialRight)(_this.onTimeDropdownChange.bind(null, 'periodTo'), true);
_this.timePickerRef = null;
return _this;
}
_createClass(TimePicker, [{
key: "componentDidMount",
value: function componentDidMount() {
document.addEventListener('click', this.onClickOutsideRef);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props = this.props,
onChange = _this$props.onChange,
range = _this$props.range,
nextValue = _this$props.value;
var prevValue = prevProps.value;
if (!(0, _lodash.isEqual)(nextValue, prevValue)) {
var isDirty = false;
var newValue = (0, _lodash.clone)(nextValue);
if (!(0, _lodash.isEmpty)(nextValue)) {
if (!(0, _lodash.isEmpty)(nextValue.timeDisplay)) {
newValue.timeDisplay = range ? "".concat(newValue.timeFrom, " - ").concat(newValue.timeTo) : newValue.timeFrom;
isDirty = true;
}
}
this.setState({
value: newValue
});
if (isDirty && (0, _lodash.isFunction)(onChange)) {
onChange(newValue);
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('click', this.onClickOutsideRef);
}
}, {
key: "onChange",
value: function onChange(value, field) {
var _this$props2 = this.props,
onChange = _this$props2.onChange,
range = _this$props2.range;
var prevValueFromState = this.state.value;
var newValue = (0, _lodash.clone)(prevValueFromState);
if ((0, _lodash.isObject)(value)) {
var mask = '__:__ __';
newValue.timeFrom = newValue.timeFrom || mask;
if (field === 'hour') {
newValue.timeFrom = (0, _lodash.replace)(newValue.timeFrom, newValue.timeFrom[0] + newValue.timeFrom[1] + newValue.timeFrom[2], "".concat(value.label, ":"));
} else if (field === 'minute') {
newValue.timeFrom = (0, _lodash.replace)(newValue.timeFrom, newValue.timeFrom[2] + newValue.timeFrom[3] + newValue.timeFrom[4], ":".concat(value.label));
} else if (field === 'period') {
newValue.timeFrom = (0, _lodash.replace)(newValue.timeFrom, newValue.timeFrom[5] + newValue.timeFrom[6] + newValue.timeFrom[7], " ".concat(value.label));
} else if (field === 'zone') {
newValue.timeZone = value;
}
if (range) {
newValue.timeTo = newValue.timeTo || mask;
if (field === 'hourTo') {
newValue.timeTo = (0, _lodash.replace)(newValue.timeTo, newValue.timeTo[0] + newValue.timeTo[1] + newValue.timeTo[2], "".concat(value.label, ":"));
} else if (field === 'minuteTo') {
newValue.timeTo = (0, _lodash.replace)(newValue.timeTo, newValue.timeTo[2] + newValue.timeTo[3] + newValue.timeTo[4], ":".concat(value.label));
} else if (field === 'periodTo') {
newValue.timeTo = (0, _lodash.replace)(newValue.timeTo, newValue.timeTo[5] + newValue.timeTo[6] + newValue.timeTo[7], " ".concat(value.label));
}
}
newValue.timeDisplay = range ? "".concat(newValue.timeFrom, " - ").concat(newValue.timeTo) : newValue.timeFrom;
} else {
var valueUpperCased = value.toUpperCase();
newValue.timeDisplay = valueUpperCased;
newValue.timeFrom = range ? (0, _lodash.trim)(valueUpperCased.split('-')[0]) : valueUpperCased;
newValue.timeTo = range ? (0, _lodash.trim)(valueUpperCased.split('-')[1]) : null;
}
if ((0, _lodash.isFunction)(onChange)) {
onChange(newValue);
} else {
this.setState({
value: newValue
});
}
}
}, {
key: "onClickOutside",
value: function onClickOutside(event) {
var _event$target$classNa, _event$target$classNa2;
var isOutside = !(0, _lodash.isNil)(this.timePickerRef) && this.timePickerRef.contains(event.target);
var isTimePopoverActive = this.state.isTimePopoverActive;
if (isOutside || !isTimePopoverActive || ((_event$target$classNa = (_event$target$classNa2 = event.target.className) === null || _event$target$classNa2 === void 0 ? void 0 : _event$target$classNa2.includes('Select-option')) !== null && _event$target$classNa !== void 0 ? _event$target$classNa : false)) {
return;
}
this.onTimePopoverToggle();
}
}, {
key: "onInputMask",
value: function onInputMask(value) {
var range = this.props.range; // hh:dd am - hh:dd pm
if (range) {
return [/[0-1]/, value.toString()[0] * 1 === 1 ? /[0-2]/ : /[0-9]/, ':', /[0-5]/, /[0-9]/, ' ', /[A,P]/i, /[M]/i, ' ', '-', ' ', /[0-1]/, value.toString()[12] * 1 === 1 ? /[0-2]/ : /[0-9]/, ':', /[0-5]/, /[0-9]/, ' ', /[A,P]/i, /[M]/i];
}
return [/[0-1]/, value.toString()[0] * 1 === 1 ? /[0-2]/ : /[0-9]/, ':', /[0-5]/, /[0-9]/, ' ', /[A,P]/i, /[M]/i];
}
}, {
key: "onInputKeyDown",
value: function onInputKeyDown(event) {
var isTimePopoverActive = this.state.isTimePopoverActive;
if (!isTimePopoverActive && event.key === 'ArrowDown') {
this.onTimePopoverToggle();
}
if (isTimePopoverActive && event.key === 'ArrowUp') {
this.onTimePopoverToggle();
}
}
}, {
key: "onTimePopoverToggle",
value: function onTimePopoverToggle() {
var disable = this.props.disable;
if (!disable) {
this.setState(function (_ref2) {
var isTimePopoverActive = _ref2.isTimePopoverActive;
return {
isTimePopoverActive: !isTimePopoverActive
};
});
}
}
}, {
key: "onTimeDropdownChange",
value: function onTimeDropdownChange(field, selectedOption) {
this.onChange(selectedOption, field);
}
}, {
key: "onZoneDropdownChange",
value: function onZoneDropdownChange(selectedOption) {
this.onChange(selectedOption, 'zone');
}
}, {
key: "renderHourOptions",
value: function renderHourOptions() {
return (0, _lodash.map)((0, _lodash.range)(1, 13), function (v) {
var number = v.toString().length < 2 ? "0".concat(v) : v;
return {
label: number.toString(),
value: number * 1
};
});
}
}, {
key: "renderMinuteOptions",
value: function renderMinuteOptions() {
return (0, _lodash.map)((0, _lodash.range)(0, 60, 5), function (v) {
var number = v.toString().length < 2 ? "0".concat(v) : v;
return {
label: number.toString(),
value: number * 1
};
});
}
}, {
key: "renderPeriodOptions",
value: function renderPeriodOptions() {
return [{
label: 'AM',
value: 0
}, {
label: 'PM',
value: 1
}];
}
}, {
key: "renderZoneOptions",
value: function renderZoneOptions() {
var _this$props3 = this.props,
showTimezone = _this$props3.showTimezone,
zoneOptions = _this$props3.zoneOptions; // If `showTimezone` is `false` or if `zoneOptions` appears to be set
// with an array or time zone options then just return what we have; no
// need to calculate our own set of time zone options.
if (!showTimezone || (0, _lodash.isArray)(zoneOptions) && !(0, _lodash.isEmpty)(zoneOptions)) {
return zoneOptions;
}
/* eslint-disable no-underscore-dangle */
var zoneNames = Object.keys(_momentTimezone["default"].tz._zones).map(function (tz) {
// At some point _zones turns into an array of objects instead of strings.
if (typeof _momentTimezone["default"].tz._zones[tz] === 'string') {
return _momentTimezone["default"].tz._zones[tz].split('|')[0];
}
return _momentTimezone["default"].tz._zones[tz].name;
}).filter(function (tz) {
return tz.indexOf('/') >= 0;
});
/* eslint-enable no-underscore-dangle */
return (0, _lodash.sortBy)((0, _lodash.map)(zoneNames, function (tzName) {
var zone = _momentTimezone["default"].tz(tzName);
return {
abbr: zone.zoneAbbr(),
label: "(".concat(zone.format('Z z'), ") ").concat(tzName.split('/')[0].replace('_', ' '), " (").concat(tzName.split('/').slice(-1)[0].replace('_', ' '), ")"),
offset: zone.format('Z'),
value: tzName
};
}), function (tz) {
return tz.offset;
});
}
}, {
key: "render",
value: function render() {
var _value$timeFrom$subst,
_value$timeFrom,
_find,
_this2 = this;
var _this$props4 = this.props,
className = _this$props4.className,
disable = _this$props4.disable,
disabled = _this$props4.disabled,
error = _this$props4.error,
id = _this$props4.id,
label = _this$props4.label,
nest = _this$props4.nest,
range = _this$props4.range,
required = _this$props4.required,
showTimezone = _this$props4.showTimezone,
style = _this$props4.style,
zoneMatchProp = _this$props4.zoneMatchProp,
zonePlaceholderText = _this$props4.zonePlaceholderText;
var _this$state = this.state,
hourOptions = _this$state.hourOptions,
isTimePopoverActive = _this$state.isTimePopoverActive,
minuteOptions = _this$state.minuteOptions,
periodOptions = _this$state.periodOptions,
value = _this$state.value,
zoneOptions = _this$state.zoneOptions;
var isDisabled = disabled || disable;
var containerClasses = (0, _classnames["default"])('ui', 'time-picker', className, {
'time-picker-disable': disable,
'time-picker-error': error,
'time-picker-nest': nest,
'time-picker-range': range
});
var hasTimeFrom = !(0, _lodash.isNil)(value === null || value === void 0 ? void 0 : value.timeFrom);
var hourFromDropdownValue = hasTimeFrom ? (0, _lodash.find)(hourOptions, function (o) {
return o.label === (value.timeFrom[0] + value.timeFrom[1]).toString();
}) : null;
var timeFromMinutes = (_value$timeFrom$subst = value === null || value === void 0 ? void 0 : (_value$timeFrom = value.timeFrom) === null || _value$timeFrom === void 0 ? void 0 : _value$timeFrom.substring(3, 5)) !== null && _value$timeFrom$subst !== void 0 ? _value$timeFrom$subst : '';
timeFromMinutes = timeFromMinutes === '__' ? '' : timeFromMinutes;
var minuteFromDropdownValue = hasTimeFrom ? (_find = (0, _lodash.find)(minuteOptions, function (o) {
return o.label === timeFromMinutes;
})) !== null && _find !== void 0 ? _find : {
label: timeFromMinutes,
value: timeFromMinutes
} : null;
var periodFromDropdownValue = hasTimeFrom ? (0, _lodash.find)(periodOptions, function (o) {
return o.label === value.timeFrom[6] + value.timeFrom[7];
}) : null;
var hourToDropdownValue;
var minuteToDropdownValue;
var periodToDropdownValue;
if (range) {
var _value$timeTo$substri, _value$timeTo, _find2;
var hasTimeTo = !(0, _lodash.isNil)(value === null || value === void 0 ? void 0 : value.timeTo);
hourToDropdownValue = hasTimeTo ? (0, _lodash.find)(hourOptions, function (o) {
return o.label === (value.timeTo[0] + value.timeTo[1]).toString();
}) : null;
var timeToMinutes = (_value$timeTo$substri = value === null || value === void 0 ? void 0 : (_value$timeTo = value.timeTo) === null || _value$timeTo === void 0 ? void 0 : _value$timeTo.substring(3, 5)) !== null && _value$timeTo$substri !== void 0 ? _value$timeTo$substri : '';
timeToMinutes = timeToMinutes === '__' ? '' : timeToMinutes;
minuteToDropdownValue = hasTimeTo ? (_find2 = (0, _lodash.find)(minuteOptions, function (o) {
return o.label === timeToMinutes;
})) !== null && _find2 !== void 0 ? _find2 : {
label: timeToMinutes,
value: timeToMinutes
} : null;
periodToDropdownValue = hasTimeTo ? (0, _lodash.find)(periodOptions, function (o) {
return o.label === value.timeTo[6] + value.timeTo[7];
}) : null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: containerClasses,
id: id,
ref: function ref(_ref3) {
_this2.timePickerRef = _ref3;
},
style: style
}, /*#__PURE__*/_react["default"].createElement(_input["default"], {
className: "time-picker-input",
disabled: isDisabled,
error: error,
guide: true,
icon: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
color: isTimePopoverActive ? 'highlight' : null,
compact: true,
title: "Show Time Picker",
type: "time",
onClick: this.onTimePopoverToggle
}),
id: id ? "".concat(id, "-input") : null,
keepCharPositions: true,
label: label,
mask: this.onInputMask,
onChange: this.onChange,
onKeyDown: this.onInputKeyDown,
placeholder: range ? 'hh:mm AM - hh:mm PM' : 'hh:mm AM',
required: required,
tabIndex: 0,
value: value && value.timeDisplay ? value.timeDisplay : null
}), showTimezone && /*#__PURE__*/_react["default"].createElement(_select["default"], {
className: "time-picker-zone-dropdown",
clearable: false,
disabled: isDisabled,
id: id ? "".concat(id, "-zone_dropdown") : null,
matchProp: zoneMatchProp || 'label',
menuMaxHeight: 448,
onChange: this.onZoneDropdownChange,
options: zoneOptions,
placeholder: zonePlaceholderText || 'Select a Time Zone',
searchable: true,
tabIndex: 0,
value: value.timeZone
}), isTimePopoverActive ? /*#__PURE__*/_react["default"].createElement("div", {
className: "time-picker-popover",
id: id ? "".concat(id, "-popover") : null
}, range && /*#__PURE__*/_react["default"].createElement("label", {
className: "label"
}, "From"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_select["default"], {
clearable: false,
id: id ? "".concat(id, "-hour_dropdown") : null,
menuMaxHeight: 448,
onChange: this.onTimeHourDropdownChange,
options: hourOptions,
placeholder: "hh",
searchable: true,
style: {
minWidth: 72
},
tabIndex: 0,
value: hourFromDropdownValue
}), /*#__PURE__*/_react["default"].createElement("span", {
className: "colon"
}, ":"), /*#__PURE__*/_react["default"].createElement(_select["default"], {
clearable: false,
creatable: true,
id: id ? "".concat(id, "-minute_dropdown") : null,
menuMaxHeight: 448,
onChange: this.onTimeMinuteDropdownChange,
optionComponent: _timePickerCreatableOption["default"],
options: minuteOptions,
placeholder: "mm",
promptTextCreator: creatableSelectPromptTextCreator,
searchable: true,
style: {
minWidth: 72
},
tabIndex: 0,
value: minuteFromDropdownValue,
valueComponent: createableValueComponent
}), /*#__PURE__*/_react["default"].createElement(_select["default"], {
clearable: false,
id: id ? "".concat(id, "-period_dropdown") : null,
menuMaxHeight: 448,
onChange: this.onTimePeriodDropdownChange,
options: periodOptions,
placeholder: "AM",
searchable: true,
style: {
minWidth: 72
},
tabIndex: 0,
value: periodFromDropdownValue
})), range && /*#__PURE__*/_react["default"].createElement("label", {
className: "label"
}, "To"), range && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_select["default"], {
clearable: false,
id: id ? "".concat(id, "-hour_to_dropdown") : null,
menuMaxHeight: 448,
onChange: this.onTimeHourToDropdownChange,
options: hourOptions,
placeholder: "hh",
searchable: true,
style: {
minWidth: 72
},
tabIndex: 0,
value: hourToDropdownValue
}), /*#__PURE__*/_react["default"].createElement("span", {
className: "colon"
}, ":"), /*#__PURE__*/_react["default"].createElement(_select["default"], {
clearable: false,
creatable: true,
id: id ? "".concat(id, "-minute_to_dropdown") : null,
menuMaxHeight: 448,
onChange: this.onTimeMinuteToDropdownChange,
optionComponent: _timePickerCreatableOption["default"],
options: minuteOptions,
placeholder: "mm",
promptTextCreator: creatableSelectPromptTextCreator,
searchable: true,
style: {
minWidth: 72
},
tabIndex: 0,
value: minuteToDropdownValue,
valueComponent: createableValueComponent
}), /*#__PURE__*/_react["default"].createElement(_select["default"], {
clearable: false,
id: id ? "".concat(id, "-period_to_dropdown") : null,
menuMaxHeight: 448,
onChange: this.onTimePeriodToDropdownChange,
options: periodOptions,
placeholder: "PM",
searchable: true,
style: {
minWidth: 72
},
tabIndex: 0,
value: periodToDropdownValue
}))) : null);
}
}]);
return TimePicker;
}(_react["default"].Component);
TimePicker.propTypes = propTypes;
TimePicker.defaultProps = defaultProps;
var _default = TimePicker;
exports["default"] = _default;