react-restyle-components 0.1.29 → 0.1.32

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 (78) hide show
  1. package/README.md +6 -1
  2. package/lib/cjs/App.js +36 -12
  3. package/lib/cjs/App.test.js +10 -8
  4. package/lib/cjs/core-components/atoms/buttons/button.stories.js +20 -8
  5. package/lib/cjs/core-components/atoms/buttons/buttons.component.js +17 -6
  6. package/lib/cjs/core-components/atoms/buttons/buttons.component.test.js +15 -7
  7. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +25 -9
  8. package/lib/cjs/core-components/atoms/check-box/checkBox.component.test.js +14 -7
  9. package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +22 -9
  10. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +97 -37
  11. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.test.js +15 -7
  12. package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +18 -8
  13. package/lib/cjs/core-components/atoms/input/input-otp.component.js +118 -76
  14. package/lib/cjs/core-components/atoms/input/input-pin.component.js +174 -94
  15. package/lib/cjs/core-components/atoms/input/input-pin.component.test.js +28 -10
  16. package/lib/cjs/core-components/atoms/input/input-pin.stories.js +17 -9
  17. package/lib/cjs/core-components/atoms/input/input.component.js +65 -13
  18. package/lib/cjs/core-components/atoms/input/input.component.test.js +30 -10
  19. package/lib/cjs/core-components/atoms/input/input.stories.js +16 -7
  20. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +132 -56
  21. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.test.js +16 -7
  22. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +14 -7
  23. package/lib/cjs/core-components/atoms/loader/loader.component.js +83 -21
  24. package/lib/cjs/core-components/atoms/loader/loader.component.test.js +11 -7
  25. package/lib/cjs/core-components/atoms/loader/loader.stories.js +14 -8
  26. package/lib/cjs/core-components/atoms/radio/radio.component.js +20 -6
  27. package/lib/cjs/core-components/atoms/radio/radio.component.test.js +14 -7
  28. package/lib/cjs/core-components/atoms/radio/radio.stories.js +22 -10
  29. package/lib/cjs/core-components/atoms/stepper/stepper.component.js +77 -34
  30. package/lib/cjs/core-components/atoms/stepper/stepper.component.test.js +16 -7
  31. package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +15 -7
  32. package/lib/cjs/core-components/atoms/timer/timer.component.js +119 -92
  33. package/lib/cjs/core-components/atoms/timer/timer.component.test.js +20 -10
  34. package/lib/cjs/core-components/index.js +35 -16
  35. package/lib/cjs/core-utils/index.js +31 -15
  36. package/lib/cjs/core-utils/unit-test.utils.js +8 -6
  37. package/lib/cjs/index.js +31 -15
  38. package/lib/cjs/reportWebVitals.js +52 -29
  39. package/lib/cjs/setupTests.js +1 -1
  40. package/lib/esm/App.js +34 -12
  41. package/lib/esm/App.test.js +8 -8
  42. package/lib/esm/core-components/atoms/buttons/button.stories.js +17 -7
  43. package/lib/esm/core-components/atoms/buttons/buttons.component.js +13 -4
  44. package/lib/esm/core-components/atoms/buttons/buttons.component.test.js +13 -7
  45. package/lib/esm/core-components/atoms/check-box/checkBox.component.js +20 -9
  46. package/lib/esm/core-components/atoms/check-box/checkBox.component.test.js +9 -7
  47. package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +16 -8
  48. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +52 -20
  49. package/lib/esm/core-components/atoms/date-picker/date-picker.component.test.js +14 -8
  50. package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +16 -8
  51. package/lib/esm/core-components/atoms/input/input-otp.component.js +80 -59
  52. package/lib/esm/core-components/atoms/input/input-pin.component.js +136 -77
  53. package/lib/esm/core-components/atoms/input/input-pin.component.test.js +26 -10
  54. package/lib/esm/core-components/atoms/input/input-pin.stories.js +14 -8
  55. package/lib/esm/core-components/atoms/input/input.component.js +62 -12
  56. package/lib/esm/core-components/atoms/input/input.component.test.js +28 -10
  57. package/lib/esm/core-components/atoms/input/input.stories.js +13 -6
  58. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +96 -37
  59. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.test.js +14 -7
  60. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +11 -6
  61. package/lib/esm/core-components/atoms/loader/loader.component.js +80 -20
  62. package/lib/esm/core-components/atoms/loader/loader.component.test.js +7 -7
  63. package/lib/esm/core-components/atoms/loader/loader.stories.js +11 -7
  64. package/lib/esm/core-components/atoms/radio/radio.component.js +12 -6
  65. package/lib/esm/core-components/atoms/radio/radio.component.test.js +9 -7
  66. package/lib/esm/core-components/atoms/radio/radio.stories.js +16 -9
  67. package/lib/esm/core-components/atoms/stepper/stepper.component.js +74 -32
  68. package/lib/esm/core-components/atoms/stepper/stepper.component.test.js +14 -7
  69. package/lib/esm/core-components/atoms/stepper/stepper.stories.js +12 -6
  70. package/lib/esm/core-components/atoms/timer/timer.component.js +81 -75
  71. package/lib/esm/core-components/atoms/timer/timer.component.test.js +10 -10
  72. package/lib/esm/core-components/index.js +12 -12
  73. package/lib/esm/core-utils/index.js +2 -2
  74. package/lib/esm/core-utils/unit-test.utils.js +5 -5
  75. package/lib/esm/index.js +2 -2
  76. package/lib/esm/reportWebVitals.js +10 -10
  77. package/lib/esm/setupTests.js +2 -2
  78. package/package.json +20 -4
