@salutejs/plasma-new-hope 0.170.0-canary.1484.11388945571.0 → 0.170.0-canary.1488.11387414081.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/cjs/components/ViewContainer/ViewContainer.js +38 -0
- package/cjs/components/ViewContainer/ViewContainer.js.map +1 -0
- package/cjs/components/ViewContainer/ViewContainer_yiqfcb.css +1 -0
- package/cjs/components/ViewContainer/_view/base.js +9 -0
- package/cjs/components/ViewContainer/_view/base.js.map +1 -0
- package/cjs/components/ViewContainer/_view/base_x642ct.css +1 -0
- package/cjs/index.css +2 -0
- package/cjs/index.js +3 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +0 -32
- package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
- package/emotion/cjs/components/ViewContainer/ViewContainer.js +49 -0
- package/emotion/cjs/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
- package/emotion/cjs/components/ViewContainer/_view/base.js +8 -0
- package/emotion/cjs/components/ViewContainer/_view/tokens.json +1 -0
- package/emotion/cjs/components/ViewContainer/index.js +18 -0
- package/emotion/cjs/examples/_helpers.js +3 -14
- package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
- package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +16 -0
- package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
- package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +16 -0
- package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.js +11 -0
- package/emotion/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Accordion/Accordion.template-doc.mdx +0 -32
- package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
- package/emotion/es/components/ViewContainer/ViewContainer.js +40 -0
- package/emotion/es/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
- package/emotion/es/components/ViewContainer/_view/base.js +2 -0
- package/emotion/es/components/ViewContainer/_view/tokens.json +1 -0
- package/emotion/es/components/ViewContainer/index.js +1 -0
- package/emotion/es/examples/_helpers.js +3 -14
- package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
- package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +10 -0
- package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
- package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +10 -0
- package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.js +5 -0
- package/emotion/es/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/emotion/es/index.js +2 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/ViewContainer/ViewContainer.js +33 -0
- package/es/components/ViewContainer/ViewContainer.js.map +1 -0
- package/es/components/ViewContainer/ViewContainer_yiqfcb.css +1 -0
- package/es/components/ViewContainer/_view/base.js +5 -0
- package/es/components/ViewContainer/_view/base.js.map +1 -0
- package/es/components/ViewContainer/_view/base_x642ct.css +1 -0
- package/es/index.css +2 -0
- package/es/index.js +1 -0
- package/es/index.js.map +1 -1
- package/package.json +3 -2
- package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +0 -32
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
- package/styled-components/cjs/components/ViewContainer/ViewContainer.js +40 -0
- package/styled-components/cjs/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
- package/styled-components/cjs/components/ViewContainer/_view/base.js +8 -0
- package/styled-components/cjs/components/ViewContainer/_view/tokens.json +1 -0
- package/styled-components/cjs/components/ViewContainer/index.js +18 -0
- package/styled-components/cjs/examples/_helpers.js +3 -14
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
- package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +16 -0
- package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
- package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +16 -0
- package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +0 -32
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
- package/styled-components/es/components/ViewContainer/ViewContainer.js +31 -0
- package/styled-components/es/components/ViewContainer/ViewContainer.template-doc.mdx +82 -0
- package/styled-components/es/components/ViewContainer/_view/base.js +2 -0
- package/styled-components/es/components/ViewContainer/_view/tokens.json +1 -0
- package/styled-components/es/components/ViewContainer/index.js +1 -0
- package/styled-components/es/examples/_helpers.js +3 -14
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
- package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.js +10 -0
- package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
- package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.config.js +10 -0
- package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.js +5 -0
- package/styled-components/es/examples/plasma_web/components/ViewContainer/ViewContainer.stories.tsx +65 -0
- package/styled-components/es/index.js +2 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts +2 -17
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +8 -16
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
- package/types/components/ViewContainer/ViewContainer.d.ts +26 -0
- package/types/components/ViewContainer/ViewContainer.d.ts.map +1 -0
- package/types/components/ViewContainer/_view/base.d.ts +2 -0
- package/types/components/ViewContainer/_view/base.d.ts.map +1 -0
- package/types/components/ViewContainer/index.d.ts +2 -0
- package/types/components/ViewContainer/index.d.ts.map +1 -0
- package/types/examples/_helpers.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.d.ts +9 -0
- package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.d.ts +8 -0
- package/types/examples/plasma_b2c/components/ViewContainer/ViewContainer.d.ts.map +1 -0
- package/types/examples/plasma_web/components/ViewContainer/ViewContainer.config.d.ts +9 -0
- package/types/examples/plasma_web/components/ViewContainer/ViewContainer.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/ViewContainer/ViewContainer.d.ts +8 -0
- package/types/examples/plasma_web/components/ViewContainer/ViewContainer.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/emotion/cjs/examples/themes/declaration.d.ts +0 -4
- package/emotion/cjs/examples/themes/index.js +0 -15
- package/emotion/cjs/examples/themes/plasma_b2c.module.css +0 -984
- package/emotion/cjs/examples/themes/plasma_web.module.css +0 -984
- package/emotion/es/examples/themes/declaration.d.ts +0 -4
- package/emotion/es/examples/themes/index.js +0 -7
- package/emotion/es/examples/themes/plasma_b2c.module.css +0 -984
- package/emotion/es/examples/themes/plasma_web.module.css +0 -984
- package/styled-components/cjs/examples/themes/declaration.d.ts +0 -4
- package/styled-components/cjs/examples/themes/index.js +0 -15
- package/styled-components/cjs/examples/themes/plasma_b2c.module.css +0 -984
- package/styled-components/cjs/examples/themes/plasma_web.module.css +0 -984
- package/styled-components/es/examples/themes/declaration.d.ts +0 -4
- package/styled-components/es/examples/themes/index.js +0 -7
- package/styled-components/es/examples/themes/plasma_b2c.module.css +0 -984
- package/styled-components/es/examples/themes/plasma_web.module.css +0 -984
- package/types/examples/themes/index.d.ts +0 -6
- package/types/examples/themes/index.d.ts.map +0 -1
@@ -10,7 +10,7 @@ var index = require('../../../../utils/index.js');
|
|
10
10
|
var AccordionItem_styles = require('./AccordionItem.styles.js');
|
11
11
|
|
12
12
|
var _StyledMinus, _StyledArrow;
|
13
|
-
var AccordionItem =
|
13
|
+
var AccordionItem = function AccordionItem(_ref) {
|
14
14
|
var _ref2;
|
15
15
|
var value = _ref.value,
|
16
16
|
contentRight = _ref.contentRight,
|
@@ -28,10 +28,8 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
28
28
|
disabled = _ref.disabled,
|
29
29
|
_ref$alignWithTitle = _ref.alignWithTitle,
|
30
30
|
alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
|
31
|
-
opened = _ref.opened,
|
32
31
|
view = _ref.view,
|
33
|
-
onChange = _ref.onChange
|
34
|
-
onClick = _ref.onClick;
|
32
|
+
onChange = _ref.onChange;
|
35
33
|
var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index$1) !== null && _ref2 !== void 0 ? _ref2 : 0;
|
36
34
|
var _useState = React.useState(),
|
37
35
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
@@ -44,9 +42,6 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
44
42
|
if (onChange) {
|
45
43
|
onChange(key, !value);
|
46
44
|
}
|
47
|
-
if (onClick) {
|
48
|
-
onClick(key, !value);
|
49
|
-
}
|
50
45
|
};
|
51
46
|
var leftContentRef = React.useRef(null);
|
52
47
|
React.useEffect(function () {
|
@@ -55,11 +50,11 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
55
50
|
var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(Accordion_tokens.tokens.accordionItemGap, "))") : 0;
|
56
51
|
setLeftPadding(leftPaddingBody);
|
57
52
|
}, [value, type, leftContentRef, setLeftPadding]);
|
58
|
-
var openedBodyClass =
|
59
|
-
var
|
53
|
+
var openedBodyClass = value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
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",
|
62
|
-
color: "
|
57
|
+
color: "inhert"
|
63
58
|
})), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
|
64
59
|
size: "xs",
|
65
60
|
color: "inhert",
|
@@ -70,15 +65,14 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
70
65
|
var disabledClass = disabled ? Accordion_tokens.classes.accordionDisabled : '';
|
71
66
|
var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledArrow, {
|
72
67
|
size: "xs",
|
73
|
-
color: "
|
68
|
+
color: "inhert"
|
74
69
|
})) : undefined;
|
75
|
-
var leftContentRotate = type === 'arrow' &&
|
76
|
-
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(
|
77
|
-
var rightContentRotate = type === 'sign' &&
|
70
|
+
var leftContentRotate = type === 'arrow' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
71
|
+
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
72
|
+
var rightContentRotate = type === 'sign' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
78
73
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionItem, {
|
79
74
|
className: index.cx(Accordion_tokens.classes.accordionItem, className, disabledClass),
|
80
75
|
key: key,
|
81
|
-
ref: outerRef,
|
82
76
|
style: _rollupPluginBabelHelpers.objectSpread2({
|
83
77
|
borderRadius: accordionBorderRadius
|
84
78
|
}, style)
|
@@ -86,17 +80,17 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
86
80
|
role: "tab",
|
87
81
|
tabIndex: 0,
|
88
82
|
onClick: handleOpen,
|
89
|
-
"aria-expanded":
|
83
|
+
"aria-expanded": value,
|
90
84
|
"aria-controls": "accordion-item-section".concat(key),
|
91
85
|
id: "accordion-item-".concat(key)
|
92
86
|
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentLeft, {
|
93
87
|
ref: leftContentRef,
|
94
88
|
className: leftContentRotate
|
95
|
-
}, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null, title)),
|
89
|
+
}, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentRight, {
|
96
90
|
className: rightContentRotate
|
97
91
|
}, rightContent && rightContent)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBodyAnimate, {
|
98
92
|
"aria-labelledby": "accordion-item-".concat(key),
|
99
|
-
"aria-hidden": !
|
93
|
+
"aria-hidden": !value,
|
100
94
|
id: "accordion-item-section".concat(key),
|
101
95
|
className: index.cx(openedBodyClass),
|
102
96
|
style: {
|
@@ -105,7 +99,7 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
|
105
99
|
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBody, {
|
106
100
|
className: Accordion_tokens.classes.accordionItemBody
|
107
101
|
}, children)));
|
108
|
-
}
|
102
|
+
};
|
109
103
|
|
110
104
|
exports.AccordionItem = AccordionItem;
|
111
105
|
//# sourceMappingURL=AccordionItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { cx } from '../../../../utils';\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 = forwardRef<HTMLDivElement, AccordionItemProps>(\n (\n {\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n className,\n style,\n eventKey,\n disabled,\n alignWithTitle = true,\n opened,\n view,\n onChange,\n onClick,\n },\n outerRef,\n ) => {\n const key = eventKey ?? index ?? 0;\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 if (onClick) {\n onClick(key, !value);\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody =\n leftContentWidth && (alignWithTitle || view === 'clear')\n ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))`\n : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const openedBodyClass = opened ?? value ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPlus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inherit\" />\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=\"inherit\" /> : undefined);\n const leftContentRotate = type === 'arrow' && (opened ?? value) ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPlus /> : undefined);\n const rightContentRotate = type === 'sign' && (opened ?? value) ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n className={cx(classes.accordionItem, className, disabledClass)}\n key={key}\n ref={outerRef}\n style={{ borderRadius: accordionBorderRadius, ...style }}\n >\n <StyledAccordionHeader\n role=\"tab\"\n tabIndex={0}\n onClick={handleOpen}\n aria-expanded={opened ?? value}\n aria-controls={`accordion-item-section${key}`}\n id={`accordion-item-${key}`}\n >\n <StyledAccordionHeaderLeft>\n {leftContent && (\n <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n {leftContent}\n </StyledAccordionContentLeft>\n )}\n <StyledAccordionTitle>{title}</StyledAccordionTitle>\n </StyledAccordionHeaderLeft>\n\n {contentRight || (\n <StyledAccordionContentRight className={rightContentRotate}>\n {rightContent && rightContent}\n </StyledAccordionContentRight>\n )}\n </StyledAccordionHeader>\n <StyledAccordionBodyAnimate\n aria-labelledby={`accordion-item-${key}`}\n aria-hidden={!(opened ?? value)}\n id={`accordion-item-section${key}`}\n className={cx(openedBodyClass)}\n style={{ paddingLeft: `${leftPadding}` }}\n >\n <StyledAccordionBody className={classes.accordionItemBody}>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n },\n);\n"],"names":["AccordionItem","forwardRef","_ref","outerRef","_ref2","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","className","style","eventKey","disabled","_ref$alignWithTitle","alignWithTitle","opened","view","onChange","onClick","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","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","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","cx","accordionItem","ref","_objectSpread","borderRadius","StyledAccordionHeader","role","tabIndex","id","StyledAccordionHeaderLeft","StyledAccordionContentLeft","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody","accordionItemBody"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { cx } from '../../../../utils';\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<AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n className,\n style,\n eventKey,\n disabled,\n alignWithTitle = true,\n view,\n onChange,\n}) => {\n const key = eventKey ?? index ?? 0;\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 leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody =\n leftContentWidth && (alignWithTitle || view === 'clear')\n ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))`\n : 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 className={cx(classes.accordionItem, className, disabledClass)}\n key={key}\n style={{ borderRadius: accordionBorderRadius, ...style }}\n >\n <StyledAccordionHeader\n role=\"tab\"\n tabIndex={0}\n onClick={handleOpen}\n aria-expanded={value}\n aria-controls={`accordion-item-section${key}`}\n id={`accordion-item-${key}`}\n >\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\n aria-labelledby={`accordion-item-${key}`}\n aria-hidden={!value}\n id={`accordion-item-section${key}`}\n className={cx(openedBodyClass)}\n style={{ paddingLeft: `${leftPadding}` }}\n >\n <StyledAccordionBody className={classes.accordionItemBody}>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","_ref2","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","className","style","eventKey","disabled","_ref$alignWithTitle","alignWithTitle","view","onChange","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","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","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","cx","accordionItem","_objectSpread","borderRadius","StyledAccordionHeader","role","tabIndex","onClick","id","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody","accordionItemBody"],"mappings":"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"}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
import './ViewContainer_yiqfcb.css';
|
2
|
+
'use strict';
|
3
|
+
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
5
|
+
|
6
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
7
|
+
var React = require('react');
|
8
|
+
var base$1 = require('./_view/base.js');
|
9
|
+
|
10
|
+
var _excluded = ["children"];
|
11
|
+
var base = "bemjbnt";
|
12
|
+
var viewContainerRoot = function viewContainerRoot(Root) {
|
13
|
+
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
14
|
+
var children = props.children,
|
15
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
16
|
+
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
17
|
+
ref: ref
|
18
|
+
}, rest), children);
|
19
|
+
});
|
20
|
+
};
|
21
|
+
var viewContainerConfig = {
|
22
|
+
name: 'ViewContainer',
|
23
|
+
tag: 'div',
|
24
|
+
layout: viewContainerRoot,
|
25
|
+
base: base,
|
26
|
+
variations: {
|
27
|
+
view: {
|
28
|
+
css: base$1.base
|
29
|
+
}
|
30
|
+
},
|
31
|
+
defaults: {
|
32
|
+
view: undefined
|
33
|
+
}
|
34
|
+
};
|
35
|
+
|
36
|
+
exports.viewContainerConfig = viewContainerConfig;
|
37
|
+
exports.viewContainerRoot = viewContainerRoot;
|
38
|
+
//# sourceMappingURL=ViewContainer.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ViewContainer.js","sources":["../../../src/components/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { css } from '@linaria/core';\n\nimport type { RootProps } from '../../engines/types';\n\nimport { base as viewCSS } from './_view/base';\n\nconst base = css`\n position: relative;\n`;\n\nexport type ViewContainerCustomProps = {\n /**\n * Вид компонента\n */\n view?: string;\n};\n\ntype ViewContainerProps = React.HTMLAttributes<HTMLDivElement> & ViewContainerCustomProps;\n\nexport const viewContainerRoot = (Root: RootProps<HTMLAnchorElement, ViewContainerProps>) =>\n forwardRef<HTMLAnchorElement, ViewContainerProps>((props, ref) => {\n const { children, ...rest } = props;\n\n return (\n <Root ref={ref} {...rest}>\n {children}\n </Root>\n );\n });\n\nexport const viewContainerConfig = {\n name: 'ViewContainer',\n tag: 'div',\n layout: viewContainerRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n },\n defaults: {\n view: undefined,\n },\n};\n"],"names":["base","viewContainerRoot","Root","forwardRef","props","ref","children","rest","_excluded","React","createElement","_extends","viewContainerConfig","name","tag","layout","variations","view","css","viewCSS","defaults","undefined"],"mappings":";;;;;;;;;AAOA,IAAMA,IAAI,GAET,SAAA,CAAA;IAWYC,iBAAiB,GAAGA,SAApBA,iBAAiBA,CAAIC,IAAsD,EAAA;AAAA,EAAA,oBACpFC,gBAAU,CAAwC,UAACC,KAAK,EAAEC,GAAG,EAAK;AAC9D,IAAA,IAAQC,QAAQ,GAAcF,KAAK,CAA3BE,QAAQ;AAAKC,MAAAA,IAAAA,GAAAA,iDAAAA,CAASH,KAAK,EAAAI,SAAA,CAAA,CAAA;AAEnC,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACR,IAAI,EAAAS,iCAAA,CAAA;AAACN,MAAAA,GAAG,EAAEA,GAAAA;KAASE,EAAAA,IAAI,CACnBD,EAAAA,QACC,CAAC,CAAA;AAEf,GAAC,CAAC,CAAA;AAAA,EAAA;AAEC,IAAMM,mBAAmB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,eAAe;AACrBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEd,iBAAiB;AACzBD,EAAAA,IAAI,EAAJA,IAAI;AACJgB,EAAAA,UAAU,EAAE;AACRC,IAAAA,IAAI,EAAE;AACFC,MAAAA,GAAG,EAAEC,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNH,IAAAA,IAAI,EAAEI,SAAAA;AACV,GAAA;AACJ;;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.bemjbnt{position:relative;}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../src/components/ViewContainer/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
|
package/cjs/index.css
CHANGED
@@ -782,3 +782,5 @@
|
|
782
782
|
|
783
783
|
.IconButton_styles_1q2jfs2_s15ptif0__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
|
784
784
|
.IconButton_styles_1q2jfs2_shuaj1a__7aea03a6{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
|
785
|
+
|
786
|
+
.ViewContainer_yiqfcb_bemjbnt__5b2a6776{position:relative;}
|
package/cjs/index.js
CHANGED
@@ -197,6 +197,7 @@ var Editable_tokens = require('./components/Editable/Editable.tokens.js');
|
|
197
197
|
var Mask = require('./components/Mask/Mask.js');
|
198
198
|
var Attach = require('./components/Attach/Attach.js');
|
199
199
|
var Attach_tokens = require('./components/Attach/Attach.tokens.js');
|
200
|
+
var ViewContainer = require('./components/ViewContainer/ViewContainer.js');
|
200
201
|
var common = require('./engines/common.js');
|
201
202
|
var canUseDOM = require('./utils/canUseDOM.js');
|
202
203
|
var extractTextFrom = require('./utils/extractTextFrom.js');
|
@@ -584,6 +585,8 @@ exports.composeMask = Mask.composeMask;
|
|
584
585
|
exports.attachConfig = Attach.attachConfig;
|
585
586
|
exports.attachRoot = Attach.attachRoot;
|
586
587
|
exports.attachTokens = Attach_tokens.tokens;
|
588
|
+
exports.viewContainerConfig = ViewContainer.viewContainerConfig;
|
589
|
+
exports.viewContainerRoot = ViewContainer.viewContainerRoot;
|
587
590
|
exports.component = common.component;
|
588
591
|
exports.mergeConfig = common.mergeConfig;
|
589
592
|
exports.canUseDOM = canUseDOM.canUseDOM;
|
package/cjs/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -135,38 +135,6 @@ import TabItem from '@theme/TabItem';
|
|
135
135
|
</TabItem>
|
136
136
|
</Tabs>
|
137
137
|
|
138
|
-
### Использование Accordion в Controlled варианте
|
139
|
-
|
140
|
-
```tsx live
|
141
|
-
import React, { useState } from 'react';
|
142
|
-
import { Accordion, AccordionItem, IconButton } from '@salutejs/{{ package }}';
|
143
|
-
import { IconPlus } from '@salutejs/plasma-icons';
|
144
|
-
|
145
|
-
export function App() {
|
146
|
-
const [activeFirst, setActiveFirst] = useState(false);
|
147
|
-
const [activeSecond, setActiveSecond] = useState(false);
|
148
|
-
const [activeThree, setActiveThree] = useState(false);
|
149
|
-
|
150
|
-
const contentRight = (active, setActive) => {
|
151
|
-
return (
|
152
|
-
<IconButton view="secondary" size="s" onClick={() => setActive(!active)}>
|
153
|
-
<IconPlus size="xs" />
|
154
|
-
</IconButton>
|
155
|
-
)
|
156
|
-
}
|
157
|
-
|
158
|
-
return (
|
159
|
-
<div>
|
160
|
-
<Accordion size="s" singleActive={true}>
|
161
|
-
<AccordionItem opened={activeFirst} contentRight={contentRight(activeFirst, setActiveFirst)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
|
162
|
-
<AccordionItem opened={activeSecond} contentRight={contentRight(activeSecond, setActiveSecond)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
|
163
|
-
<AccordionItem opened={activeThree} contentRight={contentRight(activeThree, setActiveThree)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
|
164
|
-
</Accordion>
|
165
|
-
</div>
|
166
|
-
);
|
167
|
-
}
|
168
|
-
```
|
169
|
-
|
170
138
|
### Использование Accordion SingleActive
|
171
139
|
|
172
140
|
```tsx live
|
@@ -24,7 +24,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
24
24
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
25
25
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
26
26
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
27
|
-
var AccordionItem = exports.AccordionItem =
|
27
|
+
var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
|
28
28
|
var _ref2;
|
29
29
|
var value = _ref.value,
|
30
30
|
contentRight = _ref.contentRight,
|
@@ -42,10 +42,8 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
|
|
42
42
|
disabled = _ref.disabled,
|
43
43
|
_ref$alignWithTitle = _ref.alignWithTitle,
|
44
44
|
alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
|
45
|
-
opened = _ref.opened,
|
46
45
|
view = _ref.view,
|
47
|
-
onChange = _ref.onChange
|
48
|
-
onClick = _ref.onClick;
|
46
|
+
onChange = _ref.onChange;
|
49
47
|
var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
|
50
48
|
var _useState = (0, _react.useState)(),
|
51
49
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -58,9 +56,6 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
|
|
58
56
|
if (onChange) {
|
59
57
|
onChange(key, !value);
|
60
58
|
}
|
61
|
-
if (onClick) {
|
62
|
-
onClick(key, !value);
|
63
|
-
}
|
64
59
|
};
|
65
60
|
var leftContentRef = (0, _react.useRef)(null);
|
66
61
|
(0, _react.useEffect)(function () {
|
@@ -69,11 +64,11 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
|
|
69
64
|
var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(_Accordion.tokens.accordionItemGap, "))") : 0;
|
70
65
|
setLeftPadding(leftPaddingBody);
|
71
66
|
}, [value, type, leftContentRef, setLeftPadding]);
|
72
|
-
var openedBodyClass =
|
73
|
-
var
|
67
|
+
var openedBodyClass = value ? _Accordion.classes.accordionItemShowBody : undefined;
|
68
|
+
var StyledAnimationPLus = function StyledAnimationPLus() {
|
74
69
|
return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
|
75
70
|
size: "xs",
|
76
|
-
color: "
|
71
|
+
color: "inhert"
|
77
72
|
})), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
|
78
73
|
size: "xs",
|
79
74
|
color: "inhert",
|
@@ -84,15 +79,14 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
|
|
84
79
|
var disabledClass = disabled ? _Accordion.classes.accordionDisabled : '';
|
85
80
|
var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledArrow, {
|
86
81
|
size: "xs",
|
87
|
-
color: "
|
82
|
+
color: "inhert"
|
88
83
|
})) : undefined;
|
89
|
-
var leftContentRotate = type === 'arrow' &&
|
90
|
-
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(
|
91
|
-
var rightContentRotate = type === 'sign' &&
|
84
|
+
var leftContentRotate = type === 'arrow' && value ? _Accordion.classes.accordionItemShowBody : undefined;
|
85
|
+
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPLus, null) : undefined;
|
86
|
+
var rightContentRotate = type === 'sign' && value ? _Accordion.classes.accordionItemShowBody : undefined;
|
92
87
|
return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionItem, {
|
93
88
|
className: (0, _utils.cx)(_Accordion.classes.accordionItem, className, disabledClass),
|
94
89
|
key: key,
|
95
|
-
ref: outerRef,
|
96
90
|
style: _objectSpread({
|
97
91
|
borderRadius: accordionBorderRadius
|
98
92
|
}, style)
|
@@ -100,17 +94,17 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
|
|
100
94
|
role: "tab",
|
101
95
|
tabIndex: 0,
|
102
96
|
onClick: handleOpen,
|
103
|
-
"aria-expanded":
|
97
|
+
"aria-expanded": value,
|
104
98
|
"aria-controls": "accordion-item-section".concat(key),
|
105
99
|
id: "accordion-item-".concat(key)
|
106
100
|
}, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentLeft, {
|
107
101
|
ref: leftContentRef,
|
108
102
|
className: leftContentRotate
|
109
|
-
}, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)),
|
103
|
+
}, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
|
110
104
|
className: rightContentRotate
|
111
105
|
}, rightContent && rightContent)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBodyAnimate, {
|
112
106
|
"aria-labelledby": "accordion-item-".concat(key),
|
113
|
-
"aria-hidden": !
|
107
|
+
"aria-hidden": !value,
|
114
108
|
id: "accordion-item-section".concat(key),
|
115
109
|
className: (0, _utils.cx)(openedBodyClass),
|
116
110
|
style: {
|
@@ -119,4 +113,4 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
|
|
119
113
|
}, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBody, {
|
120
114
|
className: _Accordion.classes.accordionItemBody
|
121
115
|
}, children)));
|
122
|
-
}
|
116
|
+
};
|
@@ -0,0 +1,49 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.viewContainerRoot = exports.viewContainerConfig = void 0;
|
8
|
+
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
|
+
var _react2 = /*#__PURE__*/require("@emotion/react");
|
10
|
+
var _base = /*#__PURE__*/require("./_view/base");
|
11
|
+
var _excluded = ["children"];
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
14
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
15
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
16
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
17
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
18
|
+
var base = process.env.NODE_ENV === "production" ? {
|
19
|
+
name: "y6axm9-plasma-new-hope__base",
|
20
|
+
styles: "position:relative;label:plasma-new-hope__base;"
|
21
|
+
} : {
|
22
|
+
name: "y6axm9-plasma-new-hope__base",
|
23
|
+
styles: "position:relative;label:plasma-new-hope__base;",
|
24
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVmlld0NvbnRhaW5lci9WaWV3Q29udGFpbmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9WaWV3Q29udGFpbmVyL1ZpZXdDb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB0eXBlIHsgUm9vdFByb3BzIH0gZnJvbSAnLi4vLi4vZW5naW5lcy90eXBlcyc7XG5cbmltcG9ydCB7IGJhc2UgYXMgdmlld0NTUyB9IGZyb20gJy4vX3ZpZXcvYmFzZSc7XG5cbmNvbnN0IGJhc2UgPSBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IHR5cGUgVmlld0NvbnRhaW5lckN1c3RvbVByb3BzID0ge1xuICAgIC8qKlxuICAgICAqINCS0LjQtCDQutC+0LzQv9C+0L3QtdC90YLQsFxuICAgICAqL1xuICAgIHZpZXc/OiBzdHJpbmc7XG59O1xuXG50eXBlIFZpZXdDb250YWluZXJQcm9wcyA9IFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiAmIFZpZXdDb250YWluZXJDdXN0b21Qcm9wcztcblxuZXhwb3J0IGNvbnN0IHZpZXdDb250YWluZXJSb290ID0gKFJvb3Q6IFJvb3RQcm9wczxIVE1MQW5jaG9yRWxlbWVudCwgVmlld0NvbnRhaW5lclByb3BzPikgPT5cbiAgICBmb3J3YXJkUmVmPEhUTUxBbmNob3JFbGVtZW50LCBWaWV3Q29udGFpbmVyUHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IHsgY2hpbGRyZW4sIC4uLnJlc3QgfSA9IHByb3BzO1xuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8Um9vdCByZWY9e3JlZn0gey4uLnJlc3R9PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDwvUm9vdD5cbiAgICAgICAgKTtcbiAgICB9KTtcblxuZXhwb3J0IGNvbnN0IHZpZXdDb250YWluZXJDb25maWcgPSB7XG4gICAgbmFtZTogJ1ZpZXdDb250YWluZXInLFxuICAgIHRhZzogJ2RpdicsXG4gICAgbGF5b3V0OiB2aWV3Q29udGFpbmVyUm9vdCxcbiAgICBiYXNlLFxuICAgIHZhcmlhdGlvbnM6IHtcbiAgICAgICAgdmlldzoge1xuICAgICAgICAgICAgY3NzOiB2aWV3Q1NTLFxuICAgICAgICB9LFxuICAgIH0sXG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogdW5kZWZpbmVkLFxuICAgIH0sXG59O1xuIl19 */",
|
25
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
26
|
+
};
|
27
|
+
var viewContainerRoot = exports.viewContainerRoot = function viewContainerRoot(Root) {
|
28
|
+
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
29
|
+
var children = props.children,
|
30
|
+
rest = _objectWithoutProperties(props, _excluded);
|
31
|
+
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
32
|
+
ref: ref
|
33
|
+
}, rest), children);
|
34
|
+
});
|
35
|
+
};
|
36
|
+
var viewContainerConfig = exports.viewContainerConfig = {
|
37
|
+
name: 'ViewContainer',
|
38
|
+
tag: 'div',
|
39
|
+
layout: viewContainerRoot,
|
40
|
+
base: base,
|
41
|
+
variations: {
|
42
|
+
view: {
|
43
|
+
css: _base.base
|
44
|
+
}
|
45
|
+
},
|
46
|
+
defaults: {
|
47
|
+
view: undefined
|
48
|
+
}
|
49
|
+
};
|
@@ -0,0 +1,82 @@
|
|
1
|
+
---
|
2
|
+
id: link
|
3
|
+
title: Link
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# ViewContainer
|
9
|
+
<Description name="ViewContainer" />
|
10
|
+
<PropsTable name="ViewContainer" exclude={['css']} />
|
11
|
+
|
12
|
+
# Описание
|
13
|
+
|
14
|
+
Данный компонент представляет собой обёртку, которая инвертирует токены компонент, которые в неё помещены, в зависимости от выбранного значения свойства view - `onDark` или `onLight`.
|
15
|
+
|
16
|
+
При этом, независимо от режима темы (тёмный или светлый) для всего приложения, токены внутри не будут меняться.
|
17
|
+
|
18
|
+
Этот механизм необходим для случаев, когда требуется отобразить компонент на специфичном бэкграунде, чтобы избежать наложение цветов.
|
19
|
+
|
20
|
+
# Пример использования
|
21
|
+
|
22
|
+
```tsx live
|
23
|
+
import React from 'react';
|
24
|
+
import { ViewContainer, Button, Checkbox, TextField } from '@salutejs/{{ package }}';
|
25
|
+
|
26
|
+
export function App() {
|
27
|
+
return (
|
28
|
+
<div>
|
29
|
+
<ViewContainer
|
30
|
+
style=\{{
|
31
|
+
padding: '1rem',
|
32
|
+
borderRadius: '1rem',
|
33
|
+
display: 'flex',
|
34
|
+
flexDirection: 'column',
|
35
|
+
gap: '1rem',
|
36
|
+
}}
|
37
|
+
>
|
38
|
+
<h3 style=\{{ margin: 0 }}>Inside default ViewContainer</h3>
|
39
|
+
<Button text="default Button" />
|
40
|
+
<Checkbox checked label="Label" />
|
41
|
+
<TextField value="Example Value" label="Label" labelPlacement="inner" />
|
42
|
+
</ViewContainer>
|
43
|
+
<br />
|
44
|
+
<ViewContainer
|
45
|
+
view="onDark"
|
46
|
+
style=\{{
|
47
|
+
background: '#1a1a1a',
|
48
|
+
color: 'white',
|
49
|
+
padding: '1rem',
|
50
|
+
borderRadius: '1rem',
|
51
|
+
display: 'flex',
|
52
|
+
flexDirection: 'column',
|
53
|
+
gap: '1rem',
|
54
|
+
}}
|
55
|
+
>
|
56
|
+
<h3 style=\{{ margin: 0 }}>Inside onDark ViewContainer</h3>
|
57
|
+
<Button text="default Button" />
|
58
|
+
<Checkbox checked label="Label" />
|
59
|
+
<TextField value="Example Value" label="Label" labelPlacement="inner" />
|
60
|
+
</ViewContainer>
|
61
|
+
<br />
|
62
|
+
<ViewContainer
|
63
|
+
view="onLight"
|
64
|
+
style=\{{
|
65
|
+
background: '#ededed',
|
66
|
+
color: 'black',
|
67
|
+
padding: '1rem',
|
68
|
+
borderRadius: '1rem',
|
69
|
+
display: 'flex',
|
70
|
+
flexDirection: 'column',
|
71
|
+
gap: '1rem',
|
72
|
+
}}
|
73
|
+
>
|
74
|
+
<h3 style=\{{ margin: 0 }}>Inside onLight ViewContainer</h3>
|
75
|
+
<Button text="default Button" />
|
76
|
+
<Checkbox checked label="Label" />
|
77
|
+
<TextField value="Example Value" label="Label" labelPlacement="inner" />
|
78
|
+
</ViewContainer>
|
79
|
+
</div>
|
80
|
+
);
|
81
|
+
}
|
82
|
+
```
|
@@ -0,0 +1,8 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.base = void 0;
|
7
|
+
var _react = /*#__PURE__*/require("@emotion/react");
|
8
|
+
var base = exports.base = /*#__PURE__*/(0, _react.css)(";label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVmlld0NvbnRhaW5lci9fdmlldy9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1ZpZXdDb250YWluZXIvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgYDtcbiJdfQ== */"));
|
@@ -0,0 +1 @@
|
|
1
|
+
[]
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "viewContainerConfig", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _ViewContainer.viewContainerConfig;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "viewContainerRoot", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _ViewContainer.viewContainerRoot;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
var _ViewContainer = /*#__PURE__*/require("./ViewContainer");
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.WithTheme = void 0;
|
7
7
|
exports.argTypesFromConfig = argTypesFromConfig;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
9
|
-
var _themes = /*#__PURE__*/require("./themes");
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
10
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
12
11
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
@@ -15,19 +14,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
15
14
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
16
15
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
17
16
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
var themeName = context.title.split('/')[0];
|
22
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
23
|
-
id: "theme-root",
|
24
|
-
className: _themes.themes === null || _themes.themes === void 0 || (_themes$themeName = _themes.themes[themeName]) === null || _themes$themeName === void 0 ? void 0 : _themes$themeName[themeType],
|
25
|
-
style: {
|
26
|
-
padding: '1rem',
|
27
|
-
minHeight: '100vh',
|
28
|
-
boxSizing: 'border-box'
|
29
|
-
}
|
30
|
-
}, /*#__PURE__*/_react["default"].createElement(Story, null));
|
17
|
+
// TODO: Удалить в отдельном пр из всех компонент
|
18
|
+
var WithTheme = exports.WithTheme = function WithTheme(Story) {
|
19
|
+
return /*#__PURE__*/_react["default"].createElement(Story, null);
|
31
20
|
};
|
32
21
|
function argTypesFromConfig(config) {
|
33
22
|
var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|