react-restyle-components 0.3.77 → 0.3.81
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/lib/src/core-components/index.d.ts +0 -10
- package/lib/src/core-components/index.d.ts.map +1 -1
- package/lib/src/core-components/index.js +0 -10
- package/lib/src/core-components/src/components/Badge/Badge.d.ts +5 -5
- package/lib/src/core-components/src/components/FormField/FormField.d.ts +38 -3
- package/lib/src/core-components/src/components/FormField/FormField.d.ts.map +1 -1
- package/lib/src/core-components/src/components/FormField/FormField.js +77 -4
- package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.d.ts +20 -0
- package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.js +37 -0
- package/lib/src/core-components/src/components/FormField/components/CheckboxInput.d.ts +17 -0
- package/lib/src/core-components/src/components/FormField/components/CheckboxInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/CheckboxInput.js +8 -0
- package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.d.ts +22 -0
- package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.js +168 -0
- package/lib/src/core-components/src/components/FormField/components/DatePickerInput.d.ts +18 -0
- package/lib/src/core-components/src/components/FormField/components/DatePickerInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/DatePickerInput.js +29 -0
- package/lib/src/core-components/src/components/FormField/components/DropdownInput.d.ts +18 -0
- package/lib/src/core-components/src/components/FormField/components/DropdownInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/DropdownInput.js +70 -0
- package/lib/src/core-components/src/components/FormField/components/OtpInput.d.ts +18 -0
- package/lib/src/core-components/src/components/FormField/components/OtpInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/OtpInput.js +81 -0
- package/lib/src/core-components/src/components/FormField/components/PasswordInput.d.ts +17 -0
- package/lib/src/core-components/src/components/FormField/components/PasswordInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/PasswordInput.js +18 -0
- package/lib/src/core-components/src/components/FormField/components/PinInput.d.ts +18 -0
- package/lib/src/core-components/src/components/FormField/components/PinInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/PinInput.js +75 -0
- package/lib/src/core-components/src/components/FormField/components/RadioInput.d.ts +23 -0
- package/lib/src/core-components/src/components/FormField/components/RadioInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/RadioInput.js +54 -0
- package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.d.ts +20 -0
- package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.js +94 -0
- package/lib/src/core-components/src/components/FormField/components/ToggleInput.d.ts +17 -0
- package/lib/src/core-components/src/components/FormField/components/ToggleInput.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/ToggleInput.js +36 -0
- package/lib/src/core-components/src/components/FormField/components/index.d.ts +12 -0
- package/lib/src/core-components/src/components/FormField/components/index.d.ts.map +1 -0
- package/lib/src/core-components/src/components/FormField/components/index.js +11 -0
- package/lib/src/core-components/src/components/{Input/CSSMultilineInput → FormField}/css-properties.d.ts.map +1 -1
- package/lib/src/core-components/src/components/{Form → FormField}/toggle.css +1 -0
- package/lib/src/core-components/src/components/index.d.ts +1 -2
- package/lib/src/core-components/src/components/index.d.ts.map +1 -1
- package/lib/src/core-components/src/components/index.js +1 -2
- package/lib/src/core-components/src/core-components/CoreButton/CoreButton.d.ts +2 -2
- package/lib/src/core-components/src/core-components/atoms/Input/Input.d.ts +5 -1
- package/lib/src/core-components/src/core-components/atoms/Input/Input.d.ts.map +1 -1
- package/lib/src/core-components/src/core-components/atoms/Input/Input.js +62 -2
- package/lib/src/core-components/src/core-components/atoms/Label/Label.d.ts +2 -0
- package/lib/src/core-components/src/core-components/atoms/Label/Label.d.ts.map +1 -1
- package/lib/src/core-components/src/core-components/atoms/Label/Label.js +16 -3
- package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.d.ts +5 -1
- package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.d.ts.map +1 -1
- package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.js +59 -2
- package/lib/src/core-components/src/tc.global.css +8 -2
- package/lib/src/core-components/src/tc.module.css +1 -1
- package/lib/src/core-components/src/utils/utility.util.d.ts +1 -0
- package/lib/src/core-components/src/utils/utility.util.d.ts.map +1 -1
- package/lib/src/core-components/src/utils/utility.util.js +9 -0
- package/package.json +1 -1
- package/lib/src/core-components/src/components/Form/form.component.d.ts +0 -106
- package/lib/src/core-components/src/components/Form/form.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/Form/form.component.js +0 -88
- package/lib/src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.d.ts +0 -13
- package/lib/src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.js +0 -103
- package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.d.ts +0 -10
- package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.js +0 -44
- package/lib/src/core-components/src/components/Input/InputOTP/input-otp.component.d.ts +0 -14
- package/lib/src/core-components/src/components/Input/InputOTP/input-otp.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/Input/InputOTP/input-otp.component.js +0 -62
- package/lib/src/core-components/src/components/Input/InputOTP/input-otp.styles.css +0 -35
- package/lib/src/core-components/src/components/Input/InputPin/input-pin.component.d.ts +0 -16
- package/lib/src/core-components/src/components/Input/InputPin/input-pin.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/Input/InputPin/input-pin.component.js +0 -76
- package/lib/src/core-components/src/components/Input/InputPin/input.styles.css +0 -35
- package/lib/src/core-components/src/components/check-box/checkBox.component.d.ts +0 -12
- package/lib/src/core-components/src/components/check-box/checkBox.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/check-box/checkBox.component.js +0 -20
- package/lib/src/core-components/src/components/date-picker/date-picker.component.d.ts +0 -12
- package/lib/src/core-components/src/components/date-picker/date-picker.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/date-picker/date-picker.component.js +0 -20
- package/lib/src/core-components/src/components/input-dropdown/input-dropdown.component.d.ts +0 -10
- package/lib/src/core-components/src/components/input-dropdown/input-dropdown.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/input-dropdown/input-dropdown.component.js +0 -44
- package/lib/src/core-components/src/components/radio/radio.component.d.ts +0 -9
- package/lib/src/core-components/src/components/radio/radio.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/radio/radio.component.js +0 -20
- package/lib/src/core-components/src/components/text-input-dropdown/text-input-dropdown.component.d.ts +0 -16
- package/lib/src/core-components/src/components/text-input-dropdown/text-input-dropdown.component.d.ts.map +0 -1
- package/lib/src/core-components/src/components/text-input-dropdown/text-input-dropdown.component.js +0 -91
- /package/lib/src/core-components/src/components/{Input/CSSMultilineInput → FormField}/css-properties.d.ts +0 -0
- /package/lib/src/core-components/src/components/{Input/CSSMultilineInput → FormField}/css-properties.js +0 -0
package/package.json
CHANGED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './toggle.css';
|
|
3
|
-
interface LabelProps {
|
|
4
|
-
htmlFor: string;
|
|
5
|
-
hasError?: boolean;
|
|
6
|
-
style?: any;
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
export declare const Label: React.FunctionComponent<LabelProps>;
|
|
10
|
-
interface InputWrapperProps {
|
|
11
|
-
id?: string;
|
|
12
|
-
label?: string;
|
|
13
|
-
className?: string;
|
|
14
|
-
hasError?: boolean;
|
|
15
|
-
style?: any;
|
|
16
|
-
ref?: any;
|
|
17
|
-
children?: React.ReactNode;
|
|
18
|
-
}
|
|
19
|
-
export declare const InputWrapper: React.FunctionComponent<InputWrapperProps>;
|
|
20
|
-
interface InputProps extends InputWrapperProps {
|
|
21
|
-
value?: any;
|
|
22
|
-
defaultValue?: any;
|
|
23
|
-
name?: string;
|
|
24
|
-
placeholder?: string;
|
|
25
|
-
type?: string;
|
|
26
|
-
required?: boolean;
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
className?: string;
|
|
29
|
-
labelClassName?: string;
|
|
30
|
-
rows?: number;
|
|
31
|
-
style?: any;
|
|
32
|
-
wrapperStyle?: any;
|
|
33
|
-
hasError?: boolean;
|
|
34
|
-
pattern?: any;
|
|
35
|
-
maxLength?: number;
|
|
36
|
-
isAutoFocus?: boolean;
|
|
37
|
-
input2isBlurEnable?: boolean;
|
|
38
|
-
onChange?: (e: any) => void;
|
|
39
|
-
onBlur?: (e: any) => void;
|
|
40
|
-
onKeyDown?: (e: any) => void;
|
|
41
|
-
onKeyUp?: (e: any) => void;
|
|
42
|
-
inputRef?: any;
|
|
43
|
-
}
|
|
44
|
-
export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<any>>;
|
|
45
|
-
export declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<any>>;
|
|
46
|
-
export declare const MultilineInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
|
-
interface InputRadioProps extends InputWrapperProps {
|
|
48
|
-
values?: any[];
|
|
49
|
-
value?: string;
|
|
50
|
-
name?: string;
|
|
51
|
-
required?: boolean;
|
|
52
|
-
disabled?: boolean;
|
|
53
|
-
labelStyle?: any;
|
|
54
|
-
onChange?: (e: any) => void;
|
|
55
|
-
}
|
|
56
|
-
export declare const InputRadio: (props: InputRadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
57
|
-
interface InputDateProps extends InputWrapperProps {
|
|
58
|
-
value?: any;
|
|
59
|
-
name?: string;
|
|
60
|
-
disabled?: boolean;
|
|
61
|
-
hasError?: boolean;
|
|
62
|
-
format?: string;
|
|
63
|
-
isCalenderOpen?: boolean;
|
|
64
|
-
minDate?: Date;
|
|
65
|
-
maxDate?: Date;
|
|
66
|
-
onChange?: (e: any) => void;
|
|
67
|
-
onCalendarToggle?: (status: boolean) => void;
|
|
68
|
-
onFocusRemove?: (date: any) => void;
|
|
69
|
-
}
|
|
70
|
-
export declare const InputDate: ({ name, value, label, id, hasError, disabled, format, onChange, onFocusRemove, }: InputDateProps) => import("react/jsx-runtime").JSX.Element;
|
|
71
|
-
interface InputDateTimeProps extends InputWrapperProps {
|
|
72
|
-
type?: string;
|
|
73
|
-
id?: string;
|
|
74
|
-
label?: string;
|
|
75
|
-
hasError?: boolean;
|
|
76
|
-
className?: string;
|
|
77
|
-
min?: string;
|
|
78
|
-
onChange?: (value: any) => void;
|
|
79
|
-
}
|
|
80
|
-
export declare const InputDateTime: ({ type, id, label, hasError, className, min, onChange, }: InputDateTimeProps) => import("react/jsx-runtime").JSX.Element;
|
|
81
|
-
export declare const CheckBox: (props: any) => import("react/jsx-runtime").JSX.Element;
|
|
82
|
-
interface InputFileProps extends InputWrapperProps {
|
|
83
|
-
value?: any;
|
|
84
|
-
name?: string;
|
|
85
|
-
placeholder?: string;
|
|
86
|
-
disabled?: boolean;
|
|
87
|
-
accept?: string;
|
|
88
|
-
multiple?: boolean;
|
|
89
|
-
hasError?: boolean;
|
|
90
|
-
onChange?: (e: any) => void;
|
|
91
|
-
}
|
|
92
|
-
export declare const InputFile: (props: InputFileProps) => import("react/jsx-runtime").JSX.Element;
|
|
93
|
-
interface ToggleProps extends InputWrapperProps {
|
|
94
|
-
disabled?: boolean;
|
|
95
|
-
isToggleLabel?: boolean;
|
|
96
|
-
defaultChecked?: boolean;
|
|
97
|
-
className?: string;
|
|
98
|
-
icons?: any;
|
|
99
|
-
value?: boolean;
|
|
100
|
-
name?: string;
|
|
101
|
-
onChange?: (e: boolean) => void;
|
|
102
|
-
style?: any;
|
|
103
|
-
}
|
|
104
|
-
export declare const Toggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;
|
|
105
|
-
export {};
|
|
106
|
-
//# sourceMappingURL=form.component.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"form.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Form/form.component.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React, { useState, useEffect } from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import s from '../../tc.module.css';
|
|
5
|
-
import { cn } from '../../utils';
|
|
6
|
-
import './toggle.css';
|
|
7
|
-
export const Label = (props) => (_jsx(_Fragment, { children: _jsx("label", { htmlFor: props.htmlFor, className: cn(s['block'], s['text-3xs'], s['font-medium'], s['mb-1'], {
|
|
8
|
-
[s['text-red-400']]: props.hasError,
|
|
9
|
-
[s['text-current']]: !props.hasError,
|
|
10
|
-
}), style: { ...props.style }, children: props.children }) }));
|
|
11
|
-
export const InputWrapper = (props) => (_jsxs("div", { className: cn(props.className), ref: props.ref, children: [_jsx(Label, { htmlFor: props.id || '', hasError: props.hasError, style: { ...props.style }, children: _jsx("span", { className: cn(s['dark:text-white'], s['w-10']), children: props.label }) }), props.children] }));
|
|
12
|
-
export const Input = React.forwardRef((props, ref) => {
|
|
13
|
-
const handleKeyPress = (e) => {
|
|
14
|
-
const key = e.key;
|
|
15
|
-
const regex = props.pattern;
|
|
16
|
-
if (regex && !regex?.test(key)) {
|
|
17
|
-
e.preventDefault();
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: cn(props.className, s['leading-4'], s['p-2'], s['dark:bg-boxdark'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
|
|
21
|
-
[s['border-red']]: props.hasError,
|
|
22
|
-
[s['border-gray-300']]: !props.hasError,
|
|
23
|
-
}), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }) }));
|
|
24
|
-
});
|
|
25
|
-
export const InputPassword = React.forwardRef((props, ref) => {
|
|
26
|
-
const [showPassword, setShowPassword] = useState(false);
|
|
27
|
-
const handleMouseDown = () => {
|
|
28
|
-
setShowPassword(true);
|
|
29
|
-
};
|
|
30
|
-
const handleMouseUp = () => {
|
|
31
|
-
setShowPassword(false);
|
|
32
|
-
};
|
|
33
|
-
return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['relative']), children: [_jsx("input", { type: showPassword ? 'text' : 'password', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), className: cn(props.className, s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['dark:bg-boxdark'], {
|
|
34
|
-
[s['border-red']]: props.hasError,
|
|
35
|
-
[s['border-gray-300']]: !props.hasError,
|
|
36
|
-
}), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }), _jsx("div", { className: cn(s['flex'], s['absolute'], s['right-3']), children: _jsx("svg", { className: cn(s['h-6'], s['dark:bg-boxdark']), fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: showPassword ? (_jsx("path", { fill: "currentColor", d: "M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" })) : (_jsx("path", { fill: "currentColor", d: "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z" })) }) })] }) }));
|
|
37
|
-
});
|
|
38
|
-
export const MultilineInput = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, className: props.className, children: _jsx("textarea", { id: props.id, autoComplete: "given-name", value: props.value, disabled: props.disabled, style: props.style, rows: props.rows, onKeyUp: props.onKeyUp && props.onKeyUp, placeholder: props.placeholder, onChange: (e) => props.onChange && props.onChange(e.target.value), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['dark:bg-boxdark'], {
|
|
39
|
-
[s['border-red']]: props.hasError,
|
|
40
|
-
[s['border-gray-300']]: !props.hasError,
|
|
41
|
-
}), defaultValue: props.defaultValue }) }));
|
|
42
|
-
export const InputRadio = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.labelStyle, children: props.values?.map((item, key) => (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), onClick: () => {
|
|
43
|
-
props.onChange && props.onChange(item.value);
|
|
44
|
-
}, children: [_jsx("input", { type: "radio", id: props.id, name: props.name, value: item.value, checked: item.value == props.value ? true : false, onChange: () => props.onChange && props.onChange(item.value), className: cn(s['w-4'], s['h-4'], s['text-blue-600'], s['bg-gray-100'], s['border-gray-300'], s['focus:ring-blue-500'], s['dark:focus:ring-blue-600'], s['dark:ring-offset-gray-800'], s['focus:ring-2'], s['dark:bg-gray-700'], s['dark:border-gray-600']) }, key), _jsx("span", { children: item.label })] }, key))) }));
|
|
45
|
-
export const InputDate = ({ name, value, label, id, hasError, disabled, format, onChange, onFocusRemove, }) => (_jsx(InputWrapper, { label: label, id: id, hasError: hasError, children: _jsx("input", { type: "date", id: id, name: name, disabled: disabled || false, value: value, onChange: (e) => onChange && onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
|
|
46
|
-
[s['border-red']]: hasError,
|
|
47
|
-
[s['border-gray-300']]: !hasError,
|
|
48
|
-
}) }) }));
|
|
49
|
-
export const InputDateTime = ({ type, id, label, hasError, className, min, onChange, }) => (_jsx(InputWrapper, { label: label, id: id, hasError: hasError, children: _jsx("input", { type: type || 'datetime-local', id: id || 'interviewDateTime', name: "interviewDateTime", className: cn(s['border'], s['border-gray-300'], s['rounded-md'], s['p-2'], s['w-full'], {
|
|
50
|
-
[s['border-red']]: hasError,
|
|
51
|
-
[s['border-gray-300']]: !hasError,
|
|
52
|
-
}, { className }), min: min || new Date().toISOString().slice(0, 16), onChange: (e) => {
|
|
53
|
-
onChange && onChange(e.target.value);
|
|
54
|
-
} }) }));
|
|
55
|
-
export const CheckBox = (props) => {
|
|
56
|
-
return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { onClick: props.handleCheck, type: "checkbox", checked: props.isChecked, value: props.value }, props.id), ' ', props.value] }));
|
|
57
|
-
};
|
|
58
|
-
export const InputFile = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, children: _jsx("input", { type: "file", id: props.id, name: props.name, disabled: props.disabled || false, accept: props.accept, value: props.value, onChange: (e) => props.onChange && props.onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
|
|
59
|
-
[s['border-red']]: props.hasError,
|
|
60
|
-
[s['border-gray-300']]: !props.hasError,
|
|
61
|
-
}), multiple: props.multiple }) }));
|
|
62
|
-
export const Toggle = (props) => {
|
|
63
|
-
const [toggle, setToggle] = useState(props.value);
|
|
64
|
-
const { onChange, disabled, className, isToggleLabel = true } = props;
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
setToggle(props.value);
|
|
67
|
-
}, [props.value]);
|
|
68
|
-
const triggerToggle = () => {
|
|
69
|
-
if (disabled) {
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
setToggle(!toggle);
|
|
73
|
-
if (typeof onChange === 'function') {
|
|
74
|
-
onChange(!toggle);
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
const toggleClasses = classNames('wrg-toggle ', {
|
|
78
|
-
'wrg-toggle--checked': toggle,
|
|
79
|
-
'wrg-toggle--disabled': disabled,
|
|
80
|
-
}, className);
|
|
81
|
-
return (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.style, children: _jsxs("div", { onClick: triggerToggle, className: toggleClasses, children: [_jsx("div", { className: cn('wrg-toggle-container', {
|
|
82
|
-
[s['bg-green-700']]: toggle,
|
|
83
|
-
[s['bg-black']]: !toggle,
|
|
84
|
-
}), children: isToggleLabel && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('wrg-toggle-check'), children: _jsx("span", { className: cn(s['text-white'], s['ml-1']), children: "Yes" }) }), _jsx("div", { className: cn('wrg-toggle-uncheck'), children: _jsx("span", { className: cn(s['dark:text-black']), children: "No" }) })] })) }), _jsx("div", { className: cn('wrg-toggle-circle', s['dark:bg-black'], {
|
|
85
|
-
'ml-1': toggle,
|
|
86
|
-
'mr-1': !toggle,
|
|
87
|
-
}) }), _jsx("input", { type: "checkbox", "aria-label": "Toggle Button", className: cn('wrg-toggle-input') })] }) }));
|
|
88
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
interface CSSMultilineProps {
|
|
2
|
-
label?: string;
|
|
3
|
-
defaultValue?: string;
|
|
4
|
-
placeholder?: string;
|
|
5
|
-
className?: string;
|
|
6
|
-
style?: any;
|
|
7
|
-
onChange?(item: any): void;
|
|
8
|
-
onReset?(item: any): void;
|
|
9
|
-
onMoreInfo?(): void;
|
|
10
|
-
}
|
|
11
|
-
export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, onReset, onMoreInfo, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=css-multiline-input.component.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,YAAY,2FAStB,iBAAiB,4CAoJnB,CAAC"}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState, useRef } from 'react';
|
|
3
|
-
import * as Form from '../../Form/form.component';
|
|
4
|
-
import { properties as propertiesObj } from './css-properties';
|
|
5
|
-
import s from '../../../tc.module.css';
|
|
6
|
-
import { cn } from '../../../utils';
|
|
7
|
-
import { Icon } from '../../';
|
|
8
|
-
const mapToArray = (arr) => {
|
|
9
|
-
const res = [];
|
|
10
|
-
arr.forEach(function (obj, index) {
|
|
11
|
-
const key = Object.keys(obj)[0];
|
|
12
|
-
const value = key;
|
|
13
|
-
res.push([value, obj[key]]);
|
|
14
|
-
});
|
|
15
|
-
return res;
|
|
16
|
-
};
|
|
17
|
-
const data = mapToArray(propertiesObj);
|
|
18
|
-
export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "fontSize: 12,backgroundColor:'#000000'", onChange, onReset, onMoreInfo, }) => {
|
|
19
|
-
const value = useRef(defaultValue || '');
|
|
20
|
-
const [properties, setProperties] = useState([]);
|
|
21
|
-
const [isListOpen, setIsListOpen] = useState(false);
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
value.current = defaultValue;
|
|
24
|
-
setProperties(data);
|
|
25
|
-
}, [defaultValue]);
|
|
26
|
-
const useOutsideAlerter = (ref) => {
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
function handleClickOutside(event) {
|
|
29
|
-
if (ref.current && !ref.current.contains(event.target)) {
|
|
30
|
-
setIsListOpen(false);
|
|
31
|
-
onChange && onChange(value.current);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
35
|
-
return () => {
|
|
36
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
37
|
-
};
|
|
38
|
-
}, [ref]);
|
|
39
|
-
};
|
|
40
|
-
const wrapperRef = useRef(null);
|
|
41
|
-
useOutsideAlerter(wrapperRef);
|
|
42
|
-
const list = [];
|
|
43
|
-
const filter = (css) => {
|
|
44
|
-
let matchString = css?.split(/,\s*/);
|
|
45
|
-
matchString = matchString[matchString?.length - 1];
|
|
46
|
-
matchString = matchString?.split(':')[0];
|
|
47
|
-
matchString = matchString?.split("'")[0];
|
|
48
|
-
if (css?.length == 0)
|
|
49
|
-
return setProperties(data);
|
|
50
|
-
else {
|
|
51
|
-
data?.map((item) => {
|
|
52
|
-
const innerItem = [];
|
|
53
|
-
const isItems = item[0]?.startsWith(matchString);
|
|
54
|
-
if (isItems)
|
|
55
|
-
innerItem.push(item[0]);
|
|
56
|
-
if (innerItem?.length > 0)
|
|
57
|
-
list.push([item[0], item[1]]);
|
|
58
|
-
});
|
|
59
|
-
setProperties(list);
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
const onKeyUp = (e) => {
|
|
63
|
-
setIsListOpen(true);
|
|
64
|
-
};
|
|
65
|
-
return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['relative']), ref: wrapperRef, children: [_jsxs("div", { className: cn(s.flex, s.absolute, s['gap-2'], s['right-2']), children: [onReset && (_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: () => {
|
|
66
|
-
// Remove the last CSS property (full key:value pair) from value.current
|
|
67
|
-
const styles = value.current.split(',').filter(Boolean);
|
|
68
|
-
if (styles.length > 0) {
|
|
69
|
-
styles.pop();
|
|
70
|
-
value.current = styles.join(',') + (styles.length ? ',' : '');
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
value.current = '';
|
|
74
|
-
}
|
|
75
|
-
onReset && onReset(value.current);
|
|
76
|
-
}, tooltip: "Reset CSS" })), onMoreInfo && (_jsx(Icon, { nameIcon: "MdInfoOutline", propsIcon: { color: '#000000', size: 24 }, onClick: onMoreInfo, tooltip: "More Info" }))] }), _jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
|
|
77
|
-
value.current = css;
|
|
78
|
-
filter(css);
|
|
79
|
-
} }), isListOpen && (_jsx("div", { children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['bg-black'], s['text-white'], s['overflow-y-scroll'], s['w-full']), style: { maxHeight: 'calc(100vh - 20vh)' }, children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
|
|
80
|
-
let existsString = value.current?.split(',');
|
|
81
|
-
if (value.current.includes(',')) {
|
|
82
|
-
existsString = existsString.map((item) => {
|
|
83
|
-
if (item?.includes(':'))
|
|
84
|
-
return item;
|
|
85
|
-
});
|
|
86
|
-
if (prop != 'number')
|
|
87
|
-
existsString.push(`${item[0]}:'${prop}',`);
|
|
88
|
-
else
|
|
89
|
-
existsString.push(`${item[0]}:1,`);
|
|
90
|
-
value.current = existsString
|
|
91
|
-
.join(',')
|
|
92
|
-
.replaceAll(',,', ',');
|
|
93
|
-
}
|
|
94
|
-
else {
|
|
95
|
-
if (prop != 'number')
|
|
96
|
-
value.current = `${item[0]}:'${prop}',`;
|
|
97
|
-
else {
|
|
98
|
-
value.current = `${item[0]}:1,`;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
filter(existsString.join(''));
|
|
102
|
-
}, children: [' ', prop, ' '] })))] }, index))) }) }))] }));
|
|
103
|
-
};
|
package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
interface InputDropdownProps {
|
|
2
|
-
title: string;
|
|
3
|
-
items: Array<string>;
|
|
4
|
-
hasError?: boolean;
|
|
5
|
-
className?: string;
|
|
6
|
-
onChange?: (item: string) => void;
|
|
7
|
-
}
|
|
8
|
-
export declare const InputDropdown: ({ items, className, hasError, title, onChange, }: InputDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export {};
|
|
10
|
-
//# sourceMappingURL=input-dropdown.component.d.ts.map
|
package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/InputDropdown/input-dropdown.component.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,qDAMvB,kBAAkB,4CAsIpB,CAAC"}
|
package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useEffect, useRef } from 'react';
|
|
3
|
-
import s from '../../../tc.module.css';
|
|
4
|
-
import { cn } from '../../../utils';
|
|
5
|
-
import { Icon } from '../../';
|
|
6
|
-
export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
|
|
7
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
8
|
-
const [value, setValue] = useState('');
|
|
9
|
-
const [filteredItems, setFilteredItems] = useState(items);
|
|
10
|
-
const useOutsideAlerter = (ref) => {
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
function handleClickOutside(event) {
|
|
13
|
-
if (ref.current &&
|
|
14
|
-
!ref.current.contains(event.target) &&
|
|
15
|
-
isOpen &&
|
|
16
|
-
isOpen)
|
|
17
|
-
setIsOpen(!isOpen);
|
|
18
|
-
}
|
|
19
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
20
|
-
return () => {
|
|
21
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
22
|
-
};
|
|
23
|
-
}, [ref]);
|
|
24
|
-
};
|
|
25
|
-
const handleInputChange = (event) => {
|
|
26
|
-
const inputValue = event.target.value;
|
|
27
|
-
setValue(inputValue);
|
|
28
|
-
const filtered = items.filter((item) => item.toLowerCase().includes(inputValue.toLowerCase()));
|
|
29
|
-
setFilteredItems(filtered);
|
|
30
|
-
onChange && onChange(inputValue);
|
|
31
|
-
};
|
|
32
|
-
const wrapperRef = useRef(null);
|
|
33
|
-
useOutsideAlerter(wrapperRef);
|
|
34
|
-
return (_jsxs("div", { className: cn(className, s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), children: [_jsx("input", { type: "text", name: "name", placeholder: title, value: value, className: cn(s['pt-3'], s['pb-2'], s['w-full'], s['px-0'], s['mt-0'], s['bg-transparent'], s['border-gray-secondary'], s['border-0'], s['border-b'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md']), onClick: () => {
|
|
35
|
-
setIsOpen(!isOpen);
|
|
36
|
-
}, onChange: handleInputChange }), !isOpen && (_jsx(_Fragment, { children: _jsx(Icon, { nameIcon: "MdKeyboardArrowDown", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
|
|
37
|
-
setIsOpen(!isOpen);
|
|
38
|
-
} }) })), isOpen && (_jsx(Icon, { nameIcon: "MdKeyboardArrowUp", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
|
|
39
|
-
setIsOpen(!isOpen);
|
|
40
|
-
} }))] }), isOpen && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700']), ref: wrapperRef, children: _jsx("ul", { className: s['py-1'], children: filteredItems?.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular']), onClick: () => {
|
|
41
|
-
setValue(item);
|
|
42
|
-
setIsOpen(!isOpen);
|
|
43
|
-
}, children: item }, index))) }) })), hasError && (_jsx("span", { className: cn(s['text-red'], s['text-4xs']), id: "error", children: `${title} is required` }))] }));
|
|
44
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface PinInputGridProps {
|
|
3
|
-
title?: string;
|
|
4
|
-
hasError?: boolean;
|
|
5
|
-
className?: string;
|
|
6
|
-
disable?: boolean;
|
|
7
|
-
blur?: any;
|
|
8
|
-
name?: string;
|
|
9
|
-
pin: Array<number | undefined>;
|
|
10
|
-
onPinChanged: (pinEntry: number | undefined, index: number) => void;
|
|
11
|
-
}
|
|
12
|
-
export declare const InputOtp: React.FC<PinInputGridProps>;
|
|
13
|
-
export {};
|
|
14
|
-
//# sourceMappingURL=input-otp.component.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-otp.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/InputOTP/input-otp.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAE/B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkGhD,CAAC"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable no-console */
|
|
3
|
-
import { useEffect, useRef } from 'react';
|
|
4
|
-
import s from '../../../tc.module.css';
|
|
5
|
-
import { cn } from '../../../utils';
|
|
6
|
-
export const InputOtp = ({ className, pin, onPinChanged, }) => {
|
|
7
|
-
const pinLength = 6;
|
|
8
|
-
const Pin_Min_Value = 0;
|
|
9
|
-
const Pin_Max_Value = 9;
|
|
10
|
-
const BACKSPACE_Key = 'Backspace';
|
|
11
|
-
const inputRefs = useRef([]);
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
const ref = inputRefs.current[0];
|
|
14
|
-
if (ref) {
|
|
15
|
-
ref.focus();
|
|
16
|
-
}
|
|
17
|
-
}, []);
|
|
18
|
-
const changePinFocus = (pinIndex) => {
|
|
19
|
-
const ref = inputRefs.current[pinIndex];
|
|
20
|
-
if (ref) {
|
|
21
|
-
ref.focus();
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
const onChange = (event, index) => {
|
|
25
|
-
const value = event.target.value;
|
|
26
|
-
const pinNumber = Number(value.trim());
|
|
27
|
-
if (isNaN(pinNumber) || value.length === 0) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
|
|
31
|
-
onPinChanged(pinNumber, index);
|
|
32
|
-
if (index < pinLength - 1) {
|
|
33
|
-
changePinFocus(index + 1);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const onKeyDown = (event, index) => {
|
|
38
|
-
const keyboardKeyCode = event.nativeEvent.code;
|
|
39
|
-
if (keyboardKeyCode != BACKSPACE_Key)
|
|
40
|
-
return;
|
|
41
|
-
if (pin[index] === undefined) {
|
|
42
|
-
changePinFocus(index - 1);
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
onPinChanged(undefined, index);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
return (_jsx("div", { className: cn(s['relative'], className), children: _jsx("div", { className: cn(s['flex'], s['gap-2'], s['p-2'], s['text-center']), children: Array.from({ length: pinLength }, (_, index) => (_jsx("input", { className: cn(s['text-md'], s['font-extrabold'], s['bg-transparent'], s['text-center'], s['z-20'], s['border'], s['border-gray-secondary'], s['rounded-full'] // Added for full border radius
|
|
49
|
-
), style: { width: '30px', height: '30px' }, onKeyDown: (event) => onKeyDown(event, index), onMouseUp: () => {
|
|
50
|
-
if (pin.join('').length <= 0) {
|
|
51
|
-
changePinFocus(0);
|
|
52
|
-
}
|
|
53
|
-
}, onClick: () => {
|
|
54
|
-
if (pin.join('').length <= 0) {
|
|
55
|
-
onPinChanged(undefined, 0);
|
|
56
|
-
}
|
|
57
|
-
}, ref: (el) => {
|
|
58
|
-
if (el) {
|
|
59
|
-
inputRefs.current[index] = el;
|
|
60
|
-
}
|
|
61
|
-
}, onChange: (event) => onChange(event, index), value: pin[index] || '' }, index))) }) }));
|
|
62
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
.-z-1 {
|
|
2
|
-
z-index: -1;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.origin-0 {
|
|
6
|
-
transform-origin: 0%;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
input:focus ~ label,
|
|
10
|
-
input:not(:placeholder-shown) ~ label,
|
|
11
|
-
textarea:focus ~ label,
|
|
12
|
-
textarea:not(:placeholder-shown) ~ label,
|
|
13
|
-
select:focus ~ label,
|
|
14
|
-
select:not([value=""]):valid ~ label {
|
|
15
|
-
/* @apply transform; scale-75; -translate-y-6; */
|
|
16
|
-
--tw-translate-x: 0;
|
|
17
|
-
--tw-translate-y: 0;
|
|
18
|
-
--tw-rotate: 0;
|
|
19
|
-
--tw-skew-x: 0;
|
|
20
|
-
--tw-skew-y: 0;
|
|
21
|
-
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
|
|
22
|
-
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
|
23
|
-
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
24
|
-
--tw-scale-x: 0.75;
|
|
25
|
-
--tw-scale-y: 0.75;
|
|
26
|
-
--tw-translate-y: -1.5rem;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
input:focus ~ label,
|
|
30
|
-
select:focus ~ label {
|
|
31
|
-
/* @apply text-black; left-0; */
|
|
32
|
-
--tw-text-opacity: 1;
|
|
33
|
-
color: "#696969";
|
|
34
|
-
left: 0px;
|
|
35
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './input.styles.css';
|
|
3
|
-
interface PinInputGridProps {
|
|
4
|
-
title: string;
|
|
5
|
-
hasError?: any;
|
|
6
|
-
errorMsg?: string;
|
|
7
|
-
defaultMsg?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
disable?: boolean;
|
|
10
|
-
name?: string;
|
|
11
|
-
defaultPin: Array<number | undefined>;
|
|
12
|
-
onPinChanged: (item: any, index: number) => void;
|
|
13
|
-
}
|
|
14
|
-
export declare const InputPin: React.FC<PinInputGridProps>;
|
|
15
|
-
export {};
|
|
16
|
-
//# sourceMappingURL=input-pin.component.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-pin.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/InputPin/input-pin.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0KhD,CAAC"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable */
|
|
3
|
-
import { useRef, useState } from 'react';
|
|
4
|
-
import './input.styles.css';
|
|
5
|
-
import s from '../../../tc.module.css';
|
|
6
|
-
import { cn } from '../../../utils';
|
|
7
|
-
export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
|
|
8
|
-
const pin = useRef([]);
|
|
9
|
-
const [reload, setReload] = useState(false);
|
|
10
|
-
const pinLength = 12;
|
|
11
|
-
const Pin_Min_Value = 0;
|
|
12
|
-
const Pin_Max_Value = 9;
|
|
13
|
-
const BACKSPACE_Key = 'Backspace';
|
|
14
|
-
const inputRefs = useRef([]);
|
|
15
|
-
const removeValuesFromArray = (valuesArray, value) => {
|
|
16
|
-
const valueIndex = valuesArray.findIndex((entry) => entry === value);
|
|
17
|
-
if (valueIndex === -1) {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
valuesArray.splice(valueIndex, 1);
|
|
21
|
-
};
|
|
22
|
-
const changePinFocus = (pinIndex) => {
|
|
23
|
-
const ref = inputRefs.current[pinIndex];
|
|
24
|
-
if (ref) {
|
|
25
|
-
ref.focus();
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
const onChange = (event, index) => {
|
|
29
|
-
const previousValue = event.target.defaultValue;
|
|
30
|
-
const valueArray = event.target.value.split('');
|
|
31
|
-
const output = removeValuesFromArray(valueArray, previousValue);
|
|
32
|
-
const value = valueArray.pop();
|
|
33
|
-
if (!value) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
const pinNumber = Number(value);
|
|
37
|
-
if (isNaN(pinNumber) || value.length === 0) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
pin.current[pin.current?.length] = value;
|
|
41
|
-
setReload(!reload);
|
|
42
|
-
if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
|
|
43
|
-
onPinChanged(pin.current, index);
|
|
44
|
-
if (index < pinLength - 1) {
|
|
45
|
-
changePinFocus(index + 1);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const onKeyDown = (event, index) => {
|
|
50
|
-
const keyboardKeyCode = event.nativeEvent.code;
|
|
51
|
-
if (keyboardKeyCode != BACKSPACE_Key)
|
|
52
|
-
return;
|
|
53
|
-
if (pin.current[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
|
|
54
|
-
changePinFocus(index - 1);
|
|
55
|
-
}
|
|
56
|
-
if (pin.current[index] === undefined) {
|
|
57
|
-
changePinFocus(index - 1);
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
onPinChanged(undefined, index);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
return (_jsxs("div", { className: cn(className, s.relative), children: [_jsx("label", { className: cn(s['duration-300'], s['-z-1'], s['origin-0'], s['text-gray-dark-secondary'], s['font-arimaRegular'], s['text-md']), children: title }), _jsx("div", { className: cn(s.flex, s['space-x-1']), children: Array.from({ length: pinLength }, (_, index) => (_jsxs("div", { className: cn(s.flex, s['space-x-1'], s['max-w-full'], s['items-stretch']), children: [_jsx("input", { "data-testid": "inputElementPin", type: "tel", className: cn(s['pb-2'], s.block, s['w-4'], s['px-0'], s['mt-0'], s['bg-transparent'], s['text-center'], s['border-0'], s['border-b'], s['z-20'], s['appearance-none'], s['rounded-none'], s['focus:outline-none'], s['focus:ring-0'], s['focus:border-gray-secondary'], s['border-gray-secondary'], s['font-arimaRegular']), onKeyUp: (event) => onKeyDown(event, index), onMouseUp: () => {
|
|
64
|
-
if (pin.current.join('').length <= 0) {
|
|
65
|
-
changePinFocus(0);
|
|
66
|
-
}
|
|
67
|
-
}, onClick: () => {
|
|
68
|
-
if (pin.current.join('').length <= 0) {
|
|
69
|
-
onPinChanged(undefined, 0);
|
|
70
|
-
}
|
|
71
|
-
}, ref: (el) => {
|
|
72
|
-
if (el) {
|
|
73
|
-
inputRefs.current[index] = el;
|
|
74
|
-
}
|
|
75
|
-
}, onChange: (event) => onChange(event, index), value: pin.current[index]?.toString() || '' }, index), _jsx("div", { className: s.invisible, children: (index + 1) % 4 === 0 ? 'ss' : null })] }, index))) }), hasError && hasError?.type !== 'required' && (_jsx("span", { className: cn(s['text-sm'], s['text-red'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: `${errorMsg || ''}` })), (!hasError || hasError?.type === 'required') && (_jsx("span", { className: cn(s['text-sm'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: `${defaultMsg || ''}` }))] }));
|
|
76
|
-
};
|