react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
300 lines (294 loc) • 10.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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"];
import React, { useRef, useState, useContext } from 'react';
import classnames from 'classnames';
import dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import { Button } from './Button';
import { FormElement } from './FormElement';
import { Input } from './Input';
import { Datepicker } from './Datepicker';
import { ComponentSettingsContext } from './ComponentSettings';
import { AutoAlign } from './AutoAlign';
import { isElInChildren } from './util';
import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
import { createFC } from './common';
/**
*
*/
dayjs.extend(localizedFormat);
/**
*
*/
/**
*
*/
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 = useRef(null);
var elementRef = useMergeRefs([elRef, autoAlignContentRef, elementRef_]);
var _alignment = _slicedToArray(alignment, 2),
vertAlign = _alignment[0],
align = _alignment[1];
var datepickerClassNames = classnames(className, 'slds-dropdown', align ? "slds-dropdown_".concat(align) : undefined, vertAlign ? "slds-dropdown_".concat(vertAlign) : undefined);
return /*#__PURE__*/React.createElement(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 = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement(AutoAlign, {
triggerSelector: ".slds-dropdown-trigger",
alignmentStyle: "menu",
portalClassName: portalClassName,
align: align
}, function (injectedProps) {
return /*#__PURE__*/React.createElement(DatepickerDropdownInner, _extends({}, props, injectedProps));
});
};
/**
*
*/
/**
*
*/
export var DateInput = 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 = _objectWithoutProperties(props, _excluded2);
var _useControlledValue = useControlledValue(opened_, defaultOpened !== null && defaultOpened !== void 0 ? defaultOpened : false),
_useControlledValue2 = _slicedToArray(_useControlledValue, 2),
opened = _useControlledValue2[0],
setOpened = _useControlledValue2[1];
var _useControlledValue3 = useControlledValue(value_, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
_useControlledValue4 = _slicedToArray(_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 = dayjs(value !== null && value !== void 0 ? value : undefined, valueFormat);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
inputValue_ = _useState2[0],
setInputValue = _useState2[1];
var inputValue = inputValue_ != null ? inputValue_ : value != null && dvalue.isValid() ? dvalue.format(inputValueFormat) : '';
var elRef = useRef(null);
var elementRef = useMergeRefs([elRef, elementRef_]);
var inputElRef = useRef(null);
var inputRef = useMergeRefs([inputElRef, inputRef_]);
var datepickerElRef = useRef(null);
var datepickerRef = useMergeRefs([datepickerElRef, datepickerRef_]);
var _useContext = useContext(ComponentSettingsContext),
getActiveElement = _useContext.getActiveElement;
var onChangeValue = useEventCallback(function (newValue) {
if (newValue !== value) {
onValueChange === null || onValueChange === void 0 || onValueChange(newValue, value);
setValue(newValue);
}
});
var setValueFromInput = useEventCallback(function (inputValue) {
var newValue = value;
if (!inputValue) {
newValue = '';
} else {
var _dvalue = dayjs(inputValue, parsingFormats);
if (_dvalue.isValid()) {
newValue = _dvalue.format(valueFormat);
} else {
newValue = '';
}
}
onChangeValue(newValue);
setInputValue(null);
});
var isFocusedInComponent = useEventCallback(function () {
var targetEl = getActiveElement();
return isElInChildren(elRef.current, targetEl) || isElInChildren(datepickerElRef.current, targetEl);
});
var showDatepicker = useEventCallback(function () {
var newValue = value;
if (inputValue != null) {
var _dvalue2 = dayjs(inputValue, parsingFormats);
if (_dvalue2.isValid()) {
newValue = _dvalue2.format(valueFormat);
}
}
setOpened(true);
onChangeValue(newValue);
});
var onDateIconClick = useEventCallback(function () {
var _inputElRef$current;
(_inputElRef$current = inputElRef.current) === null || _inputElRef$current === void 0 || _inputElRef$current.focus();
setTimeout(function () {
showDatepicker();
}, 10);
});
var onInputKeyDown = 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 = useEventCallback(function (e) {
var inputValue = e.target.value;
setInputValue(inputValue);
onChange === null || onChange === void 0 || onChange(e);
});
var onInputBlur = 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 = useEventCallback(function (dvalue) {
var value = dayjs(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 = useEventCallback(function () {
setOpened(false);
setTimeout(function () {
if (!isFocusedInComponent()) {
onBlur === null || onBlur === void 0 || onBlur();
onComplete === null || onComplete === void 0 || onComplete();
}
}, 500);
});
var onDatepickerClose = 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.createElement(FormElement, formElemProps, /*#__PURE__*/React.createElement("div", {
className: classnames(className, 'slds-dropdown-trigger', 'slds-dropdown-trigger_click', {
'slds-is-open': opened
})
}, /*#__PURE__*/React.createElement("div", {
className: "slds-input-has-icon slds-input-has-icon_right"
}, /*#__PURE__*/React.createElement(Input, _extends({
inputRef: inputRef
}, rprops, {
id: id,
value: inputValue,
onKeyDown: onInputKeyDown,
onChange: onInputChange,
onBlur: onInputBlur
})), /*#__PURE__*/React.createElement(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.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