@alfalab/core-components-custom-picker-button 3.1.0 → 4.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2
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/cssm/field/Component.d.ts +3 -2
- package/cssm/field/Component.js +2 -16
- package/cssm/field/Component.js.map +1 -1
- package/cssm/field/index.module.css +10 -5
- package/esm/field/Component.d.ts +3 -2
- package/esm/field/Component.js +2 -16
- package/esm/field/Component.js.map +1 -1
- package/esm/field/index.css +10 -5
- package/esm/field/index.module.css.js +1 -1
- package/field/Component.d.ts +3 -2
- package/field/Component.js +2 -16
- package/field/Component.js.map +1 -1
- package/field/index.css +10 -5
- package/field/index.module.css.js +1 -1
- package/modern/field/Component.d.ts +3 -2
- package/modern/field/Component.js +2 -16
- package/modern/field/Component.js.map +1 -1
- package/modern/field/index.css +10 -5
- package/modern/field/index.module.css.js +1 -1
- package/moderncssm/field/Component.d.ts +3 -2
- package/moderncssm/field/Component.js +2 -16
- package/moderncssm/field/Component.js.map +1 -1
- package/package.json +9 -9
- package/src/field/Component.tsx +27 -23
|
@@ -2,11 +2,12 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
2
2
|
import { type CustomButtonProps } from '@alfalab/core-components-custom-button/cssm';
|
|
3
3
|
import { type PickerButtonSize, type PickerButtonVariant } from '@alfalab/core-components-picker-button/cssm/shared';
|
|
4
4
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/cssm/shared';
|
|
5
|
-
declare type
|
|
5
|
+
declare type UselessProps = Partial<Pick<BaseFieldProps, 'selectedMultiple' | 'onClear' | 'FormControlComponent' | 'valueRenderer' | 'Arrow' | 'labelView' | 'toggleMenu' | 'setSelectedItems'>>;
|
|
6
|
+
declare type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & UselessProps & CustomButtonProps & {
|
|
6
7
|
buttonSize?: PickerButtonSize;
|
|
7
8
|
buttonVariant?: PickerButtonVariant;
|
|
8
9
|
showArrow?: boolean;
|
|
9
10
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
11
|
};
|
|
11
|
-
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
|
+
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
13
|
export {};
|
package/cssm/field/Component.js
CHANGED
|
@@ -15,24 +15,10 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
15
15
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
16
16
|
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
17
17
|
|
|
18
|
-
var SIZE_TO_CLASSNAME_MAP = {
|
|
19
|
-
xxs: 'size-32',
|
|
20
|
-
xs: 'size-40',
|
|
21
|
-
s: 'size-48',
|
|
22
|
-
m: 'size-56',
|
|
23
|
-
l: 'size-64',
|
|
24
|
-
xl: 'size-72',
|
|
25
|
-
32: 'size-32',
|
|
26
|
-
40: 'size-40',
|
|
27
|
-
48: 'size-48',
|
|
28
|
-
56: 'size-56',
|
|
29
|
-
64: 'size-64',
|
|
30
|
-
72: 'size-72',
|
|
31
|
-
};
|
|
32
18
|
var Field = function (_a) {
|
|
33
19
|
var _b;
|
|
34
|
-
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon
|
|
35
|
-
var Icon = shared.getIcon(buttonVariant,
|
|
20
|
+
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon; _a.selectedMultiple; _a.onClear; _a.FormControlComponent; _a.valueRenderer; _a.Arrow; _a.labelView; _a.toggleMenu; _a.setSelectedItems; var restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow", "icon", "selectedMultiple", "onClear", "FormControlComponent", "valueRenderer", "Arrow", "labelView", "toggleMenu", "setSelectedItems"]);
|
|
21
|
+
var Icon = shared.getIcon(buttonVariant, "size-".concat(buttonSize), icon);
|
|
36
22
|
var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
|
|
37
23
|
return (React__default.default.createElement(cssm.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
|
|
38
24
|
rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.addonsContainer, (_b = {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, { type ComponentType, Fragment, type SVGProps } from 'react';\nimport cn from 'classnames';\n\nimport { CustomButton, type CustomButtonProps } from '@alfalab/core-components-custom-button';\nimport {\n getIcon,\n type PickerButtonSize,\n type PickerButtonVariant,\n} from '@alfalab/core-components-picker-button/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\n\nimport styles from './index.module.css';\n\n// Пропсы которые не должны передаваться глубже в Button\ntype UselessProps = Partial<\n Pick<\n BaseFieldProps,\n | 'selectedMultiple'\n | 'onClear'\n | 'FormControlComponent'\n | 'valueRenderer'\n | 'Arrow'\n | 'labelView'\n | 'toggleMenu'\n | 'setSelectedItems'\n >\n>;\n\ntype FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &\n UselessProps &\n CustomButtonProps & {\n buttonSize?: PickerButtonSize;\n buttonVariant?: PickerButtonVariant;\n showArrow?: boolean;\n icon?: ComponentType<SVGProps<SVGSVGElement>>;\n };\n\nexport const Field = ({\n buttonSize = 56,\n buttonVariant = 'default',\n backgroundColor,\n contentColor,\n stateType,\n label,\n open,\n rightAddons,\n innerProps,\n className,\n showArrow = true,\n icon,\n selectedMultiple,\n onClear,\n FormControlComponent,\n valueRenderer,\n Arrow,\n labelView,\n toggleMenu,\n setSelectedItems,\n ...restProps\n}: FieldProps) => {\n const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(\n buttonVariant,\n `size-${buttonSize}`,\n icon,\n );\n\n const buttonProps = {\n ...restProps,\n ...innerProps,\n } as CustomButtonProps;\n\n return (\n <CustomButton\n {...buttonProps}\n rightAddons={\n <Fragment>\n {rightAddons && (\n <span\n className={cn(styles.addonsContainer, {\n [styles.showControlIcon]: showArrow || buttonVariant === 'compact',\n })}\n >\n {rightAddons}\n </span>\n )}\n\n {(showArrow || buttonVariant === 'compact') && (\n <span\n className={cn(\n styles.iconContainer,\n buttonVariant !== 'compact' && open && styles.open,\n )}\n >\n <Icon data-test-id='custom-picker-button-icon' />\n </span>\n )}\n </Fragment>\n }\n block={true}\n size={buttonSize}\n backgroundColor={backgroundColor}\n contentColor={contentColor}\n stateType={stateType}\n className={className}\n >\n {buttonVariant !== 'compact' && label}\n </CustomButton>\n );\n};\n"],"names":["__rest","getIcon","__assign","React","CustomButton","Fragment","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;AAqCO,IAAM,KAAK,GAAG,UAAC,EAsBT,EAAA;;AArBT,IAAA,IAAA,EAAe,GAAA,EAAA,CAAA,UAAA,CAAA,CAAf,UAAU,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,CAAA,CACf,EAAyB,GAAA,EAAA,CAAA,aAAA,CAAA,CAAzB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,CAAA,CACzB,eAAe,GAAA,EAAA,CAAA,eAAA,CAAA,CACf,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,SAAS,GAAA,EAAA,CAAA,SAAA,CACT,CAAA,KAAK,WAAA,CACL,CAAA,IAAI,GAAA,EAAA,CAAA,IAAA,CAAA,CACJ,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA,CACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,CACT,CAAA,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,IAAI,GAAA,EAAA,CAAA,IAAA,CACJ,oBAAgB,CAChB,CAAO,EAAA,CAAA,OAAA,CAAA,CACa,EAAA,CAAA,oBAAA,CAAA,CACP,EAAA,CAAA,aAAA,EACR,EAAA,CAAA,KAAA,CACL,aAAS,CACT,CAAU,EAAA,CAAA,UAAA,CAAA,CACM,EAAA,CAAA,gBAAA,CAAA,KACb,SAAS,GAAAA,YAAA,CAAA,EAAA,EArBM,+RAsBrB;AACG,IAAA,IAAM,IAAI,GAA2CC,cAAO,CACxD,aAAa,EACb,OAAQ,CAAA,MAAA,CAAA,UAAU,CAAE,EACpB,IAAI,CACP;AAED,IAAA,IAAM,WAAW,GAAGC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACb,SAAS,CACT,EAAA,UAAU,CACK;IAEtB,QACIC,qCAACC,iBAAY,EAAAF,cAAA,CAAA,EAAA,EACL,WAAW,EACf,EAAA,WAAW,EACPC,sBAAA,CAAA,aAAA,CAACE,cAAQ,EAAA,IAAA;YACJ,WAAW,KACRF,sBACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEG,mBAAE,CAACC,uBAAM,CAAC,eAAe,GAAA,EAAA,GAAA,EAAA;oBAChC,EAAC,CAAAA,uBAAM,CAAC,eAAe,CAAA,GAAG,SAAS,IAAI,aAAa,KAAK,SAAS;wBACpE,EAED,EAAA,WAAW,CACT,CACV;YAEA,CAAC,SAAS,IAAI,aAAa,KAAK,SAAS,MACtCJ,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAEG,mBAAE,CACTC,uBAAM,CAAC,aAAa,EACpB,aAAa,KAAK,SAAS,IAAI,IAAI,IAAIA,uBAAM,CAAC,IAAI,CACrD,EAAA;AAED,gBAAAJ,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAc,EAAA,cAAA,EAAA,2BAA2B,EAAG,CAAA,CAC9C,CACV,CACM,EAEf,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CAAA,EAEnB,aAAa,KAAK,SAAS,IAAI,KAAK,CAC1B;AAEvB;;;;"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-2xs: 4px;
|
|
3
3
|
--gap-4: var(--gap-2xs);
|
|
4
|
-
}
|
|
4
|
+
}
|
|
5
|
+
:root {
|
|
5
6
|
--arrow-transform: rotate(180deg);
|
|
6
|
-
}
|
|
7
|
+
}
|
|
8
|
+
.iconContainer {
|
|
7
9
|
display: flex;
|
|
8
10
|
transition: transform 0.15s ease-in-out;
|
|
9
|
-
}
|
|
11
|
+
}
|
|
12
|
+
.addonsContainer {
|
|
10
13
|
display: flex;
|
|
11
|
-
}
|
|
14
|
+
}
|
|
15
|
+
.addonsContainer.showControlIcon {
|
|
12
16
|
margin-right: var(--gap-4);
|
|
13
|
-
}
|
|
17
|
+
}
|
|
18
|
+
.open {
|
|
14
19
|
transform: var(--arrow-transform);
|
|
15
20
|
}
|
package/esm/field/Component.d.ts
CHANGED
|
@@ -2,11 +2,12 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
2
2
|
import { type CustomButtonProps } from '@alfalab/core-components-custom-button/esm';
|
|
3
3
|
import { type PickerButtonSize, type PickerButtonVariant } from '@alfalab/core-components-picker-button/esm/shared';
|
|
4
4
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/esm/shared';
|
|
5
|
-
declare type
|
|
5
|
+
declare type UselessProps = Partial<Pick<BaseFieldProps, 'selectedMultiple' | 'onClear' | 'FormControlComponent' | 'valueRenderer' | 'Arrow' | 'labelView' | 'toggleMenu' | 'setSelectedItems'>>;
|
|
6
|
+
declare type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & UselessProps & CustomButtonProps & {
|
|
6
7
|
buttonSize?: PickerButtonSize;
|
|
7
8
|
buttonVariant?: PickerButtonVariant;
|
|
8
9
|
showArrow?: boolean;
|
|
9
10
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
11
|
};
|
|
11
|
-
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
|
+
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
13
|
export {};
|
package/esm/field/Component.js
CHANGED
|
@@ -5,24 +5,10 @@ import { CustomButton } from '@alfalab/core-components-custom-button/esm';
|
|
|
5
5
|
import { getIcon } from '@alfalab/core-components-picker-button/esm/shared';
|
|
6
6
|
import styles from './index.module.css.js';
|
|
7
7
|
|
|
8
|
-
var SIZE_TO_CLASSNAME_MAP = {
|
|
9
|
-
xxs: 'size-32',
|
|
10
|
-
xs: 'size-40',
|
|
11
|
-
s: 'size-48',
|
|
12
|
-
m: 'size-56',
|
|
13
|
-
l: 'size-64',
|
|
14
|
-
xl: 'size-72',
|
|
15
|
-
32: 'size-32',
|
|
16
|
-
40: 'size-40',
|
|
17
|
-
48: 'size-48',
|
|
18
|
-
56: 'size-56',
|
|
19
|
-
64: 'size-64',
|
|
20
|
-
72: 'size-72',
|
|
21
|
-
};
|
|
22
8
|
var Field = function (_a) {
|
|
23
9
|
var _b;
|
|
24
|
-
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon
|
|
25
|
-
var Icon = getIcon(buttonVariant,
|
|
10
|
+
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon; _a.selectedMultiple; _a.onClear; _a.FormControlComponent; _a.valueRenderer; _a.Arrow; _a.labelView; _a.toggleMenu; _a.setSelectedItems; var restProps = __rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow", "icon", "selectedMultiple", "onClear", "FormControlComponent", "valueRenderer", "Arrow", "labelView", "toggleMenu", "setSelectedItems"]);
|
|
11
|
+
var Icon = getIcon(buttonVariant, "size-".concat(buttonSize), icon);
|
|
26
12
|
var buttonProps = __assign(__assign({}, restProps), innerProps);
|
|
27
13
|
return (React.createElement(CustomButton, __assign({}, buttonProps, { rightAddons: React.createElement(Fragment, null,
|
|
28
14
|
rightAddons && (React.createElement("span", { className: cn(styles.addonsContainer, (_b = {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, { type ComponentType, Fragment, type SVGProps } from 'react';\nimport cn from 'classnames';\n\nimport { CustomButton, type CustomButtonProps } from '@alfalab/core-components-custom-button';\nimport {\n getIcon,\n type PickerButtonSize,\n type PickerButtonVariant,\n} from '@alfalab/core-components-picker-button/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\n\nimport styles from './index.module.css';\n\n// Пропсы которые не должны передаваться глубже в Button\ntype UselessProps = Partial<\n Pick<\n BaseFieldProps,\n | 'selectedMultiple'\n | 'onClear'\n | 'FormControlComponent'\n | 'valueRenderer'\n | 'Arrow'\n | 'labelView'\n | 'toggleMenu'\n | 'setSelectedItems'\n >\n>;\n\ntype FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &\n UselessProps &\n CustomButtonProps & {\n buttonSize?: PickerButtonSize;\n buttonVariant?: PickerButtonVariant;\n showArrow?: boolean;\n icon?: ComponentType<SVGProps<SVGSVGElement>>;\n };\n\nexport const Field = ({\n buttonSize = 56,\n buttonVariant = 'default',\n backgroundColor,\n contentColor,\n stateType,\n label,\n open,\n rightAddons,\n innerProps,\n className,\n showArrow = true,\n icon,\n selectedMultiple,\n onClear,\n FormControlComponent,\n valueRenderer,\n Arrow,\n labelView,\n toggleMenu,\n setSelectedItems,\n ...restProps\n}: FieldProps) => {\n const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(\n buttonVariant,\n `size-${buttonSize}`,\n icon,\n );\n\n const buttonProps = {\n ...restProps,\n ...innerProps,\n } as CustomButtonProps;\n\n return (\n <CustomButton\n {...buttonProps}\n rightAddons={\n <Fragment>\n {rightAddons && (\n <span\n className={cn(styles.addonsContainer, {\n [styles.showControlIcon]: showArrow || buttonVariant === 'compact',\n })}\n >\n {rightAddons}\n </span>\n )}\n\n {(showArrow || buttonVariant === 'compact') && (\n <span\n className={cn(\n styles.iconContainer,\n buttonVariant !== 'compact' && open && styles.open,\n )}\n >\n <Icon data-test-id='custom-picker-button-icon' />\n </span>\n )}\n </Fragment>\n }\n block={true}\n size={buttonSize}\n backgroundColor={backgroundColor}\n contentColor={contentColor}\n stateType={stateType}\n className={className}\n >\n {buttonVariant !== 'compact' && label}\n </CustomButton>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAqCO,IAAM,KAAK,GAAG,UAAC,EAsBT,EAAA;;AArBT,IAAA,IAAA,EAAe,GAAA,EAAA,CAAA,UAAA,CAAA,CAAf,UAAU,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,CAAA,CACf,EAAyB,GAAA,EAAA,CAAA,aAAA,CAAA,CAAzB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,CAAA,CACzB,eAAe,GAAA,EAAA,CAAA,eAAA,CAAA,CACf,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,SAAS,GAAA,EAAA,CAAA,SAAA,CACT,CAAA,KAAK,WAAA,CACL,CAAA,IAAI,GAAA,EAAA,CAAA,IAAA,CAAA,CACJ,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA,CACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,CACT,CAAA,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,IAAI,GAAA,EAAA,CAAA,IAAA,CACJ,oBAAgB,CAChB,CAAO,EAAA,CAAA,OAAA,CAAA,CACa,EAAA,CAAA,oBAAA,CAAA,CACP,EAAA,CAAA,aAAA,EACR,EAAA,CAAA,KAAA,CACL,aAAS,CACT,CAAU,EAAA,CAAA,UAAA,CAAA,CACM,EAAA,CAAA,gBAAA,CAAA,KACb,SAAS,GAAA,MAAA,CAAA,EAAA,EArBM,+RAsBrB;AACG,IAAA,IAAM,IAAI,GAA2C,OAAO,CACxD,aAAa,EACb,OAAQ,CAAA,MAAA,CAAA,UAAU,CAAE,EACpB,IAAI,CACP;AAED,IAAA,IAAM,WAAW,GAAG,QAAA,CAAA,QAAA,CAAA,EAAA,EACb,SAAS,CACT,EAAA,UAAU,CACK;IAEtB,QACI,oBAAC,YAAY,EAAA,QAAA,CAAA,EAAA,EACL,WAAW,EACf,EAAA,WAAW,EACP,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;YACJ,WAAW,KACR,KACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAA,EAAA,GAAA,EAAA;oBAChC,EAAC,CAAA,MAAM,CAAC,eAAe,CAAA,GAAG,SAAS,IAAI,aAAa,KAAK,SAAS;wBACpE,EAED,EAAA,WAAW,CACT,CACV;YAEA,CAAC,SAAS,IAAI,aAAa,KAAK,SAAS,MACtC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,aAAa,EACpB,aAAa,KAAK,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CACrD,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAc,EAAA,cAAA,EAAA,2BAA2B,EAAG,CAAA,CAC9C,CACV,CACM,EAEf,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CAAA,EAEnB,aAAa,KAAK,SAAS,IAAI,KAAK,CAC1B;AAEvB;;;;"}
|
package/esm/field/index.css
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-2xs: 4px;
|
|
3
3
|
--gap-4: var(--gap-2xs);
|
|
4
|
-
}
|
|
4
|
+
}
|
|
5
|
+
:root {
|
|
5
6
|
--arrow-transform: rotate(180deg);
|
|
6
|
-
}
|
|
7
|
+
}
|
|
8
|
+
.custom-picker-button__iconContainer_1jwrk {
|
|
7
9
|
display: flex;
|
|
8
10
|
transition: transform 0.15s ease-in-out;
|
|
9
|
-
}
|
|
11
|
+
}
|
|
12
|
+
.custom-picker-button__addonsContainer_1jwrk {
|
|
10
13
|
display: flex;
|
|
11
|
-
}
|
|
14
|
+
}
|
|
15
|
+
.custom-picker-button__addonsContainer_1jwrk.custom-picker-button__showControlIcon_1jwrk {
|
|
12
16
|
margin-right: var(--gap-4);
|
|
13
|
-
}
|
|
17
|
+
}
|
|
18
|
+
.custom-picker-button__open_1jwrk {
|
|
14
19
|
transform: var(--arrow-transform);
|
|
15
20
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"iconContainer":"custom-picker-
|
|
3
|
+
var styles = {"iconContainer":"custom-picker-button__iconContainer_1jwrk","addonsContainer":"custom-picker-button__addonsContainer_1jwrk","showControlIcon":"custom-picker-button__showControlIcon_1jwrk","open":"custom-picker-button__open_1jwrk"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/field/Component.d.ts
CHANGED
|
@@ -2,11 +2,12 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
2
2
|
import { type CustomButtonProps } from '@alfalab/core-components-custom-button';
|
|
3
3
|
import { type PickerButtonSize, type PickerButtonVariant } from '@alfalab/core-components-picker-button/shared';
|
|
4
4
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';
|
|
5
|
-
declare type
|
|
5
|
+
declare type UselessProps = Partial<Pick<BaseFieldProps, 'selectedMultiple' | 'onClear' | 'FormControlComponent' | 'valueRenderer' | 'Arrow' | 'labelView' | 'toggleMenu' | 'setSelectedItems'>>;
|
|
6
|
+
declare type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & UselessProps & CustomButtonProps & {
|
|
6
7
|
buttonSize?: PickerButtonSize;
|
|
7
8
|
buttonVariant?: PickerButtonVariant;
|
|
8
9
|
showArrow?: boolean;
|
|
9
10
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
11
|
};
|
|
11
|
-
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
|
+
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
13
|
export {};
|
package/field/Component.js
CHANGED
|
@@ -14,24 +14,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
15
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
16
16
|
|
|
17
|
-
var SIZE_TO_CLASSNAME_MAP = {
|
|
18
|
-
xxs: 'size-32',
|
|
19
|
-
xs: 'size-40',
|
|
20
|
-
s: 'size-48',
|
|
21
|
-
m: 'size-56',
|
|
22
|
-
l: 'size-64',
|
|
23
|
-
xl: 'size-72',
|
|
24
|
-
32: 'size-32',
|
|
25
|
-
40: 'size-40',
|
|
26
|
-
48: 'size-48',
|
|
27
|
-
56: 'size-56',
|
|
28
|
-
64: 'size-64',
|
|
29
|
-
72: 'size-72',
|
|
30
|
-
};
|
|
31
17
|
var Field = function (_a) {
|
|
32
18
|
var _b;
|
|
33
|
-
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon
|
|
34
|
-
var Icon = shared.getIcon(buttonVariant,
|
|
19
|
+
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, icon = _a.icon; _a.selectedMultiple; _a.onClear; _a.FormControlComponent; _a.valueRenderer; _a.Arrow; _a.labelView; _a.toggleMenu; _a.setSelectedItems; var restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow", "icon", "selectedMultiple", "onClear", "FormControlComponent", "valueRenderer", "Arrow", "labelView", "toggleMenu", "setSelectedItems"]);
|
|
20
|
+
var Icon = shared.getIcon(buttonVariant, "size-".concat(buttonSize), icon);
|
|
35
21
|
var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
|
|
36
22
|
return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
|
|
37
23
|
rightAddons && (React__default.default.createElement("span", { className: cn__default.default(index_module.addonsContainer, (_b = {},
|
package/field/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/field/Component.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/field/Component.tsx"],"sourcesContent":["import React, { type ComponentType, Fragment, type SVGProps } from 'react';\nimport cn from 'classnames';\n\nimport { CustomButton, type CustomButtonProps } from '@alfalab/core-components-custom-button';\nimport {\n getIcon,\n type PickerButtonSize,\n type PickerButtonVariant,\n} from '@alfalab/core-components-picker-button/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\n\nimport styles from './index.module.css';\n\n// Пропсы которые не должны передаваться глубже в Button\ntype UselessProps = Partial<\n Pick<\n BaseFieldProps,\n | 'selectedMultiple'\n | 'onClear'\n | 'FormControlComponent'\n | 'valueRenderer'\n | 'Arrow'\n | 'labelView'\n | 'toggleMenu'\n | 'setSelectedItems'\n >\n>;\n\ntype FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &\n UselessProps &\n CustomButtonProps & {\n buttonSize?: PickerButtonSize;\n buttonVariant?: PickerButtonVariant;\n showArrow?: boolean;\n icon?: ComponentType<SVGProps<SVGSVGElement>>;\n };\n\nexport const Field = ({\n buttonSize = 56,\n buttonVariant = 'default',\n backgroundColor,\n contentColor,\n stateType,\n label,\n open,\n rightAddons,\n innerProps,\n className,\n showArrow = true,\n icon,\n selectedMultiple,\n onClear,\n FormControlComponent,\n valueRenderer,\n Arrow,\n labelView,\n toggleMenu,\n setSelectedItems,\n ...restProps\n}: FieldProps) => {\n const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(\n buttonVariant,\n `size-${buttonSize}`,\n icon,\n );\n\n const buttonProps = {\n ...restProps,\n ...innerProps,\n } as CustomButtonProps;\n\n return (\n <CustomButton\n {...buttonProps}\n rightAddons={\n <Fragment>\n {rightAddons && (\n <span\n className={cn(styles.addonsContainer, {\n [styles.showControlIcon]: showArrow || buttonVariant === 'compact',\n })}\n >\n {rightAddons}\n </span>\n )}\n\n {(showArrow || buttonVariant === 'compact') && (\n <span\n className={cn(\n styles.iconContainer,\n buttonVariant !== 'compact' && open && styles.open,\n )}\n >\n <Icon data-test-id='custom-picker-button-icon' />\n </span>\n )}\n </Fragment>\n }\n block={true}\n size={buttonSize}\n backgroundColor={backgroundColor}\n contentColor={contentColor}\n stateType={stateType}\n className={className}\n >\n {buttonVariant !== 'compact' && label}\n </CustomButton>\n );\n};\n"],"names":["__rest","getIcon","__assign","React","CustomButton","Fragment","cn","styles"],"mappings":";;;;;;;;;;;;;;;;AAqCO,IAAM,KAAK,GAAG,UAAC,EAsBT,EAAA;;AArBT,IAAA,IAAA,EAAe,GAAA,EAAA,CAAA,UAAA,CAAA,CAAf,UAAU,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,CAAA,CACf,EAAyB,GAAA,EAAA,CAAA,aAAA,CAAA,CAAzB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,CAAA,CACzB,eAAe,GAAA,EAAA,CAAA,eAAA,CAAA,CACf,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,SAAS,GAAA,EAAA,CAAA,SAAA,CACT,CAAA,KAAK,WAAA,CACL,CAAA,IAAI,GAAA,EAAA,CAAA,IAAA,CAAA,CACJ,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA,CACX,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,CACT,CAAA,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,IAAI,GAAA,EAAA,CAAA,IAAA,CACJ,oBAAgB,CAChB,CAAO,EAAA,CAAA,OAAA,CAAA,CACa,EAAA,CAAA,oBAAA,CAAA,CACP,EAAA,CAAA,aAAA,EACR,EAAA,CAAA,KAAA,CACL,aAAS,CACT,CAAU,EAAA,CAAA,UAAA,CAAA,CACM,EAAA,CAAA,gBAAA,CAAA,KACb,SAAS,GAAAA,YAAA,CAAA,EAAA,EArBM,+RAsBrB;AACG,IAAA,IAAM,IAAI,GAA2CC,cAAO,CACxD,aAAa,EACb,OAAQ,CAAA,MAAA,CAAA,UAAU,CAAE,EACpB,IAAI,CACP;AAED,IAAA,IAAM,WAAW,GAAGC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACb,SAAS,CACT,EAAA,UAAU,CACK;IAEtB,QACIC,qCAACC,uCAAY,EAAAF,cAAA,CAAA,EAAA,EACL,WAAW,EACf,EAAA,WAAW,EACPC,sBAAA,CAAA,aAAA,CAACE,cAAQ,EAAA,IAAA;YACJ,WAAW,KACRF,sBACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEG,mBAAE,CAACC,YAAM,CAAC,eAAe,GAAA,EAAA,GAAA,EAAA;oBAChC,EAAC,CAAAA,YAAM,CAAC,eAAe,CAAA,GAAG,SAAS,IAAI,aAAa,KAAK,SAAS;wBACpE,EAED,EAAA,WAAW,CACT,CACV;YAEA,CAAC,SAAS,IAAI,aAAa,KAAK,SAAS,MACtCJ,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAEG,mBAAE,CACTC,YAAM,CAAC,aAAa,EACpB,aAAa,KAAK,SAAS,IAAI,IAAI,IAAIA,YAAM,CAAC,IAAI,CACrD,EAAA;AAED,gBAAAJ,sBAAA,CAAA,aAAA,CAAC,IAAI,EAAc,EAAA,cAAA,EAAA,2BAA2B,EAAG,CAAA,CAC9C,CACV,CACM,EAEf,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CAAA,EAEnB,aAAa,KAAK,SAAS,IAAI,KAAK,CAC1B;AAEvB;;;;"}
|
package/field/index.css
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-2xs: 4px;
|
|
3
3
|
--gap-4: var(--gap-2xs);
|
|
4
|
-
}
|
|
4
|
+
}
|
|
5
|
+
:root {
|
|
5
6
|
--arrow-transform: rotate(180deg);
|
|
6
|
-
}
|
|
7
|
+
}
|
|
8
|
+
.custom-picker-button__iconContainer_1jwrk {
|
|
7
9
|
display: flex;
|
|
8
10
|
transition: transform 0.15s ease-in-out;
|
|
9
|
-
}
|
|
11
|
+
}
|
|
12
|
+
.custom-picker-button__addonsContainer_1jwrk {
|
|
10
13
|
display: flex;
|
|
11
|
-
}
|
|
14
|
+
}
|
|
15
|
+
.custom-picker-button__addonsContainer_1jwrk.custom-picker-button__showControlIcon_1jwrk {
|
|
12
16
|
margin-right: var(--gap-4);
|
|
13
|
-
}
|
|
17
|
+
}
|
|
18
|
+
.custom-picker-button__open_1jwrk {
|
|
14
19
|
transform: var(--arrow-transform);
|
|
15
20
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"iconContainer":"custom-picker-
|
|
5
|
+
var styles = {"iconContainer":"custom-picker-button__iconContainer_1jwrk","addonsContainer":"custom-picker-button__addonsContainer_1jwrk","showControlIcon":"custom-picker-button__showControlIcon_1jwrk","open":"custom-picker-button__open_1jwrk"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -2,11 +2,12 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
2
2
|
import { type CustomButtonProps } from '@alfalab/core-components-custom-button/modern';
|
|
3
3
|
import { type PickerButtonSize, type PickerButtonVariant } from '@alfalab/core-components-picker-button/modern/shared';
|
|
4
4
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/modern/shared';
|
|
5
|
-
declare type
|
|
5
|
+
declare type UselessProps = Partial<Pick<BaseFieldProps, 'selectedMultiple' | 'onClear' | 'FormControlComponent' | 'valueRenderer' | 'Arrow' | 'labelView' | 'toggleMenu' | 'setSelectedItems'>>;
|
|
6
|
+
declare type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & UselessProps & CustomButtonProps & {
|
|
6
7
|
buttonSize?: PickerButtonSize;
|
|
7
8
|
buttonVariant?: PickerButtonVariant;
|
|
8
9
|
showArrow?: boolean;
|
|
9
10
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
11
|
};
|
|
11
|
-
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
|
+
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -4,22 +4,8 @@ import { CustomButton } from '@alfalab/core-components-custom-button/modern';
|
|
|
4
4
|
import { getIcon } from '@alfalab/core-components-picker-button/modern/shared';
|
|
5
5
|
import styles from './index.module.css.js';
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
xs: 'size-40',
|
|
10
|
-
s: 'size-48',
|
|
11
|
-
m: 'size-56',
|
|
12
|
-
l: 'size-64',
|
|
13
|
-
xl: 'size-72',
|
|
14
|
-
32: 'size-32',
|
|
15
|
-
40: 'size-40',
|
|
16
|
-
48: 'size-48',
|
|
17
|
-
56: 'size-56',
|
|
18
|
-
64: 'size-64',
|
|
19
|
-
72: 'size-72',
|
|
20
|
-
};
|
|
21
|
-
const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, icon, ...restProps }) => {
|
|
22
|
-
const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
|
|
7
|
+
const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }) => {
|
|
8
|
+
const Icon = getIcon(buttonVariant, `size-${buttonSize}`, icon);
|
|
23
9
|
const buttonProps = {
|
|
24
10
|
...restProps,
|
|
25
11
|
...innerProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, { type ComponentType, Fragment, type SVGProps } from 'react';\nimport cn from 'classnames';\n\nimport { CustomButton, type CustomButtonProps } from '@alfalab/core-components-custom-button';\nimport {\n getIcon,\n type PickerButtonSize,\n type PickerButtonVariant,\n} from '@alfalab/core-components-picker-button/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\n\nimport styles from './index.module.css';\n\n// Пропсы которые не должны передаваться глубже в Button\ntype UselessProps = Partial<\n Pick<\n BaseFieldProps,\n | 'selectedMultiple'\n | 'onClear'\n | 'FormControlComponent'\n | 'valueRenderer'\n | 'Arrow'\n | 'labelView'\n | 'toggleMenu'\n | 'setSelectedItems'\n >\n>;\n\ntype FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &\n UselessProps &\n CustomButtonProps & {\n buttonSize?: PickerButtonSize;\n buttonVariant?: PickerButtonVariant;\n showArrow?: boolean;\n icon?: ComponentType<SVGProps<SVGSVGElement>>;\n };\n\nexport const Field = ({\n buttonSize = 56,\n buttonVariant = 'default',\n backgroundColor,\n contentColor,\n stateType,\n label,\n open,\n rightAddons,\n innerProps,\n className,\n showArrow = true,\n icon,\n selectedMultiple,\n onClear,\n FormControlComponent,\n valueRenderer,\n Arrow,\n labelView,\n toggleMenu,\n setSelectedItems,\n ...restProps\n}: FieldProps) => {\n const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(\n buttonVariant,\n `size-${buttonSize}`,\n icon,\n );\n\n const buttonProps = {\n ...restProps,\n ...innerProps,\n } as CustomButtonProps;\n\n return (\n <CustomButton\n {...buttonProps}\n rightAddons={\n <Fragment>\n {rightAddons && (\n <span\n className={cn(styles.addonsContainer, {\n [styles.showControlIcon]: showArrow || buttonVariant === 'compact',\n })}\n >\n {rightAddons}\n </span>\n )}\n\n {(showArrow || buttonVariant === 'compact') && (\n <span\n className={cn(\n styles.iconContainer,\n buttonVariant !== 'compact' && open && styles.open,\n )}\n >\n <Icon data-test-id='custom-picker-button-icon' />\n </span>\n )}\n </Fragment>\n }\n block={true}\n size={buttonSize}\n backgroundColor={backgroundColor}\n contentColor={contentColor}\n stateType={stateType}\n className={className}\n >\n {buttonVariant !== 'compact' && label}\n </CustomButton>\n );\n};\n"],"names":[],"mappings":";;;;;;AAqCa,MAAA,KAAK,GAAG,CAAC,EAClB,UAAU,GAAG,EAAE,EACf,aAAa,GAAG,SAAS,EACzB,eAAe,EACf,YAAY,EACZ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,IAAI,EACJ,gBAAgB,EAChB,OAAO,EACP,oBAAoB,EACpB,aAAa,EACb,KAAK,EACL,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,GAAG,SAAS,EACH,KAAI;AACb,IAAA,MAAM,IAAI,GAA2C,OAAO,CACxD,aAAa,EACb,CAAQ,KAAA,EAAA,UAAU,CAAE,CAAA,EACpB,IAAI,CACP;AAED,IAAA,MAAM,WAAW,GAAG;AAChB,QAAA,GAAG,SAAS;AACZ,QAAA,GAAG,UAAU;KACK;IAEtB,QACI,oBAAC,YAAY,EAAA,EAAA,GACL,WAAW,EACf,WAAW,EACP,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;YACJ,WAAW,KACR,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE;oBAClC,CAAC,MAAM,CAAC,eAAe,GAAG,SAAS,IAAI,aAAa,KAAK,SAAS;iBACrE,CAAC,EAAA,EAED,WAAW,CACT,CACV;YAEA,CAAC,SAAS,IAAI,aAAa,KAAK,SAAS,MACtC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,aAAa,EACpB,aAAa,KAAK,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CACrD,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAc,EAAA,cAAA,EAAA,2BAA2B,EAAG,CAAA,CAC9C,CACV,CACM,EAEf,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,EAEnB,aAAa,KAAK,SAAS,IAAI,KAAK,CAC1B;AAEvB;;;;"}
|
package/modern/field/index.css
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-2xs: 4px;
|
|
3
3
|
--gap-4: var(--gap-2xs);
|
|
4
|
-
}
|
|
4
|
+
}
|
|
5
|
+
:root {
|
|
5
6
|
--arrow-transform: rotate(180deg);
|
|
6
|
-
}
|
|
7
|
+
}
|
|
8
|
+
.custom-picker-button__iconContainer_1jwrk {
|
|
7
9
|
display: flex;
|
|
8
10
|
transition: transform 0.15s ease-in-out;
|
|
9
|
-
}
|
|
11
|
+
}
|
|
12
|
+
.custom-picker-button__addonsContainer_1jwrk {
|
|
10
13
|
display: flex;
|
|
11
|
-
}
|
|
14
|
+
}
|
|
15
|
+
.custom-picker-button__addonsContainer_1jwrk.custom-picker-button__showControlIcon_1jwrk {
|
|
12
16
|
margin-right: var(--gap-4);
|
|
13
|
-
}
|
|
17
|
+
}
|
|
18
|
+
.custom-picker-button__open_1jwrk {
|
|
14
19
|
transform: var(--arrow-transform);
|
|
15
20
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"iconContainer":"custom-picker-
|
|
3
|
+
const styles = {"iconContainer":"custom-picker-button__iconContainer_1jwrk","addonsContainer":"custom-picker-button__addonsContainer_1jwrk","showControlIcon":"custom-picker-button__showControlIcon_1jwrk","open":"custom-picker-button__open_1jwrk"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -2,11 +2,12 @@ import React, { type ComponentType, type SVGProps } from 'react';
|
|
|
2
2
|
import { type CustomButtonProps } from '@alfalab/core-components-custom-button/moderncssm';
|
|
3
3
|
import { type PickerButtonSize, type PickerButtonVariant } from '@alfalab/core-components-picker-button/moderncssm/shared';
|
|
4
4
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/moderncssm/shared';
|
|
5
|
-
declare type
|
|
5
|
+
declare type UselessProps = Partial<Pick<BaseFieldProps, 'selectedMultiple' | 'onClear' | 'FormControlComponent' | 'valueRenderer' | 'Arrow' | 'labelView' | 'toggleMenu' | 'setSelectedItems'>>;
|
|
6
|
+
declare type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & UselessProps & CustomButtonProps & {
|
|
6
7
|
buttonSize?: PickerButtonSize;
|
|
7
8
|
buttonVariant?: PickerButtonVariant;
|
|
8
9
|
showArrow?: boolean;
|
|
9
10
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
11
|
};
|
|
11
|
-
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
|
+
export declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -4,22 +4,8 @@ import { CustomButton } from '@alfalab/core-components-custom-button/moderncssm'
|
|
|
4
4
|
import { getIcon } from '@alfalab/core-components-picker-button/moderncssm/shared';
|
|
5
5
|
import styles from './index.module.css';
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
xs: 'size-40',
|
|
10
|
-
s: 'size-48',
|
|
11
|
-
m: 'size-56',
|
|
12
|
-
l: 'size-64',
|
|
13
|
-
xl: 'size-72',
|
|
14
|
-
32: 'size-32',
|
|
15
|
-
40: 'size-40',
|
|
16
|
-
48: 'size-48',
|
|
17
|
-
56: 'size-56',
|
|
18
|
-
64: 'size-64',
|
|
19
|
-
72: 'size-72',
|
|
20
|
-
};
|
|
21
|
-
const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, icon, ...restProps }) => {
|
|
22
|
-
const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
|
|
7
|
+
const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, icon, selectedMultiple, onClear, FormControlComponent, valueRenderer, Arrow, labelView, toggleMenu, setSelectedItems, ...restProps }) => {
|
|
8
|
+
const Icon = getIcon(buttonVariant, `size-${buttonSize}`, icon);
|
|
23
9
|
const buttonProps = {
|
|
24
10
|
...restProps,
|
|
25
11
|
...innerProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/field/Component.tsx"],"sourcesContent":["import React, { type ComponentType, Fragment, type SVGProps } from 'react';\nimport cn from 'classnames';\n\nimport { CustomButton, type CustomButtonProps } from '@alfalab/core-components-custom-button';\nimport {\n getIcon,\n type PickerButtonSize,\n type PickerButtonVariant,\n} from '@alfalab/core-components-picker-button/shared';\nimport { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';\n\nimport styles from './index.module.css';\n\n// Пропсы которые не должны передаваться глубже в Button\ntype UselessProps = Partial<\n Pick<\n BaseFieldProps,\n | 'selectedMultiple'\n | 'onClear'\n | 'FormControlComponent'\n | 'valueRenderer'\n | 'Arrow'\n | 'labelView'\n | 'toggleMenu'\n | 'setSelectedItems'\n >\n>;\n\ntype FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &\n UselessProps &\n CustomButtonProps & {\n buttonSize?: PickerButtonSize;\n buttonVariant?: PickerButtonVariant;\n showArrow?: boolean;\n icon?: ComponentType<SVGProps<SVGSVGElement>>;\n };\n\nexport const Field = ({\n buttonSize = 56,\n buttonVariant = 'default',\n backgroundColor,\n contentColor,\n stateType,\n label,\n open,\n rightAddons,\n innerProps,\n className,\n showArrow = true,\n icon,\n selectedMultiple,\n onClear,\n FormControlComponent,\n valueRenderer,\n Arrow,\n labelView,\n toggleMenu,\n setSelectedItems,\n ...restProps\n}: FieldProps) => {\n const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(\n buttonVariant,\n `size-${buttonSize}`,\n icon,\n );\n\n const buttonProps = {\n ...restProps,\n ...innerProps,\n } as CustomButtonProps;\n\n return (\n <CustomButton\n {...buttonProps}\n rightAddons={\n <Fragment>\n {rightAddons && (\n <span\n className={cn(styles.addonsContainer, {\n [styles.showControlIcon]: showArrow || buttonVariant === 'compact',\n })}\n >\n {rightAddons}\n </span>\n )}\n\n {(showArrow || buttonVariant === 'compact') && (\n <span\n className={cn(\n styles.iconContainer,\n buttonVariant !== 'compact' && open && styles.open,\n )}\n >\n <Icon data-test-id='custom-picker-button-icon' />\n </span>\n )}\n </Fragment>\n }\n block={true}\n size={buttonSize}\n backgroundColor={backgroundColor}\n contentColor={contentColor}\n stateType={stateType}\n className={className}\n >\n {buttonVariant !== 'compact' && label}\n </CustomButton>\n );\n};\n"],"names":[],"mappings":";;;;;;AAqCa,MAAA,KAAK,GAAG,CAAC,EAClB,UAAU,GAAG,EAAE,EACf,aAAa,GAAG,SAAS,EACzB,eAAe,EACf,YAAY,EACZ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,IAAI,EACJ,gBAAgB,EAChB,OAAO,EACP,oBAAoB,EACpB,aAAa,EACb,KAAK,EACL,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,GAAG,SAAS,EACH,KAAI;AACb,IAAA,MAAM,IAAI,GAA2C,OAAO,CACxD,aAAa,EACb,CAAQ,KAAA,EAAA,UAAU,CAAE,CAAA,EACpB,IAAI,CACP;AAED,IAAA,MAAM,WAAW,GAAG;AAChB,QAAA,GAAG,SAAS;AACZ,QAAA,GAAG,UAAU;KACK;IAEtB,QACI,oBAAC,YAAY,EAAA,EAAA,GACL,WAAW,EACf,WAAW,EACP,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;YACJ,WAAW,KACR,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE;oBAClC,CAAC,MAAM,CAAC,eAAe,GAAG,SAAS,IAAI,aAAa,KAAK,SAAS;iBACrE,CAAC,EAAA,EAED,WAAW,CACT,CACV;YAEA,CAAC,SAAS,IAAI,aAAa,KAAK,SAAS,MACtC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,aAAa,EACpB,aAAa,KAAK,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CACrD,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAc,EAAA,cAAA,EAAA,2BAA2B,EAAG,CAAA,CAC9C,CACV,CACM,EAEf,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,EAEnB,aAAa,KAAK,SAAS,IAAI,KAAK,CAC1B;AAEvB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-custom-picker-button",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2",
|
|
4
4
|
"description": "Custom picker button component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
"main": "index.js",
|
|
11
11
|
"module": "./esm/index.js",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@alfalab/core-components-custom-button": "
|
|
14
|
-
"@alfalab/core-components-mq": "
|
|
15
|
-
"@alfalab/core-components-picker-button": "
|
|
16
|
-
"@alfalab/core-components-select": "
|
|
13
|
+
"@alfalab/core-components-custom-button": "5.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2",
|
|
14
|
+
"@alfalab/core-components-mq": "6.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2",
|
|
15
|
+
"@alfalab/core-components-picker-button": "13.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2",
|
|
16
|
+
"@alfalab/core-components-select": "19.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2",
|
|
17
17
|
"classnames": "^2.5.1",
|
|
18
18
|
"tslib": "^2.4.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"react": "^16.9.0 || ^17.0.1 || ^18.0.0",
|
|
22
|
-
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
21
|
+
"react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
|
|
22
|
+
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
|
|
23
23
|
},
|
|
24
24
|
"publishConfig": {
|
|
25
25
|
"access": "public",
|
|
26
26
|
"directory": "dist"
|
|
27
27
|
},
|
|
28
|
-
"themesVersion": "
|
|
29
|
-
"varsVersion": "
|
|
28
|
+
"themesVersion": "15.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2",
|
|
29
|
+
"varsVersion": "11.0.0-8406faee42e08c133fbcbb0de3e6eb2df6766dd2"
|
|
30
30
|
}
|
package/src/field/Component.tsx
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
type ButtonHTMLAttributes,
|
|
3
|
-
type ComponentType,
|
|
4
|
-
Fragment,
|
|
5
|
-
type SVGProps,
|
|
6
|
-
} from 'react';
|
|
1
|
+
import React, { type ComponentType, Fragment, type SVGProps } from 'react';
|
|
7
2
|
import cn from 'classnames';
|
|
8
3
|
|
|
9
4
|
import { CustomButton, type CustomButtonProps } from '@alfalab/core-components-custom-button';
|
|
@@ -16,7 +11,23 @@ import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-sele
|
|
|
16
11
|
|
|
17
12
|
import styles from './index.module.css';
|
|
18
13
|
|
|
14
|
+
// Пропсы которые не должны передаваться глубже в Button
|
|
15
|
+
type UselessProps = Partial<
|
|
16
|
+
Pick<
|
|
17
|
+
BaseFieldProps,
|
|
18
|
+
| 'selectedMultiple'
|
|
19
|
+
| 'onClear'
|
|
20
|
+
| 'FormControlComponent'
|
|
21
|
+
| 'valueRenderer'
|
|
22
|
+
| 'Arrow'
|
|
23
|
+
| 'labelView'
|
|
24
|
+
| 'toggleMenu'
|
|
25
|
+
| 'setSelectedItems'
|
|
26
|
+
>
|
|
27
|
+
>;
|
|
28
|
+
|
|
19
29
|
type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &
|
|
30
|
+
UselessProps &
|
|
20
31
|
CustomButtonProps & {
|
|
21
32
|
buttonSize?: PickerButtonSize;
|
|
22
33
|
buttonVariant?: PickerButtonVariant;
|
|
@@ -24,21 +35,6 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &
|
|
|
24
35
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
25
36
|
};
|
|
26
37
|
|
|
27
|
-
const SIZE_TO_CLASSNAME_MAP = {
|
|
28
|
-
xxs: 'size-32',
|
|
29
|
-
xs: 'size-40',
|
|
30
|
-
s: 'size-48',
|
|
31
|
-
m: 'size-56',
|
|
32
|
-
l: 'size-64',
|
|
33
|
-
xl: 'size-72',
|
|
34
|
-
32: 'size-32',
|
|
35
|
-
40: 'size-40',
|
|
36
|
-
48: 'size-48',
|
|
37
|
-
56: 'size-56',
|
|
38
|
-
64: 'size-64',
|
|
39
|
-
72: 'size-72',
|
|
40
|
-
};
|
|
41
|
-
|
|
42
38
|
export const Field = ({
|
|
43
39
|
buttonSize = 56,
|
|
44
40
|
buttonVariant = 'default',
|
|
@@ -52,18 +48,26 @@ export const Field = ({
|
|
|
52
48
|
className,
|
|
53
49
|
showArrow = true,
|
|
54
50
|
icon,
|
|
51
|
+
selectedMultiple,
|
|
52
|
+
onClear,
|
|
53
|
+
FormControlComponent,
|
|
54
|
+
valueRenderer,
|
|
55
|
+
Arrow,
|
|
56
|
+
labelView,
|
|
57
|
+
toggleMenu,
|
|
58
|
+
setSelectedItems,
|
|
55
59
|
...restProps
|
|
56
60
|
}: FieldProps) => {
|
|
57
61
|
const Icon: ComponentType<SVGProps<SVGSVGElement>> = getIcon(
|
|
58
62
|
buttonVariant,
|
|
59
|
-
|
|
63
|
+
`size-${buttonSize}`,
|
|
60
64
|
icon,
|
|
61
65
|
);
|
|
62
66
|
|
|
63
67
|
const buttonProps = {
|
|
64
68
|
...restProps,
|
|
65
69
|
...innerProps,
|
|
66
|
-
} as
|
|
70
|
+
} as CustomButtonProps;
|
|
67
71
|
|
|
68
72
|
return (
|
|
69
73
|
<CustomButton
|