@coreui/react-pro 5.21.0 → 5.23.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/README.md +1 -1
- package/dist/cjs/components/autocomplete/CAutocomplete.js +2 -2
- package/dist/cjs/components/autocomplete/CAutocomplete.js.map +1 -1
- package/dist/cjs/components/calendar/CCalendarNavigation.js +6 -6
- package/dist/cjs/components/calendar/CCalendarNavigation.js.map +1 -1
- package/dist/cjs/components/date-range-picker/CDateRangePicker.js +1 -1
- package/dist/cjs/components/date-range-picker/CDateRangePicker.js.map +1 -1
- package/dist/cjs/components/dropdown/CDropdown.d.ts +21 -1
- package/dist/cjs/components/dropdown/CDropdown.js +67 -33
- package/dist/cjs/components/dropdown/CDropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/CDropdownHeader.js.map +1 -1
- package/dist/cjs/components/dropdown/CDropdownItemPlain.js.map +1 -1
- package/dist/cjs/components/dropdown/CDropdownMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/CDropdownToggle.d.ts +7 -0
- package/dist/cjs/components/dropdown/CDropdownToggle.js +3 -2
- package/dist/cjs/components/dropdown/CDropdownToggle.js.map +1 -1
- package/dist/cjs/components/dropdown/utils.d.ts +2 -0
- package/dist/cjs/components/dropdown/utils.js +13 -0
- package/dist/cjs/components/dropdown/utils.js.map +1 -1
- package/dist/cjs/components/focus-trap/utils.js +0 -5
- package/dist/cjs/components/focus-trap/utils.js.map +1 -1
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/one-time-password-input/COneTimePassword.d.ts +73 -0
- package/dist/cjs/components/one-time-password-input/COneTimePassword.js +178 -0
- package/dist/cjs/components/one-time-password-input/COneTimePassword.js.map +1 -0
- package/dist/cjs/components/one-time-password-input/COneTimePasswordInput.d.ts +8 -0
- package/dist/cjs/components/one-time-password-input/COneTimePasswordInput.js +14 -0
- package/dist/cjs/components/one-time-password-input/COneTimePasswordInput.js.map +1 -0
- package/dist/cjs/components/one-time-password-input/index.d.ts +5 -0
- package/dist/cjs/components/one-time-password-input/utils.d.ts +2 -0
- package/dist/cjs/components/one-time-password-input/utils.js +28 -0
- package/dist/cjs/components/one-time-password-input/utils.js.map +1 -0
- package/dist/cjs/components/time-picker/CTimePicker.d.ts +24 -0
- package/dist/cjs/components/time-picker/CTimePicker.js +37 -18
- package/dist/cjs/components/time-picker/CTimePicker.js.map +1 -1
- package/dist/cjs/components/time-picker/CTimePickerRollCol.d.ts +3 -0
- package/dist/cjs/components/time-picker/CTimePickerRollCol.js +74 -13
- package/dist/cjs/components/time-picker/CTimePickerRollCol.js.map +1 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/autocomplete/CAutocomplete.js +2 -2
- package/dist/esm/components/autocomplete/CAutocomplete.js.map +1 -1
- package/dist/esm/components/calendar/CCalendarNavigation.js +6 -6
- package/dist/esm/components/calendar/CCalendarNavigation.js.map +1 -1
- package/dist/esm/components/date-range-picker/CDateRangePicker.js +1 -1
- package/dist/esm/components/date-range-picker/CDateRangePicker.js.map +1 -1
- package/dist/esm/components/dropdown/CDropdown.d.ts +21 -1
- package/dist/esm/components/dropdown/CDropdown.js +68 -34
- package/dist/esm/components/dropdown/CDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/CDropdownHeader.js.map +1 -1
- package/dist/esm/components/dropdown/CDropdownItemPlain.js.map +1 -1
- package/dist/esm/components/dropdown/CDropdownMenu.js.map +1 -1
- package/dist/esm/components/dropdown/CDropdownToggle.d.ts +7 -0
- package/dist/esm/components/dropdown/CDropdownToggle.js +3 -2
- package/dist/esm/components/dropdown/CDropdownToggle.js.map +1 -1
- package/dist/esm/components/dropdown/utils.d.ts +2 -0
- package/dist/esm/components/dropdown/utils.js +13 -1
- package/dist/esm/components/dropdown/utils.js.map +1 -1
- package/dist/esm/components/focus-trap/utils.js +0 -5
- package/dist/esm/components/focus-trap/utils.js.map +1 -1
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/one-time-password-input/COneTimePassword.d.ts +73 -0
- package/dist/esm/components/one-time-password-input/COneTimePassword.js +176 -0
- package/dist/esm/components/one-time-password-input/COneTimePassword.js.map +1 -0
- package/dist/esm/components/one-time-password-input/COneTimePasswordInput.d.ts +8 -0
- package/dist/esm/components/one-time-password-input/COneTimePasswordInput.js +12 -0
- package/dist/esm/components/one-time-password-input/COneTimePasswordInput.js.map +1 -0
- package/dist/esm/components/one-time-password-input/index.d.ts +5 -0
- package/dist/esm/components/one-time-password-input/utils.d.ts +2 -0
- package/dist/esm/components/one-time-password-input/utils.js +25 -0
- package/dist/esm/components/one-time-password-input/utils.js.map +1 -0
- package/dist/esm/components/time-picker/CTimePicker.d.ts +24 -0
- package/dist/esm/components/time-picker/CTimePicker.js +37 -18
- package/dist/esm/components/time-picker/CTimePicker.js.map +1 -1
- package/dist/esm/components/time-picker/CTimePickerRollCol.d.ts +3 -0
- package/dist/esm/components/time-picker/CTimePickerRollCol.js +75 -14
- package/dist/esm/components/time-picker/CTimePickerRollCol.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/src/components/autocomplete/CAutocomplete.tsx +18 -16
- package/src/components/calendar/CCalendarNavigation.tsx +10 -1
- package/src/components/date-range-picker/CDateRangePicker.tsx +1 -1
- package/src/components/dropdown/CDropdown.tsx +126 -60
- package/src/components/dropdown/CDropdownHeader.tsx +1 -0
- package/src/components/dropdown/CDropdownItemPlain.tsx +1 -0
- package/src/components/dropdown/CDropdownMenu.tsx +1 -0
- package/src/components/dropdown/CDropdownToggle.tsx +15 -1
- package/src/components/dropdown/utils.ts +21 -0
- package/src/components/focus-trap/utils.ts +0 -6
- package/src/components/index.ts +1 -0
- package/src/components/one-time-password-input/COneTimePassword.tsx +462 -0
- package/src/components/one-time-password-input/COneTimePasswordInput.tsx +25 -0
- package/src/components/one-time-password-input/__tests__/COneTimePassword.spec.tsx +361 -0
- package/src/components/one-time-password-input/__tests__/__snapshots__/COneTimePassword.spec.tsx.snap +130 -0
- package/src/components/one-time-password-input/index.ts +6 -0
- package/src/components/one-time-password-input/utils.ts +23 -0
- package/src/components/time-picker/CTimePicker.tsx +81 -10
- package/src/components/time-picker/CTimePickerRollCol.tsx +103 -20
|
@@ -31,7 +31,20 @@ const getPlacement = (placement, direction, alignment, isRTL) => {
|
|
|
31
31
|
}
|
|
32
32
|
return _placement;
|
|
33
33
|
};
|
|
34
|
+
const getReferenceElement = (reference, dropdownToggleElement, dropdownRef) => {
|
|
35
|
+
if (reference === 'parent') {
|
|
36
|
+
return dropdownRef.current;
|
|
37
|
+
}
|
|
38
|
+
if (reference instanceof HTMLElement) {
|
|
39
|
+
return reference;
|
|
40
|
+
}
|
|
41
|
+
if (reference instanceof Object && 'current' in reference) {
|
|
42
|
+
return reference.current;
|
|
43
|
+
}
|
|
44
|
+
return dropdownToggleElement;
|
|
45
|
+
};
|
|
34
46
|
|
|
35
47
|
exports.getAlignmentClassNames = getAlignmentClassNames;
|
|
36
48
|
exports.getPlacement = getPlacement;
|
|
49
|
+
exports.getReferenceElement = getReferenceElement;
|
|
37
50
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/dropdown/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/dropdown/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAKO,MAAM,sBAAsB,GAAG,CAAC,SAAqB,KAAI;IAC9D,MAAM,UAAU,GAAa,EAAE;AAC/B,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE;YAC3B,UAAU,CAAC,IAAI,CACb,CAAA,aAAA,EAAgB,GAAG,KAAK,IAAI,GAAG,EAAE,GAAG,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAA,CAAA,EAAI,SAAS,CAAC,GAAwB,CAAC,CAAA,CAAE,CACvF;QACH;IACF;AAEA,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,UAAU,CAAC,IAAI,CAAC,iBAAiB,SAAS,CAAA,CAAE,CAAC;IAC/C;AAEA,IAAA,OAAO,UAAU;AACnB;AAEO,MAAM,YAAY,GAAG,CAC1B,SAAoB,EACpB,SAA6B,EAC7B,SAA0C,EAC1C,KAAc,KACA;IACd,IAAI,UAAU,GAAG,SAAS;AAE1B,IAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW;IAC9C;AAEA,IAAA,IAAI,SAAS,KAAK,eAAe,EAAE;QACjC,UAAU,GAAG,KAAK;IACpB;AAEA,IAAA,IAAI,SAAS,KAAK,SAAS,EAAE;QAC3B,UAAU,GAAG,KAAK,GAAG,YAAY,GAAG,aAAa;IACnD;AAEA,IAAA,IAAI,SAAS,KAAK,WAAW,EAAE;QAC7B,UAAU,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY;IACnD;AAEA,IAAA,IAAI,SAAS,KAAK,KAAK,EAAE;QACvB,UAAU,GAAG,KAAK,GAAG,cAAc,GAAG,YAAY;IACpD;AAEA,IAAA,OAAO,UAAU;AACnB;AAEO,MAAM,mBAAmB,GAAG,CACjC,SAAkF,EAClF,qBAAyC,EACzC,WAAgD,KAC1B;AACtB,IAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,OAAO,WAAW,CAAC,OAAO;IAC5B;AAEA,IAAA,IAAI,SAAS,YAAY,WAAW,EAAE;AACpC,QAAA,OAAO,SAAS;IAClB;IAEA,IAAI,SAAS,YAAY,MAAM,IAAI,SAAS,IAAI,SAAS,EAAE;QACzD,OAAO,SAAS,CAAC,OAAO;IAC1B;AAEA,IAAA,OAAO,qBAAqB;AAC9B;;;;;;"}
|
|
@@ -48,11 +48,6 @@ const isElement = (object) => {
|
|
|
48
48
|
if (!object || typeof object !== 'object') {
|
|
49
49
|
return false;
|
|
50
50
|
}
|
|
51
|
-
// Handle jQuery objects
|
|
52
|
-
if ('jquery' in object && object.jquery !== undefined) {
|
|
53
|
-
const jQueryObject = object;
|
|
54
|
-
return isElement(jQueryObject[0]);
|
|
55
|
-
}
|
|
56
51
|
return 'nodeType' in object && typeof object.nodeType === 'number';
|
|
57
52
|
};
|
|
58
53
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/focus-trap/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;AAKG;AACI,MAAM,iBAAiB,GAAG,CAAC,OAAoB,KAAmB;AACvE,IAAA,MAAM,kBAAkB,GAAG;QACzB,SAAS;QACT,wBAAwB;QACxB,uBAAuB;QACvB,0BAA0B;QAC1B,wBAAwB;QACxB,SAAS;QACT,iCAAiC;QACjC,0BAA0B;AAC3B,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC;IAEX,MAAM,QAAQ,GAAG,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAkB;IAEhG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;AAClE;AAEA;;;;;AAKG;AACI,MAAM,UAAU,GAAG,CAAC,OAAoB,KAAa;IAC1D,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;AACtD,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AAC1C,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,SAAS,EAAE;QAClE,OAAO,OAAO,CAAC,QAAQ;IACzB;AAEA,IAAA,OAAO,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO;AACzF;AAEA;;;;;AAKG;AACI,MAAM,SAAS,GAAG,CAAC,MAAe,KAAuB;IAC9D,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AACzC,QAAA,OAAO,KAAK;IACd
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/focus-trap/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;AAKG;AACI,MAAM,iBAAiB,GAAG,CAAC,OAAoB,KAAmB;AACvE,IAAA,MAAM,kBAAkB,GAAG;QACzB,SAAS;QACT,wBAAwB;QACxB,uBAAuB;QACvB,0BAA0B;QAC1B,wBAAwB;QACxB,SAAS;QACT,iCAAiC;QACjC,0BAA0B;AAC3B,KAAA,CAAC,IAAI,CAAC,GAAG,CAAC;IAEX,MAAM,QAAQ,GAAG,CAAC,GAAG,OAAO,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAkB;IAEhG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;AAClE;AAEA;;;;;AAKG;AACI,MAAM,UAAU,GAAG,CAAC,OAAoB,KAAa;IAC1D,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;AACtD,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AAC1C,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,OAAO,CAAC,QAAQ,KAAK,SAAS,EAAE;QAClE,OAAO,OAAO,CAAC,QAAQ;IACzB;AAEA,IAAA,OAAO,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO;AACzF;AAEA;;;;;AAKG;AACI,MAAM,SAAS,GAAG,CAAC,MAAe,KAAuB;IAC9D,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AACzC,QAAA,OAAO,KAAK;IACd;IAEA,OAAO,UAAU,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ;AACpE;AAEA;;;;;AAKG;AACI,MAAM,SAAS,GAAG,CAAC,OAAoB,KAAa;AACzD,IAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;AAChE,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,SAAS;;IAG/F,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,CAAC;IAE5D,IAAI,CAAC,aAAa,EAAE;AAClB,QAAA,OAAO,gBAAgB;IACzB;AAEA,IAAA,IAAI,aAAa,KAAK,OAAO,EAAE;QAC7B,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;;QAG1C,IAAI,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,UAAU,MAAK,aAAa,EAAE;AACzC,YAAA,OAAO,KAAK;QACd;IACF;AAEA,IAAA,OAAO,gBAAgB;AACzB;AAEA;;;;;AAKG;AACI,MAAM,SAAS,GACpB,CAAI,GAAG,IAAkC,KACzC,CAAC,IAAO,KAAI;AACV,IAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,IAAI,CAAC;QACX;aAAO;AACL,YAAA,IAAI;gBACF;AAAE,gBAAA,GAA0B,CAAC,OAAO,GAAG,IAAI;YAC7C;AAAE,YAAA,OAAA,EAAA,EAAM;;YAER;QACF;AACF,IAAA,CAAC,CAAC;AACJ;;;;;;;;"}
|
|
@@ -32,6 +32,7 @@ export * from './multi-select';
|
|
|
32
32
|
export * from './nav';
|
|
33
33
|
export * from './navbar';
|
|
34
34
|
export * from './offcanvas';
|
|
35
|
+
export * from './one-time-password-input';
|
|
35
36
|
export * from './password-input';
|
|
36
37
|
export * from './pagination';
|
|
37
38
|
export * from './placeholder';
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
|
|
3
|
+
export interface COneTimePasswordProps extends CFormControlWrapperProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
4
|
+
/**
|
|
5
|
+
* Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
|
|
6
|
+
*/
|
|
7
|
+
ariaLabel?: (index: number, total: number) => string;
|
|
8
|
+
/**
|
|
9
|
+
* Automatically submit the form when all one time password fields are filled.
|
|
10
|
+
*/
|
|
11
|
+
autoSubmit?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* A string of all className you want applied to the React.js OTP component.
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Initial value for uncontrolled React.js one time password input.
|
|
18
|
+
*/
|
|
19
|
+
defaultValue?: string | number;
|
|
20
|
+
/**
|
|
21
|
+
* Disable all one time password (OTP) input fields.
|
|
22
|
+
*/
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* ID attribute for the hidden input field.
|
|
26
|
+
*/
|
|
27
|
+
id?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Enforce sequential input (users must fill fields in order).
|
|
30
|
+
*/
|
|
31
|
+
linear?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Show input as password (masked characters).
|
|
34
|
+
*/
|
|
35
|
+
masked?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Name attribute for the hidden input field.
|
|
38
|
+
*/
|
|
39
|
+
name?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Callback triggered when the React.js one time password (OTP) value changes.
|
|
42
|
+
*/
|
|
43
|
+
onChange?: (value: string) => void;
|
|
44
|
+
/**
|
|
45
|
+
* Callback triggered when all React.js one time password (OTP) fields are filled.
|
|
46
|
+
*/
|
|
47
|
+
onComplete?: (value: string) => void;
|
|
48
|
+
/**
|
|
49
|
+
* Placeholder text for input fields. Single character applies to all fields, longer strings apply character-by-character.
|
|
50
|
+
*/
|
|
51
|
+
placeholder?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Make React.js OTP input component read-only.
|
|
54
|
+
*/
|
|
55
|
+
readOnly?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Makes the input field required for form validation.
|
|
58
|
+
*/
|
|
59
|
+
required?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Sets the visual size of the React.js one time password (OTP) input. Use 'sm' for small or 'lg' for large input fields.
|
|
62
|
+
*/
|
|
63
|
+
size?: 'sm' | 'lg';
|
|
64
|
+
/**
|
|
65
|
+
* Input validation type: 'number' for digits only, or 'text' for free text.
|
|
66
|
+
*/
|
|
67
|
+
type?: 'number' | 'text';
|
|
68
|
+
/**
|
|
69
|
+
* Current value for controlled OTP input.
|
|
70
|
+
*/
|
|
71
|
+
value?: string | number;
|
|
72
|
+
}
|
|
73
|
+
export declare const COneTimePassword: React.ForwardRefExoticComponent<COneTimePasswordProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var PropTypes = require('prop-types');
|
|
6
|
+
var index = require('../../_virtual/index.js');
|
|
7
|
+
var CFormControlWrapper = require('../form/CFormControlWrapper.js');
|
|
8
|
+
var utils = require('./utils.js');
|
|
9
|
+
var getNextActiveElement = require('../../utils/getNextActiveElement.js');
|
|
10
|
+
var isRTL = require('../../utils/isRTL.js');
|
|
11
|
+
|
|
12
|
+
const COneTimePassword = React.forwardRef((_a, ref) => {
|
|
13
|
+
var { ariaLabel = (index, total) => `Digit ${index + 1} of ${total}`, autoSubmit = false, children, className, defaultValue, disabled = false, feedback, feedbackInvalid, feedbackValid, floatingClassName, floatingLabel, id, invalid, label, linear = true, masked = false, name, onChange, onComplete, placeholder, readOnly = false, required = false, size, text, tooltipFeedback, type = 'number', valid, value } = _a, rest = tslib_es6.__rest(_a, ["ariaLabel", "autoSubmit", "children", "className", "defaultValue", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "linear", "masked", "name", "onChange", "onComplete", "placeholder", "readOnly", "required", "size", "text", "tooltipFeedback", "type", "valid", "value"]);
|
|
14
|
+
const inputRefs = React.useRef([]);
|
|
15
|
+
const hiddenInputRef = React.useRef(null);
|
|
16
|
+
// Count valid OTP input children
|
|
17
|
+
const inputCount = React.useMemo(() => {
|
|
18
|
+
return React.Children.count(children);
|
|
19
|
+
}, [children]);
|
|
20
|
+
const [inputValues, setInputValues] = React.useState(() => {
|
|
21
|
+
var _a;
|
|
22
|
+
const initialValue = String((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : '');
|
|
23
|
+
return Array.from({ length: inputCount }, (_, i) => initialValue[i] || '');
|
|
24
|
+
});
|
|
25
|
+
// Update input values when value prop changes (controlled mode)
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
if (value !== undefined) {
|
|
28
|
+
const valueString = String(value);
|
|
29
|
+
setInputValues(Array.from({ length: inputCount }, (_, i) => valueString[i] || ''));
|
|
30
|
+
}
|
|
31
|
+
}, [value, inputCount]);
|
|
32
|
+
// Update hidden input and trigger events
|
|
33
|
+
const updateValue = React.useCallback((newValues) => {
|
|
34
|
+
var _a;
|
|
35
|
+
const newValue = newValues.join('');
|
|
36
|
+
if (hiddenInputRef.current) {
|
|
37
|
+
hiddenInputRef.current.value = newValue;
|
|
38
|
+
}
|
|
39
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
40
|
+
if (newValue.length === inputCount) {
|
|
41
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValue);
|
|
42
|
+
if (autoSubmit) {
|
|
43
|
+
const form = (_a = hiddenInputRef.current) === null || _a === void 0 ? void 0 : _a.closest('form');
|
|
44
|
+
if (form && typeof form.requestSubmit === 'function') {
|
|
45
|
+
form.requestSubmit();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, [autoSubmit, onChange, onComplete, inputCount]);
|
|
50
|
+
const handleInputChange = React.useCallback((index, event) => {
|
|
51
|
+
const inputValue = event.target.value;
|
|
52
|
+
if (inputValue.length === 1 && !utils.isValidInput(inputValue, type)) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const newValues = [...inputValues];
|
|
56
|
+
newValues[index] = inputValue.length === 1 ? inputValue : '';
|
|
57
|
+
setInputValues(newValues);
|
|
58
|
+
updateValue(newValues);
|
|
59
|
+
if (inputValue.length === 1) {
|
|
60
|
+
const nextInput = getNextActiveElement.default(inputRefs.current, event.target, true, false);
|
|
61
|
+
nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
|
|
62
|
+
}
|
|
63
|
+
}, [inputValues, type, updateValue]);
|
|
64
|
+
const handleInputFocus = React.useCallback((event) => {
|
|
65
|
+
const { target } = event;
|
|
66
|
+
if (target.value) {
|
|
67
|
+
setTimeout(() => {
|
|
68
|
+
target.select();
|
|
69
|
+
}, 0);
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
if (linear) {
|
|
73
|
+
const firstEmptyInput = inputRefs.current.find((input) => !(input === null || input === void 0 ? void 0 : input.value));
|
|
74
|
+
if (firstEmptyInput && firstEmptyInput !== target) {
|
|
75
|
+
firstEmptyInput.focus();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}, [linear]);
|
|
79
|
+
const handleKeyDown = React.useCallback((event) => {
|
|
80
|
+
const { key, target } = event;
|
|
81
|
+
if (key === 'Backspace' && target.value === '') {
|
|
82
|
+
const newValues = [...inputValues];
|
|
83
|
+
const prevInput = getNextActiveElement.default(inputRefs.current, target, false, false);
|
|
84
|
+
if (prevInput) {
|
|
85
|
+
const prevIndex = inputRefs.current.indexOf(prevInput);
|
|
86
|
+
if (prevIndex !== -1) {
|
|
87
|
+
newValues[prevIndex] = '';
|
|
88
|
+
setInputValues(newValues);
|
|
89
|
+
updateValue(newValues);
|
|
90
|
+
prevInput.focus();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (key === 'ArrowRight') {
|
|
96
|
+
if (linear && target.value === '') {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
const shouldMoveNext = !isRTL.default(target);
|
|
100
|
+
const nextInput = getNextActiveElement.default(inputRefs.current, target, shouldMoveNext, false);
|
|
101
|
+
nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
if (key === 'ArrowLeft') {
|
|
105
|
+
const shouldMoveNext = isRTL.default(target);
|
|
106
|
+
const prevInput = getNextActiveElement.default(inputRefs.current, target, shouldMoveNext, false);
|
|
107
|
+
prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
|
|
108
|
+
}
|
|
109
|
+
}, [inputValues, linear, updateValue]);
|
|
110
|
+
const handlePaste = React.useCallback((index, event) => {
|
|
111
|
+
var _a, _b;
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
const pastedData = event.clipboardData.getData('text');
|
|
114
|
+
const validChars = utils.extractValidChars(pastedData, type);
|
|
115
|
+
if (!validChars)
|
|
116
|
+
return;
|
|
117
|
+
const newValues = [...inputValues];
|
|
118
|
+
const startIndex = index;
|
|
119
|
+
for (let i = 0; i < validChars.length && startIndex + i < inputCount; i++) {
|
|
120
|
+
newValues[startIndex + i] = validChars[i];
|
|
121
|
+
}
|
|
122
|
+
setInputValues(newValues);
|
|
123
|
+
updateValue(newValues);
|
|
124
|
+
// Focus the next empty input or the last filled input
|
|
125
|
+
const nextEmptyIndex = startIndex + validChars.length;
|
|
126
|
+
if (nextEmptyIndex < inputCount) {
|
|
127
|
+
(_a = inputRefs.current[nextEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
(_b = inputRefs.current.at(-1)) === null || _b === void 0 ? void 0 : _b.focus();
|
|
131
|
+
}
|
|
132
|
+
}, [inputValues, type, updateValue, inputCount]);
|
|
133
|
+
let inputIndex = 0;
|
|
134
|
+
return (React.createElement(CFormControlWrapper.CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
|
|
135
|
+
React.createElement("div", Object.assign({ className: index.default('form-otp', {
|
|
136
|
+
[`form-otp-${size}`]: size,
|
|
137
|
+
}, className), role: "group", ref: ref }, rest),
|
|
138
|
+
React.Children.map(children, (child, index$1) => {
|
|
139
|
+
var _a;
|
|
140
|
+
if (!React.isValidElement(child) ||
|
|
141
|
+
((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'COneTimePasswordInput') {
|
|
142
|
+
return child;
|
|
143
|
+
}
|
|
144
|
+
const inputChild = child;
|
|
145
|
+
const currentInputIndex = inputIndex++;
|
|
146
|
+
return React.cloneElement(inputChild, Object.assign(Object.assign({}, inputChild.props), { type: masked ? 'password' : 'text', className: index.default({
|
|
147
|
+
'is-invalid': invalid,
|
|
148
|
+
'is-valid': valid,
|
|
149
|
+
}, inputChild.props.className), id: inputChild.props.id || (id ? `${id}-${currentInputIndex}` : undefined), name: inputChild.props.name || (name ? `${name}-${currentInputIndex}` : undefined), placeholder: inputChild.props.placeholder ||
|
|
150
|
+
(placeholder && placeholder.length > 1
|
|
151
|
+
? placeholder[currentInputIndex]
|
|
152
|
+
: placeholder), value: inputValues[currentInputIndex] || '', tabIndex: currentInputIndex === 0 ? 0 : inputValues[currentInputIndex - 1] ? 0 : -1, disabled: disabled || inputChild.props.disabled, readOnly: readOnly || inputChild.props.readOnly, required: required || inputChild.props.required, 'aria-label': inputChild.props['aria-label'] || ariaLabel(currentInputIndex, inputCount), inputMode: type === 'number' ? 'numeric' : 'text', pattern: type === 'number' ? '[0-9]*' : '.*', onInput: (event) => {
|
|
153
|
+
var _a, _b;
|
|
154
|
+
handleInputChange(currentInputIndex, event);
|
|
155
|
+
(_b = (_a = inputChild.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
156
|
+
}, onFocus: (event) => {
|
|
157
|
+
var _a, _b;
|
|
158
|
+
handleInputFocus(event);
|
|
159
|
+
(_b = (_a = inputChild.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
160
|
+
}, onKeyDown: (event) => {
|
|
161
|
+
var _a, _b;
|
|
162
|
+
handleKeyDown(currentInputIndex, event);
|
|
163
|
+
(_b = (_a = inputChild.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
164
|
+
}, onPaste: (event) => {
|
|
165
|
+
var _a, _b;
|
|
166
|
+
handlePaste(index$1, event);
|
|
167
|
+
(_b = (_a = inputChild.props).onPaste) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
168
|
+
}, ref: (el) => {
|
|
169
|
+
inputRefs.current[currentInputIndex] = el;
|
|
170
|
+
} }));
|
|
171
|
+
}),
|
|
172
|
+
React.createElement("input", { type: "hidden", id: id, name: name, value: inputValues.join(''), disabled: disabled, ref: hiddenInputRef }))));
|
|
173
|
+
});
|
|
174
|
+
COneTimePassword.propTypes = Object.assign({ ariaLabel: PropTypes.func, autoSubmit: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), disabled: PropTypes.bool, id: PropTypes.string, linear: PropTypes.bool, masked: PropTypes.bool, name: PropTypes.string, onChange: PropTypes.func, onComplete: PropTypes.func, placeholder: PropTypes.string, readOnly: PropTypes.bool, required: PropTypes.bool, size: PropTypes.oneOf(['sm', 'lg']), type: PropTypes.oneOf(['number', 'text']), value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }, CFormControlWrapper.CFormControlWrapper.propTypes);
|
|
175
|
+
COneTimePassword.displayName = 'COneTimePassword';
|
|
176
|
+
|
|
177
|
+
exports.COneTimePassword = COneTimePassword;
|
|
178
|
+
//# sourceMappingURL=COneTimePassword.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"COneTimePassword.js","sources":["../../../../src/components/one-time-password-input/COneTimePassword.tsx"],"sourcesContent":[null],"names":["forwardRef","__rest","useRef","useMemo","Children","useState","useEffect","useCallback","isValidInput","getNextActiveElement","isRTL","extractValidChars","CFormControlWrapper","classNames","index","isValidElement","cloneElement"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { InputHTMLAttributes } from 'react';
|
|
2
|
+
export interface COneTimePasswordInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
+
/**
|
|
4
|
+
* A string of all className you want applied to the component.
|
|
5
|
+
*/
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const COneTimePasswordInput: React.ForwardRefExoticComponent<COneTimePasswordInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var index = require('../../_virtual/index.js');
|
|
6
|
+
|
|
7
|
+
const COneTimePasswordInput = React.forwardRef((_a, ref) => {
|
|
8
|
+
var { className } = _a, rest = tslib_es6.__rest(_a, ["className"]);
|
|
9
|
+
return (React.createElement("input", Object.assign({ className: index.default('form-otp-control', className), maxLength: 1, autoComplete: "off", ref: ref }, rest)));
|
|
10
|
+
});
|
|
11
|
+
COneTimePasswordInput.displayName = 'COneTimePasswordInput';
|
|
12
|
+
|
|
13
|
+
exports.COneTimePasswordInput = COneTimePasswordInput;
|
|
14
|
+
//# sourceMappingURL=COneTimePasswordInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"COneTimePasswordInput.js","sources":["../../../../src/components/one-time-password-input/COneTimePasswordInput.tsx"],"sourcesContent":[null],"names":["forwardRef","__rest","classNames"],"mappings":";;;;;;AAUO,MAAM,qBAAqB,GAAGA,gBAAU,CAC7C,CAAC,EAAsB,EAAE,GAAG,KAAI;AAA/B,IAAA,IAAA,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAC,gBAAA,CAAA,EAAA,EAApB,aAAsB,CAAF;IACnB,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,SAAS,EAAEC,aAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,EACpD,SAAS,EAAE,CAAC,EACZ,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,CAAA,CACR;AAEN,CAAC;AAGH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { COneTimePassword } from './COneTimePassword';
|
|
2
|
+
import { COneTimePasswordInput } from './COneTimePasswordInput';
|
|
3
|
+
export { COneTimePassword, COneTimePasswordInput };
|
|
4
|
+
export type { COneTimePasswordProps } from './COneTimePassword';
|
|
5
|
+
export type { COneTimePasswordInputProps } from './COneTimePasswordInput';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const isValidInput = (inputValue, type) => {
|
|
4
|
+
if (inputValue.length !== 1)
|
|
5
|
+
return false;
|
|
6
|
+
switch (type) {
|
|
7
|
+
case 'number': {
|
|
8
|
+
return /^\d$/.test(inputValue);
|
|
9
|
+
}
|
|
10
|
+
default: {
|
|
11
|
+
return /^.$/.test(inputValue);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const extractValidChars = (text, type) => {
|
|
16
|
+
switch (type) {
|
|
17
|
+
case 'number': {
|
|
18
|
+
return text.replaceAll(/\D/g, '');
|
|
19
|
+
}
|
|
20
|
+
default: {
|
|
21
|
+
return text;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.extractValidChars = extractValidChars;
|
|
27
|
+
exports.isValidInput = isValidInput;
|
|
28
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/one-time-password-input/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;MAAa,YAAY,GAAG,CAAC,UAAkB,EAAE,IAAuB,KAAa;AACnF,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;IAEzC,QAAQ,IAAI;QACV,KAAK,QAAQ,EAAE;AACb,YAAA,OAAO,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QAChC;QACA,SAAS;AACP,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;QAC/B;;AAEJ;MAEa,iBAAiB,GAAG,CAAC,IAAY,EAAE,IAAuB,KAAY;IACjF,QAAQ,IAAI;QACV,KAAK,QAAQ,EAAE;YACb,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC;QACnC;QACA,SAAS;AACP,YAAA,OAAO,IAAI;QACb;;AAEJ;;;;;"}
|
|
@@ -9,8 +9,32 @@ export interface CTimePickerProps extends Omit<CFormControlWrapperProps, 'floati
|
|
|
9
9
|
* @since 4.8.0
|
|
10
10
|
*/
|
|
11
11
|
ampm?: 'auto' | boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Accessible label for the hours selection element.
|
|
14
|
+
*/
|
|
15
|
+
ariaSelectHoursLabel?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Accessible label for the AM/PM selection element.
|
|
18
|
+
*
|
|
19
|
+
* @since 5.22.0
|
|
20
|
+
*/
|
|
21
|
+
ariaSelectMeridiemLabel?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Accessible label for the minutes selection element.
|
|
24
|
+
*
|
|
25
|
+
* @since 5.22.0
|
|
26
|
+
*/
|
|
27
|
+
ariaSelectMinutesLabel?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Accessible label for the seconds selection element.
|
|
30
|
+
*
|
|
31
|
+
* @since 5.22.0
|
|
32
|
+
*/
|
|
33
|
+
ariaSelectSecondsLabel?: string;
|
|
12
34
|
/**
|
|
13
35
|
* A string of all className you want applied to the component.
|
|
36
|
+
*
|
|
37
|
+
* @since 5.22.0
|
|
14
38
|
*/
|
|
15
39
|
className?: string;
|
|
16
40
|
/**
|
|
@@ -14,13 +14,15 @@ require('@popperjs/core');
|
|
|
14
14
|
|
|
15
15
|
var _a, _b, _c, _d, _e, _f;
|
|
16
16
|
const CTimePicker = React.forwardRef((_a, ref) => {
|
|
17
|
-
var { ampm = 'auto', cancelButton = 'Cancel', cancelButtonColor = 'primary', cancelButtonSize = 'sm', cancelButtonVariant = 'ghost', className, cleaner = true, confirmButton = 'OK', confirmButtonColor = 'primary', confirmButtonSize = 'sm', confirmButtonVariant, container = 'dropdown', disabled, feedback, feedbackInvalid, feedbackValid, footer = true, hours, id, indicator = true, inputOnChangeDelay = 750, inputReadOnly, invalid, label, locale = 'default', minutes = true, name, onTimeChange, onHide, onShow, placeholder = 'Select time', portal = false, required, seconds = true, size, text, time, tooltipFeedback, valid, variant = 'roll', visible } = _a, rest = tslib_es6.__rest(_a, ["ampm", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "hours", "id", "indicator", "inputOnChangeDelay", "inputReadOnly", "invalid", "label", "locale", "minutes", "name", "onTimeChange", "onHide", "onShow", "placeholder", "portal", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
|
|
17
|
+
var { ampm = 'auto', ariaSelectHoursLabel = 'Select hours', ariaSelectMeridiemLabel = 'Select AM/PM', ariaSelectMinutesLabel = 'Select minutes', ariaSelectSecondsLabel = 'Select seconds', cancelButton = 'Cancel', cancelButtonColor = 'primary', cancelButtonSize = 'sm', cancelButtonVariant = 'ghost', className, cleaner = true, confirmButton = 'OK', confirmButtonColor = 'primary', confirmButtonSize = 'sm', confirmButtonVariant, container = 'dropdown', disabled, feedback, feedbackInvalid, feedbackValid, footer = true, hours, id, indicator = true, inputOnChangeDelay = 750, inputReadOnly, invalid, label, locale = 'default', minutes = true, name, onTimeChange, onHide, onShow, placeholder = 'Select time', portal = false, required, seconds = true, size, text, time, tooltipFeedback, valid, variant = 'roll', visible } = _a, rest = tslib_es6.__rest(_a, ["ampm", "ariaSelectHoursLabel", "ariaSelectMeridiemLabel", "ariaSelectMinutesLabel", "ariaSelectSecondsLabel", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "hours", "id", "indicator", "inputOnChangeDelay", "inputReadOnly", "invalid", "label", "locale", "minutes", "name", "onTimeChange", "onHide", "onShow", "placeholder", "portal", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
|
|
18
18
|
const formRef = React.useRef(null);
|
|
19
19
|
const inputRef = React.useRef(null);
|
|
20
|
+
const timePickerBodyRef = React.useRef(null);
|
|
21
|
+
const columnRefs = React.useRef([]);
|
|
20
22
|
const [date, setDate] = React.useState(utils.convertTimeToDate(time));
|
|
21
23
|
const [initialDate, setInitialDate] = React.useState(null);
|
|
22
24
|
const [isValid, setIsValid] = React.useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
|
|
23
|
-
const [_ampm, setAmPm] = React.useState(date ? utils.getAmPm(new Date(date), locale) :
|
|
25
|
+
const [_ampm, setAmPm] = React.useState(date ? utils.getAmPm(new Date(date), locale) : null);
|
|
24
26
|
const [_visible, setVisible] = React.useState(visible);
|
|
25
27
|
const [localizedTimePartials, setLocalizedTimePartials] = React.useState({
|
|
26
28
|
listOfHours: [],
|
|
@@ -89,17 +91,26 @@ const CTimePicker = React.forwardRef((_a, ref) => {
|
|
|
89
91
|
}, inputOnChangeDelay);
|
|
90
92
|
const handleTimeChange = (set, value) => {
|
|
91
93
|
const _date = date || new Date('1970-01-01');
|
|
92
|
-
if (set === '
|
|
94
|
+
if (set === 'meridiem') {
|
|
95
|
+
const currentHours = _date.getHours();
|
|
93
96
|
if (value === 'am') {
|
|
94
|
-
|
|
97
|
+
setAmPm('am');
|
|
98
|
+
// Convert PM hours (12-23) to AM hours (0-11)
|
|
99
|
+
if (currentHours >= 12) {
|
|
100
|
+
_date.setHours(currentHours - 12);
|
|
101
|
+
}
|
|
95
102
|
}
|
|
96
103
|
if (value === 'pm') {
|
|
97
|
-
|
|
104
|
+
setAmPm('pm');
|
|
105
|
+
// Convert AM hours (0-11) to PM hours (12-23)
|
|
106
|
+
if (currentHours < 12) {
|
|
107
|
+
_date.setHours(currentHours + 12);
|
|
108
|
+
}
|
|
98
109
|
}
|
|
99
110
|
}
|
|
100
111
|
if (set === 'hours') {
|
|
101
112
|
if (localizedTimePartials && localizedTimePartials.hour12) {
|
|
102
|
-
_date.setHours(utils.convert12hTo24h(_ampm, Number.parseInt(value)));
|
|
113
|
+
_date.setHours(utils.convert12hTo24h(_ampm !== null && _ampm !== void 0 ? _ampm : 'am', Number.parseInt(value)));
|
|
103
114
|
}
|
|
104
115
|
else {
|
|
105
116
|
_date.setHours(Number.parseInt(value));
|
|
@@ -117,7 +128,7 @@ const CTimePicker = React.forwardRef((_a, ref) => {
|
|
|
117
128
|
const InputGroup = () => (React.createElement("div", { className: "time-picker-input-group" },
|
|
118
129
|
React.createElement("input", { autoComplete: "off", className: "time-picker-input", disabled: disabled, id: id, name: name, onChange: (event) => handleOnChange(event.target.value), placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
|
|
119
130
|
indicator &&
|
|
120
|
-
(typeof indicator === 'boolean' ? (React.createElement("div", Object.assign({ className: "time-picker-indicator" }, (disabled
|
|
131
|
+
(typeof indicator === 'boolean' ? (React.createElement("div", Object.assign({ className: "time-picker-indicator" }, (!disabled && {
|
|
121
132
|
onClick: () => setVisible(!_visible),
|
|
122
133
|
onKeyDown: (event) => {
|
|
123
134
|
if (event.key === 'Enter') {
|
|
@@ -135,17 +146,17 @@ const CTimePicker = React.forwardRef((_a, ref) => {
|
|
|
135
146
|
const TimePickerSelect = () => {
|
|
136
147
|
return (React.createElement(React.Fragment, null,
|
|
137
148
|
React.createElement("span", { className: "time-picker-inline-icon" }),
|
|
138
|
-
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('hours', event.target.value), value: utils.getSelectedHour(date, locale) }, localizedTimePartials &&
|
|
149
|
+
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('hours', event.target.value), value: utils.getSelectedHour(date, locale), "aria-label": ariaSelectHoursLabel }, localizedTimePartials &&
|
|
139
150
|
localizedTimePartials.listOfHours.map((option, index) => (React.createElement("option", { value: option.value.toString(), key: index }, option.label)))),
|
|
140
151
|
minutes && (React.createElement(React.Fragment, null,
|
|
141
152
|
React.createElement(React.Fragment, null, ":"),
|
|
142
|
-
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('minutes', event.target.value), value: utils.getSelectedMinutes(date) }, localizedTimePartials &&
|
|
153
|
+
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('minutes', event.target.value), value: utils.getSelectedMinutes(date), "aria-label": ariaSelectMinutesLabel }, localizedTimePartials &&
|
|
143
154
|
localizedTimePartials.listOfMinutes.map((option, index) => (React.createElement("option", { value: option.value.toString(), key: index }, option.label)))))),
|
|
144
155
|
seconds && (React.createElement(React.Fragment, null,
|
|
145
156
|
React.createElement(React.Fragment, null, ":"),
|
|
146
|
-
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('seconds', event.target.value), value: utils.getSelectedSeconds(date) }, localizedTimePartials &&
|
|
157
|
+
React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('seconds', event.target.value), value: utils.getSelectedSeconds(date), "aria-label": ariaSelectSecondsLabel }, localizedTimePartials &&
|
|
147
158
|
localizedTimePartials.listOfSeconds.map((option, index) => (React.createElement("option", { value: option.value.toString(), key: index }, option.label)))))),
|
|
148
|
-
localizedTimePartials && localizedTimePartials.hour12 && (React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('
|
|
159
|
+
localizedTimePartials && localizedTimePartials.hour12 && (React.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: (event) => handleTimeChange('meridiem', event.target.value), value: _ampm !== null && _ampm !== void 0 ? _ampm : 'am', "aria-label": ariaSelectMeridiemLabel },
|
|
149
160
|
React.createElement("option", { value: "am" }, "AM"),
|
|
150
161
|
React.createElement("option", { value: "pm" }, "PM")))));
|
|
151
162
|
};
|
|
@@ -174,16 +185,24 @@ const CTimePicker = React.forwardRef((_a, ref) => {
|
|
|
174
185
|
setVisible(true);
|
|
175
186
|
onShow === null || onShow === void 0 ? void 0 : onShow();
|
|
176
187
|
}, portal: portal, toggler: InputGroup(), visible: _visible }, rest, { ref: ref }),
|
|
177
|
-
React.createElement("div", { className: index.default('time-picker-body', {
|
|
188
|
+
React.createElement("div", Object.assign({ className: index.default('time-picker-body', {
|
|
178
189
|
['time-picker-roll']: variant === 'roll',
|
|
179
|
-
}) }, variant === 'select' ? (React.createElement(TimePickerSelect, null)) : (React.createElement(React.Fragment, null,
|
|
180
|
-
React.createElement(CTimePickerRollCol.CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: (index) => handleTimeChange('hours', index.toString()), selected: utils.getSelectedHour(date, locale, ampm)
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
190
|
+
}) }, (variant !== 'select' && { role: 'group' }), { ref: timePickerBodyRef }), variant === 'select' ? (React.createElement(TimePickerSelect, null)) : (React.createElement(React.Fragment, null,
|
|
191
|
+
React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectHoursLabel, columnIndex: 0, columnRefs: columnRefs.current, elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: (index) => handleTimeChange('hours', index.toString()), selected: utils.getSelectedHour(date, locale, ampm), ref: (node) => {
|
|
192
|
+
columnRefs.current[0] = node;
|
|
193
|
+
} }),
|
|
194
|
+
minutes && (React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectMinutesLabel, columnIndex: 1, columnRefs: columnRefs.current, elements: localizedTimePartials && localizedTimePartials.listOfMinutes, onClick: (index) => handleTimeChange('minutes', index.toString()), selected: utils.getSelectedMinutes(date), ref: (node) => {
|
|
195
|
+
columnRefs.current[1] = node;
|
|
196
|
+
} })),
|
|
197
|
+
seconds && (React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectSecondsLabel, columnIndex: minutes ? 2 : 1, columnRefs: columnRefs.current, elements: localizedTimePartials && localizedTimePartials.listOfSeconds, onClick: (index) => handleTimeChange('seconds', index.toString()), selected: utils.getSelectedSeconds(date), ref: (node) => {
|
|
198
|
+
columnRefs.current[minutes ? 2 : 1] = node;
|
|
199
|
+
} })),
|
|
200
|
+
localizedTimePartials && localizedTimePartials.hour12 && (React.createElement(CTimePickerRollCol.CTimePickerRollCol, { ariaLabel: ariaSelectMeridiemLabel, columnIndex: (minutes ? 1 : 0) + (seconds ? 1 : 0) + 1, columnRefs: columnRefs.current, elements: [
|
|
184
201
|
{ value: 'am', label: 'AM' },
|
|
185
202
|
{ value: 'pm', label: 'PM' },
|
|
186
|
-
], onClick: (value) => handleTimeChange('
|
|
203
|
+
], onClick: (value) => handleTimeChange('meridiem', value), selected: _ampm, ref: (node) => {
|
|
204
|
+
columnRefs.current[(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1] = node;
|
|
205
|
+
} }))))))));
|
|
187
206
|
});
|
|
188
207
|
CTimePicker.propTypes = Object.assign(Object.assign(Object.assign({}, CFormControlWrapper.CFormControlWrapper.propTypes), CPicker.CPicker.propTypes), { ampm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]), cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), cancelButtonColor: (_a = CButton.CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, cancelButtonSize: (_b = CButton.CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, cancelButtonVariant: (_c = CButton.CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, className: PropTypes.string, confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), confirmButtonColor: (_d = CButton.CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, confirmButtonSize: (_e = CButton.CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, confirmButtonVariant: (_f = CButton.CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant, hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]), id: PropTypes.string, inputOnChangeDelay: PropTypes.number, locale: PropTypes.string, minutes: PropTypes.oneOfType([
|
|
189
208
|
PropTypes.bool,
|