@hh.ru/magritte-ui-button-stack 3.0.1 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ButtonStack.js +1 -1
- package/ButtonStack.js.map +1 -1
- package/index.css +8 -8
- package/index.mock.js.map +1 -1
- package/package.json +5 -5
package/ButtonStack.js
CHANGED
|
@@ -5,7 +5,7 @@ import classnames from 'classnames';
|
|
|
5
5
|
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
6
6
|
import { STRETCHED_WRAPPER_CLASS } from '@hh.ru/magritte-ui-button';
|
|
7
7
|
|
|
8
|
-
var styles = {"button-stack":"magritte-button-stack___iVaJJ_3-0-
|
|
8
|
+
var styles = {"button-stack":"magritte-button-stack___iVaJJ_3-0-3","buttonStack":"magritte-button-stack___iVaJJ_3-0-3","horizontal-layout":"magritte-horizontal-layout___xRqpt_3-0-3","horizontalLayout":"magritte-horizontal-layout___xRqpt_3-0-3","vertical-layout":"magritte-vertical-layout___0t2-M_3-0-3","verticalLayout":"magritte-vertical-layout___0t2-M_3-0-3","fit-content":"magritte-fit-content___PcZmR_3-0-3","fitContent":"magritte-fit-content___PcZmR_3-0-3","stretched-button":"magritte-stretched-button___64uQM_3-0-3","stretchedButton":"magritte-stretched-button___64uQM_3-0-3","shrinked-button":"magritte-shrinked-button___mPMrV_3-0-3","shrinkedButton":"magritte-shrinked-button___mPMrV_3-0-3"};
|
|
9
9
|
|
|
10
10
|
const CENTERED_WRAPPER_CLASS = 'magritte-button-stack-centered-wrapper';
|
|
11
11
|
const ButtonStack = ({ children, layout = 'adaptive', stretched, 'data-qa': dataQa = 'button-stack', }) => {
|
package/ButtonStack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonStack.js","sources":["
|
|
1
|
+
{"version":3,"file":"ButtonStack.js","sources":["src/ButtonStack.tsx"],"sourcesContent":["import { Children, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { STRETCHED_WRAPPER_CLASS } from '@hh.ru/magritte-ui-button';\nimport { ButtonStackProps } from '@hh.ru/magritte-ui-button-stack/types';\n\nimport styles from './button-stack.less';\n\nexport const CENTERED_WRAPPER_CLASS = 'magritte-button-stack-centered-wrapper';\n\nexport const ButtonStack: React.FC<ButtonStackProps> = ({\n children,\n layout = 'adaptive',\n stretched,\n 'data-qa': dataQa = 'button-stack',\n}) => {\n const { breakpoint } = useBreakpoint();\n const buttonStackRef = useRef<HTMLDivElement>(null);\n const buttonStackWrapperRef = useRef<HTMLDivElement>(null);\n const [verticalLayout, setVerticalLayout] = useState(layout === 'vertical');\n const [shrinked, setShrinked] = useState(false);\n\n useLayoutEffect(() => {\n if (!buttonStackRef.current || !buttonStackWrapperRef.current) {\n return;\n }\n\n if (layout === 'vertical') {\n setVerticalLayout(true);\n setShrinked(false);\n } else {\n buttonStackRef.current.classList.remove(styles.verticalLayout, STRETCHED_WRAPPER_CLASS);\n const hasOverflow = buttonStackRef.current.scrollWidth > buttonStackWrapperRef.current.offsetWidth;\n\n if (layout === 'adaptive') {\n buttonStackRef.current.classList.toggle(styles.verticalLayout, hasOverflow);\n buttonStackRef.current.classList.toggle(STRETCHED_WRAPPER_CLASS, hasOverflow || stretched);\n\n setVerticalLayout(hasOverflow);\n setShrinked(false);\n }\n\n if (layout === 'horizontal') {\n buttonStackRef.current.classList.toggle(STRETCHED_WRAPPER_CLASS, hasOverflow || stretched);\n\n setVerticalLayout(false);\n setShrinked(hasOverflow);\n }\n }\n }, [breakpoint, layout, stretched]);\n\n return (\n <div ref={buttonStackWrapperRef}>\n <div\n className={classnames(styles.buttonStack, {\n [styles.horizontalLayout]: !verticalLayout,\n [styles.verticalLayout]: verticalLayout,\n [styles.fitContent]: !(verticalLayout || stretched || shrinked),\n [STRETCHED_WRAPPER_CLASS]: verticalLayout || stretched || shrinked,\n })}\n data-qa={dataQa}\n ref={buttonStackRef}\n >\n {Children.map(children, (child, index) => {\n if (!child) {\n return null;\n }\n return (\n <div\n key={index}\n className={classnames({\n [styles.stretchedButton]: stretched,\n [styles.shrinkedButton]: shrinked,\n })}\n >\n {child}\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n"],"names":["_jsx"],"mappings":"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"}
|
package/index.css
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
.magritte-button-stack___iVaJJ_3-0-
|
|
1
|
+
.magritte-button-stack___iVaJJ_3-0-3{
|
|
2
2
|
display:flex;
|
|
3
3
|
gap:12px;
|
|
4
4
|
}
|
|
5
|
-
.magritte-button-stack-centered-wrapper .magritte-button-stack___iVaJJ_3-0-
|
|
5
|
+
.magritte-button-stack-centered-wrapper .magritte-button-stack___iVaJJ_3-0-3{
|
|
6
6
|
margin:0 auto;
|
|
7
7
|
}
|
|
8
|
-
.magritte-horizontal-layout___xRqpt_3-0-
|
|
8
|
+
.magritte-horizontal-layout___xRqpt_3-0-3{
|
|
9
9
|
flex-direction:row;
|
|
10
10
|
}
|
|
11
|
-
.magritte-vertical-layout___0t2-M_3-0-
|
|
11
|
+
.magritte-vertical-layout___0t2-M_3-0-3{
|
|
12
12
|
flex-direction:column;
|
|
13
13
|
}
|
|
14
|
-
.magritte-fit-content___PcZmR_3-0-
|
|
14
|
+
.magritte-fit-content___PcZmR_3-0-3{
|
|
15
15
|
max-width:fit-content;
|
|
16
16
|
}
|
|
17
|
-
.magritte-stretched-button___64uQM_3-0-
|
|
17
|
+
.magritte-stretched-button___64uQM_3-0-3{
|
|
18
18
|
flex:1 1 0;
|
|
19
19
|
}
|
|
20
|
-
.magritte-shrinked-button___mPMrV_3-0-
|
|
20
|
+
.magritte-shrinked-button___mPMrV_3-0-3{
|
|
21
21
|
min-width:0;
|
|
22
22
|
}
|
|
23
|
-
.magritte-shrinked-button___mPMrV_3-0-
|
|
23
|
+
.magritte-shrinked-button___mPMrV_3-0-3:not(.magritte-stretched-button___64uQM_3-0-3){
|
|
24
24
|
flex:1 1 auto;
|
|
25
25
|
}
|
package/index.mock.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mock.js","sources":["
|
|
1
|
+
{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type ButtonStackProps } from '@hh.ru/magritte-ui-button-stack/types';\n\nexport const ButtonStack = mockComponent('ButtonStack', undefined, {\n withChildren: true,\n});\n"],"names":[],"mappings":";;MAIa,WAAW,GAAG,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AAC/D,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-button-stack",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"watch": "yarn root:watch $(pwd)"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@hh.ru/magritte-ui-breakpoint": "6.0.
|
|
23
|
-
"@hh.ru/magritte-ui-button": "7.1.
|
|
24
|
-
"@hh.ru/magritte-ui-mock-component": "1.1.
|
|
22
|
+
"@hh.ru/magritte-ui-breakpoint": "6.0.8",
|
|
23
|
+
"@hh.ru/magritte-ui-button": "7.1.6",
|
|
24
|
+
"@hh.ru/magritte-ui-mock-component": "1.1.7"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"classnames": ">=2.3.2",
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"publishConfig": {
|
|
31
31
|
"access": "public"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "9a088ded46caac9429f3e9fadaf055300b36990e"
|
|
34
34
|
}
|