@chayns-components/core 5.0.0-beta.1 → 5.0.0-beta.104
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 +38 -5
- package/lib/components/accordion/Accordion.d.ts +85 -0
- package/lib/components/accordion/Accordion.js +120 -0
- package/lib/components/accordion/Accordion.js.map +1 -0
- package/lib/components/accordion/Accordion.styles.d.ts +7 -0
- package/lib/components/accordion/Accordion.styles.js +81 -0
- package/lib/components/accordion/Accordion.styles.js.map +1 -0
- package/lib/components/accordion/accordion-body/AccordionBody.d.ts +14 -0
- package/lib/components/accordion/accordion-body/AccordionBody.js +44 -0
- package/lib/components/accordion/accordion-body/AccordionBody.js.map +1 -0
- package/lib/components/accordion/accordion-body/AccordionBody.styles.d.ts +4 -0
- package/lib/components/accordion/accordion-body/AccordionBody.styles.js +25 -0
- package/lib/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -0
- package/lib/components/accordion/accordion-content/AccordionContent.d.ts +17 -0
- package/lib/components/accordion/accordion-content/AccordionContent.js +32 -0
- package/lib/components/accordion/accordion-content/AccordionContent.js.map +1 -0
- package/lib/components/accordion/accordion-content/AccordionContent.styles.d.ts +6 -0
- package/lib/components/accordion/accordion-content/AccordionContent.styles.js +35 -0
- package/lib/components/accordion/accordion-content/AccordionContent.styles.js.map +1 -0
- package/lib/components/accordion/accordion-group/AccordionGroup.d.ts +26 -0
- package/lib/components/accordion/accordion-group/AccordionGroup.js +57 -0
- package/lib/components/accordion/accordion-group/AccordionGroup.js.map +1 -0
- package/lib/components/accordion/accordion-head/AccordionHead.d.ts +17 -0
- package/lib/components/accordion/accordion-head/AccordionHead.js +129 -0
- package/lib/components/accordion/accordion-head/AccordionHead.js.map +1 -0
- package/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts +19 -0
- package/lib/components/accordion/accordion-head/AccordionHead.styles.js +158 -0
- package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts +9 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.js +21 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.js.map +1 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.styles.d.ts +1 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js +13 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js.map +1 -0
- package/lib/components/accordion/utils.d.ts +11 -0
- package/lib/components/accordion/utils.js +36 -0
- package/lib/components/accordion/utils.js.map +1 -0
- package/lib/components/badge/Badge.d.ts +21 -0
- package/lib/components/badge/Badge.js +28 -0
- package/lib/components/badge/Badge.js.map +1 -0
- package/lib/components/badge/Badge.styles.d.ts +4 -0
- package/lib/components/badge/Badge.styles.js +32 -0
- package/lib/components/badge/Badge.styles.js.map +1 -0
- package/lib/components/button/Button.d.ts +33 -0
- package/lib/components/button/Button.js +43 -0
- package/lib/components/button/Button.js.map +1 -0
- package/lib/components/button/Button.styles.d.ts +7 -0
- package/lib/components/button/Button.styles.js +60 -0
- package/lib/components/button/Button.styles.js.map +1 -0
- package/lib/components/checkbox/Checkbox.d.ts +25 -0
- package/lib/components/checkbox/Checkbox.js +44 -0
- package/lib/components/checkbox/Checkbox.js.map +1 -0
- package/lib/components/checkbox/Checkbox.styles.d.ts +6 -0
- package/lib/components/checkbox/Checkbox.styles.js +131 -0
- package/lib/components/checkbox/Checkbox.styles.js.map +1 -0
- package/lib/components/color-scheme-provider/ColorSchemeProvider.d.ts +44 -0
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js +75 -0
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -0
- package/lib/components/color-scheme-provider/font.d.ts +6 -0
- package/lib/components/color-scheme-provider/font.js +59 -0
- package/lib/components/color-scheme-provider/font.js.map +1 -0
- package/lib/components/context-menu/ContextMenu.d.ts +51 -0
- package/lib/components/context-menu/ContextMenu.js +154 -0
- package/lib/components/context-menu/ContextMenu.js.map +1 -0
- package/lib/components/context-menu/ContextMenu.styles.d.ts +1 -0
- package/lib/components/context-menu/ContextMenu.styles.js +13 -0
- package/lib/components/context-menu/ContextMenu.styles.js.map +1 -0
- package/lib/components/context-menu/constants/alignment.d.ts +8 -0
- package/lib/components/context-menu/constants/alignment.js +17 -0
- package/lib/components/context-menu/constants/alignment.js.map +1 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.d.ts +10 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js +78 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +11 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js +117 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -0
- package/lib/components/grid-image/GridImage.d.ts +19 -0
- package/lib/components/grid-image/GridImage.js +46 -0
- package/lib/components/grid-image/GridImage.js.map +1 -0
- package/lib/components/grid-image/GridImage.styles.d.ts +21 -0
- package/lib/components/grid-image/GridImage.styles.js +105 -0
- package/lib/components/grid-image/GridImage.styles.js.map +1 -0
- package/lib/components/icon/Icon.d.ts +41 -0
- package/lib/components/icon/Icon.js +74 -0
- package/lib/components/icon/Icon.js.map +1 -0
- package/lib/components/icon/Icon.styles.d.ts +15 -0
- package/lib/components/icon/Icon.styles.js +76 -0
- package/lib/components/icon/Icon.styles.js.map +1 -0
- package/lib/components/icon/utils.d.ts +1 -0
- package/lib/components/icon/utils.js +13 -0
- package/lib/components/icon/utils.js.map +1 -0
- package/lib/components/input/Input.d.ts +37 -0
- package/lib/components/input/Input.js +75 -0
- package/lib/components/input/Input.js.map +1 -0
- package/lib/components/input/Input.styles.d.ts +7 -0
- package/lib/components/input/Input.styles.js +71 -0
- package/lib/components/input/Input.styles.js.map +1 -0
- package/lib/components/list/List.d.ts +18 -0
- package/lib/components/list/List.js +54 -0
- package/lib/components/list/List.js.map +1 -0
- package/lib/components/list/list-item/ListItem.d.ts +67 -0
- package/lib/components/list/list-item/ListItem.js +90 -0
- package/lib/components/list/list-item/ListItem.js.map +1 -0
- package/lib/components/list/list-item/ListItem.styles.d.ts +6 -0
- package/lib/components/list/list-item/ListItem.styles.js +56 -0
- package/lib/components/list/list-item/ListItem.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.d.ts +3 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.js +36 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.js.map +1 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +1 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js +14 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.d.ts +3 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.js +21 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.js.map +1 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.d.ts +1 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js +19 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.d.ts +18 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.js +100 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +20 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js +110 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.d.ts +6 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js +23 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.d.ts +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js +32 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.d.ts +7 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +44 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts +10 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +52 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -0
- package/lib/hooks/uuid.d.ts +1 -0
- package/lib/hooks/uuid.js +14 -0
- package/lib/hooks/uuid.js.map +1 -0
- package/lib/index.d.ts +16 -0
- package/lib/index.js +112 -0
- package/lib/index.js.map +1 -0
- package/lib/types/chayns.d.ts +57 -0
- package/lib/types/chayns.js +14 -0
- package/lib/types/chayns.js.map +1 -0
- package/package.json +64 -57
package/README.md
CHANGED
|
@@ -1,11 +1,44 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>
|
|
3
|
+
<img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
|
|
4
|
+
</h1>
|
|
5
|
+
<p>A set of beautiful React components for developing your own applications with chayns.</p>
|
|
6
|
+
<div>
|
|
7
|
+
<img src="https://img.shields.io/npm/dm/@chayns-components/core.svg?style=for-the-badge" alt="" />
|
|
8
|
+
<img src="https://img.shields.io/npm/v/@chayns-components/core?style=for-the-badge" alt="" />
|
|
9
|
+
<img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
|
|
10
|
+
<img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
2
13
|
|
|
3
|
-
|
|
14
|
+
---
|
|
4
15
|
|
|
5
|
-
##
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
First you need to install the core part of the chayns-components.
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
# NPM
|
|
22
|
+
npm install @chayns-components/core
|
|
6
23
|
|
|
24
|
+
# Yarn
|
|
25
|
+
yarn add @chayns-components/core
|
|
7
26
|
```
|
|
8
|
-
const core = require('core');
|
|
9
27
|
|
|
10
|
-
|
|
28
|
+
> **Information:** Since the components have now been implemented with the styled-components
|
|
29
|
+
> library, the styles are delivered directly with the components. There is no need to load an extra
|
|
30
|
+
> stylesheet anymore.
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
You can use the components in your project as in the following example.
|
|
35
|
+
|
|
36
|
+
```typescript jsx
|
|
37
|
+
import { Button } from '@chayns-components/core';
|
|
38
|
+
|
|
39
|
+
const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
|
|
40
|
+
// Your code
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
<Button onClick={handleButtonClick}>Click me!</Button>;
|
|
11
44
|
```
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React, { ChangeEventHandler, FC, ReactNode, UIEvent } from 'react';
|
|
2
|
+
export declare const AccordionContext: React.Context<{
|
|
3
|
+
isWrapped: boolean;
|
|
4
|
+
}>;
|
|
5
|
+
export type AccordionProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Maximum height of the accordion body element. This automatically makes the content of the
|
|
8
|
+
* body element scrollable.
|
|
9
|
+
*/
|
|
10
|
+
bodyMaxHeight?: number;
|
|
11
|
+
/**
|
|
12
|
+
* The content of the accordion body
|
|
13
|
+
*/
|
|
14
|
+
children: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* The icon that is displayed in front of the title
|
|
17
|
+
*/
|
|
18
|
+
icon?: string;
|
|
19
|
+
/**
|
|
20
|
+
* This can be used to automatically expand the Accordion during the first render.
|
|
21
|
+
*/
|
|
22
|
+
isDefaultOpen?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* This will disable the Accordion so that it cannot be opened and will gray out the title.
|
|
25
|
+
*/
|
|
26
|
+
isDisabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* This can be used so that the Accordion cannot be opened or closed.
|
|
29
|
+
* In addition, in this case the icon is exchanged to mark the Accordions.
|
|
30
|
+
*/
|
|
31
|
+
isFixed?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* This will gray out the title of the Accordion to indicate hidden content, for example.
|
|
34
|
+
*/
|
|
35
|
+
isTitleGreyed?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* This value must be set for nested Accordions. This adjusts the style of
|
|
38
|
+
* the head and the padding of the content.
|
|
39
|
+
*/
|
|
40
|
+
isWrapped?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Function that is executed when the accordion body will be scrolled
|
|
43
|
+
*/
|
|
44
|
+
onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;
|
|
45
|
+
/**
|
|
46
|
+
* Function that is executed when the accordion will be closed.
|
|
47
|
+
*/
|
|
48
|
+
onClose?: VoidFunction;
|
|
49
|
+
/**
|
|
50
|
+
* Function that is executed when the accordion will be opened.
|
|
51
|
+
*/
|
|
52
|
+
onOpen?: VoidFunction;
|
|
53
|
+
/**
|
|
54
|
+
* Function that is executed when the text of the search in the accordion
|
|
55
|
+
* head changes. When this function is given, the search field is displayed
|
|
56
|
+
* in the Accordion Head.
|
|
57
|
+
*/
|
|
58
|
+
onSearchChange?: ChangeEventHandler<HTMLInputElement>;
|
|
59
|
+
/**
|
|
60
|
+
* Content to be displayed on the right side in the head of the Accordion
|
|
61
|
+
*/
|
|
62
|
+
rightElement?: ReactNode;
|
|
63
|
+
/**
|
|
64
|
+
* Icon to be displayed on the right side in the search input
|
|
65
|
+
*/
|
|
66
|
+
searchIcon?: string[];
|
|
67
|
+
/**
|
|
68
|
+
* The placeholder to be used for the search
|
|
69
|
+
*/
|
|
70
|
+
searchPlaceholder?: string;
|
|
71
|
+
/**
|
|
72
|
+
* This will hide the background color of the accordion
|
|
73
|
+
*/
|
|
74
|
+
shouldHideBackground?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Title of the Accordion displayed in the head
|
|
77
|
+
*/
|
|
78
|
+
title: string;
|
|
79
|
+
/**
|
|
80
|
+
* Additional elements to be displayed in the header next to the title.
|
|
81
|
+
*/
|
|
82
|
+
titleElement?: ReactNode;
|
|
83
|
+
};
|
|
84
|
+
declare const Accordion: FC<AccordionProps>;
|
|
85
|
+
export default Accordion;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.AccordionContext = void 0;
|
|
7
|
+
var _framerMotion = require("framer-motion");
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _uuid = require("../../hooks/uuid");
|
|
10
|
+
var _AccordionBody = _interopRequireDefault(require("./accordion-body/AccordionBody"));
|
|
11
|
+
var _AccordionGroup = require("./accordion-group/AccordionGroup");
|
|
12
|
+
var _AccordionHead = _interopRequireDefault(require("./accordion-head/AccordionHead"));
|
|
13
|
+
var _Accordion = require("./Accordion.styles");
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
const AccordionContext = /*#__PURE__*/_react.default.createContext({
|
|
18
|
+
isWrapped: false
|
|
19
|
+
});
|
|
20
|
+
exports.AccordionContext = AccordionContext;
|
|
21
|
+
AccordionContext.displayName = 'AccordionContext';
|
|
22
|
+
const Accordion = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
bodyMaxHeight,
|
|
25
|
+
children,
|
|
26
|
+
icon,
|
|
27
|
+
isDefaultOpen = false,
|
|
28
|
+
isDisabled = false,
|
|
29
|
+
isFixed = false,
|
|
30
|
+
isTitleGreyed = false,
|
|
31
|
+
isWrapped = false,
|
|
32
|
+
onBodyScroll,
|
|
33
|
+
onClose,
|
|
34
|
+
onOpen,
|
|
35
|
+
onSearchChange,
|
|
36
|
+
rightElement,
|
|
37
|
+
searchIcon,
|
|
38
|
+
searchPlaceholder,
|
|
39
|
+
shouldHideBackground = false,
|
|
40
|
+
title,
|
|
41
|
+
titleElement
|
|
42
|
+
} = _ref;
|
|
43
|
+
const {
|
|
44
|
+
openAccordionUuid,
|
|
45
|
+
updateOpenAccordionUuid
|
|
46
|
+
} = (0, _react.useContext)(_AccordionGroup.AccordionGroupContext);
|
|
47
|
+
const {
|
|
48
|
+
isWrapped: isParentWrapped
|
|
49
|
+
} = (0, _react.useContext)(AccordionContext);
|
|
50
|
+
const [isAccordionOpen, setIsAccordionOpen] = (0, _react.useState)(isDefaultOpen);
|
|
51
|
+
const uuid = (0, _uuid.useUuid)();
|
|
52
|
+
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
53
|
+
const isInGroup = typeof updateOpenAccordionUuid === 'function';
|
|
54
|
+
const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
|
|
55
|
+
const handleHeadClick = (0, _react.useCallback)(() => {
|
|
56
|
+
if (isDisabled) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (typeof updateOpenAccordionUuid === 'function') {
|
|
60
|
+
updateOpenAccordionUuid(uuid);
|
|
61
|
+
}
|
|
62
|
+
setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
|
|
63
|
+
}, [isDisabled, updateOpenAccordionUuid, uuid]);
|
|
64
|
+
(0, _react.useEffect)(() => {
|
|
65
|
+
if (isInitialRenderRef.current) {
|
|
66
|
+
isInitialRenderRef.current = false;
|
|
67
|
+
} else if (isOpen) {
|
|
68
|
+
if (typeof onOpen === 'function') {
|
|
69
|
+
onOpen();
|
|
70
|
+
}
|
|
71
|
+
} else if (typeof onClose === 'function') {
|
|
72
|
+
onClose();
|
|
73
|
+
}
|
|
74
|
+
}, [isOpen, onClose, onOpen]);
|
|
75
|
+
(0, _react.useEffect)(() => {
|
|
76
|
+
if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {
|
|
77
|
+
updateOpenAccordionUuid(uuid, {
|
|
78
|
+
shouldOnlyOpen: true
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
}, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
|
|
82
|
+
const accordionContextProviderValue = (0, _react.useMemo)(() => ({
|
|
83
|
+
isWrapped
|
|
84
|
+
}), [isWrapped]);
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement(_Accordion.StyledAccordion, {
|
|
86
|
+
className: "beta-chayns-accordion",
|
|
87
|
+
isOpen: isOpen,
|
|
88
|
+
isParentWrapped: isParentWrapped,
|
|
89
|
+
isWrapped: isWrapped,
|
|
90
|
+
shouldHideBackground: shouldHideBackground
|
|
91
|
+
}, /*#__PURE__*/_react.default.createElement(AccordionContext.Provider, {
|
|
92
|
+
value: accordionContextProviderValue
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
|
|
94
|
+
transition: {
|
|
95
|
+
type: 'tween'
|
|
96
|
+
}
|
|
97
|
+
}, /*#__PURE__*/_react.default.createElement(_AccordionHead.default, {
|
|
98
|
+
icon: icon,
|
|
99
|
+
isOpen: isOpen,
|
|
100
|
+
isFixed: isFixed,
|
|
101
|
+
isTitleGreyed: isTitleGreyed || isDisabled,
|
|
102
|
+
isWrapped: isWrapped,
|
|
103
|
+
onClick: handleHeadClick,
|
|
104
|
+
onSearchChange: onSearchChange,
|
|
105
|
+
rightElement: rightElement,
|
|
106
|
+
searchIcon: searchIcon,
|
|
107
|
+
searchPlaceholder: searchPlaceholder,
|
|
108
|
+
title: title,
|
|
109
|
+
titleElement: titleElement
|
|
110
|
+
}), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
|
|
111
|
+
initial: false
|
|
112
|
+
}, isOpen && /*#__PURE__*/_react.default.createElement(_AccordionBody.default, {
|
|
113
|
+
maxHeight: bodyMaxHeight,
|
|
114
|
+
onScroll: onBodyScroll
|
|
115
|
+
}, children)))));
|
|
116
|
+
};
|
|
117
|
+
Accordion.displayName = 'Accordion';
|
|
118
|
+
var _default = Accordion;
|
|
119
|
+
exports.default = _default;
|
|
120
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AccordionContext","React","createContext","isWrapped","exports","displayName","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldHideBackground","title","titleElement","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","handleHeadClick","useCallback","currentIsAccordionOpen","useEffect","current","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","_default"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nAccordionContext.displayName = 'AccordionContext';\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * This value must be set for nested Accordions. This adjusts the style of\n * the head and the padding of the content.\n */\n isWrapped?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * Icon to be displayed on the right side in the search input\n */\n searchIcon?: string[];\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isTitleGreyed = false,\n isWrapped = false,\n onBodyScroll,\n onClose,\n onOpen,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n shouldHideBackground = false,\n title,\n titleElement,\n}) => {\n const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\n\n return (\n <StyledAccordion\n className=\"beta-chayns-accordion\"\n isOpen={isOpen}\n isParentWrapped={isParentWrapped}\n isWrapped={isWrapped}\n shouldHideBackground={shouldHideBackground}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isOpen && (\n <AccordionBody maxHeight={bodyMaxHeight} onScroll={onBodyScroll}>\n {children}\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { AccordionProps } from './Accordion';
|
|
2
|
+
export declare const StyledAccordion: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
isParentWrapped: boolean;
|
|
5
|
+
} & {
|
|
6
|
+
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
7
|
+
} & Pick<AccordionProps, "isWrapped" | "shouldHideBackground">, never>;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledAccordion = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
9
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
10
|
+
const StyledAccordion = _styledComponents.default.div`
|
|
11
|
+
${_ref => {
|
|
12
|
+
let {
|
|
13
|
+
isOpen,
|
|
14
|
+
isWrapped,
|
|
15
|
+
shouldHideBackground
|
|
16
|
+
} = _ref;
|
|
17
|
+
return isOpen && !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
|
|
18
|
+
background-color: rgba(
|
|
19
|
+
${_ref2 => {
|
|
20
|
+
let {
|
|
21
|
+
theme
|
|
22
|
+
} = _ref2;
|
|
23
|
+
return theme['100-rgb'];
|
|
24
|
+
}},
|
|
25
|
+
0.85
|
|
26
|
+
);
|
|
27
|
+
border-radius: 3px; // ToDo: Add correct border-radius here
|
|
28
|
+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here
|
|
29
|
+
`;
|
|
30
|
+
}}
|
|
31
|
+
|
|
32
|
+
margin-bottom: ${_ref3 => {
|
|
33
|
+
let {
|
|
34
|
+
isOpen,
|
|
35
|
+
isWrapped
|
|
36
|
+
} = _ref3;
|
|
37
|
+
return isOpen && !isWrapped ? '30px' : '0px';
|
|
38
|
+
}};
|
|
39
|
+
transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,
|
|
40
|
+
margin-bottom 0.3s ease;
|
|
41
|
+
|
|
42
|
+
${_ref4 => {
|
|
43
|
+
let {
|
|
44
|
+
isParentWrapped
|
|
45
|
+
} = _ref4;
|
|
46
|
+
return isParentWrapped && (0, _styledComponents.css)`
|
|
47
|
+
padding-left: 17px;
|
|
48
|
+
`;
|
|
49
|
+
}}
|
|
50
|
+
|
|
51
|
+
${_ref5 => {
|
|
52
|
+
let {
|
|
53
|
+
isWrapped
|
|
54
|
+
} = _ref5;
|
|
55
|
+
return !isWrapped && (0, _styledComponents.css)`
|
|
56
|
+
margin-top: 10px;
|
|
57
|
+
`;
|
|
58
|
+
}}
|
|
59
|
+
|
|
60
|
+
${_ref6 => {
|
|
61
|
+
let {
|
|
62
|
+
isWrapped,
|
|
63
|
+
shouldHideBackground
|
|
64
|
+
} = _ref6;
|
|
65
|
+
return !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
|
|
66
|
+
&:hover {
|
|
67
|
+
background-color: rgba(
|
|
68
|
+
${_ref7 => {
|
|
69
|
+
let {
|
|
70
|
+
theme
|
|
71
|
+
} = _ref7;
|
|
72
|
+
return theme['100-rgb'];
|
|
73
|
+
}},
|
|
74
|
+
0.85
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
`;
|
|
78
|
+
}}
|
|
79
|
+
`;
|
|
80
|
+
exports.StyledAccordion = StyledAccordion;
|
|
81
|
+
//# sourceMappingURL=Accordion.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAccordion","styled","div","_ref","isOpen","isWrapped","shouldHideBackground","css","_ref2","theme","_ref3","_ref4","isParentWrapped","_ref5","_ref6","_ref7","exports"],"sources":["../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionProps } from './Accordion';\n\ntype StyledMotionAccordionProps = WithTheme<{\n isOpen: boolean;\n isParentWrapped: boolean;\n}> &\n Pick<AccordionProps, 'isWrapped' | 'shouldHideBackground'>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n ${({ isOpen, isWrapped, shouldHideBackground }) =>\n isOpen &&\n !isWrapped &&\n !shouldHideBackground &&\n css`\n background-color: rgba(\n ${({ theme }: StyledMotionAccordionProps) => theme['100-rgb']},\n 0.85\n );\n border-radius: 3px; // ToDo: Add correct border-radius here\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n `}\n\n margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n\n ${({ isParentWrapped }) =>\n isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n\n ${({ isWrapped }) =>\n !isWrapped &&\n css`\n margin-top: 10px;\n `}\n\n ${({ isWrapped, shouldHideBackground }) =>\n !isWrapped &&\n !shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(\n ${({ theme }: StyledMotionAccordionProps) => theme['100-rgb']},\n 0.85\n );\n }\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAUzC,MAAMW,eAAe,GAAGC,yBAAM,CAACC,GAAgC;AACtE,MAAMC,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC;EAAqB,CAAC,GAAAH,IAAA;EAAA,OAC1CC,MAAM,IACN,CAACC,SAAS,IACV,CAACC,oBAAoB,IACrB,IAAAC,qBAAG,CAAC;AACZ;AACA,kBAAkBC,KAAA;IAAA,IAAC;MAAEC;IAAkC,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;EAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEN,MAAM;IAAEC;EAAU,CAAC,GAAAK,KAAA;EAAA,OAAMN,MAAM,IAAI,CAACC,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,CAAE;AACxF;AACA;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC;EAAgB,CAAC,GAAAD,KAAA;EAAA,OAClBC,eAAe,IACf,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMM,KAAA;EAAA,IAAC;IAAER;EAAU,CAAC,GAAAQ,KAAA;EAAA,OACZ,CAACR,SAAS,IACV,IAAAE,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMO,KAAA;EAAA,IAAC;IAAET,SAAS;IAAEC;EAAqB,CAAC,GAAAQ,KAAA;EAAA,OAClC,CAACT,SAAS,IACV,CAACC,oBAAoB,IACrB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,sBAAsBQ,KAAA;IAAA,IAAC;MAAEN;IAAkC,CAAC,GAAAM,KAAA;IAAA,OAAKN,KAAK,CAAC,SAAS,CAAC;EAAA,CAAC;AAClF;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACO,OAAA,CAAAhB,eAAA,GAAAA,eAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FC, UIEvent } from 'react';
|
|
2
|
+
import type { AccordionProps } from '../Accordion';
|
|
3
|
+
export type AccordionBodyProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Maximum height of the element. This automatically makes the content of the element scrollable.
|
|
6
|
+
*/
|
|
7
|
+
maxHeight: AccordionProps['bodyMaxHeight'];
|
|
8
|
+
/**
|
|
9
|
+
* Function that is executed when the element will be scrolled
|
|
10
|
+
*/
|
|
11
|
+
onScroll?: (event: UIEvent<HTMLDivElement>) => void;
|
|
12
|
+
};
|
|
13
|
+
declare const AccordionBody: FC<AccordionBodyProps>;
|
|
14
|
+
export default AccordionBody;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _AccordionGroup = require("../accordion-group/AccordionGroup");
|
|
9
|
+
var _AccordionBody = require("./AccordionBody.styles");
|
|
10
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
|
+
const AccordionBody = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
children,
|
|
15
|
+
maxHeight,
|
|
16
|
+
onScroll
|
|
17
|
+
} = _ref;
|
|
18
|
+
const AccordionGroupContextProviderValue = (0, _react.useMemo)(() => ({
|
|
19
|
+
openAccordionUuid: undefined
|
|
20
|
+
}), []);
|
|
21
|
+
return /*#__PURE__*/_react.default.createElement(_AccordionBody.StyledMotionAccordionBody, {
|
|
22
|
+
animate: {
|
|
23
|
+
height: 'auto',
|
|
24
|
+
opacity: 1
|
|
25
|
+
},
|
|
26
|
+
className: "beta-chayns-accordion-body",
|
|
27
|
+
exit: {
|
|
28
|
+
height: 0,
|
|
29
|
+
opacity: 0
|
|
30
|
+
},
|
|
31
|
+
initial: {
|
|
32
|
+
height: 0,
|
|
33
|
+
opacity: 0
|
|
34
|
+
},
|
|
35
|
+
maxHeight: maxHeight,
|
|
36
|
+
onScroll: onScroll
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement(_AccordionGroup.AccordionGroupContext.Provider, {
|
|
38
|
+
value: AccordionGroupContextProviderValue
|
|
39
|
+
}, children));
|
|
40
|
+
};
|
|
41
|
+
AccordionBody.displayName = 'AccordionBody';
|
|
42
|
+
var _default = AccordionBody;
|
|
43
|
+
exports.default = _default;
|
|
44
|
+
//# sourceMappingURL=AccordionBody.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionBody.js","names":["_react","_interopRequireWildcard","require","_AccordionGroup","_AccordionBody","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AccordionBody","_ref","children","maxHeight","onScroll","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","animate","height","opacity","className","exit","initial","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import React, { FC, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({ children, maxHeight, onScroll }) => {\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n []\n );\n\n return (\n <StyledMotionAccordionBody\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-accordion-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n maxHeight={maxHeight}\n onScroll={onScroll}\n >\n <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n {children}\n </AccordionGroupContext.Provider>\n </StyledMotionAccordionBody>\n );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAAmE,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAL,wBAAAS,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAanE,MAAMW,aAAqC,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAC5E,MAAMI,kCAAkC,GAAG,IAAAC,cAAO,EAC9C,OAAO;IAAEC,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EAAE,CACL;EAED,oBACInC,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAAChC,cAAA,CAAAiC,yBAAyB;IACtBC,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCV,SAAS,EAAEA,SAAU;IACrBC,QAAQ,EAAEA;EAAS,gBAEnB/B,MAAA,CAAAY,OAAA,CAAAwB,aAAA,CAACjC,eAAA,CAAAyC,qBAAqB,CAACC,QAAQ;IAACC,KAAK,EAAEd;EAAmC,GACrEH,QAAQ,CACoB,CACT;AAEpC,CAAC;AAEDF,aAAa,CAACoB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAE7BrB,aAAa;AAAAsB,OAAA,CAAArC,OAAA,GAAAoC,QAAA"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { AccordionBodyProps } from './AccordionBody';
|
|
2
|
+
type StyledMotionAccordionBodyProps = Pick<AccordionBodyProps, 'maxHeight'>;
|
|
3
|
+
export declare const StyledMotionAccordionBody: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, StyledMotionAccordionBodyProps, never>;
|
|
4
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledMotionAccordionBody = void 0;
|
|
7
|
+
var _framerMotion = require("framer-motion");
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
|
+
const StyledMotionAccordionBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
|
|
14
|
+
${_ref => {
|
|
15
|
+
let {
|
|
16
|
+
maxHeight
|
|
17
|
+
} = _ref;
|
|
18
|
+
return typeof maxHeight === 'number' && (0, _styledComponents.css)`
|
|
19
|
+
max-height: ${maxHeight}px;
|
|
20
|
+
overflow-y: scroll;
|
|
21
|
+
`;
|
|
22
|
+
}}
|
|
23
|
+
`;
|
|
24
|
+
exports.StyledMotionAccordionBody = StyledMotionAccordionBody;
|
|
25
|
+
//# sourceMappingURL=AccordionBody.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionBody.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionAccordionBody","styled","motion","div","_ref","maxHeight","css","exports"],"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { AccordionBodyProps } from './AccordionBody';\n\ntype StyledMotionAccordionBodyProps = Pick<AccordionBodyProps, 'maxHeight'>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n overflow: hidden;\n\n ${({ maxHeight }) =>\n typeof maxHeight === 'number' &&\n css`\n max-height: ${maxHeight}px;\n overflow-y: scroll;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAF,wBAAAM,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAKzC,MAAMW,yBAAyB,GAAG,IAAAC,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAkC;AAC5F;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OACZ,OAAOC,SAAS,KAAK,QAAQ,IAC7B,IAAAC,qBAAG,CAAC;AACZ,0BAA0BD,SAAU;AACpC;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACE,OAAA,CAAAP,yBAAA,GAAAA,yBAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FC, ReactNode, UIEvent } from 'react';
|
|
2
|
+
export type AccordionContentProps = {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the accordion content element
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Maximum height of the element. This automatically makes the content of the element scrollable.
|
|
9
|
+
*/
|
|
10
|
+
maxHeight?: number;
|
|
11
|
+
/**
|
|
12
|
+
* Function that is executed when the element will be scrolled
|
|
13
|
+
*/
|
|
14
|
+
onScroll?: (event: UIEvent<HTMLDivElement>) => void;
|
|
15
|
+
};
|
|
16
|
+
declare const AccordionContent: FC<AccordionContentProps>;
|
|
17
|
+
export default AccordionContent;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Accordion = require("../Accordion");
|
|
9
|
+
var _AccordionContent = require("./AccordionContent.styles");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
const AccordionContent = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
children,
|
|
14
|
+
maxHeight,
|
|
15
|
+
onScroll
|
|
16
|
+
} = _ref;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionContext.Consumer, null, _ref2 => {
|
|
18
|
+
let {
|
|
19
|
+
isWrapped
|
|
20
|
+
} = _ref2;
|
|
21
|
+
return /*#__PURE__*/_react.default.createElement(_AccordionContent.StyledAccordionContent, {
|
|
22
|
+
className: "beta-chayns-accordion-content",
|
|
23
|
+
isWrapped: isWrapped,
|
|
24
|
+
maxHeight: maxHeight,
|
|
25
|
+
onScroll: onScroll
|
|
26
|
+
}, children);
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
AccordionContent.displayName = 'AccordionContent';
|
|
30
|
+
var _default = AccordionContent;
|
|
31
|
+
exports.default = _default;
|
|
32
|
+
//# sourceMappingURL=AccordionContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionContent.js","names":["_react","_interopRequireDefault","require","_Accordion","_AccordionContent","obj","__esModule","default","AccordionContent","_ref","children","maxHeight","onScroll","createElement","AccordionContext","Consumer","_ref2","isWrapped","StyledAccordionContent","className","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, UIEvent } from 'react';\nimport { AccordionContext } from '../Accordion';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n /**\n * The content of the accordion content element\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight?: number;\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({ children, maxHeight, onScroll }) => (\n <AccordionContext.Consumer>\n {({ isWrapped }) => (\n <StyledAccordionContent\n className=\"beta-chayns-accordion-content\"\n isWrapped={isWrapped}\n maxHeight={maxHeight}\n onScroll={onScroll}\n >\n {children}\n </StyledAccordionContent>\n )}\n </AccordionContext.Consumer>\n);\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAAmE,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAiBnE,MAAMG,gBAA2C,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAAA,oBAClFT,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACV,UAAA,CAAAW,gBAAgB,CAACC,QAAQ,QACrBC,KAAA;IAAA,IAAC;MAAEC;IAAU,CAAC,GAAAD,KAAA;IAAA,oBACXhB,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACT,iBAAA,CAAAc,sBAAsB;MACnBC,SAAS,EAAC,+BAA+B;MACzCF,SAAS,EAAEA,SAAU;MACrBN,SAAS,EAAEA,SAAU;MACrBC,QAAQ,EAAEA;IAAS,GAElBF,QAAQ,CACY;EAAA,CAC5B,CACuB;AAAA,CAC/B;AAEDF,gBAAgB,CAACY,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAEnCb,gBAAgB;AAAAc,OAAA,CAAAf,OAAA,GAAAc,QAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { AccordionContentProps } from './AccordionContent';
|
|
2
|
+
export declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
isWrapped: boolean;
|
|
4
|
+
} & {
|
|
5
|
+
theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
6
|
+
} & Pick<AccordionContentProps, "maxHeight">, never>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledAccordionContent = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
9
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
10
|
+
const StyledAccordionContent = _styledComponents.default.div`
|
|
11
|
+
color: ${_ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
return theme.text;
|
|
16
|
+
}};
|
|
17
|
+
padding: ${_ref2 => {
|
|
18
|
+
let {
|
|
19
|
+
isWrapped
|
|
20
|
+
} = _ref2;
|
|
21
|
+
return isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px';
|
|
22
|
+
}};
|
|
23
|
+
|
|
24
|
+
${_ref3 => {
|
|
25
|
+
let {
|
|
26
|
+
maxHeight
|
|
27
|
+
} = _ref3;
|
|
28
|
+
return typeof maxHeight === 'number' && (0, _styledComponents.css)`
|
|
29
|
+
max-height: ${maxHeight}px;
|
|
30
|
+
overflow-y: scroll;
|
|
31
|
+
`;
|
|
32
|
+
}}
|
|
33
|
+
`;
|
|
34
|
+
exports.StyledAccordionContent = StyledAccordionContent;
|
|
35
|
+
//# sourceMappingURL=AccordionContent.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionContent.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAccordionContent","styled","div","_ref","theme","text","_ref2","isWrapped","_ref3","maxHeight","css","exports"],"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionContentProps } from './AccordionContent';\n\ntype StyledAccordionContentProps = WithTheme<{\n isWrapped: boolean;\n}> &\n Pick<AccordionContentProps, 'maxHeight'>;\n\nexport const StyledAccordionContent = styled.div<StyledAccordionContentProps>`\n color: ${({ theme }: StyledAccordionContentProps) => theme.text};\n padding: ${({ isWrapped }) => (isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px')};\n\n ${({ maxHeight }) =>\n typeof maxHeight === 'number' &&\n css`\n max-height: ${maxHeight}px;\n overflow-y: scroll;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AASzC,MAAMW,sBAAsB,GAAGC,yBAAM,CAACC,GAAiC;AAC9E,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AACpE,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,iBAAiB,GAAG,gBAAgB;AAAA,CAAE;AACrF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZ,OAAOC,SAAS,KAAK,QAAQ,IAC7B,IAAAC,qBAAG,CAAC;AACZ,0BAA0BD,SAAU;AACpC;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACE,OAAA,CAAAX,sBAAA,GAAAA,sBAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
|
2
|
+
type IUpdateOpenAccordionUuid = (uuid: string, options?: {
|
|
3
|
+
shouldOnlyOpen?: boolean;
|
|
4
|
+
}) => void;
|
|
5
|
+
interface IAccordionGroupContext {
|
|
6
|
+
openAccordionUuid: string | undefined;
|
|
7
|
+
updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;
|
|
8
|
+
}
|
|
9
|
+
export declare const AccordionGroupContext: React.Context<IAccordionGroupContext>;
|
|
10
|
+
type AccordionGroupProps = {
|
|
11
|
+
/**
|
|
12
|
+
* The Accordions that should be grouped. Accordions with the same group are
|
|
13
|
+
* automatically closed when an `Accordion` of the group is opened.
|
|
14
|
+
*/
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Function that is executed when all accordions in group are closed.
|
|
18
|
+
*/
|
|
19
|
+
onClose?: VoidFunction;
|
|
20
|
+
/**
|
|
21
|
+
* Function that is executed when any accordion in group will be opened.
|
|
22
|
+
*/
|
|
23
|
+
onOpen?: VoidFunction;
|
|
24
|
+
};
|
|
25
|
+
declare const AccordionGroup: FC<AccordionGroupProps>;
|
|
26
|
+
export default AccordionGroup;
|