@@ -1,15 +1,29 @@
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.Radio = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const checkedRadio_svg_1 = require("@assets/svg/checkedRadio.svg");
9
11
  const uncheckRadio_svg_1 = require("@assets/svg/uncheckRadio.svg");
10
12
  const Radio = ({ className, checked, onChange }) => {
11
- const width = 20;
12
- return (react_1.default.createElement("div", { className: `${className} flex flex-row mr-2`, onClick: onChange }, checked ? (react_1.default.createElement(checkedRadio_svg_1.ReactComponent, { width: width, height: width })) : (react_1.default.createElement(uncheckRadio_svg_1.ReactComponent, { width: width, height: width }))));
13
+ const width = 20;
14
+ return react_1.default.createElement(
15
+ "div",
16
+ { className: `${className} flex flex-row mr-2`, onClick: onChange },
17
+ checked
18
+ ? react_1.default.createElement(checkedRadio_svg_1.ReactComponent, {
19
+ width: width,
20
+ height: width,
21
+ })
22
+ : react_1.default.createElement(uncheckRadio_svg_1.ReactComponent, {
23
+ width: width,
24
+ height: width,
25
+ })
26
+ );
13
27
  };
14
28
  exports.Radio = Radio;
15
- //# sourceMappingURL=radio.component.js.map
29
+ //# sourceMappingURL=radio.component.js.map
@@ -1,14 +1,21 @@
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
  /* eslint-disable testing-library/render-result-naming-convention */
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const _core_utils_1 = require("@core-utils");
9
11
  const radio_component_1 = require("./radio.component");
