react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
309 lines (303 loc) • 12.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DateInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
var _Button = require("./Button");
var _FormElement = require("./FormElement");
var _Input = require("./Input");
var _Datepicker = require("./Datepicker");
var _ComponentSettings = require("./ComponentSettings");
var _AutoAlign = require("./AutoAlign");
var _util = require("./util");
var _hooks = require("./hooks");
var _common = require("./common");
var _excluded = ["portalClassName", "align"],
_excluded2 = ["id", "opened", "defaultOpened", "value", "defaultValue", "dateFormat", "parsingFormats", "includeTime", "className", "cols", "label", "required", "error", "menuAlign", "minDate", "maxDate", "extensionRenderer", "tooltip", "tooltipIcon", "elementRef", "inputRef", "datepickerRef", "onChange", "onValueChange", "onKeyDown", "onBlur", "onComplete"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
*
*/
_dayjs["default"].extend(_localizedFormat["default"]);
/**
*
*/
/**
*
*/
var DatepickerDropdownInner = function DatepickerDropdownInner(props) {
var className = props.className,
alignment = props.alignment,
dateValue = props.dateValue,
minDate = props.minDate,
maxDate = props.maxDate,
extensionRenderer = props.extensionRenderer,
elementRef_ = props.elementRef,
autoAlignContentRef = props.autoAlignContentRef,
onSelect = props.onSelect,
onBlur = props.onBlur,
onClose = props.onClose;
var elRef = (0, _react.useRef)(null);
var elementRef = (0, _hooks.useMergeRefs)([elRef, autoAlignContentRef, elementRef_]);
var _alignment = (0, _slicedToArray2["default"])(alignment, 2),
vertAlign = _alignment[0],
align = _alignment[1];
var datepickerClassNames = (0, _classnames["default"])(className, 'slds-dropdown', align ? "slds-dropdown_".concat(align) : undefined, vertAlign ? "slds-dropdown_".concat(vertAlign) : undefined);
return /*#__PURE__*/_react["default"].createElement(_Datepicker.Datepicker, {
elementRef: elementRef,
className: datepickerClassNames,
selectedDate: dateValue,
autoFocus: true,
minDate: minDate,
maxDate: maxDate,
extensionRenderer: extensionRenderer,
onSelect: onSelect,
onBlur: onBlur,
onClose: onClose
});
};
/**
*
*/
var DatepickerDropdown = function DatepickerDropdown(_ref) {
var portalClassName = _ref.portalClassName,
align = _ref.align,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return /*#__PURE__*/_react["default"].createElement(_AutoAlign.AutoAlign, {
triggerSelector: ".slds-dropdown-trigger",
alignmentStyle: "menu",
portalClassName: portalClassName,
align: align
}, function (injectedProps) {
return /*#__PURE__*/_react["default"].createElement(DatepickerDropdownInner, (0, _extends2["default"])({}, props, injectedProps));
});
};
/**
*
*/
/**
*
*/
var DateInput = exports.DateInput = (0, _common.createFC)(function (props) {
var id = props.id,
opened_ = props.opened,
defaultOpened = props.defaultOpened,
value_ = props.value,
defaultValue = props.defaultValue,
dateFormat = props.dateFormat,
parsingFormats_ = props.parsingFormats,
includeTime = props.includeTime,
className = props.className,
cols = props.cols,
label = props.label,
required = props.required,
error = props.error,
menuAlign = props.menuAlign,
minDate = props.minDate,
maxDate = props.maxDate,
extensionRenderer = props.extensionRenderer,
tooltip = props.tooltip,
tooltipIcon = props.tooltipIcon,
elementRef_ = props.elementRef,
inputRef_ = props.inputRef,
datepickerRef_ = props.datepickerRef,
onChange = props.onChange,
onValueChange = props.onValueChange,
onKeyDown = props.onKeyDown,
onBlur = props.onBlur,
onComplete = props.onComplete,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded2);
var _useControlledValue = (0, _hooks.useControlledValue)(opened_, defaultOpened !== null && defaultOpened !== void 0 ? defaultOpened : false),
_useControlledValue2 = (0, _slicedToArray2["default"])(_useControlledValue, 2),
opened = _useControlledValue2[0],
setOpened = _useControlledValue2[1];
var _useControlledValue3 = (0, _hooks.useControlledValue)(value_, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
_useControlledValue4 = (0, _slicedToArray2["default"])(_useControlledValue3, 2),
value = _useControlledValue4[0],
setValue = _useControlledValue4[1];
var valueFormat = includeTime ? 'YYYY-MM-DDTHH:mm:ss.SSSZ' : 'YYYY-MM-DD';
var inputValueFormat = dateFormat || (includeTime ? 'L HH:mm' : 'L');
var parsingFormats = parsingFormats_ !== null && parsingFormats_ !== void 0 ? parsingFormats_ : [inputValueFormat];
var dvalue = (0, _dayjs["default"])(value !== null && value !== void 0 ? value : undefined, valueFormat);
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
inputValue_ = _useState2[0],
setInputValue = _useState2[1];
var inputValue = inputValue_ != null ? inputValue_ : value != null && dvalue.isValid() ? dvalue.format(inputValueFormat) : '';
var elRef = (0, _react.useRef)(null);
var elementRef = (0, _hooks.useMergeRefs)([elRef, elementRef_]);
var inputElRef = (0, _react.useRef)(null);
var inputRef = (0, _hooks.useMergeRefs)([inputElRef, inputRef_]);
var datepickerElRef = (0, _react.useRef)(null);
var datepickerRef = (0, _hooks.useMergeRefs)([datepickerElRef, datepickerRef_]);
var _useContext = (0, _react.useContext)(_ComponentSettings.ComponentSettingsContext),
getActiveElement = _useContext.getActiveElement;
var onChangeValue = (0, _hooks.useEventCallback)(function (newValue) {
if (newValue !== value) {
onValueChange === null || onValueChange === void 0 || onValueChange(newValue, value);
setValue(newValue);
}
});
var setValueFromInput = (0, _hooks.useEventCallback)(function (inputValue) {
var newValue = value;
if (!inputValue) {
newValue = '';
} else {
var _dvalue = (0, _dayjs["default"])(inputValue, parsingFormats);
if (_dvalue.isValid()) {
newValue = _dvalue.format(valueFormat);
} else {
newValue = '';
}
}
onChangeValue(newValue);
setInputValue(null);
});
var isFocusedInComponent = (0, _hooks.useEventCallback)(function () {
var targetEl = getActiveElement();
return (0, _util.isElInChildren)(elRef.current, targetEl) || (0, _util.isElInChildren)(datepickerElRef.current, targetEl);
});
var showDatepicker = (0, _hooks.useEventCallback)(function () {
var newValue = value;
if (inputValue != null) {
var _dvalue2 = (0, _dayjs["default"])(inputValue, parsingFormats);
if (_dvalue2.isValid()) {
newValue = _dvalue2.format(valueFormat);
}
}
setOpened(true);
onChangeValue(newValue);
});
var onDateIconClick = (0, _hooks.useEventCallback)(function () {
var _inputElRef$current;
(_inputElRef$current = inputElRef.current) === null || _inputElRef$current === void 0 || _inputElRef$current.focus();
setTimeout(function () {
showDatepicker();
}, 10);
});
var onInputKeyDown = (0, _hooks.useEventCallback)(function (e) {
if (e.keyCode === 13) {
// return key
e.preventDefault();
e.stopPropagation();
if (e.currentTarget.value !== undefined) {
setValueFromInput(e.currentTarget.value);
}
if (onComplete) {
setTimeout(function () {
onComplete === null || onComplete === void 0 || onComplete();
}, 10);
}
} else if (e.keyCode === 40) {
// down key
showDatepicker();
e.preventDefault();
e.stopPropagation();
}
onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
});
var onInputChange = (0, _hooks.useEventCallback)(function (e) {
var inputValue = e.target.value;
setInputValue(inputValue);
onChange === null || onChange === void 0 || onChange(e);
});
var onInputBlur = (0, _hooks.useEventCallback)(function (e) {
if (e.target.tagName.toLowerCase() === 'input') {
setValueFromInput(e.target.value);
}
setTimeout(function () {
if (!isFocusedInComponent()) {
onBlur === null || onBlur === void 0 || onBlur();
onComplete === null || onComplete === void 0 || onComplete();
}
}, 10);
});
var onDatepickerSelect = (0, _hooks.useEventCallback)(function (dvalue) {
var value = (0, _dayjs["default"])(dvalue).format(valueFormat);
onChangeValue(value);
setInputValue(null);
setTimeout(function () {
setOpened(false);
var inputEl = inputElRef.current;
if (inputEl) {
inputEl.focus();
inputEl.select();
}
onComplete === null || onComplete === void 0 || onComplete();
}, 200);
});
var onDatepickerBlur = (0, _hooks.useEventCallback)(function () {
setOpened(false);
setTimeout(function () {
if (!isFocusedInComponent()) {
onBlur === null || onBlur === void 0 || onBlur();
onComplete === null || onComplete === void 0 || onComplete();
}
}, 500);
});
var onDatepickerClose = (0, _hooks.useEventCallback)(function () {
setOpened(false);
var inputEl = inputElRef.current;
if (inputEl) {
inputEl.focus();
inputEl.select();
}
});
var formElemProps = {
controlId: id,
cols: cols,
label: label,
required: required,
error: error,
tooltip: tooltip,
tooltipIcon: tooltipIcon,
elementRef: elementRef
};
return /*#__PURE__*/_react["default"].createElement(_FormElement.FormElement, formElemProps, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(className, 'slds-dropdown-trigger', 'slds-dropdown-trigger_click', {
'slds-is-open': opened
})
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-input-has-icon slds-input-has-icon_right"
}, /*#__PURE__*/_react["default"].createElement(_Input.Input, (0, _extends2["default"])({
inputRef: inputRef
}, rprops, {
id: id,
value: inputValue,
onKeyDown: onInputKeyDown,
onChange: onInputChange,
onBlur: onInputBlur
})), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
type: "icon",
icon: "event",
disabled: props.disabled,
className: "slds-input__icon slds-input__icon_right",
tabIndex: -1,
onClick: props.disabled ? undefined : onDateIconClick,
onBlur: onInputBlur
})), opened ? /*#__PURE__*/_react["default"].createElement(DatepickerDropdown, {
portalClassName: className,
elementRef: datepickerRef,
dateValue: dvalue.isValid() ? dvalue.format('YYYY-MM-DD') : undefined,
minDate: minDate,
maxDate: maxDate,
align: menuAlign,
extensionRenderer: extensionRenderer,
onBlur: onDatepickerBlur,
onSelect: onDatepickerSelect,
onClose: onDatepickerClose
}) : undefined));
}, {
isFormElement: true
});
//# sourceMappingURL=DateInput.js.map