react-restyle-components 0.1.44 → 0.1.45

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.
Files changed (127) hide show
  1. package/lib/cjs/App.js +36 -12
  2. package/lib/cjs/App.test.js +10 -8
  3. package/lib/cjs/core-components/atoms/buttons/button.stories.js +26 -24
  4. package/lib/cjs/core-components/atoms/buttons/buttons.component.js +27 -9
  5. package/lib/cjs/core-components/atoms/buttons/buttons.test.js +15 -7
  6. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +102 -35
  7. package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +17 -17
  8. package/lib/cjs/core-components/atoms/check-box/checkBox.test.js +15 -7
  9. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +98 -37
  10. package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +17 -15
  11. package/lib/cjs/core-components/atoms/date-picker/date-picker.test.js +16 -7
  12. package/lib/cjs/core-components/atoms/form/form.component.js +571 -159
  13. package/lib/cjs/core-components/atoms/form/form.test.js +87 -59
  14. package/lib/cjs/core-components/atoms/icons/icons.component.js +40 -26
  15. package/lib/cjs/core-components/atoms/input/input-otp.component.js +118 -76
  16. package/lib/cjs/core-components/atoms/input/input-pin.component.js +180 -98
  17. package/lib/cjs/core-components/atoms/input/input-pin.stories.js +14 -14
  18. package/lib/cjs/core-components/atoms/input/input-pin.test.js +28 -10
  19. package/lib/cjs/core-components/atoms/input/input.component.js +104 -33
  20. package/lib/cjs/core-components/atoms/input/input.stories.js +15 -15
  21. package/lib/cjs/core-components/atoms/input/input.test.js +30 -10
  22. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +127 -53
  23. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +12 -12
  24. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.test.js +16 -7
  25. package/lib/cjs/core-components/atoms/loader/loader.component.js +83 -21
  26. package/lib/cjs/core-components/atoms/loader/loader.stories.js +8 -8
  27. package/lib/cjs/core-components/atoms/loader/loader.test.js +11 -7
  28. package/lib/cjs/core-components/atoms/radio/radio.component.js +102 -37
  29. package/lib/cjs/core-components/atoms/radio/radio.stories.js +16 -16
  30. package/lib/cjs/core-components/atoms/radio/radio.test.js +15 -7
  31. package/lib/cjs/core-components/atoms/stepper/stepper.component.js +77 -34
  32. package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +13 -13
  33. package/lib/cjs/core-components/atoms/stepper/stepper.test.js +16 -7
  34. package/lib/cjs/core-components/atoms/stepper/stepper.test.js.map +1 -1
  35. package/lib/cjs/core-components/atoms/tabs/tabs.component.js +95 -0
  36. package/lib/cjs/core-components/atoms/tabs/tabs.component.js.map +1 -0
  37. package/lib/cjs/core-components/atoms/tabs/tabs.stories.js +26 -0
  38. package/lib/cjs/core-components/atoms/tabs/tabs.stories.js.map +1 -0
  39. package/lib/cjs/core-components/atoms/tabs/tabs.test.js +26 -0
  40. package/lib/cjs/core-components/atoms/tabs/tabs.test.js.map +1 -0
  41. package/lib/cjs/core-components/atoms/timer/timer.component.js +119 -92
  42. package/lib/cjs/core-components/atoms/timer/timer.test.js +20 -10
  43. package/lib/cjs/core-components/atoms/tooltip/tooltip.component.js +85 -45
  44. package/lib/cjs/core-components/atoms/tooltip/tooltip.component.test.js +13 -9
  45. package/lib/cjs/core-components/atoms/tooltip/tooltip.stories.js +8 -8
  46. package/lib/cjs/core-components/index.js +65 -27
  47. package/lib/cjs/core-components/index.js.map +1 -1
  48. package/lib/cjs/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +210 -106
  49. package/lib/cjs/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js +23 -9
  50. package/lib/cjs/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +38 -36
  51. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +209 -104
  52. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js +28 -16
  53. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +24 -22
  54. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.component.js +203 -106
  55. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +8 -8
  56. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.test.js +14 -7
  57. package/lib/cjs/core-components/molecules/css-multiline-input/css-properties.js +159 -159
  58. package/lib/cjs/core-utils/index.js +31 -15
  59. package/lib/cjs/core-utils/unit-test.utils.js +8 -6
  60. package/lib/cjs/index.js +31 -15
  61. package/lib/cjs/library/assets/svg/index.js +39 -13
  62. package/lib/cjs/reportWebVitals.js +1 -1
  63. package/lib/cjs/setupTests.js +1 -1
  64. package/lib/esm/App.js +34 -12
  65. package/lib/esm/App.test.js +8 -8
  66. package/lib/esm/core-components/atoms/buttons/button.stories.js +24 -24
  67. package/lib/esm/core-components/atoms/buttons/buttons.component.js +23 -7
  68. package/lib/esm/core-components/atoms/buttons/buttons.test.js +13 -7
  69. package/lib/esm/core-components/atoms/check-box/checkBox.component.js +65 -19
  70. package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +18 -18
  71. package/lib/esm/core-components/atoms/check-box/checkBox.test.js +13 -7
  72. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +54 -21
  73. package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +14 -14
  74. package/lib/esm/core-components/atoms/date-picker/date-picker.test.js +15 -8
  75. package/lib/esm/core-components/atoms/form/form.component.js +513 -138
  76. package/lib/esm/core-components/atoms/form/form.test.js +78 -60
  77. package/lib/esm/core-components/atoms/icons/icons.component.js +36 -24
  78. package/lib/esm/core-components/atoms/input/input-otp.component.js +80 -59
  79. package/lib/esm/core-components/atoms/input/input-pin.component.js +142 -81
  80. package/lib/esm/core-components/atoms/input/input-pin.stories.js +15 -15
  81. package/lib/esm/core-components/atoms/input/input-pin.test.js +26 -10
  82. package/lib/esm/core-components/atoms/input/input.component.js +66 -16
  83. package/lib/esm/core-components/atoms/input/input.stories.js +16 -16
  84. package/lib/esm/core-components/atoms/input/input.test.js +28 -10
  85. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +95 -36
  86. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +13 -13
  87. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.test.js +14 -7
  88. package/lib/esm/core-components/atoms/loader/loader.component.js +80 -20
  89. package/lib/esm/core-components/atoms/loader/loader.stories.js +9 -9
  90. package/lib/esm/core-components/atoms/loader/loader.test.js +7 -7
  91. package/lib/esm/core-components/atoms/radio/radio.component.js +65 -21
  92. package/lib/esm/core-components/atoms/radio/radio.stories.js +17 -17
  93. package/lib/esm/core-components/atoms/radio/radio.test.js +13 -7
  94. package/lib/esm/core-components/atoms/stepper/stepper.component.js +74 -32
  95. package/lib/esm/core-components/atoms/stepper/stepper.stories.js +14 -14
  96. package/lib/esm/core-components/atoms/stepper/stepper.test.js +14 -7
  97. package/lib/esm/core-components/atoms/stepper/stepper.test.js.map +1 -1
  98. package/lib/esm/core-components/atoms/tabs/tabs.component.js +47 -0
  99. package/lib/esm/core-components/atoms/tabs/tabs.component.js.map +1 -0
  100. package/lib/esm/core-components/atoms/tabs/tabs.stories.js +23 -0
  101. package/lib/esm/core-components/atoms/tabs/tabs.stories.js.map +1 -0
  102. package/lib/esm/core-components/atoms/tabs/tabs.test.js +19 -0
  103. package/lib/esm/core-components/atoms/tabs/tabs.test.js.map +1 -0
  104. package/lib/esm/core-components/atoms/timer/timer.component.js +81 -75
  105. package/lib/esm/core-components/atoms/timer/timer.test.js +10 -10
  106. package/lib/esm/core-components/atoms/tooltip/tooltip.component.js +46 -25
  107. package/lib/esm/core-components/atoms/tooltip/tooltip.component.test.js +9 -9
  108. package/lib/esm/core-components/atoms/tooltip/tooltip.stories.js +9 -9
  109. package/lib/esm/core-components/index.js +19 -18
  110. package/lib/esm/core-components/index.js.map +1 -1
  111. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +170 -88
  112. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js +17 -9
  113. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +38 -37
  114. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +169 -86
  115. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js +22 -16
  116. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +24 -23
  117. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.component.js +166 -90
  118. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +9 -9
  119. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.test.js +9 -7
  120. package/lib/esm/core-components/molecules/css-multiline-input/css-properties.js +159 -159
  121. package/lib/esm/core-utils/index.js +2 -2
  122. package/lib/esm/core-utils/unit-test.utils.js +5 -5
  123. package/lib/esm/index.js +2 -2
  124. package/lib/esm/library/assets/svg/index.js +19 -10
  125. package/lib/esm/reportWebVitals.js +1 -1
  126. package/lib/esm/setupTests.js +2 -2
  127. package/package.json +3 -1