10
- it('render XB_Radio correctly', () => {
11
- const radio = (0, _core_utils_1.render)(react_1.default.createElement(radio_component_1.Radio, { checked: true, onChange: () => jest.fn() }));
12
- expect(radio).toMatchSnapshot();
12
+ it("render XB_Radio correctly", () => {
13
+ const radio = (0, _core_utils_1.render)(
14
+ react_1.default.createElement(radio_component_1.Radio, {
15
+ checked: true,
16
+ onChange: () => jest.fn(),
17
+ })
18
+ );
19
+ expect(radio).toMatchSnapshot();
13
20
  });
14
- //# sourceMappingURL=radio.component.test.js.map
21
+ //# sourceMappingURL=radio.component.test.js.map
@@ -1,20 +1,32 @@
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.Primary = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const radio_component_1 = require("./radio.component");
9
11
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
10
12
  exports.default = {
11
- title: 'Atoms/Radio',
12
- component: radio_component_1.Radio,
13
+ title: "Atoms/Radio",
14
+ component: radio_component_1.Radio,
13
15
  };
14
16
  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
15
- const Primary = () => (react_1.default.createElement(react_1.default.Fragment, null,
16
- react_1.default.createElement("div", { className: "flex flex-row" },
17
- react_1.default.createElement(radio_component_1.Radio, { checked: true, onChange: () => { } }),
18
- react_1.default.createElement("span", null, "Married"))));
17
+ const Primary = () =>
18
+ react_1.default.createElement(
19
+ react_1.default.Fragment,
20
+ null,
21
+ react_1.default.createElement(
22
+ "div",
23
+ { className: "flex flex-row" },
24
+ react_1.default.createElement(radio_component_1.Radio, {
25
+ checked: true,
26
+ onChange: () => {},
27
+ }),
28
+ react_1.default.createElement("span", null, "Married")
29
+ )
30
+ );
19
31
  exports.Primary = Primary;
20
- //# sourceMappingURL=radio.stories.js.map
32
+ //# sourceMappingURL=radio.stories.js.map
@@ -1,42 +1,85 @@
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.Stepper = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
- const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }) => {
9
- const finalClass = `${className} w-full px-4 sm:px-8`;
10
- const progressClass = 'absolute my-4 top-1/2 left-0 h-0.5 transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500';
11
- const Steps = steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
12
- let stepClass = 'inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center';
13
- if (index < currentStep)
10
+ const Stepper = ({ className = "", steps, currentStep = 1, onStepClick }) => {
11
+ const finalClass = `${className} w-full px-4 sm:px-8`;
12
+ const progressClass =
13
+ "absolute my-4 top-1/2 left-0 h-0.5 transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500";
14
+ const Steps =
15
+ steps === null || steps === void 0
16
+ ? void 0
17
+ : steps.map((step, index) => {
18
+ let stepClass =
19
+ "inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center";
20
+ if (index < currentStep)
14
21
  stepClass +=
15
- ' font-medium border border-orange bg-background-secondary text-gray';
16
- else if (index > currentStep)
22
+ " font-medium border border-orange bg-background-secondary text-gray";
23
+ else if (index > currentStep)
17
24
  stepClass +=
18
- ' font-medium border border-gray-dark-secondary text-gray bg-background-secondary';
19
- else if (currentStep === index)
20
- stepClass += ' font-medium bg-orange text-white';
21
- if (typeof onStepClick === 'function')
22
- stepClass += ' cursor-pointer';
23
- return (react_1.default.createElement("div", { key: step, style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: "absolute" },
24
- react_1.default.createElement("span", { className: `${stepClass} font-nunitoSansRegular text-4xs text-center`, onClick: () => {
25
- if (typeof onStepClick === 'function')
26
- onStepClick(index + 1, step);
27
- } }, step)));
28
- });
29
- return (react_1.default.createElement("div", { className: finalClass },
30
- react_1.default.createElement("div", { className: "w-full relative" },
31
- react_1.default.createElement("div", { className: progressClass, style: {
32
- width: `${(currentStep / (steps.length - 1)) * 100}%`,
33
- } },
34
- react_1.default.createElement("div", { className: "w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2" })),
35
- react_1.default.createElement("div", { className: 'absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500', style: {
36
- marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
37
- width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
38
- } })),
39
- react_1.default.createElement("div", { className: "relative sm:block" }, Steps)));
25
+ " font-medium border border-gray-dark-secondary text-gray bg-background-secondary";
26
+ else if (currentStep === index)
27
+ stepClass += " font-medium bg-orange text-white";
28
+ if (typeof onStepClick === "function") stepClass += " cursor-pointer";
29
+ return react_1.default.createElement(
30
+ "div",
31
+ {
32
+ key: step,
33
+ style: { left: `${(index / (steps.length - 1)) * 100}%` },
34
+ className: "absolute",
35
+ },
36
+ react_1.default.createElement(
37
+ "span",
38
+ {
39
+ className: `${stepClass} font-nunitoSansRegular text-4xs text-center`,
40
+ onClick: () => {
41
+ if (typeof onStepClick === "function")
42
+ onStepClick(index + 1, step);
43
+ },
44
+ },
45
+ step
46
+ )
47
+ );
48
+ });
49
+ return react_1.default.createElement(
50
+ "div",
51
+ { className: finalClass },
52
+ react_1.default.createElement(
53
+ "div",
54
+ { className: "w-full relative" },
55
+ react_1.default.createElement(
56
+ "div",
57
+ {
58
+ className: progressClass,
59
+ style: {
60
+ width: `${(currentStep / (steps.length - 1)) * 100}%`,
61
+ },
62
+ },
63
+ react_1.default.createElement("div", {
64
+ className:
65
+ "w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2",
66
+ })
67
+ ),
68
+ react_1.default.createElement("div", {
69
+ className:
70
+ "absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500",
71
+ style: {
72
+ marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
73
+ width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
74
+ },
75
+ })
76
+ ),
77
+ react_1.default.createElement(
78
+ "div",
79
+ { className: "relative sm:block" },
80
+ Steps
81
+ )
82
+ );
40
83
  };
