@salutejs/plasma-new-hope 0.88.0-canary.1223.9447085309.0 → 0.88.0-canary.1223.9455252491.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/Accordion.js +11 -7
- package/cjs/components/Accordion/Accordion.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +9 -14
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/Accordion/Accordion.js +11 -7
- package/es/components/Accordion/Accordion.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +9 -14
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.js +11 -7
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +9 -14
- package/styled-components/es/components/Accordion/Accordion.js +11 -7
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +9 -14
- 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
|
@@ -17,29 +17,33 @@ 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
|
onChange && onChange(index, value);
|
|
34
34
|
if (singleActive) {
|
|
35
|
-
|
|
35
|
+
if (value) {
|
|
36
|
+
setActiveIndex([index]);
|
|
37
|
+
} else {
|
|
38
|
+
setActiveIndex([]);
|
|
39
|
+
}
|
|
36
40
|
} else if (value) {
|
|
37
41
|
setActiveIndex([index].concat(_rollupPluginBabelHelpers.toConsumableArray(activeIndex)));
|
|
38
42
|
} else {
|
|
39
|
-
var
|
|
40
|
-
return i
|
|
43
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
|
44
|
+
return i !== index;
|
|
41
45
|
});
|
|
42
|
-
setActiveIndex(
|
|
46
|
+
setActiveIndex(updatedActiveIndex);
|
|
43
47
|
}
|
|
44
48
|
};
|
|
45
49
|
var childrenArray = React.Children.toArray(children);
|
|
@@ -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 onChange && onChange(index, value);\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\n const childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);\n\n return (\n <Root\n ref={outerRootRef}\n size={size}\n view={view}\n className={cx(stretchingClass, classes.accordionRoot, className)}\n >\n {childrenMemo}\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","childrenMemo","getChildren","React","createElement","ref","cx","accordionConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;;;;;;;IAYaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,IAA2D,EAAA;AAAA,EAAA,oBACrFC,gBAAU,CACN,UAAAC,IAAA,EAYIC,YAAY,EACX;AAAA,IAAA,IAXGC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAAC,eAAA,GAAAJ,IAAA,CACJK,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;MAAAE,qBAAA,GAAAN,IAAA,CACrBO,qBAAqB;AAArBA,MAAAA,qBAAqB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,qBAAA;MAC1BE,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;MACRC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;MACRC,SAAS,GAAAV,IAAA,CAATU,SAAS;MACTC,YAAY,GAAAX,IAAA,CAAZW,YAAY;MACZC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ,CAAA;AAIZ,IAAA,IAAMC,eAAe,GAAGC,wBAAO,IAAAC,MAAA,CAAIV,UAAU,EAAqC,YAAA,CAAA,CAAA,CAAA;AAElF,IAAA,IAAAW,SAAA,GAAsCC,cAAQ,CAAWV,qBAAqB,CAAC;MAAAW,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAxEI,MAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;IAElC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAa,EAAEC,KAAe,EAAK;AACpDZ,MAAAA,QAAQ,IAAIA,QAAQ,CAACW,KAAK,EAAEC,KAAK,CAAC,CAAA;AAClC,MAAA,IAAIb,YAAY,EAAE;AACd,QAAA,IAAIa,KAAK,EAAE;AACPH,UAAAA,cAAc,CAAC,CAACE,KAAK,CAAC,CAAC,CAAA;AAC3B,SAAC,MAAM;UACHF,cAAc,CAAC,EAAE,CAAC,CAAA;AACtB,SAAA;OACH,MAAM,IAAIG,KAAK,EAAE;QACdH,cAAc,CAAA,CAAEE,KAAK,CAAAR,CAAAA,MAAA,CAAAU,2CAAA,CAAKL,WAAW,CAAA,CAAC,CAAC,CAAA;AAC3C,OAAC,MAAM;AACH,QAAA,IAAMM,kBAAkB,GAAGN,WAAW,CAACO,MAAM,CAAC,UAACC,CAAC,EAAA;UAAA,OAAKA,CAAC,KAAKL,KAAK,CAAA;SAAC,CAAA,CAAA;QACjEF,cAAc,CAACK,kBAAkB,CAAC,CAAA;AACtC,OAAA;KACH,CAAA;AAED,IAAA,IAAMG,aAAa,GAAGC,cAAQ,CAACC,OAAO,CAACvB,QAAQ,CAAyB,CAAA;IAExE,IAAMwB,YAAY,GAAGC,iBAAW,CAACJ,aAAa,EAAET,WAAW,EAAEX,QAAQ,EAAEa,WAAW,CAAC,CAAA;AAEnF,IAAA,oBACIY,KAAA,CAAAC,aAAA,CAACrC,IAAI,EAAA;AACDsC,MAAAA,GAAG,EAAEnC,YAAa;AAClBC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXO,SAAS,EAAE2B,UAAE,CAACxB,eAAe,EAAEC,wBAAO,CAACjB,aAAa,EAAEa,SAAS,CAAA;AAAE,KAAA,EAEhEsB,YACC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMM,eAAe,GAAG;AAC3BC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE5C,aAAa;AACrB6C,EAAAA,IAAI,EAAJA,qBAAI;AACJC,EAAAA,UAAU,EAAE;AACRxC,IAAAA,IAAI,EAAE;AACFyC,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACD3C,IAAAA,IAAI,EAAE;AACF0C,MAAAA,GAAG,EAAEE,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACN5C,IAAAA,IAAI,EAAE,SAAS;AACfD,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;;"}
|
|
@@ -24,20 +24,15 @@ 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
|
-
onChange && onChange(key, !isOpen);
|
|
35
|
+
onChange && onChange(key, !value);
|
|
41
36
|
};
|
|
42
37
|
var onKeyPress = function onKeyPress(event) {
|
|
43
38
|
if (disabled) {
|
|
@@ -55,7 +50,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
55
50
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(Accordion_tokens.tokens.accordionItemGap, "))") : 0;
|
|
56
51
|
setLeftPadding(leftPaddingBody);
|
|
57
52
|
}, [value, type, leftContentRef, setLeftPadding]);
|
|
58
|
-
var
|
|
53
|
+
var openedBodyClass = value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
|
59
54
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
|
60
55
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
|
|
61
56
|
size: "xs",
|
|
@@ -63,7 +58,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
63
58
|
})), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
|
|
64
59
|
size: "xs",
|
|
65
60
|
color: "inhert",
|
|
66
|
-
className:
|
|
61
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : Accordion_tokens.classes.accordionPlusAnimationElement
|
|
67
62
|
}));
|
|
68
63
|
};
|
|
69
64
|
var accordionBorderRadius = roundness.convertRoundnessMatrix(pin, "var(".concat(Accordion_tokens.tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
|
@@ -72,9 +67,9 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
72
67
|
size: "xs",
|
|
73
68
|
color: "inhert"
|
|
74
69
|
})) : undefined;
|
|
75
|
-
var leftContentRotate = type === 'arrow' &&
|
|
70
|
+
var leftContentRotate = type === 'arrow' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
|
76
71
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
|
77
|
-
var rightContentRotate = type === 'sign' &&
|
|
72
|
+
var rightContentRotate = type === 'sign' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
|
78
73
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionItem, {
|
|
79
74
|
role: "tab",
|
|
80
75
|
className: Accordion_tokens.classes.accordionItem,
|
|
@@ -93,7 +88,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
93
88
|
}, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentRight, {
|
|
94
89
|
className: rightContentRotate
|
|
95
90
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBodyAnimate, {
|
|
96
|
-
className:
|
|
91
|
+
className: openedBodyClass,
|
|
97
92
|
style: {
|
|
98
93
|
paddingLeft: "".concat(leftPadding)
|
|
99
94
|
}
|
|
@@ -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 [
|
|
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 onChange && onChange(key, !value);\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 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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"}
|
|
@@ -13,29 +13,33 @@ 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
|
onChange && onChange(index, value);
|
|
30
30
|
if (singleActive) {
|
|
31
|
-
|
|
31
|
+
if (value) {
|
|
32
|
+
setActiveIndex([index]);
|
|
33
|
+
} else {
|
|
34
|
+
setActiveIndex([]);
|
|
35
|
+
}
|
|
32
36
|
} else if (value) {
|
|
33
37
|
setActiveIndex([index].concat(_toConsumableArray(activeIndex)));
|
|
34
38
|
} else {
|
|
35
|
-
var
|
|
36
|
-
return i
|
|
39
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
|
40
|
+
return i !== index;
|
|
37
41
|
});
|
|
38
|
-
setActiveIndex(
|
|
42
|
+
setActiveIndex(updatedActiveIndex);
|
|
39
43
|
}
|
|
40
44
|
};
|
|
41
45
|
var childrenArray = Children.toArray(children);
|
|
@@ -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 onChange && onChange(index, value);\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\n const childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);\n\n return (\n <Root\n ref={outerRootRef}\n size={size}\n view={view}\n className={cx(stretchingClass, classes.accordionRoot, className)}\n >\n {childrenMemo}\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","childrenMemo","getChildren","React","createElement","ref","cx","accordionConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
|
@@ -20,20 +20,15 @@ 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
|
-
onChange && onChange(key, !isOpen);
|
|
31
|
+
onChange && onChange(key, !value);
|
|
37
32
|
};
|
|
38
33
|
var onKeyPress = function onKeyPress(event) {
|
|
39
34
|
if (disabled) {
|
|
@@ -51,7 +46,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
51
46
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
|
|
52
47
|
setLeftPadding(leftPaddingBody);
|
|
53
48
|
}, [value, type, leftContentRef, setLeftPadding]);
|
|
54
|
-
var
|
|
49
|
+
var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
|
|
55
50
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
|
56
51
|
return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
|
|
57
52
|
size: "xs",
|
|
@@ -59,7 +54,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
59
54
|
})), /*#__PURE__*/React.createElement(StyledMinus, {
|
|
60
55
|
size: "xs",
|
|
61
56
|
color: "inhert",
|
|
62
|
-
className:
|
|
57
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement
|
|
63
58
|
}));
|
|
64
59
|
};
|
|
65
60
|
var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
|
@@ -68,9 +63,9 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
68
63
|
size: "xs",
|
|
69
64
|
color: "inhert"
|
|
70
65
|
})) : undefined;
|
|
71
|
-
var leftContentRotate = type === 'arrow' &&
|
|
66
|
+
var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
|
|
72
67
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
|
73
|
-
var rightContentRotate = type === 'sign' &&
|
|
68
|
+
var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
|
|
74
69
|
return /*#__PURE__*/React.createElement(StyledAccordionItem, {
|
|
75
70
|
role: "tab",
|
|
76
71
|
className: classes.accordionItem,
|
|
@@ -89,7 +84,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
|
89
84
|
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
|
|
90
85
|
className: rightContentRotate
|
|
91
86
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
|
|
92
|
-
className:
|
|
87
|
+
className: openedBodyClass,
|
|
93
88
|
style: {
|
|
94
89
|
paddingLeft: "".concat(leftPadding)
|
|
95
90
|
}
|
|
@@ -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 [
|
|
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 onChange && onChange(key, !value);\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 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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"}
|
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.9455252491.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": "30560ca8f3c4ab42f816c70f937e2eff313616f1"
|
|
107
107
|
}
|
|
@@ -30,29 +30,33 @@ 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
|
onChange && onChange(index, value);
|
|
47
47
|
if (singleActive) {
|
|
48
|
-
|
|
48
|
+
if (value) {
|
|
49
|
+
setActiveIndex([index]);
|
|
50
|
+
} else {
|
|
51
|
+
setActiveIndex([]);
|
|
52
|
+
}
|
|
49
53
|
} else if (value) {
|
|
50
54
|
setActiveIndex([index].concat(_toConsumableArray(activeIndex)));
|
|
51
55
|
} else {
|
|
52
|
-
var
|
|
53
|
-
return i
|
|
56
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
|
57
|
+
return i !== index;
|
|
54
58
|
});
|
|
55
|
-
setActiveIndex(
|
|
59
|
+
setActiveIndex(updatedActiveIndex);
|
|
56
60
|
}
|
|
57
61
|
};
|
|
58
62
|
var childrenArray = _react.Children.toArray(children);
|
|
@@ -33,20 +33,15 @@ 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
|
-
onChange && onChange(key, !isOpen);
|
|
44
|
+
onChange && onChange(key, !value);
|
|
50
45
|
};
|
|
51
46
|
var onKeyPress = function onKeyPress(event) {
|
|
52
47
|
if (disabled) {
|
|
@@ -64,7 +59,7 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
|
64
59
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(_Accordion.tokens.accordionItemGap, "))") : 0;
|
|
65
60
|
setLeftPadding(leftPaddingBody);
|
|
66
61
|
}, [value, type, leftContentRef, setLeftPadding]);
|
|
67
|
-
var
|
|
62
|
+
var openedBodyClass = value ? _Accordion.classes.accordionItemShowBody : undefined;
|
|
68
63
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
|
69
64
|
return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
|
|
70
65
|
size: "xs",
|
|
@@ -72,7 +67,7 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
|
72
67
|
})), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
|
|
73
68
|
size: "xs",
|
|
74
69
|
color: "inhert",
|
|
75
|
-
className:
|
|
70
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : _Accordion.classes.accordionPlusAnimationElement
|
|
76
71
|
}));
|
|
77
72
|
};
|
|
78
73
|
var accordionBorderRadius = (0, _roundness.convertRoundnessMatrix)(pin, "var(".concat(_Accordion.tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
|
@@ -81,9 +76,9 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
|
81
76
|
size: "xs",
|
|
82
77
|
color: "inhert"
|
|
83
78
|
})) : undefined;
|
|
84
|
-
var leftContentRotate = type === 'arrow' &&
|
|
79
|
+
var leftContentRotate = type === 'arrow' && value ? _Accordion.classes.accordionItemShowBody : undefined;
|
|
85
80
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPLus, null) : undefined;
|
|
86
|
-
var rightContentRotate = type === 'sign' &&
|
|
81
|
+
var rightContentRotate = type === 'sign' && value ? _Accordion.classes.accordionItemShowBody : undefined;
|
|
87
82
|
return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionItem, {
|
|
88
83
|
role: "tab",
|
|
89
84
|
className: _Accordion.classes.accordionItem,
|
|
@@ -102,7 +97,7 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
|
|
102
97
|
}, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
|
|
103
98
|
className: rightContentRotate
|
|
104
99
|
}, rightContent && rightContent)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBodyAnimate, {
|
|
105
|
-
className:
|
|
100
|
+
className: openedBodyClass,
|
|
106
101
|
style: {
|
|
107
102
|
paddingLeft: "".concat(leftPadding)
|
|
108
103
|
}
|
|
@@ -21,29 +21,33 @@ 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
|
onChange && onChange(index, value);
|
|
38
38
|
if (singleActive) {
|
|
39
|
-
|
|
39
|
+
if (value) {
|
|
40
|
+
setActiveIndex([index]);
|
|
41
|
+
} else {
|
|
42
|
+
setActiveIndex([]);
|
|
43
|
+
}
|
|
40
44
|
} else if (value) {
|
|
41
45
|
setActiveIndex([index].concat(_toConsumableArray(activeIndex)));
|
|
42
46
|
} else {
|
|
43
|
-
var
|
|
44
|
-
return i
|
|
47
|
+
var updatedActiveIndex = activeIndex.filter(function (i) {
|
|
48
|
+
return i !== index;
|
|
45
49
|
});
|
|
46
|
-
setActiveIndex(
|
|
50
|
+
setActiveIndex(updatedActiveIndex);
|
|
47
51
|
}
|
|
48
52
|
};
|
|
49
53
|
var childrenArray = Children.toArray(children);
|
|
@@ -24,20 +24,15 @@ 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
|
-
onChange && onChange(key, !isOpen);
|
|
35
|
+
onChange && onChange(key, !value);
|
|
41
36
|
};
|
|
42
37
|
var onKeyPress = function onKeyPress(event) {
|
|
43
38
|
if (disabled) {
|
|
@@ -55,7 +50,7 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
|
55
50
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
|
|
56
51
|
setLeftPadding(leftPaddingBody);
|
|
57
52
|
}, [value, type, leftContentRef, setLeftPadding]);
|
|
58
|
-
var
|
|
53
|
+
var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
|
|
59
54
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
|
60
55
|
return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
|
|
61
56
|
size: "xs",
|
|
@@ -63,7 +58,7 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
|
63
58
|
})), /*#__PURE__*/React.createElement(StyledMinus, {
|
|
64
59
|
size: "xs",
|
|
65
60
|
color: "inhert",
|
|
66
|
-
className:
|
|
61
|
+
className: openedBodyClass !== null && openedBodyClass !== void 0 ? openedBodyClass : classes.accordionPlusAnimationElement
|
|
67
62
|
}));
|
|
68
63
|
};
|
|
69
64
|
var accordionBorderRadius = convertRoundnessMatrix(pin, "var(".concat(tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
|
@@ -72,9 +67,9 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
|
72
67
|
size: "xs",
|
|
73
68
|
color: "inhert"
|
|
74
69
|
})) : undefined;
|
|
75
|
-
var leftContentRotate = type === 'arrow' &&
|
|
70
|
+
var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
|
|
76
71
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
|
77
|
-
var rightContentRotate = type === 'sign' &&
|
|
72
|
+
var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
|
|
78
73
|
return /*#__PURE__*/React.createElement(StyledAccordionItem, {
|
|
79
74
|
role: "tab",
|
|
80
75
|
className: classes.accordionItem,
|
|
@@ -93,7 +88,7 @@ export var AccordionItem = function AccordionItem(_ref) {
|
|
|
93
88
|
}, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
|
|
94
89
|
className: rightContentRotate
|
|
95
90
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
|
|
96
|
-
className:
|
|
91
|
+
className: openedBodyClass,
|
|
97
92
|
style: {
|
|
98
93
|
paddingLeft: "".concat(leftPadding)
|
|
99
94
|
}
|
|
@@ -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;;;;;;;;;;wCAmDpF,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBArDQ,sBAAsB,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAsExF,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,CA4FvF,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;
|