no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -22
- package/dist/index.js +828 -495
- package/dist/index.js.map +1 -1
- package/lib-esm/components/Accordion/Accordion.d.ts +2 -3
- package/lib-esm/components/Accordion/Accordion.js +6 -3
- package/lib-esm/components/Accordion/Accordion.js.map +1 -1
- package/lib-esm/components/Accordion/AccordionStep.d.ts +2 -2
- package/lib-esm/components/Accordion/AccordionStep.js +31 -22
- package/lib-esm/components/Accordion/AccordionStep.js.map +1 -1
- package/lib-esm/components/Accordion/index.js.map +1 -1
- package/lib-esm/components/Badge/Badge.js +5 -6
- package/lib-esm/components/Badge/Badge.js.map +1 -1
- package/lib-esm/components/Button/LinkButton.js +2 -1
- package/lib-esm/components/Button/LinkButton.js.map +1 -1
- package/lib-esm/components/Card/Card.js +1 -1
- package/lib-esm/components/Card/Card.js.map +1 -1
- package/lib-esm/components/Chip/Chip.js +1 -1
- package/lib-esm/components/Chip/Chip.js.map +1 -1
- package/lib-esm/components/ChipInput/ChipInput.js +21 -12
- package/lib-esm/components/ChipInput/ChipInput.js.map +1 -1
- package/lib-esm/components/Dialog/AlertDialog.js +3 -3
- package/lib-esm/components/Dialog/AlertDialog.js.map +1 -1
- package/lib-esm/components/Dialog/ConfirmDialog.js +8 -3
- package/lib-esm/components/Dialog/ConfirmDialog.js.map +1 -1
- package/lib-esm/components/Dialog/Dialog.d.ts +2 -2
- package/lib-esm/components/Dialog/Dialog.js +6 -4
- package/lib-esm/components/Dialog/Dialog.js.map +1 -1
- package/lib-esm/components/Dialog/PromptDialog.js +2 -2
- package/lib-esm/components/Dialog/PromptDialog.js.map +1 -1
- package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts +1 -1
- package/lib-esm/components/DragAndDrop/DragAndDrop.js +4 -2
- package/lib-esm/components/DragAndDrop/DragAndDrop.js.map +1 -1
- package/lib-esm/components/DragAndDrop/DragItem.js +25 -17
- package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -1
- package/lib-esm/components/DragAndDrop/types.js +1 -1
- package/lib-esm/components/DragAndDrop/types.js.map +1 -1
- package/lib-esm/components/Drawer/Drawer.js +10 -8
- package/lib-esm/components/Drawer/Drawer.js.map +1 -1
- package/lib-esm/components/Drawer/index.d.ts +1 -1
- package/lib-esm/components/Drawer/index.js +1 -1
- package/lib-esm/components/Drawer/index.js.map +1 -1
- package/lib-esm/components/Groups/Group.js +26 -14
- package/lib-esm/components/Groups/Group.js.map +1 -1
- package/lib-esm/components/Input/Checkbox.js +11 -8
- package/lib-esm/components/Input/Checkbox.js.map +1 -1
- package/lib-esm/components/Input/Dropdown.d.ts +2 -2
- package/lib-esm/components/Input/Dropdown.js +22 -22
- package/lib-esm/components/Input/Dropdown.js.map +1 -1
- package/lib-esm/components/Input/Input.js +19 -10
- package/lib-esm/components/Input/Input.js.map +1 -1
- package/lib-esm/components/Input/Radio.js +4 -3
- package/lib-esm/components/Input/Radio.js.map +1 -1
- package/lib-esm/components/Input/RadioButton.js +1 -1
- package/lib-esm/components/Input/RadioButton.js.map +1 -1
- package/lib-esm/components/Input/Select.js +17 -9
- package/lib-esm/components/Input/Select.js.map +1 -1
- package/lib-esm/components/Input/TextArea.js +17 -9
- package/lib-esm/components/Input/TextArea.js.map +1 -1
- package/lib-esm/components/Input/Toggle.js +5 -5
- package/lib-esm/components/Input/Toggle.js.map +1 -1
- package/lib-esm/components/Menu/Menu.d.ts +1 -1
- package/lib-esm/components/Menu/Menu.js +3 -2
- package/lib-esm/components/Menu/Menu.js.map +1 -1
- package/lib-esm/components/Menu/MenuContext.d.ts +11 -5
- package/lib-esm/components/Menu/MenuContext.js.map +1 -1
- package/lib-esm/components/Menu/MenuItem.d.ts +2 -2
- package/lib-esm/components/Menu/MenuItem.js +9 -5
- package/lib-esm/components/Menu/MenuItem.js.map +1 -1
- package/lib-esm/components/Modal/Modal.js +6 -4
- package/lib-esm/components/Modal/Modal.js.map +1 -1
- package/lib-esm/components/Notification/Notification.js +8 -4
- package/lib-esm/components/Notification/Notification.js.map +1 -1
- package/lib-esm/components/Notification/NotificationManager.js +11 -9
- package/lib-esm/components/Notification/NotificationManager.js.map +1 -1
- package/lib-esm/components/Notification/style.js +10 -8
- package/lib-esm/components/Notification/style.js.map +1 -1
- package/lib-esm/components/Notification/types.js +0 -1
- package/lib-esm/components/Notification/types.js.map +1 -1
- package/lib-esm/components/Popover/Popover.js +20 -17
- package/lib-esm/components/Popover/Popover.js.map +1 -1
- package/lib-esm/components/Popover/index.js.map +1 -1
- package/lib-esm/components/Spinner/Spinner.js +10 -6
- package/lib-esm/components/Spinner/Spinner.js.map +1 -1
- package/lib-esm/components/Stepper/Step.js +1 -0
- package/lib-esm/components/Stepper/Step.js.map +1 -1
- package/lib-esm/components/Stepper/Stepper.d.ts +3 -3
- package/lib-esm/components/Stepper/Stepper.js +17 -9
- package/lib-esm/components/Stepper/Stepper.js.map +1 -1
- package/lib-esm/components/Stepper/index.js.map +1 -1
- package/lib-esm/components/Tabs/Tab.js.map +1 -1
- package/lib-esm/components/Tabs/Tabs.d.ts +5 -5
- package/lib-esm/components/Tabs/Tabs.js +12 -9
- package/lib-esm/components/Tabs/Tabs.js.map +1 -1
- package/lib-esm/components/Toast/Toast.d.ts +1 -0
- package/lib-esm/components/Toast/Toast.js +9 -8
- package/lib-esm/components/Toast/Toast.js.map +1 -1
- package/lib-esm/components/Toast/ToastStory.js +1 -1
- package/lib-esm/components/Toast/ToastStory.js.map +1 -1
- package/lib-esm/components/Tooltip/Tooltip.js +5 -6
- package/lib-esm/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-esm/components/index.d.ts +1 -0
- package/lib-esm/components/index.js +1 -0
- package/lib-esm/components/index.js.map +1 -1
- package/lib-esm/icons/CheckCircle.d.ts +1 -1
- package/lib-esm/icons/CheckCircle.js +1 -1
- package/lib-esm/icons/CheckCircle.js.map +1 -1
- package/lib-esm/icons/Close.d.ts +1 -1
- package/lib-esm/icons/Close.js +1 -1
- package/lib-esm/icons/Close.js.map +1 -1
- package/lib-esm/icons/DragIndicator.d.ts +1 -1
- package/lib-esm/icons/DragIndicator.js +1 -1
- package/lib-esm/icons/DragIndicator.js.map +1 -1
- package/lib-esm/icons/ErrorOutline.d.ts +1 -1
- package/lib-esm/icons/ErrorOutline.js +1 -1
- package/lib-esm/icons/ErrorOutline.js.map +1 -1
- package/lib-esm/icons/ExpandMore.d.ts +1 -1
- package/lib-esm/icons/ExpandMore.js +1 -1
- package/lib-esm/icons/ExpandMore.js.map +1 -1
- package/lib-esm/icons/FiberManualRecord.d.ts +1 -1
- package/lib-esm/icons/FiberManualRecord.js +1 -1
- package/lib-esm/icons/FiberManualRecord.js.map +1 -1
- package/lib-esm/icons/Info.d.ts +1 -1
- package/lib-esm/icons/Info.js +1 -1
- package/lib-esm/icons/Info.js.map +1 -1
- package/lib-esm/icons/ReportProblem.d.ts +1 -1
- package/lib-esm/icons/ReportProblem.js +1 -1
- package/lib-esm/icons/ReportProblem.js.map +1 -1
- package/lib-esm/shared/LayerManager.d.ts +2 -2
- package/lib-esm/shared/LayerManager.js +18 -14
- package/lib-esm/shared/LayerManager.js.map +1 -1
- package/lib-esm/shared/constants.js.map +1 -1
- package/package.json +93 -74
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAa/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAoB;;;;;;;;4CAQN,SAAS,CAAC,YAAY;;0CAExB,SAAS,CAAC,UAAU
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ const Input = styled.input `
|
|
|
19
19
|
border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
|
|
20
20
|
border-radius: 50%;
|
|
21
21
|
display: block;
|
|
22
|
-
transition: background-color .3s ease;
|
|
22
|
+
transition: background-color 0.3s ease;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
/* checked */
|
|
@@ -38,7 +38,8 @@ const Input = styled.input `
|
|
|
38
38
|
|
|
39
39
|
&:enabled:checked:focus::before {
|
|
40
40
|
border: 1px solid var(--primary, ${constants.PRIMARY});
|
|
41
|
-
box-shadow:
|
|
41
|
+
box-shadow:
|
|
42
|
+
0 0 0 3px var(--primary, ${constants.PRIMARY_LIGHT}),
|
|
42
43
|
inset 0 0 0 3px var(--background, ${constants.BACKGROUND});
|
|
43
44
|
cursor: pointer;
|
|
44
45
|
}
|
|
@@ -71,7 +72,7 @@ const Input = styled.input `
|
|
|
71
72
|
}
|
|
72
73
|
`;
|
|
73
74
|
function Radio(props) {
|
|
74
|
-
return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { type:
|
|
75
|
+
return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { type: "radio" })), _jsx("span", { children: props.label })] }));
|
|
75
76
|
}
|
|
76
77
|
Radio.propTypes = {
|
|
77
78
|
/** Label for the field */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Input/Radio.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAIzB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;gDASsB,SAAS,CAAC,YAAY;;;;;;;;2CAQ3B,SAAS,CAAC,OAAO;2CACjB,SAAS,CAAC,OAAO;wDACJ,SAAS,CAAC,UAAU;;;;;2CAKjC,SAAS,CAAC,OAAO;+CACb,SAAS,CAAC,aAAa;;;;;2CAK3B,SAAS,CAAC,OAAO
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Input/Radio.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAIzB,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;gDASsB,SAAS,CAAC,YAAY;;;;;;;;2CAQ3B,SAAS,CAAC,OAAO;2CACjB,SAAS,CAAC,OAAO;wDACJ,SAAS,CAAC,UAAU;;;;;2CAKjC,SAAS,CAAC,OAAO;+CACb,SAAS,CAAC,aAAa;;;;;2CAK3B,SAAS,CAAC,OAAO;;uCAErB,SAAS,CAAC,aAAa;gDACd,SAAS,CAAC,UAAU;;;;;;2CAMzB,SAAS,CAAC,OAAO;;;;;gCAK5B,SAAS,CAAC,OAAO;;;;;;mDAME,SAAS,CAAC,eAAe;8CAC9B,SAAS,CAAC,UAAU;;;;mDAIf,SAAS,CAAC,eAAe;mDACzB,SAAS,CAAC,eAAe;wDACpB,SAAS,CAAC,UAAU;;;;wCAIpC,SAAS,CAAC,eAAe;;CAEhE,CAAC;AAEF,SAAS,KAAK,CACV,KAA+F;IAE/F,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,EACjC,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,KAAK,CAAC,SAAS,GAAG;IACd,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -63,7 +63,7 @@ export const RadioGroup = styled.div `
|
|
|
63
63
|
}
|
|
64
64
|
`;
|
|
65
65
|
function RadioButton(props) {
|
|
66
|
-
return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { type:
|
|
66
|
+
return (_jsxs(Label, { children: [_jsx(Input, Object.assign({}, props, { type: "radio" })), _jsx("span", { children: props.label })] }));
|
|
67
67
|
}
|
|
68
68
|
RadioButton.propTypes = {
|
|
69
69
|
/** Label for the field */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/Input/RadioButton.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;gCAMM,SAAS,CAAC,OAAO;;;2CAGN,SAAS,CAAC,OAAO;;;;;;;+CAOb,SAAS,CAAC,aAAa;;;;2CAI3B,SAAS,CAAC,aAAa;;;;;2CAKvB,SAAS,CAAC,OAAO;;;;;sDAKN,SAAS,CAAC,kBAAkB;wCAC1C,SAAS,CAAC,eAAe;;;;mDAId,SAAS,CAAC,eAAe;;;CAG3E,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;QAM5B,KAAK;;;;QAIL,KAAK;;;CAGZ,CAAC;AAEF,SAAS,WAAW,
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/Input/RadioButton.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;gCAMM,SAAS,CAAC,OAAO;;;2CAGN,SAAS,CAAC,OAAO;;;;;;;+CAOb,SAAS,CAAC,aAAa;;;;2CAI3B,SAAS,CAAC,aAAa;;;;;2CAKvB,SAAS,CAAC,OAAO;;;;;sDAKN,SAAS,CAAC,kBAAkB;wCAC1C,SAAS,CAAC,eAAe;;;;mDAId,SAAS,CAAC,eAAe;;;CAG3E,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;QAM5B,KAAK;;;;QAIL,KAAK;;;CAGZ,CAAC;AAEF,SAAS,WAAW,CAChB,KAEC;IAED,OAAO,CACH,MAAC,KAAK,eACF,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,EACjC,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACtB,CACX,CAAC;AACN,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACpB,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -32,12 +32,14 @@ const SelectField = styled.select `
|
|
|
32
32
|
appearance: none;
|
|
33
33
|
|
|
34
34
|
/** Focused */
|
|
35
|
-
&:focus,
|
|
35
|
+
&:focus,
|
|
36
|
+
&:active {
|
|
36
37
|
border-color: var(--primary, ${constants.PRIMARY});
|
|
37
38
|
box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
&:focus ~ span,
|
|
41
|
+
&:focus ~ span,
|
|
42
|
+
&:active ~ span {
|
|
41
43
|
color: var(--primary, ${constants.PRIMARY});
|
|
42
44
|
}
|
|
43
45
|
|
|
@@ -46,7 +48,7 @@ const SelectField = styled.select `
|
|
|
46
48
|
border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
|
|
47
49
|
background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
|
|
48
50
|
}
|
|
49
|
-
|
|
51
|
+
|
|
50
52
|
&:disabled ~ span {
|
|
51
53
|
color: var(--disabled, ${constants.DISABLED});
|
|
52
54
|
}
|
|
@@ -57,7 +59,8 @@ const SelectField = styled.select `
|
|
|
57
59
|
box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
|
|
58
60
|
}
|
|
59
61
|
|
|
60
|
-
${props => props.touched
|
|
62
|
+
${(props) => props.touched
|
|
63
|
+
? `
|
|
61
64
|
&:invalid {
|
|
62
65
|
border-color: var(--error, ${constants.ERROR});
|
|
63
66
|
}
|
|
@@ -65,16 +68,19 @@ const SelectField = styled.select `
|
|
|
65
68
|
&:invalid ~ span {
|
|
66
69
|
color: var(--error, ${constants.ERROR});
|
|
67
70
|
}
|
|
68
|
-
`
|
|
71
|
+
`
|
|
72
|
+
: ''}
|
|
69
73
|
|
|
70
74
|
/** Error */
|
|
71
|
-
${props => props.errorText
|
|
75
|
+
${(props) => props.errorText
|
|
76
|
+
? `
|
|
72
77
|
border-color: var(--error, ${constants.ERROR});
|
|
73
78
|
|
|
74
79
|
& ~ span {
|
|
75
80
|
color: var(--error, ${constants.ERROR});
|
|
76
81
|
}
|
|
77
|
-
`
|
|
82
|
+
`
|
|
83
|
+
: ''}
|
|
78
84
|
|
|
79
85
|
/** Required */
|
|
80
86
|
&:required + span:after {
|
|
@@ -94,14 +100,16 @@ const SelectField = styled.select `
|
|
|
94
100
|
transition: all 300ms ease;
|
|
95
101
|
}
|
|
96
102
|
|
|
97
|
-
${props => props.value !== ''
|
|
103
|
+
${(props) => props.value !== ''
|
|
104
|
+
? `
|
|
98
105
|
& + span {
|
|
99
106
|
top: -8px;
|
|
100
107
|
background: var(--background, ${constants.BACKGROUND});
|
|
101
108
|
font-size: 12px;
|
|
102
109
|
line-height: 14px;
|
|
103
110
|
}
|
|
104
|
-
`
|
|
111
|
+
`
|
|
112
|
+
: ''}
|
|
105
113
|
|
|
106
114
|
&:focus + span, &:placeholder-shown + span {
|
|
107
115
|
top: -8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Input/Select.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,SAAS,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Input/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,12 +22,14 @@ const TextField = styled.textarea `
|
|
|
22
22
|
background-color: var(--background, ${constants.BACKGROUND});
|
|
23
23
|
|
|
24
24
|
/** Focused */
|
|
25
|
-
&:focus,
|
|
25
|
+
&:focus,
|
|
26
|
+
&:active {
|
|
26
27
|
border-color: var(--primary, ${constants.PRIMARY});
|
|
27
28
|
box-shadow: 0 0 0 4px var(--primary, ${constants.PRIMARY_LIGHT});
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
&:focus + span,
|
|
31
|
+
&:focus + span,
|
|
32
|
+
&:active + span {
|
|
31
33
|
color: var(--primary, ${constants.PRIMARY});
|
|
32
34
|
}
|
|
33
35
|
|
|
@@ -36,7 +38,7 @@ const TextField = styled.textarea `
|
|
|
36
38
|
border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
|
|
37
39
|
background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
|
|
38
40
|
}
|
|
39
|
-
|
|
41
|
+
|
|
40
42
|
&:disabled + span {
|
|
41
43
|
color: var(--disabled, ${constants.DISABLED});
|
|
42
44
|
}
|
|
@@ -47,7 +49,8 @@ const TextField = styled.textarea `
|
|
|
47
49
|
box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
${props => props.touched
|
|
52
|
+
${(props) => props.touched
|
|
53
|
+
? `
|
|
51
54
|
&:invalid {
|
|
52
55
|
border-color: var(--error, ${constants.ERROR});
|
|
53
56
|
}
|
|
@@ -55,16 +58,19 @@ const TextField = styled.textarea `
|
|
|
55
58
|
&:invalid + span {
|
|
56
59
|
color: var(--error, ${constants.ERROR});
|
|
57
60
|
}
|
|
58
|
-
`
|
|
61
|
+
`
|
|
62
|
+
: ''}
|
|
59
63
|
|
|
60
64
|
/** Error */
|
|
61
|
-
${props => props.errorText
|
|
65
|
+
${(props) => props.errorText
|
|
66
|
+
? `
|
|
62
67
|
border-color: var(--error, ${constants.ERROR});
|
|
63
68
|
|
|
64
69
|
& + span {
|
|
65
70
|
color: var(--error, ${constants.ERROR});
|
|
66
71
|
}
|
|
67
|
-
`
|
|
72
|
+
`
|
|
73
|
+
: ''}
|
|
68
74
|
|
|
69
75
|
/** Required */
|
|
70
76
|
&:required + span:after {
|
|
@@ -84,14 +90,16 @@ const TextField = styled.textarea `
|
|
|
84
90
|
transition: all 300ms ease;
|
|
85
91
|
}
|
|
86
92
|
|
|
87
|
-
${props => props.value !== ''
|
|
93
|
+
${(props) => props.value !== ''
|
|
94
|
+
? `
|
|
88
95
|
& + span {
|
|
89
96
|
top: -8px;
|
|
90
97
|
background: var(--background, ${constants.BACKGROUND});
|
|
91
98
|
font-size: 12px;
|
|
92
99
|
line-height: 14px;
|
|
93
100
|
}
|
|
94
|
-
`
|
|
101
|
+
`
|
|
102
|
+
: ''}
|
|
95
103
|
|
|
96
104
|
&:focus + span, &:placeholder-shown + span {
|
|
97
105
|
top: -8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/Input/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/Input/TextArea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,14 +17,14 @@ const Input = styled.input `
|
|
|
17
17
|
width: 30px;
|
|
18
18
|
height: 18px;
|
|
19
19
|
background-color: ${constants.LIGHT_GREY};
|
|
20
|
-
transition: .4s;
|
|
20
|
+
transition: 0.4s;
|
|
21
21
|
border-radius: 10px;
|
|
22
22
|
padding: 0 3px;
|
|
23
23
|
margin: 0 10px 0 5px;
|
|
24
24
|
}
|
|
25
25
|
& + span:before {
|
|
26
26
|
position: absolute;
|
|
27
|
-
content:
|
|
27
|
+
content: '';
|
|
28
28
|
height: 14px;
|
|
29
29
|
width: 14px;
|
|
30
30
|
left: 1px;
|
|
@@ -32,7 +32,7 @@ const Input = styled.input `
|
|
|
32
32
|
border: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
|
|
33
33
|
border-radius: 50%;
|
|
34
34
|
background-color: var(--background, ${constants.BACKGROUND});
|
|
35
|
-
transition: .4s;
|
|
35
|
+
transition: 0.4s;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
/* checked */
|
|
@@ -66,14 +66,14 @@ const Input = styled.input `
|
|
|
66
66
|
background-color: ${constants.LIGHT_GREY};
|
|
67
67
|
cursor: not-allowed;
|
|
68
68
|
}
|
|
69
|
-
|
|
69
|
+
|
|
70
70
|
&:disabled + span:before {
|
|
71
71
|
background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
|
|
72
72
|
border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
|
|
73
73
|
}
|
|
74
74
|
`;
|
|
75
75
|
function Toggle(props) {
|
|
76
|
-
return (_jsxs(Switch, { children: [_jsx(Input, Object.assign({}, props, { type:
|
|
76
|
+
return (_jsxs(Switch, { children: [_jsx(Input, Object.assign({}, props, { type: "checkbox" })), _jsx("span", {}), _jsx("span", { children: props.label })] }));
|
|
77
77
|
}
|
|
78
78
|
Toggle.propTypes = {
|
|
79
79
|
/** Label for the field */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Input/Toggle.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAI1B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;4BASE,SAAS,CAAC,UAAU;;;;;;;;;;;;;mDAaG,SAAS,CAAC,eAAe;;8CAE9B,SAAS,CAAC,UAAU;;;;;;2CAMvB,SAAS,CAAC,aAAa;;;;;uCAK3B,SAAS,CAAC,OAAO;;;;;+CAKT,SAAS,CAAC,aAAa;uCAC/B,SAAS,CAAC,OAAO;;;;;;gCAMxB,SAAS,CAAC,OAAO;;;;;wCAKT,SAAS,CAAC,eAAe;;;;4BAIrC,SAAS,CAAC,UAAU;;;;;sDAKM,SAAS,CAAC,kBAAkB;+CACnC,SAAS,CAAC,eAAe;;CAEvE,CAAC;
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Input/Toggle.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;;;;CAI1B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;4BASE,SAAS,CAAC,UAAU;;;;;;;;;;;;;mDAaG,SAAS,CAAC,eAAe;;8CAE9B,SAAS,CAAC,UAAU;;;;;;2CAMvB,SAAS,CAAC,aAAa;;;;;uCAK3B,SAAS,CAAC,OAAO;;;;;+CAKT,SAAS,CAAC,aAAa;uCAC/B,SAAS,CAAC,OAAO;;;;;;gCAMxB,SAAS,CAAC,OAAO;;;;;wCAKT,SAAS,CAAC,eAAe;;;;4BAIrC,SAAS,CAAC,UAAU;;;;;sDAKM,SAAS,CAAC,kBAAkB;+CACnC,SAAS,CAAC,eAAe;;CAEvE,CAAC;AAMF,SAAS,MAAM,CAAC,KAAkB;IAC9B,OAAO,CACH,MAAC,MAAM,eACH,KAAC,KAAK,oBAAK,KAAK,IAAE,IAAI,EAAC,UAAU,IAAG,EACpC,gBAAa,EACb,yBAAO,KAAK,CAAC,KAAK,GAAQ,IACrB,CACZ,CAAC;AACN,CAAC;AAED,MAAM,CAAC,SAAS,GAAG;IACf,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -9,5 +9,5 @@ interface MenuProps<T> {
|
|
|
9
9
|
/** Menu Items */
|
|
10
10
|
children?: ReactNode;
|
|
11
11
|
}
|
|
12
|
-
declare const Menu: React.ForwardRefExoticComponent<MenuProps<
|
|
12
|
+
declare const Menu: React.ForwardRefExoticComponent<MenuProps<object> & React.RefAttributes<HTMLDivElement>>;
|
|
13
13
|
export default Menu;
|
|
@@ -19,7 +19,7 @@ const Menu = React.forwardRef(function (props, ref) {
|
|
|
19
19
|
if (multiSelect) {
|
|
20
20
|
if (Array.isArray(value)) {
|
|
21
21
|
if (value.includes(val)) {
|
|
22
|
-
newVal = value.filter(item => item !== val);
|
|
22
|
+
newVal = value.filter((item) => item !== val);
|
|
23
23
|
}
|
|
24
24
|
else {
|
|
25
25
|
newVal = [...value, val];
|
|
@@ -35,9 +35,10 @@ const Menu = React.forwardRef(function (props, ref) {
|
|
|
35
35
|
return (_jsx(MenuContext.Provider, { value: {
|
|
36
36
|
value,
|
|
37
37
|
multiSelect,
|
|
38
|
-
updateValue
|
|
38
|
+
updateValue,
|
|
39
39
|
}, children: _jsx(MenuContainer, { ref: ref, children: props.children }) }));
|
|
40
40
|
});
|
|
41
|
+
Menu.displayName = 'Menu';
|
|
41
42
|
Menu.defaultProps = {
|
|
42
43
|
multiSelect: false,
|
|
43
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAA2B,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,eAAe,CAAC;AAYxC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ/B,CAAC;AAEF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAA2B,MAAM,OAAO,CAAC;AACjE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,eAAe,CAAC;AAYxC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ/B,CAAC;AAEF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,UAC1B,KAAmB,EACnB,GAAiC;IAEjC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,WAAW,GAAG,CAAC,GAAM,EAAE,EAAE;QAC3B,IAAI,MAAM,CAAC;QACX,IAAI,WAAW,EAAE,CAAC;YACd,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvB,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBACtB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACJ,MAAM,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC;gBAC7B,CAAC;YACL,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,MAAM,GAAG,GAAG,CAAC;QACjB,CAAC;QACD,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,CAAC,QAAQ,IACjB,KAAK,EACD;YACI,KAAK;YACL,WAAW;YACX,WAAW;SACsC,YAGzD,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,YAAG,KAAK,CAAC,QAAQ,GAAiB,GACtC,CAC1B,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,IAAI,CAAC,YAAY,GAAG;IAChB,WAAW,EAAE,KAAK;CACrB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
value: T
|
|
3
|
-
multiSelect:
|
|
1
|
+
type SingleSelect<T> = {
|
|
2
|
+
value: T;
|
|
3
|
+
multiSelect: false;
|
|
4
4
|
updateValue: (newVal: T) => void;
|
|
5
|
-
}
|
|
6
|
-
|
|
5
|
+
};
|
|
6
|
+
type MultiSelect<T> = {
|
|
7
|
+
value: T[];
|
|
8
|
+
multiSelect: true;
|
|
9
|
+
updateValue: (newVal: T[]) => void;
|
|
10
|
+
};
|
|
11
|
+
export type MenuContextType<T> = SingleSelect<T> | MultiSelect<T>;
|
|
12
|
+
declare const _default: import("react").Context<MenuContextType<object>>;
|
|
7
13
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContext.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuContext.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAetC,eAAe,aAAa,CAA0B,SAAS,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface MenuItemProps<T> {
|
|
3
3
|
/** Value of the element */
|
|
4
|
-
value: T;
|
|
4
|
+
value: T & T[];
|
|
5
5
|
}
|
|
6
|
-
export default function MenuItem<T>(props: MenuItemProps<T> & React.PropsWithChildren<
|
|
6
|
+
export default function MenuItem<T>(props: MenuItemProps<T> & React.PropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
13
13
|
import { useContext } from 'react';
|
|
14
14
|
import styled from '@emotion/styled';
|
|
15
|
-
import MenuContext from './MenuContext';
|
|
16
15
|
import constants from '../../shared/constants';
|
|
17
16
|
import Checkbox from '../Input/Checkbox';
|
|
17
|
+
import MenuContext from './MenuContext';
|
|
18
18
|
const Container = styled.button `
|
|
19
|
-
font-weight: ${props => props.selected ? 'bold' : 'normal'};
|
|
19
|
+
font-weight: ${(props) => (props.selected ? 'bold' : 'normal')};
|
|
20
20
|
padding: 8px 6px;
|
|
21
21
|
border: none;
|
|
22
22
|
background-color: transparent;
|
|
@@ -28,7 +28,9 @@ const Container = styled.button `
|
|
|
28
28
|
cursor: pointer;
|
|
29
29
|
position: relative;
|
|
30
30
|
|
|
31
|
-
&:hover,
|
|
31
|
+
&:hover,
|
|
32
|
+
&:focus,
|
|
33
|
+
&:focus-within {
|
|
32
34
|
background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
|
|
33
35
|
}
|
|
34
36
|
|
|
@@ -47,7 +49,9 @@ export default function MenuItem(props) {
|
|
|
47
49
|
}
|
|
48
50
|
context.updateValue(value);
|
|
49
51
|
};
|
|
50
|
-
const selected = context.multiSelect
|
|
51
|
-
|
|
52
|
+
const selected = context.multiSelect
|
|
53
|
+
? (_b = (_a = context.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, value)
|
|
54
|
+
: context.value === value;
|
|
55
|
+
return (_jsxs(Container, Object.assign({}, rest, { type: "button", tabIndex: context.multiSelect ? -1 : 0, selected: selected, onClick: clickHandler, children: [context.multiSelect && _jsx(Checkbox, { checked: selected }), children] })));
|
|
52
56
|
}
|
|
53
57
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,WAAgC,MAAM,eAAe,CAAC;AAO7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAuB;mBACnC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;yDAKT,SAAS,CAAC,kBAAkB;;;;;;;;;;sDAU/B,SAAS,CAAC,kBAAkB;;;;;;CAMjF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAI,KAA0D;;IAC1F,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAuB,CAAC;IAC9D,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAApC,qBAA4B,CAAQ,CAAC;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAiB,EAAE,EAAE;QACvC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;YACtB,CAAC,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAC;QAC7C,CAAC;QACD,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW;QAChC,CAAC,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,QAAQ,mDAAG,KAAK,CAAC;QAClC,CAAC,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC;IAE9B,OAAO,CACH,MAAC,SAAS,oBACF,IAAI,IACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,aAEpB,OAAO,CAAC,WAAW,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,GAAI,EACtD,QAAQ,KACD,CACf,CAAC;AACN,CAAC"}
|
|
@@ -22,10 +22,11 @@ class Modal extends React.Component {
|
|
|
22
22
|
open: false,
|
|
23
23
|
};
|
|
24
24
|
this.onClose = () => {
|
|
25
|
+
var _a, _b;
|
|
25
26
|
this.setState({
|
|
26
27
|
open: false,
|
|
27
28
|
});
|
|
28
|
-
this.props.onClose
|
|
29
|
+
(_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
29
30
|
this.closeCallback = null;
|
|
30
31
|
this.layer = null;
|
|
31
32
|
};
|
|
@@ -39,9 +40,10 @@ class Modal extends React.Component {
|
|
|
39
40
|
return null;
|
|
40
41
|
}
|
|
41
42
|
getSnapshotBeforeUpdate(prevProps) {
|
|
42
|
-
|
|
43
|
+
var _a;
|
|
44
|
+
const _b = this.props, { open, closeOnEsc, closeOnOverlayClick, children } = _b, rest = __rest(_b, ["open", "closeOnEsc", "closeOnOverlayClick", "children"]);
|
|
43
45
|
if (prevProps.open && !open) {
|
|
44
|
-
this.closeCallback
|
|
46
|
+
(_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
45
47
|
}
|
|
46
48
|
if (!prevProps.open && open) {
|
|
47
49
|
this.layer = LayerManager.renderLayer({
|
|
@@ -51,7 +53,7 @@ class Modal extends React.Component {
|
|
|
51
53
|
closeCallback: this.onClose,
|
|
52
54
|
closeOnEsc: closeOnEsc,
|
|
53
55
|
closeOnOverlayClick: closeOnOverlayClick,
|
|
54
|
-
component: (_jsx(ModalContainer, Object.assign({}, rest, { onClick: e => e.stopPropagation(), elevated: true, children: children })))
|
|
56
|
+
component: (_jsx(ModalContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
|
|
55
57
|
});
|
|
56
58
|
this.closeCallback = this.layer[1];
|
|
57
59
|
this.forceUpdate();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,YAAY,EAAE,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EACH,MAAM,IAAI,WAAW,EACrB,IAAI,IAAI,SAAS,EACjB,MAAM,IAAI,WAAW,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQrE,MAAqB,KAAM,SAAQ,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import React, { createRef } from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import
|
|
4
|
+
import { flushSync } from 'react-dom';
|
|
5
|
+
import { createRoot } from 'react-dom/client';
|
|
5
6
|
import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
|
|
6
7
|
import NotificationManager from './NotificationManager';
|
|
7
8
|
import { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './types';
|
|
@@ -69,13 +70,16 @@ class Notification {
|
|
|
69
70
|
closeOnOverlayClick: false,
|
|
70
71
|
position: positionMap[position],
|
|
71
72
|
alwaysOnTop: true,
|
|
72
|
-
component: (_jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) }))
|
|
73
|
+
component: (_jsx(NotificationManager, { ref: ref, position: position, onEmpty: () => this.destroy(position) })),
|
|
73
74
|
});
|
|
74
75
|
this.containers.set(position, {
|
|
75
76
|
ref,
|
|
76
77
|
element: div,
|
|
78
|
+
root: createRoot(div),
|
|
79
|
+
});
|
|
80
|
+
flushSync(() => {
|
|
81
|
+
this.containers.get(position).root.render(_jsx(Component, {}));
|
|
77
82
|
});
|
|
78
|
-
ReactDOM.render(_jsx(Component, {}), div);
|
|
79
83
|
notification = ref;
|
|
80
84
|
}
|
|
81
85
|
else {
|
|
@@ -101,7 +105,7 @@ class Notification {
|
|
|
101
105
|
*/
|
|
102
106
|
this.destroy = (position) => {
|
|
103
107
|
const notification = this.containers.get(position);
|
|
104
|
-
|
|
108
|
+
notification.root.unmount();
|
|
105
109
|
this.containers.delete(position);
|
|
106
110
|
};
|
|
107
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,
|
|
1
|
+
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { NOTIFICATION_TYPE } from './types';
|
|
4
3
|
import { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';
|
|
5
|
-
import { Container, Notice, Title, IconContainer, FillParent, Body, CloseButton, Footer } from './style';
|
|
6
4
|
import { ActionButton } from '../Button';
|
|
5
|
+
import { Container, Notice, Title, IconContainer, FillParent, Body, CloseButton, Footer, } from './style';
|
|
6
|
+
import { NOTIFICATION_TYPE } from './types';
|
|
7
7
|
const DEFAULT_DURATION = 5000;
|
|
8
8
|
/**
|
|
9
9
|
* Notification Manager class
|
|
@@ -26,12 +26,12 @@ class NotificationManager extends React.Component {
|
|
|
26
26
|
this.remove = (id) => {
|
|
27
27
|
// Trigger leaving animation.
|
|
28
28
|
this.setState({
|
|
29
|
-
notices: this.state.notices.map(notice => (Object.assign(Object.assign({}, notice), { leaving: notice.id === id ? true : notice.leaving })))
|
|
29
|
+
notices: this.state.notices.map((notice) => (Object.assign(Object.assign({}, notice), { leaving: notice.id === id ? true : notice.leaving }))),
|
|
30
30
|
});
|
|
31
31
|
this.set.delete(id);
|
|
32
32
|
// Remove notification on animation completion.
|
|
33
33
|
setTimeout(() => {
|
|
34
|
-
const notice = this.state.notices.find(notice => notice.id === id);
|
|
34
|
+
const notice = this.state.notices.find((notice) => notice.id === id);
|
|
35
35
|
if (notice) {
|
|
36
36
|
// call close callback, ignore any errors in callback.
|
|
37
37
|
if (notice.onClose) {
|
|
@@ -44,9 +44,9 @@ class NotificationManager extends React.Component {
|
|
|
44
44
|
}
|
|
45
45
|
// Remove the notification
|
|
46
46
|
this.setState({
|
|
47
|
-
notices: this.state.notices.filter(notice => notice.id !== id),
|
|
47
|
+
notices: this.state.notices.filter((notice) => notice.id !== id),
|
|
48
48
|
}, () => {
|
|
49
|
-
// Check if the stack is empty and then call the
|
|
49
|
+
// Check if the stack is empty and then call the
|
|
50
50
|
// empty callback function.
|
|
51
51
|
if (this.state.notices.length === 0) {
|
|
52
52
|
this.props.onEmpty();
|
|
@@ -103,16 +103,18 @@ class NotificationManager extends React.Component {
|
|
|
103
103
|
* @param id
|
|
104
104
|
*/
|
|
105
105
|
this.resume = (id) => () => {
|
|
106
|
-
const notice = this.state.notices.find(notice => notice.id === id);
|
|
106
|
+
const notice = this.state.notices.find((notice) => notice.id === id);
|
|
107
107
|
if (!notice.sticky) {
|
|
108
108
|
this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
}
|
|
112
112
|
render() {
|
|
113
|
-
return (_jsx(Container, { position: this.props.position, children: this.state.notices.map(notice => {
|
|
113
|
+
return (_jsx(Container, { position: this.props.position, children: this.state.notices.map((notice) => {
|
|
114
114
|
const { id, title, description, leaving, type = NOTIFICATION_TYPE.INFO, buttonText, buttonClick, } = notice;
|
|
115
|
-
return (_jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [_jsxs(IconContainer, { type: type, children: [type === NOTIFICATION_TYPE.INFO && _jsx(Info, {}), type === NOTIFICATION_TYPE.SUCCESS && _jsx(CheckCircle, {}), type === NOTIFICATION_TYPE.WARNING && _jsx(ReportProblem, {}), type === NOTIFICATION_TYPE.DANGER && _jsx(ErrorOutline, {})] }), _jsxs(FillParent, { children: [_jsxs(Title, { type: type, children: [_jsx(FillParent, { children: title }), _jsx(CloseButton, { onClick: this.closeClickHandler(id), children: _jsx(Close, {}) })] }), _jsx(Body, { children: description }), buttonText && (_jsx(Footer, { children: _jsx(ActionButton, { onClick: () => {
|
|
115
|
+
return (_jsxs(Notice, Object.assign({}, notice, { position: this.props.position, className: leaving ? 'leave' : '', onMouseEnter: this.pause(id), onMouseLeave: this.resume(id), children: [_jsxs(IconContainer, { type: type, children: [type === NOTIFICATION_TYPE.INFO && _jsx(Info, {}), type === NOTIFICATION_TYPE.SUCCESS && _jsx(CheckCircle, {}), type === NOTIFICATION_TYPE.WARNING && _jsx(ReportProblem, {}), type === NOTIFICATION_TYPE.DANGER && _jsx(ErrorOutline, {})] }), _jsxs(FillParent, { children: [_jsxs(Title, { type: type, children: [_jsx(FillParent, { children: title }), _jsx(CloseButton, { onClick: this.closeClickHandler(id), children: _jsx(Close, {}) })] }), _jsx(Body, { children: description }), buttonText && (_jsx(Footer, { children: _jsx(ActionButton, { onClick: () => {
|
|
116
|
+
buttonClick === null || buttonClick === void 0 ? void 0 : buttonClick();
|
|
117
|
+
}, children: buttonText }) }))] })] }), id));
|
|
116
118
|
}) }));
|
|
117
119
|
}
|
|
118
120
|
}
|