@elliemae/ds-form 3.5.0-rc.9 → 3.5.1-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/CheckboxGroup/DSCheckboxGroup.js +31 -27
- package/dist/cjs/CheckboxGroup/DSCheckboxGroup.js.map +1 -1
- package/dist/cjs/ComboBoxFreeSolo/ComboBoxFreeSolo.js +2 -2
- package/dist/cjs/ComboBoxFreeSolo/ComboBoxFreeSolo.js.map +2 -2
- package/dist/cjs/ComboBoxFreeSolo/components/MultiValueLabel.js +13 -5
- package/dist/cjs/ComboBoxFreeSolo/components/MultiValueLabel.js.map +2 -2
- package/dist/cjs/ComboBoxFreeSolo/components/MultiValueRemove.js +7 -4
- package/dist/cjs/ComboBoxFreeSolo/components/MultiValueRemove.js.map +2 -2
- package/dist/cjs/ComboBoxFreeSolo/components/SingleValue.js +6 -5
- package/dist/cjs/ComboBoxFreeSolo/components/SingleValue.js.map +2 -2
- package/dist/cjs/ComboBoxFreeSolo/components/SingleValueRemove.js +14 -13
- package/dist/cjs/ComboBoxFreeSolo/components/SingleValueRemove.js.map +2 -2
- package/dist/cjs/DateInput/DSDateInput.js +4 -3
- package/dist/cjs/DateInput/DSDateInput.js.map +2 -2
- package/dist/cjs/DateInput/components/DateInputImpl.js +19 -17
- package/dist/cjs/DateInput/components/DateInputImpl.js.map +2 -2
- package/dist/cjs/DateInput/components/DateInputs.js +15 -12
- package/dist/cjs/DateInput/components/DateInputs.js.map +1 -1
- package/dist/cjs/DateInputV2/components/DSDateInput.js +3 -3
- package/dist/cjs/DateInputV2/components/DSDateInput.js.map +2 -2
- package/dist/cjs/DateInputV2/components/DateInputs.js +19 -13
- package/dist/cjs/DateInputV2/components/DateInputs.js.map +1 -1
- package/dist/cjs/ExpandableInput/DSExpandableInput.js +5 -4
- package/dist/cjs/ExpandableInput/DSExpandableInput.js.map +2 -2
- package/dist/cjs/ExpandableInput/ExpandableInputImpl.js +16 -13
- package/dist/cjs/ExpandableInput/ExpandableInputImpl.js.map +1 -1
- package/dist/cjs/FloatingLabelInput/DSFloatingLabelInput.js +2 -2
- package/dist/cjs/FloatingLabelInput/DSFloatingLabelInput.js.map +2 -2
- package/dist/cjs/FloatingLabelInput/FloatingLabelInputImpl.js +31 -16
- package/dist/cjs/FloatingLabelInput/FloatingLabelInputImpl.js.map +1 -1
- package/dist/cjs/FormItem/DSFormItemLayout.js +64 -34
- package/dist/cjs/FormItem/DSFormItemLayout.js.map +2 -2
- package/dist/cjs/FormItem/Error/DSError.js +5 -4
- package/dist/cjs/FormItem/Error/DSError.js.map +2 -2
- package/dist/cjs/FormItem/Feedback.js +5 -4
- package/dist/cjs/FormItem/Feedback.js.map +2 -2
- package/dist/cjs/FormItem/Label/DSLabel.js +15 -9
- package/dist/cjs/FormItem/Label/DSLabel.js.map +2 -2
- package/dist/cjs/InputGroup/AddonWrapper.js +14 -4
- package/dist/cjs/InputGroup/AddonWrapper.js.map +2 -2
- package/dist/cjs/InputGroup/DSInputGroup.js +5 -4
- package/dist/cjs/InputGroup/DSInputGroup.js.map +2 -2
- package/dist/cjs/InputMask/DSInputMask.js +3 -2
- package/dist/cjs/InputMask/DSInputMask.js.map +2 -2
- package/dist/cjs/InputMask/DSInputMaskDeprecated.js +2 -1
- package/dist/cjs/InputMask/DSInputMaskDeprecated.js.map +1 -1
- package/dist/cjs/InputMask/mask_types/DateInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/DateInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/DateTimeInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/DateTimeInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/DictionaryInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/DictionaryInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/NumberInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/NumberInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/PhoneInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/PhoneInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/PhoneInternationalInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/PhoneInternationalInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/SsnInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/SsnInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/UsZipCodeInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/UsZipCodeInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/ZipCodeSearchInputMask.js +3 -2
- package/dist/cjs/InputMask/mask_types/ZipCodeSearchInputMask.js.map +2 -2
- package/dist/cjs/InputMask/mask_types/index.js +11 -11
- package/dist/cjs/InputMask/mask_types/index.js.map +2 -2
- package/dist/cjs/InputProtected/DSInputProtected.js +34 -30
- package/dist/cjs/InputProtected/DSInputProtected.js.map +2 -2
- package/dist/cjs/LargeInputText/DSLargeInputText.js +49 -40
- package/dist/cjs/LargeInputText/DSLargeInputText.js.map +2 -2
- package/dist/cjs/Radio/Circle.js +10 -9
- package/dist/cjs/Radio/Circle.js.map +2 -2
- package/dist/cjs/Radio/DSRadio.js +61 -48
- package/dist/cjs/Radio/DSRadio.js.map +2 -2
- package/dist/cjs/RadioGroup/DSRadioGroup.js +32 -28
- package/dist/cjs/RadioGroup/DSRadioGroup.js.map +1 -1
- package/dist/cjs/RequiredMark/RequiredMark.js +9 -7
- package/dist/cjs/RequiredMark/RequiredMark.js.map +2 -2
- package/dist/cjs/TimeInput/DSTimeInput.js +3 -3
- package/dist/cjs/TimeInput/DSTimeInput.js.map +2 -2
- package/dist/cjs/TimeInput/TimeInputImpl.js +17 -15
- package/dist/cjs/TimeInput/TimeInputImpl.js.map +2 -2
- package/dist/cjs/TimeInput/TimeInputs.js +16 -13
- package/dist/cjs/TimeInput/TimeInputs.js.map +2 -2
- package/dist/cjs/Toggle/DSToggle.js +2 -2
- package/dist/cjs/Toggle/DSToggle.js.map +2 -2
- package/dist/cjs/Toggle/DSToggleImpl.js +2 -1
- package/dist/cjs/Toggle/DSToggleImpl.js.map +1 -1
- package/dist/cjs/Toggle/DSToggleRender.js +42 -34
- package/dist/cjs/Toggle/DSToggleRender.js.map +2 -2
- package/dist/esm/CheckboxGroup/DSCheckboxGroup.js +31 -27
- package/dist/esm/CheckboxGroup/DSCheckboxGroup.js.map +1 -1
- package/dist/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js +2 -2
- package/dist/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js.map +2 -2
- package/dist/esm/ComboBoxFreeSolo/components/MultiValueLabel.js +13 -5
- package/dist/esm/ComboBoxFreeSolo/components/MultiValueLabel.js.map +2 -2
- package/dist/esm/ComboBoxFreeSolo/components/MultiValueRemove.js +7 -4
- package/dist/esm/ComboBoxFreeSolo/components/MultiValueRemove.js.map +2 -2
- package/dist/esm/ComboBoxFreeSolo/components/SingleValue.js +6 -5
- package/dist/esm/ComboBoxFreeSolo/components/SingleValue.js.map +2 -2
- package/dist/esm/ComboBoxFreeSolo/components/SingleValueRemove.js +14 -13
- package/dist/esm/ComboBoxFreeSolo/components/SingleValueRemove.js.map +2 -2
- package/dist/esm/DateInput/DSDateInput.js +4 -3
- package/dist/esm/DateInput/DSDateInput.js.map +2 -2
- package/dist/esm/DateInput/components/DateInputImpl.js +19 -17
- package/dist/esm/DateInput/components/DateInputImpl.js.map +2 -2
- package/dist/esm/DateInput/components/DateInputs.js +15 -12
- package/dist/esm/DateInput/components/DateInputs.js.map +1 -1
- package/dist/esm/DateInputV2/components/DSDateInput.js +3 -3
- package/dist/esm/DateInputV2/components/DSDateInput.js.map +2 -2
- package/dist/esm/DateInputV2/components/DateInputs.js +19 -13
- package/dist/esm/DateInputV2/components/DateInputs.js.map +1 -1
- package/dist/esm/ExpandableInput/DSExpandableInput.js +5 -4
- package/dist/esm/ExpandableInput/DSExpandableInput.js.map +2 -2
- package/dist/esm/ExpandableInput/ExpandableInputImpl.js +16 -13
- package/dist/esm/ExpandableInput/ExpandableInputImpl.js.map +1 -1
- package/dist/esm/FloatingLabelInput/DSFloatingLabelInput.js +2 -2
- package/dist/esm/FloatingLabelInput/DSFloatingLabelInput.js.map +2 -2
- package/dist/esm/FloatingLabelInput/FloatingLabelInputImpl.js +31 -16
- package/dist/esm/FloatingLabelInput/FloatingLabelInputImpl.js.map +1 -1
- package/dist/esm/FormItem/DSFormItemLayout.js +64 -34
- package/dist/esm/FormItem/DSFormItemLayout.js.map +2 -2
- package/dist/esm/FormItem/Error/DSError.js +5 -4
- package/dist/esm/FormItem/Error/DSError.js.map +2 -2
- package/dist/esm/FormItem/Feedback.js +5 -4
- package/dist/esm/FormItem/Feedback.js.map +2 -2
- package/dist/esm/FormItem/Label/DSLabel.js +15 -9
- package/dist/esm/FormItem/Label/DSLabel.js.map +2 -2
- package/dist/esm/InputGroup/AddonWrapper.js +14 -4
- package/dist/esm/InputGroup/AddonWrapper.js.map +2 -2
- package/dist/esm/InputGroup/DSInputGroup.js +5 -4
- package/dist/esm/InputGroup/DSInputGroup.js.map +2 -2
- package/dist/esm/InputMask/DSInputMask.js +3 -2
- package/dist/esm/InputMask/DSInputMask.js.map +2 -2
- package/dist/esm/InputMask/DSInputMaskDeprecated.js +2 -1
- package/dist/esm/InputMask/DSInputMaskDeprecated.js.map +1 -1
- package/dist/esm/InputMask/mask_types/DateInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/DateInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/DateTimeInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/DateTimeInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/DictionaryInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/DictionaryInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/NumberInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/NumberInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/PhoneInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/PhoneInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/PhoneInternationalInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/PhoneInternationalInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/SsnInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/SsnInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/UsZipCodeInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/UsZipCodeInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/ZipCodeSearchInputMask.js +3 -2
- package/dist/esm/InputMask/mask_types/ZipCodeSearchInputMask.js.map +2 -2
- package/dist/esm/InputMask/mask_types/index.js +11 -11
- package/dist/esm/InputMask/mask_types/index.js.map +2 -2
- package/dist/esm/InputProtected/DSInputProtected.js +34 -30
- package/dist/esm/InputProtected/DSInputProtected.js.map +2 -2
- package/dist/esm/LargeInputText/DSLargeInputText.js +49 -40
- package/dist/esm/LargeInputText/DSLargeInputText.js.map +2 -2
- package/dist/esm/Radio/Circle.js +10 -9
- package/dist/esm/Radio/Circle.js.map +2 -2
- package/dist/esm/Radio/DSRadio.js +61 -48
- package/dist/esm/Radio/DSRadio.js.map +2 -2
- package/dist/esm/RadioGroup/DSRadioGroup.js +32 -28
- package/dist/esm/RadioGroup/DSRadioGroup.js.map +1 -1
- package/dist/esm/RequiredMark/RequiredMark.js +9 -7
- package/dist/esm/RequiredMark/RequiredMark.js.map +2 -2
- package/dist/esm/TimeInput/DSTimeInput.js +3 -3
- package/dist/esm/TimeInput/DSTimeInput.js.map +2 -2
- package/dist/esm/TimeInput/TimeInputImpl.js +17 -15
- package/dist/esm/TimeInput/TimeInputImpl.js.map +2 -2
- package/dist/esm/TimeInput/TimeInputs.js +16 -13
- package/dist/esm/TimeInput/TimeInputs.js.map +1 -1
- package/dist/esm/Toggle/DSToggle.js +2 -2
- package/dist/esm/Toggle/DSToggle.js.map +2 -2
- package/dist/esm/Toggle/DSToggleImpl.js +2 -1
- package/dist/esm/Toggle/DSToggleImpl.js.map +1 -1
- package/dist/esm/Toggle/DSToggleRender.js +42 -34
- package/dist/esm/Toggle/DSToggleRender.js.map +2 -2
- package/package.json +12 -12
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useRef, useMemo } from "react";
|
|
3
4
|
import PropTypes from "prop-types";
|
|
4
5
|
import Moment from "moment";
|
|
5
6
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
@@ -34,25 +35,26 @@ const DateInputImpl = ({
|
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
37
|
const visibleInputs = useMemo(() => getVisibleTimeByFormat(format), [format]);
|
|
37
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ jsx(DateInputContainer, {
|
|
38
39
|
className,
|
|
39
40
|
disabled,
|
|
40
41
|
innerRef,
|
|
41
|
-
onClick: handleFocus
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
42
|
+
onClick: handleFocus,
|
|
43
|
+
children: /* @__PURE__ */ jsx(DateInputs, {
|
|
44
|
+
disabled,
|
|
45
|
+
format,
|
|
46
|
+
INTERNAL_V2_NO_MUTATION,
|
|
47
|
+
innerRef: inputContainerRef,
|
|
48
|
+
onBlur,
|
|
49
|
+
onChange,
|
|
50
|
+
onCustomKeyDown: onKeyDown,
|
|
51
|
+
onError,
|
|
52
|
+
time: value,
|
|
53
|
+
yearMaxRange,
|
|
54
|
+
yearMinRange,
|
|
55
|
+
...visibleInputs
|
|
56
|
+
})
|
|
57
|
+
});
|
|
56
58
|
};
|
|
57
59
|
DateInputImpl.propTypes = {
|
|
58
60
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInput/components/DateInputImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport Moment from 'moment';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DateInputs } from './DateInputs';\n\nconst blockName = 'input-time';\n\nconst DateInputContainer = aggregatedClasses('div')(blockName);\n\nconst getVisibleTimeByFormat = (format) => ({\n showMonth: format.indexOf('MM') > -1 || format.indexOf('M') > -1,\n showDay: format.indexOf('DD') > -1 || format.indexOf('D') > -1,\n showYear: format.indexOf('YYYY') > -1,\n});\n\nconst DateInputImpl = ({\n format,\n innerRef,\n onBlur,\n onChange,\n onKeyDown,\n onError,\n className,\n value,\n disabled,\n yearMaxRange,\n yearMinRange,\n onFocus,\n // eslint-disable-next-line react/prop-types\n INTERNAL_V2_NO_MUTATION,\n}) => {\n const inputContainerRef = useRef();\n\n const handleFocus = (e) => {\n onFocus();\n if (!e.target.type) {\n inputContainerRef.current.querySelector('input').focus();\n }\n };\n\n const visibleInputs = useMemo(() => getVisibleTimeByFormat(format), [format]);\n\n return (\n <DateInputContainer className={className} disabled={disabled} innerRef={innerRef} onClick={handleFocus}>\n <DateInputs\n disabled={disabled}\n format={format}\n INTERNAL_V2_NO_MUTATION={INTERNAL_V2_NO_MUTATION}\n innerRef={inputContainerRef}\n onBlur={onBlur}\n onChange={onChange}\n onCustomKeyDown={onKeyDown}\n onError={onError}\n time={value}\n yearMaxRange={yearMaxRange}\n yearMinRange={yearMinRange}\n {...visibleInputs}\n />\n </DateInputContainer>\n );\n};\n\nDateInputImpl.propTypes = {\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n onBlur: PropTypes.bool,\n onChange: PropTypes.func,\n onKeyDown: PropTypes.func,\n onError: PropTypes.func,\n format: PropTypes.string,\n showMonth: PropTypes.bool,\n className: PropTypes.string,\n showDay: PropTypes.bool,\n showYear: PropTypes.bool,\n step: PropTypes.number,\n onFocus: PropTypes.func,\n yearMaxRange: PropTypes.number,\n disabled: PropTypes.bool,\n yearMinRange: PropTypes.number,\n value: PropTypes.instanceOf(Moment),\n};\n\nexport { DateInputImpl };\nexport default DateInputImpl;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,QAAQ,eAAe;AACvC,OAAO,eAAe;AACtB,OAAO,YAAY;AACnB,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAE3B,MAAM,YAAY;AAElB,MAAM,qBAAqB,kBAAkB,KAAK,EAAE,SAAS;AAE7D,MAAM,yBAAyB,CAAC,YAAY;AAAA,EAC1C,WAAW,OAAO,QAAQ,IAAI,IAAI,MAAM,OAAO,QAAQ,GAAG,IAAI;AAAA,EAC9D,SAAS,OAAO,QAAQ,IAAI,IAAI,MAAM,OAAO,QAAQ,GAAG,IAAI;AAAA,EAC5D,UAAU,OAAO,QAAQ,MAAM,IAAI;AACrC;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AACF,MAAM;AACJ,QAAM,oBAAoB,OAAO;AAEjC,QAAM,cAAc,CAAC,MAAM;AACzB,YAAQ;AACR,QAAI,CAAC,EAAE,OAAO,MAAM;AAClB,wBAAkB,QAAQ,cAAc,OAAO,EAAE,MAAM;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5E,SACE,oBAAC;AAAA,IAAmB;AAAA,IAAsB;AAAA,IAAoB;AAAA,IAAoB,SAAS;AAAA,IACzF,8BAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAG;AAAA,KACN;AAAA,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC;AAAA,EAC3F,QAAQ,UAAU;AAAA,EAClB,UAAU,UAAU;AAAA,EACpB,WAAW,UAAU;AAAA,EACrB,SAAS,UAAU;AAAA,EACnB,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,WAAW,UAAU;AAAA,EACrB,SAAS,UAAU;AAAA,EACnB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,SAAS,UAAU;AAAA,EACnB,cAAc,UAAU;AAAA,EACxB,UAAU,UAAU;AAAA,EACpB,cAAc,UAAU;AAAA,EACxB,OAAO,UAAU,WAAW,MAAM;AACpC;AAGA,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createElement } from "react";
|
|
2
4
|
import React2, { useState, useEffect, useCallback } from "react";
|
|
3
5
|
import PropTypes from "prop-types";
|
|
4
6
|
import Moment from "moment";
|
|
@@ -29,9 +31,10 @@ const YearInput = aggregatedClasses("input")(blockName, "input input-year");
|
|
|
29
31
|
const Divider = aggregatedClasses("span")(blockName, "divider", ({ value }) => ({
|
|
30
32
|
value
|
|
31
33
|
}));
|
|
32
|
-
const DateDivider = ({ content = ":", value = "" }) => /* @__PURE__ */
|
|
33
|
-
value: !!value
|
|
34
|
-
|
|
34
|
+
const DateDivider = ({ content = ":", value = "" }) => /* @__PURE__ */ jsx(Divider, {
|
|
35
|
+
value: !!value,
|
|
36
|
+
children: content
|
|
37
|
+
});
|
|
35
38
|
const DateInputs = ({
|
|
36
39
|
innerRef,
|
|
37
40
|
onBlur,
|
|
@@ -225,7 +228,7 @@ const DateInputs = ({
|
|
|
225
228
|
handleMonthChange(e);
|
|
226
229
|
triggerOnBlur(e, onBlur);
|
|
227
230
|
};
|
|
228
|
-
return /* @__PURE__ */
|
|
231
|
+
return /* @__PURE__ */ createElement(MonthInput, {
|
|
229
232
|
...commonInputProps(digits, onKeyDown, placeholder),
|
|
230
233
|
autocomplete: "off",
|
|
231
234
|
key: "month-input",
|
|
@@ -245,7 +248,7 @@ const DateInputs = ({
|
|
|
245
248
|
handleDayChange(e);
|
|
246
249
|
triggerOnBlur(e, onBlur);
|
|
247
250
|
};
|
|
248
|
-
return /* @__PURE__ */
|
|
251
|
+
return /* @__PURE__ */ createElement(DayInput, {
|
|
249
252
|
...commonInputProps(digits, onKeyDown, placeholder),
|
|
250
253
|
autocomplete: "off",
|
|
251
254
|
key: "day-input",
|
|
@@ -266,7 +269,7 @@ const DateInputs = ({
|
|
|
266
269
|
handleYearChange(e);
|
|
267
270
|
triggerOnBlur(e, onBlur);
|
|
268
271
|
};
|
|
269
|
-
return /* @__PURE__ */
|
|
272
|
+
return /* @__PURE__ */ createElement(YearInput, {
|
|
270
273
|
...commonInputProps(digits, onKeyDown, placeholder),
|
|
271
274
|
autocomplete: "off",
|
|
272
275
|
key: "seconds-input",
|
|
@@ -281,11 +284,10 @@ const DateInputs = ({
|
|
|
281
284
|
const renderDateInputs = () => {
|
|
282
285
|
const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
|
|
283
286
|
const inputsWithDividers = inputs.reduce(
|
|
284
|
-
(acc, input, index) => input ? acc.concat([index ? /* @__PURE__ */
|
|
285
|
-
key: index,
|
|
287
|
+
(acc, input, index) => input ? acc.concat([index ? /* @__PURE__ */ jsx(DateDivider, {
|
|
286
288
|
content: " / ",
|
|
287
289
|
value: input.props.value
|
|
288
|
-
}) : null, input]) : acc,
|
|
290
|
+
}, index) : null, input]) : acc,
|
|
289
291
|
[]
|
|
290
292
|
);
|
|
291
293
|
return [
|
|
@@ -293,9 +295,10 @@ const DateInputs = ({
|
|
|
293
295
|
React2.createElement("span", { key: "span" })
|
|
294
296
|
];
|
|
295
297
|
};
|
|
296
|
-
return /* @__PURE__ */
|
|
297
|
-
innerRef
|
|
298
|
-
|
|
298
|
+
return /* @__PURE__ */ jsx(InputTimesGroup, {
|
|
299
|
+
innerRef,
|
|
300
|
+
children: renderDateInputs()
|
|
301
|
+
});
|
|
299
302
|
};
|
|
300
303
|
DateInputs.propTypes = {
|
|
301
304
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInput/components/DateInputs.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useState, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport Moment from 'moment';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport {\n formatMonth,\n formatDay,\n formatYear,\n getValidTimeNumber,\n setNativeValue,\n parseTimeNumberFromText,\n focusNextInput,\n focusPreviousInput,\n getDateValuesFromTime,\n getNextTimeValue,\n focusNextInputIfNeeded,\n commonInputProps,\n handleCompletedDate,\n triggerOnBlur,\n isTimeCompletelySet,\n} from './utils';\n\nconst blockName = 'input-date-group';\n\nconst InputTimesGroup = aggregatedClasses('div')(blockName);\nconst MonthInput = aggregatedClasses('input')(blockName, 'input input-month');\nconst DayInput = aggregatedClasses('input')(blockName, 'input input-day');\nconst YearInput = aggregatedClasses('input')(blockName, 'input input-year');\nconst Divider = aggregatedClasses('span')(blockName, 'divider', ({ value }) => ({\n value,\n}));\n\n// eslint-disable-next-line react/prop-types\nconst DateDivider = ({ content = ':', value = '' }) => <Divider value={!!value}>{content}</Divider>;\n\nconst DateInputs = ({\n innerRef,\n onBlur,\n onChange,\n onCustomKeyDown,\n onError,\n format = '',\n showMonth = true,\n showDay = true,\n showYear = true,\n step = 1,\n yearMaxRange,\n disabled,\n yearMinRange,\n time,\n // TODO remove and keep `true` behavior ( PUI-4141 )\n INTERNAL_V2_NO_MUTATION, // eslint-disable-line react/prop-types\n}) => {\n const [currentKey, setCurrentKey] = useState('ArrowUp');\n const [month, setMonth] = useState('');\n const [day, setDay] = useState('');\n const [year, setYear] = useState('');\n const prevTime = usePrevious(time);\n const prevFormat = usePrevious(format);\n\n let digits = 2;\n let placeholder = '';\n\n useEffect(() => {\n if (time) {\n const dateValues = getDateValuesFromTime(time, format);\n setMonth(dateValues.month);\n setDay(dateValues.day);\n setYear(dateValues.year);\n }\n }, [format, time]);\n\n useEffect(() => {\n if (!time && prevTime) {\n setMonth('');\n setDay('');\n setYear('');\n onChange('');\n }\n if (time && prevTime && time.format && time.format(format) !== prevTime.format(prevFormat)) {\n const dateValues = getDateValuesFromTime(time, format);\n\n setMonth(dateValues.month);\n setDay(dateValues.day);\n setYear(dateValues.year);\n }\n }, [time, prevTime, format, prevFormat, onChange]);\n\n const isCompletedDate = useCallback(\n () => isTimeCompletelySet({ year, month, day }, { showYear, showMonth, showDay }, { yearMinRange, yearMaxRange }),\n [day, month, showDay, showMonth, showYear, year, yearMaxRange, yearMinRange],\n );\n\n useEffect(() => {\n if (INTERNAL_V2_NO_MUTATION) {\n const dateValues = getDateValuesFromTime(time, format);\n\n if (dateValues.day !== day && isCompletedDate()) {\n onChange(\n handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION),\n );\n } else if (dateValues.month !== month && isCompletedDate()) {\n onChange(\n handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION),\n );\n } else if (dateValues.year !== year && isCompletedDate()) {\n onChange(\n handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION),\n );\n }\n }\n }, [\n INTERNAL_V2_NO_MUTATION,\n day,\n format,\n isCompletedDate,\n month,\n onChange,\n showDay,\n showMonth,\n showYear,\n time,\n year,\n ]);\n\n const triggerChange = () =>\n handleCompletedDate(time, { year, month, day }, { showYear, showMonth, showDay }, INTERNAL_V2_NO_MUTATION);\n\n const handleYearChange = (e) => {\n const { value } = e.target;\n const yearValue = parseTimeNumberFromText(value);\n const yearRange = { min: 1, max: 9999 };\n const nextYear = getValidTimeNumber(yearRange, yearValue, value, onError);\n\n setYear(formatYear(format, nextYear));\n if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {\n onChange(triggerChange());\n }\n focusNextInputIfNeeded(e.target, yearRange.max, nextYear, value, currentKey);\n };\n\n const handleMonthChange = (e) => {\n const { value } = e.target;\n const monthValue = parseTimeNumberFromText(value);\n const monthRange = { min: 1, max: 12 };\n const nextMonth = getValidTimeNumber(monthRange, monthValue, value, onError);\n setMonth(formatMonth(format, nextMonth));\n if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {\n onChange(triggerChange());\n }\n focusNextInputIfNeeded(e.target, monthRange.max, nextMonth, value, currentKey);\n };\n\n const handleDayChange = (e) => {\n const { value } = e.target;\n const dayValue = parseTimeNumberFromText(value);\n const dayRange = { min: 1, max: 31 };\n const nextDay = getValidTimeNumber(dayRange, dayValue, value, onError);\n setDay(formatDay(format, nextDay));\n if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {\n onChange(triggerChange());\n }\n if (value !== day) focusNextInputIfNeeded(e.target, dayRange.max, nextDay, value, currentKey);\n };\n\n // eslint-disable-next-line complexity\n const onKeyDown = (event, shouldIncrementDecrement = true) => {\n const { value, name } = event.target;\n const change = {\n day: (v) => handleDayChange({ target: { value: v } }),\n month: (v) => handleMonthChange({ target: { value: v } }),\n year: (v) => handleYearChange({ target: { value: v } }),\n };\n switch (event.key) {\n case 'ArrowLeft': {\n event.preventDefault();\n focusPreviousInput(event.target);\n break;\n }\n case 'ArrowUp': {\n if (shouldIncrementDecrement) {\n event.preventDefault();\n setCurrentKey(event.key);\n const incrementedValue = getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, true);\n if (INTERNAL_V2_NO_MUTATION) {\n change[name](incrementedValue);\n } else {\n setNativeValue(event.target, incrementedValue);\n }\n }\n break;\n }\n case 'ArrowDown': {\n if (shouldIncrementDecrement) {\n event.preventDefault();\n setCurrentKey(event.key);\n const decrementedValue = getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, false);\n if (INTERNAL_V2_NO_MUTATION) {\n change[name](decrementedValue);\n } else {\n setNativeValue(event.target, decrementedValue);\n }\n }\n break;\n }\n case 'ArrowRight': {\n event.preventDefault();\n focusNextInput(event.target);\n break;\n }\n case 'Backspace': {\n event.preventDefault();\n if (!value) {\n focusPreviousInput(event.target);\n } else {\n // eslint-disable-next-line no-lonely-if\n if (INTERNAL_V2_NO_MUTATION) {\n change[name]('');\n } else {\n setNativeValue(event.target, '');\n }\n }\n break;\n }\n case 'Enter': {\n if (onCustomKeyDown && isCompletedDate()) onCustomKeyDown(event, triggerChange());\n setCurrentKey(null);\n break;\n }\n default:\n if (onCustomKeyDown) onCustomKeyDown(event);\n setCurrentKey(null);\n }\n };\n\n const renderMonthInput = () => {\n if (!showMonth) return null;\n placeholder = 'MM';\n const onMonthInputBlur = (e) => {\n handleMonthChange(e);\n triggerOnBlur(e, onBlur);\n };\n return (\n <MonthInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autocomplete=\"off\"\n key=\"month-input\"\n data-testid=\"month\"\n disabled={disabled}\n name=\"month\"\n onBlur={onMonthInputBlur}\n onChange={handleMonthChange}\n value={month}\n />\n );\n };\n const renderDayInput = () => {\n if (!showDay) return null;\n placeholder = 'DD';\n const onDayInputBlur = (e) => {\n handleDayChange(e);\n triggerOnBlur(e, onBlur);\n };\n return (\n <DayInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autocomplete=\"off\"\n key=\"day-input\"\n data-testid=\"day\"\n disabled={disabled}\n name=\"day\"\n onBlur={onDayInputBlur}\n onChange={handleDayChange}\n value={day}\n />\n );\n };\n const renderYearInput = () => {\n if (!showYear) return null;\n placeholder = 'YY';\n digits = 4;\n const onYearInputBlur = (e) => {\n handleYearChange(e);\n triggerOnBlur(e, onBlur);\n };\n return (\n <YearInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autocomplete=\"off\"\n key=\"seconds-input\"\n data-testid=\"year\"\n disabled={disabled}\n name=\"year\"\n onBlur={onYearInputBlur}\n onChange={handleYearChange}\n value={year}\n />\n );\n };\n\n const renderDateInputs = () => {\n const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n const inputsWithDividers = inputs.reduce(\n (acc, input, index) =>\n input\n ? acc.concat([index ? <DateDivider key={index} content=\" / \" value={input.props.value} /> : null, input])\n : acc,\n [],\n );\n\n return [\n inputsWithDividers,\n React.createElement('span', { key: 'span' }), // hack for next/prev focus\n ];\n };\n\n return <InputTimesGroup innerRef={innerRef}>{renderDateInputs()}</InputTimesGroup>;\n};\n\nDateInputs.propTypes = {\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n onBlur: PropTypes.bool,\n onChange: PropTypes.func,\n onCustomKeyDown: PropTypes.func,\n onError: PropTypes.func,\n format: PropTypes.string,\n showMonth: PropTypes.bool,\n showDay: PropTypes.bool,\n showYear: PropTypes.bool,\n step: PropTypes.number,\n yearMaxRange: PropTypes.number,\n disabled: PropTypes.bool,\n yearMinRange: PropTypes.number,\n time: PropTypes.instanceOf(Moment),\n};\n\nexport { DateInputs };\nexport default DateInputs;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA;AAKA,OAAOA,UAAS,UAAU,WAAW,mBAAmB;AACxD,OAAO,eAAe;AACtB,OAAO,YAAY;AACnB,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,YAAY;AAElB,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,SAAS;AAC1D,MAAM,aAAa,kBAAkB,OAAO,EAAE,WAAW,mBAAmB;AAC5E,MAAM,WAAW,kBAAkB,OAAO,EAAE,WAAW,iBAAiB;AACxE,MAAM,YAAY,kBAAkB,OAAO,EAAE,WAAW,kBAAkB;AAC1E,MAAM,UAAU,kBAAkB,MAAM,EAAE,WAAW,WAAW,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9E;AACF,EAAE;AAGF,MAAM,cAAc,CAAC,EAAE,UAAU,KAAK,QAAQ,GAAG,MAAM,oBAAC;AAAA,EAAQ,OAAO,CAAC,CAAC;AAAA,EAAQ;AAAA,CAAQ;AAEzF,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AACF,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,SAAS;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,WAAW,YAAY,IAAI;AACjC,QAAM,aAAa,YAAY,MAAM;AAErC,MAAI,SAAS;AACb,MAAI,cAAc;AAElB,YAAU,MAAM;AACd,QAAI,MAAM;AACR,YAAM,aAAa,sBAAsB,MAAM,MAAM;AACrD,eAAS,WAAW,KAAK;AACzB,aAAO,WAAW,GAAG;AACrB,cAAQ,WAAW,IAAI;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,UAAU;AACrB,eAAS,EAAE;AACX,aAAO,EAAE;AACT,cAAQ,EAAE;AACV,eAAS,EAAE;AAAA,IACb;AACA,QAAI,QAAQ,YAAY,KAAK,UAAU,KAAK,OAAO,MAAM,MAAM,SAAS,OAAO,UAAU,GAAG;AAC1F,YAAM,aAAa,sBAAsB,MAAM,MAAM;AAErD,eAAS,WAAW,KAAK;AACzB,aAAO,WAAW,GAAG;AACrB,cAAQ,WAAW,IAAI;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,QAAQ,YAAY,QAAQ,CAAC;AAEjD,QAAM,kBAAkB;AAAA,IACtB,MAAM,oBAAoB,EAAE,MAAM,OAAO,IAAI,GAAG,EAAE,UAAU,WAAW,QAAQ,GAAG,EAAE,cAAc,aAAa,CAAC;AAAA,IAChH,CAAC,KAAK,OAAO,SAAS,WAAW,UAAU,MAAM,cAAc,YAAY;AAAA,EAC7E;AAEA,YAAU,MAAM;AACd,QAAI,yBAAyB;AAC3B,YAAM,aAAa,sBAAsB,MAAM,MAAM;AAErD,UAAI,WAAW,QAAQ,OAAO,gBAAgB,GAAG;AAC/C;AAAA,UACE,oBAAoB,MAAM,EAAE,MAAM,OAAO,IAAI,GAAG,EAAE,UAAU,WAAW,QAAQ,GAAG,uBAAuB;AAAA,QAC3G;AAAA,MACF,WAAW,WAAW,UAAU,SAAS,gBAAgB,GAAG;AAC1D;AAAA,UACE,oBAAoB,MAAM,EAAE,MAAM,OAAO,IAAI,GAAG,EAAE,UAAU,WAAW,QAAQ,GAAG,uBAAuB;AAAA,QAC3G;AAAA,MACF,WAAW,WAAW,SAAS,QAAQ,gBAAgB,GAAG;AACxD;AAAA,UACE,oBAAoB,MAAM,EAAE,MAAM,OAAO,IAAI,GAAG,EAAE,UAAU,WAAW,QAAQ,GAAG,uBAAuB;AAAA,QAC3G;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MACpB,oBAAoB,MAAM,EAAE,MAAM,OAAO,IAAI,GAAG,EAAE,UAAU,WAAW,QAAQ,GAAG,uBAAuB;AAE3G,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,YAAY,wBAAwB,KAAK;AAC/C,UAAM,YAAY,EAAE,KAAK,GAAG,KAAK,KAAK;AACtC,UAAM,WAAW,mBAAmB,WAAW,WAAW,OAAO,OAAO;AAExE,YAAQ,WAAW,QAAQ,QAAQ,CAAC;AACpC,QAAI,gBAAgB,KAAK,CAAC,yBAAyB;AACjD,eAAS,cAAc,CAAC;AAAA,IAC1B;AACA,2BAAuB,EAAE,QAAQ,UAAU,KAAK,UAAU,OAAO,UAAU;AAAA,EAC7E;AAEA,QAAM,oBAAoB,CAAC,MAAM;AAC/B,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,aAAa,wBAAwB,KAAK;AAChD,UAAM,aAAa,EAAE,KAAK,GAAG,KAAK,GAAG;AACrC,UAAM,YAAY,mBAAmB,YAAY,YAAY,OAAO,OAAO;AAC3E,aAAS,YAAY,QAAQ,SAAS,CAAC;AACvC,QAAI,gBAAgB,KAAK,CAAC,yBAAyB;AACjD,eAAS,cAAc,CAAC;AAAA,IAC1B;AACA,2BAAuB,EAAE,QAAQ,WAAW,KAAK,WAAW,OAAO,UAAU;AAAA,EAC/E;AAEA,QAAM,kBAAkB,CAAC,MAAM;AAC7B,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,WAAW,wBAAwB,KAAK;AAC9C,UAAM,WAAW,EAAE,KAAK,GAAG,KAAK,GAAG;AACnC,UAAM,UAAU,mBAAmB,UAAU,UAAU,OAAO,OAAO;AACrE,WAAO,UAAU,QAAQ,OAAO,CAAC;AACjC,QAAI,gBAAgB,KAAK,CAAC,yBAAyB;AACjD,eAAS,cAAc,CAAC;AAAA,IAC1B;AACA,QAAI,UAAU;AAAK,6BAAuB,EAAE,QAAQ,SAAS,KAAK,SAAS,OAAO,UAAU;AAAA,EAC9F;AAGA,QAAM,YAAY,CAAC,OAAO,2BAA2B,SAAS;AAC5D,UAAM,EAAE,OAAO,KAAK,IAAI,MAAM;AAC9B,UAAM,SAAS;AAAA,MACb,KAAK,CAAC,MAAM,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC;AAAA,MACpD,OAAO,CAAC,MAAM,kBAAkB,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC;AAAA,MACxD,MAAM,CAAC,MAAM,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC;AAAA,IACxD;AACA,YAAQ,MAAM;AAAA,WACP,aAAa;AAChB,cAAM,eAAe;AACrB,2BAAmB,MAAM,MAAM;AAC/B;AAAA,MACF;AAAA,WACK,WAAW;AACd,YAAI,0BAA0B;AAC5B,gBAAM,eAAe;AACrB,wBAAc,MAAM,GAAG;AACvB,gBAAM,mBAAmB,iBAAiB,OAAO,MAAM,cAAc,cAAc,MAAM,IAAI;AAC7F,cAAI,yBAAyB;AAC3B,mBAAO,MAAM,gBAAgB;AAAA,UAC/B,OAAO;AACL,2BAAe,MAAM,QAAQ,gBAAgB;AAAA,UAC/C;AAAA,QACF;AACA;AAAA,MACF;AAAA,WACK,aAAa;AAChB,YAAI,0BAA0B;AAC5B,gBAAM,eAAe;AACrB,wBAAc,MAAM,GAAG;AACvB,gBAAM,mBAAmB,iBAAiB,OAAO,MAAM,cAAc,cAAc,MAAM,KAAK;AAC9F,cAAI,yBAAyB;AAC3B,mBAAO,MAAM,gBAAgB;AAAA,UAC/B,OAAO;AACL,2BAAe,MAAM,QAAQ,gBAAgB;AAAA,UAC/C;AAAA,QACF;AACA;AAAA,MACF;AAAA,WACK,cAAc;AACjB,cAAM,eAAe;AACrB,uBAAe,MAAM,MAAM;AAC3B;AAAA,MACF;AAAA,WACK,aAAa;AAChB,cAAM,eAAe;AACrB,YAAI,CAAC,OAAO;AACV,6BAAmB,MAAM,MAAM;AAAA,QACjC,OAAO;AAEL,cAAI,yBAAyB;AAC3B,mBAAO,MAAM,EAAE;AAAA,UACjB,OAAO;AACL,2BAAe,MAAM,QAAQ,EAAE;AAAA,UACjC;AAAA,QACF;AACA;AAAA,MACF;AAAA,WACK,SAAS;AACZ,YAAI,mBAAmB,gBAAgB;AAAG,0BAAgB,OAAO,cAAc,CAAC;AAChF,sBAAc,IAAI;AAClB;AAAA,MACF;AAAA;AAEE,YAAI;AAAiB,0BAAgB,KAAK;AAC1C,sBAAc,IAAI;AAAA;AAAA,EAExB;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,CAAC;AAAW,aAAO;AACvB,kBAAc;AACd,UAAM,mBAAmB,CAAC,MAAM;AAC9B,wBAAkB,CAAC;AACnB,oBAAc,GAAG,MAAM;AAAA,IACzB;AACA,WACE,8BAAC;AAAA,MACE,GAAG,iBAAiB,QAAQ,WAAW,WAAW;AAAA,MACnD,cAAa;AAAA,MACb,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,KACT;AAAA,EAEJ;AACA,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC;AAAS,aAAO;AACrB,kBAAc;AACd,UAAM,iBAAiB,CAAC,MAAM;AAC5B,sBAAgB,CAAC;AACjB,oBAAc,GAAG,MAAM;AAAA,IACzB;AACA,WACE,8BAAC;AAAA,MACE,GAAG,iBAAiB,QAAQ,WAAW,WAAW;AAAA,MACnD,cAAa;AAAA,MACb,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,KACT;AAAA,EAEJ;AACA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC;AAAU,aAAO;AACtB,kBAAc;AACd,aAAS;AACT,UAAM,kBAAkB,CAAC,MAAM;AAC7B,uBAAiB,CAAC;AAClB,oBAAc,GAAG,MAAM;AAAA,IACzB;AACA,WACE,8BAAC;AAAA,MACE,GAAG,iBAAiB,QAAQ,WAAW,WAAW;AAAA,MACnD,cAAa;AAAA,MACb,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,KACT;AAAA,EAEJ;AAEA,QAAM,mBAAmB,MAAM;AAC7B,UAAM,SAAS,CAAC,iBAAiB,GAAG,eAAe,GAAG,gBAAgB,CAAC;AACvE,UAAM,qBAAqB,OAAO;AAAA,MAChC,CAAC,KAAK,OAAO,UACX,QACI,IAAI,OAAO,CAAC,QAAQ,oBAAC;AAAA,QAAwB,SAAQ;AAAA,QAAM,OAAO,MAAM,MAAM;AAAA,SAAxC,KAA+C,IAAK,MAAM,KAAK,CAAC,IACtG;AAAA,MACN,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,MACL;AAAA,MACAA,OAAM,cAAc,QAAQ,EAAE,KAAK,OAAO,CAAC;AAAA,IAC7C;AAAA,EACF;AAEA,SAAO,oBAAC;AAAA,IAAgB;AAAA,IAAqB,2BAAiB;AAAA,GAAE;AAClE;AAEA,WAAW,YAAY;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC;AAAA,EAC3F,QAAQ,UAAU;AAAA,EAClB,UAAU,UAAU;AAAA,EACpB,iBAAiB,UAAU;AAAA,EAC3B,SAAS,UAAU;AAAA,EACnB,QAAQ,UAAU;AAAA,EAClB,WAAW,UAAU;AAAA,EACrB,SAAS,UAAU;AAAA,EACnB,UAAU,UAAU;AAAA,EACpB,MAAM,UAAU;AAAA,EAChB,cAAc,UAAU;AAAA,EACxB,UAAU,UAAU;AAAA,EACpB,cAAc,UAAU;AAAA,EACxB,MAAM,UAAU,WAAW,MAAM;AACnC;AAGA,IAAO,qBAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { DSInput } from "../../Input";
|
|
5
5
|
import { DateInputs } from "./DateInputs";
|
|
@@ -16,10 +16,10 @@ const DSDateInputV2 = ({
|
|
|
16
16
|
containerProps,
|
|
17
17
|
tabIndex,
|
|
18
18
|
innerRef
|
|
19
|
-
}) => /* @__PURE__ */
|
|
19
|
+
}) => /* @__PURE__ */ jsx(DSInput, {
|
|
20
20
|
innerRef,
|
|
21
21
|
containerProps,
|
|
22
|
-
customInputType: ({ innerRef: ir }) => /* @__PURE__ */
|
|
22
|
+
customInputType: ({ innerRef: ir }) => /* @__PURE__ */ jsx(DateInputs, {
|
|
23
23
|
disabled,
|
|
24
24
|
innerRef: ir,
|
|
25
25
|
onBlur,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInputV2/components/DSDateInput.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSInput } from '../../Input';\nimport { DateInputs } from './DateInputs';\nimport { props, defaultProps } from './props';\n\nconst DSDateInputV2 = ({\n onFocus,\n onBlur,\n onChange,\n onDateChange,\n onKeyDown,\n onError,\n value,\n disabled,\n containerProps,\n tabIndex,\n innerRef,\n}) => (\n <DSInput\n innerRef={innerRef}\n containerProps={containerProps}\n customInputType={({ innerRef: ir }) => (\n <DateInputs\n disabled={disabled}\n innerRef={ir}\n onBlur={onBlur}\n onChange={onChange}\n onDateChange={onDateChange}\n onCustomKeyDown={onKeyDown}\n onError={onError}\n time={value}\n tabIndex={tabIndex}\n />\n )}\n disableTooltip={false}\n disabled={disabled}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n tabIndex={tabIndex}\n />\n);\n\nDSDateInputV2.defaultProps = defaultProps;\n\nDSDateInputV2.propTypes = props;\nDSDateInputV2.displayName = 'DSDateInputV2';\nconst DSDateInputV2WithSchema = describe(DSDateInputV2);\nDSDateInputV2WithSchema.propTypes = props;\n\nexport { DSDateInputV2, DSDateInputV2WithSchema };\nexport default DSDateInputV2;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,oBAAoB;AAEpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAC/B,oBAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,MAAM;AAAA,IACN;AAAA,GACF;AAAA,EAEF,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;AAGF,cAAc,eAAe;AAE7B,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;AAGpC,IAAO,sBAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createElement } from "react";
|
|
2
4
|
import React2, { useState, useEffect } from "react";
|
|
3
5
|
import moment from "moment";
|
|
4
6
|
import {
|
|
@@ -104,7 +106,7 @@ const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown,
|
|
|
104
106
|
setOnChangeDateTrigger({});
|
|
105
107
|
triggerOnBlur(e, onBlur);
|
|
106
108
|
};
|
|
107
|
-
return /* @__PURE__ */
|
|
109
|
+
return /* @__PURE__ */ createElement(DateInputInput, {
|
|
108
110
|
...commonInputProps(digits, onKeyDown, placeholder),
|
|
109
111
|
autoComplete: "off",
|
|
110
112
|
key: "month-input",
|
|
@@ -124,7 +126,7 @@ const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown,
|
|
|
124
126
|
setOnChangeDateTrigger({});
|
|
125
127
|
triggerOnBlur(e, onBlur);
|
|
126
128
|
};
|
|
127
|
-
return /* @__PURE__ */
|
|
129
|
+
return /* @__PURE__ */ createElement(DateInputInput, {
|
|
128
130
|
...commonInputProps(digits, onKeyDown, placeholder),
|
|
129
131
|
autoComplete: "off",
|
|
130
132
|
key: "day-input",
|
|
@@ -143,7 +145,7 @@ const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown,
|
|
|
143
145
|
const onYearInputBlur = (e) => {
|
|
144
146
|
triggerOnBlur(e, onBlur);
|
|
145
147
|
};
|
|
146
|
-
return /* @__PURE__ */
|
|
148
|
+
return /* @__PURE__ */ createElement(DateInputInput, {
|
|
147
149
|
...commonInputProps(digits, onKeyDown, placeholder),
|
|
148
150
|
autoComplete: "off",
|
|
149
151
|
key: "year-input",
|
|
@@ -160,7 +162,9 @@ const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown,
|
|
|
160
162
|
const renderDateInputs = () => {
|
|
161
163
|
const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
|
|
162
164
|
const inputsWithDividers = inputs.reduce(
|
|
163
|
-
(acc, input, index) => input ? acc.concat([index ? /* @__PURE__ */
|
|
165
|
+
(acc, input, index) => input ? acc.concat([index ? /* @__PURE__ */ jsx(DateInputDivider, {
|
|
166
|
+
children: "/"
|
|
167
|
+
}) : null, input]) : acc,
|
|
164
168
|
[]
|
|
165
169
|
);
|
|
166
170
|
return [
|
|
@@ -168,16 +172,18 @@ const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown,
|
|
|
168
172
|
React2.createElement("span", { key: "span" })
|
|
169
173
|
];
|
|
170
174
|
};
|
|
171
|
-
return /* @__PURE__ */
|
|
175
|
+
return /* @__PURE__ */ jsx(DateInputFluidContainer, {
|
|
172
176
|
onClick: handleFluidClick,
|
|
173
|
-
"data-testid": "date-input-fluidContainer"
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
177
|
+
"data-testid": "date-input-fluidContainer",
|
|
178
|
+
children: /* @__PURE__ */ jsx(DateInputWrapper, {
|
|
179
|
+
disabled,
|
|
180
|
+
ref: innerRef,
|
|
181
|
+
onKeyDown: onCustomKeyDown,
|
|
182
|
+
tabIndex: -1,
|
|
183
|
+
cols: ["auto", "6px", "auto", "6px", "auto"],
|
|
184
|
+
children: renderDateInputs()
|
|
185
|
+
})
|
|
186
|
+
});
|
|
181
187
|
};
|
|
182
188
|
DateInputs.propTypes = DateInputsPropTypes;
|
|
183
189
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/DateInputV2/components/DateInputs.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useEffect } from 'react';\nimport moment from 'moment';\nimport {\n commonInputProps,\n triggerOnBlur,\n focusNextInput,\n getFormattedDay,\n getShouldShortcircuitDay,\n getFormattedMonth,\n getShouldShortcircuitMonth,\n getFormattedYear,\n} from './utils';\nimport { onKeyDownHelper } from './helpers';\nimport { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from './styled';\nimport { DateInputsPropTypes } from './propsTypes';\n\nconst FORMAT = 'MMDDYYYY';\n\nexport const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {\n const [month, setMonth] = useState('');\n const [day, setDay] = useState('');\n const [year, setYear] = useState('');\n const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});\n const dayRef = React.useRef<HTMLInputElement>();\n const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);\n\n let digits = 2;\n let placeholder = '';\n\n const handleFluidClick = React.useCallback(\n (e: React.MouseEvent<Element, MouseEvent>) => {\n if (!(e.target as HTMLInputElement).type && dayRef.current) {\n dayRef.current.focus();\n }\n },\n [dayRef.current],\n );\n\n const triggerOnDateChange = React.useCallback(() => {\n if (month && day && year && haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);\n if (momentValue.isValid()) {\n onDateChange(momentValue);\n }\n setHaveInputsOnChangeTriggered(false);\n }\n }, [day, month, year, haveInputsOnChangeTriggered]);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onMonthChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedMonth(e.target.value);\n const shouldAdvance = getShouldShortcircuitMonth(e.target.value);\n setMonth(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n // isArrowChange is coming from the onKeyDown handler in helpers\n const onDayChange = React.useCallback((e, isArrowChange) => {\n const value = getFormattedDay(e.target.value);\n const shouldAdvance = getShouldShortcircuitDay(e.target.value);\n setDay(value);\n setHaveInputsOnChangeTriggered(true);\n if (e.target.value.length > 1 || shouldAdvance) {\n if (!isArrowChange) focusNextInput(e.target);\n setOnChangeDateTrigger({});\n }\n }, []);\n\n const onYearChange = React.useCallback((e) => {\n const value = getFormattedYear(e.target.value);\n setYear(value);\n setHaveInputsOnChangeTriggered(true);\n setOnChangeDateTrigger({});\n }, []);\n\n useEffect(() => {\n // When component mounts haveInputsOnChangeTriggered is set to false\n // so this is not triggered on mount but is triggered with all other changes\n if (haveInputsOnChangeTriggered) {\n const momentValue = moment(`${month}${day}${year}`, FORMAT, true);\n onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);\n }\n }, [day, month, year]);\n\n useEffect(() => {\n triggerOnDateChange();\n }, [onChangeDateTrigger]);\n\n useEffect(() => {\n if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {\n const values = String(time || '');\n if (values.slice(0, 2)) setMonth(values.slice(0, 2));\n if (values.slice(2, 4)) setDay(values.slice(2, 4));\n if (values.slice(4, 8)) setYear(values.slice(4, 8));\n } else if (!time && (month || day || year)) {\n setMonth('');\n setDay('');\n setYear('');\n }\n }, [time]);\n\n const onKeyDown = (event) =>\n onKeyDownHelper(event, {\n onDayChange,\n onMonthChange,\n onYearChange,\n });\n\n const renderMonthInput = () => {\n placeholder = 'MM';\n const onMonthInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"month-input\"\n data-testid=\"month\"\n disabled={disabled}\n name=\"month\"\n onBlur={onMonthInputBlur}\n onChange={onMonthChange}\n value={month}\n tabIndex={tabIndex}\n ref={dayRef}\n />\n );\n };\n const renderDayInput = () => {\n placeholder = 'DD';\n const onDayInputBlur = (e) => {\n setOnChangeDateTrigger({});\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"day-input\"\n data-testid=\"day\"\n disabled={disabled}\n name=\"day\"\n onBlur={onDayInputBlur}\n onChange={onDayChange}\n value={day}\n tabIndex={tabIndex}\n />\n );\n };\n const renderYearInput = () => {\n placeholder = 'YY';\n digits = 4;\n const onYearInputBlur = (e) => {\n triggerOnBlur(e, onBlur);\n };\n return (\n <DateInputInput\n {...commonInputProps(digits, onKeyDown, placeholder)}\n autoComplete=\"off\"\n key=\"year-input\"\n data-testid=\"year\"\n disabled={disabled}\n name=\"year\"\n onBlur={onYearInputBlur}\n onChange={onYearChange}\n value={year}\n size=\"l\"\n tabIndex={tabIndex}\n />\n );\n };\n\n const renderDateInputs = () => {\n const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];\n const inputsWithDividers = inputs.reduce(\n (acc, input, index) => (input ? acc.concat([index ? <DateInputDivider>/</DateInputDivider> : null, input]) : acc),\n [],\n );\n\n return [\n inputsWithDividers,\n React.createElement('span', { key: 'span' }), // hack for next/prev focus\n ];\n };\n\n return (\n <DateInputFluidContainer onClick={handleFluidClick} data-testid=\"date-input-fluidContainer\">\n <DateInputWrapper\n disabled={disabled}\n ref={innerRef}\n onKeyDown={onCustomKeyDown}\n tabIndex={-1}\n cols={['auto', '6px', 'auto', '6px', 'auto']}\n >\n {renderDateInputs()}\n </DateInputWrapper>\n </DateInputFluidContainer>\n );\n};\n\nDateInputs.propTypes = DateInputsPropTypes;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA;AAGA,OAAOA,UAAS,UAAU,iBAAiB;AAC3C,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,kBAAkB,gBAAgB,+BAA+B;AAC5F,SAAS,2BAA2B;AAEpC,MAAM,SAAS;AAER,MAAM,aAAa,CAAC,EAAE,QAAQ,UAAU,cAAc,UAAU,iBAAiB,MAAM,UAAU,SAAS,MAAM;AACrH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,CAAC,CAAC;AACjE,QAAM,SAASA,OAAM,OAAyB;AAC9C,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,SAAS,KAAK;AAEpF,MAAI,SAAS;AACb,MAAI,cAAc;AAElB,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,CAAC,MAA6C;AAC5C,UAAI,CAAE,EAAE,OAA4B,QAAQ,OAAO,SAAS;AAC1D,eAAO,QAAQ,MAAM;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,QAAM,sBAAsBA,OAAM,YAAY,MAAM;AAClD,QAAI,SAAS,OAAO,QAAQ,6BAA6B;AACvD,YAAM,cAAc,OAAO,GAAG,QAAQ,MAAM,QAAQ,YAAY,IAAI;AACpE,UAAI,YAAY,QAAQ,GAAG;AACzB,qBAAa,WAAW;AAAA,MAC1B;AACA,qCAA+B,KAAK;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAGlD,QAAM,gBAAgBA,OAAM,YAAY,CAAC,GAAG,kBAAkB;AAC5D,UAAM,QAAQ,kBAAkB,EAAE,OAAO,KAAK;AAC9C,UAAM,gBAAgB,2BAA2B,EAAE,OAAO,KAAK;AAC/D,aAAS,KAAK;AACd,mCAA+B,IAAI;AACnC,QAAI,EAAE,OAAO,MAAM,SAAS,KAAK,eAAe;AAC9C,UAAI,CAAC;AAAe,uBAAe,EAAE,MAAM;AAC3C,6BAAuB,CAAC,CAAC;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,cAAcA,OAAM,YAAY,CAAC,GAAG,kBAAkB;AAC1D,UAAM,QAAQ,gBAAgB,EAAE,OAAO,KAAK;AAC5C,UAAM,gBAAgB,yBAAyB,EAAE,OAAO,KAAK;AAC7D,WAAO,KAAK;AACZ,mCAA+B,IAAI;AACnC,QAAI,EAAE,OAAO,MAAM,SAAS,KAAK,eAAe;AAC9C,UAAI,CAAC;AAAe,uBAAe,EAAE,MAAM;AAC3C,6BAAuB,CAAC,CAAC;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAeA,OAAM,YAAY,CAAC,MAAM;AAC5C,UAAM,QAAQ,iBAAiB,EAAE,OAAO,KAAK;AAC7C,YAAQ,KAAK;AACb,mCAA+B,IAAI;AACnC,2BAAuB,CAAC,CAAC;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AAGd,QAAI,6BAA6B;AAC/B,YAAM,cAAc,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,IAAI;AAChE,eAAS,GAAG,QAAQ,MAAM,QAAQ,YAAY,QAAQ,IAAI,cAAc,IAAI;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,YAAU,MAAM;AACd,wBAAoB;AAAA,EACtB,GAAG,CAAC,mBAAmB,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,QAAQ,SAAS,GAAG,QAAQ,MAAM,UAAU,OAAO,MAAM,UAAU,EAAE,QAAQ,GAAG;AAClF,YAAM,SAAS,OAAO,QAAQ,EAAE;AAChC,UAAI,OAAO,MAAM,GAAG,CAAC;AAAG,iBAAS,OAAO,MAAM,GAAG,CAAC,CAAC;AACnD,UAAI,OAAO,MAAM,GAAG,CAAC;AAAG,eAAO,OAAO,MAAM,GAAG,CAAC,CAAC;AACjD,UAAI,OAAO,MAAM,GAAG,CAAC;AAAG,gBAAQ,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA,IACpD,WAAW,CAAC,SAAS,SAAS,OAAO,OAAO;AAC1C,eAAS,EAAE;AACX,aAAO,EAAE;AACT,cAAQ,EAAE;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,YAAY,CAAC,UACjB,gBAAgB,OAAO;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,mBAAmB,MAAM;AAC7B,kBAAc;AACd,UAAM,mBAAmB,CAAC,MAAM;AAC9B,6BAAuB,CAAC,CAAC;AACzB,oBAAc,GAAG,MAAM;AAAA,IACzB;AACA,WACE,8BAAC;AAAA,MACE,GAAG,iBAAiB,QAAQ,WAAW,WAAW;AAAA,MACnD,cAAa;AAAA,MACb,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA,KAAK;AAAA,KACP;AAAA,EAEJ;AACA,QAAM,iBAAiB,MAAM;AAC3B,kBAAc;AACd,UAAM,iBAAiB,CAAC,MAAM;AAC5B,6BAAuB,CAAC,CAAC;AACzB,oBAAc,GAAG,MAAM;AAAA,IACzB;AACA,WACE,8BAAC;AAAA,MACE,GAAG,iBAAiB,QAAQ,WAAW,WAAW;AAAA,MACnD,cAAa;AAAA,MACb,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,KACF;AAAA,EAEJ;AACA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc;AACd,aAAS;AACT,UAAM,kBAAkB,CAAC,MAAM;AAC7B,oBAAc,GAAG,MAAM;AAAA,IACzB;AACA,WACE,8BAAC;AAAA,MACE,GAAG,iBAAiB,QAAQ,WAAW,WAAW;AAAA,MACnD,cAAa;AAAA,MACb,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP,MAAK;AAAA,MACL;AAAA,KACF;AAAA,EAEJ;AAEA,QAAM,mBAAmB,MAAM;AAC7B,UAAM,SAAS,CAAC,iBAAiB,GAAG,eAAe,GAAG,gBAAgB,CAAC;AACvE,UAAM,qBAAqB,OAAO;AAAA,MAChC,CAAC,KAAK,OAAO,UAAW,QAAQ,IAAI,OAAO,CAAC,QAAQ,oBAAC;AAAA,QAAiB;AAAA,OAAC,IAAsB,MAAM,KAAK,CAAC,IAAI;AAAA,MAC7G,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,MACL;AAAA,MACAA,OAAM,cAAc,QAAQ,EAAE,KAAK,OAAO,CAAC;AAAA,IAC7C;AAAA,EACF;AAEA,SACE,oBAAC;AAAA,IAAwB,SAAS;AAAA,IAAkB,eAAY;AAAA,IAC9D,8BAAC;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAAA,MAE1C,2BAAiB;AAAA,KACpB;AAAA,GACF;AAEJ;AAEA,WAAW,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { ExpandableInputImpl } from "./ExpandableInputImpl";
|
|
4
4
|
const DSExpandableInput = ({
|
|
5
5
|
containerProps = {},
|
|
@@ -13,7 +13,7 @@ const DSExpandableInput = ({
|
|
|
13
13
|
onClose = () => null,
|
|
14
14
|
onBlur = () => null,
|
|
15
15
|
width = void 0
|
|
16
|
-
}) => /* @__PURE__ */
|
|
16
|
+
}) => /* @__PURE__ */ jsx(ExpandableInputImpl, {
|
|
17
17
|
className,
|
|
18
18
|
containerProps,
|
|
19
19
|
innerRef,
|
|
@@ -23,8 +23,9 @@ const DSExpandableInput = ({
|
|
|
23
23
|
onOpen,
|
|
24
24
|
style,
|
|
25
25
|
triggerComponent,
|
|
26
|
-
width
|
|
27
|
-
|
|
26
|
+
width,
|
|
27
|
+
children
|
|
28
|
+
});
|
|
28
29
|
var DSExpandableInput_default = DSExpandableInput;
|
|
29
30
|
export {
|
|
30
31
|
DSExpandableInput,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ExpandableInput/DSExpandableInput.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ExpandableInputImpl } from './ExpandableInputImpl';\n\nconst DSExpandableInput = ({\n containerProps = {},\n innerRef,\n className = '',\n style = {},\n triggerComponent = undefined,\n children,\n isOpen = false,\n onOpen = () => null,\n onClose = () => null,\n onBlur = () => null,\n width = undefined,\n}) => (\n <ExpandableInputImpl\n className={className}\n containerProps={containerProps}\n innerRef={innerRef}\n isOpen={isOpen}\n onBlur={onBlur}\n onClose={onClose}\n onOpen={onOpen}\n style={style}\n triggerComponent={triggerComponent}\n width={width}\n >\n {children}\n </ExpandableInputImpl>\n);\n\nexport { DSExpandableInput };\nexport default DSExpandableInput;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,2BAA2B;AAEpC,MAAM,oBAAoB,CAAC;AAAA,EACzB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AAAA,EACT,mBAAmB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,UAAU,MAAM;AAAA,EAChB,SAAS,MAAM;AAAA,EACf,QAAQ;AACV,MACE,oBAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEC;AAAA,CACH;AAIF,IAAO,4BAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import React2, { Component, cloneElement } from "react";
|
|
3
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
4
5
|
import { isFunction } from "@elliemae/ds-shared";
|
|
@@ -24,23 +25,25 @@ class ExpandableInputImpl extends Component {
|
|
|
24
25
|
onOpen();
|
|
25
26
|
}
|
|
26
27
|
};
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
+
return /* @__PURE__ */ jsx(ExpandableInput, {
|
|
28
29
|
...containerProps,
|
|
29
30
|
classProps: { isOpen },
|
|
30
31
|
innerRef,
|
|
31
|
-
style: { width: isOpen && width }
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
style: { width: isOpen && width },
|
|
33
|
+
children: /* @__PURE__ */ jsx(InputWrapper, {
|
|
34
|
+
rightComponents: [
|
|
35
|
+
cloneElement(triggerComponent, {
|
|
36
|
+
key: "handler",
|
|
37
|
+
onClick: handleTriggerClick
|
|
38
|
+
})
|
|
39
|
+
],
|
|
40
|
+
children: cloneElement(InputComponent, {
|
|
41
|
+
className: "expandable-input__input",
|
|
42
|
+
innerRef: (node) => this.input = node,
|
|
43
|
+
onBlur
|
|
37
44
|
})
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
className: "expandable-input__input",
|
|
41
|
-
innerRef: (node) => this.input = node,
|
|
42
|
-
onBlur
|
|
43
|
-
})));
|
|
45
|
+
})
|
|
46
|
+
});
|
|
44
47
|
}
|
|
45
48
|
}
|
|
46
49
|
var ExpandableInputImpl_default = ExpandableInputImpl;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ExpandableInput/ExpandableInputImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component, cloneElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { isFunction } from '@elliemae/ds-shared';\nimport { InputAddonWrapper } from '../Input';\n\nconst blockName = 'expandable-input';\n\nconst ExpandableInput = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({ opened: isOpen }));\nconst InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', ({ isOpen }) => ({ opened: isOpen }));\n\nclass ExpandableInputImpl extends Component {\n componentDidUpdate(prevProps) {\n const { isOpen } = this.props;\n if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();\n }\n\n render() {\n const { innerRef, triggerComponent, children, width, isOpen, onOpen, onClose, onBlur, containerProps } = this.props;\n const InputComponent = React.Children.only(children);\n const handleTriggerClick = (e) => {\n if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);\n if (isOpen) {\n onClose();\n } else {\n onOpen();\n }\n };\n\n return (\n <ExpandableInput\n {...containerProps}\n classProps={{ isOpen }}\n innerRef={innerRef}\n style={{ width: isOpen && width }}\n >\n <InputWrapper\n rightComponents={[\n cloneElement(triggerComponent, {\n key: 'handler',\n onClick: handleTriggerClick,\n }),\n ]}\n >\n {cloneElement(InputComponent, {\n className: 'expandable-input__input',\n innerRef: (node) => (this.input = node),\n onBlur,\n })}\n </InputWrapper>\n </ExpandableInput>\n );\n }\n}\n\nexport { ExpandableInputImpl };\nexport default ExpandableInputImpl;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,WAAW,oBAAoB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,OAAO,OAAO,EAAE,QAAQ,OAAO,EAAE;AACtG,MAAM,eAAe,kBAAkB,iBAAiB,EAAE,WAAW,WAAW,CAAC,EAAE,OAAO,OAAO,EAAE,QAAQ,OAAO,EAAE;AAEpH,MAAM,4BAA4B,UAAU;AAAA,EAC1C,mBAAmB,WAAW;AAC5B,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,UAAU,WAAW,UAAU;AAAQ,WAAK,MAAM,MAAM;AAAA,EAC9D;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,UAAU,kBAAkB,UAAU,OAAO,QAAQ,QAAQ,SAAS,QAAQ,eAAe,IAAI,KAAK;AAC9G,UAAM,iBAAiBA,OAAM,SAAS,KAAK,QAAQ;AACnD,UAAM,qBAAqB,CAAC,MAAM;AAChC,UAAI,WAAW,iBAAiB,OAAO;AAAG,yBAAiB,QAAQ,CAAC;AACpE,UAAI,QAAQ;AACV,gBAAQ;AAAA,MACV,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WACE,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,WAAW,oBAAoB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,OAAO,OAAO,EAAE,QAAQ,OAAO,EAAE;AACtG,MAAM,eAAe,kBAAkB,iBAAiB,EAAE,WAAW,WAAW,CAAC,EAAE,OAAO,OAAO,EAAE,QAAQ,OAAO,EAAE;AAEpH,MAAM,4BAA4B,UAAU;AAAA,EAC1C,mBAAmB,WAAW;AAC5B,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,UAAU,WAAW,UAAU;AAAQ,WAAK,MAAM,MAAM;AAAA,EAC9D;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,UAAU,kBAAkB,UAAU,OAAO,QAAQ,QAAQ,SAAS,QAAQ,eAAe,IAAI,KAAK;AAC9G,UAAM,iBAAiBA,OAAM,SAAS,KAAK,QAAQ;AACnD,UAAM,qBAAqB,CAAC,MAAM;AAChC,UAAI,WAAW,iBAAiB,OAAO;AAAG,yBAAiB,QAAQ,CAAC;AACpE,UAAI,QAAQ;AACV,gBAAQ;AAAA,MACV,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WACE,oBAAC;AAAA,MACE,GAAG;AAAA,MACJ,YAAY,EAAE,OAAO;AAAA,MACrB;AAAA,MACA,OAAO,EAAE,OAAO,UAAU,MAAM;AAAA,MAEhC,8BAAC;AAAA,QACC,iBAAiB;AAAA,UACf,aAAa,kBAAkB;AAAA,YAC7B,KAAK;AAAA,YACL,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,QAEC,uBAAa,gBAAgB;AAAA,UAC5B,WAAW;AAAA,UACX,UAAU,CAAC,SAAU,KAAK,QAAQ;AAAA,UAClC;AAAA,QACF,CAAC;AAAA,OACH;AAAA,KACF;AAAA,EAEJ;AACF;AAGA,IAAO,8BAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { FloatingLabelInputImpl } from "./FloatingLabelInputImpl";
|
|
4
4
|
import { DSLabel } from "../FormItem/Label/DSLabel";
|
|
5
5
|
import { DSTextBox } from "../TextBox";
|
|
@@ -26,7 +26,7 @@ const DSFloatingLabelInput = ({
|
|
|
26
26
|
optional = false,
|
|
27
27
|
mask = null,
|
|
28
28
|
useSubfix = ""
|
|
29
|
-
}) => /* @__PURE__ */
|
|
29
|
+
}) => /* @__PURE__ */ jsx(FloatingLabelInputImpl, {
|
|
30
30
|
arialLabel,
|
|
31
31
|
className,
|
|
32
32
|
disabled,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/DSFloatingLabelInput.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { FloatingLabelInputImpl } from './FloatingLabelInputImpl';\nimport { DSLabel } from '../FormItem/Label/DSLabel';\nimport { DSTextBox } from '../TextBox';\n\nconst noop = () => {};\nconst DSFloatingLabelInput = ({\n containerProps = {},\n arialLabel = '',\n /**\n * Gets the reference for the input controller\n *\n * @param {HTMLElement} node\n */\n innerRef = noop,\n /**\n * Custom className for floatingLabelInput\n */\n className = '',\n /**\n * Props injected to the input component\n *\n * @type Object\n */\n extraInputProps = {},\n /**\n * Input controller\n *\n * @type {element}\n */\n inputComponent = DSTextBox,\n /**\n * Input value\n *\n * @type {string}\n */\n value = '',\n /**\n * Label component\n *\n * @type {element}\n */\n labelComponent = DSLabel,\n /**\n * Label text\n *\n * @type {string | element}\n */\n labelText = null,\n /**\n * Callback when input controller has changed\n *\n * @param event\n */\n onChange = noop,\n onBlur = noop,\n onFocus = noop,\n /**\n * Whether the label is floating or not\n *\n * @type {boolean}\n */\n isOpen = false,\n /**\n * Whether ...\n *\n * @type {boolean}\n */\n hasError = false,\n /**\n * Whether ...\n *\n * @type {boolean}\n */\n readOnly = false,\n /**\n * Whether ...\n *\n * @type {boolean}\n */\n disabled = false,\n /**\n * Whether ...\n *\n * @type {boolean}\n */\n required = false,\n optional = false,\n mask = null,\n useSubfix = '',\n}) => (\n <FloatingLabelInputImpl\n arialLabel={arialLabel}\n className={className}\n disabled={disabled}\n extraInputProps={extraInputProps}\n hasError={hasError}\n innerRef={innerRef}\n inputComponent={inputComponent}\n isOpen={isOpen}\n labelComponent={labelComponent}\n labelText={labelText}\n mask={mask}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n optional={optional}\n readOnly={readOnly}\n required={required}\n useSubfix={useSubfix}\n value={value}\n />\n);\n\nexport { DSFloatingLabelInput };\nexport default DSFloatingLabelInput;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,MAAM,OAAO,MAAM;AAAC;AACpB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,iBAAiB,CAAC;AAAA,EAClB,aAAa;AAAA,EAMb,WAAW;AAAA,EAIX,YAAY;AAAA,EAMZ,kBAAkB,CAAC;AAAA,EAMnB,iBAAiB;AAAA,EAMjB,QAAQ;AAAA,EAMR,iBAAiB;AAAA,EAMjB,YAAY;AAAA,EAMZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EAMV,SAAS;AAAA,EAMT,WAAW;AAAA,EAMX,WAAW;AAAA,EAMX,WAAW;AAAA,EAMX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AACd,MACE,oBAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACF;AAIF,IAAO,+BAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import React2, { Component } from "react";
|
|
3
4
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
4
5
|
import { getComponentFromProps } from "@elliemae/ds-utilities";
|
|
@@ -117,7 +118,7 @@ class FloatingLabelInputImpl extends Component {
|
|
|
117
118
|
};
|
|
118
119
|
const InputComponent = getComponentFromProps(inputComponent, inputProps);
|
|
119
120
|
const isOpen = this.isOpened;
|
|
120
|
-
return /* @__PURE__ */
|
|
121
|
+
return /* @__PURE__ */ jsxs(Wrapper, {
|
|
121
122
|
classProps: {
|
|
122
123
|
hasError,
|
|
123
124
|
isOpen,
|
|
@@ -128,21 +129,35 @@ class FloatingLabelInputImpl extends Component {
|
|
|
128
129
|
onBlur: () => null,
|
|
129
130
|
onFocus: () => null,
|
|
130
131
|
onMouseOut: this.handleMouseOut,
|
|
131
|
-
onMouseOver: this.handleMouseOver
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
132
|
+
onMouseOver: this.handleMouseOver,
|
|
133
|
+
children: [
|
|
134
|
+
InputComponent,
|
|
135
|
+
/* @__PURE__ */ jsxs(FloatingLabel, {
|
|
136
|
+
classProps: { isOpen },
|
|
137
|
+
innerRef: this.labelRef,
|
|
138
|
+
children: [
|
|
139
|
+
/* @__PURE__ */ jsx(DSTextWrapper, {
|
|
140
|
+
maxWidth: "100%",
|
|
141
|
+
text: labelText
|
|
142
|
+
}),
|
|
143
|
+
/* @__PURE__ */ jsx(RequiredMark, {
|
|
144
|
+
optional,
|
|
145
|
+
required
|
|
146
|
+
})
|
|
147
|
+
]
|
|
148
|
+
}),
|
|
149
|
+
/* @__PURE__ */ jsx(Outline, {
|
|
150
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
151
|
+
children: /* @__PURE__ */ jsx(OutlinePath, {
|
|
152
|
+
innerRef: this.outlinePathRef
|
|
153
|
+
})
|
|
154
|
+
})
|
|
155
|
+
}),
|
|
156
|
+
/* @__PURE__ */ jsx(OutlineIdle, {
|
|
157
|
+
innerRef: this.outlineIdleRef
|
|
158
|
+
})
|
|
159
|
+
]
|
|
160
|
+
});
|
|
146
161
|
}
|
|
147
162
|
}
|
|
148
163
|
FloatingLabelInputImpl.defaultProps = { onChange: () => null };
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/FloatingLabelInputImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n 'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n if (width !== prevSizes.width) return true;\n if (height !== prevSizes.height) return true;\n return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n resizeObserver = new ResizeObserver(() => this.updatePath());\n\n prevSizes = {};\n\n static defaultProps = { onChange: () => null };\n\n constructor(props) {\n super(props);\n this.wrapperRef = React.createRef();\n this.outlinePathRef = React.createRef();\n this.outlineIdleRef = React.createRef();\n this.labelRef = React.createRef();\n\n this.sizes = this.sizes.bind(this);\n this.isOpened = this.isOpened.bind(this);\n this.getValue = this.getValue.bind(this);\n this.updatePath = this.updatePath.bind(this);\n }\n\n componentDidMount() {\n this.resizeObserver.observe(this.wrapperRef.current);\n }\n\n componentDidUpdate() {\n if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n this.updatePath();\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.wrapperRef.current);\n }\n\n get sizes() {\n const { current: labelEl } = this.labelRef;\n const { current: wrapperEl } = this.wrapperRef;\n const { current: outlineIdleEl } = this.outlineIdleRef;\n const elStyles = window.getComputedStyle(outlineIdleEl);\n const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n const hasLeftRadius = parseFloat(leftRadius) !== 0;\n const hasRightRadius = parseFloat(rightRadius) !== 0;\n return {\n labelWidth: labelEl.offsetWidth * 0.9,\n width: wrapperEl.offsetWidth,\n height: wrapperEl.offsetHeight,\n radiusStyle: leftRadius,\n hasLeftRadius,\n hasRightRadius,\n };\n }\n\n get isOpened() {\n const { focused, isOpen, value } = this.props;\n return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n }\n\n getValue(value) {\n const { valueAccessor } = this.props;\n if (valueAccessor) return valueAccessor(value);\n // is an event\n if (value && value.target) return value.target.value;\n\n return value;\n }\n\n updatePath() {\n const path = getSvgPath(this.sizes);\n this.prevSizes = this.sizes;\n this.outlinePathRef.current.setAttribute('d', path);\n }\n\n render() {\n const {\n ariaLabel,\n hasError,\n readOnly,\n disabled,\n inputComponent,\n labelText,\n onBlur,\n onFocus,\n innerRef,\n extraInputProps,\n required,\n value,\n onChange,\n mask,\n useSubfix,\n optional,\n } = this.props;\n\n const inputProps = {\n ariaLabel,\n className: 'floating-label-input-controller',\n disabled,\n hasError,\n onBlur,\n onChange,\n onFocus,\n readOnly,\n value,\n innerRef,\n mask,\n useSubfix,\n ...extraInputProps,\n };\n const InputComponent = getComponentFromProps(inputComponent, inputProps);\n const isOpen = this.isOpened;\n\n return (\n <Wrapper\n classProps={{\n hasError,\n isOpen,\n readOnly,\n disabled,\n }}\n innerRef={this.wrapperRef}\n onBlur={() => null}\n onFocus={() => null}\n onMouseOut={this.handleMouseOut}\n onMouseOver={this.handleMouseOver}\n >\n {InputComponent}\n <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n <RequiredMark optional={optional} required={required} />\n </FloatingLabel>\n <Outline>\n <svg>\n <OutlinePath innerRef={this.outlinePathRef} />\n </svg>\n </Outline>\n <OutlineIdle innerRef={this.outlineIdleRef} />\n </Wrapper>\n );\n }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|