@commercetools-uikit/date-time-field
Version:
A controlled date time input component for single date, with validation states and a label.
167 lines (159 loc) • 9.98 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var react = require('react');
var utils = require('@commercetools-uikit/utils');
var Constraints = require('@commercetools-uikit/constraints');
var Spacings = require('@commercetools-uikit/spacings');
var FieldLabel = require('@commercetools-uikit/field-label');
var DateTimeInput = require('@commercetools-uikit/date-time-input');
var FieldErrors = require('@commercetools-uikit/field-errors');
var FieldWarnings = require('@commercetools-uikit/field-warnings');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
var DateTimeInput__default = /*#__PURE__*/_interopDefault(DateTimeInput);
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
var FieldWarnings__default = /*#__PURE__*/_interopDefault(FieldWarnings);
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
const sequentialId = utils.createSequentialId('date-time-field-');
const hasErrors = errors => {
var _context;
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
};
const hasWarnings = warnings => {
var _context2;
return warnings && _someInstanceProperty__default["default"](_context2 = _Object$values__default["default"](warnings)).call(_context2, Boolean);
};
let DateTimeField = /*#__PURE__*/function (_Component) {
function DateTimeField() {
var _this;
_classCallCheck(this, DateTimeField);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, DateTimeField, [...args]);
_this.state = {
// We generate an id in case no id is provided by the parent to attach the
// label to the input component.
id: _this.props.id
};
return _this;
}
_inherits(DateTimeField, _Component);
return _createClass(DateTimeField, [{
key: "render",
value: function render() {
if (!this.props.isReadOnly) {
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'DateTimeField: `onChange` is required when field is not read only.') : void 0;
}
if (this.props.hintIcon) {
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'DateTimeField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
}
const hasError = this.props.touched && hasErrors(this.props.errors);
const hasWarning = this.props.touched && hasWarnings(this.props.warnings);
const errorsContainerId = `${this.state.id}-errors`;
const warningsContainerId = `${this.state.id}-warnings`;
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
max: this.props.horizontalConstraint,
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
scale: "xs",
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
title: this.props.title,
hint: this.props.hint,
description: this.props.description,
onInfoButtonClick: this.props.onInfoButtonClick,
hintIcon: this.props.hintIcon,
badge: this.props.badge,
hasRequiredIndicator: this.props.isRequired,
htmlFor: this.state.id
}), jsxRuntime.jsx(DateTimeInput__default["default"], _objectSpread(_objectSpread({
id: this.state.id,
name: this.props.name,
timeZone: this.props.timeZone,
value: this.props.value,
onChange: this.props.onChange,
onFocus: this.props.onFocus,
onBlur: this.props.onBlur,
isCondensed: this.props.isCondensed,
isDisabled: this.props.isDisabled,
isReadOnly: this.props.isReadOnly,
hasError: hasError,
hasWarning: hasWarning,
placeholder: this.props.placeholder,
horizontalConstraint: "scale"
}, utils.filterDataAttributes(this.props)), {}, {
"aria-invalid": hasError,
"aria-errormessage": errorsContainerId,
defaultDaySelectionTime: this.props.defaultDaySelectionTime
})), jsxRuntime.jsx(FieldErrors__default["default"], {
id: errorsContainerId,
errors: this.props.errors,
isVisible: hasError,
renderError: this.props.renderError
}), jsxRuntime.jsx(FieldWarnings__default["default"], {
id: warningsContainerId,
warnings: this.props.warnings,
isVisible: hasWarning,
renderWarning: this.props.renderWarning
})]
})
});
}
}], [{
key: "toFieldErrors",
value:
/**
* Use this function to convert the Formik `errors` object type to
* our custom field errors type.
* This is primarly useful when using TypeScript.
*/
function toFieldErrors(errors) {
return errors;
}
}]);
}(react.Component);
DateTimeField.displayName = 'DateTimeField';
DateTimeField.defaultProps = {
horizontalConstraint: 'scale'
};
DateTimeField.getDerivedStateFromProps = (props, state) => ({
id: utils.getFieldId(props, state, sequentialId)
});
var DateTimeField$1 = DateTimeField;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.1.0";
exports["default"] = DateTimeField$1;
exports.version = version;