@@ -1,40 +1,54 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  const react_1 = __importDefault(require("react"));
7
9
  const react_2 = require("@testing-library/react");
8
10
  const user_event_1 = __importDefault(require("@testing-library/user-event"));
9
11
  const form_component_1 = require("./form.component");
10
- describe('Checkbox component', () => {
11
- it('render checkbox correctly', () => {
12
- const checkbox = (0, react_2.render)(react_1.default.createElement(form_component_1.CheckBox, null));
13
- expect(checkbox).toMatchSnapshot();
14
- });
12
+ describe("Checkbox component", () => {
13
+ it("render checkbox correctly", () => {
14
+ const checkbox = (0, react_2.render)(
15
+ react_1.default.createElement(form_component_1.CheckBox, null),
16
+ );
17
+ expect(checkbox).toMatchSnapshot();
18
+ });
15
19
  });
16
- describe('Input component', () => {
17
- it('render input correctly', () => {
18
- const inputComp = (0, react_2.render)(react_1.default.createElement(form_component_1.Input, { type: "text", value: "test", onChange: (val) => jest.fn(), onBlur: (value) => jest.fn(), onKeyDown: (val) => jest.fn() }));
19
- const input = inputComp.getByTestId('INPT');
20
- react_2.fireEvent.change(input, { target: { value: 'check' } });
21
- user_event_1.default.type(input, 'value');
22
- react_2.fireEvent.blur(input);
23
- react_2.fireEvent.keyDown(input, {
24
- key: 'Escape',
25
- code: 'Escape',
26
- keyCode: 27,
27
- charCode: 27,
28
- });
29
- react_2.fireEvent.keyPress(input, { key: 'Enter', keyCode: 13 });
30
- expect(input).toMatchSnapshot();
20
+ describe("Input component", () => {
21
+ it("render input correctly", () => {
22
+ const inputComp = (0, react_2.render)(
23
+ react_1.default.createElement(form_component_1.Input, {
24
+ type: "text",
25
+ value: "test",
26
+ onChange: (val) => jest.fn(),
27
+ onBlur: (value) => jest.fn(),
28
+ onKeyDown: (val) => jest.fn(),
29
+ }),
30
+ );
31
+ const input = inputComp.getByTestId("INPT");
32
+ react_2.fireEvent.change(input, { target: { value: "check" } });
33
+ user_event_1.default.type(input, "value");
34
+ react_2.fireEvent.blur(input);
35
+ react_2.fireEvent.keyDown(input, {
36
+ key: "Escape",
37
+ code: "Escape",
38
+ keyCode: 27,
39
+ charCode: 27,
31
40
  });
41
+ react_2.fireEvent.keyPress(input, { key: "Enter", keyCode: 13 });
42
+ expect(input).toMatchSnapshot();
43
+ });
32
44
  });
33
- describe('Toggle component', () => {
34
- it('render toggle correctly', () => {
35
- const toggle = (0, react_2.render)(react_1.default.createElement(form_component_1.Toggle, null));
36
- expect(toggle).toMatchSnapshot();
37
- });
45
+ describe("Toggle component", () => {
46
+ it("render toggle correctly", () => {
47
+ const toggle = (0, react_2.render)(
48
+ react_1.default.createElement(form_component_1.Toggle, null),
49
+ );
50
+ expect(toggle).toMatchSnapshot();
51
+ });
38
52
  });
39
53
  // describe('SelectOption component', () => {
40
54
  // it('render selectOption correctly', () => {
@@ -47,11 +61,13 @@ describe('Toggle component', () => {
47
61
  // expect(select).toMatchSnapshot();
48
62
  // });
49
63
  // });
50
- describe('MultilineInput component', () => {
51
- it('render multilineInput correctly', () => {
52
- const multi = (0, react_2.render)(react_1.default.createElement(form_component_1.MultilineInput, null));
53
- expect(multi).toMatchSnapshot();
54
- });
64
+ describe("MultilineInput component", () => {
65
+ it("render multilineInput correctly", () => {
66
+ const multi = (0, react_2.render)(
67
+ react_1.default.createElement(form_component_1.MultilineInput, null),
68
+ );
69
+ expect(multi).toMatchSnapshot();
70
+ });
55
71
  });
56
72
  // describe('Clock component', () => {
57
73
  // it('render clock correctly', () => {
@@ -61,17 +77,23 @@ describe('MultilineInput component', () => {
61
77
  // expect(clock).toMatchSnapshot();
62
78
  // });
63
79
  // });
64
- describe('Label component', () => {
65
- it('render label correctly', () => {
66
- const label = (0, react_2.render)(react_1.default.createElement(form_component_1.Label, { htmlFor: "vsdvrf" }));
67
- expect(label).toMatchSnapshot();
68
- });
80
+ describe("Label component", () => {
81
+ it("render label correctly", () => {
82
+ const label = (0, react_2.render)(
83
+ react_1.default.createElement(form_component_1.Label, {
84
+ htmlFor: "vsdvrf",
85
+ }),
86
+ );
87
+ expect(label).toMatchSnapshot();
88
+ });
69
89
  });
70
- describe('InputDate component', () => {
71
- it('render inputDate correctly', () => {
72
- const inputDate = (0, react_2.render)(react_1.default.createElement(form_component_1.InputDate, null));
73
- expect(inputDate).toMatchSnapshot();
74
- });
90
+ describe("InputDate component", () => {
91
+ it("render inputDate correctly", () => {
92
+ const inputDate = (0, react_2.render)(
93
+ react_1.default.createElement(form_component_1.InputDate, null),
94
+ );
95
+ expect(inputDate).toMatchSnapshot();
96
+ });
75
97
  });
76
98
  // describe('InputDateTime component', () => {
77
99
  // it('render inputDateTime correctly', () => {
@@ -79,22 +101,28 @@ describe('InputDate component', () => {
79
101
  // expect(inputDateTime).toMatchSnapshot();
80
102
  // });
81
103
  // });
82
- describe('InputFile component', () => {
83
- it('render inputFile correctly', () => {
84
- const inputFile = (0, react_2.render)(react_1.default.createElement(form_component_1.InputFile, null));
85
- expect(inputFile).toMatchSnapshot();
86
- });
104
+ describe("InputFile component", () => {
105
+ it("render inputFile correctly", () => {
106
+ const inputFile = (0, react_2.render)(
107
+ react_1.default.createElement(form_component_1.InputFile, null),
108
+ );
109
+ expect(inputFile).toMatchSnapshot();
110
+ });
87
111
  });
88
- describe('InputRadio component', () => {
89
- it('render inputRadio correctly', () => {
90
- const inputRadio = (0, react_2.render)(react_1.default.createElement(form_component_1.InputRadio, null));
91
- expect(inputRadio).toMatchSnapshot();
92
- });
112
+ describe("InputRadio component", () => {
113
+ it("render inputRadio correctly", () => {
114
+ const inputRadio = (0, react_2.render)(
115
+ react_1.default.createElement(form_component_1.InputRadio, null),
116
+ );
117
+ expect(inputRadio).toMatchSnapshot();
118
+ });
93
119
  });
94
- describe('InputWrapper component', () => {
95
- it('render inputWrapper correctly', () => {
96
- const inputWrapper = (0, react_2.render)(react_1.default.createElement(form_component_1.InputWrapper, null));
97
- expect(inputWrapper).toMatchSnapshot();
98
- });
120
+ describe("InputWrapper component", () => {
121
+ it("render inputWrapper correctly", () => {
122
+ const inputWrapper = (0, react_2.render)(
123
+ react_1.default.createElement(form_component_1.InputWrapper, null),
124
+ );
125
+ expect(inputWrapper).toMatchSnapshot();
126
+ });
99
127
  });
100
- //# sourceMappingURL=form.test.js.map
128
+ //# sourceMappingURL=form.test.js.map
@@ -1,32 +1,46 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  exports.Icon = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
- const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onClick, }) => {
9
- try {
10
- const iconProps = Object.assign(Object.assign({}, propsIcon), { color: isDisable ? '#808080' : (propsIcon === null || propsIcon === void 0 ? void 0 : propsIcon.color) || '#ffffff' });
11
- const lib = nameIcon
12
- .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
13
- .split(' ')[0]
14
- .toLocaleLowerCase();
15
- // const ElementIcon: any = loadable(
16
- // () => import(`react-icons/${lib}/index.js`),
17
- // {
18
- // resolveComponent: (el) =>
19
- // el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
20
- // }
21
- // );
22
- return (react_1.default.createElement("div", { onClick: () => {
23
- if (!isDisable)
24
- onClick && onClick();
25
- } }));
26
- }
27
- catch (error) {
28
- return react_1.default.createElement(react_1.default.Fragment, null);
29
- }
10
+ const Icon = ({
11
+ nameIcon,
12
+ propsIcon,
13
+ tooltip = "",
14
+ isDisable = false,
15
+ onClick,
16
+ }) => {
17
+ try {
18
+ const iconProps = Object.assign(Object.assign({}, propsIcon), {
19
+ color: isDisable
20
+ ? "#808080"
21
+ : (propsIcon === null || propsIcon === void 0
22
+ ? void 0
23
+ : propsIcon.color) || "#ffffff",
24
+ });
25
+ const lib = nameIcon
26
+ .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
27
+ .split(" ")[0]
28
+ .toLocaleLowerCase();
29
+ // const ElementIcon: any = loadable(
30
+ // () => import(`react-icons/${lib}/index.js`),
31
+ // {
32
+ // resolveComponent: (el) =>
33
+ // el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
34
+ // }
35
+ // );
36
+ return react_1.default.createElement("div", {
37
+ onClick: () => {
38
+ if (!isDisable) onClick && onClick();
39
+ },
40
+ });
41
+ } catch (error) {
42
+ return react_1.default.createElement(react_1.default.Fragment, null);
43
+ }
30
44
  };
31
45
  exports.Icon = Icon;
32
- //# sourceMappingURL=icons.component.js.map
46
+ //# sourceMappingURL=icons.component.js.map
@@ -1,89 +1,131 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
2
+ var __createBinding =
3
+ (this && this.__createBinding) ||
4
+ (Object.create
5
+ ? function (o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (
9
+ !desc ||
10
+ ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
11
+ ) {
12
+ desc = {
13
+ enumerable: true,
14
+ get: function () {
15
+ return m[k];
16
+ },
17
+ };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }
21
+ : function (o, m, k, k2) {
22
+ if (k2 === undefined) k2 = k;
23
+ o[k2] = m[k];
24
+ });
25
+ var __setModuleDefault =
26
+ (this && this.__setModuleDefault) ||
27
+ (Object.create
28
+ ? function (o, v) {
29
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
30
+ }
31
+ : function (o, v) {
32
+ o["default"] = v;
33
+ });
34
+ var __importStar =
35
+ (this && this.__importStar) ||
36
+ function (mod) {
19
37
  if (mod && mod.__esModule) return mod;
20
38
  var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
39
+ if (mod != null)
40
+ for (var k in mod)
41
+ if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
42
+ __createBinding(result, mod, k);
22
43
  __setModuleDefault(result, mod);
23
44
  return result;
24
- };
45
+ };
25
46
  Object.defineProperty(exports, "__esModule", { value: true });
26
47
  exports.InputOtp = void 0;
27
48
  /* eslint-disable no-console */
28
49
  const react_1 = __importStar(require("react"));
29
50
  require("./input-otp.styles.css");
30
- const InputOtp = ({ className, pin, onPinChanged, }) => {
31
- const pinLength = 6;
32
- const Pin_Min_Value = 0;
33
- const Pin_Max_Value = 9;
34
- const BACKSPACE_Key = 'Backspace';
35
- const inputRefs = (0, react_1.useRef)([]);
36
- (0, react_1.useEffect)(() => {
37
- const ref = inputRefs.current[0];
38
- if (ref) {
39
- ref.focus();
40
- }
41
- }, []);
42
- const changePinFocus = (pinIndex) => {
43
- const ref = inputRefs.current[pinIndex];
44
- if (ref) {
45
- ref.focus();
46
- }
47
- };
48
- const onChange = (event, index) => {
49
- const value = event.target.value;
50
- const pinNumber = Number(value.trim());
51
- if (isNaN(pinNumber) || value.length === 0) {
52
- return;
53
- }
54
- if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
55
- onPinChanged(pinNumber, index);
56
- if (index < pinLength - 1) {
57
- changePinFocus(index + 1);
51
+ const InputOtp = ({ className, pin, onPinChanged }) => {
52
+ const pinLength = 6;
53
+ const Pin_Min_Value = 0;
54
+ const Pin_Max_Value = 9;
55
+ const BACKSPACE_Key = "Backspace";
56
+ const inputRefs = (0, react_1.useRef)([]);
57
+ (0, react_1.useEffect)(() => {
58
+ const ref = inputRefs.current[0];
59
+ if (ref) {
60
+ ref.focus();
61
+ }
62
+ }, []);
63
+ const changePinFocus = (pinIndex) => {
64
+ const ref = inputRefs.current[pinIndex];
65
+ if (ref) {
66
+ ref.focus();
67
+ }
68
+ };
69
+ const onChange = (event, index) => {
70
+ const value = event.target.value;
71
+ const pinNumber = Number(value.trim());
72
+ if (isNaN(pinNumber) || value.length === 0) {
73
+ return;
74
+ }
75
+ if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
76
+ onPinChanged(pinNumber, index);
77
+ if (index < pinLength - 1) {
78
+ changePinFocus(index + 1);
79
+ }
80
+ }
81
+ };
82
+ const onKeyDown = (event, index) => {
83
+ console.log({ event, index });
84
+ const keyboardKeyCode = event.nativeEvent.code;
85
+ if (keyboardKeyCode != BACKSPACE_Key) return;
86
+ if (pin[index] === undefined) {
87
+ changePinFocus(index - 1);
88
+ } else {
89
+ onPinChanged(undefined, index);
90
+ }
91
+ };
92
+ return react_1.default.createElement(
93
+ "div",
94
+ { className: `${className} relative` },
95
+ react_1.default.createElement(
96
+ "div",
97
+ {
98
+ className:
99
+ "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8",
100
+ },
101
+ Array.from({ length: pinLength }, (_, index) =>
102
+ react_1.default.createElement("input", {
103
+ "data-testid": "onPinChanged",
104
+ className:
105
+ "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none font-nunitoSansRegular",
106
+ onKeyDown: (event) => onKeyDown(event, index),
107
+ key: index,
108
+ onMouseUp: () => {
109
+ if (pin.join("").length <= 0) {
110
+ changePinFocus(0);
58
111
  }
59
- }
60
- };
61
- const onKeyDown = (event, index) => {
62
- console.log({ event, index });
63
- const keyboardKeyCode = event.nativeEvent.code;
64
- if (keyboardKeyCode != BACKSPACE_Key)
65
- return;
66
- if (pin[index] === undefined) {
67
- changePinFocus(index - 1);
68
- }
69
- else {
70
- onPinChanged(undefined, index);
71
- }
72
- };
73
- return (react_1.default.createElement("div", { className: `${className} relative` },
74
- react_1.default.createElement("div", { className: "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8" }, Array.from({ length: pinLength }, (_, index) => (react_1.default.createElement("input", { "data-testid": "onPinChanged", className: "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none font-nunitoSansRegular", onKeyDown: (event) => onKeyDown(event, index), key: index, onMouseUp: () => {
75
- if (pin.join('').length <= 0) {
76
- changePinFocus(0);
77
- }
78
- }, onClick: () => {
79
- if (pin.join('').length <= 0) {
80
- onPinChanged(undefined, 0);
81
- }
82
- }, ref: (el) => {
83
- if (el) {
84
- inputRefs.current[index] = el;
85
- }
86
- }, onChange: (event) => onChange(event, index), value: pin[index] || '' }))))));
112
+ },
113
+ onClick: () => {
114
+ if (pin.join("").length <= 0) {
115
+ onPinChanged(undefined, 0);
116
+ }
117
+ },
118
+ ref: (el) => {
119
+ if (el) {
120
+ inputRefs.current[index] = el;
121
+ }
122
+ },
123
+ onChange: (event) => onChange(event, index),
124
+ value: pin[index] || "",
125
+ }),
126
+ ),
127
+ ),
128
+ );
87
129
  };
88
130
  exports.InputOtp = InputOtp;
89
- //# sourceMappingURL=input-otp.component.js.map
131
+ //# sourceMappingURL=input-otp.component.js.map