master-components-react-ts 2.0.1 → 2.1.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/dist/assets/Icons/IconErrorDash.d.ts +2 -3
- package/dist/assets/Inter_24pt-SemiBold-DIQUEucn.woff2 +0 -0
- package/dist/components/Dropdown/Dropdown.types.d.ts +2 -2
- package/dist/components/InlineLoading/InlineLoading.d.ts +3 -0
- package/dist/components/InlineLoading/InlineLoading.types.d.ts +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3983 -1080
- package/dist/types/css-modules.d.ts +9 -0
- package/package.json +62 -60
- package/dist/_virtual/_commonjsHelpers.js +0 -8
- package/dist/_virtual/customParseFormat.js +0 -4
- package/dist/_virtual/jsx-runtime.js +0 -4
- package/dist/_virtual/react-jsx-runtime.production.js +0 -4
- package/dist/assets/Icons/IconArrowUp.js +0 -13
- package/dist/assets/Icons/IconCalendar.js +0 -32
- package/dist/assets/Icons/IconCheck.js +0 -15
- package/dist/assets/Icons/IconCheckCircle.js +0 -16
- package/dist/assets/Icons/IconCheckmark.js +0 -15
- package/dist/assets/Icons/IconCircularLoading.js +0 -36
- package/dist/assets/Icons/IconClose.js +0 -31
- package/dist/assets/Icons/IconCloseBackground.js +0 -15
- package/dist/assets/Icons/IconCloseCircle.js +0 -15
- package/dist/assets/Icons/IconExclamation.js +0 -15
- package/dist/assets/Icons/IconLeft.js +0 -13
- package/dist/assets/Icons/IconMinus.js +0 -7
- package/dist/assets/Icons/IconRadioChecked.js +0 -19
- package/dist/assets/Icons/IconRadioCheckedDisabled.js +0 -19
- package/dist/assets/Icons/IconRadioUnchecked.js +0 -16
- package/dist/assets/Icons/IconRadioUncheckedDisabled.js +0 -16
- package/dist/assets/Icons/IconRight.js +0 -13
- package/dist/assets/Icons/IconSave.js +0 -16
- package/dist/assets/Icons/IconSearch.js +0 -26
- package/dist/assets/Icons/IconTrash.js +0 -16
- package/dist/components/ActionDropdown/ActionDropdown.js +0 -74
- package/dist/components/ActionDropdown/ActionDropdown.module.scss.js +0 -29
- package/dist/components/Checkbox/Checkbox.js +0 -54
- package/dist/components/Checkbox/Checkbox.module.scss.js +0 -26
- package/dist/components/DatePicker/Calendar.js +0 -437
- package/dist/components/DatePicker/Calendar.module.scss.js +0 -83
- package/dist/components/DatePicker/DatePicker.js +0 -211
- package/dist/components/DatePicker/Datepicker.module.scss.js +0 -17
- package/dist/components/Dropdown/Dropdown.js +0 -336
- package/dist/components/Dropdown/Dropdown.module.scss.js +0 -74
- package/dist/components/FormInput/FormInput.js +0 -144
- package/dist/components/FormInput/FormInput.module.scss.js +0 -62
- package/dist/components/MainButton/MainButton.js +0 -72
- package/dist/components/MainButton/MainButton.module.scss.js +0 -56
- package/dist/components/NotificationToast/NotificationContext.js +0 -57
- package/dist/components/NotificationToast/NotificationToast.js +0 -66
- package/dist/components/NotificationToast/NotificationToast.module.scss.js +0 -59
- package/dist/components/NotificationToast/createNotificationToast.js +0 -10
- package/dist/components/Popup/Popup.js +0 -116
- package/dist/components/Popup/Popup.module.scss.js +0 -41
- package/dist/components/Radio/Radio.js +0 -46
- package/dist/components/Radio/Radio.module.scss.js +0 -8
- package/dist/components/Skeleton/Skeleton.js +0 -8
- package/dist/components/Skeleton/Skeleton.module.scss.js +0 -20
- package/dist/components/Textarea/Textarea.js +0 -149
- package/dist/components/Textarea/Textarea.module.scss.js +0 -41
- package/dist/components/TimePicker/TimePicker.js +0 -172
- package/dist/components/TimePicker/TimePicker.module.scss.js +0 -50
- package/dist/components/Toggle/Toggle.js +0 -20
- package/dist/components/Toggle/Toggle.module.scss.js +0 -29
- package/dist/components/Tooltip/Tooltip.js +0 -153
- package/dist/components/Tooltip/Tooltip.module.scss.js +0 -35
- package/dist/context/NamespaceContext.js +0 -7
- package/dist/node_modules/dayjs/plugin/customParseFormat.js +0 -129
- package/dist/node_modules/react/cjs/react-jsx-runtime.production.js +0 -35
- package/dist/node_modules/react/jsx-runtime.js +0 -10
- package/dist/utils/Helpers.js +0 -15
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
const dropdownWrapper = "Dropdown-module__dropdownWrapper";
|
|
2
|
-
const dropdownInputWrapper = "Dropdown-module__dropdownInputWrapper";
|
|
3
|
-
const dropdownInputSlot = "Dropdown-module__dropdownInputSlot";
|
|
4
|
-
const dropdownRightIconArrow = "Dropdown-module__dropdownRightIconArrow";
|
|
5
|
-
const focused = "Dropdown-module__focused";
|
|
6
|
-
const dropdownInputSlotItem = "Dropdown-module__dropdownInputSlotItem";
|
|
7
|
-
const dropdownInputSlotItemLabel = "Dropdown-module__dropdownInputSlotItemLabel";
|
|
8
|
-
const dropdownInputSlotItemClose = "Dropdown-module__dropdownInputSlotItemClose";
|
|
9
|
-
const dropdownInputSlotItemMore = "Dropdown-module__dropdownInputSlotItemMore";
|
|
10
|
-
const dropdownRightIcon = "Dropdown-module__dropdownRightIcon";
|
|
11
|
-
const dropdownRightIconClose = "Dropdown-module__dropdownRightIconClose";
|
|
12
|
-
const dropdownListContainer = "Dropdown-module__dropdownListContainer";
|
|
13
|
-
const dropdownList = "Dropdown-module__dropdownList";
|
|
14
|
-
const dropdownItem = "Dropdown-module__dropdownItem";
|
|
15
|
-
const selected = "Dropdown-module__selected";
|
|
16
|
-
const dropdownItemLabel = "Dropdown-module__dropdownItemLabel";
|
|
17
|
-
const hovered = "Dropdown-module__hovered";
|
|
18
|
-
const disabled = "Dropdown-module__disabled";
|
|
19
|
-
const itemCheckbox = "Dropdown-module__itemCheckbox";
|
|
20
|
-
const dropdownItemLabelInput = "Dropdown-module__dropdownItemLabelInput";
|
|
21
|
-
const countryName = "Dropdown-module__countryName";
|
|
22
|
-
const countryDialCode = "Dropdown-module__countryDialCode";
|
|
23
|
-
const selectAll = "Dropdown-module__selectAll";
|
|
24
|
-
const style = {
|
|
25
|
-
dropdownWrapper,
|
|
26
|
-
dropdownInputWrapper,
|
|
27
|
-
dropdownInputSlot,
|
|
28
|
-
dropdownRightIconArrow,
|
|
29
|
-
focused,
|
|
30
|
-
dropdownInputSlotItem,
|
|
31
|
-
dropdownInputSlotItemLabel,
|
|
32
|
-
dropdownInputSlotItemClose,
|
|
33
|
-
dropdownInputSlotItemMore,
|
|
34
|
-
dropdownRightIcon,
|
|
35
|
-
dropdownRightIconClose,
|
|
36
|
-
dropdownListContainer,
|
|
37
|
-
dropdownList,
|
|
38
|
-
dropdownItem,
|
|
39
|
-
selected,
|
|
40
|
-
dropdownItemLabel,
|
|
41
|
-
hovered,
|
|
42
|
-
disabled,
|
|
43
|
-
itemCheckbox,
|
|
44
|
-
dropdownItemLabelInput,
|
|
45
|
-
countryName,
|
|
46
|
-
countryDialCode,
|
|
47
|
-
selectAll
|
|
48
|
-
};
|
|
49
|
-
export {
|
|
50
|
-
countryDialCode,
|
|
51
|
-
countryName,
|
|
52
|
-
style as default,
|
|
53
|
-
disabled,
|
|
54
|
-
dropdownInputSlot,
|
|
55
|
-
dropdownInputSlotItem,
|
|
56
|
-
dropdownInputSlotItemClose,
|
|
57
|
-
dropdownInputSlotItemLabel,
|
|
58
|
-
dropdownInputSlotItemMore,
|
|
59
|
-
dropdownInputWrapper,
|
|
60
|
-
dropdownItem,
|
|
61
|
-
dropdownItemLabel,
|
|
62
|
-
dropdownItemLabelInput,
|
|
63
|
-
dropdownList,
|
|
64
|
-
dropdownListContainer,
|
|
65
|
-
dropdownRightIcon,
|
|
66
|
-
dropdownRightIconArrow,
|
|
67
|
-
dropdownRightIconClose,
|
|
68
|
-
dropdownWrapper,
|
|
69
|
-
focused,
|
|
70
|
-
hovered,
|
|
71
|
-
itemCheckbox,
|
|
72
|
-
selectAll,
|
|
73
|
-
selected
|
|
74
|
-
};
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
|
|
2
|
-
import style from "./FormInput.module.scss.js";
|
|
3
|
-
import { useRef, useState, useEffect } from "react";
|
|
4
|
-
import { IconSearch } from "../../assets/Icons/IconSearch.js";
|
|
5
|
-
import { IconCloseCircle } from "../../assets/Icons/IconCloseCircle.js";
|
|
6
|
-
const FormInput = ({
|
|
7
|
-
label,
|
|
8
|
-
placeholder,
|
|
9
|
-
helperText,
|
|
10
|
-
required = false,
|
|
11
|
-
disabled = false,
|
|
12
|
-
readOnly = false,
|
|
13
|
-
withFocus = true,
|
|
14
|
-
withActive = true,
|
|
15
|
-
searchComponent = false,
|
|
16
|
-
size = "md",
|
|
17
|
-
toggleFocus = false,
|
|
18
|
-
rightSlot,
|
|
19
|
-
leftSlot,
|
|
20
|
-
helperSlot,
|
|
21
|
-
type = "text",
|
|
22
|
-
value,
|
|
23
|
-
maxLength,
|
|
24
|
-
forDropdown = false,
|
|
25
|
-
customFocus = null,
|
|
26
|
-
focus = false,
|
|
27
|
-
inputState = { error: false, success: false, loading: false },
|
|
28
|
-
inputSlot,
|
|
29
|
-
onChange,
|
|
30
|
-
onFocus,
|
|
31
|
-
onBlur,
|
|
32
|
-
onEnter,
|
|
33
|
-
onFocusChange,
|
|
34
|
-
formInputWrapperStyle,
|
|
35
|
-
inputWrapperStyle,
|
|
36
|
-
formInputStyle,
|
|
37
|
-
helperTextStyle,
|
|
38
|
-
labelStyle,
|
|
39
|
-
inputSlotStyle
|
|
40
|
-
}) => {
|
|
41
|
-
const InputRef = useRef(null);
|
|
42
|
-
const [SearchValue, setSearchValue] = useState(value ?? "");
|
|
43
|
-
const [Focused, setFocused] = useState(false);
|
|
44
|
-
const [Active, setActive] = useState(false);
|
|
45
|
-
const Change = (event) => {
|
|
46
|
-
if (searchComponent) {
|
|
47
|
-
setSearchValue(event.target.value);
|
|
48
|
-
}
|
|
49
|
-
onChange?.(event.target.value);
|
|
50
|
-
};
|
|
51
|
-
const Focus = () => {
|
|
52
|
-
onFocus?.();
|
|
53
|
-
if (forDropdown) return;
|
|
54
|
-
setFocused(true);
|
|
55
|
-
};
|
|
56
|
-
const Blur = () => {
|
|
57
|
-
if (!toggleFocus) {
|
|
58
|
-
setFocused(false);
|
|
59
|
-
} else {
|
|
60
|
-
setFocused(customFocus ?? false);
|
|
61
|
-
}
|
|
62
|
-
onBlur?.();
|
|
63
|
-
};
|
|
64
|
-
const handleKeyDown = (event) => {
|
|
65
|
-
if (event.key === "Enter") {
|
|
66
|
-
onEnter?.();
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
const getSlot = (slot) => {
|
|
70
|
-
return slot;
|
|
71
|
-
};
|
|
72
|
-
const HandleSearch = () => {
|
|
73
|
-
if (!searchComponent) return;
|
|
74
|
-
setSearchValue("");
|
|
75
|
-
onChange?.("");
|
|
76
|
-
};
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
onFocusChange?.(Focused);
|
|
79
|
-
}, [Focused]);
|
|
80
|
-
useEffect(() => {
|
|
81
|
-
if (customFocus !== void 0 && customFocus !== null) {
|
|
82
|
-
setFocused(customFocus);
|
|
83
|
-
}
|
|
84
|
-
}, [customFocus]);
|
|
85
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.inputWrapper} ${disabled ? style.disabled : ""} ${style[size]}`, style: inputWrapperStyle ?? {}, children: [
|
|
86
|
-
label && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.formInputLabelWrapper, children: [
|
|
87
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("label", { style: labelStyle ?? {}, className: style.formInputLabel, children: [
|
|
88
|
-
label,
|
|
89
|
-
" ",
|
|
90
|
-
typeof label === "string" && required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style.formInputRequired, children: "*" })
|
|
91
|
-
] }),
|
|
92
|
-
helperSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputHelperSlot, children: getSlot(helperSlot) })
|
|
93
|
-
] }),
|
|
94
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
95
|
-
"div",
|
|
96
|
-
{
|
|
97
|
-
className: `${style.formInputWrapper} ${inputState.error ? style.errorState : ""} ${withFocus && Focused ? !inputState.error ? style.focused : style.errorFocused : ""} ${withActive && Active ? !inputState.error ? style.active : style.errorActive : ""} ${inputState.error ? style.error : ""} ${inputState.success ? style.success : ""}`,
|
|
98
|
-
style: formInputWrapperStyle ?? {},
|
|
99
|
-
onClick: () => toggleFocus && setFocused((state) => !state),
|
|
100
|
-
children: [
|
|
101
|
-
leftSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: getSlot(leftSlot) }),
|
|
102
|
-
searchComponent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: getSlot(/* @__PURE__ */ jsxRuntimeExports.jsx(IconSearch, {})) }),
|
|
103
|
-
inputSlot ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, style: inputSlotStyle ?? {}, children: getSlot(inputSlot) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
104
|
-
"input",
|
|
105
|
-
{
|
|
106
|
-
className: style.formInput,
|
|
107
|
-
ref: InputRef,
|
|
108
|
-
style: formInputStyle ?? {},
|
|
109
|
-
type: type ?? "text",
|
|
110
|
-
value: searchComponent ? SearchValue : value,
|
|
111
|
-
onChange: (event) => Change(event),
|
|
112
|
-
onMouseDown: () => !forDropdown && setActive(true),
|
|
113
|
-
onMouseUp: () => !forDropdown && setActive(false),
|
|
114
|
-
onMouseLeave: () => !forDropdown && setActive(false),
|
|
115
|
-
onFocus: Focus,
|
|
116
|
-
onBlur: Blur,
|
|
117
|
-
disabled,
|
|
118
|
-
required,
|
|
119
|
-
onKeyDown: handleKeyDown,
|
|
120
|
-
readOnly,
|
|
121
|
-
spellCheck: false,
|
|
122
|
-
placeholder: placeholder ?? "",
|
|
123
|
-
autoComplete: "off",
|
|
124
|
-
maxLength
|
|
125
|
-
}
|
|
126
|
-
),
|
|
127
|
-
rightSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: getSlot(rightSlot) }),
|
|
128
|
-
searchComponent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.formInputSlot, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: HandleSearch, style: searchComponent ? { cursor: "pointer" } : {}, className: style.formInputSlot, children: SearchValue?.length > 0 ? getSlot(/* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {})) : null }) })
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
),
|
|
132
|
-
helperText && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
133
|
-
"p",
|
|
134
|
-
{
|
|
135
|
-
style: helperTextStyle ?? {},
|
|
136
|
-
className: `${style.formInputHelperText} ${inputState.error ? style.errorHelperText : inputState.success ? style.successHelperText : ""}`,
|
|
137
|
-
children: helperText
|
|
138
|
-
}
|
|
139
|
-
)
|
|
140
|
-
] });
|
|
141
|
-
};
|
|
142
|
-
export {
|
|
143
|
-
FormInput as default
|
|
144
|
-
};
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
const inputWrapper = "FormInput-module__inputWrapper";
|
|
2
|
-
const sm = "FormInput-module__sm";
|
|
3
|
-
const formInputWrapper = "FormInput-module__formInputWrapper";
|
|
4
|
-
const md = "FormInput-module__md";
|
|
5
|
-
const disabled = "FormInput-module__disabled";
|
|
6
|
-
const formInputLabel = "FormInput-module__formInputLabel";
|
|
7
|
-
const formInput = "FormInput-module__formInput";
|
|
8
|
-
const formInputHelperText = "FormInput-module__formInputHelperText";
|
|
9
|
-
const formInputLabelWrapper = "FormInput-module__formInputLabelWrapper";
|
|
10
|
-
const formInputRequired = "FormInput-module__formInputRequired";
|
|
11
|
-
const formInputHelperSlot = "FormInput-module__formInputHelperSlot";
|
|
12
|
-
const errorState = "FormInput-module__errorState";
|
|
13
|
-
const focused = "FormInput-module__focused";
|
|
14
|
-
const active = "FormInput-module__active";
|
|
15
|
-
const errorFocused = "FormInput-module__errorFocused";
|
|
16
|
-
const errorActive = "FormInput-module__errorActive";
|
|
17
|
-
const formInputSlot = "FormInput-module__formInputSlot";
|
|
18
|
-
const errorHelperText = "FormInput-module__errorHelperText";
|
|
19
|
-
const successHelperText = "FormInput-module__successHelperText";
|
|
20
|
-
const style = {
|
|
21
|
-
inputWrapper,
|
|
22
|
-
sm,
|
|
23
|
-
formInputWrapper,
|
|
24
|
-
md,
|
|
25
|
-
disabled,
|
|
26
|
-
formInputLabel,
|
|
27
|
-
formInput,
|
|
28
|
-
formInputHelperText,
|
|
29
|
-
formInputLabelWrapper,
|
|
30
|
-
formInputRequired,
|
|
31
|
-
formInputHelperSlot,
|
|
32
|
-
errorState,
|
|
33
|
-
focused,
|
|
34
|
-
active,
|
|
35
|
-
errorFocused,
|
|
36
|
-
errorActive,
|
|
37
|
-
formInputSlot,
|
|
38
|
-
errorHelperText,
|
|
39
|
-
successHelperText
|
|
40
|
-
};
|
|
41
|
-
export {
|
|
42
|
-
active,
|
|
43
|
-
style as default,
|
|
44
|
-
disabled,
|
|
45
|
-
errorActive,
|
|
46
|
-
errorFocused,
|
|
47
|
-
errorHelperText,
|
|
48
|
-
errorState,
|
|
49
|
-
focused,
|
|
50
|
-
formInput,
|
|
51
|
-
formInputHelperSlot,
|
|
52
|
-
formInputHelperText,
|
|
53
|
-
formInputLabel,
|
|
54
|
-
formInputLabelWrapper,
|
|
55
|
-
formInputRequired,
|
|
56
|
-
formInputSlot,
|
|
57
|
-
formInputWrapper,
|
|
58
|
-
inputWrapper,
|
|
59
|
-
md,
|
|
60
|
-
sm,
|
|
61
|
-
successHelperText
|
|
62
|
-
};
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
|
|
2
|
-
import style from "./MainButton.module.scss.js";
|
|
3
|
-
import { useState, useRef, useEffect } from "react";
|
|
4
|
-
import IconCircularLoading from "../../assets/Icons/IconCircularLoading.js";
|
|
5
|
-
const MainButton = ({
|
|
6
|
-
label,
|
|
7
|
-
size = "md",
|
|
8
|
-
leftSlot,
|
|
9
|
-
rightSlot,
|
|
10
|
-
buttonSlot,
|
|
11
|
-
type = "button",
|
|
12
|
-
colorType = "neutral",
|
|
13
|
-
buttonType = "primary",
|
|
14
|
-
withFocus = false,
|
|
15
|
-
customFocus,
|
|
16
|
-
disabled,
|
|
17
|
-
loading = false,
|
|
18
|
-
spaceBetween = false,
|
|
19
|
-
buttonStyle,
|
|
20
|
-
mainButtonContentStyle,
|
|
21
|
-
mainButtonLabelStyle,
|
|
22
|
-
leftSlotStyle,
|
|
23
|
-
rightSlotStyle,
|
|
24
|
-
onClick
|
|
25
|
-
}) => {
|
|
26
|
-
const [Focused, setFocused] = useState(customFocus || false);
|
|
27
|
-
const ButtonRef = useRef(null);
|
|
28
|
-
const Click = (e) => {
|
|
29
|
-
if (disabled || loading) return;
|
|
30
|
-
if (withFocus) {
|
|
31
|
-
setFocused((state) => !state);
|
|
32
|
-
}
|
|
33
|
-
onClick?.(e);
|
|
34
|
-
};
|
|
35
|
-
const getLoadingColor = () => {
|
|
36
|
-
let color = "#ffffff";
|
|
37
|
-
if (colorType === "neutral" && buttonType !== "primary") color = "#0058FF";
|
|
38
|
-
if (colorType === "positive" && buttonType !== "primary") color = "#328707";
|
|
39
|
-
if (colorType === "negative" && buttonType !== "primary") color = "#E3292F";
|
|
40
|
-
return color;
|
|
41
|
-
};
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
const ClickHandler = (event) => {
|
|
44
|
-
if (!ButtonRef.current || disabled) return;
|
|
45
|
-
if (event.composedPath().includes(ButtonRef.current)) return;
|
|
46
|
-
setFocused(false);
|
|
47
|
-
};
|
|
48
|
-
document.addEventListener("click", ClickHandler);
|
|
49
|
-
return () => {
|
|
50
|
-
document.removeEventListener("click", ClickHandler);
|
|
51
|
-
};
|
|
52
|
-
}, []);
|
|
53
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
54
|
-
"button",
|
|
55
|
-
{
|
|
56
|
-
ref: ButtonRef,
|
|
57
|
-
style: buttonStyle,
|
|
58
|
-
type,
|
|
59
|
-
disabled,
|
|
60
|
-
className: `${style.mainButton} ${style[size]} ${loading ? style.loading : ""} ${Focused ? style.focused : ""} ${style[buttonType]} ${style[colorType]} ${disabled ? style.disabled : ""}`,
|
|
61
|
-
onClick: Click,
|
|
62
|
-
children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCircularLoading, { size: 20, stroke: getLoadingColor() }) : buttonSlot || /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.mainButtonContent, style: { ...mainButtonContentStyle, justifyContent: spaceBetween ? "space-between" : "center" }, children: [
|
|
63
|
-
leftSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.leftSlot, style: leftSlotStyle, children: leftSlot }),
|
|
64
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.mainButtonLabel, style: mainButtonLabelStyle, children: label }),
|
|
65
|
-
rightSlot && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.rightSlot, style: rightSlotStyle, children: rightSlot })
|
|
66
|
-
] })
|
|
67
|
-
}
|
|
68
|
-
);
|
|
69
|
-
};
|
|
70
|
-
export {
|
|
71
|
-
MainButton as default
|
|
72
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
const mainButton = "MainButton-module__mainButton";
|
|
2
|
-
const sm = "MainButton-module__sm";
|
|
3
|
-
const md = "MainButton-module__md";
|
|
4
|
-
const lg = "MainButton-module__lg";
|
|
5
|
-
const mainButtonContent = "MainButton-module__mainButtonContent";
|
|
6
|
-
const mainButtonLabel = "MainButton-module__mainButtonLabel";
|
|
7
|
-
const primary = "MainButton-module__primary";
|
|
8
|
-
const neutral = "MainButton-module__neutral";
|
|
9
|
-
const loading = "MainButton-module__loading";
|
|
10
|
-
const disabled = "MainButton-module__disabled";
|
|
11
|
-
const focused = "MainButton-module__focused";
|
|
12
|
-
const positive = "MainButton-module__positive";
|
|
13
|
-
const negative = "MainButton-module__negative";
|
|
14
|
-
const secondary = "MainButton-module__secondary";
|
|
15
|
-
const tertiary = "MainButton-module__tertiary";
|
|
16
|
-
const tertiaryV2 = "MainButton-module__tertiaryV2";
|
|
17
|
-
const tertiaryV3 = "MainButton-module__tertiaryV3";
|
|
18
|
-
const style = {
|
|
19
|
-
mainButton,
|
|
20
|
-
sm,
|
|
21
|
-
md,
|
|
22
|
-
lg,
|
|
23
|
-
mainButtonContent,
|
|
24
|
-
mainButtonLabel,
|
|
25
|
-
primary,
|
|
26
|
-
neutral,
|
|
27
|
-
loading,
|
|
28
|
-
disabled,
|
|
29
|
-
focused,
|
|
30
|
-
positive,
|
|
31
|
-
negative,
|
|
32
|
-
secondary,
|
|
33
|
-
tertiary,
|
|
34
|
-
tertiaryV2,
|
|
35
|
-
tertiaryV3
|
|
36
|
-
};
|
|
37
|
-
export {
|
|
38
|
-
style as default,
|
|
39
|
-
disabled,
|
|
40
|
-
focused,
|
|
41
|
-
lg,
|
|
42
|
-
loading,
|
|
43
|
-
mainButton,
|
|
44
|
-
mainButtonContent,
|
|
45
|
-
mainButtonLabel,
|
|
46
|
-
md,
|
|
47
|
-
negative,
|
|
48
|
-
neutral,
|
|
49
|
-
positive,
|
|
50
|
-
primary,
|
|
51
|
-
secondary,
|
|
52
|
-
sm,
|
|
53
|
-
tertiary,
|
|
54
|
-
tertiaryV2,
|
|
55
|
-
tertiaryV3
|
|
56
|
-
};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
|
|
2
|
-
import { createContext, useState, useCallback } from "react";
|
|
3
|
-
import NotificationToast from "./NotificationToast.js";
|
|
4
|
-
import style from "./NotificationToast.module.scss.js";
|
|
5
|
-
const ToastContext = createContext(null);
|
|
6
|
-
let idCounter = 0;
|
|
7
|
-
const ToastProvider = ({ children }) => {
|
|
8
|
-
const [toasts, setToasts] = useState([]);
|
|
9
|
-
const showToast = (props) => {
|
|
10
|
-
setToasts((prev) => {
|
|
11
|
-
const max = props.max ?? Infinity;
|
|
12
|
-
if (prev.length >= max) return prev;
|
|
13
|
-
const id = idCounter++;
|
|
14
|
-
setTimeout(() => {
|
|
15
|
-
setToasts((prev2) => prev2.filter((t) => t.id !== id));
|
|
16
|
-
}, props.timeout || 4e3);
|
|
17
|
-
return [...prev, { id, props }];
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
const getPosition = useCallback(() => {
|
|
21
|
-
if (toasts.length > 0) {
|
|
22
|
-
switch (toasts[0]?.props?.position) {
|
|
23
|
-
case "top-left":
|
|
24
|
-
return { top: "20px", left: "20px" };
|
|
25
|
-
case "top-right":
|
|
26
|
-
return { top: "20px", right: "20px" };
|
|
27
|
-
case "bottom-left":
|
|
28
|
-
return { bottom: "20px", left: "20px" };
|
|
29
|
-
case "bottom-right":
|
|
30
|
-
return { bottom: "20px", right: "20px" };
|
|
31
|
-
case "top-center":
|
|
32
|
-
return { top: "20px", left: "50%", transform: "translateX(-50%)" };
|
|
33
|
-
case "bottom-center":
|
|
34
|
-
return { bottom: "20px", left: "50%", transform: "translateX(-50%)" };
|
|
35
|
-
default:
|
|
36
|
-
return {};
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}, [toasts.length]);
|
|
40
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs(ToastContext.Provider, { value: { showToast }, children: [
|
|
41
|
-
children,
|
|
42
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
43
|
-
NotificationToast,
|
|
44
|
-
{
|
|
45
|
-
...props,
|
|
46
|
-
onClose: () => {
|
|
47
|
-
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
id
|
|
51
|
-
)) })
|
|
52
|
-
] });
|
|
53
|
-
};
|
|
54
|
-
export {
|
|
55
|
-
ToastContext,
|
|
56
|
-
ToastProvider as default
|
|
57
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
|
|
2
|
-
import { IconCloseBlack } from "../../assets/Icons/IconClose.js";
|
|
3
|
-
import style from "./NotificationToast.module.scss.js";
|
|
4
|
-
import { useState, useEffect } from "react";
|
|
5
|
-
import { IconExclamation } from "../../assets/Icons/IconExclamation.js";
|
|
6
|
-
import { IconCheck } from "../../assets/Icons/IconCheck.js";
|
|
7
|
-
const NotificationToast = ({
|
|
8
|
-
title,
|
|
9
|
-
colorType = "neutral",
|
|
10
|
-
filled = false,
|
|
11
|
-
withClose = false,
|
|
12
|
-
withUndo = false,
|
|
13
|
-
withInfoIcon = true,
|
|
14
|
-
description,
|
|
15
|
-
customAction,
|
|
16
|
-
timeout = 4e3,
|
|
17
|
-
children,
|
|
18
|
-
onUndo,
|
|
19
|
-
onClose
|
|
20
|
-
}) => {
|
|
21
|
-
const [animationClass, setAnimationClass] = useState("fadeIn");
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
const duration = timeout;
|
|
24
|
-
const fadeDuration = 300;
|
|
25
|
-
const hideTimeout = setTimeout(() => {
|
|
26
|
-
setAnimationClass("fadeOut");
|
|
27
|
-
setTimeout(() => {
|
|
28
|
-
onClose?.();
|
|
29
|
-
}, fadeDuration);
|
|
30
|
-
}, duration);
|
|
31
|
-
return () => {
|
|
32
|
-
clearTimeout(hideTimeout);
|
|
33
|
-
};
|
|
34
|
-
}, [onClose]);
|
|
35
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
36
|
-
"div",
|
|
37
|
-
{
|
|
38
|
-
className: `${style.notificationToast} ${style[colorType]} ${filled ? style.filled : ""} ${style[animationClass]}`,
|
|
39
|
-
style: description ? { padding: "12px" } : {},
|
|
40
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContent, style: description ? { alignItems: "flex-start" } : {}, children: [
|
|
41
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentLeft, style: description ? { alignItems: "flex-start" } : {}, children: [
|
|
42
|
-
withInfoIcon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentInfoIcon, children: colorType === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheck, { color: filled ? "#328707" : "#fff" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconExclamation, { color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : "#0058FF" : "#fff" }) }),
|
|
43
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentLeftText, children: [
|
|
44
|
-
title && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentLeftTextTitle, children: title }),
|
|
45
|
-
description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentLeftTextDescription, children: description }),
|
|
46
|
-
children && children
|
|
47
|
-
] })
|
|
48
|
-
] }),
|
|
49
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentDescription }),
|
|
50
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.notificationToastContentRight, children: [
|
|
51
|
-
customAction && customAction,
|
|
52
|
-
!description && withUndo && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.notificationToastContentRightUndoText, onClick: () => onUndo?.(), children: "Undo" }),
|
|
53
|
-
withClose && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.notificationToastContentRightClose, style: description || !withUndo ? { border: "none" } : {}, onClick: () => onClose?.(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
54
|
-
IconCloseBlack,
|
|
55
|
-
{
|
|
56
|
-
color: filled ? colorType === "neutral" ? "#131314" : colorType === "error" ? "#E3292F" : colorType === "info" ? "#0058FF" : "#328707" : "#fff"
|
|
57
|
-
}
|
|
58
|
-
) })
|
|
59
|
-
] })
|
|
60
|
-
] })
|
|
61
|
-
}
|
|
62
|
-
);
|
|
63
|
-
};
|
|
64
|
-
export {
|
|
65
|
-
NotificationToast as default
|
|
66
|
-
};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
const toastContainer = "NotificationToast-module__toastContainer";
|
|
2
|
-
const notificationToast = "NotificationToast-module__notificationToast";
|
|
3
|
-
const fadeIn = "NotificationToast-module__fadeIn";
|
|
4
|
-
const fadeOut = "NotificationToast-module__fadeOut";
|
|
5
|
-
const neutral = "NotificationToast-module__neutral";
|
|
6
|
-
const filled = "NotificationToast-module__filled";
|
|
7
|
-
const notificationToastContentLeftTextTitle = "NotificationToast-module__notificationToastContentLeftTextTitle";
|
|
8
|
-
const notificationToastContentRightUndoText = "NotificationToast-module__notificationToastContentRightUndoText";
|
|
9
|
-
const notificationToastContentLeftTextDescription = "NotificationToast-module__notificationToastContentLeftTextDescription";
|
|
10
|
-
const info = "NotificationToast-module__info";
|
|
11
|
-
const error = "NotificationToast-module__error";
|
|
12
|
-
const success = "NotificationToast-module__success";
|
|
13
|
-
const notificationToastContent = "NotificationToast-module__notificationToastContent";
|
|
14
|
-
const notificationToastContentLeft = "NotificationToast-module__notificationToastContentLeft";
|
|
15
|
-
const notificationToastContentInfoIcon = "NotificationToast-module__notificationToastContentInfoIcon";
|
|
16
|
-
const notificationToastContentLeftText = "NotificationToast-module__notificationToastContentLeftText";
|
|
17
|
-
const notificationToastContentRight = "NotificationToast-module__notificationToastContentRight";
|
|
18
|
-
const notificationToastContentRightClose = "NotificationToast-module__notificationToastContentRightClose";
|
|
19
|
-
const style = {
|
|
20
|
-
toastContainer,
|
|
21
|
-
notificationToast,
|
|
22
|
-
fadeIn,
|
|
23
|
-
fadeOut,
|
|
24
|
-
neutral,
|
|
25
|
-
filled,
|
|
26
|
-
notificationToastContentLeftTextTitle,
|
|
27
|
-
notificationToastContentRightUndoText,
|
|
28
|
-
notificationToastContentLeftTextDescription,
|
|
29
|
-
info,
|
|
30
|
-
error,
|
|
31
|
-
success,
|
|
32
|
-
notificationToastContent,
|
|
33
|
-
notificationToastContentLeft,
|
|
34
|
-
notificationToastContentInfoIcon,
|
|
35
|
-
notificationToastContentLeftText,
|
|
36
|
-
notificationToastContentRight,
|
|
37
|
-
notificationToastContentRightClose
|
|
38
|
-
};
|
|
39
|
-
export {
|
|
40
|
-
style as default,
|
|
41
|
-
error,
|
|
42
|
-
fadeIn,
|
|
43
|
-
fadeOut,
|
|
44
|
-
filled,
|
|
45
|
-
info,
|
|
46
|
-
neutral,
|
|
47
|
-
notificationToast,
|
|
48
|
-
notificationToastContent,
|
|
49
|
-
notificationToastContentInfoIcon,
|
|
50
|
-
notificationToastContentLeft,
|
|
51
|
-
notificationToastContentLeftText,
|
|
52
|
-
notificationToastContentLeftTextDescription,
|
|
53
|
-
notificationToastContentLeftTextTitle,
|
|
54
|
-
notificationToastContentRight,
|
|
55
|
-
notificationToastContentRightClose,
|
|
56
|
-
notificationToastContentRightUndoText,
|
|
57
|
-
success,
|
|
58
|
-
toastContainer
|
|
59
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { ToastContext } from "./NotificationContext.js";
|
|
2
|
-
import { useContext } from "react";
|
|
3
|
-
const createNotificationToast = () => {
|
|
4
|
-
const context = useContext(ToastContext);
|
|
5
|
-
if (!context) throw new Error("createNotificationToast must be used within ToastProvider");
|
|
6
|
-
return context.showToast;
|
|
7
|
-
};
|
|
8
|
-
export {
|
|
9
|
-
createNotificationToast as default
|
|
10
|
-
};
|