@salutejs/plasma-new-hope 0.325.0-canary.1954.15210668888.0 → 0.325.0-canary.1970.15211531960.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/cjs/components/PaginationDots/PaginationDot.js +59 -0
- package/cjs/components/PaginationDots/PaginationDot.js.map +1 -0
- package/cjs/components/PaginationDots/PaginationDot_baul9c.css +2 -0
- package/cjs/components/PaginationDots/PaginationDots.js +34 -0
- package/cjs/components/PaginationDots/PaginationDots.js.map +1 -0
- package/cjs/components/PaginationDots/PaginationDots_fm2ha5.css +2 -0
- package/cjs/components/PaginationDots/SmartPaginationDots.css +5 -0
- package/cjs/components/PaginationDots/SmartPaginationDots.js +47 -0
- package/cjs/components/PaginationDots/SmartPaginationDots.js.map +1 -0
- package/cjs/components/PaginationDots/usePaginationDots.js +40 -0
- package/cjs/components/PaginationDots/usePaginationDots.js.map +1 -0
- package/cjs/index.css +6 -5
- package/cjs/index.js +6 -8
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/PaginationDots/PaginationDot.js +35 -0
- package/emotion/cjs/components/PaginationDots/PaginationDots.js +35 -0
- package/emotion/cjs/components/PaginationDots/SmartPaginationDots.js +43 -0
- package/emotion/cjs/components/PaginationDots/index.js +26 -0
- package/emotion/cjs/components/PaginationDots/usePaginationDots.js +38 -0
- package/emotion/cjs/index.js +11 -11
- package/emotion/es/components/PaginationDots/PaginationDot.js +28 -0
- package/emotion/es/components/PaginationDots/PaginationDots.js +28 -0
- package/emotion/es/components/PaginationDots/SmartPaginationDots.js +36 -0
- package/emotion/es/components/PaginationDots/index.js +3 -0
- package/emotion/es/components/PaginationDots/usePaginationDots.js +32 -0
- package/emotion/es/index.js +1 -2
- package/es/components/PaginationDots/PaginationDot.js +54 -0
- package/es/components/PaginationDots/PaginationDot.js.map +1 -0
- package/es/components/PaginationDots/PaginationDot_baul9c.css +2 -0
- package/es/components/PaginationDots/PaginationDots.js +29 -0
- package/es/components/PaginationDots/PaginationDots.js.map +1 -0
- package/es/components/PaginationDots/PaginationDots_fm2ha5.css +2 -0
- package/es/components/PaginationDots/SmartPaginationDots.css +5 -0
- package/es/components/PaginationDots/SmartPaginationDots.js +39 -0
- package/es/components/PaginationDots/SmartPaginationDots.js.map +1 -0
- package/es/components/PaginationDots/usePaginationDots.js +36 -0
- package/es/components/PaginationDots/usePaginationDots.js.map +1 -0
- package/es/index.css +6 -5
- package/es/index.js +3 -3
- package/package.json +2 -2
- package/styled-components/cjs/components/PaginationDots/PaginationDot.js +33 -0
- package/styled-components/cjs/components/PaginationDots/PaginationDots.js +24 -0
- package/styled-components/cjs/components/PaginationDots/SmartPaginationDots.js +43 -0
- package/styled-components/cjs/components/PaginationDots/index.js +26 -0
- package/styled-components/cjs/components/PaginationDots/usePaginationDots.js +38 -0
- package/styled-components/cjs/index.js +11 -11
- package/styled-components/es/components/PaginationDots/PaginationDot.js +26 -0
- package/styled-components/es/components/PaginationDots/PaginationDots.js +18 -0
- package/styled-components/es/components/PaginationDots/SmartPaginationDots.js +36 -0
- package/styled-components/es/components/PaginationDots/index.js +3 -0
- package/styled-components/es/components/PaginationDots/usePaginationDots.js +32 -0
- package/styled-components/es/index.js +1 -2
- package/types/components/PaginationDots/PaginationDot.d.ts +21 -0
- package/types/components/PaginationDots/PaginationDot.d.ts.map +1 -0
- package/types/components/PaginationDots/PaginationDots.d.ts +15 -0
- package/types/components/PaginationDots/PaginationDots.d.ts.map +1 -0
- package/types/components/PaginationDots/SmartPaginationDots.d.ts +15 -0
- package/types/components/PaginationDots/SmartPaginationDots.d.ts.map +1 -0
- package/types/components/PaginationDots/index.d.ts +6 -0
- package/types/components/PaginationDots/index.d.ts.map +1 -0
- package/types/components/PaginationDots/usePaginationDots.d.ts +14 -0
- package/types/components/PaginationDots/usePaginationDots.d.ts.map +1 -0
- package/types/index.d.ts +1 -2
- package/types/index.d.ts.map +1 -1
- package/cjs/components/List/List.css +0 -1
- package/cjs/components/List/List.js +0 -63
- package/cjs/components/List/List.js.map +0 -1
- package/cjs/components/List/List.styles.js +0 -9
- package/cjs/components/List/List.styles.js.map +0 -1
- package/cjs/components/List/List.styles_9yg2yl.css +0 -1
- package/cjs/components/List/List.tokens.js +0 -41
- package/cjs/components/List/List.tokens.js.map +0 -1
- package/cjs/components/List/ui/ListItem.css +0 -18
- package/cjs/components/List/ui/ListItem.js +0 -27
- package/cjs/components/List/ui/ListItem.js.map +0 -1
- package/cjs/components/List/ui/ListItem.styles.js +0 -28
- package/cjs/components/List/ui/ListItem.styles.js.map +0 -1
- package/cjs/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
- package/cjs/components/List/variations/_disabled/base.js +0 -9
- package/cjs/components/List/variations/_disabled/base.js.map +0 -1
- package/cjs/components/List/variations/_disabled/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_size/base.js +0 -9
- package/cjs/components/List/variations/_size/base.js.map +0 -1
- package/cjs/components/List/variations/_size/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_variant/base.js +0 -9
- package/cjs/components/List/variations/_variant/base.js.map +0 -1
- package/cjs/components/List/variations/_variant/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_view/base.js +0 -9
- package/cjs/components/List/variations/_view/base.js.map +0 -1
- package/cjs/components/List/variations/_view/base_x642ct.css +0 -1
- package/emotion/cjs/components/List/List.js +0 -59
- package/emotion/cjs/components/List/List.styles.js +0 -9
- package/emotion/cjs/components/List/List.tokens.js +0 -39
- package/emotion/cjs/components/List/List.types.js +0 -5
- package/emotion/cjs/components/List/index.js +0 -38
- package/emotion/cjs/components/List/ui/ListItem.js +0 -24
- package/emotion/cjs/components/List/ui/ListItem.styles.js +0 -21
- package/emotion/cjs/components/List/ui/ListItem.types.js +0 -5
- package/emotion/cjs/components/List/variations/_disabled/base.js +0 -8
- package/emotion/cjs/components/List/variations/_disabled/tokens.json +0 -1
- package/emotion/cjs/components/List/variations/_size/base.js +0 -8
- package/emotion/cjs/components/List/variations/_size/tokens.json +0 -1
- package/emotion/cjs/components/List/variations/_variant/base.js +0 -8
- package/emotion/cjs/components/List/variations/_variant/tokens.json +0 -1
- package/emotion/cjs/components/List/variations/_view/base.js +0 -8
- package/emotion/cjs/components/List/variations/_view/tokens.json +0 -1
- package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +0 -34
- package/emotion/cjs/examples/plasma_b2c/components/List/List.js +0 -12
- package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/emotion/cjs/examples/plasma_web/components/List/List.config.js +0 -34
- package/emotion/cjs/examples/plasma_web/components/List/List.js +0 -12
- package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/emotion/es/components/List/List.js +0 -50
- package/emotion/es/components/List/List.styles.js +0 -3
- package/emotion/es/components/List/List.tokens.js +0 -33
- package/emotion/es/components/List/List.types.js +0 -1
- package/emotion/es/components/List/index.js +0 -3
- package/emotion/es/components/List/ui/ListItem.js +0 -17
- package/emotion/es/components/List/ui/ListItem.styles.js +0 -14
- package/emotion/es/components/List/ui/ListItem.types.js +0 -1
- package/emotion/es/components/List/variations/_disabled/base.js +0 -2
- package/emotion/es/components/List/variations/_disabled/tokens.json +0 -1
- package/emotion/es/components/List/variations/_size/base.js +0 -2
- package/emotion/es/components/List/variations/_size/tokens.json +0 -1
- package/emotion/es/components/List/variations/_variant/base.js +0 -2
- package/emotion/es/components/List/variations/_variant/tokens.json +0 -1
- package/emotion/es/components/List/variations/_view/base.js +0 -2
- package/emotion/es/components/List/variations/_view/tokens.json +0 -1
- package/emotion/es/examples/plasma_b2c/components/List/List.config.js +0 -28
- package/emotion/es/examples/plasma_b2c/components/List/List.js +0 -6
- package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/emotion/es/examples/plasma_web/components/List/List.config.js +0 -28
- package/emotion/es/examples/plasma_web/components/List/List.js +0 -6
- package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/es/components/List/List.css +0 -1
- package/es/components/List/List.js +0 -54
- package/es/components/List/List.js.map +0 -1
- package/es/components/List/List.styles.js +0 -5
- package/es/components/List/List.styles.js.map +0 -1
- package/es/components/List/List.styles_9yg2yl.css +0 -1
- package/es/components/List/List.tokens.js +0 -36
- package/es/components/List/List.tokens.js.map +0 -1
- package/es/components/List/ui/ListItem.css +0 -18
- package/es/components/List/ui/ListItem.js +0 -19
- package/es/components/List/ui/ListItem.js.map +0 -1
- package/es/components/List/ui/ListItem.styles.js +0 -23
- package/es/components/List/ui/ListItem.styles.js.map +0 -1
- package/es/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
- package/es/components/List/variations/_disabled/base.js +0 -5
- package/es/components/List/variations/_disabled/base.js.map +0 -1
- package/es/components/List/variations/_disabled/base_x642ct.css +0 -1
- package/es/components/List/variations/_size/base.js +0 -5
- package/es/components/List/variations/_size/base.js.map +0 -1
- package/es/components/List/variations/_size/base_x642ct.css +0 -1
- package/es/components/List/variations/_variant/base.js +0 -5
- package/es/components/List/variations/_variant/base.js.map +0 -1
- package/es/components/List/variations/_variant/base_x642ct.css +0 -1
- package/es/components/List/variations/_view/base.js +0 -5
- package/es/components/List/variations/_view/base.js.map +0 -1
- package/es/components/List/variations/_view/base_x642ct.css +0 -1
- package/styled-components/cjs/components/List/List.js +0 -59
- package/styled-components/cjs/components/List/List.styles.js +0 -9
- package/styled-components/cjs/components/List/List.tokens.js +0 -39
- package/styled-components/cjs/components/List/List.types.js +0 -5
- package/styled-components/cjs/components/List/index.js +0 -38
- package/styled-components/cjs/components/List/ui/ListItem.js +0 -24
- package/styled-components/cjs/components/List/ui/ListItem.styles.js +0 -19
- package/styled-components/cjs/components/List/ui/ListItem.types.js +0 -5
- package/styled-components/cjs/components/List/variations/_disabled/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_disabled/tokens.json +0 -1
- package/styled-components/cjs/components/List/variations/_size/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_size/tokens.json +0 -1
- package/styled-components/cjs/components/List/variations/_variant/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_variant/tokens.json +0 -1
- package/styled-components/cjs/components/List/variations/_view/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_view/tokens.json +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +0 -34
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.js +0 -12
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +0 -34
- package/styled-components/cjs/examples/plasma_web/components/List/List.js +0 -12
- package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/styled-components/es/components/List/List.js +0 -50
- package/styled-components/es/components/List/List.styles.js +0 -3
- package/styled-components/es/components/List/List.tokens.js +0 -33
- package/styled-components/es/components/List/List.types.js +0 -1
- package/styled-components/es/components/List/index.js +0 -3
- package/styled-components/es/components/List/ui/ListItem.js +0 -17
- package/styled-components/es/components/List/ui/ListItem.styles.js +0 -12
- package/styled-components/es/components/List/ui/ListItem.types.js +0 -1
- package/styled-components/es/components/List/variations/_disabled/base.js +0 -2
- package/styled-components/es/components/List/variations/_disabled/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_size/base.js +0 -2
- package/styled-components/es/components/List/variations/_size/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_variant/base.js +0 -2
- package/styled-components/es/components/List/variations/_variant/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_view/base.js +0 -2
- package/styled-components/es/components/List/variations/_view/tokens.json +0 -1
- package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +0 -28
- package/styled-components/es/examples/plasma_b2c/components/List/List.js +0 -6
- package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/styled-components/es/examples/plasma_web/components/List/List.config.js +0 -28
- package/styled-components/es/examples/plasma_web/components/List/List.js +0 -6
- package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/types/components/List/List.d.ts +0 -43
- package/types/components/List/List.d.ts.map +0 -1
- package/types/components/List/List.styles.d.ts +0 -2
- package/types/components/List/List.styles.d.ts.map +0 -1
- package/types/components/List/List.tokens.d.ts +0 -34
- package/types/components/List/List.tokens.d.ts.map +0 -1
- package/types/components/List/List.types.d.ts +0 -24
- package/types/components/List/List.types.d.ts.map +0 -1
- package/types/components/List/index.d.ts +0 -5
- package/types/components/List/index.d.ts.map +0 -1
- package/types/components/List/ui/ListItem.d.ts +0 -4
- package/types/components/List/ui/ListItem.d.ts.map +0 -1
- package/types/components/List/ui/ListItem.styles.d.ts +0 -36
- package/types/components/List/ui/ListItem.styles.d.ts.map +0 -1
- package/types/components/List/ui/ListItem.types.d.ts +0 -15
- package/types/components/List/ui/ListItem.types.d.ts.map +0 -1
- package/types/components/List/variations/_disabled/base.d.ts +0 -2
- package/types/components/List/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/List/variations/_size/base.d.ts +0 -2
- package/types/components/List/variations/_size/base.d.ts.map +0 -1
- package/types/components/List/variations/_variant/base.d.ts +0 -2
- package/types/components/List/variations/_variant/base.d.ts.map +0 -1
- package/types/components/List/variations/_view/base.d.ts +0 -2
- package/types/components/List/variations/_view/base.d.ts.map +0 -1
@@ -0,0 +1,36 @@
|
|
1
|
+
var _excluded = ["items", "index", "visibleItems", "onIndexChange"];
|
2
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
3
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
4
|
+
import React from 'react';
|
5
|
+
import { usePaginationDots } from "./usePaginationDots";
|
6
|
+
import { PaginationDots } from "./PaginationDots";
|
7
|
+
import { PaginationDot } from "./PaginationDot";
|
8
|
+
/**
|
9
|
+
* Компонент для отображения точек пагинации
|
10
|
+
* с возможностью ограничения количества видимых элементов.
|
11
|
+
* @deprecated
|
12
|
+
*/
|
13
|
+
export var SmartPaginationDots = function SmartPaginationDots(_ref) {
|
14
|
+
var items = _ref.items,
|
15
|
+
index = _ref.index,
|
16
|
+
visibleItems = _ref.visibleItems,
|
17
|
+
onIndexChange = _ref.onIndexChange,
|
18
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
19
|
+
var _usePaginationDots = usePaginationDots({
|
20
|
+
items: items,
|
21
|
+
index: index,
|
22
|
+
visibleItems: visibleItems
|
23
|
+
}),
|
24
|
+
sliced = _usePaginationDots.sliced,
|
25
|
+
activeId = _usePaginationDots.activeId;
|
26
|
+
return /*#__PURE__*/React.createElement(PaginationDots, rest, sliced.map(function (_ref2, i) {
|
27
|
+
var id = _ref2.id;
|
28
|
+
return /*#__PURE__*/React.createElement(PaginationDot, {
|
29
|
+
key: "item:".concat(i),
|
30
|
+
isActive: id === activeId,
|
31
|
+
onClick: function onClick() {
|
32
|
+
return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
|
33
|
+
}
|
34
|
+
});
|
35
|
+
}));
|
36
|
+
};
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { useRef } from 'react';
|
2
|
+
export var usePaginationDots = function usePaginationDots(_ref) {
|
3
|
+
var items = _ref.items,
|
4
|
+
index = _ref.index,
|
5
|
+
_ref$visibleItems = _ref.visibleItems,
|
6
|
+
visibleItems = _ref$visibleItems === void 0 ? 7 : _ref$visibleItems;
|
7
|
+
var activeId = items[index].id;
|
8
|
+
var prevIndex = useRef(null);
|
9
|
+
var direction = 0;
|
10
|
+
if (prevIndex.current !== null) {
|
11
|
+
direction = index > prevIndex.current ? 1 : -1;
|
12
|
+
}
|
13
|
+
var start;
|
14
|
+
var end;
|
15
|
+
if (direction === 1) {
|
16
|
+
end = Math.min(Math.max(index + 2, visibleItems), items.length);
|
17
|
+
start = Math.max(end - visibleItems, 0);
|
18
|
+
} else if (direction === -1) {
|
19
|
+
start = Math.min(Math.max(index - 1, 0), items.length - visibleItems);
|
20
|
+
end = start + visibleItems;
|
21
|
+
} else {
|
22
|
+
start = Math.max(index - Math.floor(visibleItems / 2), 0);
|
23
|
+
end = Math.min(start + visibleItems, items.length);
|
24
|
+
start = end - visibleItems;
|
25
|
+
}
|
26
|
+
var sliced = items.slice(start, end);
|
27
|
+
prevIndex.current = index;
|
28
|
+
return {
|
29
|
+
sliced: sliced,
|
30
|
+
activeId: activeId
|
31
|
+
};
|
32
|
+
};
|
package/emotion/es/index.js
CHANGED
@@ -72,9 +72,8 @@ export * from "./components/Tree";
|
|
72
72
|
export * from "./components/Rating";
|
73
73
|
export * from "./components/Note";
|
74
74
|
export * from "./components/Table";
|
75
|
-
export * from "./components/List";
|
76
75
|
export * from "./components/LinkButton";
|
77
76
|
export * from "./components/NumberFormat";
|
78
77
|
export * from "./components/Toast/ToastNew";
|
79
78
|
export * from "./components/Carousel";
|
80
|
-
export * from "./components/
|
79
|
+
export * from "./components/PaginationDots";
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import './PaginationDot_baul9c.css';
|
2
|
+
import { styled } from '@linaria/react';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* Элемент пагинации точками.
|
6
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
7
|
+
*/
|
8
|
+
var _exp = function _exp() {
|
9
|
+
return function (_ref) {
|
10
|
+
var isActive = _ref.isActive;
|
11
|
+
return isActive ? '1.75rem' : '0.375rem';
|
12
|
+
};
|
13
|
+
};
|
14
|
+
var _exp2 = function _exp2() {
|
15
|
+
return function (_ref2) {
|
16
|
+
var isActive = _ref2.isActive;
|
17
|
+
return isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)';
|
18
|
+
};
|
19
|
+
};
|
20
|
+
var DotBase = /*#__PURE__*/styled('li')({
|
21
|
+
name: "DotBase",
|
22
|
+
"class": "d1mcs0w2",
|
23
|
+
propsAsIs: false,
|
24
|
+
vars: {
|
25
|
+
"d1mcs0w2-0": [/*#__PURE__*/_exp()],
|
26
|
+
"d1mcs0w2-1": [/*#__PURE__*/_exp2()]
|
27
|
+
}
|
28
|
+
});
|
29
|
+
|
30
|
+
/**
|
31
|
+
* Элемент пагинации точками.
|
32
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
33
|
+
* @deprecated
|
34
|
+
*/
|
35
|
+
var _exp3 = function _exp3() {
|
36
|
+
return DotBase;
|
37
|
+
};
|
38
|
+
var _exp4 = function _exp4() {
|
39
|
+
return function (_ref3) {
|
40
|
+
var isActive = _ref3.isActive;
|
41
|
+
return isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)';
|
42
|
+
};
|
43
|
+
};
|
44
|
+
var PaginationDot = /*#__PURE__*/styled(_exp3())({
|
45
|
+
name: "PaginationDot",
|
46
|
+
"class": "poypaki",
|
47
|
+
propsAsIs: true,
|
48
|
+
vars: {
|
49
|
+
"poypaki-0": [/*#__PURE__*/_exp4()]
|
50
|
+
}
|
51
|
+
});
|
52
|
+
|
53
|
+
export { DotBase, PaginationDot };
|
54
|
+
//# sourceMappingURL=PaginationDot.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"PaginationDot.js","sources":["../../../src/components/PaginationDots/PaginationDot.tsx"],"sourcesContent":["import { styled } from '@linaria/react';\n\nexport interface PaginationDotProps extends React.LiHTMLAttributes<HTMLLIElement> {\n /**\n * Элемент активен\n */\n isActive: boolean;\n}\n\n/**\n * Элемент пагинации точками.\n * Стилизованный компонент, обладающий всеми свойствами ``div``.\n */\nexport const DotBase = styled.li<PaginationDotProps>`\n width: ${({ isActive }) => (isActive ? '1.75rem' : '0.375rem')};\n height: 0.375rem;\n border-radius: 1rem;\n background: ${({ isActive }) => (isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)')};\n transition: width 0.1s ease-in-out, background 0.3s ease-in-out;\n font-size: 0.5rem;\n\n & + & {\n margin-left: 0.375rem;\n }\n\n &:focus {\n outline: 0 none;\n }\n`;\n\n/**\n * Элемент пагинации точками.\n * Стилизованный компонент, обладающий всеми свойствами ``div``.\n * @deprecated\n */\nexport const PaginationDot = styled(DotBase)<PaginationDotProps>`\n cursor: pointer;\n\n background: ${({ isActive }) => (isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)')};\n\n &:hover {\n background: var(--text-accent);\n }\n`;\n"],"names":["_exp","_ref","isActive","_exp2","_ref2","DotBase","styled","name","class","propsAsIs","vars","_exp3","_exp4","_ref3","PaginationDot"],"mappings":";;AASA;AACA;AACA;AACA;AAHA,IAAAA,IAAA,GARkBA,SAQlBA,IAAAA,GAAA;AAAA,EAAA,OAKa,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,QAAAA,GAAAA,IAAAA,CAAAA,QAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,QAAQ,GAAG,SAAS,GAAG,UAAW,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAbhDA,SAagDA,KAAAA,GAAA;AAAA,EAAA,OAGhD,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGF,QAAAA,GAAAA,KAAAA,CAAAA,QAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,QAAQ,GAAG,qBAAqB,GAAG,qCAAsC,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAJvG,IAAMG,OAAO,gBAAGC,MAAM,CAAA,IAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,SAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAChBV,IAAqD,EAAA,CAAA;AAAA,IAAA,YAAA,EAAA,cAGhDG,KAA4F,EAAA,CAAA;AAAA,GAAA;AAAA,CAW7G,EAAA;;AAED;AACA;AACA;AACA;AACA;AAJA,IAAAQ,KAAA,GA7BkBA,SA6BlBA,KAAAA,GAAA;AAAA,EAAA,OAKoCN,OAAO,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAO,KAAA,GAlCzBA,SAkCyBA,KAAAA,GAAA;AAAA,EAAA,OAGzB,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGX,QAAAA,GAAAA,KAAAA,CAAAA,QAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,QAAQ,GAAG,oBAAoB,GAAG,qCAAsC,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAHtG,IAAMY,aAAa,gBAAGR,MAAM,CAAAK,KAAA,EAAA,CAAA,CAAA;AAAAJ,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAGjBE,KAA2F,EAAA,CAAA;AAAA,GAAA;AAAA,CAK5G;;;;"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
.d1mcs0w2{width:var(--d1mcs0w2-0);height:0.375rem;border-radius:1rem;background:var(--d1mcs0w2-1);-webkit-transition:width 0.1s ease-in-out,background 0.3s ease-in-out;transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;}.d1mcs0w2 + .d1mcs0w2{margin-left:0.375rem;}.d1mcs0w2:focus{outline:0 none;}
|
2
|
+
.poypaki.d1mcs0w2{cursor:pointer;background:var(--poypaki-0);}.poypaki.d1mcs0w2:hover{background:var(--text-accent);}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import './PaginationDots_fm2ha5.css';
|
2
|
+
import { styled } from '@linaria/react';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* Оборачивающий компонент для пагинации точками.
|
6
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
7
|
+
*/
|
8
|
+
var DotsBase = /*#__PURE__*/styled('ul')({
|
9
|
+
name: "DotsBase",
|
10
|
+
"class": "dut2ldg",
|
11
|
+
propsAsIs: false
|
12
|
+
});
|
13
|
+
|
14
|
+
/**
|
15
|
+
* Оборачивающий компонент для пагинации точками.
|
16
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
17
|
+
* @deprecated
|
18
|
+
*/
|
19
|
+
var _exp = function _exp() {
|
20
|
+
return DotsBase;
|
21
|
+
};
|
22
|
+
var PaginationDots = /*#__PURE__*/styled(_exp())({
|
23
|
+
name: "PaginationDots",
|
24
|
+
"class": "p1m9slup",
|
25
|
+
propsAsIs: true
|
26
|
+
});
|
27
|
+
|
28
|
+
export { DotsBase, PaginationDots };
|
29
|
+
//# sourceMappingURL=PaginationDots.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"PaginationDots.js","sources":["../../../src/components/PaginationDots/PaginationDots.tsx"],"sourcesContent":["import { styled } from '@linaria/react';\n\n/**\n * Оборачивающий компонент для пагинации точками.\n * Стилизованный компонент, обладающий всеми свойствами ``div``.\n */\nexport const DotsBase = styled.ul`\n display: flex;\n flex-wrap: wrap;\n align-self: center;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n`;\n\n/**\n * Оборачивающий компонент для пагинации точками.\n * Стилизованный компонент, обладающий всеми свойствами ``div``.\n * @deprecated\n */\nexport const PaginationDots = styled(DotsBase)``;\n"],"names":["DotsBase","styled","name","class","propsAsIs","_exp","PaginationDots"],"mappings":";;AAEA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,gBAAGC,MAAM,CAAA,IAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,UAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAQ7B,EAAA;;AAED;AACA;AACA;AACA;AACA;AAJA,IAAAC,IAAA,GAfkBA,SAelBA,IAAAA,GAAA;AAAA,EAAA,OAKqCL,QAAQ,CAAA;AAAA,CAAA,CAAA;AAAtC,IAAMM,cAAc,gBAAGL,MAAM,CAAAI,IAAA,EAAA,CAAA,CAAA;AAAAH,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAAY;;;;"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
.dut2ldg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;padding:0;list-style:none;}
|
2
|
+
|
@@ -0,0 +1,5 @@
|
|
1
|
+
.PaginationDots_fm2ha5_dut2ldg__db2a2205{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;padding:0;list-style:none;}
|
2
|
+
|
3
|
+
|
4
|
+
.PaginationDot_baul9c_d1mcs0w2__b1eb09b2{width:var(--d1mcs0w2-0);height:0.375rem;border-radius:1rem;background:var(--d1mcs0w2-1);-webkit-transition:width 0.1s ease-in-out,background 0.3s ease-in-out;transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;}.PaginationDot_baul9c_d1mcs0w2__b1eb09b2 + .PaginationDot_baul9c_d1mcs0w2__b1eb09b2{margin-left:0.375rem;}.PaginationDot_baul9c_d1mcs0w2__b1eb09b2:focus{outline:0 none;}
|
5
|
+
.PaginationDot_baul9c_poypaki__b1eb09b2.PaginationDot_baul9c_d1mcs0w2__b1eb09b2{cursor:pointer;background:var(--poypaki-0);}.PaginationDot_baul9c_poypaki__b1eb09b2.PaginationDot_baul9c_d1mcs0w2__b1eb09b2:hover{background:var(--text-accent);}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import { objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
+
import React from 'react';
|
3
|
+
import { usePaginationDots } from './usePaginationDots.js';
|
4
|
+
import { PaginationDots } from './PaginationDots.js';
|
5
|
+
import { PaginationDot } from './PaginationDot.js';
|
6
|
+
|
7
|
+
var _excluded = ["items", "index", "visibleItems", "onIndexChange"];
|
8
|
+
/**
|
9
|
+
* Компонент для отображения точек пагинации
|
10
|
+
* с возможностью ограничения количества видимых элементов.
|
11
|
+
* @deprecated
|
12
|
+
*/
|
13
|
+
var SmartPaginationDots = function SmartPaginationDots(_ref) {
|
14
|
+
var items = _ref.items,
|
15
|
+
index = _ref.index,
|
16
|
+
visibleItems = _ref.visibleItems,
|
17
|
+
onIndexChange = _ref.onIndexChange,
|
18
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
19
|
+
var _usePaginationDots = usePaginationDots({
|
20
|
+
items: items,
|
21
|
+
index: index,
|
22
|
+
visibleItems: visibleItems
|
23
|
+
}),
|
24
|
+
sliced = _usePaginationDots.sliced,
|
25
|
+
activeId = _usePaginationDots.activeId;
|
26
|
+
return /*#__PURE__*/React.createElement(PaginationDots, rest, sliced.map(function (_ref2, i) {
|
27
|
+
var id = _ref2.id;
|
28
|
+
return /*#__PURE__*/React.createElement(PaginationDot, {
|
29
|
+
key: "item:".concat(i),
|
30
|
+
isActive: id === activeId,
|
31
|
+
onClick: function onClick() {
|
32
|
+
return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
|
33
|
+
}
|
34
|
+
});
|
35
|
+
}));
|
36
|
+
};
|
37
|
+
|
38
|
+
export { SmartPaginationDots };
|
39
|
+
//# sourceMappingURL=SmartPaginationDots.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"SmartPaginationDots.js","sources":["../../../src/components/PaginationDots/SmartPaginationDots.tsx"],"sourcesContent":["import React from 'react';\n\nimport { usePaginationDots, SmartPaginationDotsProps as BaseProps } from './usePaginationDots';\nimport { PaginationDots } from './PaginationDots';\nimport { PaginationDot } from './PaginationDot';\n\nexport interface SmartPaginationDotsProps extends BaseProps, React.HTMLAttributes<HTMLUListElement> {\n /**\n * Обработчик изменения индекса\n */\n onIndexChange?: (index: number) => void;\n}\n\n/**\n * Компонент для отображения точек пагинации\n * с возможностью ограничения количества видимых элементов.\n * @deprecated\n */\nexport const SmartPaginationDots: React.FC<SmartPaginationDotsProps> = ({\n items,\n index,\n visibleItems,\n onIndexChange,\n ...rest\n}) => {\n const { sliced, activeId } = usePaginationDots({ items, index, visibleItems });\n\n return (\n <PaginationDots {...rest}>\n {sliced.map(({ id }, i) => (\n <PaginationDot key={`item:${i}`} isActive={id === activeId} onClick={() => onIndexChange?.(i)} />\n ))}\n </PaginationDots>\n );\n};\n"],"names":["SmartPaginationDots","_ref","items","index","visibleItems","onIndexChange","rest","_objectWithoutProperties","_excluded","_usePaginationDots","usePaginationDots","sliced","activeId","React","createElement","PaginationDots","map","_ref2","i","id","PaginationDot","key","concat","isActive","onClick"],"mappings":";;;;;;;AAaA;AACA;AACA;AACA;AACA;IACaA,mBAAuD,GAAG,SAA1DA,mBAAuDA,CAAAC,IAAA,EAM9D;AAAA,EAAA,IALFC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,YAAY,GAAAH,IAAA,CAAZG,YAAY;IACZC,aAAa,GAAAJ,IAAA,CAAbI,aAAa;AACVC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;EAEP,IAAAC,kBAAA,GAA6BC,iBAAiB,CAAC;AAAER,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,KAAK,EAALA,KAAK;AAAEC,MAAAA,YAAY,EAAZA,YAAAA;AAAa,KAAC,CAAC;IAAtEO,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,QAAQ,GAAAH,kBAAA,CAARG,QAAQ,CAAA;AAExB,EAAA,oBACIC,KAAA,CAAAC,aAAA,CAACC,cAAc,EAAKT,IAAI,EACnBK,MAAM,CAACK,GAAG,CAAC,UAAAC,KAAA,EAASC,CAAC,EAAA;AAAA,IAAA,IAAPC,EAAE,GAAAF,KAAA,CAAFE,EAAE,CAAA;AAAA,IAAA,oBACbN,KAAA,CAAAC,aAAA,CAACM,aAAa,EAAA;AAACC,MAAAA,GAAG,EAAAC,OAAAA,CAAAA,MAAA,CAAUJ,CAAC,CAAG;MAACK,QAAQ,EAAEJ,EAAE,KAAKP,QAAS;MAACY,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,QAAA,OAAMnB,aAAa,KAAbA,IAAAA,IAAAA,aAAa,uBAAbA,aAAa,CAAGa,CAAC,CAAC,CAAA;AAAA,OAAA;AAAC,KAAE,CAAC,CAAA;AAAA,GACpG,CACW,CAAC,CAAA;AAEzB;;;;"}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import { useRef } from 'react';
|
2
|
+
|
3
|
+
var usePaginationDots = function usePaginationDots(_ref) {
|
4
|
+
var items = _ref.items,
|
5
|
+
index = _ref.index,
|
6
|
+
_ref$visibleItems = _ref.visibleItems,
|
7
|
+
visibleItems = _ref$visibleItems === void 0 ? 7 : _ref$visibleItems;
|
8
|
+
var activeId = items[index].id;
|
9
|
+
var prevIndex = useRef(null);
|
10
|
+
var direction = 0;
|
11
|
+
if (prevIndex.current !== null) {
|
12
|
+
direction = index > prevIndex.current ? 1 : -1;
|
13
|
+
}
|
14
|
+
var start;
|
15
|
+
var end;
|
16
|
+
if (direction === 1) {
|
17
|
+
end = Math.min(Math.max(index + 2, visibleItems), items.length);
|
18
|
+
start = Math.max(end - visibleItems, 0);
|
19
|
+
} else if (direction === -1) {
|
20
|
+
start = Math.min(Math.max(index - 1, 0), items.length - visibleItems);
|
21
|
+
end = start + visibleItems;
|
22
|
+
} else {
|
23
|
+
start = Math.max(index - Math.floor(visibleItems / 2), 0);
|
24
|
+
end = Math.min(start + visibleItems, items.length);
|
25
|
+
start = end - visibleItems;
|
26
|
+
}
|
27
|
+
var sliced = items.slice(start, end);
|
28
|
+
prevIndex.current = index;
|
29
|
+
return {
|
30
|
+
sliced: sliced,
|
31
|
+
activeId: activeId
|
32
|
+
};
|
33
|
+
};
|
34
|
+
|
35
|
+
export { usePaginationDots };
|
36
|
+
//# sourceMappingURL=usePaginationDots.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"usePaginationDots.js","sources":["../../../src/components/PaginationDots/usePaginationDots.ts"],"sourcesContent":["import { useRef } from 'react';\n\nexport interface SmartPaginationDotsProps {\n items: Array<{ id: number | string }>;\n index: number;\n visibleItems?: number;\n}\n\nexport const usePaginationDots = ({ items, index, visibleItems = 7 }: SmartPaginationDotsProps) => {\n const activeId = items[index].id;\n const prevIndex = useRef<number | null>(null);\n let direction = 0;\n\n if (prevIndex.current !== null) {\n direction = index > prevIndex.current ? 1 : -1;\n }\n\n let start: number;\n let end: number;\n\n if (direction === 1) {\n end = Math.min(Math.max(index + 2, visibleItems), items.length);\n start = Math.max(end - visibleItems, 0);\n } else if (direction === -1) {\n start = Math.min(Math.max(index - 1, 0), items.length - visibleItems);\n end = start + visibleItems;\n } else {\n start = Math.max(index - Math.floor(visibleItems / 2), 0);\n end = Math.min(start + visibleItems, items.length);\n start = end - visibleItems;\n }\n\n const sliced = items.slice(start, end);\n\n prevIndex.current = index;\n\n return {\n sliced,\n activeId,\n };\n};\n"],"names":["usePaginationDots","_ref","items","index","_ref$visibleItems","visibleItems","activeId","id","prevIndex","useRef","direction","current","start","end","Math","min","max","length","floor","sliced","slice"],"mappings":";;IAQaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAAqE;AAAA,EAAA,IAA/DC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,iBAAA,GAAAH,IAAA,CAAEI,YAAY;AAAZA,IAAAA,YAAY,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,iBAAA,CAAA;AAC9D,EAAA,IAAME,QAAQ,GAAGJ,KAAK,CAACC,KAAK,CAAC,CAACI,EAAE,CAAA;AAChC,EAAA,IAAMC,SAAS,GAAGC,MAAM,CAAgB,IAAI,CAAC,CAAA;EAC7C,IAAIC,SAAS,GAAG,CAAC,CAAA;AAEjB,EAAA,IAAIF,SAAS,CAACG,OAAO,KAAK,IAAI,EAAE;IAC5BD,SAAS,GAAGP,KAAK,GAAGK,SAAS,CAACG,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAClD,GAAA;AAEA,EAAA,IAAIC,KAAa,CAAA;AACjB,EAAA,IAAIC,GAAW,CAAA;EAEf,IAAIH,SAAS,KAAK,CAAC,EAAE;AACjBG,IAAAA,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACb,KAAK,GAAG,CAAC,EAAEE,YAAY,CAAC,EAAEH,KAAK,CAACe,MAAM,CAAC,CAAA;IAC/DL,KAAK,GAAGE,IAAI,CAACE,GAAG,CAACH,GAAG,GAAGR,YAAY,EAAE,CAAC,CAAC,CAAA;AAC3C,GAAC,MAAM,IAAIK,SAAS,KAAK,CAAC,CAAC,EAAE;IACzBE,KAAK,GAAGE,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACb,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,EAAED,KAAK,CAACe,MAAM,GAAGZ,YAAY,CAAC,CAAA;IACrEQ,GAAG,GAAGD,KAAK,GAAGP,YAAY,CAAA;AAC9B,GAAC,MAAM;AACHO,IAAAA,KAAK,GAAGE,IAAI,CAACE,GAAG,CAACb,KAAK,GAAGW,IAAI,CAACI,KAAK,CAACb,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACzDQ,IAAAA,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,KAAK,GAAGP,YAAY,EAAEH,KAAK,CAACe,MAAM,CAAC,CAAA;IAClDL,KAAK,GAAGC,GAAG,GAAGR,YAAY,CAAA;AAC9B,GAAA;EAEA,IAAMc,MAAM,GAAGjB,KAAK,CAACkB,KAAK,CAACR,KAAK,EAAEC,GAAG,CAAC,CAAA;EAEtCL,SAAS,CAACG,OAAO,GAAGR,KAAK,CAAA;EAEzB,OAAO;AACHgB,IAAAA,MAAM,EAANA,MAAM;AACNb,IAAAA,QAAQ,EAARA,QAAAA;GACH,CAAA;AACL;;;;"}
|
package/es/index.css
CHANGED
@@ -944,11 +944,6 @@
|
|
944
944
|
.Table_styles_sl2dfn_bfybxxj__b8c1b9b6.Table_styles_sl2dfn_beus4rw__b8c1b9b6{--plasma-button-color:var(--on-dark-text-primary);--plasma-button-value-color:var(--on-dark-text-secondary);--plasma-button-background-color:var(--surface-accent);--plasma-button-background-color-hover:var(--surface-accent-hover);--plasma-button-background-color-active:var(--surface-accent-active);}
|
945
945
|
.Table_styles_sl2dfn_l1ql6jvb__b8c1b9b6{--plasma-link-button-color:var(--text-primary);--plasma-link-button-background-color:var(--surface-transparent-clear);--plasma-link-button-color-hover:var(--text-primary-hover);--plasma-link-button-color-active:var(--text-primary-active);--plasma-link-button-focus-color:var(--surface-accent);--plasma-link-button-font-family:var(--plasma-table-link-button-font-family);--plasma-link-button-font-size:var(--plasma-table-link-button-font-size);--plasma-link-button-font-style:var(--plasma-table-link-button-font-style);--plasma-link-button-font-weight:var(--plasma-table-link-button-font-weight);--plasma-link-button-letter-spacing:var(--plasma-table-link-button-letter-spacing);--plasma-link-button-line-height:var(--plasma-table-link-button-line-height);}
|
946
946
|
|
947
|
-
.List_styles_9yg2yl_bmg9h6q__9d5ed4ad{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-list-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;width:100%;list-style-type:none;padding:0;margin:0;}
|
948
|
-
|
949
|
-
.ListItem_styles_1eo5k14_c15dpad4__135d0b75{--plasma-cell-width:100%;--plasma-cell-padding:0rem;--plasma-cell-padding-left-content:0rem;--plasma-cell-padding-content:0rem;--plasma-cell-padding-right-content:0rem;--plasma-cell-textbox-gap:0rem;--plasma-cell-gap:var(--plasma-list-item-gap);--plasma-cell-color:var(--plasma-list-item-color);--plasma-cell-background-color:transparent;}
|
950
|
-
.ListItem_styles_1eo5k14_s17e6by7__135d0b75{padding:calc(var(--plasma-list-item-padding-top) - var(--plasma-list-item-variant-difference)) var(--plasma-list-item-padding-right) calc(var(--plasma-list-item-padding-bottom) - var(--plasma-list-item-variant-difference)) var(--plasma-list-item-padding-left);border-radius:var(--plasma-list-item-border-radius);background:var(--plasma-list-item-background);border:var(--plasma-list-item-border-width) solid var(--plasma-list-item-border-color);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--plasma-list-item-color);font-size:var(--plasma-list-item-font-size);font-weight:var(--plasma-list-item-font-weight);font-family:var(--plasma-list-item-font-family);font-style:var(--plasma-list-item-font-style);line-height:var(--plasma-list-item-line-height);-webkit-letter-spacing:var(--plasma-list-item-letter-spacing);-moz-letter-spacing:var(--plasma-list-item-letter-spacing);-ms-letter-spacing:var(--plasma-list-item-letter-spacing);letter-spacing:var(--plasma-list-item-letter-spacing);}.ListItem_styles_1eo5k14_s17e6by7__135d0b75:hover{background:var(--plasma-list-item-background-hover);border-color:var(--plasma-list-item-border-color-hover);color:var(--plasma-list-item-color-hover);}.ListItem_styles_1eo5k14_s17e6by7__135d0b75[disabled]{cursor:not-allowed;opacity:var(--plasma-list-disabled-opacity);}
|
951
|
-
|
952
947
|
.base_1bvd5n_b1o5hlxs__d4f41253{color:var(--plasma-link-button-color);background:var(--plasma-link-button-background-color);}.base_1bvd5n_b1o5hlxs__d4f41253:hover{color:var(--plasma-link-button-color-hover,var(--plasma-link-button-color));}.base_1bvd5n_b1o5hlxs__d4f41253:active{color:var(--plasma-link-button-color-active,var(--plasma-link-button-color));}
|
953
948
|
|
954
949
|
.base_1kptpb7_b68r2q3__ff53e21b{height:var(--plasma-link-button-height);padding:var(--plasma-link-button-padding);font-family:var(--plasma-link-button-font-family);font-size:var(--plasma-link-button-font-size);font-style:var(--plasma-link-button-font-style);font-weight:var(--plasma-link-button-font-weight);-webkit-letter-spacing:var(--plasma-link-button-letter-spacing);-moz-letter-spacing:var(--plasma-link-button-letter-spacing);-ms-letter-spacing:var(--plasma-link-button-letter-spacing);letter-spacing:var(--plasma-link-button-letter-spacing);line-height:var(--plasma-link-button-line-height);}
|
@@ -974,3 +969,9 @@
|
|
974
969
|
.Carousel_styles_zmchjj_c1c6iuz8__ccd8212a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding-left:var(--c1c6iuz8-0);padding-right:var(--c1c6iuz8-1);}.Carousel_styles_zmchjj_cmeqer1__ccd8212a .Carousel_styles_zmchjj_c1c6iuz8__ccd8212a{padding-right:var(--c1c6iuz8-2);}
|
975
970
|
|
976
971
|
.CarouselItem_cqjszm_s13at6mi__7ff91d05{-webkit-scroll-snap-align:var(--s13at6mi-0);-moz-scroll-snap-align:var(--s13at6mi-0);-ms-scroll-snap-align:var(--s13at6mi-0);scroll-snap-align:var(--s13at6mi-0);-webkit-scroll-snap-stop:var(--s13at6mi-1);-moz-scroll-snap-stop:var(--s13at6mi-1);-ms-scroll-snap-stop:var(--s13at6mi-1);scroll-snap-stop:var(--s13at6mi-1);}
|
972
|
+
|
973
|
+
.PaginationDots_fm2ha5_dut2ldg__db2a2205{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;padding:0;list-style:none;}
|
974
|
+
|
975
|
+
|
976
|
+
.PaginationDot_baul9c_d1mcs0w2__b1eb09b2{width:var(--d1mcs0w2-0);height:0.375rem;border-radius:1rem;background:var(--d1mcs0w2-1);-webkit-transition:width 0.1s ease-in-out,background 0.3s ease-in-out;transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;}.PaginationDot_baul9c_d1mcs0w2__b1eb09b2 + .PaginationDot_baul9c_d1mcs0w2__b1eb09b2{margin-left:0.375rem;}.PaginationDot_baul9c_d1mcs0w2__b1eb09b2:focus{outline:0 none;}
|
977
|
+
.PaginationDot_baul9c_poypaki__b1eb09b2.PaginationDot_baul9c_d1mcs0w2__b1eb09b2{cursor:pointer;background:var(--poypaki-0);}.PaginationDot_baul9c_poypaki__b1eb09b2.PaginationDot_baul9c_d1mcs0w2__b1eb09b2:hover{background:var(--text-accent);}
|
package/es/index.js
CHANGED
@@ -225,9 +225,6 @@ export { noteConfig, noteRoot } from './components/Note/Note.js';
|
|
225
225
|
export { classes as noteClasses, tokens as noteTokens } from './components/Note/Note.tokens.js';
|
226
226
|
export { tableConfig, tableRoot } from './components/Table/Table.js';
|
227
227
|
export { tableTokens } from './components/Table/Table.tokens.js';
|
228
|
-
export { listConfig, listRoot } from './components/List/List.js';
|
229
|
-
export { ListItem } from './components/List/ui/ListItem.js';
|
230
|
-
export { classes as listClasses, tokens as listTokens } from './components/List/List.tokens.js';
|
231
228
|
export { linkButtonConfig, linkButtonRoot } from './components/LinkButton/LinkButton.js';
|
232
229
|
export { tokens as linkButtonTokens } from './components/LinkButton/LinkButton.tokens.js';
|
233
230
|
export { composeNumberFormat } from './components/NumberFormat/NumberFormat.js';
|
@@ -236,4 +233,7 @@ export { tokens as toastNewTokens } from './components/Toast/ToastNew/ToastNew.t
|
|
236
233
|
export { carouselConfig, carouselRoot } from './components/Carousel/Carousel.js';
|
237
234
|
export { CarouselGridWrapper } from './components/Carousel/Carousel.styles.js';
|
238
235
|
export { CarouselItem } from './components/Carousel/CarouselItem.js';
|
236
|
+
export { SmartPaginationDots } from './components/PaginationDots/SmartPaginationDots.js';
|
237
|
+
export { PaginationDots } from './components/PaginationDots/PaginationDots.js';
|
238
|
+
export { PaginationDot } from './components/PaginationDots/PaginationDot.js';
|
239
239
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.325.0-canary.
|
3
|
+
"version": "0.325.0-canary.1970.15211531960.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -137,5 +137,5 @@
|
|
137
137
|
"sideEffects": [
|
138
138
|
"*.css"
|
139
139
|
],
|
140
|
-
"gitHead": "
|
140
|
+
"gitHead": "05dc1e0c188840ec9b8af81cd4edfe60694fc108"
|
141
141
|
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.PaginationDot = exports.DotBase = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
9
|
+
/**
|
10
|
+
* Элемент пагинации точками.
|
11
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
12
|
+
*/
|
13
|
+
var DotBase = exports.DotBase = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
14
|
+
componentId: "plasma-new-hope__sc-1lu8gfj-0"
|
15
|
+
})(["width:", ";height:0.375rem;border-radius:1rem;background:", ";transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;& + &{margin-left:0.375rem;}&:focus{outline:0 none;}"], function (_ref) {
|
16
|
+
var isActive = _ref.isActive;
|
17
|
+
return isActive ? '1.75rem' : '0.375rem';
|
18
|
+
}, function (_ref2) {
|
19
|
+
var isActive = _ref2.isActive;
|
20
|
+
return isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)';
|
21
|
+
});
|
22
|
+
|
23
|
+
/**
|
24
|
+
* Элемент пагинации точками.
|
25
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
26
|
+
* @deprecated
|
27
|
+
*/
|
28
|
+
var PaginationDot = exports.PaginationDot = /*#__PURE__*/(0, _styledComponents["default"])(DotBase).withConfig({
|
29
|
+
componentId: "plasma-new-hope__sc-1lu8gfj-1"
|
30
|
+
})(["cursor:pointer;background:", ";&:hover{background:var(--text-accent);}"], function (_ref3) {
|
31
|
+
var isActive = _ref3.isActive;
|
32
|
+
return isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)';
|
33
|
+
});
|
@@ -0,0 +1,24 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.PaginationDots = exports.DotsBase = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
9
|
+
/**
|
10
|
+
* Оборачивающий компонент для пагинации точками.
|
11
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
12
|
+
*/
|
13
|
+
var DotsBase = exports.DotsBase = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
|
14
|
+
componentId: "plasma-new-hope__sc-1ritf0l-0"
|
15
|
+
})(["display:flex;flex-wrap:wrap;align-self:center;align-items:center;margin:0;padding:0;list-style:none;"]);
|
16
|
+
|
17
|
+
/**
|
18
|
+
* Оборачивающий компонент для пагинации точками.
|
19
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
20
|
+
* @deprecated
|
21
|
+
*/
|
22
|
+
var PaginationDots = exports.PaginationDots = /*#__PURE__*/(0, _styledComponents["default"])(DotsBase).withConfig({
|
23
|
+
componentId: "plasma-new-hope__sc-1ritf0l-1"
|
24
|
+
})([""]);
|
@@ -0,0 +1,43 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.SmartPaginationDots = void 0;
|
7
|
+
var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
|
8
|
+
var _usePaginationDots2 = /*#__PURE__*/require("./usePaginationDots");
|
9
|
+
var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
|
10
|
+
var _PaginationDot = /*#__PURE__*/require("./PaginationDot");
|
11
|
+
var _excluded = ["items", "index", "visibleItems", "onIndexChange"];
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
13
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
14
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
15
|
+
/**
|
16
|
+
* Компонент для отображения точек пагинации
|
17
|
+
* с возможностью ограничения количества видимых элементов.
|
18
|
+
* @deprecated
|
19
|
+
*/
|
20
|
+
var SmartPaginationDots = exports.SmartPaginationDots = function SmartPaginationDots(_ref) {
|
21
|
+
var items = _ref.items,
|
22
|
+
index = _ref.index,
|
23
|
+
visibleItems = _ref.visibleItems,
|
24
|
+
onIndexChange = _ref.onIndexChange,
|
25
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
26
|
+
var _usePaginationDots = (0, _usePaginationDots2.usePaginationDots)({
|
27
|
+
items: items,
|
28
|
+
index: index,
|
29
|
+
visibleItems: visibleItems
|
30
|
+
}),
|
31
|
+
sliced = _usePaginationDots.sliced,
|
32
|
+
activeId = _usePaginationDots.activeId;
|
33
|
+
return /*#__PURE__*/_react["default"].createElement(_PaginationDots.PaginationDots, rest, sliced.map(function (_ref2, i) {
|
34
|
+
var id = _ref2.id;
|
35
|
+
return /*#__PURE__*/_react["default"].createElement(_PaginationDot.PaginationDot, {
|
36
|
+
key: "item:".concat(i),
|
37
|
+
isActive: id === activeId,
|
38
|
+
onClick: function onClick() {
|
39
|
+
return onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(i);
|
40
|
+
}
|
41
|
+
});
|
42
|
+
}));
|
43
|
+
};
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "PaginationDot", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _PaginationDot.PaginationDot;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "PaginationDots", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _PaginationDots.PaginationDots;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
Object.defineProperty(exports, "SmartPaginationDots", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _SmartPaginationDots.SmartPaginationDots;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
var _SmartPaginationDots = /*#__PURE__*/require("./SmartPaginationDots");
|
25
|
+
var _PaginationDots = /*#__PURE__*/require("./PaginationDots");
|
26
|
+
var _PaginationDot = /*#__PURE__*/require("./PaginationDot");
|
@@ -0,0 +1,38 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.usePaginationDots = void 0;
|
7
|
+
var _react = /*#__PURE__*/require("react");
|
8
|
+
var usePaginationDots = exports.usePaginationDots = function usePaginationDots(_ref) {
|
9
|
+
var items = _ref.items,
|
10
|
+
index = _ref.index,
|
11
|
+
_ref$visibleItems = _ref.visibleItems,
|
12
|
+
visibleItems = _ref$visibleItems === void 0 ? 7 : _ref$visibleItems;
|
13
|
+
var activeId = items[index].id;
|
14
|
+
var prevIndex = (0, _react.useRef)(null);
|
15
|
+
var direction = 0;
|
16
|
+
if (prevIndex.current !== null) {
|
17
|
+
direction = index > prevIndex.current ? 1 : -1;
|
18
|
+
}
|
19
|
+
var start;
|
20
|
+
var end;
|
21
|
+
if (direction === 1) {
|
22
|
+
end = Math.min(Math.max(index + 2, visibleItems), items.length);
|
23
|
+
start = Math.max(end - visibleItems, 0);
|
24
|
+
} else if (direction === -1) {
|
25
|
+
start = Math.min(Math.max(index - 1, 0), items.length - visibleItems);
|
26
|
+
end = start + visibleItems;
|
27
|
+
} else {
|
28
|
+
start = Math.max(index - Math.floor(visibleItems / 2), 0);
|
29
|
+
end = Math.min(start + visibleItems, items.length);
|
30
|
+
start = end - visibleItems;
|
31
|
+
}
|
32
|
+
var sliced = items.slice(start, end);
|
33
|
+
prevIndex.current = index;
|
34
|
+
return {
|
35
|
+
sliced: sliced,
|
36
|
+
activeId: activeId
|
37
|
+
};
|
38
|
+
};
|
@@ -784,17 +784,6 @@ Object.keys(_Table).forEach(function (key) {
|
|
784
784
|
}
|
785
785
|
});
|
786
786
|
});
|
787
|
-
var _List = /*#__PURE__*/require("./components/List");
|
788
|
-
Object.keys(_List).forEach(function (key) {
|
789
|
-
if (key === "default" || key === "__esModule") return;
|
790
|
-
if (key in exports && exports[key] === _List[key]) return;
|
791
|
-
Object.defineProperty(exports, key, {
|
792
|
-
enumerable: true,
|
793
|
-
get: function get() {
|
794
|
-
return _List[key];
|
795
|
-
}
|
796
|
-
});
|
797
|
-
});
|
798
787
|
var _LinkButton = /*#__PURE__*/require("./components/LinkButton");
|
799
788
|
Object.keys(_LinkButton).forEach(function (key) {
|
800
789
|
if (key === "default" || key === "__esModule") return;
|
@@ -838,4 +827,15 @@ Object.keys(_Carousel).forEach(function (key) {
|
|
838
827
|
return _Carousel[key];
|
839
828
|
}
|
840
829
|
});
|
830
|
+
});
|
831
|
+
var _PaginationDots = /*#__PURE__*/require("./components/PaginationDots");
|
832
|
+
Object.keys(_PaginationDots).forEach(function (key) {
|
833
|
+
if (key === "default" || key === "__esModule") return;
|
834
|
+
if (key in exports && exports[key] === _PaginationDots[key]) return;
|
835
|
+
Object.defineProperty(exports, key, {
|
836
|
+
enumerable: true,
|
837
|
+
get: function get() {
|
838
|
+
return _PaginationDots[key];
|
839
|
+
}
|
840
|
+
});
|
841
841
|
});
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
/**
|
3
|
+
* Элемент пагинации точками.
|
4
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
5
|
+
*/
|
6
|
+
export var DotBase = /*#__PURE__*/styled.li.withConfig({
|
7
|
+
componentId: "plasma-new-hope__sc-1lu8gfj-0"
|
8
|
+
})(["width:", ";height:0.375rem;border-radius:1rem;background:", ";transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;& + &{margin-left:0.375rem;}&:focus{outline:0 none;}"], function (_ref) {
|
9
|
+
var isActive = _ref.isActive;
|
10
|
+
return isActive ? '1.75rem' : '0.375rem';
|
11
|
+
}, function (_ref2) {
|
12
|
+
var isActive = _ref2.isActive;
|
13
|
+
return isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)';
|
14
|
+
});
|
15
|
+
|
16
|
+
/**
|
17
|
+
* Элемент пагинации точками.
|
18
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
19
|
+
* @deprecated
|
20
|
+
*/
|
21
|
+
export var PaginationDot = /*#__PURE__*/styled(DotBase).withConfig({
|
22
|
+
componentId: "plasma-new-hope__sc-1lu8gfj-1"
|
23
|
+
})(["cursor:pointer;background:", ";&:hover{background:var(--text-accent);}"], function (_ref3) {
|
24
|
+
var isActive = _ref3.isActive;
|
25
|
+
return isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)';
|
26
|
+
});
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Оборачивающий компонент для пагинации точками.
|
5
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
6
|
+
*/
|
7
|
+
export var DotsBase = /*#__PURE__*/styled.ul.withConfig({
|
8
|
+
componentId: "plasma-new-hope__sc-1ritf0l-0"
|
9
|
+
})(["display:flex;flex-wrap:wrap;align-self:center;align-items:center;margin:0;padding:0;list-style:none;"]);
|
10
|
+
|
11
|
+
/**
|
12
|
+
* Оборачивающий компонент для пагинации точками.
|
13
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
14
|
+
* @deprecated
|
15
|
+
*/
|
16
|
+
export var PaginationDots = /*#__PURE__*/styled(DotsBase).withConfig({
|
17
|
+
componentId: "plasma-new-hope__sc-1ritf0l-1"
|
18
|
+
})([""]);
|