@chayns-components/core 5.0.0-beta.22 → 5.0.0-beta.23
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.
|
@@ -15,6 +15,10 @@ declare type AccordionProps = {
|
|
|
15
15
|
* This can be used to automatically expand the Accordion during the first render.
|
|
16
16
|
*/
|
|
17
17
|
isDefaultOpen?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* This will disable the Accordion so that it cannot be opened and will gray out the title.
|
|
20
|
+
*/
|
|
21
|
+
isDisabled?: boolean;
|
|
18
22
|
/**
|
|
19
23
|
* This can be used so that the Accordion cannot be opened or closed.
|
|
20
24
|
* In addition, in this case the icon is exchanged to mark the Accordions.
|
|
@@ -51,6 +51,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
51
51
|
icon = _ref.icon,
|
|
52
52
|
_ref$isDefaultOpen = _ref.isDefaultOpen,
|
|
53
53
|
isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
|
|
54
|
+
_ref$isDisabled = _ref.isDisabled,
|
|
55
|
+
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
54
56
|
_ref$isFixed = _ref.isFixed,
|
|
55
57
|
isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
|
|
56
58
|
_ref$isTitleGreyed = _ref.isTitleGreyed,
|
|
@@ -77,6 +79,10 @@ var Accordion = function Accordion(_ref) {
|
|
|
77
79
|
var isInGroup = typeof updateOpenAccordionUuid === 'function';
|
|
78
80
|
var isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
|
|
79
81
|
var handleHeadClick = (0, _react.useCallback)(function () {
|
|
82
|
+
if (isDisabled) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
|
|
80
86
|
if (typeof updateOpenAccordionUuid === 'function') {
|
|
81
87
|
updateOpenAccordionUuid(uuid);
|
|
82
88
|
}
|
|
@@ -84,7 +90,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
84
90
|
setIsAccordionOpen(function (currentIsAccordionOpen) {
|
|
85
91
|
return !currentIsAccordionOpen;
|
|
86
92
|
});
|
|
87
|
-
}, [updateOpenAccordionUuid, uuid]);
|
|
93
|
+
}, [isDisabled, updateOpenAccordionUuid, uuid]);
|
|
88
94
|
(0, _react.useEffect)(function () {
|
|
89
95
|
if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {
|
|
90
96
|
updateOpenAccordionUuid(uuid, {
|
|
@@ -108,7 +114,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
108
114
|
icon: icon,
|
|
109
115
|
isOpen: isOpen,
|
|
110
116
|
isFixed: isFixed,
|
|
111
|
-
isTitleGreyed: isTitleGreyed,
|
|
117
|
+
isTitleGreyed: isTitleGreyed || isDisabled,
|
|
112
118
|
isWrapped: isWrapped,
|
|
113
119
|
onClick: handleHeadClick,
|
|
114
120
|
onSearchChange: onSearchChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","icon","isDefaultOpen","isFixed","isTitleGreyed","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","AccordionGroupContext","openAccordionUuid","updateOpenAccordionUuid","isAccordionOpen","setIsAccordionOpen","uuid","isInGroup","isOpen","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,gBAAgB,gBAAGC,eAAMC,aAAN,CAAoB;AAAEC,EAAAA,SAAS,EAAE;AAAb,CAApB,CAAzB;;;AAEPH,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","AccordionGroupContext","openAccordionUuid","updateOpenAccordionUuid","isAccordionOpen","setIsAccordionOpen","uuid","isInGroup","isOpen","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","type"],"mappings":"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","sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\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\ntype AccordionProps = {\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 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 * 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 children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isTitleGreyed = false,\n isWrapped = false,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n title,\n titleElement,\n}) => {\n const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen);\n\n const uuid = useUuid();\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 (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n return (\n <StyledAccordion className=\"beta-chayns-accordion\" isOpen={isOpen} isWrapped={isWrapped}>\n <AccordionContext.Provider value={{ isWrapped }}>\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 && <AccordionBody>{children}</AccordionBody>}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"file":"Accordion.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.23",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "c2d580c6602b5d88572d9e210e395293d48ba6b0"
|
|
65
65
|
}
|