@alfalab/core-components-custom-picker-button 1.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/Component-2aef4eba.d.ts +50 -0
- package/Component-3885b0d7.d.ts +71 -0
- package/Component-3e68f8db.d.ts +11 -0
- package/Component-3ebe4754.d.ts +176 -0
- package/Component-5e1b8383.d.ts +4 -0
- package/Component-bdb4c6b9.d.ts +12 -0
- package/Component-ebda875c.d.ts +142 -0
- package/Component.desktop.d.ts +6 -0
- package/Component.desktop.js +28 -0
- package/Component.mobile-ae13210f.d.ts +7 -0
- package/Component.mobile-b2c0420d.d.ts +35 -0
- package/Component.mobile.d.ts +6 -0
- package/Component.mobile.js +28 -0
- package/Component.responsive-2aef4eba.d.ts +28 -0
- package/Component.responsive.d.ts +22 -0
- package/Component.responsive.js +28 -0
- package/Context-bdb4c6b9.d.ts +4 -0
- package/ResponsiveContext-baf4875b.d.ts +5 -0
- package/component-3885b0d7.d.ts +43 -0
- package/consts-f777ba1a.d.ts +2 -0
- package/cssm/Component-2aef4eba.d.ts +50 -0
- package/cssm/Component-3885b0d7.d.ts +71 -0
- package/cssm/Component-3e68f8db.d.ts +11 -0
- package/cssm/Component-3ebe4754.d.ts +176 -0
- package/cssm/Component-5e1b8383.d.ts +4 -0
- package/cssm/Component-bdb4c6b9.d.ts +12 -0
- package/cssm/Component-ebda875c.d.ts +142 -0
- package/cssm/Component.desktop.d.ts +6 -0
- package/cssm/Component.desktop.js +29 -0
- package/cssm/Component.mobile-ae13210f.d.ts +7 -0
- package/cssm/Component.mobile-b2c0420d.d.ts +35 -0
- package/cssm/Component.mobile.d.ts +6 -0
- package/cssm/Component.mobile.js +29 -0
- package/cssm/Component.responsive-2aef4eba.d.ts +28 -0
- package/cssm/Component.responsive.d.ts +22 -0
- package/cssm/Component.responsive.js +29 -0
- package/cssm/Context-bdb4c6b9.d.ts +4 -0
- package/cssm/ResponsiveContext-baf4875b.d.ts +5 -0
- package/cssm/component-3885b0d7.d.ts +43 -0
- package/cssm/consts-f777ba1a.d.ts +2 -0
- package/cssm/desktop.d.ts +2 -0
- package/cssm/desktop.js +17 -0
- package/cssm/field/Component.d.ts +11 -0
- package/cssm/field/Component.js +31 -0
- package/cssm/field/index.d.ts +1 -0
- package/cssm/field/index.js +15 -0
- package/cssm/field/index.module.css +27 -0
- package/cssm/hook-3e68f8db.d.ts +62 -0
- package/cssm/index-136acbb1.d.ts +28 -0
- package/cssm/index-2aef4eba.d.ts +5 -0
- package/cssm/index-3885b0d7.d.ts +3 -0
- package/cssm/index-3e68f8db.d.ts +100 -0
- package/cssm/index-3ebe4754.d.ts +1 -0
- package/cssm/index-425c8522.d.ts +6 -0
- package/cssm/index-701e77da.d.ts +4 -0
- package/cssm/index-bdb4c6b9.d.ts +2 -0
- package/cssm/index-e81c389f.d.ts +3 -0
- package/cssm/index-ebda875c.d.ts +37 -0
- package/cssm/index-f12ee135.d.ts +3 -0
- package/cssm/index.d.ts +2 -0
- package/cssm/index.js +21 -0
- package/cssm/mobile.d.ts +2 -0
- package/cssm/mobile.js +17 -0
- package/cssm/responsive.d.ts +2 -0
- package/cssm/responsive.js +21 -0
- package/cssm/types-5e678ff2.d.ts +219 -0
- package/cssm/types-ebda875c.d.ts +113 -0
- package/cssm/typings-5e1b8383.d.ts +549 -0
- package/cssm/typings-bdb4c6b9.d.ts +52 -0
- package/cssm/utils-1574ad8b.d.ts +29 -0
- package/cssm/utils-5e1b8383.d.ts +38 -0
- package/cssm/utils-b64479aa.d.ts +8 -0
- package/desktop.d.ts +2 -0
- package/desktop.js +16 -0
- package/esm/Component-2aef4eba.d.ts +50 -0
- package/esm/Component-3885b0d7.d.ts +71 -0
- package/esm/Component-3e68f8db.d.ts +11 -0
- package/esm/Component-3ebe4754.d.ts +176 -0
- package/esm/Component-5e1b8383.d.ts +4 -0
- package/esm/Component-bdb4c6b9.d.ts +12 -0
- package/esm/Component-ebda875c.d.ts +142 -0
- package/esm/Component.desktop.d.ts +6 -0
- package/esm/Component.desktop.js +20 -0
- package/esm/Component.mobile-ae13210f.d.ts +7 -0
- package/esm/Component.mobile-b2c0420d.d.ts +35 -0
- package/esm/Component.mobile.d.ts +6 -0
- package/esm/Component.mobile.js +20 -0
- package/esm/Component.responsive-2aef4eba.d.ts +28 -0
- package/esm/Component.responsive.d.ts +22 -0
- package/esm/Component.responsive.js +20 -0
- package/esm/Context-bdb4c6b9.d.ts +4 -0
- package/esm/ResponsiveContext-baf4875b.d.ts +5 -0
- package/esm/component-3885b0d7.d.ts +43 -0
- package/esm/consts-f777ba1a.d.ts +2 -0
- package/esm/desktop.d.ts +2 -0
- package/esm/desktop.js +8 -0
- package/esm/field/Component.d.ts +11 -0
- package/esm/field/Component.js +23 -0
- package/esm/field/index.css +28 -0
- package/esm/field/index.d.ts +1 -0
- package/esm/field/index.js +6 -0
- package/esm/hook-3e68f8db.d.ts +62 -0
- package/esm/index-136acbb1.d.ts +28 -0
- package/esm/index-2aef4eba.d.ts +5 -0
- package/esm/index-3885b0d7.d.ts +3 -0
- package/esm/index-3e68f8db.d.ts +100 -0
- package/esm/index-3ebe4754.d.ts +1 -0
- package/esm/index-425c8522.d.ts +6 -0
- package/esm/index-701e77da.d.ts +4 -0
- package/esm/index-bdb4c6b9.d.ts +2 -0
- package/esm/index-e81c389f.d.ts +3 -0
- package/esm/index-ebda875c.d.ts +37 -0
- package/esm/index-f12ee135.d.ts +3 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +12 -0
- package/esm/mobile.d.ts +2 -0
- package/esm/mobile.js +8 -0
- package/esm/responsive.d.ts +2 -0
- package/esm/responsive.js +12 -0
- package/esm/types-5e678ff2.d.ts +219 -0
- package/esm/types-ebda875c.d.ts +113 -0
- package/esm/typings-5e1b8383.d.ts +549 -0
- package/esm/typings-bdb4c6b9.d.ts +52 -0
- package/esm/utils-1574ad8b.d.ts +29 -0
- package/esm/utils-5e1b8383.d.ts +38 -0
- package/esm/utils-b64479aa.d.ts +8 -0
- package/field/Component.d.ts +11 -0
- package/field/Component.js +32 -0
- package/field/index.css +28 -0
- package/field/index.d.ts +1 -0
- package/field/index.js +14 -0
- package/hook-3e68f8db.d.ts +62 -0
- package/index-136acbb1.d.ts +28 -0
- package/index-2aef4eba.d.ts +5 -0
- package/index-3885b0d7.d.ts +3 -0
- package/index-3e68f8db.d.ts +100 -0
- package/index-3ebe4754.d.ts +1 -0
- package/index-425c8522.d.ts +6 -0
- package/index-701e77da.d.ts +4 -0
- package/index-bdb4c6b9.d.ts +2 -0
- package/index-e81c389f.d.ts +3 -0
- package/index-ebda875c.d.ts +37 -0
- package/index-f12ee135.d.ts +3 -0
- package/index.d.ts +2 -0
- package/index.js +20 -0
- package/mobile.d.ts +2 -0
- package/mobile.js +16 -0
- package/modern/Component-2aef4eba.d.ts +50 -0
- package/modern/Component-3885b0d7.d.ts +71 -0
- package/modern/Component-3e68f8db.d.ts +11 -0
- package/modern/Component-3ebe4754.d.ts +176 -0
- package/modern/Component-5e1b8383.d.ts +4 -0
- package/modern/Component-bdb4c6b9.d.ts +12 -0
- package/modern/Component-ebda875c.d.ts +142 -0
- package/modern/Component.desktop.d.ts +6 -0
- package/modern/Component.desktop.js +16 -0
- package/modern/Component.mobile-ae13210f.d.ts +7 -0
- package/modern/Component.mobile-b2c0420d.d.ts +35 -0
- package/modern/Component.mobile.d.ts +6 -0
- package/modern/Component.mobile.js +16 -0
- package/modern/Component.responsive-2aef4eba.d.ts +28 -0
- package/modern/Component.responsive.d.ts +22 -0
- package/modern/Component.responsive.js +18 -0
- package/modern/Context-bdb4c6b9.d.ts +4 -0
- package/modern/ResponsiveContext-baf4875b.d.ts +5 -0
- package/modern/component-3885b0d7.d.ts +43 -0
- package/modern/consts-f777ba1a.d.ts +2 -0
- package/modern/desktop.d.ts +2 -0
- package/modern/desktop.js +7 -0
- package/modern/field/Component.d.ts +11 -0
- package/modern/field/Component.js +23 -0
- package/modern/field/index.css +28 -0
- package/modern/field/index.d.ts +1 -0
- package/modern/field/index.js +5 -0
- package/modern/hook-3e68f8db.d.ts +62 -0
- package/modern/index-136acbb1.d.ts +28 -0
- package/modern/index-2aef4eba.d.ts +5 -0
- package/modern/index-3885b0d7.d.ts +3 -0
- package/modern/index-3e68f8db.d.ts +100 -0
- package/modern/index-3ebe4754.d.ts +1 -0
- package/modern/index-425c8522.d.ts +6 -0
- package/modern/index-701e77da.d.ts +4 -0
- package/modern/index-bdb4c6b9.d.ts +2 -0
- package/modern/index-e81c389f.d.ts +3 -0
- package/modern/index-ebda875c.d.ts +37 -0
- package/modern/index-f12ee135.d.ts +3 -0
- package/modern/index.d.ts +2 -0
- package/modern/index.js +11 -0
- package/modern/mobile.d.ts +2 -0
- package/modern/mobile.js +7 -0
- package/modern/responsive.d.ts +2 -0
- package/modern/responsive.js +11 -0
- package/modern/types-5e678ff2.d.ts +219 -0
- package/modern/types-ebda875c.d.ts +113 -0
- package/modern/typings-5e1b8383.d.ts +549 -0
- package/modern/typings-bdb4c6b9.d.ts +52 -0
- package/modern/utils-1574ad8b.d.ts +29 -0
- package/modern/utils-5e1b8383.d.ts +38 -0
- package/modern/utils-b64479aa.d.ts +8 -0
- package/package.json +27 -0
- package/responsive.d.ts +2 -0
- package/responsive.js +20 -0
- package/send-stats.js +82 -0
- package/types-5e678ff2.d.ts +219 -0
- package/types-ebda875c.d.ts +113 -0
- package/typings-5e1b8383.d.ts +549 -0
- package/typings-bdb4c6b9.d.ts +52 -0
- package/utils-1574ad8b.d.ts +29 -0
- package/utils-5e1b8383.d.ts +38 -0
- package/utils-b64479aa.d.ts +8 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var cn = require('classnames');
|
|
8
|
+
var coreComponentsCustomButton = require('@alfalab/core-components-custom-button');
|
|
9
|
+
var coreComponentsPickerButton = require('@alfalab/core-components-picker-button');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
|
+
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
15
|
+
|
|
16
|
+
var styles = {"iconContainer":"custom-picker-button__iconContainer_z6y60","addonsContainer":"custom-picker-button__addonsContainer_z6y60","showControlIcon":"custom-picker-button__showControlIcon_z6y60","open":"custom-picker-button__open_z6y60"};
|
|
17
|
+
require('./index.css')
|
|
18
|
+
|
|
19
|
+
var Field = function (_a) {
|
|
20
|
+
var _b;
|
|
21
|
+
var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _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, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
|
|
22
|
+
var Icon = coreComponentsPickerButton.getIcon(buttonVariant, buttonSize);
|
|
23
|
+
var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
|
|
24
|
+
return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
|
|
25
|
+
rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles.addonsContainer, (_b = {},
|
|
26
|
+
_b[styles.showControlIcon] = showArrow || buttonVariant === 'compact',
|
|
27
|
+
_b)) }, rightAddons)),
|
|
28
|
+
(showArrow || buttonVariant === 'compact') && (React__default.default.createElement("span", { className: cn__default.default(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
|
|
29
|
+
React__default.default.createElement(Icon, { "data-test-id": 'custom-picker-button-icon' })))), block: true, size: buttonSize, backgroundColor: backgroundColor, contentColor: contentColor, stateType: stateType, className: className }), buttonVariant !== 'compact' && label));
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
exports.Field = Field;
|
package/field/index.css
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* hash: 81i0w */
|
|
2
|
+
:root {
|
|
3
|
+
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
|
+
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
5
|
+
} :root {
|
|
6
|
+
} :root {
|
|
7
|
+
|
|
8
|
+
/* Hard */
|
|
9
|
+
|
|
10
|
+
/* Up */
|
|
11
|
+
|
|
12
|
+
/* Hard up */
|
|
13
|
+
} :root {
|
|
14
|
+
} :root {
|
|
15
|
+
--gap-2xs: 4px;
|
|
16
|
+
} :root {
|
|
17
|
+
} :root {
|
|
18
|
+
--arrow-transform: rotate(180deg);
|
|
19
|
+
} .custom-picker-button__iconContainer_z6y60 {
|
|
20
|
+
display: flex;
|
|
21
|
+
transition: transform 0.15s ease-in-out;
|
|
22
|
+
} .custom-picker-button__addonsContainer_z6y60 {
|
|
23
|
+
display: flex
|
|
24
|
+
} .custom-picker-button__addonsContainer_z6y60.custom-picker-button__showControlIcon_z6y60 {
|
|
25
|
+
margin-right: var(--gap-2xs);
|
|
26
|
+
} .custom-picker-button__open_z6y60 {
|
|
27
|
+
transform: var(--arrow-transform);
|
|
28
|
+
}
|
package/field/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Component";
|
package/field/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var field_Component = require('./Component.js');
|
|
6
|
+
require('tslib');
|
|
7
|
+
require('react');
|
|
8
|
+
require('classnames');
|
|
9
|
+
require('@alfalab/core-components-custom-button');
|
|
10
|
+
require('@alfalab/core-components-picker-button');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
exports.Field = field_Component.Field;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
|
|
3
|
+
type UseSelectWithApplyProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Список выбранных пунктов
|
|
6
|
+
*/
|
|
7
|
+
selected: BaseSelectProps['selected'];
|
|
8
|
+
/**
|
|
9
|
+
* Список вариантов выбора
|
|
10
|
+
*/
|
|
11
|
+
options: BaseSelectProps['options'];
|
|
12
|
+
/**
|
|
13
|
+
* Обработчик выбора
|
|
14
|
+
*/
|
|
15
|
+
onChange: BaseSelectProps['onChange'];
|
|
16
|
+
/**
|
|
17
|
+
* Компонент выпадающего меню
|
|
18
|
+
*/
|
|
19
|
+
OptionsList?: BaseSelectProps['OptionsList'];
|
|
20
|
+
/**
|
|
21
|
+
* Пропсы, которые будут прокинуты в компонент списка
|
|
22
|
+
*/
|
|
23
|
+
optionsListProps?: BaseSelectProps['optionsListProps'];
|
|
24
|
+
/**
|
|
25
|
+
* Показывать кнопку очистки
|
|
26
|
+
*/
|
|
27
|
+
showClear?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Показывать пункт "Выбрать все"
|
|
30
|
+
*/
|
|
31
|
+
showSelectAll?: boolean;
|
|
32
|
+
};
|
|
33
|
+
declare const SELECT_ALL_KEY = "select_all";
|
|
34
|
+
declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, }: UseSelectWithApplyProps): {
|
|
35
|
+
OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
|
|
36
|
+
showClear?: boolean | undefined;
|
|
37
|
+
onClose?: (() => void) | undefined;
|
|
38
|
+
selectedDraft?: OptionShape[] | undefined;
|
|
39
|
+
OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined; /**
|
|
40
|
+
* Пропсы, которые будут прокинуты в компонент списка
|
|
41
|
+
*/
|
|
42
|
+
Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
|
|
43
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
44
|
+
optionsListProps: {
|
|
45
|
+
OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
|
|
46
|
+
showClear: boolean;
|
|
47
|
+
onClear: () => void;
|
|
48
|
+
onApply: () => void;
|
|
49
|
+
onClose: () => void;
|
|
50
|
+
selectedDraft: OptionShape[];
|
|
51
|
+
};
|
|
52
|
+
allowUnselect: boolean;
|
|
53
|
+
multiple: boolean;
|
|
54
|
+
options: (OptionShape | import("./index-3e68f8db").GroupShape | {
|
|
55
|
+
key: string;
|
|
56
|
+
content: string;
|
|
57
|
+
})[];
|
|
58
|
+
onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
|
|
59
|
+
selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
|
|
60
|
+
};
|
|
61
|
+
export * from "./Component-5e1b8383";
|
|
62
|
+
export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FC, ReactNode } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Набор констант для z-index соответствующих классов компонентов.
|
|
5
|
+
* Значения выбраны по приоритету.
|
|
6
|
+
*/
|
|
7
|
+
declare const stackingOrder: {
|
|
8
|
+
FOCUSED: number;
|
|
9
|
+
DEFAULT: number;
|
|
10
|
+
POPOVER: number;
|
|
11
|
+
MODAL: number;
|
|
12
|
+
TOAST: number;
|
|
13
|
+
};
|
|
14
|
+
declare const StackingContext: import("react").Context<number>;
|
|
15
|
+
type StackProps = {
|
|
16
|
+
/**
|
|
17
|
+
* Render prop, в который передается функция.
|
|
18
|
+
* Функция принимает аргумент со значением z-index из текущего контекста.
|
|
19
|
+
*/
|
|
20
|
+
children: (value: number) => ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Исходное значение для z-index.
|
|
23
|
+
* @default 5
|
|
24
|
+
*/
|
|
25
|
+
value?: number;
|
|
26
|
+
};
|
|
27
|
+
declare const Stack: FC<StackProps>;
|
|
28
|
+
export { stackingOrder, StackingContext, StackProps, Stack };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export * from "./Component.responsive-2aef4eba";
|
|
2
|
+
export { PickerButtonResponsive as PickerButton };
|
|
3
|
+
export type { PickerButtonResponsiveProps as PickerButtonProps };
|
|
4
|
+
export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-2aef4eba";
|
|
5
|
+
export { getIcon } from "./index-701e77da";
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { FormControlProps } from "./Component-3ebe4754";
|
|
5
|
+
import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
|
|
6
|
+
type SelectFieldProps = Omit<FormControlProps, "size"> & Record<string, unknown>;
|
|
7
|
+
type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
|
|
8
|
+
/**
|
|
9
|
+
* Пропсы, которые будут прокинуты в компонент поля
|
|
10
|
+
*/
|
|
11
|
+
fieldProps?: SelectFieldProps;
|
|
12
|
+
};
|
|
13
|
+
declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
|
|
14
|
+
fieldProps?: SelectFieldProps | undefined;
|
|
15
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
17
|
+
type useSelectWithLoadingProps = {
|
|
18
|
+
loading?: boolean;
|
|
19
|
+
visibleOptions?: BaseSelectProps["visibleOptions"];
|
|
20
|
+
Option?: React.FC<OptionProps>;
|
|
21
|
+
};
|
|
22
|
+
declare function useSelectWithLoading({ loading, visibleOptions, Option }: useSelectWithLoadingProps): {
|
|
23
|
+
Option: (props: OptionProps) => JSX.Element;
|
|
24
|
+
options: OptionShape[];
|
|
25
|
+
} | null;
|
|
26
|
+
type OptionsFetcherResponse = {
|
|
27
|
+
options: OptionShape[];
|
|
28
|
+
hasMore: boolean;
|
|
29
|
+
};
|
|
30
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
31
|
+
type useLazyLoadingProps = {
|
|
32
|
+
/** Количество элементов на "странице" */
|
|
33
|
+
limit?: number;
|
|
34
|
+
/** Начальный номер "страницы" */
|
|
35
|
+
initialOffset?: number;
|
|
36
|
+
/** Скелетон загружаемых элементов */
|
|
37
|
+
skeleton?: React.ReactNode;
|
|
38
|
+
/** Компонент пункта меню */
|
|
39
|
+
Option?: React.FC<OptionProps>;
|
|
40
|
+
/**
|
|
41
|
+
* Функция-загрузчик опций.
|
|
42
|
+
* @param offset - текущая страница
|
|
43
|
+
* @param limit - количество элементов на странице
|
|
44
|
+
* @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
|
|
45
|
+
* @returns Promise<{
|
|
46
|
+
* options - список опций следующей "страницы". Они аппендятся к предыдущим
|
|
47
|
+
* hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
|
|
48
|
+
* }>
|
|
49
|
+
*/
|
|
50
|
+
optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
|
|
51
|
+
};
|
|
52
|
+
declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option }: useLazyLoadingProps): {
|
|
53
|
+
optionsProps: {
|
|
54
|
+
Option: (props: OptionProps) => JSX.Element;
|
|
55
|
+
options: OptionShape[];
|
|
56
|
+
optionsListProps: {
|
|
57
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
58
|
+
inputProps: {
|
|
59
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
|
|
60
|
+
value: string;
|
|
61
|
+
}) => void;
|
|
62
|
+
value: string;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
onOpen: (payload: {
|
|
66
|
+
open?: boolean;
|
|
67
|
+
}) => void;
|
|
68
|
+
};
|
|
69
|
+
reset: () => void;
|
|
70
|
+
};
|
|
71
|
+
type SkeletonProps = {
|
|
72
|
+
/**
|
|
73
|
+
* Флаг, явно задающий состояние, при котором контент закрывается прелоадером
|
|
74
|
+
*/
|
|
75
|
+
visible?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Флаг явного включения анимации скелета
|
|
78
|
+
*/
|
|
79
|
+
animate?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Дополнительный класс
|
|
82
|
+
*/
|
|
83
|
+
className?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
86
|
+
*/
|
|
87
|
+
dataTestId?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Дочерние элементы.
|
|
90
|
+
*/
|
|
91
|
+
children?: ReactNode;
|
|
92
|
+
};
|
|
93
|
+
declare const Skeleton: React.FC<SkeletonProps>;
|
|
94
|
+
export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
|
|
95
|
+
export * from "./index-ebda875c";
|
|
96
|
+
export * from "./Component-3885b0d7";
|
|
97
|
+
export * from "./Component-5e1b8383";
|
|
98
|
+
export * from "./hook-3e68f8db";
|
|
99
|
+
export * from "./typings-5e1b8383";
|
|
100
|
+
export * from "./utils-5e1b8383";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Component-3ebe4754";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
|
|
2
|
+
type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
|
|
3
|
+
type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
|
|
4
|
+
type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
|
|
5
|
+
type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
|
|
6
|
+
export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react-transition-group" />
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { ButtonHTMLAttributes, ElementType, FC } from "react";
|
|
5
|
+
interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
+
/**
|
|
7
|
+
* Вид компонента
|
|
8
|
+
*/
|
|
9
|
+
view: "desktop" | "mobile";
|
|
10
|
+
/**
|
|
11
|
+
* Дополнительный класс
|
|
12
|
+
*/
|
|
13
|
+
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Позиция крестика
|
|
16
|
+
*/
|
|
17
|
+
align?: "left" | "right";
|
|
18
|
+
/**
|
|
19
|
+
* Фиксирует крестик
|
|
20
|
+
*/
|
|
21
|
+
sticky?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Иконка
|
|
24
|
+
*/
|
|
25
|
+
icon?: ElementType;
|
|
26
|
+
/**
|
|
27
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
28
|
+
*/
|
|
29
|
+
dataTestId?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Коллбэк закрытия.
|
|
32
|
+
*/
|
|
33
|
+
onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
34
|
+
}
|
|
35
|
+
declare const Closer: FC<CloserProps>;
|
|
36
|
+
export { CloserProps, Closer };
|
|
37
|
+
export * from "./Component-ebda875c";
|
package/index.d.ts
ADDED
package/index.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var Component_responsive = require('./Component.responsive.js');
|
|
6
|
+
require('tslib');
|
|
7
|
+
require('react');
|
|
8
|
+
require('@alfalab/core-components-mq');
|
|
9
|
+
require('./Component.desktop.js');
|
|
10
|
+
require('@alfalab/core-components-picker-button/desktop');
|
|
11
|
+
require('./field/Component.js');
|
|
12
|
+
require('classnames');
|
|
13
|
+
require('@alfalab/core-components-custom-button');
|
|
14
|
+
require('@alfalab/core-components-picker-button');
|
|
15
|
+
require('./Component.mobile.js');
|
|
16
|
+
require('@alfalab/core-components-picker-button/mobile');
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
exports.CustomPickerButton = Component_responsive.CustomPickerButtonResponsive;
|
package/mobile.d.ts
ADDED
package/mobile.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var Component_mobile = require('./Component.mobile.js');
|
|
6
|
+
require('tslib');
|
|
7
|
+
require('react');
|
|
8
|
+
require('@alfalab/core-components-picker-button/mobile');
|
|
9
|
+
require('./field/Component.js');
|
|
10
|
+
require('classnames');
|
|
11
|
+
require('@alfalab/core-components-custom-button');
|
|
12
|
+
require('@alfalab/core-components-picker-button');
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
exports.CustomPickerButtonMobile = Component_mobile.CustomPickerButtonMobile;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { FC, SVGProps } from "react";
|
|
4
|
+
import { ButtonProps } from "./index-ebda875c";
|
|
5
|
+
import { BaseSelectProps } from "./index-3e68f8db";
|
|
6
|
+
type PickerButtonSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
7
|
+
type PickerButtonVariant = 'default' | 'compact';
|
|
8
|
+
type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' | 'autocomplete' | 'size' | 'onFocus' | 'selected' | 'closeOnSelect' | 'multiple' | 'hint' | 'allowUnselect' | 'options'> & Pick<ButtonProps, 'view' | 'loading' | 'leftAddons' | 'rightAddons'> & {
|
|
9
|
+
options: Array<BaseSelectProps['options'][0] & {
|
|
10
|
+
/**
|
|
11
|
+
* Иконка, отображающаяся слева от текстового представления пункта
|
|
12
|
+
*/
|
|
13
|
+
icon?: FC<SVGProps<SVGSVGElement>>;
|
|
14
|
+
}>;
|
|
15
|
+
/**
|
|
16
|
+
* Размер кнопки
|
|
17
|
+
*/
|
|
18
|
+
size?: PickerButtonSize;
|
|
19
|
+
/**
|
|
20
|
+
* Тип кнопки
|
|
21
|
+
*/
|
|
22
|
+
variant?: PickerButtonVariant;
|
|
23
|
+
/**
|
|
24
|
+
* Показывать стрелку
|
|
25
|
+
* @default true
|
|
26
|
+
*/
|
|
27
|
+
showArrow?: boolean;
|
|
28
|
+
};
|
|
29
|
+
declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
|
|
30
|
+
options: Array<BaseSelectProps['options'][0] & {
|
|
31
|
+
/**
|
|
32
|
+
* Иконка, отображающаяся слева от текстового представления пункта
|
|
33
|
+
*/
|
|
34
|
+
icon?: FC<SVGProps<SVGSVGElement>>;
|
|
35
|
+
}>;
|
|
36
|
+
/**
|
|
37
|
+
* Размер кнопки
|
|
38
|
+
*/
|
|
39
|
+
size?: PickerButtonSize | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* Тип кнопки
|
|
42
|
+
*/
|
|
43
|
+
variant?: PickerButtonVariant | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* Показывать стрелку
|
|
46
|
+
* @default true
|
|
47
|
+
*/
|
|
48
|
+
showArrow?: boolean | undefined;
|
|
49
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
50
|
+
export { PickerButtonSize, PickerButtonVariant, PickerButtonDesktopProps, PickerButtonDesktop };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { BottomSheetProps } from "./index-f12ee135";
|
|
5
|
+
import { BaseSelectProps } from "./typings-5e1b8383";
|
|
6
|
+
type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Футер
|
|
9
|
+
* @deprecated Используйте bottomSheetProps.actionButton
|
|
10
|
+
*/
|
|
11
|
+
footer?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Будет ли свайпаться шторка
|
|
14
|
+
* @deprecated Используйте bottomSheetProps.swipeable
|
|
15
|
+
*/
|
|
16
|
+
swipeable?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Отображать в BottomSheet
|
|
19
|
+
*/
|
|
20
|
+
isBottomSheet?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Дополнительные пропсы шторки
|
|
23
|
+
*/
|
|
24
|
+
bottomSheetProps?: Partial<BottomSheetProps>;
|
|
25
|
+
/**
|
|
26
|
+
* Дополнительные пропсы модалки
|
|
27
|
+
*/
|
|
28
|
+
modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
|
|
29
|
+
/**
|
|
30
|
+
* Дополнительные пропсы шапки модалки
|
|
31
|
+
*/
|
|
32
|
+
modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
|
|
33
|
+
/**
|
|
34
|
+
* Дополнительные пропсы футера модалки
|
|
35
|
+
*/
|
|
36
|
+
modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
|
|
37
|
+
};
|
|
38
|
+
declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
|
|
39
|
+
/**
|
|
40
|
+
* Футер
|
|
41
|
+
* @deprecated Используйте bottomSheetProps.actionButton
|
|
42
|
+
*/
|
|
43
|
+
footer?: ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* Будет ли свайпаться шторка
|
|
46
|
+
* @deprecated Используйте bottomSheetProps.swipeable
|
|
47
|
+
*/
|
|
48
|
+
swipeable?: boolean | undefined;
|
|
49
|
+
/**
|
|
50
|
+
* Отображать в BottomSheet
|
|
51
|
+
*/
|
|
52
|
+
isBottomSheet?: boolean | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* Дополнительные пропсы шторки
|
|
55
|
+
*/
|
|
56
|
+
bottomSheetProps?: Partial<BottomSheetProps> | undefined;
|
|
57
|
+
/**
|
|
58
|
+
* Дополнительные пропсы модалки
|
|
59
|
+
*/
|
|
60
|
+
modalProps?: Partial<import("./typings-bdb4c6b9").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
|
|
61
|
+
/**
|
|
62
|
+
* Дополнительные пропсы шапки модалки
|
|
63
|
+
*/
|
|
64
|
+
modalHeaderProps?: Partial<import("./Component-5e1b8383").HeaderProps> | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* Дополнительные пропсы футера модалки
|
|
67
|
+
*/
|
|
68
|
+
modalFooterProps?: Partial<import("./Component.mobile-b2c0420d").FooterProps> | undefined;
|
|
69
|
+
} & React.RefAttributes<unknown>>;
|
|
70
|
+
export * from "./Component.mobile-b2c0420d";
|
|
71
|
+
export { SelectMobileProps, BaseSelectMobile };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FC, SVGProps } from 'react';
|
|
3
|
+
import { OptionShape } from "./typings-5e1b8383";
|
|
4
|
+
import { OptionProps as BaseOptionProps } from "./typings-5e1b8383";
|
|
5
|
+
type OptionProps = Omit<BaseOptionProps, 'option'> & {
|
|
6
|
+
option: OptionShape & {
|
|
7
|
+
icon?: FC<SVGProps<SVGSVGElement>>;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
declare const Option: ({ option, children, ...restProps }: OptionProps) => JSX.Element;
|
|
11
|
+
export { Option };
|