wix-style-react
Version:
wix-style-react
205 lines (204 loc) • 8.14 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _wixDesignSystemsLocaleUtils = require("wix-design-systems-locale-utils");
var _Input = _interopRequireDefault(require("../../Input"));
var _context = require("../../WixStyleReactEnvironmentProvider/context");
var _utils = require("./utils");
var _constants = require("./constants");
var _excluded = ["customInput", "focusOnClearClick", "onChange", "status", "statusMessage", "validate"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/DatePicker/DateInput/DateInput.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
class DateInput extends _react.default.PureComponent {
constructor(props) {
super(props);
this._getFormattedDate = value => {
var {
dateStyle
} = this.props;
if (!value) {
return '';
}
if (typeof value === 'string') {
return value;
}
if (dateStyle === 'medium') {
return _wixDesignSystemsLocaleUtils.dateTimeFormat.getMediumDate(this._getLocale(), value);
}
return _wixDesignSystemsLocaleUtils.dateTimeFormat.getShortDate(this._getLocale(), value);
};
this._handleBlur = () => {
var date = (0, _utils.parseStrictInputValue)(this.state.inputValue, this.props.dateStyle, this._getLocale());
if (date.parsedDate) {
this.setState({
inputValue: this._getFormattedDate(date.parsedDate)
});
}
if (this.props.validate || this.props.onValidate) {
this._handleValidation(date);
}
if (this.props.onBlur) {
this.props.onBlur();
}
};
this._handleChange = event => {
this.setState({
inputValue: event.target.value
});
var date = (0, _utils.parseDate)(event.target.value, this.props.dateStyle, this._getLocale());
if (date) {
if (this.props.onChange) {
this.props.onChange({
dateVal: date
});
}
}
};
this._handleValidation = date => {
var validationType = 'valid';
if (!date.parsedDate) {
validationType = 'formatError';
this.setState({
validationType,
statusMessage: "Invalid date. Please match \"".concat(date.dateFormat, "\" format")
});
} else if (this.props.excludePastDates && date.parsedDate && date.parsedDate.setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) {
validationType = 'outOfBoundsError';
this.setState({
validationType,
statusMessage: 'Only today and future dates are allowed'
});
} else {
this.setState({
validationType,
statusMessage: undefined
});
}
if (this.props.onValidate) {
this.props.onValidate({
validationType,
format: validationType !== 'valid' ? date.dateFormat : undefined,
value: this.state.inputValue
});
}
};
this._handleClear = event => {
this.setState({
inputValue: ''
});
if (this.props.onClear) {
this.props.onClear(event);
}
};
this._handleKeyDown = event => {
var date = (0, _utils.parseDate)(this.state.inputValue, this.props.dateStyle, this._getLocale());
this.props.onKeyDown(event, date);
};
this.state = {
validationType: 'valid',
inputValue: '',
statusMessage: undefined
};
}
componentDidMount() {
this.setState({
inputValue: this._getFormattedDate(this.props.value)
});
}
componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value) {
this.setState({
inputValue: this._getFormattedDate(this.props.value)
});
if (this.state.validationType !== 'valid') {
this.setState({
validationType: 'valid',
statusMessage: undefined
});
}
}
}
_getLocale() {
return this.props.locale || this.context.locale || 'en';
}
render() {
var _this$props = this.props,
{
customInput,
focusOnClearClick,
onChange,
status,
statusMessage,
validate
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var inputProps = _objectSpread(_objectSpread({
focusOnClearClick: !!focusOnClearClick,
autoSelect: false,
prefix: /*#__PURE__*/_react.default.createElement(_Input.default.IconAffix, {
dataHook: _constants.dataHooks.icon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Date, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 11
}
})),
status: validate && this.state.validationType !== 'valid' && !status ? 'error' : status,
statusMessage: validate && !statusMessage ? this.state.statusMessage : statusMessage
}, rest), {}, {
value: this.state.inputValue,
onBlur: this._handleBlur,
onChange: this._handleChange,
onClear: this.props.onClear ? this._handleClear : undefined,
onKeyDown: this._handleKeyDown,
ariaLabel: this.state.inputValue || this.props.placeholder
}, customInput ? customInput.props : {});
return /*#__PURE__*/_react.default.cloneElement(customInput || /*#__PURE__*/_react.default.createElement(_Input.default, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 46
}
}), inputProps);
}
}
DateInput.displayName = 'DateInput';
DateInput.contextType = _context.WixStyleReactEnvironmentContext;
DateInput.propTypes = _objectSpread(_objectSpread({}, _Input.default.propTypes), {}, {
/** The selected date */
value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
/** Instance locale */
locale: _propTypes.default.oneOf(_wixDesignSystemsLocaleUtils.SupportedWixLocales),
/** Sets date format of locale */
dateStyle: _propTypes.default.oneOf(['short', 'medium']),
/** Specifies whether to validate the input */
validate: _propTypes.default.bool,
/** Defines a callback function which is called on cases when date is validated. */
onValidate: _propTypes.default.func,
/** Specifies whether past dates should show validation error. Validate prop must be true to use this feature */
excludePastDates: _propTypes.default.bool,
/** When provided, hover will display a tooltip over clear button */
clearButtonTooltipContent: _propTypes.default.node,
/** Tooltip props for clear buttons */
clearButtonTooltipProps: _propTypes.default.node,
/** Specifies whether focus input after clear click */
focusOnClearClick: _propTypes.default.bool
});
var _default = exports.default = DateInput;
//# sourceMappingURL=DateInput.js.map