@invoicebox/ui 0.1.0-alpha.4 → 0.1.0-alpha.40
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/README.md +15 -1
- package/dist/breakpoints/index.d.ts +7 -0
- package/dist/breakpoints/index.js +13 -0
- package/dist/components/common/Arrow/components/StyledSvg/index.d.ts +11 -0
- package/dist/components/common/Arrow/components/StyledSvg/index.js +31 -0
- package/dist/components/common/Arrow/components/StyledSvg/index.stories.d.ts +5 -0
- package/dist/components/common/Arrow/components/StyledSvg/index.stories.js +29 -0
- package/dist/components/common/Arrow/components/Svg/index.d.ts +6 -0
- package/dist/components/common/Arrow/components/Svg/index.js +26 -0
- package/dist/components/common/Arrow/components/Svg/index.stories.d.ts +6 -0
- package/dist/components/common/Arrow/components/Svg/index.stories.js +21 -0
- package/dist/components/common/Arrow/index.d.ts +11 -0
- package/dist/components/common/Arrow/index.js +34 -0
- package/dist/components/common/Arrow/index.stories.d.ts +6 -0
- package/dist/components/common/Arrow/index.stories.js +22 -0
- package/dist/components/common/Arrow/palette.d.ts +8 -0
- package/dist/components/common/Arrow/palette.js +16 -0
- package/dist/components/common/Dropdown/index.d.ts +14 -0
- package/dist/components/common/Dropdown/index.js +117 -0
- package/dist/components/common/Dropdown/index.stories.d.ts +6 -0
- package/dist/components/common/Dropdown/index.stories.js +59 -0
- package/dist/components/common/Dropdown/palette.d.ts +6 -0
- package/dist/components/common/Dropdown/palette.js +14 -0
- package/dist/components/common/Dropdown/styles.d.ts +14 -0
- package/dist/components/common/Dropdown/styles.js +47 -0
- package/dist/components/common/InvoiceboxLoader/index.d.ts +5 -0
- package/dist/components/common/InvoiceboxLoader/index.js +878 -0
- package/dist/components/common/InvoiceboxLoader/index.stories.d.ts +5 -0
- package/dist/components/common/InvoiceboxLoader/index.stories.js +18 -0
- package/dist/components/common/InvoiceboxSpinner/index.d.ts +8 -0
- package/dist/components/common/InvoiceboxSpinner/index.js +41 -0
- package/dist/components/common/InvoiceboxSpinner/index.stories.d.ts +10 -0
- package/dist/components/common/InvoiceboxSpinner/index.stories.js +19 -0
- package/dist/components/common/InvoiceboxSpinner/palette.d.ts +8 -0
- package/dist/components/common/InvoiceboxSpinner/palette.js +14 -0
- package/dist/components/common/InvoiceboxSpinner/styles.d.ts +4 -0
- package/dist/components/common/InvoiceboxSpinner/styles.js +19 -0
- package/dist/components/common/Scrollbar/index.d.ts +6 -0
- package/dist/components/common/Scrollbar/index.js +69 -0
- package/dist/components/common/Scrollbar/index.stories.d.ts +12 -0
- package/dist/components/common/Scrollbar/index.stories.js +36 -0
- package/dist/components/common/Scrollbar/palette.d.ts +5 -0
- package/dist/components/common/Scrollbar/palette.js +11 -0
- package/dist/components/common/SecondaryButton/index.d.ts +19 -0
- package/dist/components/common/SecondaryButton/index.js +51 -0
- package/dist/components/common/SecondaryButton/index.stories.d.ts +11 -0
- package/dist/components/common/SecondaryButton/index.stories.js +38 -0
- package/dist/components/common/SecondaryButton/palette.d.ts +8 -0
- package/dist/components/common/SecondaryButton/palette.js +14 -0
- package/dist/components/common/SecondaryButton/styles.d.ts +11 -0
- package/dist/components/common/SecondaryButton/styles.js +46 -0
- package/dist/components/common/Skeleton/index.d.ts +8 -0
- package/dist/components/common/Skeleton/index.js +28 -0
- package/dist/components/common/Skeleton/index.stories.d.ts +11 -0
- package/dist/components/common/Skeleton/index.stories.js +29 -0
- package/dist/components/common/Skeleton/palette.d.ts +6 -0
- package/dist/components/common/Skeleton/palette.js +12 -0
- package/dist/components/common/Skeleton/styles.d.ts +10 -0
- package/dist/components/common/Skeleton/styles.js +37 -0
- package/dist/components/common/Typography/docs.stories.d.ts +6 -0
- package/dist/components/common/Typography/docs.stories.js +20 -0
- package/dist/components/common/Typography/index.d.ts +26 -0
- package/dist/components/common/Typography/index.js +49 -0
- package/dist/components/common/Typography/index.stories.d.ts +11 -0
- package/dist/components/common/Typography/index.stories.js +35 -0
- package/dist/components/common/Typography/styles.d.ts +5 -0
- package/dist/components/common/Typography/styles.js +16 -0
- package/dist/components/common/Typography/typography.d.ts +20 -0
- package/dist/components/common/Typography/typography.js +28 -0
- package/dist/components/form/InputLabel/index.d.ts +10 -0
- package/dist/components/form/InputLabel/index.js +32 -0
- package/dist/components/form/InputLabel/index.stories.d.ts +5 -0
- package/dist/components/form/InputLabel/index.stories.js +33 -0
- package/dist/components/form/InputLabel/palette.d.ts +7 -0
- package/dist/components/form/InputLabel/palette.js +13 -0
- package/dist/components/form/InputLabel/styles.d.ts +12 -0
- package/dist/components/form/InputLabel/styles.js +40 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useFilters.d.ts +6 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useFilters.js +21 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.d.ts +4 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.js +22 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.d.ts +9 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.js +24 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.d.ts +4 -0
- package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.js +22 -0
- package/dist/components/form/PositiveIntegerInput/index.d.ts +10 -0
- package/dist/components/form/PositiveIntegerInput/index.js +94 -0
- package/dist/components/form/PositiveIntegerInput/index.stories.d.ts +5 -0
- package/dist/components/form/PositiveIntegerInput/index.stories.js +49 -0
- package/dist/components/form/PositiveIntegerInput/styles.d.ts +5 -0
- package/dist/components/form/PositiveIntegerInput/styles.js +21 -0
- package/dist/components/form/PureInput/index.d.ts +12 -0
- package/dist/components/form/PureInput/index.js +43 -0
- package/dist/components/form/PureInput/index.stories.d.ts +5 -0
- package/dist/components/form/PureInput/index.stories.js +23 -0
- package/dist/components/form/PureInput/palette.d.ts +10 -0
- package/dist/components/form/PureInput/palette.js +18 -0
- package/dist/components/form/PureInput/styles.d.ts +10 -0
- package/dist/components/form/PureInput/styles.js +34 -0
- package/dist/hooks/useFocusField.d.ts +11 -0
- package/dist/hooks/useFocusField.js +37 -0
- package/dist/index.d.ts +14 -1
- package/dist/index.js +94 -4
- package/dist/palette/colors.stories.d.ts +4 -0
- package/dist/palette/colors.stories.js +40 -0
- package/dist/palette/constants.d.ts +2 -0
- package/dist/palette/constants.js +18 -0
- package/dist/palette/context.d.ts +21 -0
- package/dist/palette/context.js +26 -0
- package/dist/palette/index.d.ts +3 -0
- package/dist/palette/index.js +19 -0
- package/dist/palette/index.stories.d.ts +4 -0
- package/dist/palette/index.stories.js +81 -0
- package/dist/palette/provider.d.ts +20 -0
- package/dist/palette/provider.js +71 -0
- package/dist/palette/types.d.ts +12 -0
- package/dist/palette/types.js +1 -0
- package/dist/palette/useComponentPalette.d.ts +2 -0
- package/dist/palette/useComponentPalette.js +22 -0
- package/dist/palette/usePalette.d.ts +10 -0
- package/dist/palette/usePalette.js +11 -0
- package/package.json +22 -10
- package/dist/stories/Button.d.ts +0 -26
- package/dist/stories/Button.js +0 -41
- package/dist/stories/Button.stories.d.ts +0 -21
- package/dist/stories/Button.stories.js +0 -44
- package/dist/stories/styles.d.ts +0 -30
- package/dist/stories/styles.js +0 -33
package/README.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
1
|
# invoicebox-ui
|
|
2
2
|
|
|
3
|
-
Invoicebox
|
|
3
|
+
Библиотека компонентов Invoicebox.
|
|
4
|
+
|
|
5
|
+
[Cторибук](https://ui.invoicebox.ru/) с документацией и примерами.
|
|
6
|
+
|
|
7
|
+
# Установка
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i @invoicebox/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
или
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add @invoicebox/ui
|
|
17
|
+
```
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.breakpoints = void 0;
|
|
7
|
+
var breakpoints = exports.breakpoints = {
|
|
8
|
+
sm: '(max-width: 576px)',
|
|
9
|
+
md: '(max-width: 767px)',
|
|
10
|
+
ld: '(max-width: 992px)',
|
|
11
|
+
xl: '(max-width: 1200px)',
|
|
12
|
+
xxl: '(max-width: 1400px)'
|
|
13
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledSvg: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../Svg").TProps, {
|
|
3
|
+
$isOpen: boolean;
|
|
4
|
+
$isLight: boolean;
|
|
5
|
+
$openLightColor: string;
|
|
6
|
+
$closeLightColor: string;
|
|
7
|
+
$openUsualColor: string;
|
|
8
|
+
$closeUsualColor: string;
|
|
9
|
+
$padding: number;
|
|
10
|
+
$defaultRotate: number;
|
|
11
|
+
}>> & Omit<import("react").FC<import("../Svg").TProps>, keyof import("react").Component<any, {}, any>>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledSvg = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _Svg = require("../Svg");
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
+
var StyledSvg = exports.StyledSvg = (0, _styledComponents["default"])(_Svg.Svg).withConfig({
|
|
11
|
+
displayName: "StyledSvg",
|
|
12
|
+
componentId: "sc-8dnufv-0"
|
|
13
|
+
})(["transform:rotateZ(", "deg);transition:all 0.2s ease-in-out 0s;box-sizing:content-box;padding:", "px;path{stroke:", ";"], function (_ref) {
|
|
14
|
+
var $isOpen = _ref.$isOpen,
|
|
15
|
+
$defaultRotate = _ref.$defaultRotate;
|
|
16
|
+
return $isOpen ? $defaultRotate + 180 : $defaultRotate;
|
|
17
|
+
}, function (_ref2) {
|
|
18
|
+
var $padding = _ref2.$padding;
|
|
19
|
+
return $padding;
|
|
20
|
+
}, function (_ref3) {
|
|
21
|
+
var $isLight = _ref3.$isLight,
|
|
22
|
+
$isOpen = _ref3.$isOpen,
|
|
23
|
+
$openLightColor = _ref3.$openLightColor,
|
|
24
|
+
$closeLightColor = _ref3.$closeLightColor,
|
|
25
|
+
$openUsualColor = _ref3.$openUsualColor,
|
|
26
|
+
$closeUsualColor = _ref3.$closeUsualColor;
|
|
27
|
+
if ($isLight && $isOpen) return $openLightColor;
|
|
28
|
+
if ($isLight && !$isOpen) return $closeLightColor;
|
|
29
|
+
if (!$isLight && $isOpen) return $openUsualColor;
|
|
30
|
+
if (!$isLight && !$isOpen) return $closeUsualColor;
|
|
31
|
+
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _ = require(".");
|
|
8
|
+
var meta = {
|
|
9
|
+
title: 'common/Arrow/_components/StyledSvg',
|
|
10
|
+
component: _.StyledSvg,
|
|
11
|
+
tags: ['autodocs'],
|
|
12
|
+
parameters: {
|
|
13
|
+
layout: 'centered'
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
var _default = exports["default"] = meta;
|
|
17
|
+
var Default = exports.Default = {
|
|
18
|
+
args: {
|
|
19
|
+
$isOpen: false,
|
|
20
|
+
$isLight: false,
|
|
21
|
+
$openLightColor: '#cfc',
|
|
22
|
+
$closeLightColor: '#cac',
|
|
23
|
+
$openUsualColor: '#05b',
|
|
24
|
+
$closeUsualColor: '#00b',
|
|
25
|
+
size: 10,
|
|
26
|
+
$padding: 7,
|
|
27
|
+
$defaultRotate: 0
|
|
28
|
+
}
|
|
29
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Svg = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
var Svg = exports.Svg = function Svg(_ref) {
|
|
10
|
+
var className = _ref.className,
|
|
11
|
+
size = _ref.size;
|
|
12
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
13
|
+
className: className,
|
|
14
|
+
width: size,
|
|
15
|
+
height: size,
|
|
16
|
+
viewBox: "7 7 10 10",
|
|
17
|
+
fill: "none",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
19
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
+
d: "M16.0846 9.95825L12.0013 14.0416L7.91797 9.95825",
|
|
21
|
+
stroke: "currentColor",
|
|
22
|
+
strokeWidth: "1.5",
|
|
23
|
+
strokeLinecap: "round",
|
|
24
|
+
strokeLinejoin: "round"
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _ = require(".");
|
|
8
|
+
var meta = {
|
|
9
|
+
title: 'common/Arrow/_components/Svg',
|
|
10
|
+
component: _.Svg,
|
|
11
|
+
tags: ['autodocs'],
|
|
12
|
+
parameters: {
|
|
13
|
+
layout: 'centered'
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
var _default = exports["default"] = meta;
|
|
17
|
+
var Default = exports.Default = {
|
|
18
|
+
args: {
|
|
19
|
+
size: 10
|
|
20
|
+
}
|
|
21
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TArrowPalette } from './palette';
|
|
3
|
+
export type TProps = {
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
isLight?: boolean;
|
|
6
|
+
innerSize?: number;
|
|
7
|
+
outterSize?: number;
|
|
8
|
+
defaultRotate?: number;
|
|
9
|
+
palette?: Partial<TArrowPalette>;
|
|
10
|
+
};
|
|
11
|
+
export declare const Arrow: FC<TProps>;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Arrow = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _StyledSvg = require("./components/StyledSvg");
|
|
9
|
+
var _palette = require("../../../palette");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
var Arrow = exports.Arrow = function Arrow(_ref) {
|
|
12
|
+
var isOpen = _ref.isOpen,
|
|
13
|
+
_ref$isLight = _ref.isLight,
|
|
14
|
+
isLight = _ref$isLight === void 0 ? false : _ref$isLight,
|
|
15
|
+
_ref$innerSize = _ref.innerSize,
|
|
16
|
+
innerSize = _ref$innerSize === void 0 ? 10 : _ref$innerSize,
|
|
17
|
+
_ref$outterSize = _ref.outterSize,
|
|
18
|
+
outterSize = _ref$outterSize === void 0 ? 24 : _ref$outterSize,
|
|
19
|
+
_ref$defaultRotate = _ref.defaultRotate,
|
|
20
|
+
defaultRotate = _ref$defaultRotate === void 0 ? 0 : _ref$defaultRotate,
|
|
21
|
+
palette = _ref.palette;
|
|
22
|
+
var mergedPalette = (0, _palette.useComponentPalette)('arrow', palette);
|
|
23
|
+
return /*#__PURE__*/_react["default"].createElement(_StyledSvg.StyledSvg, {
|
|
24
|
+
$isOpen: isOpen,
|
|
25
|
+
$isLight: isLight,
|
|
26
|
+
$openLightColor: mergedPalette.openLight,
|
|
27
|
+
$closeLightColor: mergedPalette.closeLight,
|
|
28
|
+
$openUsualColor: mergedPalette.openUsual,
|
|
29
|
+
$closeUsualColor: mergedPalette.closeUsual,
|
|
30
|
+
size: innerSize,
|
|
31
|
+
$padding: (outterSize - innerSize) / 2,
|
|
32
|
+
$defaultRotate: defaultRotate
|
|
33
|
+
});
|
|
34
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _ = require(".");
|
|
8
|
+
var meta = {
|
|
9
|
+
title: 'common/Arrow',
|
|
10
|
+
component: _.Arrow,
|
|
11
|
+
tags: ['autodocs']
|
|
12
|
+
};
|
|
13
|
+
var _default = exports["default"] = meta;
|
|
14
|
+
var Default = exports.Default = {
|
|
15
|
+
args: {
|
|
16
|
+
isOpen: false,
|
|
17
|
+
isLight: false,
|
|
18
|
+
innerSize: 10,
|
|
19
|
+
outterSize: 24,
|
|
20
|
+
defaultRotate: 0
|
|
21
|
+
}
|
|
22
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TAbstractPalette } from '../../../palette';
|
|
2
|
+
export type TArrowPalette = {
|
|
3
|
+
openLight: string;
|
|
4
|
+
closeLight: string;
|
|
5
|
+
openUsual: string;
|
|
6
|
+
closeUsual: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const generateArrowPalette: (abstractPalette: TAbstractPalette) => TArrowPalette;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.generateArrowPalette = void 0;
|
|
7
|
+
var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
var generateArrowPalette = exports.generateArrowPalette = function generateArrowPalette(abstractPalette) {
|
|
10
|
+
return {
|
|
11
|
+
openLight: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.8),
|
|
12
|
+
closeLight: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.8),
|
|
13
|
+
openUsual: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
|
|
14
|
+
closeUsual: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5)
|
|
15
|
+
};
|
|
16
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export type TProps = {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
isAutoPosition?: boolean;
|
|
6
|
+
positionVertical?: number;
|
|
7
|
+
positionLeft?: string;
|
|
8
|
+
positionRight?: string;
|
|
9
|
+
minWidth?: string;
|
|
10
|
+
width?: string;
|
|
11
|
+
zIndex?: number;
|
|
12
|
+
onCloseTransitionEnd?: () => void;
|
|
13
|
+
};
|
|
14
|
+
export declare const Dropdown: FC<TProps>;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Dropdown = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var S = _interopRequireWildcard(require("./styles"));
|
|
10
|
+
var _palette = require("../../../palette");
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
13
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
16
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
17
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
18
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
|
+
var Dropdown = exports.Dropdown = function Dropdown(_ref) {
|
|
20
|
+
var children = _ref.children,
|
|
21
|
+
isOpen = _ref.isOpen,
|
|
22
|
+
_ref$isAutoPosition = _ref.isAutoPosition,
|
|
23
|
+
isAutoPosition = _ref$isAutoPosition === void 0 ? false : _ref$isAutoPosition,
|
|
24
|
+
_ref$positionVertical = _ref.positionVertical,
|
|
25
|
+
positionVertical = _ref$positionVertical === void 0 ? 5 : _ref$positionVertical,
|
|
26
|
+
_ref$positionLeft = _ref.positionLeft,
|
|
27
|
+
positionLeft = _ref$positionLeft === void 0 ? '0px' : _ref$positionLeft,
|
|
28
|
+
_ref$positionRight = _ref.positionRight,
|
|
29
|
+
positionRight = _ref$positionRight === void 0 ? 'auto' : _ref$positionRight,
|
|
30
|
+
_ref$minWidth = _ref.minWidth,
|
|
31
|
+
minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
|
|
32
|
+
_ref$width = _ref.width,
|
|
33
|
+
width = _ref$width === void 0 ? 'auto' : _ref$width,
|
|
34
|
+
zIndex = _ref.zIndex,
|
|
35
|
+
onCloseTransitionEnd = _ref.onCloseTransitionEnd;
|
|
36
|
+
var mergedPalette = (0, _palette.useComponentPalette)('dropdown');
|
|
37
|
+
var position = (0, _react.useRef)({
|
|
38
|
+
isAbove: true,
|
|
39
|
+
translateY: '0px'
|
|
40
|
+
});
|
|
41
|
+
var _useState = (0, _react.useState)(null),
|
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
43
|
+
elRef = _useState2[0],
|
|
44
|
+
setElRef = _useState2[1];
|
|
45
|
+
var handleCloseTransitionEnd = (0, _react.useCallback)(function (event) {
|
|
46
|
+
if (event.propertyName !== 'opacity') return;
|
|
47
|
+
if (isOpen) return;
|
|
48
|
+
if (onCloseTransitionEnd) onCloseTransitionEnd();
|
|
49
|
+
}, [isOpen, onCloseTransitionEnd]);
|
|
50
|
+
var getPosition = (0, _react.useCallback)(function (_ref2) {
|
|
51
|
+
var dropdownHeight = _ref2.dropdownHeight,
|
|
52
|
+
belowHeight = _ref2.belowHeight,
|
|
53
|
+
aboveHeight = _ref2.aboveHeight,
|
|
54
|
+
dropdownIndent = _ref2.dropdownIndent;
|
|
55
|
+
var isEnoughSpaceBelow = belowHeight >= dropdownHeight + dropdownIndent;
|
|
56
|
+
if (isEnoughSpaceBelow) return {
|
|
57
|
+
isAbove: false,
|
|
58
|
+
translateY: '0px'
|
|
59
|
+
};
|
|
60
|
+
var isEnoghtSpaceAbove = aboveHeight >= dropdownHeight + dropdownIndent;
|
|
61
|
+
if (isEnoghtSpaceAbove) return {
|
|
62
|
+
isAbove: true,
|
|
63
|
+
translateY: '0px'
|
|
64
|
+
};
|
|
65
|
+
var isMoreSpaceBelowThanAbove = belowHeight >= aboveHeight;
|
|
66
|
+
if (isMoreSpaceBelowThanAbove) {
|
|
67
|
+
var outOfViewPortHeight = dropdownHeight + dropdownIndent - belowHeight;
|
|
68
|
+
return {
|
|
69
|
+
isAbove: false,
|
|
70
|
+
translateY: "-".concat(outOfViewPortHeight, "px")
|
|
71
|
+
};
|
|
72
|
+
} else {
|
|
73
|
+
var _outOfViewPortHeight = dropdownHeight + dropdownIndent - aboveHeight;
|
|
74
|
+
return {
|
|
75
|
+
isAbove: true,
|
|
76
|
+
translateY: "".concat(_outOfViewPortHeight, "px")
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}, []);
|
|
80
|
+
var openFlagCache = (0, _react.useRef)(null);
|
|
81
|
+
if (elRef) {
|
|
82
|
+
var isTriggeredByFlag = openFlagCache.current !== isOpen;
|
|
83
|
+
openFlagCache.current = isOpen;
|
|
84
|
+
if (isTriggeredByFlag && isOpen) {
|
|
85
|
+
var viewportHeight = window.innerHeight;
|
|
86
|
+
var parent = elRef.parentElement;
|
|
87
|
+
var _parent$getBoundingCl = parent.getBoundingClientRect(),
|
|
88
|
+
bottom = _parent$getBoundingCl.bottom,
|
|
89
|
+
aboveHeight = _parent$getBoundingCl.top;
|
|
90
|
+
var belowHeight = viewportHeight - bottom;
|
|
91
|
+
var dropdownHeight = elRef.scrollHeight;
|
|
92
|
+
position.current = isAutoPosition ? getPosition({
|
|
93
|
+
dropdownHeight: dropdownHeight,
|
|
94
|
+
aboveHeight: aboveHeight,
|
|
95
|
+
belowHeight: belowHeight,
|
|
96
|
+
dropdownIndent: positionVertical
|
|
97
|
+
}) : {
|
|
98
|
+
isAbove: false,
|
|
99
|
+
translateY: '0px'
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
|
|
104
|
+
ref: setElRef,
|
|
105
|
+
$isVisible: isOpen,
|
|
106
|
+
$isAbove: position.current.isAbove,
|
|
107
|
+
$translateY: position.current.translateY,
|
|
108
|
+
$positionVertical: positionVertical,
|
|
109
|
+
$positionLeft: positionLeft,
|
|
110
|
+
$positionRight: positionRight,
|
|
111
|
+
$minWidth: minWidth,
|
|
112
|
+
$width: width,
|
|
113
|
+
$zIndex: zIndex,
|
|
114
|
+
onTransitionEnd: handleCloseTransitionEnd,
|
|
115
|
+
$palette: mergedPalette
|
|
116
|
+
}, children);
|
|
117
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = exports.AutoPosition = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
9
|
+
var _ = require(".");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
16
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
17
|
+
var meta = {
|
|
18
|
+
title: 'common/Dropdown',
|
|
19
|
+
component: _.Dropdown,
|
|
20
|
+
tags: ['autodocs']
|
|
21
|
+
};
|
|
22
|
+
var _default = exports["default"] = meta;
|
|
23
|
+
var args = {
|
|
24
|
+
isOpen: false,
|
|
25
|
+
positionVertical: 5,
|
|
26
|
+
positionLeft: '0px',
|
|
27
|
+
positionRight: 'auto',
|
|
28
|
+
minWidth: 'auto',
|
|
29
|
+
width: 'auto',
|
|
30
|
+
zIndex: 5,
|
|
31
|
+
onCloseTransitionEnd: (0, _addonActions.action)('closeTransitionEnd'),
|
|
32
|
+
children: Array(100).fill('children ').join('')
|
|
33
|
+
};
|
|
34
|
+
var Default = exports.Default = {
|
|
35
|
+
args: _objectSpread(_objectSpread({}, args), {}, {
|
|
36
|
+
isAutoPosition: false
|
|
37
|
+
}),
|
|
38
|
+
render: function render(props) {
|
|
39
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
40
|
+
style: {
|
|
41
|
+
position: 'relative'
|
|
42
|
+
}
|
|
43
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "parent"), /*#__PURE__*/_react["default"].createElement(_.Dropdown, props));
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
var AutoPosition = exports.AutoPosition = {
|
|
47
|
+
args: _objectSpread(_objectSpread({}, args), {}, {
|
|
48
|
+
isAutoPosition: true
|
|
49
|
+
}),
|
|
50
|
+
render: function render(props) {
|
|
51
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, "\u0414\u0440\u043E\u043F\u0434\u0430\u0443\u043D \u043D\u0438\u0436\u0435 \u2193", /*#__PURE__*/_react["default"].createElement("div", {
|
|
52
|
+
style: {
|
|
53
|
+
position: 'relative',
|
|
54
|
+
marginTop: '800px',
|
|
55
|
+
marginBottom: '800px'
|
|
56
|
+
}
|
|
57
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "parent"), /*#__PURE__*/_react["default"].createElement(_.Dropdown, props)));
|
|
58
|
+
}
|
|
59
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.generateDropdownPalette = void 0;
|
|
7
|
+
var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
+
var generateDropdownPalette = exports.generateDropdownPalette = function generateDropdownPalette(abstractPalette) {
|
|
10
|
+
return {
|
|
11
|
+
bg: abstractPalette.base,
|
|
12
|
+
shadow: (0, _hexToRgba["default"])(abstractPalette.primary, 0.09)
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TDropdownPalette } from './palette';
|
|
3
|
+
export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
4
|
+
$isVisible: boolean;
|
|
5
|
+
$isAbove: boolean;
|
|
6
|
+
$translateY: string;
|
|
7
|
+
$positionVertical: number;
|
|
8
|
+
$positionLeft: string;
|
|
9
|
+
$positionRight: string;
|
|
10
|
+
$minWidth: string;
|
|
11
|
+
$width: string;
|
|
12
|
+
$zIndex?: number | undefined;
|
|
13
|
+
$palette: TDropdownPalette;
|
|
14
|
+
}>>;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.Wrapper = void 0;
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
10
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
11
|
+
var hidden = (0, _styledComponents.css)(["visibility:hidden;opacity:0;transition:visibility 0ms 200ms,opacity 200ms 0ms ease;"]);
|
|
12
|
+
var visible = (0, _styledComponents.css)(["visibility:visible;opacity:1;transition:visibility 0ms 0ms,opacity 200ms 0ms ease;"]);
|
|
13
|
+
var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
|
|
14
|
+
displayName: "styles__Wrapper",
|
|
15
|
+
componentId: "sc-1f1enhf-0"
|
|
16
|
+
})(["overflow:hidden;border-radius:10px;box-shadow:0px 10px 17px ", ";background:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
|
|
17
|
+
var $palette = _ref.$palette;
|
|
18
|
+
return $palette.shadow;
|
|
19
|
+
}, function (_ref2) {
|
|
20
|
+
var $palette = _ref2.$palette;
|
|
21
|
+
return $palette.bg;
|
|
22
|
+
}, function (_ref3) {
|
|
23
|
+
var $minWidth = _ref3.$minWidth;
|
|
24
|
+
return $minWidth;
|
|
25
|
+
}, function (_ref4) {
|
|
26
|
+
var $width = _ref4.$width;
|
|
27
|
+
return $width;
|
|
28
|
+
}, function (_ref5) {
|
|
29
|
+
var $positionLeft = _ref5.$positionLeft;
|
|
30
|
+
return $positionLeft;
|
|
31
|
+
}, function (_ref6) {
|
|
32
|
+
var $positionRight = _ref6.$positionRight;
|
|
33
|
+
return $positionRight;
|
|
34
|
+
}, function (_ref7) {
|
|
35
|
+
var $zIndex = _ref7.$zIndex;
|
|
36
|
+
return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
|
|
37
|
+
}, function (_ref8) {
|
|
38
|
+
var $isVisible = _ref8.$isVisible;
|
|
39
|
+
return $isVisible ? visible : hidden;
|
|
40
|
+
}, function (_ref9) {
|
|
41
|
+
var $isAbove = _ref9.$isAbove,
|
|
42
|
+
$positionVertical = _ref9.$positionVertical;
|
|
43
|
+
return $isAbove ? (0, _styledComponents.css)(["bottom:calc(100% + ", "px);"], $positionVertical) : (0, _styledComponents.css)(["top:calc(100% + ", "px);"], $positionVertical);
|
|
44
|
+
}, function (_ref10) {
|
|
45
|
+
var $translateY = _ref10.$translateY;
|
|
46
|
+
return (0, _styledComponents.css)(["transform:translateY(", ");"], $translateY);
|
|
47
|
+
});
|