@skbkontur/react-ui 4.17.4 → 4.18.0
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/CHANGELOG.md +17 -0
- package/cjs/components/Button/Button.js +1 -1
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +1 -0
- package/cjs/components/Button/Button.styles.js +1 -0
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/ButtonArrow.js +1 -1
- package/cjs/components/Button/ButtonArrow.js.map +1 -1
- package/cjs/components/Input/InputLayout/InputLayout.d.ts +1 -1
- package/cjs/components/MiniModal/MiniModal.d.ts +18 -0
- package/cjs/components/MiniModal/MiniModal.js +47 -0
- package/cjs/components/MiniModal/MiniModal.js.map +1 -0
- package/cjs/components/MiniModal/MiniModal.md +233 -0
- package/cjs/components/MiniModal/MiniModal.styles.d.ts +14 -0
- package/cjs/components/MiniModal/MiniModal.styles.js +87 -0
- package/cjs/components/MiniModal/MiniModal.styles.js.map +1 -0
- package/cjs/components/MiniModal/MiniModalBody.d.ts +7 -0
- package/cjs/components/MiniModal/MiniModalBody.js +24 -0
- package/cjs/components/MiniModal/MiniModalBody.js.map +1 -0
- package/cjs/components/MiniModal/MiniModalFooter.d.ts +18 -0
- package/cjs/components/MiniModal/MiniModalFooter.js +60 -0
- package/cjs/components/MiniModal/MiniModalFooter.js.map +1 -0
- package/cjs/components/MiniModal/MiniModalHeader.d.ts +17 -0
- package/cjs/components/MiniModal/MiniModalHeader.js +47 -0
- package/cjs/components/MiniModal/MiniModalHeader.js.map +1 -0
- package/cjs/components/MiniModal/MiniModalIndent.d.ts +6 -0
- package/cjs/components/MiniModal/MiniModalIndent.js +29 -0
- package/cjs/components/MiniModal/MiniModalIndent.js.map +1 -0
- package/cjs/components/MiniModal/getMiniModalTheme.d.ts +16 -0
- package/cjs/components/MiniModal/getMiniModalTheme.js +24 -0
- package/cjs/components/MiniModal/getMiniModalTheme.js.map +1 -0
- package/cjs/components/MiniModal/index.d.ts +5 -0
- package/cjs/components/MiniModal/index.js +5 -0
- package/cjs/components/MiniModal/index.js.map +1 -0
- package/cjs/components/Modal/Modal.d.ts +6 -0
- package/cjs/components/Modal/Modal.js +14 -1
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.d.ts +5 -0
- package/cjs/components/Modal/Modal.styles.js +56 -39
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.js +1 -1
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Modal/ModalSeparator.d.ts +5 -0
- package/cjs/components/Modal/ModalSeparator.js +5 -0
- package/cjs/components/Modal/ModalSeparator.js.map +1 -1
- package/cjs/components/Modal/getModalTheme.d.ts +2 -2
- package/cjs/components/Modal/getModalTheme.js +6 -2
- package/cjs/components/Modal/getModalTheme.js.map +1 -1
- package/cjs/components/SingleToast/SingleToast.d.ts +11 -0
- package/cjs/components/SingleToast/SingleToast.js +20 -0
- package/cjs/components/SingleToast/SingleToast.js.map +1 -0
- package/cjs/components/SingleToast/SingleToast.md +35 -0
- package/cjs/components/SingleToast/index.d.ts +1 -0
- package/cjs/components/SingleToast/index.js +1 -0
- package/cjs/components/SingleToast/index.js.map +1 -0
- package/cjs/components/Textarea/TextareaCounter.d.ts +1 -1
- package/cjs/components/Toast/Toast.d.ts +10 -3
- package/cjs/components/Toast/Toast.js +22 -4
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/Toast.md +0 -105
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +2 -0
- package/cjs/index.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +1 -1
- package/cjs/internal/MenuMessage/MenuMessage.d.ts +1 -1
- package/cjs/internal/ThemePlayground/constants.js +1 -0
- package/cjs/internal/ThemePlayground/constants.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/icons/16px/index.d.ts +19 -19
- package/cjs/internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowAUpIcon/ArrowAUp16Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCUpIcon/ArrowCUpIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowCollapseCVOpenIcon/ArrowCollapseCVOpenIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/BaseIcon.d.ts +1 -1
- package/cjs/internal/icons2022/CalendarIcon/CalendarIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/CalendarIcon/CalendarIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/CalendarIcon/CalendarIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/CheckAIcon/CheckAIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/CheckAIcon/CheckAIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/CheckAIcon/CheckAIcon16Solid.d.ts +1 -1
- package/cjs/internal/icons2022/CheckAIcon/CheckAIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/CheckAIcon/CheckAIcon20Solid.d.ts +1 -1
- package/cjs/internal/icons2022/CheckAIcon/CheckAIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/EyeClosedIcon/EyeClosedIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/EyeClosedIcon/EyeClosedIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/EyeClosedIcon/EyeClosedIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.d.ts +2 -0
- package/cjs/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.js +20 -0
- package/cjs/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.js.map +1 -0
- package/cjs/internal/icons2022/MathFunctionIcon/MathFunctionIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/MathFunctionIcon/MathFunctionIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/MathFunctionIcon/MathFunctionIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/MinusCircleIcon/MinusCircleIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/MinusCircleIcon/MinusCircleIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/MinusCircleIcon/MinusCircleIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/MinusCircleIcon/MinusCircleIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/NetUploadIcon/NetUploadIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/NetUploadIcon/NetUploadIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/NetUploadIcon/NetUploadIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid.d.ts +1 -1
- package/cjs/internal/icons2022/SearchLoupeIcon/SearchLoupeIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/ShapeSquareIcon/ShapeSquareIcon16Solid.d.ts +1 -1
- package/cjs/internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular.d.ts +1 -1
- package/cjs/internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular.d.ts +1 -1
- package/cjs/internal/icons2022/XIcon/XIcon16Light.d.ts +1 -1
- package/cjs/internal/icons2022/XIcon/XIcon16Regular.d.ts +1 -1
- package/cjs/internal/icons2022/XIcon/XIcon20Light.d.ts +1 -1
- package/cjs/internal/icons2022/XIcon/XIcon20Regular.d.ts +1 -1
- package/cjs/internal/icons2022/XIcon/XIcon24Regular.d.ts +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +22 -0
- package/cjs/internal/themes/DefaultTheme.js +26 -1
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/lib/forwardRefAndName.d.ts +1 -1
- package/cjs/lib/forwardRefAndName.js +4 -1
- package/cjs/lib/forwardRefAndName.js.map +1 -1
- package/components/Button/Button/Button.js +1 -1
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.styles/Button.styles.js +1 -0
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +1 -0
- package/components/Button/ButtonArrow/ButtonArrow.js +1 -1
- package/components/Button/ButtonArrow/ButtonArrow.js.map +1 -1
- package/components/Input/InputLayout/InputLayout.d.ts +1 -1
- package/components/MiniModal/MiniModal/MiniModal.js +38 -0
- package/components/MiniModal/MiniModal/MiniModal.js.map +1 -0
- package/components/MiniModal/MiniModal/package.json +6 -0
- package/components/MiniModal/MiniModal.d.ts +18 -0
- package/components/MiniModal/MiniModal.md +233 -0
- package/components/MiniModal/MiniModal.styles/MiniModal.styles.js +41 -0
- package/components/MiniModal/MiniModal.styles/MiniModal.styles.js.map +1 -0
- package/components/MiniModal/MiniModal.styles/package.json +6 -0
- package/components/MiniModal/MiniModal.styles.d.ts +14 -0
- package/components/MiniModal/MiniModalBody/MiniModalBody.js +23 -0
- package/components/MiniModal/MiniModalBody/MiniModalBody.js.map +1 -0
- package/components/MiniModal/MiniModalBody/package.json +6 -0
- package/components/MiniModal/MiniModalBody.d.ts +7 -0
- package/components/MiniModal/MiniModalFooter/MiniModalFooter.js +35 -0
- package/components/MiniModal/MiniModalFooter/MiniModalFooter.js.map +1 -0
- package/components/MiniModal/MiniModalFooter/package.json +6 -0
- package/components/MiniModal/MiniModalFooter.d.ts +18 -0
- package/components/MiniModal/MiniModalHeader/MiniModalHeader.js +33 -0
- package/components/MiniModal/MiniModalHeader/MiniModalHeader.js.map +1 -0
- package/components/MiniModal/MiniModalHeader/package.json +6 -0
- package/components/MiniModal/MiniModalHeader.d.ts +17 -0
- package/components/MiniModal/MiniModalIndent/MiniModalIndent.js +27 -0
- package/components/MiniModal/MiniModalIndent/MiniModalIndent.js.map +1 -0
- package/components/MiniModal/MiniModalIndent/package.json +6 -0
- package/components/MiniModal/MiniModalIndent.d.ts +6 -0
- package/components/MiniModal/getMiniModalTheme/getMiniModalTheme.js +23 -0
- package/components/MiniModal/getMiniModalTheme/getMiniModalTheme.js.map +1 -0
- package/components/MiniModal/getMiniModalTheme/package.json +6 -0
- package/components/MiniModal/getMiniModalTheme.d.ts +16 -0
- package/components/MiniModal/index/index.js +5 -0
- package/components/MiniModal/index/index.js.map +1 -0
- package/components/MiniModal/index/package.json +6 -0
- package/components/MiniModal/index.d.ts +5 -0
- package/components/MiniModal/package.json +6 -0
- package/components/Modal/Modal/Modal.js +13 -10
- package/components/Modal/Modal/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts +6 -0
- package/components/Modal/Modal.styles/Modal.styles.js +44 -37
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +5 -0
- package/components/Modal/ModalHeader/ModalHeader.js +1 -1
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Modal/ModalSeparator/ModalSeparator.js +6 -0
- package/components/Modal/ModalSeparator/ModalSeparator.js.map +1 -1
- package/components/Modal/ModalSeparator.d.ts +5 -0
- package/components/Modal/getModalTheme/getModalTheme.js +8 -3
- package/components/Modal/getModalTheme/getModalTheme.js.map +1 -1
- package/components/Modal/getModalTheme.d.ts +2 -2
- package/components/SingleToast/SingleToast/SingleToast.js +53 -0
- package/components/SingleToast/SingleToast/SingleToast.js.map +1 -0
- package/components/SingleToast/SingleToast/package.json +6 -0
- package/components/SingleToast/SingleToast.d.ts +11 -0
- package/components/SingleToast/SingleToast.md +35 -0
- package/components/SingleToast/index/index.js +1 -0
- package/components/SingleToast/index/index.js.map +1 -0
- package/components/SingleToast/index/package.json +6 -0
- package/components/SingleToast/index.d.ts +1 -0
- package/components/SingleToast/package.json +6 -0
- package/components/Textarea/TextareaCounter.d.ts +1 -1
- package/components/Toast/Toast/Toast.js +13 -4
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +10 -3
- package/components/Toast/Toast.md +0 -105
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +1 -1
- package/internal/MenuMessage/MenuMessage.d.ts +1 -1
- package/internal/ThemePlayground/constants/constants.js +3 -0
- package/internal/ThemePlayground/constants/constants.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/icons/16px/index.d.ts +19 -19
- package/internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light.d.ts +1 -1
- package/internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light.d.ts +1 -1
- package/internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular.d.ts +1 -1
- package/internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light.d.ts +1 -1
- package/internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light.d.ts +1 -1
- package/internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular.d.ts +1 -1
- package/internal/icons2022/ArrowAUpIcon/ArrowAUp16Light.d.ts +1 -1
- package/internal/icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular.d.ts +1 -1
- package/internal/icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular.d.ts +1 -1
- package/internal/icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular.d.ts +1 -1
- package/internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light.d.ts +1 -1
- package/internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light.d.ts +1 -1
- package/internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular.d.ts +1 -1
- package/internal/icons2022/ArrowCUpIcon/ArrowCUpIcon16Regular.d.ts +1 -1
- package/internal/icons2022/ArrowCollapseCVOpenIcon/ArrowCollapseCVOpenIcon16Regular.d.ts +1 -1
- package/internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon16Light.d.ts +1 -1
- package/internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon20Light.d.ts +1 -1
- package/internal/icons2022/ArrowShapeDRadiusUpLeftIcon/ArrowShapeDRadiusUpLeftIcon24Regular.d.ts +1 -1
- package/internal/icons2022/BaseIcon.d.ts +1 -1
- package/internal/icons2022/CalendarIcon/CalendarIcon16Light.d.ts +1 -1
- package/internal/icons2022/CalendarIcon/CalendarIcon20Light.d.ts +1 -1
- package/internal/icons2022/CalendarIcon/CalendarIcon24Regular.d.ts +1 -1
- package/internal/icons2022/CheckAIcon/CheckAIcon16Light.d.ts +1 -1
- package/internal/icons2022/CheckAIcon/CheckAIcon16Regular.d.ts +1 -1
- package/internal/icons2022/CheckAIcon/CheckAIcon16Solid.d.ts +1 -1
- package/internal/icons2022/CheckAIcon/CheckAIcon20Light.d.ts +1 -1
- package/internal/icons2022/CheckAIcon/CheckAIcon20Solid.d.ts +1 -1
- package/internal/icons2022/CheckAIcon/CheckAIcon24Regular.d.ts +1 -1
- package/internal/icons2022/EyeClosedIcon/EyeClosedIcon16Light.d.ts +1 -1
- package/internal/icons2022/EyeClosedIcon/EyeClosedIcon20Light.d.ts +1 -1
- package/internal/icons2022/EyeClosedIcon/EyeClosedIcon24Regular.d.ts +1 -1
- package/internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light.d.ts +1 -1
- package/internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light.d.ts +1 -1
- package/internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular.d.ts +1 -1
- package/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular/InfoCircleIcon64Regular.js +18 -0
- package/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular/InfoCircleIcon64Regular.js.map +1 -0
- package/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular/package.json +6 -0
- package/internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.d.ts +2 -0
- package/internal/icons2022/MathFunctionIcon/MathFunctionIcon16Light.d.ts +1 -1
- package/internal/icons2022/MathFunctionIcon/MathFunctionIcon20Light.d.ts +1 -1
- package/internal/icons2022/MathFunctionIcon/MathFunctionIcon24Regular.d.ts +1 -1
- package/internal/icons2022/MinusCircleIcon/MinusCircleIcon16Light.d.ts +1 -1
- package/internal/icons2022/MinusCircleIcon/MinusCircleIcon16Regular.d.ts +1 -1
- package/internal/icons2022/MinusCircleIcon/MinusCircleIcon20Light.d.ts +1 -1
- package/internal/icons2022/MinusCircleIcon/MinusCircleIcon24Regular.d.ts +1 -1
- package/internal/icons2022/NetUploadIcon/NetUploadIcon16Light.d.ts +1 -1
- package/internal/icons2022/NetUploadIcon/NetUploadIcon20Light.d.ts +1 -1
- package/internal/icons2022/NetUploadIcon/NetUploadIcon24Regular.d.ts +1 -1
- package/internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid.d.ts +1 -1
- package/internal/icons2022/SearchLoupeIcon/SearchLoupeIcon16Regular.d.ts +1 -1
- package/internal/icons2022/ShapeSquareIcon/ShapeSquareIcon16Solid.d.ts +1 -1
- package/internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light.d.ts +1 -1
- package/internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular.d.ts +1 -1
- package/internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular.d.ts +1 -1
- package/internal/icons2022/XIcon/XIcon16Light.d.ts +1 -1
- package/internal/icons2022/XIcon/XIcon16Regular.d.ts +1 -1
- package/internal/icons2022/XIcon/XIcon20Light.d.ts +1 -1
- package/internal/icons2022/XIcon/XIcon20Regular.d.ts +1 -1
- package/internal/icons2022/XIcon/XIcon24Regular.d.ts +1 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js +23 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +22 -0
- package/lib/forwardRefAndName/forwardRefAndName.js.map +1 -1
- package/lib/forwardRefAndName.d.ts +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Modal, ModalProps } from '../Modal';
|
|
2
|
+
import { MiniModalFooter } from './MiniModalFooter';
|
|
3
|
+
import { MiniModalHeader } from './MiniModalHeader';
|
|
4
|
+
import { MiniModalBody } from './MiniModalBody';
|
|
5
|
+
import { MiniModalIndent } from './MiniModalIndent';
|
|
6
|
+
export declare const MiniModalDataTids: {
|
|
7
|
+
readonly icon: "MiniModal__icon";
|
|
8
|
+
readonly title: "MiniModal__title";
|
|
9
|
+
readonly description: "MiniModal__description";
|
|
10
|
+
readonly actions: "MiniModal__actions";
|
|
11
|
+
readonly indent: "MiniModal__indent";
|
|
12
|
+
};
|
|
13
|
+
export declare const MiniModal: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<Modal, ModalProps> & {
|
|
14
|
+
Header: typeof MiniModalHeader;
|
|
15
|
+
Indent: typeof MiniModalIndent;
|
|
16
|
+
Footer: typeof MiniModalFooter;
|
|
17
|
+
Body: typeof MiniModalBody;
|
|
18
|
+
};
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
Этот компонент обёртка над [Modal](#/Components/Modal/Modal).
|
|
2
|
+
|
|
3
|
+
`MiniModal` — модальное диалоговое окно, которое предполагает обязательный отклик пользователя по одному из доступных действий.
|
|
4
|
+
Закрытие окна по клику на фон или "крестик" не рекомендуется, т.к. у этих действий нет однозначного описания в
|
|
5
|
+
отличие от кнопок с названиями, наподобие "Сохранить", "Подтвердить" и т.п.
|
|
6
|
+
|
|
7
|
+
👉 По макету предполагается, что все кнопки должны быть среднего размера `size = medium`.
|
|
8
|
+
|
|
9
|
+
Примеры использования:
|
|
10
|
+
|
|
11
|
+
### Уведомление
|
|
12
|
+
|
|
13
|
+
Самый простой вариант использования:
|
|
14
|
+
|
|
15
|
+
```jsx harmony
|
|
16
|
+
import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
|
|
17
|
+
import { MoneyTypeCoinsIcon } from '@skbkontur/icons/MoneyTypeCoinsIcon';
|
|
18
|
+
|
|
19
|
+
const PayNotifice = () => {
|
|
20
|
+
|
|
21
|
+
const [isOpened, setIsOpened] = React.useState(false);
|
|
22
|
+
|
|
23
|
+
const open = () => setIsOpened(true);
|
|
24
|
+
const close = () => setIsOpened(false);
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<>
|
|
28
|
+
{isOpened && (
|
|
29
|
+
<MiniModal>
|
|
30
|
+
<MiniModal.Header>
|
|
31
|
+
Простое уведомление
|
|
32
|
+
</MiniModal.Header>
|
|
33
|
+
<MiniModal.Body>
|
|
34
|
+
Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
|
|
35
|
+
</MiniModal.Body>
|
|
36
|
+
<MiniModal.Footer>
|
|
37
|
+
<Button size="medium" use="primary" onClick={close}>Понятно</Button>
|
|
38
|
+
</MiniModal.Footer>
|
|
39
|
+
</MiniModal>
|
|
40
|
+
)}
|
|
41
|
+
<Button use="pay" onClick={open} icon={<MoneyTypeCoinsIcon/>}>Оплата</Button>
|
|
42
|
+
</>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
<PayNotifice />
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Подтверждение
|
|
50
|
+
|
|
51
|
+
Иногда от пользователя требуется выбрать одно из доступных действий.
|
|
52
|
+
|
|
53
|
+
Например, подтвердить важное действие или отклонить его:
|
|
54
|
+
|
|
55
|
+
```jsx harmony
|
|
56
|
+
import { MiniModal, Button, Gapped, ThemeContext } from '@skbkontur/react-ui';
|
|
57
|
+
import { TrashCanIcon } from '@skbkontur/icons/TrashCanIcon';
|
|
58
|
+
|
|
59
|
+
const ConfirmDelete = ({ name, handleDelete }) => {
|
|
60
|
+
const theme = React.useContext(ThemeContext);
|
|
61
|
+
|
|
62
|
+
const [isOpened, setIsOpened] = React.useState(false);
|
|
63
|
+
|
|
64
|
+
const open = () => setIsOpened(true);
|
|
65
|
+
const close = () => setIsOpened(false);
|
|
66
|
+
|
|
67
|
+
const mainAction = () => {
|
|
68
|
+
handleDelete();
|
|
69
|
+
close();
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<>
|
|
74
|
+
{isOpened && (
|
|
75
|
+
<MiniModal>
|
|
76
|
+
<MiniModal.Header icon={<TrashCanIcon size={64} color={theme.btnDangerBg}/>}>
|
|
77
|
+
Удалить "{name}"?
|
|
78
|
+
</MiniModal.Header>
|
|
79
|
+
<MiniModal.Footer direction="column">
|
|
80
|
+
<Button use="danger" size="medium" onClick={mainAction}>Удалить</Button>
|
|
81
|
+
<Button size="medium" onClick={close}>Отменить</Button>
|
|
82
|
+
</MiniModal.Footer>
|
|
83
|
+
</MiniModal>
|
|
84
|
+
)}
|
|
85
|
+
<Button onClick={open} icon={<TrashCanIcon weight="light"/>}/>
|
|
86
|
+
</>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const list = ['Отчёт № 111', 'Отчёт № 222', 'Отчёт № 333'];
|
|
91
|
+
|
|
92
|
+
<Gapped vertical>
|
|
93
|
+
{list.map((name) => (
|
|
94
|
+
<Gapped key={name}>
|
|
95
|
+
<div style={{ width: 200, borderBottom: 'dashed 1px' }}>
|
|
96
|
+
{name}
|
|
97
|
+
</div>
|
|
98
|
+
<span>
|
|
99
|
+
<ConfirmDelete name={name} handleDelete={() => alert(`${name} удалён`)}/>
|
|
100
|
+
</span>
|
|
101
|
+
</Gapped>
|
|
102
|
+
))}
|
|
103
|
+
</Gapped>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Синглтон
|
|
107
|
+
|
|
108
|
+
Одно и то же диалоговое окно может вызываться в разных частях приложения.
|
|
109
|
+
|
|
110
|
+
В таком случае стоит реализовать паттерн синглтона:
|
|
111
|
+
|
|
112
|
+
```jsx harmony
|
|
113
|
+
import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
|
|
114
|
+
import { NotificationBellAlarmIcon16Solid } from '@skbkontur/icons/NotificationBellAlarmIcon16Solid';
|
|
115
|
+
import { NotificationBellAlarmIcon64Regular } from '@skbkontur/icons/NotificationBellAlarmIcon64Regular';
|
|
116
|
+
|
|
117
|
+
const EnableNotification = React.forwardRef(({ setStatus }, ref) => {
|
|
118
|
+
const [isOpened, setIsOpened] = React.useState(false);
|
|
119
|
+
|
|
120
|
+
const open = () => setIsOpened(true);
|
|
121
|
+
const close = () => setIsOpened(false);
|
|
122
|
+
|
|
123
|
+
const handleAllowAll = () => {
|
|
124
|
+
setStatus('Разрешить все');
|
|
125
|
+
close();
|
|
126
|
+
};
|
|
127
|
+
const handleAllowBasic = () => {
|
|
128
|
+
setStatus('Разрешить только основные');
|
|
129
|
+
close();
|
|
130
|
+
};
|
|
131
|
+
const handleDenyAll = () => {
|
|
132
|
+
setStatus('Запретить');
|
|
133
|
+
close();
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
React.useImperativeHandle(ref, () => ({ open, close }), []);
|
|
137
|
+
|
|
138
|
+
return isOpened && (
|
|
139
|
+
<MiniModal>
|
|
140
|
+
<MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
|
|
141
|
+
Разрешить уведомления?
|
|
142
|
+
</MiniModal.Header>
|
|
143
|
+
<MiniModal.Footer direction="column">
|
|
144
|
+
<Button use="primary" size="medium" onClick={handleAllowAll}>Разрешить все</Button>
|
|
145
|
+
<Button size="medium" onClick={handleAllowBasic}>Разрешить только основные</Button>
|
|
146
|
+
<MiniModal.Indent/>
|
|
147
|
+
<Button size="medium" onClick={handleDenyAll}>Запретить</Button>
|
|
148
|
+
</MiniModal.Footer>
|
|
149
|
+
</MiniModal>
|
|
150
|
+
);
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
const [status, setStatus] = React.useState('-не выбрано-');
|
|
154
|
+
|
|
155
|
+
const NotificationEnableRef = React.useRef(null);
|
|
156
|
+
|
|
157
|
+
const NotificationEnableOpen = () => NotificationEnableRef.current && NotificationEnableRef.current.open();
|
|
158
|
+
|
|
159
|
+
<>
|
|
160
|
+
<EnableNotification ref={NotificationEnableRef} setStatus={setStatus}/>
|
|
161
|
+
<Gapped vertical>
|
|
162
|
+
<span>
|
|
163
|
+
<NotificationBellAlarmIcon16Solid/> Статус уведомлений: {status}
|
|
164
|
+
</span>
|
|
165
|
+
<Button use="text" theme={{ btnTextBg: '#D6D6D6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
|
|
166
|
+
<Button use="text" theme={{ btnTextBg: '#E6E6E6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
|
|
167
|
+
<Button use="text" theme={{ btnTextBg: '#F0F0F0' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
|
|
168
|
+
</Gapped>
|
|
169
|
+
</>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Ожидание
|
|
173
|
+
|
|
174
|
+
Некоторые действия для корректного исполнения требуют блокировки других действий пользователя.
|
|
175
|
+
|
|
176
|
+
В таких случаях можно, например, использовать проп `loading` для `Button`, и не позволять закрыть окно до конца исполнения:
|
|
177
|
+
|
|
178
|
+
```jsx harmony
|
|
179
|
+
import { Button, Gapped } from '@skbkontur/react-ui';
|
|
180
|
+
|
|
181
|
+
const WaitingUpdate = ({ handleUpdate, setLastUpdated }) => {
|
|
182
|
+
|
|
183
|
+
const [isLoading, setIsLoading] = React.useState(false);
|
|
184
|
+
const [isOpened, setIsOpened] = React.useState(false);
|
|
185
|
+
|
|
186
|
+
const open = () => setIsOpened(true);
|
|
187
|
+
const close = () => setIsOpened(false);
|
|
188
|
+
|
|
189
|
+
const handleMainClick = () => {
|
|
190
|
+
setIsLoading(true);
|
|
191
|
+
handleUpdate()
|
|
192
|
+
.then(() => {
|
|
193
|
+
setIsLoading(false);
|
|
194
|
+
setIsOpened(false);
|
|
195
|
+
setLastUpdated(new Date());
|
|
196
|
+
});
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
return (
|
|
200
|
+
<>
|
|
201
|
+
{isOpened && (
|
|
202
|
+
<MiniModal>
|
|
203
|
+
<MiniModal.Header>
|
|
204
|
+
Обновить?
|
|
205
|
+
</MiniModal.Header>
|
|
206
|
+
<MiniModal.Body>
|
|
207
|
+
После вашего подтверждения другие действия на странице будут заблокированы на несколько секунд.
|
|
208
|
+
</MiniModal.Body>
|
|
209
|
+
<MiniModal.Footer>
|
|
210
|
+
<Button use="success" size="medium" onClick={handleMainClick} loading={isLoading}>Обновить</Button>
|
|
211
|
+
<Button size="medium" onClick={close} disabled={isLoading}>Отменить</Button>
|
|
212
|
+
</MiniModal.Footer>
|
|
213
|
+
|
|
214
|
+
</MiniModal>
|
|
215
|
+
)}
|
|
216
|
+
<Button onClick={open} use="success">Обновить</Button>
|
|
217
|
+
</>
|
|
218
|
+
);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
const dateTimeFormat = new Intl.DateTimeFormat('nu', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
222
|
+
|
|
223
|
+
const [lastUpdated, setLastUpdated] = React.useState(new Date());
|
|
224
|
+
|
|
225
|
+
const handleUpdate = () => new Promise((resolve) => setTimeout(resolve, 1500));
|
|
226
|
+
|
|
227
|
+
<Gapped>
|
|
228
|
+
<WaitingUpdate handleUpdate={handleUpdate} setLastUpdated={setLastUpdated} />
|
|
229
|
+
<span>
|
|
230
|
+
Последнее обновление: {dateTimeFormat.format(lastUpdated)}
|
|
231
|
+
</span>
|
|
232
|
+
</Gapped>
|
|
233
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
2
|
+
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
4
|
+
|
|
5
|
+
import { css, memoizeStyle } from "../../../lib/theming/Emotion";
|
|
6
|
+
import { globalClasses as buttonGlobalClasses } from "../../Button/Button.styles";
|
|
7
|
+
export var styles = memoizeStyle({
|
|
8
|
+
icon: function icon() {
|
|
9
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n text-align: center;\n "])));
|
|
10
|
+
},
|
|
11
|
+
description: function description() {
|
|
12
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n text-align: center;\n "])));
|
|
13
|
+
},
|
|
14
|
+
title: function title() {
|
|
15
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n text-align: center;\n "])));
|
|
16
|
+
},
|
|
17
|
+
titleWithIcon: function titleWithIcon(t) {
|
|
18
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n margin-top: ", ";\n "])), t.miniModalTitleMarginTop);
|
|
19
|
+
},
|
|
20
|
+
actions: function actions(t) {
|
|
21
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: stretch;\n text-align: center;\n gap: ", ";\n\n .", " {\n width: 100%;\n }\n "])), t.miniModalActionGap, buttonGlobalClasses.root);
|
|
22
|
+
},
|
|
23
|
+
actionsIndent: function actionsIndent(t) {
|
|
24
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n height: ", ";\n "])), t.miniModalCancelIndent);
|
|
25
|
+
},
|
|
26
|
+
actionsIndentIE11Fallback: function actionsIndentIE11Fallback(t) {
|
|
27
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n padding: ", " 0;\n "])), t.miniModalCancelIndent);
|
|
28
|
+
},
|
|
29
|
+
actionsRow: function actionsRow() {
|
|
30
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n flex-direction: row;\n "])));
|
|
31
|
+
},
|
|
32
|
+
actionsColumn: function actionsColumn() {
|
|
33
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n flex-direction: column;\n "])));
|
|
34
|
+
},
|
|
35
|
+
actionsRowIE11Fallback: function actionsRowIE11Fallback(t) {
|
|
36
|
+
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n > *:nth-of-type(1) {\n margin-right: calc(", " / 2);\n }\n > *:nth-of-type(2) {\n margin-left: calc(", " / 2);\n }\n "])), t.miniModalActionGap, t.miniModalActionGap);
|
|
37
|
+
},
|
|
38
|
+
actionsColumnIE11Fallback: function actionsColumnIE11Fallback(t) {
|
|
39
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n > *:nth-of-type(2) {\n margin-top: ", ";\n }\n > *:nth-of-type(3) {\n margin-top: ", ";\n }\n "])), t.miniModalActionGap, t.miniModalActionGap);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MiniModal.styles.ts"],"names":["css","memoizeStyle","globalClasses","buttonGlobalClasses","styles","icon","description","title","titleWithIcon","t","miniModalTitleMarginTop","actions","miniModalActionGap","root","actionsIndent","miniModalCancelIndent","actionsIndentIE11Fallback","actionsRow","actionsColumn","actionsRowIE11Fallback","actionsColumnIE11Fallback"],"mappings":"0SAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,aAAa,IAAIC,mBAA1B,QAAqD,yBAArD;;AAEA,OAAO,IAAMC,MAAM,GAAGH,YAAY,CAAC;AACjCI,EAAAA,IADiC,kBAC1B;AACL,WAAOL,GAAP;;;AAGD,GALgC;;AAOjCM,EAAAA,WAPiC,yBAOnB;AACZ,WAAON,GAAP;;;AAGD,GAXgC;;AAajCO,EAAAA,KAbiC,mBAazB;AACN,WAAOP,GAAP;;;AAGD,GAjBgC;;AAmBjCQ,EAAAA,aAnBiC,yBAmBnBC,CAnBmB,EAmBT;AACtB,WAAOT,GAAP;AACgBS,IAAAA,CAAC,CAACC,uBADlB;;AAGD,GAvBgC;;AAyBjCC,EAAAA,OAzBiC,mBAyBzBF,CAzByB,EAyBf;AAChB,WAAOT,GAAP;;;;AAISS,IAAAA,CAAC,CAACG,kBAJX;;AAMKT,IAAAA,mBAAmB,CAACU,IANzB;;;;AAUD,GApCgC;;AAsCjCC,EAAAA,aAtCiC,yBAsCnBL,CAtCmB,EAsCT;AACtB,WAAOT,GAAP;AACYS,IAAAA,CAAC,CAACM,qBADd;;AAGD,GA1CgC;;AA4CjCC,EAAAA,yBA5CiC,qCA4CPP,CA5CO,EA4CG;AAClC,WAAOT,GAAP;AACaS,IAAAA,CAAC,CAACM,qBADf;;AAGD,GAhDgC;;AAkDjCE,EAAAA,UAlDiC,wBAkDpB;AACX,WAAOjB,GAAP;;;AAGD,GAtDgC;;AAwDjCkB,EAAAA,aAxDiC,2BAwDjB;AACd,WAAOlB,GAAP;;;AAGD,GA5DgC;;AA8DjCmB,EAAAA,sBA9DiC,kCA8DVV,CA9DU,EA8DA;AAC/B,WAAOT,GAAP;;AAEyBS,IAAAA,CAAC,CAACG,kBAF3B;;;AAKwBH,IAAAA,CAAC,CAACG,kBAL1B;;;AAQD,GAvEgC;;AAyEjCQ,EAAAA,yBAzEiC,qCAyEPX,CAzEO,EAyEG;AAClC,WAAOT,GAAP;;AAEkBS,IAAAA,CAAC,CAACG,kBAFpB;;;AAKkBH,IAAAA,CAAC,CAACG,kBALpB;;;AAQD,GAlFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles';\n\nexport const styles = memoizeStyle({\n icon() {\n return css`\n text-align: center;\n `;\n },\n\n description() {\n return css`\n text-align: center;\n `;\n },\n\n title() {\n return css`\n text-align: center;\n `;\n },\n\n titleWithIcon(t: Theme) {\n return css`\n margin-top: ${t.miniModalTitleMarginTop};\n `;\n },\n\n actions(t: Theme) {\n return css`\n display: flex;\n justify-content: stretch;\n text-align: center;\n gap: ${t.miniModalActionGap};\n\n .${buttonGlobalClasses.root} {\n width: 100%;\n }\n `;\n },\n\n actionsIndent(t: Theme) {\n return css`\n height: ${t.miniModalCancelIndent};\n `;\n },\n\n actionsIndentIE11Fallback(t: Theme) {\n return css`\n padding: ${t.miniModalCancelIndent} 0;\n `;\n },\n\n actionsRow() {\n return css`\n flex-direction: row;\n `;\n },\n\n actionsColumn() {\n return css`\n flex-direction: column;\n `;\n },\n\n actionsRowIE11Fallback(t: Theme) {\n return css`\n > *:nth-of-type(1) {\n margin-right: calc(${t.miniModalActionGap} / 2);\n }\n > *:nth-of-type(2) {\n margin-left: calc(${t.miniModalActionGap} / 2);\n }\n `;\n },\n\n actionsColumnIE11Fallback(t: Theme) {\n return css`\n > *:nth-of-type(2) {\n margin-top: ${t.miniModalActionGap};\n }\n > *:nth-of-type(3) {\n margin-top: ${t.miniModalActionGap};\n }\n `;\n },\n});\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Theme } from '../../lib/theming/Theme';
|
|
2
|
+
export declare const styles: {
|
|
3
|
+
icon(): string;
|
|
4
|
+
description(): string;
|
|
5
|
+
title(): string;
|
|
6
|
+
titleWithIcon(t: Theme): string;
|
|
7
|
+
actions(t: Theme): string;
|
|
8
|
+
actionsIndent(t: Theme): string;
|
|
9
|
+
actionsIndentIE11Fallback(t: Theme): string;
|
|
10
|
+
actionsRow(): string;
|
|
11
|
+
actionsColumn(): string;
|
|
12
|
+
actionsRowIE11Fallback(t: Theme): string;
|
|
13
|
+
actionsColumnIE11Fallback(t: Theme): string;
|
|
14
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
var _excluded = ["children"];
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
|
|
5
|
+
import { Modal } from "../../Modal";
|
|
6
|
+
import { MiniModalDataTids } from "../MiniModal";
|
|
7
|
+
import { styles } from "../MiniModal.styles";
|
|
8
|
+
/**
|
|
9
|
+
* Обёртка над Modal.Body
|
|
10
|
+
*
|
|
11
|
+
* @visibleName MiniModal.Body
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export var MiniModalBody = forwardRefAndName('MiniModalBody', function (_ref, ref) {
|
|
15
|
+
var children = _ref.children,
|
|
16
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
17
|
+
|
|
18
|
+
return /*#__PURE__*/React.createElement(Modal.Body, rest, /*#__PURE__*/React.createElement("div", {
|
|
19
|
+
"data-tid": MiniModalDataTids.description,
|
|
20
|
+
ref: ref,
|
|
21
|
+
className: styles.description()
|
|
22
|
+
}, children));
|
|
23
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MiniModalBody.tsx"],"names":["React","forwardRefAndName","Modal","MiniModalDataTids","styles","MiniModalBody","ref","children","rest","description"],"mappings":"iIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,KAAT,QAAsC,UAAtC;;AAEA,SAASC,iBAAT,QAAkC,aAAlC;AACA,SAASC,MAAT,QAAuB,oBAAvB;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGJ,iBAAiB;AAC5C,eAD4C;AAE5C,gBAAwBK,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B;AACE,wBAAC,KAAD,CAAO,IAAP,EAAgBA,IAAhB;AACE,iCAAK,YAAUL,iBAAiB,CAACM,WAAjC,EAA8C,GAAG,EAAEH,GAAnD,EAAwD,SAAS,EAAEF,MAAM,CAACK,WAAP,EAAnE;AACGF,IAAAA,QADH,CADF,CADF;;;;AAOD,CAV2C,CAAvC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { Modal, ModalBodyProps } from '../Modal';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { styles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n 'MiniModalBody',\n ({ children, ...rest }, ref) => {\n return (\n <Modal.Body {...rest}>\n <div data-tid={MiniModalDataTids.description} ref={ref} className={styles.description()}>\n {children}\n </div>\n </Modal.Body>\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ModalBodyProps } from '../Modal';
|
|
2
|
+
/**
|
|
3
|
+
* Обёртка над Modal.Body
|
|
4
|
+
*
|
|
5
|
+
* @visibleName MiniModal.Body
|
|
6
|
+
*/
|
|
7
|
+
export declare const MiniModalBody: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, ModalBodyProps> & Record<never, never>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
var _excluded = ["direction", "children"];
|
|
3
|
+
import React, { useContext } from 'react';
|
|
4
|
+
import { Modal } from "../../Modal";
|
|
5
|
+
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
|
|
6
|
+
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
7
|
+
import { isIE11 } from "../../../lib/client";
|
|
8
|
+
import { cx } from "../../../lib/theming/Emotion";
|
|
9
|
+
import { styles } from "../MiniModal.styles";
|
|
10
|
+
import { MiniModalDataTids } from "../MiniModal";
|
|
11
|
+
/**
|
|
12
|
+
* Обёртка над Modal.Footer
|
|
13
|
+
*
|
|
14
|
+
* @visibleName MiniModal.Footer
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export var MiniModalFooter = forwardRefAndName('MiniModalFooter', function (_ref, ref) {
|
|
18
|
+
var _ref$direction = _ref.direction,
|
|
19
|
+
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
20
|
+
children = _ref.children,
|
|
21
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
22
|
+
|
|
23
|
+
var theme = useContext(ThemeContext);
|
|
24
|
+
var childrenCount = React.Children.count(children);
|
|
25
|
+
|
|
26
|
+
var _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction; // IE11 does not support CSS property `gap`
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
var IE11FallbackClasses = isIE11 && cx(_direction === 'row' && styles.actionsRowIE11Fallback(theme), _direction === 'column' && styles.actionsColumnIE11Fallback(theme));
|
|
30
|
+
return /*#__PURE__*/React.createElement(Modal.Footer, rest, /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
ref: ref,
|
|
32
|
+
"data-tid": MiniModalDataTids.actions,
|
|
33
|
+
className: cx(styles.actions(theme), _direction === 'row' && styles.actionsRow(), _direction === 'column' && styles.actionsColumn(), IE11FallbackClasses)
|
|
34
|
+
}, children));
|
|
35
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MiniModalFooter.tsx"],"names":["React","useContext","Modal","forwardRefAndName","ThemeContext","isIE11","cx","styles","MiniModalDataTids","MiniModalFooter","ref","direction","children","rest","theme","childrenCount","Children","count","_direction","IE11FallbackClasses","actionsRowIE11Fallback","actionsColumnIE11Fallback","actions","actionsRow","actionsColumn"],"mappings":"8IAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,KAAT,QAAwC,UAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,iBAAT,QAAkC,aAAlC;;;;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAA2CO,GAA3C,EAAmD,2BAAhDC,SAAgD,CAAhDA,SAAgD,+BAApC,KAAoC,kBAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AACjD,MAAMC,KAAK,GAAGb,UAAU,CAACG,YAAD,CAAxB;;AAEA,MAAMW,aAAa,GAAGf,KAAK,CAACgB,QAAN,CAAeC,KAAf,CAAqBL,QAArB,CAAtB;AACA,MAAMM,UAAU,GAAGH,aAAa,GAAG,CAAhB,IAAqBA,aAAa,KAAK,CAAvC,GAA2C,QAA3C,GAAsDJ,SAAzE;;AAEA;AACA,MAAMQ,mBAAmB;AACvBd,EAAAA,MAAM;AACNC,EAAAA,EAAE;AACAY,EAAAA,UAAU,KAAK,KAAf,IAAwBX,MAAM,CAACa,sBAAP,CAA8BN,KAA9B,CADxB;AAEAI,EAAAA,UAAU,KAAK,QAAf,IAA2BX,MAAM,CAACc,yBAAP,CAAiCP,KAAjC,CAF3B,CAFJ;;;AAOA;AACE,wBAAC,KAAD,CAAO,MAAP,EAAkBD,IAAlB;AACE;AACE,MAAA,GAAG,EAAEH,GADP;AAEE,kBAAUF,iBAAiB,CAACc,OAF9B;AAGE,MAAA,SAAS,EAAEhB,EAAE;AACXC,MAAAA,MAAM,CAACe,OAAP,CAAeR,KAAf,CADW;AAEXI,MAAAA,UAAU,KAAK,KAAf,IAAwBX,MAAM,CAACgB,UAAP,EAFb;AAGXL,MAAAA,UAAU,KAAK,QAAf,IAA2BX,MAAM,CAACiB,aAAP,EAHhB;AAIXL,MAAAA,mBAJW,CAHf;;;AAUGP,IAAAA,QAVH,CADF,CADF;;;;AAgBD,CAhC6C,CAAzC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Modal, ModalFooterProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isIE11 } from '../../lib/client';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n /**\n * Направление позиционирования кнопок.\n * `row` работает только для 2 элементов,\n * в других случаях автоматически включиться `column`.\n *\n * @default row\n */\n direction?: 'row' | 'column';\n}\n\n/**\n * Обёртка над Modal.Footer\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n 'MiniModalFooter',\n ({ direction = 'row', children, ...rest }, ref) => {\n const theme = useContext(ThemeContext);\n\n const childrenCount = React.Children.count(children);\n const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n // IE11 does not support CSS property `gap`\n const IE11FallbackClasses =\n isIE11 &&\n cx(\n _direction === 'row' && styles.actionsRowIE11Fallback(theme),\n _direction === 'column' && styles.actionsColumnIE11Fallback(theme),\n );\n\n return (\n <Modal.Footer {...rest}>\n <div\n ref={ref}\n data-tid={MiniModalDataTids.actions}\n className={cx(\n styles.actions(theme),\n _direction === 'row' && styles.actionsRow(),\n _direction === 'column' && styles.actionsColumn(),\n IE11FallbackClasses,\n )}\n >\n {children}\n </div>\n </Modal.Footer>\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ModalFooterProps } from '../Modal';
|
|
2
|
+
interface MiniModalFooterProps extends ModalFooterProps {
|
|
3
|
+
/**
|
|
4
|
+
* Направление позиционирования кнопок.
|
|
5
|
+
* `row` работает только для 2 элементов,
|
|
6
|
+
* в других случаях автоматически включиться `column`.
|
|
7
|
+
*
|
|
8
|
+
* @default row
|
|
9
|
+
*/
|
|
10
|
+
direction?: 'row' | 'column';
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Обёртка над Modal.Footer
|
|
14
|
+
*
|
|
15
|
+
* @visibleName MiniModal.Footer
|
|
16
|
+
*/
|
|
17
|
+
export declare const MiniModalFooter: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, MiniModalFooterProps> & Record<never, never>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
var _excluded = ["icon", "children"];
|
|
3
|
+
import React, { useContext } from 'react';
|
|
4
|
+
import { Modal } from "../../Modal";
|
|
5
|
+
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
|
|
6
|
+
import { InfoCircleIcon64Regular } from "../../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular";
|
|
7
|
+
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
8
|
+
import { cx } from "../../../lib/theming/Emotion";
|
|
9
|
+
import { styles } from "../MiniModal.styles";
|
|
10
|
+
import { MiniModalDataTids } from "../MiniModal";
|
|
11
|
+
/**
|
|
12
|
+
* Обёртка над Modal.Header
|
|
13
|
+
*
|
|
14
|
+
* @visibleName MiniModal.Header
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export var MiniModalHeader = forwardRefAndName('MiniModalHeader', function (_ref, ref) {
|
|
18
|
+
var _ref$icon = _ref.icon,
|
|
19
|
+
icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(InfoCircleIcon64Regular, null) : _ref$icon,
|
|
20
|
+
children = _ref.children,
|
|
21
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
22
|
+
|
|
23
|
+
var theme = useContext(ThemeContext);
|
|
24
|
+
return /*#__PURE__*/React.createElement(Modal.Header, rest, /*#__PURE__*/React.createElement("div", {
|
|
25
|
+
ref: ref
|
|
26
|
+
}, icon && /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
"data-tid": MiniModalDataTids.icon,
|
|
28
|
+
className: styles.icon()
|
|
29
|
+
}, icon), children && /*#__PURE__*/React.createElement("div", {
|
|
30
|
+
"data-tid": MiniModalDataTids.title,
|
|
31
|
+
className: cx(styles.title(), icon && styles.titleWithIcon(theme))
|
|
32
|
+
}, children)));
|
|
33
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MiniModalHeader.tsx"],"names":["React","useContext","Modal","forwardRefAndName","InfoCircleIcon64Regular","ThemeContext","cx","styles","MiniModalDataTids","MiniModalHeader","ref","icon","children","rest","theme","title","titleWithIcon"],"mappings":"yIAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,KAAT,QAAwC,UAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,iBAAT,QAAkC,aAAlC;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAA4DO,GAA5D,EAAoE,sBAAjEC,IAAiE,CAAjEA,IAAiE,uCAA1D,oBAAC,uBAAD,OAA0D,aAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAClE,MAAMC,KAAK,GAAGb,UAAU,CAACI,YAAD,CAAxB;;AAEA;AACE,wBAAC,KAAD,CAAO,MAAP,EAAkBQ,IAAlB;AACE,iCAAK,GAAG,EAAEH,GAAV;AACGC,IAAAA,IAAI;AACH,iCAAK,YAAUH,iBAAiB,CAACG,IAAjC,EAAuC,SAAS,EAAEJ,MAAM,CAACI,IAAP,EAAlD;AACGA,IAAAA,IADH,CAFJ;;;AAMGC,IAAAA,QAAQ;AACP,iCAAK,YAAUJ,iBAAiB,CAACO,KAAjC,EAAwC,SAAS,EAAET,EAAE,CAACC,MAAM,CAACQ,KAAP,EAAD,EAAiBJ,IAAI,IAAIJ,MAAM,CAACS,aAAP,CAAqBF,KAArB,CAAzB,CAArD;AACGF,IAAAA,QADH,CAPJ,CADF,CADF;;;;;;AAgBD,CArB6C,CAAzC","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { Modal, ModalHeaderProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n /**\n * Пиктограмма в шапке компонента.\n *\n * @default InfoCircleIcon64Regular\n */\n icon?: ReactNode;\n}\n\n/**\n * Обёртка над Modal.Header\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n 'MiniModalHeader',\n ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\n const theme = useContext(ThemeContext);\n\n return (\n <Modal.Header {...rest}>\n <div ref={ref}>\n {icon && (\n <div data-tid={MiniModalDataTids.icon} className={styles.icon()}>\n {icon}\n </div>\n )}\n {children && (\n <div data-tid={MiniModalDataTids.title} className={cx(styles.title(), icon && styles.titleWithIcon(theme))}>\n {children}\n </div>\n )}\n </div>\n </Modal.Header>\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ModalHeaderProps } from '../Modal';
|
|
3
|
+
interface MiniModalHeaderProps extends ModalHeaderProps {
|
|
4
|
+
/**
|
|
5
|
+
* Пиктограмма в шапке компонента.
|
|
6
|
+
*
|
|
7
|
+
* @default InfoCircleIcon64Regular
|
|
8
|
+
*/
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Обёртка над Modal.Header
|
|
13
|
+
*
|
|
14
|
+
* @visibleName MiniModal.Header
|
|
15
|
+
*/
|
|
16
|
+
export declare const MiniModalHeader: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, MiniModalHeaderProps> & Record<never, never>;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
var _excluded = ["children"];
|
|
4
|
+
import React, { useContext } from 'react';
|
|
5
|
+
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
|
|
6
|
+
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
7
|
+
import { cx } from "../../../lib/theming/Emotion";
|
|
8
|
+
import { isIE11 } from "../../../lib/client";
|
|
9
|
+
import { styles } from "../MiniModal.styles";
|
|
10
|
+
import { MiniModalDataTids } from "../MiniModal";
|
|
11
|
+
/**
|
|
12
|
+
* Отступ между кнопками
|
|
13
|
+
*
|
|
14
|
+
* @visibleName MiniModal.Indent
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export var MiniModalIndent = forwardRefAndName('MiniModalIndent', function (_ref, ref) {
|
|
18
|
+
var children = _ref.children,
|
|
19
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
20
|
+
|
|
21
|
+
var theme = useContext(ThemeContext);
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
23
|
+
"data-tid": MiniModalDataTids.indent,
|
|
24
|
+
ref: ref,
|
|
25
|
+
className: cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))
|
|
26
|
+
}, rest));
|
|
27
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["MiniModalIndent.tsx"],"names":["React","useContext","forwardRefAndName","ThemeContext","cx","isIE11","styles","MiniModalDataTids","MiniModalIndent","ref","children","rest","theme","indent","actionsIndent","actionsIndentIE11Fallback"],"mappings":"2LAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,MAAT,QAAuB,kBAAvB;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,iBAAT,QAAkC,aAAlC;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAAwBO,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B,MAAMC,KAAK,GAAGX,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,kBAAUI,iBAAiB,CAACM,MAD9B;AAEE,MAAA,GAAG,EAAEJ,GAFP;AAGE,MAAA,SAAS,EAAEL,EAAE,CAAC,CAACC,MAAD,GAAUC,MAAM,CAACQ,aAAP,CAAqBF,KAArB,CAAV,GAAwCN,MAAM,CAACS,yBAAP,CAAiCH,KAAjC,CAAzC,CAHf;AAIMD,IAAAA,IAJN,EADF;;;AAQD,CAb6C,CAAzC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\n/**\n * Отступ между кнопками\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, unknown>(\n 'MiniModalIndent',\n ({ children, ...rest }, ref) => {\n const theme = useContext(ThemeContext);\n\n return (\n <div\n data-tid={MiniModalDataTids.indent}\n ref={ref}\n className={cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))}\n {...rest}\n />\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
|
|
2
|
+
export var getMiniModalTheme = function getMiniModalTheme(contextTheme, propsTheme) {
|
|
3
|
+
if (propsTheme === void 0) {
|
|
4
|
+
propsTheme = {};
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
var theme = ThemeFactory.create(propsTheme, contextTheme);
|
|
8
|
+
return ThemeFactory.create({
|
|
9
|
+
modalBodyPaddingTop: theme.miniModalBodyPaddingTop,
|
|
10
|
+
modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,
|
|
11
|
+
modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,
|
|
12
|
+
modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,
|
|
13
|
+
modalFooterPaddingTop: theme.miniModalFooterPaddingTop,
|
|
14
|
+
modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,
|
|
15
|
+
mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,
|
|
16
|
+
mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,
|
|
17
|
+
mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,
|
|
18
|
+
mobileModalContainerHeight: theme.miniModalHeightMobile,
|
|
19
|
+
mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,
|
|
20
|
+
mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,
|
|
21
|
+
mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile
|
|
22
|
+
}, theme);
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["getMiniModalTheme.ts"],"names":["ThemeFactory","getMiniModalTheme","contextTheme","propsTheme","theme","create","modalBodyPaddingTop","miniModalBodyPaddingTop","modalBodyPaddingBottom","miniModalBodyPaddingBottom","modalHeaderPaddingTop","miniModalHeaderPaddingTop","modalHeaderPaddingBottom","miniModalHeaderPaddingBottom","modalFooterPaddingTop","miniModalFooterPaddingTop","modalFooterPaddingBottom","miniModalFooterPaddingBottom","mobileModalFooterPadding","miniModalFooterPaddingMobile","mobileModalHeaderPadding","miniModalHeaderPaddingMobile","mobileModalBodyPadding","miniModalBodyPaddingMobile","mobileModalContainerHeight","miniModalHeightMobile","mobileModalContainerMarginTop","miniModalMarginTopMobile","mobileModalContainerMarginRight","miniModalMarginRightMobile","mobileModalContainerMarginLeft","miniModalMarginLeftMobile"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,YAAD,EAAsBC,UAAtB,EAAmD,KAA7BA,UAA6B,cAA7BA,UAA6B,GAAP,EAAO;AAClF,MAAMC,KAAK,GAAGJ,YAAY,CAACK,MAAb,CAAoBF,UAApB,EAAgCD,YAAhC,CAAd;AACA,SAAOF,YAAY,CAACK,MAAb;AACL;AACEC,IAAAA,mBAAmB,EAAEF,KAAK,CAACG,uBAD7B;AAEEC,IAAAA,sBAAsB,EAAEJ,KAAK,CAACK,0BAFhC;AAGEC,IAAAA,qBAAqB,EAAEN,KAAK,CAACO,yBAH/B;AAIEC,IAAAA,wBAAwB,EAAER,KAAK,CAACS,4BAJlC;AAKEC,IAAAA,qBAAqB,EAAEV,KAAK,CAACW,yBAL/B;AAMEC,IAAAA,wBAAwB,EAAEZ,KAAK,CAACa,4BANlC;AAOEC,IAAAA,wBAAwB,EAAEd,KAAK,CAACe,4BAPlC;AAQEC,IAAAA,wBAAwB,EAAEhB,KAAK,CAACiB,4BARlC;AASEC,IAAAA,sBAAsB,EAAElB,KAAK,CAACmB,0BAThC;AAUEC,IAAAA,0BAA0B,EAAEpB,KAAK,CAACqB,qBAVpC;AAWEC,IAAAA,6BAA6B,EAAEtB,KAAK,CAACuB,wBAXvC;AAYEC,IAAAA,+BAA+B,EAAExB,KAAK,CAACyB,0BAZzC;AAaEC,IAAAA,8BAA8B,EAAE1B,KAAK,CAAC2B,yBAbxC,EADK;;AAgBL3B,EAAAA,KAhBK,CAAP;;AAkBD,CApBM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\n\nexport const getMiniModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}) => {\n const theme = ThemeFactory.create(propsTheme, contextTheme);\n return ThemeFactory.create(\n {\n modalBodyPaddingTop: theme.miniModalBodyPaddingTop,\n modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,\n modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,\n modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,\n modalFooterPaddingTop: theme.miniModalFooterPaddingTop,\n modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,\n mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,\n mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,\n mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,\n mobileModalContainerHeight: theme.miniModalHeightMobile,\n mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,\n mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,\n mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile,\n },\n theme,\n );\n};\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Theme, ThemeIn } from '../../lib/theming/Theme';
|
|
2
|
+
export declare const getMiniModalTheme: (contextTheme: Theme, propsTheme?: ThemeIn) => Readonly<Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> & {
|
|
3
|
+
modalBodyPaddingTop: string;
|
|
4
|
+
modalBodyPaddingBottom: string;
|
|
5
|
+
modalHeaderPaddingTop: string;
|
|
6
|
+
modalHeaderPaddingBottom: string;
|
|
7
|
+
modalFooterPaddingTop: string;
|
|
8
|
+
modalFooterPaddingBottom: string;
|
|
9
|
+
mobileModalFooterPadding: string;
|
|
10
|
+
mobileModalHeaderPadding: string;
|
|
11
|
+
mobileModalBodyPadding: string;
|
|
12
|
+
mobileModalContainerHeight: string;
|
|
13
|
+
mobileModalContainerMarginTop: string;
|
|
14
|
+
mobileModalContainerMarginRight: string;
|
|
15
|
+
mobileModalContainerMarginLeft: string;
|
|
16
|
+
}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,iBAAd;AACA,cAAc,mBAAd;AACA,cAAc,mBAAd","sourcesContent":["export * from './MiniModal';\nexport * from './MiniModalHeader';\nexport * from './MiniModalBody';\nexport * from './MiniModalFooter';\nexport * from './MiniModalIndent';\n"]}
|