@commercetools-uikit/date-time-field
Version:
A controlled date time input component for single date, with validation states and a label.
142 lines (138 loc) • 7.79 kB
JavaScript
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import { isValidElement, Component } from 'react';
import { createSequentialId, warning, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
import Constraints from '@commercetools-uikit/constraints';
import Spacings from '@commercetools-uikit/spacings';
import FieldLabel from '@commercetools-uikit/field-label';
import DateTimeInput from '@commercetools-uikit/date-time-input';
import FieldErrors from '@commercetools-uikit/field-errors';
import FieldWarnings from '@commercetools-uikit/field-warnings';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
const sequentialId = createSequentialId('date-time-field-');
const hasErrors = errors => {
var _context;
return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
};
const hasWarnings = warnings => {
var _context2;
return warnings && _someInstanceProperty(_context2 = _Object$values(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" ? 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" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/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 jsx(Constraints.Horizontal, {
max: this.props.horizontalConstraint,
children: jsxs(Spacings.Stack, {
scale: "xs",
children: [jsx(FieldLabel, {
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
}), jsx(DateTimeInput, _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"
}, filterDataAttributes(this.props)), {}, {
"aria-invalid": hasError,
"aria-errormessage": errorsContainerId,
defaultDaySelectionTime: this.props.defaultDaySelectionTime
})), jsx(FieldErrors, {
id: errorsContainerId,
errors: this.props.errors,
isVisible: hasError,
renderError: this.props.renderError
}), jsx(FieldWarnings, {
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;
}
}]);
}(Component);
DateTimeField.displayName = 'DateTimeField';
DateTimeField.defaultProps = {
horizontalConstraint: 'scale'
};
DateTimeField.getDerivedStateFromProps = (props, state) => ({
id: getFieldId(props, state, sequentialId)
});
var DateTimeField$1 = DateTimeField;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.6.4";
export { DateTimeField$1 as default, version };