41
84
  exports.Stepper = Stepper;
42
- //# sourceMappingURL=stepper.component.js.map
85
+ //# sourceMappingURL=stepper.component.js.map
@@ -1,13 +1,22 @@
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 _core_utils_1 = require("@core-utils");
8
10
  const stepper_component_1 = require("./stepper.component");
9
- it('render XB_Stepper correctly', () => {
10
- const stepper = (0, _core_utils_1.render)(react_1.default.createElement(stepper_component_1.Stepper, { steps: ['1', '2', '3', '4'], currentStep: 3, onStepClick: () => jest.fn(), className: "mt-4" }));
11
- expect(stepper).toMatchSnapshot();
11
+ it("render XB_Stepper correctly", () => {
12
+ const stepper = (0, _core_utils_1.render)(
13
+ react_1.default.createElement(stepper_component_1.Stepper, {
14
+ steps: ["1", "2", "3", "4"],
15
+ currentStep: 3,
16
+ onStepClick: () => jest.fn(),
17
+ className: "mt-4",
18
+ })
19
+ );
20
+ expect(stepper).toMatchSnapshot();
12
21
  });
13
- //# sourceMappingURL=stepper.component.test.js.map
22
+ //# sourceMappingURL=stepper.component.test.js.map
@@ -1,7 +1,9 @@
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.Primary = void 0;
7
9
  /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -10,10 +12,16 @@ const react_1 = __importDefault(require("react"));
10
12
  const stepper_component_1 = require("./stepper.component");
11
13
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
12
14
  exports.default = {
13
- title: 'Atoms/Stepper',
14
- component: stepper_component_1.Stepper,
15
+ title: "Atoms/Stepper",
16
+ component: stepper_component_1.Stepper,
15
17
  };
16
18
  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
17
- const Primary = () => (react_1.default.createElement(stepper_component_1.Stepper, { steps: ['1', '2', '3', '4'], currentStep: 2, onStepClick: (currentStep, step) => { }, className: "mt-4" }));
19
+ const Primary = () =>
20
+ react_1.default.createElement(stepper_component_1.Stepper, {
21
+ steps: ["1", "2", "3", "4"],
22
+ currentStep: 2,
23
+ onStepClick: (currentStep, step) => {},
24
+ className: "mt-4",
25
+ });
18
26
  exports.Primary = Primary;
19
- //# sourceMappingURL=stepper.stories.js.map
27
+ //# sourceMappingURL=stepper.stories.js.map
@@ -1,27 +1,48 @@
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.Timer = void 0;
27
48
  /* eslint-disable react/prop-types */
@@ -30,77 +51,83 @@ const react_1 = __importStar(require("react"));
30
51
  const timer_svg_1 = require("@assets/svg/timer.svg");
31
52
  // eslint-disable-next-line react/display-name
32
53
  exports.Timer = react_1.default.forwardRef(({ onClear }, ref) => {
33
- const width = 15;
34
- const [minute, setMinute] = (0, react_1.useState)('00');
35
- const [second, setSecond] = (0, react_1.useState)('10');
36
- (0, react_1.useEffect)(() => {
37
- const sec = parseInt(second);
38
- const min = parseInt(minute);
39
- const countDown = setInterval(() => {
40
- if (min === 0 && sec === 0) {
41
- setMinute('00');
42
- setSecond('00');
43
- clearInterval(countDown);
44
- onClear && onClear();
45
- }
46
- else {
47
- let secondstTmp = (sec - 1).toString();
48
- if (secondstTmp.length === 1) {
49
- secondstTmp = '0'.concat(secondstTmp);
50
- }
51
- setSecond(secondstTmp);
52
- if (sec === 0) {
53
- setSecond('59');
54
- const m = (min - 1).toString();
55
- setMinute('0' + m);
56
- }
57
- }
58
- }, 1000);
59
- return () => {
60
- clearInterval(countDown);
61
- };
62
- });
63
- (0, react_1.useImperativeHandle)(ref, () => ({
64
- updateState() {
65
- setMinute('02');
66
- setSecond('00');
67
- },
68
- resetTimer() {
69
- // eslint-disable-next-line no-console
70
- const sec = parseInt(second);
71
- const min = parseInt(minute === '00' ? '02' : minute);
72
- const countDown = setInterval(() => {
73
- // eslint-disable-next-line no-console
74
- if (min === 0 && sec === 0) {
75
- setMinute('00');
76
- setSecond('00');
77
- clearInterval(countDown);
78
- onClear && onClear();
79
- }
80
- else {
81
- let secondstTmp = (sec - 1).toString();
82
- if (secondstTmp.length === 1) {
83
- secondstTmp = '0'.concat(secondstTmp);
84
- }
85
- setSecond(secondstTmp);
86
- if (sec === 0) {
87
- setSecond('59');
88
- const m = (min - 1).toString();
89
- setMinute('0' + m);
90
- }
91
- }
92
- }, 1000);
93
- return () => {
94
- clearInterval(countDown);
95
- };
96
- },
97
- }));
98
- return (react_1.default.createElement("div", { className: "flex flex-row items-center" },
99
- react_1.default.createElement(timer_svg_1.ReactComponent, { width: width, height: width, fill: "#E7503D" }),
100
- react_1.default.createElement("div", { className: "ml-2 flex flex-row" },
101
- react_1.default.createElement("span", null,
102
- minute,
103
- ":"),
104
- react_1.default.createElement("span", null, second))));
54
+ const width = 15;
55
+ const [minute, setMinute] = (0, react_1.useState)("00");
56
+ const [second, setSecond] = (0, react_1.useState)("10");
57
+ (0, react_1.useEffect)(() => {
58
+ const sec = parseInt(second);
59
+ const min = parseInt(minute);
60
+ const countDown = setInterval(() => {
61
+ if (min === 0 && sec === 0) {
62
+ setMinute("00");
63
+ setSecond("00");
64
+ clearInterval(countDown);
65
+ onClear && onClear();
66
+ } else {
67
+ let secondstTmp = (sec - 1).toString();
68
+ if (secondstTmp.length === 1) {
69
+ secondstTmp = "0".concat(secondstTmp);
70
+ }
71
+ setSecond(secondstTmp);
72
+ if (sec === 0) {
73
+ setSecond("59");
74
+ const m = (min - 1).toString();
75
+ setMinute("0" + m);
76
+ }
77
+ }
78
+ }, 1000);
79
+ return () => {
80
+ clearInterval(countDown);
81
+ };
82
+ });
83
+ (0, react_1.useImperativeHandle)(ref, () => ({
84
+ updateState() {
85
+ setMinute("02");
86
+ setSecond("00");
87
+ },
88
+ resetTimer() {
89
+ // eslint-disable-next-line no-console
90
+ const sec = parseInt(second);
91
+ const min = parseInt(minute === "00" ? "02" : minute);
92
+ const countDown = setInterval(() => {
93
+ // eslint-disable-next-line no-console
94
+ if (min === 0 && sec === 0) {
95
+ setMinute("00");
96
+ setSecond("00");
97
+ clearInterval(countDown);
98
+ onClear && onClear();
99
+ } else {
100
+ let secondstTmp = (sec - 1).toString();
101
+ if (secondstTmp.length === 1) {
102
+ secondstTmp = "0".concat(secondstTmp);
103
+ }
104
+ setSecond(secondstTmp);
105
+ if (sec === 0) {
106
+ setSecond("59");
107
+ const m = (min - 1).toString();
108
+ setMinute("0" + m);
109
+ }
110
+ }
111
+ }, 1000);
112
+ return () => {
113
+ clearInterval(countDown);
114
+ };
115
+ },
116
+ }));
117
+ return react_1.default.createElement(
118
+ "div",
119
+ { className: "flex flex-row items-center" },
120
+ react_1.default.createElement(timer_svg_1.ReactComponent, {
121
+ width: width,
122
+ height: width,
123
+ fill: "#E7503D",
124
+ }),
125
+ react_1.default.createElement(
126
+ "div",
127
+ { className: "ml-2 flex flex-row" },
128
+ react_1.default.createElement("span", null, minute, ":"),
129
+ react_1.default.createElement("span", null, second)
130
+ )
131
+ );
105
132
  });
106
- //# sourceMappingURL=timer.component.js.map
133
+ //# sourceMappingURL=timer.component.js.map
@@ -1,7 +1,9 @@
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
  /* eslint-disable testing-library/await-async-query */
7
9
  /* eslint-disable testing-library/prefer-screen-queries */
@@ -9,12 +11,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
9
11
  const react_1 = __importDefault(require("react"));
10
12
  const _core_utils_1 = require("@core-utils");
11
13
  const timer_component_1 = require("./timer.component");
12
- it('render Timer correctly', () => {
13
- const time = (0, _core_utils_1.render)(react_1.default.createElement(timer_component_1.Timer, { onClear: () => { } }));
14
- expect(time).toMatchSnapshot();
14
+ it("render Timer correctly", () => {
15
+ const time = (0, _core_utils_1.render)(
16
+ react_1.default.createElement(timer_component_1.Timer, {
17
+ onClear: () => {},
18
+ })
19
+ );
20
+ expect(time).toMatchSnapshot();
15
21
  });
16
- it('render Timer with minute correctly', () => {
17
- const time = (0, _core_utils_1.render)(react_1.default.createElement(timer_component_1.Timer, { onClear: () => { } }));
18
- expect(time.findByText('minute')).toBeTruthy();
22
+ it("render Timer with minute correctly", () => {
23
+ const time = (0, _core_utils_1.render)(
24
+ react_1.default.createElement(timer_component_1.Timer, {
25
+ onClear: () => {},
26
+ })
27
+ );
28
+ expect(time.findByText("minute")).toBeTruthy();
19
29
  });
20
- //# sourceMappingURL=timer.component.test.js.map
30
+ //# sourceMappingURL=timer.component.test.js.map
@@ -1,18 +1,34 @@
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 __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
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 __exportStar =
26
+ (this && this.__exportStar) ||
27
+ function (m, exports) {
28
+ for (var p in m)
29
+ if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p))
30
+ __createBinding(exports, m, p);
31
+ };
16
32
  Object.defineProperty(exports, "__esModule", { value: true });
17
33
  __exportStar(require("./atoms/buttons/buttons.component"), exports);
18
34
  __exportStar(require("./atoms/check-box/checkBox.component"), exports);
@@ -20,9 +36,12 @@ __exportStar(require("./atoms/date-picker/date-picker.component"), exports);
20
36
  __exportStar(require("./atoms/input/input-otp.component"), exports);
21
37
  __exportStar(require("./atoms/input/input-pin.component"), exports);
22
38
  __exportStar(require("./atoms/input/input.component"), exports);
23
- __exportStar(require("./atoms/input-dropdown/input-dropdown.component"), exports);
39
+ __exportStar(
40
+ require("./atoms/input-dropdown/input-dropdown.component"),
41
+ exports
42
+ );
24
43
  __exportStar(require("./atoms/loader/loader.component"), exports);
25
44
  __exportStar(require("./atoms/radio/radio.component"), exports);
26
45
  __exportStar(require("./atoms/stepper/stepper.component"), exports);
27
46
  __exportStar(require("./atoms/timer/timer.component"), exports);
28
- //# sourceMappingURL=index.js.map
47
+ //# sourceMappingURL=index.js.map