@hh.ru/magritte-ui-button-stack 2.2.2 → 3.0.0
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.d.ts +2 -2
- package/ButtonStack.js +49 -9
- package/ButtonStack.js.map +1 -1
- package/index.css +15 -9
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/package.json +4 -3
- package/types.d.ts +8 -6
package/ButtonStack.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
1
|
import { ButtonStackProps } from '@hh.ru/magritte-ui-button-stack/types';
|
|
3
|
-
export declare const
|
|
2
|
+
export declare const CENTERED_WRAPPER_CLASS = "magritte-button-stack-centered-wrapper";
|
|
3
|
+
export declare const ButtonStack: React.FC<ButtonStackProps>;
|
package/ButtonStack.js
CHANGED
|
@@ -1,18 +1,58 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import {
|
|
3
|
+
import { useRef, useState, useLayoutEffect, Children } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
+
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
6
|
+
import { STRETCHED_WRAPPER_CLASS } from '@hh.ru/magritte-ui-button';
|
|
5
7
|
|
|
6
|
-
var styles = {"button-stack":"magritte-button-
|
|
8
|
+
var styles = {"button-stack":"magritte-button-stack___iVaJJ_3-0-0","buttonStack":"magritte-button-stack___iVaJJ_3-0-0","horizontal-layout":"magritte-horizontal-layout___xRqpt_3-0-0","horizontalLayout":"magritte-horizontal-layout___xRqpt_3-0-0","vertical-layout":"magritte-vertical-layout___0t2-M_3-0-0","verticalLayout":"magritte-vertical-layout___0t2-M_3-0-0","fit-content":"magritte-fit-content___PcZmR_3-0-0","fitContent":"magritte-fit-content___PcZmR_3-0-0","stretched-button":"magritte-stretched-button___64uQM_3-0-0","stretchedButton":"magritte-stretched-button___64uQM_3-0-0","shrinked-button":"magritte-shrinked-button___mPMrV_3-0-0","shrinkedButton":"magritte-shrinked-button___mPMrV_3-0-0"};
|
|
7
9
|
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
const CENTERED_WRAPPER_CLASS = 'magritte-button-stack-centered-wrapper';
|
|
11
|
+
const ButtonStack = ({ children, layout = 'adaptive', stretched, 'data-qa': dataQa = 'button-stack', }) => {
|
|
12
|
+
const { breakpoint } = useBreakpoint();
|
|
13
|
+
const buttonStackRef = useRef(null);
|
|
14
|
+
const buttonStackWrapperRef = useRef(null);
|
|
15
|
+
const [verticalLayout, setVerticalLayout] = useState(layout === 'vertical');
|
|
16
|
+
const [shrinked, setShrinked] = useState(false);
|
|
17
|
+
useLayoutEffect(() => {
|
|
18
|
+
if (!buttonStackRef.current || !buttonStackWrapperRef.current) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
if (layout === 'vertical') {
|
|
22
|
+
setVerticalLayout(true);
|
|
23
|
+
setShrinked(false);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
buttonStackRef.current.classList.remove(styles.verticalLayout, STRETCHED_WRAPPER_CLASS);
|
|
27
|
+
const hasOverflow = buttonStackRef.current.scrollWidth > buttonStackWrapperRef.current.offsetWidth;
|
|
28
|
+
if (layout === 'adaptive') {
|
|
29
|
+
buttonStackRef.current.classList.toggle(styles.verticalLayout, hasOverflow);
|
|
30
|
+
buttonStackRef.current.classList.toggle(STRETCHED_WRAPPER_CLASS, hasOverflow || stretched);
|
|
31
|
+
setVerticalLayout(hasOverflow);
|
|
32
|
+
setShrinked(false);
|
|
12
33
|
}
|
|
13
|
-
|
|
14
|
-
|
|
34
|
+
if (layout === 'horizontal') {
|
|
35
|
+
buttonStackRef.current.classList.toggle(STRETCHED_WRAPPER_CLASS, hasOverflow || stretched);
|
|
36
|
+
setVerticalLayout(false);
|
|
37
|
+
setShrinked(hasOverflow);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}, [breakpoint, layout, stretched]);
|
|
41
|
+
return (jsx("div", { ref: buttonStackWrapperRef, children: jsx("div", { className: classnames(styles.buttonStack, {
|
|
42
|
+
[styles.horizontalLayout]: !verticalLayout,
|
|
43
|
+
[styles.verticalLayout]: verticalLayout,
|
|
44
|
+
[styles.fitContent]: !(verticalLayout || stretched || shrinked),
|
|
45
|
+
[STRETCHED_WRAPPER_CLASS]: verticalLayout || stretched || shrinked,
|
|
46
|
+
}), "data-qa": dataQa, ref: buttonStackRef, children: Children.map(children, (child, index) => {
|
|
47
|
+
if (!child) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
return (jsx("div", { className: classnames({
|
|
51
|
+
[styles.stretchedButton]: stretched,
|
|
52
|
+
[styles.shrinkedButton]: shrinked,
|
|
53
|
+
}), children: child }, index));
|
|
54
|
+
}) }) }));
|
|
15
55
|
};
|
|
16
56
|
|
|
17
|
-
export { ButtonStack };
|
|
57
|
+
export { ButtonStack, CENTERED_WRAPPER_CLASS };
|
|
18
58
|
//# sourceMappingURL=ButtonStack.js.map
|
package/ButtonStack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonStack.js","sources":["../src/ButtonStack.tsx"],"sourcesContent":["import {
|
|
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":";;;;;;;;AASO,MAAM,sBAAsB,GAAG,yCAAyC;MAElE,WAAW,GAA+B,CAAC,EACpD,QAAQ,EACR,MAAM,GAAG,UAAU,EACnB,SAAS,EACT,SAAS,EAAE,MAAM,GAAG,cAAc,GACrC,KAAI;AACD,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;AACvC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACpD,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC3D,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;IAC5E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,eAAe,CAAC,MAAK;QACjB,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE;YAC3D,OAAO;SACV;AAED,QAAA,IAAI,MAAM,KAAK,UAAU,EAAE;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,WAAW,CAAC,KAAK,CAAC,CAAC;SACtB;aAAM;AACH,YAAA,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,uBAAuB,CAAC,CAAC;AACxF,YAAA,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,WAAW,GAAG,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEnG,YAAA,IAAI,MAAM,KAAK,UAAU,EAAE;AACvB,gBAAA,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAC5E,gBAAA,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,uBAAuB,EAAE,WAAW,IAAI,SAAS,CAAC,CAAC;gBAE3F,iBAAiB,CAAC,WAAW,CAAC,CAAC;gBAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;aACtB;AAED,YAAA,IAAI,MAAM,KAAK,YAAY,EAAE;AACzB,gBAAA,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,uBAAuB,EAAE,WAAW,IAAI,SAAS,CAAC,CAAC;gBAE3F,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBACzB,WAAW,CAAC,WAAW,CAAC,CAAC;aAC5B;SACJ;KACJ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,qBAAqB,EAC3B,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE;AACtC,gBAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,CAAC,cAAc;AAC1C,gBAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AACvC,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,EAAE,cAAc,IAAI,SAAS,IAAI,QAAQ,CAAC;AAC/D,gBAAA,CAAC,uBAAuB,GAAG,cAAc,IAAI,SAAS,IAAI,QAAQ;AACrE,aAAA,CAAC,aACO,MAAM,EACf,GAAG,EAAE,cAAc,YAElB,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAI;gBACrC,IAAI,CAAC,KAAK,EAAE;AACR,oBAAA,OAAO,IAAI,CAAC;iBACf;AACD,gBAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAEI,SAAS,EAAE,UAAU,CAAC;AAClB,wBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,SAAS;AACnC,wBAAA,CAAC,MAAM,CAAC,cAAc,GAAG,QAAQ;AACpC,qBAAA,CAAC,YAED,KAAK,EAAA,EAND,KAAK,CAOR,EACR;AACN,aAAC,CAAC,EAAA,CACA,EACJ,CAAA,EACR;AACN;;;;"}
|
package/index.css
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
|
-
.magritte-button-
|
|
1
|
+
.magritte-button-stack___iVaJJ_3-0-0{
|
|
2
2
|
display:flex;
|
|
3
3
|
gap:12px;
|
|
4
4
|
}
|
|
5
|
-
.magritte-button-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
.magritte-button-stack-centered-wrapper .magritte-button-stack___iVaJJ_3-0-0{
|
|
6
|
+
margin:0 auto;
|
|
7
|
+
}
|
|
8
|
+
.magritte-horizontal-layout___xRqpt_3-0-0{
|
|
9
|
+
flex-direction:row;
|
|
8
10
|
}
|
|
9
|
-
.magritte-
|
|
11
|
+
.magritte-vertical-layout___0t2-M_3-0-0{
|
|
10
12
|
flex-direction:column;
|
|
11
13
|
}
|
|
12
|
-
.magritte-
|
|
13
|
-
flex-direction:row;
|
|
14
|
+
.magritte-fit-content___PcZmR_3-0-0{
|
|
14
15
|
max-width:fit-content;
|
|
15
16
|
}
|
|
16
|
-
.magritte-
|
|
17
|
-
flex
|
|
17
|
+
.magritte-stretched-button___64uQM_3-0-0{
|
|
18
|
+
flex:1 1 0;
|
|
19
|
+
}
|
|
20
|
+
.magritte-shrinked-button___mPMrV_3-0-0{
|
|
18
21
|
min-width:0;
|
|
19
22
|
}
|
|
23
|
+
.magritte-shrinked-button___mPMrV_3-0-0:not(.magritte-stretched-button___64uQM_3-0-0){
|
|
24
|
+
flex:1 1 auto;
|
|
25
|
+
}
|
package/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
export { ButtonStack } from './ButtonStack.js';
|
|
2
|
+
export { ButtonStack, CENTERED_WRAPPER_CLASS } from './ButtonStack.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'classnames';
|
|
6
|
+
import '@hh.ru/magritte-ui-breakpoint';
|
|
7
|
+
import '@hh.ru/magritte-ui-button';
|
|
6
8
|
//# sourceMappingURL=index.js.map
|
package/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":";;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-button-stack",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
"watch": "yarn root:watch $(pwd)"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@hh.ru/magritte-ui-
|
|
22
|
+
"@hh.ru/magritte-ui-breakpoint": "6.0.6",
|
|
23
|
+
"@hh.ru/magritte-ui-button": "7.1.3",
|
|
23
24
|
"@hh.ru/magritte-ui-mock-component": "1.1.6"
|
|
24
25
|
},
|
|
25
26
|
"peerDependencies": {
|
|
@@ -29,5 +30,5 @@
|
|
|
29
30
|
"publishConfig": {
|
|
30
31
|
"access": "public"
|
|
31
32
|
},
|
|
32
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "494e7d82d7d01dfd9a60460b9b94f08a7ef609d5"
|
|
33
34
|
}
|
package/types.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { ComponentProps, ReactElement } from 'react';
|
|
2
1
|
import { Button } from '@hh.ru/magritte-ui-button';
|
|
3
|
-
export type
|
|
4
|
-
export type
|
|
2
|
+
export type ButtonElement = React.ReactElement<React.ComponentProps<typeof Button>>;
|
|
3
|
+
export type ButtonStackLayout = 'vertical' | 'horizontal' | 'adaptive';
|
|
5
4
|
export interface ButtonStackProps {
|
|
6
|
-
/**
|
|
7
|
-
children: (ButtonElement | undefined)[];
|
|
5
|
+
/** Кнопки */
|
|
6
|
+
children: ButtonElement | (ButtonElement | undefined)[] | undefined;
|
|
8
7
|
/** Ориентация контейнера */
|
|
9
|
-
|
|
8
|
+
layout?: ButtonStackLayout;
|
|
9
|
+
/** Флаг растяжения */
|
|
10
|
+
stretched?: boolean;
|
|
11
|
+
/** data-qa контейнера */
|
|
10
12
|
'data-qa'?: string;
|
|
11
13
|
}
|