@invoicebox/ui 0.1.0-alpha.54 → 0.1.0-alpha.55
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/dist/components/common/Dropdown/index.js +2 -2
- package/dist/components/form/InputLabel/index.d.ts +0 -2
- package/dist/components/form/InputLabel/index.js +4 -5
- package/dist/components/form/PureInput/index.d.ts +0 -2
- package/dist/components/form/PureInput/index.js +3 -4
- package/dist/palette/index.stories.js +14 -12
- package/dist/palette/provider.d.ts +0 -10
- package/dist/palette/provider.js +7 -27
- package/package.json +1 -1
|
@@ -33,7 +33,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
|
|
|
33
33
|
width = _ref$width === void 0 ? 'auto' : _ref$width,
|
|
34
34
|
zIndex = _ref.zIndex,
|
|
35
35
|
onCloseTransitionEnd = _ref.onCloseTransitionEnd;
|
|
36
|
-
var
|
|
36
|
+
var palette = (0, _palette.useComponentPalette)('dropdown');
|
|
37
37
|
var position = (0, _react.useRef)({
|
|
38
38
|
isAbove: true,
|
|
39
39
|
translateY: '0px'
|
|
@@ -112,6 +112,6 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
|
|
|
112
112
|
$width: width,
|
|
113
113
|
$zIndex: zIndex,
|
|
114
114
|
onTransitionEnd: handleCloseTransitionEnd,
|
|
115
|
-
$palette:
|
|
115
|
+
$palette: palette
|
|
116
116
|
}, children);
|
|
117
117
|
};
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
|
-
import { TInputLabelPalette } from './palette';
|
|
3
2
|
export type TProps = {
|
|
4
3
|
disabled?: boolean;
|
|
5
4
|
label?: string;
|
|
6
5
|
inFocus?: boolean;
|
|
7
6
|
children: ReactNode;
|
|
8
|
-
palette?: Partial<TInputLabelPalette>;
|
|
9
7
|
};
|
|
10
8
|
export declare const InputLabel: FC<TProps>;
|
|
@@ -17,15 +17,14 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
|
|
|
17
17
|
label = _ref.label,
|
|
18
18
|
_ref$inFocus = _ref.inFocus,
|
|
19
19
|
inFocus = _ref$inFocus === void 0 ? false : _ref$inFocus,
|
|
20
|
-
children = _ref.children
|
|
21
|
-
|
|
22
|
-
var mergedPalette = (0, _palette.useComponentPalette)('inputLabel', palette);
|
|
20
|
+
children = _ref.children;
|
|
21
|
+
var palette = (0, _palette.useComponentPalette)('inputLabel');
|
|
23
22
|
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
|
|
24
|
-
$palette:
|
|
23
|
+
$palette: palette,
|
|
25
24
|
$disabled: disabled,
|
|
26
25
|
$isLabel: !!label
|
|
27
26
|
}, label && /*#__PURE__*/_react["default"].createElement(S.Label, {
|
|
28
|
-
$palette:
|
|
27
|
+
$palette: palette,
|
|
29
28
|
$inFocus: inFocus,
|
|
30
29
|
variant: "captionRegular"
|
|
31
30
|
}, label), children);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { FC, InputHTMLAttributes } from 'react';
|
|
2
|
-
import { TPureInputPalette } from './palette';
|
|
3
2
|
export type TProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
4
3
|
paddingLeft?: number;
|
|
5
4
|
paddingRight?: number;
|
|
@@ -7,6 +6,5 @@ export type TProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
|
7
6
|
inFocus?: boolean;
|
|
8
7
|
hasBorder?: boolean;
|
|
9
8
|
className?: never;
|
|
10
|
-
palette?: Partial<TPureInputPalette>;
|
|
11
9
|
};
|
|
12
10
|
export declare const PureInput: FC<TProps>;
|
|
@@ -8,7 +8,7 @@ exports.PureInput = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var S = _interopRequireWildcard(require("./styles"));
|
|
10
10
|
var _palette = require("../../../palette");
|
|
11
|
-
var _excluded = ["paddingLeft", "paddingRight", "hasError", "inFocus", "hasBorder", "className"
|
|
11
|
+
var _excluded = ["paddingLeft", "paddingRight", "hasError", "inFocus", "hasBorder", "className"];
|
|
12
12
|
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); }
|
|
13
13
|
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; }
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -27,9 +27,8 @@ var PureInput = exports.PureInput = function PureInput(_ref) {
|
|
|
27
27
|
_ref$hasBorder = _ref.hasBorder,
|
|
28
28
|
hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
|
|
29
29
|
className = _ref.className,
|
|
30
|
-
palette = _ref.palette,
|
|
31
30
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
-
var
|
|
31
|
+
var palette = (0, _palette.useComponentPalette)('pureInput');
|
|
33
32
|
return /*#__PURE__*/_react["default"].createElement(S.Wrapper, _extends({
|
|
34
33
|
variant: "bodyMRegular",
|
|
35
34
|
element: "input",
|
|
@@ -38,6 +37,6 @@ var PureInput = exports.PureInput = function PureInput(_ref) {
|
|
|
38
37
|
$hasError: hasError,
|
|
39
38
|
$inFocus: inFocus,
|
|
40
39
|
$hasBorder: hasBorder,
|
|
41
|
-
$palette:
|
|
40
|
+
$palette: palette
|
|
42
41
|
}, rest));
|
|
43
42
|
};
|
|
@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = exports.Docs = void 0;
|
|
7
7
|
var _Skeleton = require("../components/common/Skeleton");
|
|
8
8
|
var _provider = require("./provider");
|
|
9
|
-
var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
|
|
10
9
|
var _Typography = require("../components/common/Typography");
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
10
|
var Example = function Example(_ref) {
|
|
13
11
|
var children = _ref.children;
|
|
14
12
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -26,22 +24,26 @@ var Docs = exports.Docs = {
|
|
|
26
24
|
render: function render() {
|
|
27
25
|
return /*#__PURE__*/React.createElement(_Typography.Typography, {
|
|
28
26
|
variant: "bodyL"
|
|
29
|
-
}, /*#__PURE__*/React.createElement(
|
|
27
|
+
}, /*#__PURE__*/React.createElement("h1", null, "\u0421\u0438\u0441\u0442\u0435\u043C\u0430 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E"), /*#__PURE__*/React.createElement("p", null, "\u041C\u043E\u0436\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B \u0431\u0435\u0437 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0446\u0432\u0435\u0442\u043E\u0432, \u0442\u043E\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u044B \u0446\u0432\u0435\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, '<Skeleton />')), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430"), /*#__PURE__*/React.createElement("p", null, "\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u0446\u0432\u0435\u0442\u0430 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430, \u0434\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E", ' ', /*#__PURE__*/React.createElement("code", null, "palette"), "."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ bg: '#c9c', flicker: '#5a5' }} />")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
30
28
|
palette: {
|
|
31
29
|
bg: '#c9c',
|
|
32
30
|
flicker: '#5a5'
|
|
33
31
|
}
|
|
34
|
-
})), /*#__PURE__*/React.createElement(
|
|
32
|
+
})), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "\u0415\u0441\u043B\u0438 \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043D\u0435\u0442 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 ", /*#__PURE__*/React.createElement("code", null, "palette"), ", \u0430 \u0432\u0430\u043C \u043E\u043D\u043E \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("a", {
|
|
33
|
+
href: "https://github.com/InvoiceBox/invoicebox-ui/issues"
|
|
34
|
+
}, "issue"), ". \u0418\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u0430\u043C\u043E\u0441\u0442\u043E\u044F\u0442\u0435\u043B\u044C\u043D\u043E \u0438 \u043E\u0442\u043A\u0440\u043E\u0439\u0442\u0435 pull request, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u0430, \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442", ' ', /*#__PURE__*/React.createElement("code", null, "Skeleton"), "."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432 \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430"), /*#__PURE__*/React.createElement("p", null, "\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u043E\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider skeleton={{ bg: '#39c', flicker: '#5cc' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
35
35
|
skeleton: {
|
|
36
36
|
bg: '#39c',
|
|
37
37
|
flicker: '#5cc'
|
|
38
38
|
}
|
|
39
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
39
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "\u0415\u0441\u043B\u0438 \u0443 ", /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u043D\u0435\u0442 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0433\u043E \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443, \u0430 \u0432\u0430\u043C \u043E\u043D\u043E \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("a", {
|
|
40
|
+
href: "https://github.com/InvoiceBox/invoicebox-ui/issues"
|
|
41
|
+
}, "issue"), ". \u0418\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0441\u0430\u043C\u043E\u0441\u0442\u043E\u044F\u0442\u0435\u043B\u044C\u043D\u043E \u0438 \u043E\u0442\u043A\u0440\u043E\u0439\u0442\u0435 pull request, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u0430, \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442", ' ', /*#__PURE__*/React.createElement("code", null, "Skeleton"), "."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("p", null, "\u0412\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0441\u043E\u0437\u0434\u0430\u044E\u0442\u0441\u044F \u0438\u0437 \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432. \u041F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u044F \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430, \u043C\u043E\u0436\u043D\u043E \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0446\u0432\u0435\u0442\u043E\u0432\u0443\u044E \u043F\u0430\u043B\u0438\u0442\u0440\u0443 \u0432\u0441\u0435\u0445 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0440\u0430\u0437\u043E\u043C. \u042D\u0442\u043E \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u043F\u043E\u043B\u0435\u0437\u043D\u043E \u0434\u043B\u044F \u0442\u0435\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F. \u0414\u043B\u044F \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0445 \u0446\u0432\u0435\u0442\u043E\u0432 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435", ' ', /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E ", /*#__PURE__*/React.createElement("code", null, "abstract"), "."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: '#c93', neutralLight: '#cc5' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
40
42
|
"abstract": {
|
|
41
43
|
neutralUsual: '#c93',
|
|
42
44
|
neutralLight: '#cc5'
|
|
43
45
|
}
|
|
44
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
46
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u041F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("p", null, "\u0421\u0430\u043C\u044B\u0439 \u0432\u044B\u0441\u043E\u043A\u0438\u0439 \u043F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442 \u0438\u043C\u0435\u044E\u0442 \u0446\u0432\u0435\u0442\u0430 \u043D\u0430 \u0443\u0440\u043E\u0432\u043D\u0435 \u0432\u044B\u0437\u043E\u0432\u0430 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430. \u0417\u0430\u0442\u0435\u043C \u0446\u0432\u0435\u0442\u0430 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E, \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 ", /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0435\u0433\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430. \u0417\u0430\u0442\u0435\u043C \u0430\u0431\u0441\u0442\u0440\u0430\u043A\u0442\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430, \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u0440\u0438 \u043F\u043E\u043C\u043E\u0449\u0438 ", /*#__PURE__*/React.createElement("code", null, "PaletteProvider"), " \u0438 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430", ' ', /*#__PURE__*/React.createElement("code", null, "abstract"), "."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: 'red' }} skeleton={{ bg: 'green' }}>\n", " <Skeleton palette={{ bg: 'blue' }}/>\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
45
47
|
"abstract": {
|
|
46
48
|
neutralUsual: 'red'
|
|
47
49
|
},
|
|
@@ -52,30 +54,30 @@ var Docs = exports.Docs = {
|
|
|
52
54
|
palette: {
|
|
53
55
|
bg: 'blue'
|
|
54
56
|
}
|
|
55
|
-
}))), /*#__PURE__*/React.createElement(
|
|
57
|
+
}))), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: 'red' }} skeleton={{ bg: 'green' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
56
58
|
"abstract": {
|
|
57
59
|
neutralUsual: 'red'
|
|
58
60
|
},
|
|
59
61
|
skeleton: {
|
|
60
62
|
bg: 'green'
|
|
61
63
|
}
|
|
62
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
64
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<PaletteProvider abstract={{ neutralUsual: 'red' }}>\n", " <Skeleton />\n", "</PaletteProvider>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_provider.PaletteProvider, {
|
|
63
65
|
"abstract": {
|
|
64
66
|
neutralUsual: 'red'
|
|
65
67
|
}
|
|
66
|
-
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null))), /*#__PURE__*/React.createElement(
|
|
68
|
+
}, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, null)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0438 \u043F\u043E\u043B\u043D\u043E\u0435 \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0446\u0432\u0435\u0442\u043E\u0432"), /*#__PURE__*/React.createElement("p", null, "\u041D\u0430 \u043B\u044E\u0431\u043E\u043C \u0443\u0440\u043E\u0432\u043D\u0435 \u043C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u0442\u044C \u043B\u044E\u0431\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432."), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ bg: 'pink' }}/>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
67
69
|
palette: {
|
|
68
70
|
bg: 'pink'
|
|
69
71
|
}
|
|
70
|
-
})), /*#__PURE__*/React.createElement(
|
|
72
|
+
})), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ flicker: 'brown' }}/>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
71
73
|
palette: {
|
|
72
74
|
flicker: 'brown'
|
|
73
75
|
}
|
|
74
|
-
})), /*#__PURE__*/React.createElement(
|
|
76
|
+
})), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, "<Skeleton palette={{ bg: 'pink', flicker: 'brown' }}/>")), /*#__PURE__*/React.createElement(Example, null, /*#__PURE__*/React.createElement(_Skeleton.Skeleton, {
|
|
75
77
|
palette: {
|
|
76
78
|
bg: 'pink',
|
|
77
79
|
flicker: 'brown'
|
|
78
80
|
}
|
|
79
|
-
})));
|
|
81
|
+
}))));
|
|
80
82
|
}
|
|
81
83
|
};
|
|
@@ -1,20 +1,10 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { TSkeletonPalette } from '../components/common/Skeleton/palette';
|
|
3
3
|
import { TAbstractPalette } from './types';
|
|
4
|
-
import { TInvoiceboxSpinnerPalette } from '../components/common/InvoiceboxSpinner/palette';
|
|
5
|
-
import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/palette';
|
|
6
|
-
import { TArrowPalette } from '../components/common/Arrow/palette';
|
|
7
|
-
import { TInputLabelPalette } from '../components/form/InputLabel/palette';
|
|
8
|
-
import { TPureInputPalette } from '../components/form/PureInput/palette';
|
|
9
4
|
type TProps = {
|
|
10
5
|
children: ReactNode;
|
|
11
6
|
abstract?: Partial<TAbstractPalette>;
|
|
12
7
|
skeleton?: Partial<TSkeletonPalette>;
|
|
13
|
-
invoiceboxSpinner?: Partial<TInvoiceboxSpinnerPalette>;
|
|
14
|
-
secondaryButton?: Partial<TSecondaryButtonPalette>;
|
|
15
|
-
arrow?: Partial<TArrowPalette>;
|
|
16
|
-
inputLabel?: Partial<TInputLabelPalette>;
|
|
17
|
-
pureInput?: Partial<TPureInputPalette>;
|
|
18
8
|
};
|
|
19
9
|
export declare const PaletteProvider: FC<TProps>;
|
|
20
10
|
export {};
|
package/dist/palette/provider.js
CHANGED
|
@@ -30,41 +30,21 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
30
30
|
var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
|
|
31
31
|
var children = _ref.children,
|
|
32
32
|
_abstract = _ref["abstract"],
|
|
33
|
-
skeleton = _ref.skeleton
|
|
34
|
-
invoiceboxSpinner = _ref.invoiceboxSpinner,
|
|
35
|
-
secondaryButton = _ref.secondaryButton,
|
|
36
|
-
arrow = _ref.arrow,
|
|
37
|
-
inputLabel = _ref.inputLabel,
|
|
38
|
-
pureInput = _ref.pureInput;
|
|
33
|
+
skeleton = _ref.skeleton;
|
|
39
34
|
var mergedAbstractPalette = (0, _react.useMemo)(function () {
|
|
40
35
|
return _objectSpread(_objectSpread({}, _constants.defaultAbstractPalette), _abstract);
|
|
41
36
|
}, [_abstract]);
|
|
42
37
|
var mergedSkeletonPalette = (0, _react.useMemo)(function () {
|
|
43
38
|
return _objectSpread(_objectSpread({}, (0, _palette.generateSkeletonPalette)(mergedAbstractPalette)), skeleton);
|
|
44
39
|
}, [mergedAbstractPalette, skeleton]);
|
|
45
|
-
var mergedInvoiceboxSpinnerPalette = (0, _react.useMemo)(function () {
|
|
46
|
-
return _objectSpread(_objectSpread({}, (0, _palette2.generateInvoiceboxSpinnerPalette)(mergedAbstractPalette)), invoiceboxSpinner);
|
|
47
|
-
}, [mergedAbstractPalette, invoiceboxSpinner]);
|
|
48
|
-
var mergedSecondaryButtonPalette = (0, _react.useMemo)(function () {
|
|
49
|
-
return _objectSpread(_objectSpread({}, (0, _palette3.generateSecondaryButtonPalette)(mergedAbstractPalette)), secondaryButton);
|
|
50
|
-
}, [mergedAbstractPalette, secondaryButton]);
|
|
51
|
-
var mergedArrowPalette = (0, _react.useMemo)(function () {
|
|
52
|
-
return _objectSpread(_objectSpread({}, (0, _palette4.generateArrowPalette)(mergedAbstractPalette)), arrow);
|
|
53
|
-
}, [mergedAbstractPalette, arrow]);
|
|
54
|
-
var mergedInputLabelPalette = (0, _react.useMemo)(function () {
|
|
55
|
-
return _objectSpread(_objectSpread({}, (0, _palette5.generateInputLabelPalette)(mergedAbstractPalette)), inputLabel);
|
|
56
|
-
}, [mergedAbstractPalette, inputLabel]);
|
|
57
|
-
var mergedPureInputPalette = (0, _react.useMemo)(function () {
|
|
58
|
-
return _objectSpread(_objectSpread({}, (0, _palette6.generatePureInputPalette)(mergedAbstractPalette)), pureInput);
|
|
59
|
-
}, [mergedAbstractPalette, pureInput]);
|
|
60
40
|
var value = (0, _react.useMemo)(function () {
|
|
61
41
|
return {
|
|
62
42
|
skeleton: mergedSkeletonPalette,
|
|
63
|
-
invoiceboxSpinner:
|
|
64
|
-
secondaryButton:
|
|
65
|
-
arrow:
|
|
66
|
-
inputLabel:
|
|
67
|
-
pureInput:
|
|
43
|
+
invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(mergedAbstractPalette),
|
|
44
|
+
secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(mergedAbstractPalette),
|
|
45
|
+
arrow: (0, _palette4.generateArrowPalette)(mergedAbstractPalette),
|
|
46
|
+
inputLabel: (0, _palette5.generateInputLabelPalette)(mergedAbstractPalette),
|
|
47
|
+
pureInput: (0, _palette6.generatePureInputPalette)(mergedAbstractPalette),
|
|
68
48
|
dropdown: (0, _palette7.generateDropdownPalette)(mergedAbstractPalette),
|
|
69
49
|
scrollbar: (0, _palette8.generateScrollbarPalette)(mergedAbstractPalette),
|
|
70
50
|
select: (0, _palette9.generateSelectPalette)(mergedAbstractPalette),
|
|
@@ -72,7 +52,7 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
|
|
|
72
52
|
warningIcon: (0, _palette11.generateWarningIconPalette)(mergedAbstractPalette),
|
|
73
53
|
divider: (0, _palette12.generateDividerPalette)(mergedAbstractPalette)
|
|
74
54
|
};
|
|
75
|
-
}, [mergedSkeletonPalette,
|
|
55
|
+
}, [mergedSkeletonPalette, mergedAbstractPalette]);
|
|
76
56
|
return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {
|
|
77
57
|
value: value
|
|
78
58
|
}, children);
|