react-restyle-components 0.1.85 → 0.1.87
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/cjs/index.d.ts +2 -0
- package/lib/cjs/index.js +18 -0
- package/lib/cjs/src/App.d.ts +4 -0
- package/lib/cjs/src/App.js +14 -0
- package/lib/cjs/src/__mocks__/styleMock.js +2 -0
- package/lib/cjs/src/core-components/atoms/buttons/button.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/buttons/button.stories.js +42 -0
- package/lib/cjs/src/core-components/atoms/buttons/buttons.component.d.ts +11 -0
- package/lib/cjs/src/core-components/atoms/buttons/buttons.component.js +15 -0
- package/lib/cjs/src/core-components/atoms/check-box/checkBox.component.d.ts +11 -0
- package/lib/cjs/src/core-components/atoms/check-box/checkBox.component.js +47 -0
- package/lib/cjs/src/core-components/atoms/check-box/checkBox.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/check-box/checkBox.stories.js +26 -0
- package/lib/cjs/src/core-components/atoms/date-picker/date-picker.component.d.ts +13 -0
- package/lib/cjs/src/core-components/atoms/date-picker/date-picker.component.js +52 -0
- package/lib/cjs/src/core-components/atoms/date-picker/date-picker.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/date-picker/date-picker.stories.js +24 -0
- package/lib/cjs/src/core-components/atoms/form/form.component.d.ts +102 -0
- package/lib/cjs/src/core-components/atoms/form/form.component.js +192 -0
- package/lib/cjs/src/core-components/atoms/icons/icons.component.d.ts +11 -0
- package/lib/cjs/src/core-components/atoms/icons/icons.component.js +66 -0
- package/lib/cjs/src/core-components/atoms/icons/icons.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/icons/icons.stories.js +22 -0
- package/lib/cjs/src/core-components/atoms/input/input-otp.component.d.ts +15 -0
- package/lib/cjs/src/core-components/atoms/input/input-otp.component.js +88 -0
- package/lib/cjs/src/core-components/atoms/input/input-pin.component.d.ts +16 -0
- package/lib/cjs/src/core-components/atoms/input/input-pin.component.js +107 -0
- package/lib/cjs/src/core-components/atoms/input/input-pin.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/input/input-pin.stories.js +23 -0
- package/lib/cjs/src/core-components/atoms/input/input.component.d.ts +19 -0
- package/lib/cjs/src/core-components/atoms/input/input.component.js +45 -0
- package/lib/cjs/src/core-components/atoms/input/input.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/input/input.stories.js +24 -0
- package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.component.d.ts +11 -0
- package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.component.js +64 -0
- package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/input-dropdown/input-dropdown.stories.js +20 -0
- package/lib/cjs/src/core-components/atoms/loader/loader.component.d.ts +4 -0
- package/lib/cjs/src/core-components/atoms/loader/loader.component.js +61 -0
- package/lib/cjs/src/core-components/atoms/loader/loader.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/loader/loader.stories.js +16 -0
- package/lib/cjs/src/core-components/atoms/radio/radio.component.d.ts +10 -0
- package/lib/cjs/src/core-components/atoms/radio/radio.component.js +49 -0
- package/lib/cjs/src/core-components/atoms/radio/radio.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/radio/radio.stories.js +25 -0
- package/lib/cjs/src/core-components/atoms/stepper/stepper.component.d.ts +10 -0
- package/lib/cjs/src/core-components/atoms/stepper/stepper.component.js +42 -0
- package/lib/cjs/src/core-components/atoms/stepper/stepper.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/stepper/stepper.stories.js +21 -0
- package/lib/cjs/src/core-components/atoms/tabs/tabs.component.d.ts +11 -0
- package/lib/cjs/src/core-components/atoms/tabs/tabs.component.js +46 -0
- package/lib/cjs/src/core-components/atoms/tabs/tabs.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/tabs/tabs.stories.js +25 -0
- package/lib/cjs/src/core-components/atoms/timer/timer.component.d.ts +7 -0
- package/lib/cjs/src/core-components/atoms/timer/timer.component.js +106 -0
- package/lib/cjs/src/core-components/atoms/tooltip/tooltip.component.d.ts +10 -0
- package/lib/cjs/src/core-components/atoms/tooltip/tooltip.component.js +56 -0
- package/lib/cjs/src/core-components/atoms/tooltip/tooltip.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/atoms/tooltip/tooltip.stories.js +16 -0
- package/lib/cjs/src/core-components/index.d.ts +24 -0
- package/lib/cjs/src/core-components/index.js +53 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts +18 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +119 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +48 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts +17 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +120 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +31 -0
- package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.d.ts +9 -0
- package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.js +144 -0
- package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.spec.d.ts +1 -0
- package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.spec.js +72 -0
- package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.stories.js +20 -0
- package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts +12 -0
- package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js +124 -0
- package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +16 -0
- package/lib/cjs/src/core-components/molecules/css-multiline-input/css-properties.d.ts +8931 -0
- package/lib/cjs/src/core-components/molecules/css-multiline-input/css-properties.js +164 -0
- package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.component.d.ts +12 -0
- package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.component.js +60 -0
- package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/modal-confirm/modal-confirm.stories.js +23 -0
- package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.d.ts +9 -0
- package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.js +78 -0
- package/lib/cjs/src/core-components/molecules/multi-select/multi-select.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/multi-select/multi-select.stories.js +22 -0
- package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.d.ts +10 -0
- package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js +88 -0
- package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.d.ts +6 -0
- package/lib/cjs/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.js +23 -0
- package/lib/cjs/src/core-utils/index.d.ts +1 -0
- package/lib/cjs/src/core-utils/index.js +17 -0
- package/lib/cjs/src/core-utils/unit-test.utils.d.ts +4 -0
- package/lib/cjs/src/core-utils/unit-test.utils.js +16 -0
- package/lib/cjs/src/index.d.ts +1 -0
- package/lib/cjs/src/index.js +17 -0
- package/lib/cjs/src/library/assets/svg/index.d.ts +9 -0
- package/lib/cjs/src/library/assets/svg/index.js +40 -0
- package/lib/cjs/src/reportWebVitals.d.ts +3 -0
- package/lib/cjs/src/reportWebVitals.js +37 -0
- package/lib/cjs/src/setupTests.d.ts +1 -0
- package/lib/cjs/src/setupTests.js +7 -0
- package/lib/package.json +43 -67
- package/lib/src/App.css +3 -2
- package/lib/src/App.js +4 -9
- package/lib/src/core-components/atoms/buttons/buttons.component.d.ts +1 -1
- package/lib/src/core-components/atoms/buttons/buttons.component.js +1 -1
- package/lib/src/core-components/atoms/check-box/checkBox.component.d.ts +1 -1
- package/lib/src/core-components/atoms/check-box/checkBox.component.js +2 -2
- package/lib/src/core-components/atoms/check-box/checkBox.stories.d.ts +1 -1
- package/lib/src/core-components/atoms/check-box/checkBox.stories.js +1 -1
- package/lib/src/core-components/atoms/date-picker/date-picker.component.d.ts +1 -1
- package/lib/src/core-components/atoms/date-picker/date-picker.component.js +1 -1
- package/lib/src/core-components/atoms/form/form.component.d.ts +2 -2
- package/lib/src/core-components/atoms/form/form.component.js +2 -2
- package/lib/src/core-components/atoms/icons/icons.component.d.ts +1 -2
- package/lib/src/core-components/atoms/icons/icons.component.js +1 -1
- package/lib/src/core-components/atoms/input/input-otp.component.d.ts +1 -1
- package/lib/src/core-components/atoms/input/input-otp.component.js +1 -1
- package/lib/src/core-components/atoms/input/input-pin.component.d.ts +1 -1
- package/lib/src/core-components/atoms/input/input-pin.component.js +1 -1
- package/lib/src/core-components/atoms/input/input.component.d.ts +1 -1
- package/lib/src/core-components/atoms/input/input.component.js +1 -1
- package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.d.ts +1 -1
- package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.js +1 -1
- package/lib/src/core-components/atoms/loader/loader.component.d.ts +1 -1
- package/lib/src/core-components/atoms/loader/loader.component.js +1 -1
- package/lib/src/core-components/atoms/radio/radio.component.d.ts +1 -1
- package/lib/src/core-components/atoms/radio/radio.component.js +1 -1
- package/lib/src/core-components/atoms/stepper/stepper.component.d.ts +1 -1
- package/lib/src/core-components/atoms/stepper/stepper.component.js +1 -1
- package/lib/src/core-components/atoms/tabs/tabs.component.d.ts +1 -1
- package/lib/src/core-components/atoms/tabs/tabs.component.js +1 -1
- package/lib/src/core-components/atoms/timer/timer.component.d.ts +1 -1
- package/lib/src/core-components/atoms/timer/timer.component.js +1 -1
- package/lib/src/core-components/atoms/tooltip/tooltip.component.d.ts +1 -1
- package/lib/src/core-components/atoms/tooltip/tooltip.component.js +1 -1
- package/lib/src/core-components/index.d.ts +2 -1
- package/lib/src/core-components/index.js +2 -1
- package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts +1 -1
- package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +1 -1
- package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts +1 -1
- package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +1 -1
- package/lib/src/core-components/molecules/autocomplete/autocomplete.css +51 -0
- package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts +9 -0
- package/lib/src/core-components/molecules/autocomplete/autocomplete.js +117 -0
- package/lib/src/core-components/molecules/autocomplete/autocomplete.spec.d.ts +1 -0
- package/lib/src/core-components/molecules/autocomplete/autocomplete.spec.js +67 -0
- package/lib/src/core-components/molecules/autocomplete/autocomplete.stories.d.ts +6 -0
- package/lib/src/core-components/molecules/autocomplete/autocomplete.stories.js +17 -0
- package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts +1 -1
- package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js +1 -1
- package/lib/src/core-components/molecules/modal-confirm/modal-confirm.stories.d.ts +1 -1
- package/lib/src/core-components/molecules/modal-confirm/modal-confirm.stories.js +1 -1
- package/lib/src/core-components/molecules/multi-select/multi-select.component.js +0 -1
- package/lib/src/index.css +17 -4
- package/lib/src/index.d.ts +1 -1
- package/lib/src/index.js +12 -1
- package/lib/src/reportWebVitals.d.ts +3 -1
- package/lib/src/reportWebVitals.js +12 -2
- package/lib/src/tc.css +1 -0
- package/lib/tc.css +1 -1
- package/package.json +42 -66
- package/lib/src/App.test.js +0 -8
- package/lib/src/core-components/atoms/buttons/buttons.test.js +0 -8
- package/lib/src/core-components/atoms/check-box/checkBox.test.js +0 -8
- package/lib/src/core-components/atoms/date-picker/date-picker.test.d.ts +0 -1
- package/lib/src/core-components/atoms/date-picker/date-picker.test.js +0 -9
- package/lib/src/core-components/atoms/form/form.test.d.ts +0 -1
- package/lib/src/core-components/atoms/form/form.test.js +0 -94
- package/lib/src/core-components/atoms/icons/icons.test.d.ts +0 -1
- package/lib/src/core-components/atoms/icons/icons.test.js +0 -10
- package/lib/src/core-components/atoms/input/input-pin.test.d.ts +0 -1
- package/lib/src/core-components/atoms/input/input-pin.test.js +0 -12
- package/lib/src/core-components/atoms/input/input.test.d.ts +0 -1
- package/lib/src/core-components/atoms/input/input.test.js +0 -12
- package/lib/src/core-components/atoms/input-dropdown/input-dropdown.test.d.ts +0 -1
- package/lib/src/core-components/atoms/input-dropdown/input-dropdown.test.js +0 -8
- package/lib/src/core-components/atoms/loader/loader.test.d.ts +0 -1
- package/lib/src/core-components/atoms/loader/loader.test.js +0 -8
- package/lib/src/core-components/atoms/radio/radio.test.d.ts +0 -1
- package/lib/src/core-components/atoms/radio/radio.test.js +0 -8
- package/lib/src/core-components/atoms/stepper/stepper.test.d.ts +0 -1
- package/lib/src/core-components/atoms/stepper/stepper.test.js +0 -7
- package/lib/src/core-components/atoms/tabs/tabs.test.d.ts +0 -1
- package/lib/src/core-components/atoms/tabs/tabs.test.js +0 -13
- package/lib/src/core-components/atoms/timer/timer.test.d.ts +0 -1
- package/lib/src/core-components/atoms/timer/timer.test.js +0 -14
- package/lib/src/core-components/atoms/tooltip/tooltip.component.test.d.ts +0 -1
- package/lib/src/core-components/atoms/tooltip/tooltip.component.test.js +0 -9
- package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.d.ts +0 -1
- package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js +0 -9
- package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.d.ts +0 -1
- package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js +0 -16
- package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.test.d.ts +0 -1
- package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.test.js +0 -10
- package/lib/src/core-components/molecules/modal-confirm/modal-confirm.test.d.ts +0 -1
- package/lib/src/core-components/molecules/modal-confirm/modal-confirm.test.js +0 -10
- package/lib/src/core-components/molecules/multi-select/multi-select.test.d.ts +0 -1
- package/lib/src/core-components/molecules/multi-select/multi-select.test.js +0 -10
- package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.test.d.ts +0 -1
- package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.test.js +0 -12
- /package/lib/{src/App.test.d.ts → cjs/src/__mocks__/styleMock.d.ts} +0 -0
- /package/lib/src/{core-components/atoms/buttons/buttons.test.d.ts → __mocks__/styleMock.d.ts} +0 -0
- /package/lib/src/{core-components/atoms/check-box/checkBox.test.d.ts → __mocks__/styleMock.js} +0 -0
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.properties = void 0;
|
|
4
|
+
/* eslint-disable no-sparse-arrays */
|
|
5
|
+
exports.properties = [
|
|
6
|
+
{
|
|
7
|
+
alignContent: [
|
|
8
|
+
'flex-start',
|
|
9
|
+
'flex-end',
|
|
10
|
+
'center',
|
|
11
|
+
'stretch',
|
|
12
|
+
'space-between',
|
|
13
|
+
'space-around',
|
|
14
|
+
],
|
|
15
|
+
},
|
|
16
|
+
{ alignItems: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'] },
|
|
17
|
+
{
|
|
18
|
+
alignSelf: [
|
|
19
|
+
'auto',
|
|
20
|
+
'flex-start',
|
|
21
|
+
'flex-end',
|
|
22
|
+
'center',
|
|
23
|
+
'baseline',
|
|
24
|
+
'stretch',
|
|
25
|
+
],
|
|
26
|
+
},
|
|
27
|
+
{ flex: ['number', 'string'] },
|
|
28
|
+
{ flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'] },
|
|
29
|
+
{ flexWrap: ['nowrap', 'wrap', 'wrap-reverse'] },
|
|
30
|
+
{ flexFlow: ['number'] },
|
|
31
|
+
{ flexGrow: ['number'] },
|
|
32
|
+
{ flexShrink: ['number'] },
|
|
33
|
+
{ flexBasis: ['number', 'string'] },
|
|
34
|
+
{
|
|
35
|
+
justifyContent: [
|
|
36
|
+
,
|
|
37
|
+
'flex-start',
|
|
38
|
+
'flex-end',
|
|
39
|
+
'center',
|
|
40
|
+
'space-around',
|
|
41
|
+
'space-between',
|
|
42
|
+
'space-evenly',
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
{ gap: ['number', 'string'] },
|
|
46
|
+
{ rowGap: ['number'] },
|
|
47
|
+
{ columnGap: ['number'] },
|
|
48
|
+
// Layout
|
|
49
|
+
{ aspectRatio: ['number', 'string'] },
|
|
50
|
+
{ bottom: ['number', 'string'] },
|
|
51
|
+
{ display: ['flex', 'none'] },
|
|
52
|
+
{ left: ['number', 'string'] },
|
|
53
|
+
{ position: ['absolute', 'relative'] },
|
|
54
|
+
{ right: ['number', 'string'] },
|
|
55
|
+
{ top: ['number', 'string'] },
|
|
56
|
+
{ overflow: ['hidden'] },
|
|
57
|
+
{ zIndex: ['number', 'string'] },
|
|
58
|
+
// Dimension
|
|
59
|
+
{ height: ['number', 'string'] },
|
|
60
|
+
{ maxHeight: ['number', 'string'] },
|
|
61
|
+
{ maxWidth: ['number', 'string'] },
|
|
62
|
+
{ minHeight: ['number', 'string'] },
|
|
63
|
+
{ minWidth: ['number', 'string'] },
|
|
64
|
+
{ width: ['number', 'string'] },
|
|
65
|
+
// Color
|
|
66
|
+
{ backgroundColor: ['string'] },
|
|
67
|
+
{ color: ['string'] },
|
|
68
|
+
{ opacity: ['number'] },
|
|
69
|
+
// Text
|
|
70
|
+
{ fontSize: ['number', 'string'] },
|
|
71
|
+
{ fontFamily: ['string'] },
|
|
72
|
+
{ fontStyle: ['string', 'normal'] },
|
|
73
|
+
{
|
|
74
|
+
fontWeight: [
|
|
75
|
+
,
|
|
76
|
+
'number',
|
|
77
|
+
'thin',
|
|
78
|
+
'hairline',
|
|
79
|
+
'ultralight',
|
|
80
|
+
'extralight',
|
|
81
|
+
'light',
|
|
82
|
+
'normal',
|
|
83
|
+
'medium',
|
|
84
|
+
'semibold',
|
|
85
|
+
'demibold',
|
|
86
|
+
'bold',
|
|
87
|
+
'ultrabold',
|
|
88
|
+
'extrabold',
|
|
89
|
+
'heavy',
|
|
90
|
+
'black',
|
|
91
|
+
],
|
|
92
|
+
},
|
|
93
|
+
{ letterSpacing: ['number', 'string'] },
|
|
94
|
+
{ lineHeight: ['number', 'string'] },
|
|
95
|
+
{ maxLines: ['number'] },
|
|
96
|
+
{ textAlign: ['left', 'right', 'center', 'justify'] },
|
|
97
|
+
{
|
|
98
|
+
textDecoration: [
|
|
99
|
+
,
|
|
100
|
+
'line-through',
|
|
101
|
+
'underline',
|
|
102
|
+
'none',
|
|
103
|
+
'line-through underline',
|
|
104
|
+
'underline line-through',
|
|
105
|
+
],
|
|
106
|
+
},
|
|
107
|
+
{ textDecorationColor: ['string'] },
|
|
108
|
+
{ textDecorationStyle: ['dashed', 'dotted', 'solid', 'string'] },
|
|
109
|
+
{ textIndent: ['any'] },
|
|
110
|
+
{ textOverflow: ['ellipsis'] },
|
|
111
|
+
{ textTransform: ['capitalize', 'lowercase', 'uppercase'] },
|
|
112
|
+
{ verticalAlign: ['sub', 'super'] },
|
|
113
|
+
// Sizing/positioning
|
|
114
|
+
{ objectFit: ['string'] },
|
|
115
|
+
{ objectPosition: ['number', 'string'] },
|
|
116
|
+
{ objectPositionX: ['number', 'string'] },
|
|
117
|
+
{ objectPositionY: ['number', 'string'] },
|
|
118
|
+
// Margin/padding
|
|
119
|
+
{ margin: ['number', 'string'] },
|
|
120
|
+
{ marginHorizontal: ['number', 'string'] },
|
|
121
|
+
{ marginVertical: ['number', 'string'] },
|
|
122
|
+
{ marginTop: ['number', 'string'] },
|
|
123
|
+
{ marginRight: ['number', 'string'] },
|
|
124
|
+
{ marginBottom: ['number', 'string'] },
|
|
125
|
+
{ marginLeft: ['number', 'string'] },
|
|
126
|
+
{ padding: ['number', 'string'] },
|
|
127
|
+
{ paddingHorizontal: ['number', 'string'] },
|
|
128
|
+
{ paddingVertical: ['number', 'string'] },
|
|
129
|
+
{ paddingTop: ['number', 'string'] },
|
|
130
|
+
{ paddingRight: ['number', 'string'] },
|
|
131
|
+
{ paddingBottom: ['number', 'string'] },
|
|
132
|
+
{ paddingLeft: ['number', 'string'] },
|
|
133
|
+
// Transformations
|
|
134
|
+
{ transform: ['string'] },
|
|
135
|
+
{ transformOrigin: ['number', 'string'] },
|
|
136
|
+
{ transformOriginX: ['number', 'string'] },
|
|
137
|
+
{ transformOriginY: ['number', 'string'] },
|
|
138
|
+
// Borders
|
|
139
|
+
{ border: ['number', 'string'] },
|
|
140
|
+
{ borderWidth: ['number', 'string'] },
|
|
141
|
+
{ borderColor: ['string'] },
|
|
142
|
+
{ borderStyle: ['dashed', 'dotted', 'solid'] },
|
|
143
|
+
{ borderTop: ['number', 'string'] },
|
|
144
|
+
{ borderTopColor: ['string'] },
|
|
145
|
+
{ borderTopStyle: ['dashed', 'dotted', 'solid'] },
|
|
146
|
+
{ borderTopWidth: ['number', 'string'] },
|
|
147
|
+
{ borderRight: ['number', 'string'] },
|
|
148
|
+
{ borderRightColor: ['string'] },
|
|
149
|
+
{ borderRightStyle: ['dashed', 'dotted', 'solid'] },
|
|
150
|
+
{ borderRightWidth: ['number', 'string'] },
|
|
151
|
+
{ borderBottom: ['number', 'string'] },
|
|
152
|
+
{ borderBottomColor: ['string'] },
|
|
153
|
+
{ borderBottomStyle: ['dashed', 'dotted', 'solid'] },
|
|
154
|
+
{ borderBottomWidth: ['number', 'string'] },
|
|
155
|
+
{ borderLeft: ['number', 'string'] },
|
|
156
|
+
{ borderLeftColor: ['string'] },
|
|
157
|
+
{ borderLeftStyle: ['dashed', 'dotted', 'solid'] },
|
|
158
|
+
{ borderLeftWidth: ['number', 'string'] },
|
|
159
|
+
{ borderTopLeftRadius: ['number', 'string'] },
|
|
160
|
+
{ borderTopRightRadius: ['number', 'string'] },
|
|
161
|
+
{ borderBottomRightRadius: ['number', 'string'] },
|
|
162
|
+
{ borderBottomLeftRadius: ['number', 'string'] },
|
|
163
|
+
{ borderRadius: ['number', 'string'] },
|
|
164
|
+
];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ModalConfirmProps {
|
|
3
|
+
visible: boolean;
|
|
4
|
+
title?: string;
|
|
5
|
+
message: string;
|
|
6
|
+
submitTitle?: string;
|
|
7
|
+
closeTitle?: string;
|
|
8
|
+
onClick: () => void;
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, onClick, onClose, }: ModalConfirmProps) => React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
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) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.ModalConfirm = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const reactstrap_1 = require("reactstrap");
|
|
29
|
+
const ModalConfirm = ({ visible = false, title = 'Confirm', message = '', submitTitle = 'Send', closeTitle = 'Close', onClick, onClose, }) => {
|
|
30
|
+
const [showModal, setShowModal] = (0, react_1.useState)(visible);
|
|
31
|
+
(0, react_1.useEffect)(() => {
|
|
32
|
+
setShowModal(visible);
|
|
33
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
34
|
+
}, [visible]);
|
|
35
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
36
|
+
react_1.default.createElement(reactstrap_1.Container, null, showModal && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
37
|
+
react_1.default.createElement("div", { className: "flex justify-center items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none " },
|
|
38
|
+
react_1.default.createElement("div", { className: "relative my-6 mx-auto " },
|
|
39
|
+
react_1.default.createElement("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-fit min-w-80 bg-white outline-none focus:outline-none" },
|
|
40
|
+
react_1.default.createElement("div", { className: "flex items-center justify-between p-2 border-b border-solid border-gray-300 rounded-t" },
|
|
41
|
+
react_1.default.createElement("h3", { className: "text-2xl font-semibold" }, title),
|
|
42
|
+
react_1.default.createElement("button", { className: "p-1 border-0 text-black opacity-1 ml-6 float-right text-3xl leading-none font-semibold outline-none focus:outline-none", onClick: () => {
|
|
43
|
+
setShowModal(false);
|
|
44
|
+
onClose && onClose();
|
|
45
|
+
} },
|
|
46
|
+
react_1.default.createElement("span", { className: " text-black h-6 w-6 text-2xl block outline-none focus:outline-none" }, "\u00D7"))),
|
|
47
|
+
react_1.default.createElement("div", { className: "flex p-2" },
|
|
48
|
+
react_1.default.createElement("div", { className: "flex" },
|
|
49
|
+
react_1.default.createElement("span", { className: "text-md" }, message))),
|
|
50
|
+
react_1.default.createElement("div", { className: "flex items-center justify-end p-2 border-t border-solid border-gray-300 rounded-b" },
|
|
51
|
+
react_1.default.createElement("button", { className: "text-red-500 background-transparent font-bold uppercase p-2 text-sm outline-none focus:outline-none mr-1 mb-1", type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
|
|
52
|
+
setShowModal(false);
|
|
53
|
+
onClose && onClose();
|
|
54
|
+
} }, closeTitle),
|
|
55
|
+
react_1.default.createElement("button", { className: "bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm p-2 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1", type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
|
|
56
|
+
onClick();
|
|
57
|
+
} }, submitTitle))))),
|
|
58
|
+
react_1.default.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" }))))));
|
|
59
|
+
};
|
|
60
|
+
exports.ModalConfirm = ModalConfirm;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { ModalConfirm } from './modal-confirm.component';
|
|
3
|
+
declare const meta: Meta<typeof ModalConfirm>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof ModalConfirm>;
|
|
6
|
+
export declare const Primary: Story;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Primary = void 0;
|
|
4
|
+
const modal_confirm_component_1 = require("./modal-confirm.component");
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Design System/Molecules/ModalConfirm',
|
|
7
|
+
component: modal_confirm_component_1.ModalConfirm,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
parameters: {
|
|
10
|
+
componentSubtitle: `import { ModalConfirm } from 'react-restyle-components'`,
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
exports.default = meta;
|
|
14
|
+
exports.Primary = {
|
|
15
|
+
args: {
|
|
16
|
+
visible: true,
|
|
17
|
+
title: 'Confirm',
|
|
18
|
+
message: 'Are you sure delete?',
|
|
19
|
+
submitTitle: 'Submit',
|
|
20
|
+
onClick: () => { },
|
|
21
|
+
onClose: () => { },
|
|
22
|
+
},
|
|
23
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MultiSelectProps {
|
|
3
|
+
options: Array<string>;
|
|
4
|
+
selectedItems?: Array<string>;
|
|
5
|
+
hasError?: boolean;
|
|
6
|
+
onSelect: (item: any) => any;
|
|
7
|
+
}
|
|
8
|
+
export declare const MultiSelect: ({ options, selectedItems, hasError, onSelect, }: MultiSelectProps) => React.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,78 @@
|
|
|
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) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.MultiSelect = void 0;
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
|
|
29
|
+
const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
|
|
30
|
+
const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
|
|
31
|
+
const useOutsideAlerter = (ref) => {
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
33
|
+
function handleClickOutside(event) {
|
|
34
|
+
if (ref.current && !ref.current.contains(event.target) && isListOpen) {
|
|
35
|
+
setIsListOpen(false);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
39
|
+
return () => {
|
|
40
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
41
|
+
};
|
|
42
|
+
}, [ref, isListOpen]);
|
|
43
|
+
};
|
|
44
|
+
(0, react_1.useEffect)(() => {
|
|
45
|
+
setSelectedOptions(selectedItems);
|
|
46
|
+
}, [selectedItems]);
|
|
47
|
+
const wrapperRef = (0, react_1.useRef)(null);
|
|
48
|
+
useOutsideAlerter(wrapperRef);
|
|
49
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
50
|
+
react_1.default.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red ' : 'border-gray-300'}`, ref: wrapperRef },
|
|
51
|
+
react_1.default.createElement("span", { className: "p-2 mt-1 shadow-sm", onClick: () => {
|
|
52
|
+
setIsListOpen(!isListOpen);
|
|
53
|
+
} }, selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select'),
|
|
54
|
+
react_1.default.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
|
|
55
|
+
? options?.length > 0 && (react_1.default.createElement("ul", null, options?.map((item, index) => (react_1.default.createElement("li", { key: index, className: "flex items-center text-center" },
|
|
56
|
+
react_1.default.createElement("input", { className: "bg-black", type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
|
|
57
|
+
if (selectedOptions?.includes(item)) {
|
|
58
|
+
setSelectedOptions(selectedOptions?.filter((e) => e != item));
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
if (selectedOptions?.length > 0) {
|
|
62
|
+
setSelectedOptions(selectedOptions?.concat([item]));
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
setSelectedOptions([item]);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}, onBlur: () => {
|
|
69
|
+
if (!isListOpen)
|
|
70
|
+
onSelect(selectedOptions);
|
|
71
|
+
} }),
|
|
72
|
+
' ',
|
|
73
|
+
react_1.default.createElement("label", { className: "ml-3 mt-2 pt-1 dark:text-white" },
|
|
74
|
+
' ',
|
|
75
|
+
item))))))
|
|
76
|
+
: null))));
|
|
77
|
+
};
|
|
78
|
+
exports.MultiSelect = MultiSelect;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Primary = void 0;
|
|
4
|
+
const multi_select_component_1 = require("./multi-select.component");
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Design System/Molecules/MultiSelect',
|
|
7
|
+
component: multi_select_component_1.MultiSelect,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
parameters: {
|
|
10
|
+
componentSubtitle: `import { MultiSelect } from 'react-restyle-components'`,
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
exports.default = meta;
|
|
14
|
+
exports.Primary = {
|
|
15
|
+
args: {
|
|
16
|
+
options: ['UPI', 'CARD', 'CASH'],
|
|
17
|
+
selectedItems: ['CASH', 'UPI'],
|
|
18
|
+
onSelect: (item) => {
|
|
19
|
+
console.log({ item });
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MultiSelectWithFieldProps {
|
|
3
|
+
displayField: string;
|
|
4
|
+
options: Array<any>;
|
|
5
|
+
selectedItems?: Array<any>;
|
|
6
|
+
hasError?: boolean;
|
|
7
|
+
onSelect: (item: any) => any;
|
|
8
|
+
}
|
|
9
|
+
export declare const MultiSelectWithField: ({ displayField, options, selectedItems, hasError, onSelect, }: MultiSelectWithFieldProps) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,88 @@
|
|
|
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) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.MultiSelectWithField = void 0;
|
|
30
|
+
/* eslint-disable */
|
|
31
|
+
const react_1 = __importStar(require("react"));
|
|
32
|
+
const lodash_1 = __importDefault(require("lodash"));
|
|
33
|
+
const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
|
|
34
|
+
const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
|
|
35
|
+
const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
|
|
36
|
+
const useOutsideAlerter = ref => {
|
|
37
|
+
(0, react_1.useEffect)(() => {
|
|
38
|
+
function handleClickOutside(event) {
|
|
39
|
+
if (ref.current && !ref.current.contains(event.target) && isListOpen) {
|
|
40
|
+
setIsListOpen(false);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
44
|
+
return () => {
|
|
45
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
46
|
+
};
|
|
47
|
+
}, [ref, isListOpen]);
|
|
48
|
+
};
|
|
49
|
+
(0, react_1.useEffect)(() => {
|
|
50
|
+
setSelectedOptions(selectedItems);
|
|
51
|
+
}, [selectedItems]);
|
|
52
|
+
const wrapperRef = (0, react_1.useRef)(null);
|
|
53
|
+
useOutsideAlerter(wrapperRef);
|
|
54
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
55
|
+
react_1.default.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red ' : 'border-gray-300'}`, ref: wrapperRef },
|
|
56
|
+
react_1.default.createElement("span", { className: 'p-2 mt-1 shadow-sm', onClick: () => {
|
|
57
|
+
setIsListOpen(!isListOpen);
|
|
58
|
+
} }, selectedOptions?.length > 0
|
|
59
|
+
? `${selectedOptions?.length} Items`
|
|
60
|
+
: 'Select'),
|
|
61
|
+
react_1.default.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
|
|
62
|
+
? options?.length > 0 && (react_1.default.createElement("ul", { className: 'flex flex-col gap-1 p-2' }, options?.map((item, index) => (react_1.default.createElement("li", { key: index, className: 'flex items-center' },
|
|
63
|
+
react_1.default.createElement("input", { className: 'flex bg-black', type: 'checkbox', checked: !lodash_1.default.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
|
|
64
|
+
item[displayField]?.toUpperCase()))
|
|
65
|
+
? true
|
|
66
|
+
: false, onChange: () => {
|
|
67
|
+
if (!lodash_1.default.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
|
|
68
|
+
item[displayField]?.toUpperCase()))) {
|
|
69
|
+
setSelectedOptions(selectedOptions?.filter(e => e[displayField]?.toUpperCase() !=
|
|
70
|
+
item[displayField]?.toUpperCase()));
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
if (selectedOptions?.length > 0) {
|
|
74
|
+
setSelectedOptions(selectedOptions?.concat([item]));
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
setSelectedOptions([item]);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}, onBlur: () => {
|
|
81
|
+
if (!isListOpen)
|
|
82
|
+
onSelect(selectedOptions);
|
|
83
|
+
} }),
|
|
84
|
+
' ',
|
|
85
|
+
react_1.default.createElement("span", { className: 'flex ml-2 dark:text-white text-center' }, item[displayField]))))))
|
|
86
|
+
: null))));
|
|
87
|
+
};
|
|
88
|
+
exports.MultiSelectWithField = MultiSelectWithField;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { MultiSelectWithField } from './multi-select-with-field.component';
|
|
3
|
+
declare const meta: Meta<typeof MultiSelectWithField>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof MultiSelectWithField>;
|
|
6
|
+
export declare const Primary: Story;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Primary = void 0;
|
|
4
|
+
const multi_select_with_field_component_1 = require("./multi-select-with-field.component");
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Design System/Molecules/MultiSelectWithField',
|
|
7
|
+
component: multi_select_with_field_component_1.MultiSelectWithField,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
parameters: {
|
|
10
|
+
componentSubtitle: `import { MultiSelectWithField } from 'react-restyle-components'`,
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
exports.default = meta;
|
|
14
|
+
exports.Primary = {
|
|
15
|
+
args: {
|
|
16
|
+
displayField: 'code',
|
|
17
|
+
options: [{ code: 'UPI' }, { code: 'CARD' }, { code: 'CASH' }],
|
|
18
|
+
selectedItems: [{ code: 'CASH' }],
|
|
19
|
+
onSelect: (item) => {
|
|
20
|
+
console.log({ item });
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './unit-test.utils';
|
|
@@ -0,0 +1,17 @@
|
|
|
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
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./unit-test.utils"), exports);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Providers = exports.render = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const react_2 = require("@testing-library/react");
|
|
9
|
+
const Providers = ({ children }) => {
|
|
10
|
+
return react_1.default.createElement("div", null, children);
|
|
11
|
+
};
|
|
12
|
+
exports.Providers = Providers;
|
|
13
|
+
const render = (Component) => {
|
|
14
|
+
return (0, react_2.render)(Component, { wrapper: Providers });
|
|
15
|
+
};
|
|
16
|
+
exports.render = render;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './index.css';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const client_1 = __importDefault(require("react-dom/client"));
|
|
8
|
+
require("./index.css");
|
|
9
|
+
const App_1 = __importDefault(require("./App"));
|
|
10
|
+
const reportWebVitals_1 = __importDefault(require("./reportWebVitals"));
|
|
11
|
+
const root = client_1.default.createRoot(document.getElementById('root'));
|
|
12
|
+
root.render(react_1.default.createElement(react_1.default.StrictMode, null,
|
|
13
|
+
react_1.default.createElement(App_1.default, null)));
|
|
14
|
+
// If you want to start measuring performance in your app, pass a function
|
|
15
|
+
// to log results (for example: reportWebVitals(console.log))
|
|
16
|
+
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
17
|
+
(0, reportWebVitals_1.default)();
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import UnCheckbox from './unCheckbox.svg';
|
|
2
|
+
import CheckedBox from './checkedBox.svg';
|
|
3
|
+
import DatePickerSvg from './datePicker.svg';
|
|
4
|
+
import CheckedRadio from './checkedRadio.svg';
|
|
5
|
+
import UncheckRadio from './uncheckRadio.svg';
|
|
6
|
+
import TimerSVG from './timer.svg';
|
|
7
|
+
import UpArrow from './UpArrow.svg';
|
|
8
|
+
import DownArrow from './DownArrow.svg';
|
|
9
|
+
export { UnCheckbox, CheckedBox, DatePickerSvg, CheckedRadio, UncheckRadio, TimerSVG, UpArrow, DownArrow, };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.DownArrow = exports.UpArrow = exports.TimerSVG = exports.UncheckRadio = exports.CheckedRadio = exports.DatePickerSvg = exports.CheckedBox = exports.UnCheckbox = void 0;
|
|
7
|
+
const unCheckbox_svg_1 = __importDefault(require("./unCheckbox.svg"));
|
|
8
|
+
exports.UnCheckbox = unCheckbox_svg_1.default;
|
|
9
|
+
const checkedBox_svg_1 = __importDefault(require("./checkedBox.svg"));
|
|
10
|
+
exports.CheckedBox = checkedBox_svg_1.default;
|
|
11
|
+
const datePicker_svg_1 = __importDefault(require("./datePicker.svg"));
|
|
12
|
+
exports.DatePickerSvg = datePicker_svg_1.default;
|
|
13
|
+
const checkedRadio_svg_1 = __importDefault(require("./checkedRadio.svg"));
|
|
14
|
+
exports.CheckedRadio = checkedRadio_svg_1.default;
|
|
15
|
+
const uncheckRadio_svg_1 = __importDefault(require("./uncheckRadio.svg"));
|
|
16
|
+
exports.UncheckRadio = uncheckRadio_svg_1.default;
|
|
17
|
+
const timer_svg_1 = __importDefault(require("./timer.svg"));
|
|
18
|
+
exports.TimerSVG = timer_svg_1.default;
|
|
19
|
+
const UpArrow_svg_1 = __importDefault(require("./UpArrow.svg"));
|
|
20
|
+
exports.UpArrow = UpArrow_svg_1.default;
|
|
21
|
+
const DownArrow_svg_1 = __importDefault(require("./DownArrow.svg"));
|
|
22
|
+
exports.DownArrow = DownArrow_svg_1.default;
|
|
23
|
+
// import {ReactComponent as UnCheckbox} from '../../../library/assets/svg/unCheckbox.svg';
|
|
24
|
+
// import {ReactComponent as CheckedBox} from '../../../library/assets/svg/checkedBox.svg';
|
|
25
|
+
// import {ReactComponent as DatePickerSvg} from '../../../library/assets/svg/datePicker.svg';
|
|
26
|
+
// import {ReactComponent as CheckedRadio} from '../../../library/assets/svg/checkedRadio.svg';
|
|
27
|
+
// import {ReactComponent as UncheckRadio} from '../../../library/assets/svg/uncheckRadio.svg';
|
|
28
|
+
// import {ReactComponent as TimerSVG} from '../../../library/assets/svg/timer.svg';
|
|
29
|
+
// import {ReactComponent as UpArrow} from '../../../library/assets/svg/UpArrow.svg';
|
|
30
|
+
// import {ReactComponent as DownArrow} from '../../../library/assets/svg/DownArrow.svg';
|
|
31
|
+
// export {
|
|
32
|
+
// UnCheckbox,
|
|
33
|
+
// CheckedBox,
|
|
34
|
+
// DatePickerSvg,
|
|
35
|
+
// CheckedRadio,
|
|
36
|
+
// UncheckRadio,
|
|
37
|
+
// TimerSVG,
|
|
38
|
+
// UpArrow,
|
|
39
|
+
// DownArrow,
|
|
40
|
+
// };
|