@salutejs/plasma-new-hope 0.88.0-canary.1223.9448363766.0 → 0.88.0-canary.1223.9462887113.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/Accordion.js +18 -13
- package/cjs/components/Accordion/Accordion.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -17
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/cjs/components/Accordion/utils/index.js +2 -2
- package/cjs/components/Accordion/utils/index.js.map +1 -1
- package/es/components/Accordion/Accordion.js +15 -10
- package/es/components/Accordion/Accordion.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -17
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/Accordion/utils/index.js +2 -2
- package/es/components/Accordion/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.js +15 -10
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -17
- package/styled-components/cjs/components/Accordion/utils/index.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -1
- package/styled-components/es/components/Accordion/Accordion.js +15 -10
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -17
- package/styled-components/es/components/Accordion/utils/index.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -1
- package/types/components/Accordion/Accordion.d.ts +2 -2
- package/types/components/Accordion/Accordion.d.ts.map +1 -1
- package/types/components/Accordion/Accordion.types.d.ts +2 -2
- package/types/components/Accordion/Accordion.types.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts +1 -1
- package/types/examples/plasma_web/components/Accordion/Accordion.d.ts +1 -1
@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
6
6
|
var React = require('react');
|
7
|
-
var index
|
7
|
+
var index = require('../../utils/index.js');
|
8
8
|
var Accordion_styles = require('./Accordion.styles.js');
|
9
9
|
var Accordion_tokens = require('./Accordion.tokens.js');
|
10
10
|
var base = require('./variations/_view/base.js');
|
11
11
|
var base$1 = require('./variations/_size/base.js');
|
12
|
-
var index = require('./utils/index.js');
|
12
|
+
var index$1 = require('./utils/index.js');
|
13
13
|
|
14
14
|
var accordionRoot = function accordionRoot(Root) {
|
15
15
|
return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
|
@@ -17,39 +17,44 @@ var accordionRoot = function accordionRoot(Root) {
|
|
17
17
|
view = _ref.view,
|
18
18
|
_ref$stretching = _ref.stretching,
|
19
19
|
stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching,
|
20
|
-
_ref$
|
21
|
-
|
20
|
+
_ref$defaultActiveEve = _ref.defaultActiveEventKey,
|
21
|
+
defaultActiveEventKey = _ref$defaultActiveEve === void 0 ? [] : _ref$defaultActiveEve,
|
22
22
|
children = _ref.children,
|
23
23
|
disabled = _ref.disabled,
|
24
24
|
className = _ref.className,
|
25
25
|
singleActive = _ref.singleActive,
|
26
26
|
onChange = _ref.onChange;
|
27
27
|
var stretchingClass = Accordion_tokens.classes["".concat(stretching, "Stretching")];
|
28
|
-
var _useState = React.useState(
|
28
|
+
var _useState = React.useState(defaultActiveEventKey),
|
29
29
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
30
30
|
activeIndex = _useState2[0],
|
31
31
|
setActiveIndex = _useState2[1];
|
32
32
|
var updateValue = function updateValue(index, value) {
|
33
|
-
|
33
|
+
if (onChange) {
|
34
|
+
onChange(index, value);
|
35
|
+
}
|
34
36
|
if (singleActive) {
|
35
|
-
|
37
|
+
if (value) {
|
38
|
+
setActiveIndex([index]);
|
39
|
+
} else {
|
40
|
+
setActiveIndex([]);
|
41
|
+
}
|
36
42
|
} else if (value) {
|
37
43
|
setActiveIndex([index].concat(_rollupPluginBabelHelpers.toConsumableArray(activeIndex)));
|
38
44
|
} else {
|
39
|
-
var
|
40
|
-
return i
|
45
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
46
|
+
return i !== index;
|
41
47
|
});
|
42
|
-
setActiveIndex(
|
48
|
+
setActiveIndex(updatedActiveIndex);
|
43
49
|
}
|
44
50
|
};
|
45
51
|
var childrenArray = React.Children.toArray(children);
|
46
|
-
var childrenMemo = index.getChildren(childrenArray, activeIndex, disabled, updateValue);
|
47
52
|
return /*#__PURE__*/React.createElement(Root, {
|
48
53
|
ref: outerRootRef,
|
49
54
|
size: size,
|
50
55
|
view: view,
|
51
|
-
className: index
|
52
|
-
},
|
56
|
+
className: index.cx(stretchingClass, Accordion_tokens.classes.accordionRoot, className)
|
57
|
+
}, index$1.getChildren(childrenArray, activeIndex, disabled, updateValue));
|
53
58
|
});
|
54
59
|
};
|
55
60
|
var accordionConfig = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef, useState } from 'react';\n\nimport { RootPropsOmitOnChange } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { AccordionProps } from './Accordion.types';\nimport { base } from './Accordion.styles';\nimport { classes } from './Accordion.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { getChildren } from './utils';\n\nexport const accordionRoot = (Root: RootPropsOmitOnChange<HTMLDivElement, AccordionProps>) =>\n forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n size,\n view,\n stretching = 'filled',\n
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef, useState } from 'react';\n\nimport { RootPropsOmitOnChange } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { AccordionProps } from './Accordion.types';\nimport { base } from './Accordion.styles';\nimport { classes } from './Accordion.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { getChildren } from './utils';\n\nexport const accordionRoot = (Root: RootPropsOmitOnChange<HTMLDivElement, AccordionProps>) =>\n forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n size,\n view,\n stretching = 'filled',\n defaultActiveEventKey = [],\n children,\n disabled,\n className,\n singleActive,\n onChange,\n },\n outerRootRef,\n ) => {\n const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n const [activeIndex, setActiveIndex] = useState<number[]>(defaultActiveEventKey);\n\n const updateValue = (index: number, value?: boolean) => {\n if (onChange) {\n onChange(index, value);\n }\n if (singleActive) {\n if (value) {\n setActiveIndex([index]);\n } else {\n setActiveIndex([]);\n }\n } else if (value) {\n setActiveIndex([index, ...activeIndex]);\n } else {\n const updatedActiveIndex = activeIndex.filter((i) => i !== index);\n setActiveIndex(updatedActiveIndex);\n }\n };\n\n const childrenArray = Children.toArray(children) as React.ReactElement[];\n return (\n <Root\n ref={outerRootRef}\n size={size}\n view={view}\n className={cx(stretchingClass, classes.accordionRoot, className)}\n >\n {getChildren(childrenArray, activeIndex, disabled, updateValue)}\n </Root>\n );\n },\n );\n\nexport const accordionConfig = {\n name: 'Accordion',\n tag: 'div',\n layout: accordionRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["accordionRoot","Root","forwardRef","_ref","outerRootRef","size","view","_ref$stretching","stretching","_ref$defaultActiveEve","defaultActiveEventKey","children","disabled","className","singleActive","onChange","stretchingClass","classes","concat","_useState","useState","_useState2","_slicedToArray","activeIndex","setActiveIndex","updateValue","index","value","_toConsumableArray","updatedActiveIndex","filter","i","childrenArray","Children","toArray","React","createElement","ref","cx","getChildren","accordionConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
@@ -24,39 +24,35 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
24
24
|
disabled = _ref.disabled,
|
25
25
|
onChange = _ref.onChange;
|
26
26
|
var key = eventKey !== null && eventKey !== void 0 ? eventKey : index;
|
27
|
-
var _useState = React.useState(
|
27
|
+
var _useState = React.useState(),
|
28
28
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
29
|
-
|
30
|
-
|
31
|
-
var _useState3 = React.useState(),
|
32
|
-
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
33
|
-
leftPadding = _useState4[0],
|
34
|
-
setLeftPadding = _useState4[1];
|
29
|
+
leftPadding = _useState2[0],
|
30
|
+
setLeftPadding = _useState2[1];
|
35
31
|
var handleOpen = function handleOpen() {
|
36
32
|
if (disabled) {
|
37
33
|
return;
|
38
34
|
}
|
39
|
-
|
40
|
-
|
35
|
+
if (onChange) {
|
36
|
+
onChange(key, !value);
|
37
|
+
}
|
41
38
|
};
|
42
39
|
var onKeyPress = function onKeyPress(event) {
|
43
40
|
if (disabled) {
|
44
41
|
return;
|
45
42
|
}
|
46
43
|
event.persist();
|
47
|
-
if (event.keyCode === 13) {
|
44
|
+
if (event.keyCode === 13 || event.keyCode === 32) {
|
48
45
|
handleOpen();
|
49
46
|
}
|
50
47
|
};
|
51
48
|
var leftContentRef = React.useRef(null);
|
52
49
|
React.useEffect(function () {
|
53
50
|
var _leftContentRef$curre, _leftContentRef$curre2;
|
54
|
-
setShow(value);
|
55
51
|
var leftContentWidth = (_leftContentRef$curre = leftContentRef === null || leftContentRef === void 0 || (_leftContentRef$curre2 = leftContentRef.current) === null || _leftContentRef$curre2 === void 0 ? void 0 : _leftContentRef$curre2.offsetWidth) !== null && _leftContentRef$curre !== void 0 ? _leftContentRef$curre : 0;
|
56
52
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(Accordion_tokens.tokens.accordionItemGap, "))") : 0;
|
57
53
|
setLeftPadding(leftPaddingBody);
|
58
54
|
}, [value, type, leftContentRef, setLeftPadding]);
|
59
|
-
var
|
55
|
+
var openedBodyClass = value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
60
56
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
61
57
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
|
62
58
|
size: "xs",
|
@@ -64,7 +60,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
64
60
|
})), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
|
65
61
|
size: "xs",
|
66
62
|
color: "inhert",
|
67
|
-
className:
|
63
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : Accordion_tokens.classes.accordionPlusAnimationElement
|
68
64
|
}));
|
69
65
|
};
|
70
66
|
var accordionBorderRadius = roundness.convertRoundnessMatrix(pin, "var(".concat(Accordion_tokens.tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
@@ -73,9 +69,9 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
73
69
|
size: "xs",
|
74
70
|
color: "inhert"
|
75
71
|
})) : undefined;
|
76
|
-
var leftContentRotate = type === 'arrow' &&
|
72
|
+
var leftContentRotate = type === 'arrow' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
77
73
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
78
|
-
var rightContentRotate = type === 'sign' &&
|
74
|
+
var rightContentRotate = type === 'sign' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
79
75
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionItem, {
|
80
76
|
role: "tab",
|
81
77
|
className: Accordion_tokens.classes.accordionItem,
|
@@ -91,10 +87,10 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
91
87
|
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentLeft, {
|
92
88
|
ref: leftContentRef,
|
93
89
|
className: leftContentRotate
|
94
|
-
}, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null,
|
90
|
+
}, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentRight, {
|
95
91
|
className: rightContentRotate
|
96
92
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBodyAnimate, {
|
97
|
-
className:
|
93
|
+
className: openedBodyClass,
|
98
94
|
style: {
|
99
95
|
paddingLeft: "".concat(leftPadding)
|
100
96
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState, KeyboardEvent, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\n\nimport {\n StyledAccordionItem,\n StyledAccordionHeader,\n StyledAccordionBody,\n StyledAccordionTitle,\n StyledAccordionContentLeft,\n StyledAccordionHeaderLeft,\n StyledAccordionContentRight,\n StyledArrow,\n StyledMinus,\n StyledPlus,\n StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem: React.FC<HTMLAttributes<HTMLDivElement> & AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n eventKey,\n disabled,\n onChange,\n}) => {\n const key = eventKey ?? index;\n\n const [isOpen, setShow] = useState(value);\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n setShow(!isOpen);\n onChange && onChange(key, !isOpen);\n };\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n event.persist();\n if (event.keyCode === 13) {\n handleOpen();\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setShow(value);\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody = leftContentWidth ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))` : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const showedBody = isOpen ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPLus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inhert\" />\n <StyledMinus size=\"xs\" color=\"inhert\" className={showedBody ?? classes.accordionPlusAnimationElement} />\n </StyledPlus>\n );\n\n const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n const disabledClass = disabled ? classes.accordionDisabled : '';\n\n const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inhert\" /> : undefined);\n const leftContentRotate = type === 'arrow' && isOpen ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n const rightContentRotate = type === 'sign' && isOpen ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n role=\"tab\"\n className={classes.accordionItem}\n tabIndex={0}\n key={key}\n style={{ borderRadius: accordionBorderRadius }}\n onKeyDown={onKeyPress}\n >\n <StyledAccordionHeader onClick={handleOpen} className={disabledClass}>\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{`${title} ${value} ${isOpen}`}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate className={showedBody} style={{ paddingLeft: `${leftPadding}` }}>\n <StyledAccordionBody>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","eventKey","disabled","onChange","key","_useState","useState","_useState2","_slicedToArray","isOpen","setShow","_useState3","_useState4","leftPadding","setLeftPadding","handleOpen","onKeyPress","event","persist","keyCode","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","showedBody","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","className","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","role","accordionItem","tabIndex","style","borderRadius","onKeyDown","StyledAccordionHeader","onClick","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState, KeyboardEvent, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\n\nimport {\n StyledAccordionItem,\n StyledAccordionHeader,\n StyledAccordionBody,\n StyledAccordionTitle,\n StyledAccordionContentLeft,\n StyledAccordionHeaderLeft,\n StyledAccordionContentRight,\n StyledArrow,\n StyledMinus,\n StyledPlus,\n StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem: React.FC<HTMLAttributes<HTMLDivElement> & AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n eventKey,\n disabled,\n onChange,\n}) => {\n const key = eventKey ?? index;\n\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n if (onChange) {\n onChange(key, !value);\n }\n };\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n event.persist();\n if (event.keyCode === 13 || event.keyCode === 32) {\n handleOpen();\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody = leftContentWidth ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))` : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const openedBodyClass = value ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPLus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inhert\" />\n <StyledMinus\n size=\"xs\"\n color=\"inhert\"\n className={openedBodyClass ?? classes.accordionPlusAnimationElement}\n />\n </StyledPlus>\n );\n\n const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n const disabledClass = disabled ? classes.accordionDisabled : '';\n\n const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inhert\" /> : undefined);\n const leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n const rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n role=\"tab\"\n className={classes.accordionItem}\n tabIndex={0}\n key={key}\n style={{ borderRadius: accordionBorderRadius }}\n onKeyDown={onKeyPress}\n >\n <StyledAccordionHeader onClick={handleOpen} className={disabledClass}>\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{title}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate className={openedBodyClass} style={{ paddingLeft: `${leftPadding}` }}>\n <StyledAccordionBody>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","eventKey","disabled","onChange","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","onKeyPress","event","persist","keyCode","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","openedBodyClass","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","className","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","role","accordionItem","tabIndex","style","borderRadius","onKeyDown","StyledAccordionHeader","onClick","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody"],"mappings":"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"}
|
@@ -11,10 +11,10 @@ var updatePropsRecursively = function updatePropsRecursively(children, activeInd
|
|
11
11
|
}
|
12
12
|
var props = {
|
13
13
|
index: index,
|
14
|
-
value: !!(activeIndex
|
14
|
+
value: !!((activeIndex === null || activeIndex === void 0 ? void 0 : activeIndex.findIndex(function (i) {
|
15
15
|
var _child$props$eventKey;
|
16
16
|
return i === ((_child$props$eventKey = child.props.eventKey) !== null && _child$props$eventKey !== void 0 ? _child$props$eventKey : index);
|
17
|
-
})),
|
17
|
+
})) !== -1),
|
18
18
|
disabled: disabled,
|
19
19
|
onChange: updateValue
|
20
20
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Accordion/utils/index.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nimport { AccordionItemProps } from '../ui/AccordionItem/AccordionItem.types';\n\nexport const updatePropsRecursively = (\n children?: ReactElement<AccordionItemProps>[],\n activeIndex?: number[],\n disabled?: boolean,\n updateValue?: (index: number, value?: boolean) => void,\n): ReactNode[] =>\n Children.map(children || [], (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const props = {\n index,\n value: !!activeIndex?.
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Accordion/utils/index.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nimport { AccordionItemProps } from '../ui/AccordionItem/AccordionItem.types';\n\nexport const updatePropsRecursively = (\n children?: ReactElement<AccordionItemProps>[],\n activeIndex?: number[],\n disabled?: boolean,\n updateValue?: (index: number, value?: boolean) => void,\n): ReactNode[] =>\n Children.map(children || [], (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const props = {\n index,\n value: !!(activeIndex?.findIndex((i: number) => i === (child.props.eventKey ?? index)) !== -1),\n disabled,\n onChange: updateValue,\n };\n\n return cloneElement(child, props);\n });\n\nexport const getChildren = (\n children: ReactElement<AccordionItemProps>[],\n activeIndex?: number[],\n disabled?: boolean,\n updateValue?: (index: number, value?: boolean) => void,\n) => {\n return updatePropsRecursively(children, activeIndex, disabled, updateValue);\n};\n"],"names":["updatePropsRecursively","children","activeIndex","disabled","updateValue","Children","map","child","index","isValidElement","props","value","findIndex","i","_child$props$eventKey","eventKey","onChange","cloneElement","getChildren"],"mappings":";;;;;;AAIaA,IAAAA,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAC/BC,QAA6C,EAC7CC,WAAsB,EACtBC,QAAkB,EAClBC,WAAsD,EAAA;AAAA,EAAA,OAEtDC,cAAQ,CAACC,GAAG,CAACL,QAAQ,IAAI,EAAE,EAAE,UAACM,KAAK,EAAEC,KAAK,EAAK;AAC3C,IAAA,IAAI,eAACC,oBAAc,CAACF,KAAK,CAAC,EAAE;AACxB,MAAA,OAAOA,KAAK,CAAA;AAChB,KAAA;AAEA,IAAA,IAAMG,KAAK,GAAG;AACVF,MAAAA,KAAK,EAALA,KAAK;AACLG,MAAAA,KAAK,EAAE,CAAC,EAAE,CAAAT,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAXA,WAAW,CAAEU,SAAS,CAAC,UAACC,CAAS,EAAA;AAAA,QAAA,IAAAC,qBAAA,CAAA;AAAA,QAAA,OAAKD,CAAC,MAAA,CAAAC,qBAAA,GAAMP,KAAK,CAACG,KAAK,CAACK,QAAQ,cAAAD,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAIN,KAAK,CAAC,CAAA;OAAC,CAAA,MAAK,CAAC,CAAC,CAAC;AAC9FL,MAAAA,QAAQ,EAARA,QAAQ;AACRa,MAAAA,QAAQ,EAAEZ,WAAAA;KACb,CAAA;AAED,IAAA,oBAAOa,kBAAY,CAACV,KAAK,EAAEG,KAAK,CAAC,CAAA;AACrC,GAAC,CAAC,CAAA;AAAA,EAAA;AAEOQ,IAAAA,WAAW,GAAG,SAAdA,WAAWA,CACpBjB,QAA4C,EAC5CC,WAAsB,EACtBC,QAAkB,EAClBC,WAAsD,EACrD;EACD,OAAOJ,sBAAsB,CAACC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,CAAC,CAAA;AAC/E;;;;;"}
|
@@ -13,39 +13,44 @@ var accordionRoot = function accordionRoot(Root) {
|
|
13
13
|
view = _ref.view,
|
14
14
|
_ref$stretching = _ref.stretching,
|
15
15
|
stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching,
|
16
|
-
_ref$
|
17
|
-
|
16
|
+
_ref$defaultActiveEve = _ref.defaultActiveEventKey,
|
17
|
+
defaultActiveEventKey = _ref$defaultActiveEve === void 0 ? [] : _ref$defaultActiveEve,
|
18
18
|
children = _ref.children,
|
19
19
|
disabled = _ref.disabled,
|
20
20
|
className = _ref.className,
|
21
21
|
singleActive = _ref.singleActive,
|
22
22
|
onChange = _ref.onChange;
|
23
23
|
var stretchingClass = classes["".concat(stretching, "Stretching")];
|
24
|
-
var _useState = useState(
|
24
|
+
var _useState = useState(defaultActiveEventKey),
|
25
25
|
_useState2 = _slicedToArray(_useState, 2),
|
26
26
|
activeIndex = _useState2[0],
|
27
27
|
setActiveIndex = _useState2[1];
|
28
28
|
var updateValue = function updateValue(index, value) {
|
29
|
-
|
29
|
+
if (onChange) {
|
30
|
+
onChange(index, value);
|
31
|
+
}
|
30
32
|
if (singleActive) {
|
31
|
-
|
33
|
+
if (value) {
|
34
|
+
setActiveIndex([index]);
|
35
|
+
} else {
|
36
|
+
setActiveIndex([]);
|
37
|
+
}
|
32
38
|
} else if (value) {
|
33
39
|
setActiveIndex([index].concat(_toConsumableArray(activeIndex)));
|
34
40
|
} else {
|
35
|
-
var
|
36
|
-
return i
|
41
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
42
|
+
return i !== index;
|
37
43
|
});
|
38
|
-
setActiveIndex(
|
44
|
+
setActiveIndex(updatedActiveIndex);
|
39
45
|
}
|
40
46
|
};
|
41
47
|
var childrenArray = Children.toArray(children);
|
42
|
-
var childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);
|
43
48
|
return /*#__PURE__*/React.createElement(Root, {
|
44
49
|
ref: outerRootRef,
|
45
50
|
size: size,
|
46
51
|
view: view,
|
47
52
|
className: cx(stretchingClass, classes.accordionRoot, className)
|
48
|
-
},
|
53
|
+
}, getChildren(childrenArray, activeIndex, disabled, updateValue));
|
49
54
|
});
|
50
55
|
};
|
51
56
|
var accordionConfig = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef, useState } from 'react';\n\nimport { RootPropsOmitOnChange } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { AccordionProps } from './Accordion.types';\nimport { base } from './Accordion.styles';\nimport { classes } from './Accordion.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { getChildren } from './utils';\n\nexport const accordionRoot = (Root: RootPropsOmitOnChange<HTMLDivElement, AccordionProps>) =>\n forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n size,\n view,\n stretching = 'filled',\n
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef, useState } from 'react';\n\nimport { RootPropsOmitOnChange } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { AccordionProps } from './Accordion.types';\nimport { base } from './Accordion.styles';\nimport { classes } from './Accordion.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { getChildren } from './utils';\n\nexport const accordionRoot = (Root: RootPropsOmitOnChange<HTMLDivElement, AccordionProps>) =>\n forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n size,\n view,\n stretching = 'filled',\n defaultActiveEventKey = [],\n children,\n disabled,\n className,\n singleActive,\n onChange,\n },\n outerRootRef,\n ) => {\n const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n const [activeIndex, setActiveIndex] = useState<number[]>(defaultActiveEventKey);\n\n const updateValue = (index: number, value?: boolean) => {\n if (onChange) {\n onChange(index, value);\n }\n if (singleActive) {\n if (value) {\n setActiveIndex([index]);\n } else {\n setActiveIndex([]);\n }\n } else if (value) {\n setActiveIndex([index, ...activeIndex]);\n } else {\n const updatedActiveIndex = activeIndex.filter((i) => i !== index);\n setActiveIndex(updatedActiveIndex);\n }\n };\n\n const childrenArray = Children.toArray(children) as React.ReactElement[];\n return (\n <Root\n ref={outerRootRef}\n size={size}\n view={view}\n className={cx(stretchingClass, classes.accordionRoot, className)}\n >\n {getChildren(childrenArray, activeIndex, disabled, updateValue)}\n </Root>\n );\n },\n );\n\nexport const accordionConfig = {\n name: 'Accordion',\n tag: 'div',\n layout: accordionRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["accordionRoot","Root","forwardRef","_ref","outerRootRef","size","view","_ref$stretching","stretching","_ref$defaultActiveEve","defaultActiveEventKey","children","disabled","className","singleActive","onChange","stretchingClass","classes","concat","_useState","useState","_useState2","_slicedToArray","activeIndex","setActiveIndex","updateValue","index","value","_toConsumableArray","updatedActiveIndex","filter","i","childrenArray","Children","toArray","React","createElement","ref","cx","getChildren","accordionConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
@@ -20,39 +20,35 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
20
20
|
disabled = _ref.disabled,
|
21
21
|
onChange = _ref.onChange;
|
22
22
|
var key = eventKey !== null && eventKey !== void 0 ? eventKey : index;
|
23
|
-
var _useState = useState(
|
23
|
+
var _useState = useState(),
|
24
24
|
_useState2 = _slicedToArray(_useState, 2),
|
25
|
-
|
26
|
-
|
27
|
-
var _useState3 = useState(),
|
28
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
29
|
-
leftPadding = _useState4[0],
|
30
|
-
setLeftPadding = _useState4[1];
|
25
|
+
leftPadding = _useState2[0],
|
26
|
+
setLeftPadding = _useState2[1];
|
31
27
|
var handleOpen = function handleOpen() {
|
32
28
|
if (disabled) {
|
33
29
|
return;
|
34
30
|
}
|
35
|
-
|
36
|
-
|
31
|
+
if (onChange) {
|
32
|
+
onChange(key, !value);
|
33
|
+
}
|
37
34
|
};
|
38
35
|
var onKeyPress = function onKeyPress(event) {
|
39
36
|
if (disabled) {
|
40
37
|
return;
|
41
38
|
}
|
42
39
|
event.persist();
|
43
|
-
if (event.keyCode === 13) {
|
40
|
+
if (event.keyCode === 13 || event.keyCode === 32) {
|
44
41
|
handleOpen();
|
45
42
|
}
|
46
43
|
};
|
47
44
|
var leftContentRef = useRef(null);
|
48
45
|
useEffect(function () {
|
49
46
|
var _leftContentRef$curre, _leftContentRef$curre2;
|
50
|
-
setShow(value);
|
51
47
|
var leftContentWidth = (_leftContentRef$curre = leftContentRef === null || leftContentRef === void 0 || (_leftContentRef$curre2 = leftContentRef.current) === null || _leftContentRef$curre2 === void 0 ? void 0 : _leftContentRef$curre2.offsetWidth) !== null && _leftContentRef$curre !== void 0 ? _leftContentRef$curre : 0;
|
52
48
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
|
53
49
|
setLeftPadding(leftPaddingBody);
|
54
50
|
}, [value, type, leftContentRef, setLeftPadding]);
|
55
|
-
var
|
51
|
+
var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
|
56
52
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
57
53
|
return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
|
58
54
|
size: "xs",
|
@@ -60,7 +56,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
60
56
|
})), /*#__PURE__*/React.createElement(StyledMinus, {
|
61
57
|
size: "xs",
|
62
58
|
color: "inhert",
|
63
|
-
className:
|
59
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement
|
64
60
|
}));
|
65
61
|
};
|
66
62
|
var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
@@ -69,9 +65,9 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
69
65
|
size: "xs",
|
70
66
|
color: "inhert"
|
71
67
|
})) : undefined;
|
72
|
-
var leftContentRotate = type === 'arrow' &&
|
68
|
+
var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
|
73
69
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
74
|
-
var rightContentRotate = type === 'sign' &&
|
70
|
+
var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
|
75
71
|
return /*#__PURE__*/React.createElement(StyledAccordionItem, {
|
76
72
|
role: "tab",
|
77
73
|
className: classes.accordionItem,
|
@@ -87,10 +83,10 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
87
83
|
}, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
|
88
84
|
ref: leftContentRef,
|
89
85
|
className: leftContentRotate
|
90
|
-
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null,
|
86
|
+
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
|
91
87
|
className: rightContentRotate
|
92
88
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
|
93
|
-
className:
|
89
|
+
className: openedBodyClass,
|
94
90
|
style: {
|
95
91
|
paddingLeft: "".concat(leftPadding)
|
96
92
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState, KeyboardEvent, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\n\nimport {\n StyledAccordionItem,\n StyledAccordionHeader,\n StyledAccordionBody,\n StyledAccordionTitle,\n StyledAccordionContentLeft,\n StyledAccordionHeaderLeft,\n StyledAccordionContentRight,\n StyledArrow,\n StyledMinus,\n StyledPlus,\n StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem: React.FC<HTMLAttributes<HTMLDivElement> & AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n eventKey,\n disabled,\n onChange,\n}) => {\n const key = eventKey ?? index;\n\n const [isOpen, setShow] = useState(value);\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n setShow(!isOpen);\n onChange && onChange(key, !isOpen);\n };\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n event.persist();\n if (event.keyCode === 13) {\n handleOpen();\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setShow(value);\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody = leftContentWidth ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))` : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const showedBody = isOpen ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPLus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inhert\" />\n <StyledMinus size=\"xs\" color=\"inhert\" className={showedBody ?? classes.accordionPlusAnimationElement} />\n </StyledPlus>\n );\n\n const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n const disabledClass = disabled ? classes.accordionDisabled : '';\n\n const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inhert\" /> : undefined);\n const leftContentRotate = type === 'arrow' && isOpen ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n const rightContentRotate = type === 'sign' && isOpen ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n role=\"tab\"\n className={classes.accordionItem}\n tabIndex={0}\n key={key}\n style={{ borderRadius: accordionBorderRadius }}\n onKeyDown={onKeyPress}\n >\n <StyledAccordionHeader onClick={handleOpen} className={disabledClass}>\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{`${title} ${value} ${isOpen}`}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate className={showedBody} style={{ paddingLeft: `${leftPadding}` }}>\n <StyledAccordionBody>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","eventKey","disabled","onChange","key","_useState","useState","_useState2","_slicedToArray","isOpen","setShow","_useState3","_useState4","leftPadding","setLeftPadding","handleOpen","onKeyPress","event","persist","keyCode","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","showedBody","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","className","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","role","accordionItem","tabIndex","style","borderRadius","onKeyDown","StyledAccordionHeader","onClick","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState, KeyboardEvent, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\n\nimport {\n StyledAccordionItem,\n StyledAccordionHeader,\n StyledAccordionBody,\n StyledAccordionTitle,\n StyledAccordionContentLeft,\n StyledAccordionHeaderLeft,\n StyledAccordionContentRight,\n StyledArrow,\n StyledMinus,\n StyledPlus,\n StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem: React.FC<HTMLAttributes<HTMLDivElement> & AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n eventKey,\n disabled,\n onChange,\n}) => {\n const key = eventKey ?? index;\n\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n if (onChange) {\n onChange(key, !value);\n }\n };\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n event.persist();\n if (event.keyCode === 13 || event.keyCode === 32) {\n handleOpen();\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody = leftContentWidth ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))` : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const openedBodyClass = value ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPLus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inhert\" />\n <StyledMinus\n size=\"xs\"\n color=\"inhert\"\n className={openedBodyClass ?? classes.accordionPlusAnimationElement}\n />\n </StyledPlus>\n );\n\n const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n const disabledClass = disabled ? classes.accordionDisabled : '';\n\n const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inhert\" /> : undefined);\n const leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n const rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n role=\"tab\"\n className={classes.accordionItem}\n tabIndex={0}\n key={key}\n style={{ borderRadius: accordionBorderRadius }}\n onKeyDown={onKeyPress}\n >\n <StyledAccordionHeader onClick={handleOpen} className={disabledClass}>\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{title}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate className={openedBodyClass} style={{ paddingLeft: `${leftPadding}` }}>\n <StyledAccordionBody>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","eventKey","disabled","onChange","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","onKeyPress","event","persist","keyCode","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","openedBodyClass","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","className","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","role","accordionItem","tabIndex","style","borderRadius","onKeyDown","StyledAccordionHeader","onClick","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody"],"mappings":"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"}
|
@@ -7,10 +7,10 @@ var updatePropsRecursively = function updatePropsRecursively(children, activeInd
|
|
7
7
|
}
|
8
8
|
var props = {
|
9
9
|
index: index,
|
10
|
-
value: !!(activeIndex
|
10
|
+
value: !!((activeIndex === null || activeIndex === void 0 ? void 0 : activeIndex.findIndex(function (i) {
|
11
11
|
var _child$props$eventKey;
|
12
12
|
return i === ((_child$props$eventKey = child.props.eventKey) !== null && _child$props$eventKey !== void 0 ? _child$props$eventKey : index);
|
13
|
-
})),
|
13
|
+
})) !== -1),
|
14
14
|
disabled: disabled,
|
15
15
|
onChange: updateValue
|
16
16
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Accordion/utils/index.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nimport { AccordionItemProps } from '../ui/AccordionItem/AccordionItem.types';\n\nexport const updatePropsRecursively = (\n children?: ReactElement<AccordionItemProps>[],\n activeIndex?: number[],\n disabled?: boolean,\n updateValue?: (index: number, value?: boolean) => void,\n): ReactNode[] =>\n Children.map(children || [], (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const props = {\n index,\n value: !!activeIndex?.
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Accordion/utils/index.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nimport { AccordionItemProps } from '../ui/AccordionItem/AccordionItem.types';\n\nexport const updatePropsRecursively = (\n children?: ReactElement<AccordionItemProps>[],\n activeIndex?: number[],\n disabled?: boolean,\n updateValue?: (index: number, value?: boolean) => void,\n): ReactNode[] =>\n Children.map(children || [], (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const props = {\n index,\n value: !!(activeIndex?.findIndex((i: number) => i === (child.props.eventKey ?? index)) !== -1),\n disabled,\n onChange: updateValue,\n };\n\n return cloneElement(child, props);\n });\n\nexport const getChildren = (\n children: ReactElement<AccordionItemProps>[],\n activeIndex?: number[],\n disabled?: boolean,\n updateValue?: (index: number, value?: boolean) => void,\n) => {\n return updatePropsRecursively(children, activeIndex, disabled, updateValue);\n};\n"],"names":["updatePropsRecursively","children","activeIndex","disabled","updateValue","Children","map","child","index","isValidElement","props","value","findIndex","i","_child$props$eventKey","eventKey","onChange","cloneElement","getChildren"],"mappings":";;AAIaA,IAAAA,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAC/BC,QAA6C,EAC7CC,WAAsB,EACtBC,QAAkB,EAClBC,WAAsD,EAAA;AAAA,EAAA,OAEtDC,QAAQ,CAACC,GAAG,CAACL,QAAQ,IAAI,EAAE,EAAE,UAACM,KAAK,EAAEC,KAAK,EAAK;AAC3C,IAAA,IAAI,eAACC,cAAc,CAACF,KAAK,CAAC,EAAE;AACxB,MAAA,OAAOA,KAAK,CAAA;AAChB,KAAA;AAEA,IAAA,IAAMG,KAAK,GAAG;AACVF,MAAAA,KAAK,EAALA,KAAK;AACLG,MAAAA,KAAK,EAAE,CAAC,EAAE,CAAAT,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAXA,WAAW,CAAEU,SAAS,CAAC,UAACC,CAAS,EAAA;AAAA,QAAA,IAAAC,qBAAA,CAAA;AAAA,QAAA,OAAKD,CAAC,MAAA,CAAAC,qBAAA,GAAMP,KAAK,CAACG,KAAK,CAACK,QAAQ,cAAAD,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAIN,KAAK,CAAC,CAAA;OAAC,CAAA,MAAK,CAAC,CAAC,CAAC;AAC9FL,MAAAA,QAAQ,EAARA,QAAQ;AACRa,MAAAA,QAAQ,EAAEZ,WAAAA;KACb,CAAA;AAED,IAAA,oBAAOa,YAAY,CAACV,KAAK,EAAEG,KAAK,CAAC,CAAA;AACrC,GAAC,CAAC,CAAA;AAAA,EAAA;AAEOQ,IAAAA,WAAW,GAAG,SAAdA,WAAWA,CACpBjB,QAA4C,EAC5CC,WAAsB,EACtBC,QAAkB,EAClBC,WAAsD,EACrD;EACD,OAAOJ,sBAAsB,CAACC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,CAAC,CAAA;AAC/E;;;;"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.88.0-canary.1223.
|
3
|
+
"version": "0.88.0-canary.1223.9462887113.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -103,5 +103,5 @@
|
|
103
103
|
"react-popper": "2.3.0",
|
104
104
|
"storeon": "3.1.5"
|
105
105
|
},
|
106
|
-
"gitHead": "
|
106
|
+
"gitHead": "e1a603047e80c8086f177567584ab02e41e0106e"
|
107
107
|
}
|
@@ -30,39 +30,44 @@ var accordionRoot = exports.accordionRoot = function accordionRoot(Root) {
|
|
30
30
|
view = _ref.view,
|
31
31
|
_ref$stretching = _ref.stretching,
|
32
32
|
stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching,
|
33
|
-
_ref$
|
34
|
-
|
33
|
+
_ref$defaultActiveEve = _ref.defaultActiveEventKey,
|
34
|
+
defaultActiveEventKey = _ref$defaultActiveEve === void 0 ? [] : _ref$defaultActiveEve,
|
35
35
|
children = _ref.children,
|
36
36
|
disabled = _ref.disabled,
|
37
37
|
className = _ref.className,
|
38
38
|
singleActive = _ref.singleActive,
|
39
39
|
onChange = _ref.onChange;
|
40
40
|
var stretchingClass = _Accordion2.classes["".concat(stretching, "Stretching")];
|
41
|
-
var _useState = (0, _react.useState)(
|
41
|
+
var _useState = (0, _react.useState)(defaultActiveEventKey),
|
42
42
|
_useState2 = _slicedToArray(_useState, 2),
|
43
43
|
activeIndex = _useState2[0],
|
44
44
|
setActiveIndex = _useState2[1];
|
45
45
|
var updateValue = function updateValue(index, value) {
|
46
|
-
|
46
|
+
if (onChange) {
|
47
|
+
onChange(index, value);
|
48
|
+
}
|
47
49
|
if (singleActive) {
|
48
|
-
|
50
|
+
if (value) {
|
51
|
+
setActiveIndex([index]);
|
52
|
+
} else {
|
53
|
+
setActiveIndex([]);
|
54
|
+
}
|
49
55
|
} else if (value) {
|
50
56
|
setActiveIndex([index].concat(_toConsumableArray(activeIndex)));
|
51
57
|
} else {
|
52
|
-
var
|
53
|
-
return i
|
58
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
59
|
+
return i !== index;
|
54
60
|
});
|
55
|
-
setActiveIndex(
|
61
|
+
setActiveIndex(updatedActiveIndex);
|
56
62
|
}
|
57
63
|
};
|
58
64
|
var childrenArray = _react.Children.toArray(children);
|
59
|
-
var childrenMemo = (0, _utils2.getChildren)(childrenArray, activeIndex, disabled, updateValue);
|
60
65
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
61
66
|
ref: outerRootRef,
|
62
67
|
size: size,
|
63
68
|
view: view,
|
64
69
|
className: (0, _utils.cx)(stretchingClass, _Accordion2.classes.accordionRoot, className)
|
65
|
-
},
|
70
|
+
}, (0, _utils2.getChildren)(childrenArray, activeIndex, disabled, updateValue));
|
66
71
|
});
|
67
72
|
};
|
68
73
|
var accordionConfig = exports.accordionConfig = {
|
@@ -33,39 +33,35 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
33
33
|
disabled = _ref.disabled,
|
34
34
|
onChange = _ref.onChange;
|
35
35
|
var key = eventKey !== null && eventKey !== void 0 ? eventKey : index;
|
36
|
-
var _useState = (0, _react.useState)(
|
36
|
+
var _useState = (0, _react.useState)(),
|
37
37
|
_useState2 = _slicedToArray(_useState, 2),
|
38
|
-
|
39
|
-
|
40
|
-
var _useState3 = (0, _react.useState)(),
|
41
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
42
|
-
leftPadding = _useState4[0],
|
43
|
-
setLeftPadding = _useState4[1];
|
38
|
+
leftPadding = _useState2[0],
|
39
|
+
setLeftPadding = _useState2[1];
|
44
40
|
var handleOpen = function handleOpen() {
|
45
41
|
if (disabled) {
|
46
42
|
return;
|
47
43
|
}
|
48
|
-
|
49
|
-
|
44
|
+
if (onChange) {
|
45
|
+
onChange(key, !value);
|
46
|
+
}
|
50
47
|
};
|
51
48
|
var onKeyPress = function onKeyPress(event) {
|
52
49
|
if (disabled) {
|
53
50
|
return;
|
54
51
|
}
|
55
52
|
event.persist();
|
56
|
-
if (event.keyCode === 13) {
|
53
|
+
if (event.keyCode === 13 || event.keyCode === 32) {
|
57
54
|
handleOpen();
|
58
55
|
}
|
59
56
|
};
|
60
57
|
var leftContentRef = (0, _react.useRef)(null);
|
61
58
|
(0, _react.useEffect)(function () {
|
62
59
|
var _leftContentRef$curre, _leftContentRef$curre2;
|
63
|
-
setShow(value);
|
64
60
|
var leftContentWidth = (_leftContentRef$curre = leftContentRef === null || leftContentRef === void 0 || (_leftContentRef$curre2 = leftContentRef.current) === null || _leftContentRef$curre2 === void 0 ? void 0 : _leftContentRef$curre2.offsetWidth) !== null && _leftContentRef$curre !== void 0 ? _leftContentRef$curre : 0;
|
65
61
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(_Accordion.tokens.accordionItemGap, "))") : 0;
|
66
62
|
setLeftPadding(leftPaddingBody);
|
67
63
|
}, [value, type, leftContentRef, setLeftPadding]);
|
68
|
-
var
|
64
|
+
var openedBodyClass = value ? _Accordion.classes.accordionItemShowBody : undefined;
|
69
65
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
70
66
|
return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
|
71
67
|
size: "xs",
|
@@ -73,7 +69,7 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
73
69
|
})), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
|
74
70
|
size: "xs",
|
75
71
|
color: "inhert",
|
76
|
-
className:
|
72
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : _Accordion.classes.accordionPlusAnimationElement
|
77
73
|
}));
|
78
74
|
};
|
79
75
|
var accordionBorderRadius = (0, _roundness.convertRoundnessMatrix)(pin, "var(".concat(_Accordion.tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
@@ -82,9 +78,9 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
82
78
|
size: "xs",
|
83
79
|
color: "inhert"
|
84
80
|
})) : undefined;
|
85
|
-
var leftContentRotate = type === 'arrow' &&
|
81
|
+
var leftContentRotate = type === 'arrow' && value ? _Accordion.classes.accordionItemShowBody : undefined;
|
86
82
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPLus, null) : undefined;
|
87
|
-
var rightContentRotate = type === 'sign' &&
|
83
|
+
var rightContentRotate = type === 'sign' && value ? _Accordion.classes.accordionItemShowBody : undefined;
|
88
84
|
return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionItem, {
|
89
85
|
role: "tab",
|
90
86
|
className: _Accordion.classes.accordionItem,
|
@@ -100,10 +96,10 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
100
96
|
}, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentLeft, {
|
101
97
|
ref: leftContentRef,
|
102
98
|
className: leftContentRotate
|
103
|
-
}, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null,
|
99
|
+
}, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
|
104
100
|
className: rightContentRotate
|
105
101
|
}, rightContent && rightContent)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBodyAnimate, {
|
106
|
-
className:
|
102
|
+
className: openedBodyClass,
|
107
103
|
style: {
|
108
104
|
paddingLeft: "".concat(leftPadding)
|
109
105
|
}
|
@@ -12,10 +12,10 @@ var updatePropsRecursively = exports.updatePropsRecursively = function updatePro
|
|
12
12
|
}
|
13
13
|
var props = {
|
14
14
|
index: index,
|
15
|
-
value: !!(activeIndex
|
15
|
+
value: !!((activeIndex === null || activeIndex === void 0 ? void 0 : activeIndex.findIndex(function (i) {
|
16
16
|
var _child$props$eventKey;
|
17
17
|
return i === ((_child$props$eventKey = child.props.eventKey) !== null && _child$props$eventKey !== void 0 ? _child$props$eventKey : index);
|
18
|
-
})),
|
18
|
+
})) !== -1),
|
19
19
|
disabled: disabled,
|
20
20
|
onChange: updateValue
|
21
21
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx
CHANGED
@@ -15,7 +15,7 @@ const meta: Meta<typeof Accordion> = {
|
|
15
15
|
decorators: [WithTheme],
|
16
16
|
component: Accordion,
|
17
17
|
args: {
|
18
|
-
singleActive:
|
18
|
+
singleActive: false,
|
19
19
|
view: 'default',
|
20
20
|
size: 'm',
|
21
21
|
stretching: 'filled',
|
@@ -51,7 +51,7 @@ export const Default: StoryObj<ComponentProps<typeof Accordion>> = {
|
|
51
51
|
|
52
52
|
return (
|
53
53
|
<Accordion {...args}>
|
54
|
-
<AccordionItem type={args.type} pin={args.pin} title={args.title}
|
54
|
+
<AccordionItem type={args.type} pin={args.pin} title={args.title}>
|
55
55
|
{args.body}
|
56
56
|
</AccordionItem>
|
57
57
|
<AccordionItem type={args.type} pin={args.pin} title={args.title}>
|
@@ -21,39 +21,44 @@ export var accordionRoot = function accordionRoot(Root) {
|
|
21
21
|
view = _ref.view,
|
22
22
|
_ref$stretching = _ref.stretching,
|
23
23
|
stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching,
|
24
|
-
_ref$
|
25
|
-
|
24
|
+
_ref$defaultActiveEve = _ref.defaultActiveEventKey,
|
25
|
+
defaultActiveEventKey = _ref$defaultActiveEve === void 0 ? [] : _ref$defaultActiveEve,
|
26
26
|
children = _ref.children,
|
27
27
|
disabled = _ref.disabled,
|
28
28
|
className = _ref.className,
|
29
29
|
singleActive = _ref.singleActive,
|
30
30
|
onChange = _ref.onChange;
|
31
31
|
var stretchingClass = classes["".concat(stretching, "Stretching")];
|
32
|
-
var _useState = useState(
|
32
|
+
var _useState = useState(defaultActiveEventKey),
|
33
33
|
_useState2 = _slicedToArray(_useState, 2),
|
34
34
|
activeIndex = _useState2[0],
|
35
35
|
setActiveIndex = _useState2[1];
|
36
36
|
var updateValue = function updateValue(index, value) {
|
37
|
-
|
37
|
+
if (onChange) {
|
38
|
+
onChange(index, value);
|
39
|
+
}
|
38
40
|
if (singleActive) {
|
39
|
-
|
41
|
+
if (value) {
|
42
|
+
setActiveIndex([index]);
|
43
|
+
} else {
|
44
|
+
setActiveIndex([]);
|
45
|
+
}
|
40
46
|
} else if (value) {
|
41
47
|
setActiveIndex([index].concat(_toConsumableArray(activeIndex)));
|
42
48
|
} else {
|
43
|
-
var
|
44
|
-
return i
|
49
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
50
|
+
return i !== index;
|
45
51
|
});
|
46
|
-
setActiveIndex(
|
52
|
+
setActiveIndex(updatedActiveIndex);
|
47
53
|
}
|
48
54
|
};
|
49
55
|
var childrenArray = Children.toArray(children);
|
50
|
-
var childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);
|
51
56
|
return /*#__PURE__*/React.createElement(Root, {
|
52
57
|
ref: outerRootRef,
|
53
58
|
size: size,
|
54
59
|
view: view,
|
55
60
|
className: cx(stretchingClass, classes.accordionRoot, className)
|
56
|
-
},
|
61
|
+
}, getChildren(childrenArray, activeIndex, disabled, updateValue));
|
57
62
|
});
|
58
63
|
};
|
59
64
|
export var accordionConfig = {
|
@@ -24,39 +24,35 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
24
24
|
disabled = _ref.disabled,
|
25
25
|
onChange = _ref.onChange;
|
26
26
|
var key = eventKey !== null && eventKey !== void 0 ? eventKey : index;
|
27
|
-
var _useState = useState(
|
27
|
+
var _useState = useState(),
|
28
28
|
_useState2 = _slicedToArray(_useState, 2),
|
29
|
-
|
30
|
-
|
31
|
-
var _useState3 = useState(),
|
32
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
33
|
-
leftPadding = _useState4[0],
|
34
|
-
setLeftPadding = _useState4[1];
|
29
|
+
leftPadding = _useState2[0],
|
30
|
+
setLeftPadding = _useState2[1];
|
35
31
|
var handleOpen = function handleOpen() {
|
36
32
|
if (disabled) {
|
37
33
|
return;
|
38
34
|
}
|
39
|
-
|
40
|
-
|
35
|
+
if (onChange) {
|
36
|
+
onChange(key, !value);
|
37
|
+
}
|
41
38
|
};
|
42
39
|
var onKeyPress = function onKeyPress(event) {
|
43
40
|
if (disabled) {
|
44
41
|
return;
|
45
42
|
}
|
46
43
|
event.persist();
|
47
|
-
if (event.keyCode === 13) {
|
44
|
+
if (event.keyCode === 13 || event.keyCode === 32) {
|
48
45
|
handleOpen();
|
49
46
|
}
|
50
47
|
};
|
51
48
|
var leftContentRef = useRef(null);
|
52
49
|
useEffect(function () {
|
53
50
|
var _leftContentRef$curre, _leftContentRef$curre2;
|
54
|
-
setShow(value);
|
55
51
|
var leftContentWidth = (_leftContentRef$curre = leftContentRef === null || leftContentRef === void 0 || (_leftContentRef$curre2 = leftContentRef.current) === null || _leftContentRef$curre2 === void 0 ? void 0 : _leftContentRef$curre2.offsetWidth) !== null && _leftContentRef$curre !== void 0 ? _leftContentRef$curre : 0;
|
56
52
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
|
57
53
|
setLeftPadding(leftPaddingBody);
|
58
54
|
}, [value, type, leftContentRef, setLeftPadding]);
|
59
|
-
var
|
55
|
+
var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
|
60
56
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
61
57
|
return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
|
62
58
|
size: "xs",
|
@@ -64,7 +60,7 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
64
60
|
})), /*#__PURE__*/React.createElement(StyledMinus, {
|
65
61
|
size: "xs",
|
66
62
|
color: "inhert",
|
67
|
-
className:
|
63
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement
|
68
64
|
}));
|
69
65
|
};
|
70
66
|
var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
@@ -73,9 +69,9 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
73
69
|
size: "xs",
|
74
70
|
color: "inhert"
|
75
71
|
})) : undefined;
|
76
|
-
var leftContentRotate = type === 'arrow' &&
|
72
|
+
var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
|
77
73
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
78
|
-
var rightContentRotate = type === 'sign' &&
|
74
|
+
var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
|
79
75
|
return /*#__PURE__*/React.createElement(StyledAccordionItem, {
|
80
76
|
role: "tab",
|
81
77
|
className: classes.accordionItem,
|
@@ -91,10 +87,10 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
91
87
|
}, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
|
92
88
|
ref: leftContentRef,
|
93
89
|
className: leftContentRotate
|
94
|
-
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null,
|
90
|
+
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
|
95
91
|
className: rightContentRotate
|
96
92
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
|
97
|
-
className:
|
93
|
+
className: openedBodyClass,
|
98
94
|
style: {
|
99
95
|
paddingLeft: "".concat(leftPadding)
|
100
96
|
}
|
@@ -6,10 +6,10 @@ export var updatePropsRecursively = function updatePropsRecursively(children, ac
|
|
6
6
|
}
|
7
7
|
var props = {
|
8
8
|
index: index,
|
9
|
-
value: !!(activeIndex
|
9
|
+
value: !!((activeIndex === null || activeIndex === void 0 ? void 0 : activeIndex.findIndex(function (i) {
|
10
10
|
var _child$props$eventKey;
|
11
11
|
return i === ((_child$props$eventKey = child.props.eventKey) !== null && _child$props$eventKey !== void 0 ? _child$props$eventKey : index);
|
12
|
-
})),
|
12
|
+
})) !== -1),
|
13
13
|
disabled: disabled,
|
14
14
|
onChange: updateValue
|
15
15
|
};
|
@@ -15,7 +15,7 @@ const meta: Meta<typeof Accordion> = {
|
|
15
15
|
decorators: [WithTheme],
|
16
16
|
component: Accordion,
|
17
17
|
args: {
|
18
|
-
singleActive:
|
18
|
+
singleActive: false,
|
19
19
|
view: 'default',
|
20
20
|
size: 'm',
|
21
21
|
stretching: 'filled',
|
@@ -51,7 +51,7 @@ export const Default: StoryObj<ComponentProps<typeof Accordion>> = {
|
|
51
51
|
|
52
52
|
return (
|
53
53
|
<Accordion {...args}>
|
54
|
-
<AccordionItem type={args.type} pin={args.pin} title={args.title}
|
54
|
+
<AccordionItem type={args.type} pin={args.pin} title={args.title}>
|
55
55
|
{args.body}
|
56
56
|
</AccordionItem>
|
57
57
|
<AccordionItem type={args.type} pin={args.pin} title={args.title}>
|
@@ -5,7 +5,7 @@ export declare const accordionRoot: (Root: RootPropsOmitOnChange<HTMLDivElement,
|
|
5
5
|
view: string;
|
6
6
|
size?: string | undefined;
|
7
7
|
singleActive?: boolean | undefined;
|
8
|
-
|
8
|
+
defaultActiveEventKey?: number[] | undefined;
|
9
9
|
disabled?: boolean | undefined;
|
10
10
|
stretching?: "fixed" | "filled" | undefined;
|
11
11
|
onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined;
|
@@ -19,7 +19,7 @@ export declare const accordionConfig: {
|
|
19
19
|
view: string;
|
20
20
|
size?: string | undefined;
|
21
21
|
singleActive?: boolean | undefined;
|
22
|
-
|
22
|
+
defaultActiveEventKey?: number[] | undefined;
|
23
23
|
disabled?: boolean | undefined;
|
24
24
|
stretching?: "fixed" | "filled" | undefined;
|
25
25
|
onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOxD,eAAO,MAAM,aAAa,SAAU,sBAAsB,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOxD,eAAO,MAAM,aAAa,SAAU,sBAAsB,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;wCAkDpF,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBApDQ,sBAAsB,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAqExF,CAAC"}
|
@@ -15,7 +15,7 @@ declare type CustomAccordionProps = {
|
|
15
15
|
/**
|
16
16
|
* Индекс элемента, который должен быть изначально раскрыт
|
17
17
|
*/
|
18
|
-
|
18
|
+
defaultActiveEventKey?: number[];
|
19
19
|
/**
|
20
20
|
* Блокировка всех элементов
|
21
21
|
*/
|
@@ -25,7 +25,7 @@ declare type CustomAccordionProps = {
|
|
25
25
|
*/
|
26
26
|
stretching?: 'fixed' | 'filled';
|
27
27
|
/**
|
28
|
-
*
|
28
|
+
* Коллбэк при открытии или закрытии элемента аккордеона
|
29
29
|
*/
|
30
30
|
onChange?: (index?: number, value?: boolean) => void;
|
31
31
|
children?: ReactNode;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,aAAK,oBAAoB,GAAG;IACxB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,
|
1
|
+
{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,aAAK,oBAAoB,GAAG;IACxB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEhC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAErD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,cAAc,GAAG,oBAAoB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA8C,MAAM,OAAO,CAAC;AAkB1F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,kBAAkB,
|
1
|
+
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA8C,MAAM,OAAO,CAAC;AAkB1F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,kBAAkB,CA8FvF,CAAC"}
|
@@ -15,7 +15,7 @@ export declare const Accordion: import("react").FunctionComponent<import("../../
|
|
15
15
|
view: string;
|
16
16
|
size?: string | undefined;
|
17
17
|
singleActive?: boolean | undefined;
|
18
|
-
|
18
|
+
defaultActiveEventKey?: number[] | undefined;
|
19
19
|
disabled?: boolean | undefined;
|
20
20
|
stretching?: "fixed" | "filled" | undefined;
|
21
21
|
onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined;
|
@@ -19,7 +19,7 @@ export declare const Accordion: import("react").FunctionComponent<import("../../
|
|
19
19
|
view: string;
|
20
20
|
size?: string | undefined;
|
21
21
|
singleActive?: boolean | undefined;
|
22
|
-
|
22
|
+
defaultActiveEventKey?: number[] | undefined;
|
23
23
|
disabled?: boolean | undefined;
|
24
24
|
stretching?: "fixed" | "filled" | undefined;
|
25
25
|
onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined;
|