react-cm-ui
Version:
React UI for Healthy Church
614 lines (542 loc) • 24.4 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 _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _constants = require("./constants");
var _constants2 = require("../../global/constants");
var _styles = require("../../styles");
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _grid = _interopRequireDefault(require("../../layout/grid"));
var _typography = _interopRequireDefault(require("../../dataDisplay/typography"));
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 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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(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 _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 = {
/**
* Override or extend the styles applied to the DurationPicker.
*/
classes: _propTypes["default"].shape({
root: _propTypes["default"].string,
dropdown: _propTypes["default"].string,
dropdownColumn: _propTypes["default"].string,
error: _propTypes["default"].string,
errorColumn: _propTypes["default"].string,
grid: _propTypes["default"].string,
label: _propTypes["default"].string,
labelColumn: _propTypes["default"].string,
required: _propTypes["default"].string
}),
/**
* Assign additional class names to the DurationPicker.
*/
className: _propTypes["default"].string,
/**
* Deprecated prop. Please use `disabled` instead.
*/
disable: _propTypes["default"].bool,
/**
* A DurationPicker can be disabled.
*/
disabled: _propTypes["default"].bool,
/**
* Indicate that there is a validation error for this DurationPicker input control.
*/
error: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
/**
* Specify an element ID this DurationPicker input control.
*/
id: _propTypes["default"].string,
/**
* Specify a label for the DurationPicker input control.
*/
label: _propTypes["default"].string,
/**
* If there is a years component, specify the maximum value to which it can be set.
*/
maxYears: _propTypes["default"].number,
/**
* Event handler for consumer to control state outside of the DurationPicker.
*/
onChange: _propTypes["default"].func,
/**
* Indicate whether the DurationPicker input control represents a required field.
*/
required: _propTypes["default"].bool,
/**
* Indicate whether the DurationPicker includes a Days component.
*/
showDays: _propTypes["default"].bool,
/**
* Indicate whether the DurationPicker includes an Hours component.
*/
showHours: _propTypes["default"].bool,
/**
* Indicate whether the DurationPicker includes a Minutes component.
*/
showMinutes: _propTypes["default"].bool,
/**
* Indicate whether the DurationPicker includes a Months component.
*/
showMonths: _propTypes["default"].bool,
/**
* Indicate whether the DurationPicker includes a Seconds component.
*/
showSeconds: _propTypes["default"].bool,
/**
* Indicate whether the DurationPicker includes a Years component.
*/
showYears: _propTypes["default"].bool,
/**
* The value of the DurationPicker. Should be a `Duration` object from the Moment JS library.
*/
value: _reactMomentProptypes["default"].momentDurationObj
};
var defaultProps = {
classes: null,
className: null,
disable: false,
disabled: false,
error: null,
id: null,
label: null,
maxYears: 99,
onChange: null,
required: false,
showDays: true,
showHours: true,
showMinutes: false,
showMonths: false,
showSeconds: false,
showYears: false,
value: null
};
var defaultState = {
years: 0,
months: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
value: null
};
var useStyles = function useStyles(theme) {
return {
root: {},
grid: {
'&.ui.grid': {
margin: -5.5
}
},
dropdown: {
'&.ui.dropdown.dropdown-selection': {
minWidth: 'auto'
}
},
dropdownColumn: {
flexBasis: 106,
flexGrow: 1,
maxWidth: 106,
// 95px content + 11px padding
minWidth: 'auto',
padding: 5.5
},
error: {
color: theme.palette.error.main,
'& .ui.dropdown .Select-control': {
borderColor: theme.palette.error.main
}
},
errorColumn: {
padding: 5.5
},
label: {
color: theme.palette.text.secondary
},
labelColumn: {
padding: 5.5
},
required: {
color: theme.palette.error.main
}
};
};
/**
* The DurationPicker uses a series of Drodown select menus for different units
* of time (seconds, minutes, hours, days, months and years) to allow the user
* to configure and input a single duration or timespan value (stored as a
* Duration object from the MomentJS library).
*/
var DurationPicker = /*#__PURE__*/function (_React$PureComponent) {
_inherits(DurationPicker, _React$PureComponent);
var _super = _createSuper(DurationPicker);
_createClass(DurationPicker, null, [{
key: "areMomentDurationsEqual",
value: function areMomentDurationsEqual(durationA, durationB) {
var durationAHasValue = _momentTimezone["default"].isDuration(durationA);
var durationBHasValue = _momentTimezone["default"].isDuration(durationB);
if (!durationAHasValue && !durationBHasValue) {
return true;
}
if (!durationAHasValue || !durationBHasValue) {
return false;
} // both are valid moment duration objects
return durationA.valueOf() === durationB.valueOf();
}
}, {
key: "buildMomentDuration",
value: function buildMomentDuration(updatedState) {
var days = updatedState.days,
hours = updatedState.hours,
minutes = updatedState.minutes,
months = updatedState.months,
seconds = updatedState.seconds,
years = updatedState.years;
return _momentTimezone["default"].duration({
seconds: seconds,
minutes: minutes,
hours: hours,
days: days,
months: months,
years: years
});
}
}, {
key: "getStateFromDurationValue",
value: function getStateFromDurationValue(duration) {
if (!_momentTimezone["default"].isDuration(duration)) {
return null;
}
return {
days: duration.days(),
hours: duration.hours(),
minutes: duration.minutes(),
months: duration.months(),
seconds: duration.seconds(),
years: duration.years(),
value: duration
};
}
}, {
key: "haveUnitOfTimeOptionsChanged",
value: function haveUnitOfTimeOptionsChanged(props, prevProps) {
return props.showDays !== prevProps.showDays || props.showHours !== prevProps.showHours || props.showMinutes !== prevProps.showMinutes || props.showMonths !== prevProps.showMonths || props.showSeconds !== prevProps.showSeconds || props.showYears !== prevProps.showYears;
}
}, {
key: "isValidValue",
value: function isValidValue(value) {
return _momentTimezone["default"].isDuration(value) && value.valueOf() !== _momentTimezone["default"].duration().valueOf();
}
}]);
function DurationPicker(props) {
var _this;
_classCallCheck(this, DurationPicker);
_this = _super.call(this, props);
var state = DurationPicker.getStateFromDurationValue(props.value) || defaultState;
_this.state = _objectSpread({}, state);
_this.onStateChange = _this.onStateChange.bind(_assertThisInitialized(_this));
_this.onDaysChange = _this.onDaysChange.bind(_assertThisInitialized(_this));
_this.onHoursChange = _this.onHoursChange.bind(_assertThisInitialized(_this));
_this.onMinutesChange = _this.onMinutesChange.bind(_assertThisInitialized(_this));
_this.onMonthsChange = _this.onMonthsChange.bind(_assertThisInitialized(_this));
_this.onSecondsChange = _this.onSecondsChange.bind(_assertThisInitialized(_this));
_this.onYearsChange = _this.onYearsChange.bind(_assertThisInitialized(_this));
_this.setupDropdownOptions();
return _this;
}
_createClass(DurationPicker, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var prevValue = prevState.value;
var value = this.props.value; // Handle external value change ... sync up internal state
if (!DurationPicker.areMomentDurationsEqual(prevValue, value)) {
if (_momentTimezone["default"].isDuration(value)) {
this.setState(DurationPicker.getStateFromDurationValue(value));
} else {
// if value is nil or invalid, reset to default state
this.setState(defaultState);
}
} // If any `showXXX` props have changed, ensure the dropdown options are populated
if (DurationPicker.haveUnitOfTimeOptionsChanged(this.props, prevProps)) {
this.setupDropdownOptions();
}
}
}, {
key: "onDaysChange",
value: function onDaysChange(selectedOption) {
var value = (0, _lodash.get)(selectedOption, 'value', 0);
this.onStateChange({
days: value
});
}
}, {
key: "onHoursChange",
value: function onHoursChange(selectedOption) {
var value = (0, _lodash.get)(selectedOption, 'value', 0);
this.onStateChange({
hours: value
});
}
}, {
key: "onMinutesChange",
value: function onMinutesChange(selectedOption) {
var value = (0, _lodash.get)(selectedOption, 'value', 0);
this.onStateChange({
minutes: value
});
}
}, {
key: "onMonthsChange",
value: function onMonthsChange(selectedOption) {
var value = (0, _lodash.get)(selectedOption, 'value', 0);
this.onStateChange({
months: value
});
}
}, {
key: "onSecondsChange",
value: function onSecondsChange(selectedOption) {
var value = (0, _lodash.get)(selectedOption, 'value', 0);
this.onStateChange({
seconds: value
});
}
}, {
key: "onYearsChange",
value: function onYearsChange(selectedOption) {
var value = (0, _lodash.get)(selectedOption, 'value', 0);
this.onStateChange({
years: value
});
}
}, {
key: "onStateChange",
value: function onStateChange(updatedState) {
var updatedMomentDurationValue = DurationPicker.buildMomentDuration(_objectSpread(_objectSpread({}, this.state), updatedState));
var onChange = this.props.onChange;
if ((0, _lodash.isFunction)(onChange)) {
// controlled component; we own the unit of time component states, but _not_ the complete value state
this.setState(updatedState); // update the local state that we do own
onChange(updatedMomentDurationValue); // call `onChange()` with the updated value
} else {
// uncontrolled component ... we own the complete value state
var finalUpdatedState = _objectSpread(_objectSpread({}, updatedState), {}, {
value: updatedMomentDurationValue
});
this.setState(finalUpdatedState);
}
}
}, {
key: "setupDropdownOptions",
value: function setupDropdownOptions() {
var _this$props = this.props,
maxYears = _this$props.maxYears,
showDays = _this$props.showDays,
showHours = _this$props.showHours,
showMinutes = _this$props.showMinutes,
showMonths = _this$props.showMonths,
showSeconds = _this$props.showSeconds,
showYears = _this$props.showYears;
this.secondsOptions = showSeconds && (0, _lodash.isEmpty)(this.secondsOptions) && (0, _lodash.map)((0, _lodash.range)(_constants.SECONDS_MAX + 1), function (seconds) {
return {
label: "".concat(seconds, " ").concat(seconds === 1 ? _constants.SECOND_SINGULAR : _constants.SECONDS_PLURAL),
value: seconds
};
}) || this.secondsOptions || [];
this.minutesOptions = showMinutes && (0, _lodash.isEmpty)(this.minutesOptions) && (0, _lodash.map)((0, _lodash.range)(_constants.MINUTES_MAX + 1), function (minutes) {
return {
label: "".concat(minutes, " ").concat(minutes === 1 ? _constants.MINUTE_SINGULAR : _constants.MINUTES_PLURAL),
value: minutes
};
}) || this.minutesOptions || [];
this.hoursOptions = showHours && (0, _lodash.isEmpty)(this.hoursOptions) && (0, _lodash.map)((0, _lodash.range)(_constants.HOURS_MAX + 1), function (hours) {
return {
label: "".concat(hours, " ").concat(hours === 1 ? _constants.HOUR_SINGULAR : _constants.HOURS_PLURAL),
value: hours
};
}) || this.hoursOptions || [];
this.daysOptions = showDays && (0, _lodash.isEmpty)(this.daysOptions) && (0, _lodash.map)((0, _lodash.range)(_constants.DAYS_MAX + 1), function (days) {
return {
label: "".concat(days, " ").concat(days === 1 ? _constants.DAY_SINGULAR : _constants.DAYS_PLURAL),
value: days
};
}) || this.daysOptions || [];
this.monthsOptions = showMonths && (0, _lodash.isEmpty)(this.monthsOptions) && (0, _lodash.map)((0, _lodash.range)(_constants.MONTHS_MAX + 1), function (months) {
return {
label: "".concat(months, " ").concat(months === 1 ? _constants.MONTH_SINGULAR : _constants.MONTHS_PLURAL),
value: months
};
}) || this.monthsOptions || [];
this.yearsOptions = showYears && (0, _lodash.isEmpty)(this.yearsOptions) && (0, _lodash.map)((0, _lodash.range)(maxYears + 1), function (years) {
return {
label: "".concat(years, " ").concat(years === 1 ? _constants.YEAR_SINGULAR : _constants.YEARS_PLURAL),
value: years
};
}) || this.yearsOptions || [];
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
classes = _this$props2.classes,
className = _this$props2.className,
disable = _this$props2.disable,
disabled = _this$props2.disabled,
error = _this$props2.error,
id = _this$props2.id,
label = _this$props2.label,
required = _this$props2.required,
showDays = _this$props2.showDays,
showHours = _this$props2.showHours,
showMinutes = _this$props2.showMinutes,
showMonths = _this$props2.showMonths,
showSeconds = _this$props2.showSeconds,
showYears = _this$props2.showYears;
var _this$state = this.state,
days = _this$state.days,
hours = _this$state.hours,
minutes = _this$state.minutes,
months = _this$state.months,
seconds = _this$state.seconds,
years = _this$state.years,
value = _this$state.value;
var rootClasses = (0, _classnames["default"])(classes.root, _constants2.UI_CLASS_NAME, _constants.BEM_BLOCK_NAME, className, _defineProperty({}, classes.error, !!error));
var realId = id || _constants.BEM_BLOCK_NAME;
var isDisabled = disabled || disable;
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
id: realId
}, /*#__PURE__*/_react["default"].createElement(_grid["default"], {
className: classes.grid
}, label && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.labelColumn,
width: 12
}, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
classes: {
body2: classes.label
},
component: "label",
variant: "body2"
}, label, required && !DurationPicker.isValidValue(value) ? /*#__PURE__*/_react["default"].createElement("span", {
className: classes.required
}, "\xA0*") : null)), showYears && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.dropdownColumn
}, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
className: classes.dropdown,
clearable: false,
disable: isDisabled,
fluid: true,
id: "".concat(id || _constants.BEM_BLOCK_NAME, "--years_dropdown"),
onChange: this.onYearsChange,
options: this.yearsOptions,
selection: true,
value: (0, _lodash.find)(this.yearsOptions, function (opt) {
return opt.value === years;
})
})), showMonths && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.dropdownColumn
}, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
className: classes.dropdown,
clearable: false,
disable: isDisabled,
fluid: true,
id: "".concat(id || _constants.BEM_BLOCK_NAME, "--months_dropdown"),
onChange: this.onMonthsChange,
options: this.monthsOptions,
selection: true,
value: (0, _lodash.find)(this.monthsOptions, function (opt) {
return opt.value === months;
})
})), showDays && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.dropdownColumn
}, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
className: classes.dropdown,
clearable: false,
disable: isDisabled,
fluid: true,
id: "".concat(id || _constants.BEM_BLOCK_NAME, "--days_dropdown"),
onChange: this.onDaysChange,
options: this.daysOptions,
selection: true,
value: (0, _lodash.find)(this.daysOptions, function (opt) {
return opt.value === days;
})
})), showHours && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.dropdownColumn
}, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
className: classes.dropdown,
clearable: false,
disable: isDisabled,
fluid: true,
id: "".concat(id || _constants.BEM_BLOCK_NAME, "--hours_dropdown"),
onChange: this.onHoursChange,
options: this.hoursOptions,
selection: true,
value: (0, _lodash.find)(this.hoursOptions, function (opt) {
return opt.value === hours;
})
})), showMinutes && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.dropdownColumn
}, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
className: classes.dropdown,
clearable: false,
disable: isDisabled,
fluid: true,
id: "".concat(id || _constants.BEM_BLOCK_NAME, "--minutes_dropdown"),
onChange: this.onMinutesChange,
options: this.minutesOptions,
selection: true,
value: (0, _lodash.find)(this.minutesOptions, function (opt) {
return opt.value === minutes;
})
})), showSeconds && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.dropdownColumn
}, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
className: classes.dropdown,
clearable: false,
disable: isDisabled,
fluid: true,
id: "".concat(id || _constants.BEM_BLOCK_NAME, "--seconds_dropdown"),
onChange: this.onSecondsChange,
options: this.secondsOptions,
selection: true,
value: (0, _lodash.find)(this.secondsOptions, function (opt) {
return opt.value === seconds;
})
})), (0, _lodash.isString)(error) && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: classes.errorColumn,
width: 12
}, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
classes: {
body2: classes.error
},
variant: "body2"
}, error))));
}
}]);
return DurationPicker;
}(_react["default"].PureComponent);
DurationPicker.propTypes = propTypes;
DurationPicker.defaultProps = defaultProps;
var _default = (0, _styles.withStyles)(useStyles, {
withTheme: true
})(DurationPicker);
exports["default"] = _default;