@snack-uikit/counter 0.4.1 → 0.5.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/CHANGELOG.md +13 -1
- package/README.md +7 -7
- package/dist/components/Counter.d.ts +1 -6
- package/dist/components/Counter.js +2 -5
- package/dist/components/constants.d.ts +14 -14
- package/dist/components/constants.js +14 -17
- package/dist/components/types.d.ts +5 -0
- package/dist/components/types.js +1 -0
- package/dist/components/utils.d.ts +1 -1
- package/dist/components/utils.js +4 -4
- package/package.json +3 -3
- package/src/components/Counter.tsx +5 -8
- package/src/components/constants.ts +14 -14
- package/src/components/types.ts +7 -0
- package/src/components/utils.tsx +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 0.5.0 (2023-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### BREAKING CHANGES
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 0.4.1 (2023-12-06)
|
|
7
18
|
|
|
8
19
|
### Only dependencies have been changed
|
|
@@ -122,7 +133,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
122
133
|
|
|
123
134
|
## 0.2.6 (2023-06-23)
|
|
124
135
|
|
|
125
|
-
|
|
136
|
+
### Only dependencies have been changed
|
|
137
|
+
* [@snack-uikit/utils@3.2.0](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/utils/CHANGELOG.md)
|
|
126
138
|
|
|
127
139
|
|
|
128
140
|
|
package/README.md
CHANGED
|
@@ -8,17 +8,17 @@
|
|
|
8
8
|
## Example
|
|
9
9
|
|
|
10
10
|
```typescript jsx
|
|
11
|
-
import {Counter} from "@snack-uikit/counter";
|
|
11
|
+
import { Counter } from "@snack-uikit/counter";
|
|
12
12
|
|
|
13
13
|
<Counter
|
|
14
14
|
value={42}
|
|
15
|
-
size=
|
|
15
|
+
size='m'
|
|
16
16
|
/>
|
|
17
17
|
|
|
18
18
|
<Counter
|
|
19
19
|
value={101}
|
|
20
|
-
appearance=
|
|
21
|
-
variant=
|
|
20
|
+
appearance='critical'
|
|
21
|
+
variant='count-plus'
|
|
22
22
|
plusLimit={100}
|
|
23
23
|
/>
|
|
24
24
|
```
|
|
@@ -31,9 +31,9 @@ import {Counter} from "@snack-uikit/counter";
|
|
|
31
31
|
| name | type | default value | description |
|
|
32
32
|
|------|------|---------------|-------------|
|
|
33
33
|
| value* | `number` | - | Значение |
|
|
34
|
-
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"` |
|
|
35
|
-
| variant | enum Variant: `"count"`, `"count-plus"`, `"count-k"` |
|
|
36
|
-
| size | enum Size: `"s"`, `"m"` |
|
|
34
|
+
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"` | primary | Внешний вид |
|
|
35
|
+
| variant | enum Variant: `"count"`, `"count-plus"`, `"count-k"` | count | Вариант |
|
|
36
|
+
| size | enum Size: `"s"`, `"m"` | s | Размер |
|
|
37
37
|
| plusLimit | `number` | 10 | Порог сокращения значения в формат v+. Например `1500` -> `999+` для 1000 |
|
|
38
38
|
| className | `string` | - | CSS-класс |
|
|
39
39
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
2
|
-
import { Appearance, Size, Variant } from './
|
|
2
|
+
import { Appearance, Size, Variant } from './types';
|
|
3
3
|
export type CounterProps = WithSupportProps<{
|
|
4
4
|
/** Значение */
|
|
5
5
|
value: number;
|
|
@@ -16,8 +16,3 @@ export type CounterProps = WithSupportProps<{
|
|
|
16
16
|
}>;
|
|
17
17
|
/** Компонент счетчик */
|
|
18
18
|
export declare function Counter({ value, appearance, variant, size, plusLimit, className, ...rest }: CounterProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export declare namespace Counter {
|
|
20
|
-
var appearances: typeof Appearance;
|
|
21
|
-
var variants: typeof Variant;
|
|
22
|
-
var sizes: typeof Size;
|
|
23
|
-
}
|
|
@@ -12,15 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import cn from 'classnames';
|
|
14
14
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
15
|
-
import {
|
|
15
|
+
import { APPEARANCE, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
|
|
16
16
|
import classNames from './styles.module.css';
|
|
17
17
|
import { formatValue } from './utils';
|
|
18
18
|
/** Компонент счетчик */
|
|
19
19
|
export function Counter(_a) {
|
|
20
|
-
var { value, appearance =
|
|
20
|
+
var { value, appearance = APPEARANCE.Primary, variant = VARIANT.Count, size = SIZE.S, plusLimit = DEFAULT_PLUS_LIMIT, className } = _a, rest = __rest(_a, ["value", "appearance", "variant", "size", "plusLimit", "className"]);
|
|
21
21
|
const formattedValue = formatValue({ value, variant, plusLimit });
|
|
22
22
|
return (_jsx("div", Object.assign({ className: cn(classNames.counter, className) }, extractSupportProps(rest), { "data-size": size, "data-variant": variant, "data-appearance": appearance }, { children: formattedValue })));
|
|
23
23
|
}
|
|
24
|
-
Counter.appearances = Appearance;
|
|
25
|
-
Counter.variants = Variant;
|
|
26
|
-
Counter.sizes = Size;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
export declare
|
|
2
|
-
Primary
|
|
3
|
-
Neutral
|
|
4
|
-
Red
|
|
5
|
-
}
|
|
6
|
-
export declare
|
|
7
|
-
Count
|
|
8
|
-
CountPlus
|
|
9
|
-
CountK
|
|
10
|
-
}
|
|
11
|
-
export declare
|
|
12
|
-
S
|
|
13
|
-
M
|
|
14
|
-
}
|
|
1
|
+
export declare const APPEARANCE: {
|
|
2
|
+
readonly Primary: "primary";
|
|
3
|
+
readonly Neutral: "neutral";
|
|
4
|
+
readonly Red: "red";
|
|
5
|
+
};
|
|
6
|
+
export declare const VARIANT: {
|
|
7
|
+
readonly Count: "count";
|
|
8
|
+
readonly CountPlus: "count-plus";
|
|
9
|
+
readonly CountK: "count-k";
|
|
10
|
+
};
|
|
11
|
+
export declare const SIZE: {
|
|
12
|
+
readonly S: "s";
|
|
13
|
+
readonly M: "m";
|
|
14
|
+
};
|
|
15
15
|
export declare const DEFAULT_PLUS_LIMIT = 10;
|
|
16
16
|
export declare const DEFAULT_KEY_LIMIT = 1000;
|
|
17
17
|
export declare const DEFAULT_KEY_POSTFIX = "K";
|
|
@@ -1,20 +1,17 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
Size["S"] = "s";
|
|
16
|
-
Size["M"] = "m";
|
|
17
|
-
})(Size || (Size = {}));
|
|
1
|
+
export const APPEARANCE = {
|
|
2
|
+
Primary: 'primary',
|
|
3
|
+
Neutral: 'neutral',
|
|
4
|
+
Red: 'red',
|
|
5
|
+
};
|
|
6
|
+
export const VARIANT = {
|
|
7
|
+
Count: 'count',
|
|
8
|
+
CountPlus: 'count-plus',
|
|
9
|
+
CountK: 'count-k',
|
|
10
|
+
};
|
|
11
|
+
export const SIZE = {
|
|
12
|
+
S: 's',
|
|
13
|
+
M: 'm',
|
|
14
|
+
};
|
|
18
15
|
export const DEFAULT_PLUS_LIMIT = 10;
|
|
19
16
|
export const DEFAULT_KEY_LIMIT = 1000;
|
|
20
17
|
export const DEFAULT_KEY_POSTFIX = 'K';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/components/utils.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX,
|
|
2
|
+
import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX, VARIANT } from './constants';
|
|
3
3
|
import styles from './styles.module.css';
|
|
4
4
|
export function formatValue({ value, variant, plusLimit, }) {
|
|
5
|
-
if (variant ===
|
|
5
|
+
if (variant === VARIANT.Count) {
|
|
6
6
|
return value;
|
|
7
7
|
}
|
|
8
|
-
if (variant ===
|
|
8
|
+
if (variant === VARIANT.CountPlus) {
|
|
9
9
|
return value < plusLimit ? (value) : (_jsxs(_Fragment, { children: [plusLimit - 1, _jsx("span", Object.assign({ className: styles.plus }, { children: "+" }))] }));
|
|
10
10
|
}
|
|
11
|
-
if (variant ===
|
|
11
|
+
if (variant === VARIANT.CountK) {
|
|
12
12
|
return value < DEFAULT_KEY_LIMIT ? (value) : (_jsxs(_Fragment, { children: [Math.round(value / DEFAULT_KEY_LIMIT), _jsx("span", Object.assign({ className: styles.key }, { children: DEFAULT_KEY_POSTFIX }))] }));
|
|
13
13
|
}
|
|
14
14
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Counter",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.5.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/utils": "3.
|
|
35
|
+
"@snack-uikit/utils": "3.2.0",
|
|
36
36
|
"classnames": "2.3.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
|
|
39
39
|
}
|
|
@@ -2,8 +2,9 @@ import cn from 'classnames';
|
|
|
2
2
|
|
|
3
3
|
import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { APPEARANCE, DEFAULT_PLUS_LIMIT, SIZE, VARIANT } from './constants';
|
|
6
6
|
import classNames from './styles.module.scss';
|
|
7
|
+
import { Appearance, Size, Variant } from './types';
|
|
7
8
|
import { formatValue } from './utils';
|
|
8
9
|
|
|
9
10
|
export type CounterProps = WithSupportProps<{
|
|
@@ -24,9 +25,9 @@ export type CounterProps = WithSupportProps<{
|
|
|
24
25
|
/** Компонент счетчик */
|
|
25
26
|
export function Counter({
|
|
26
27
|
value,
|
|
27
|
-
appearance =
|
|
28
|
-
variant =
|
|
29
|
-
size =
|
|
28
|
+
appearance = APPEARANCE.Primary,
|
|
29
|
+
variant = VARIANT.Count,
|
|
30
|
+
size = SIZE.S,
|
|
30
31
|
plusLimit = DEFAULT_PLUS_LIMIT,
|
|
31
32
|
className,
|
|
32
33
|
...rest
|
|
@@ -45,7 +46,3 @@ export function Counter({
|
|
|
45
46
|
</div>
|
|
46
47
|
);
|
|
47
48
|
}
|
|
48
|
-
|
|
49
|
-
Counter.appearances = Appearance;
|
|
50
|
-
Counter.variants = Variant;
|
|
51
|
-
Counter.sizes = Size;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
export
|
|
2
|
-
Primary
|
|
3
|
-
Neutral
|
|
4
|
-
Red
|
|
5
|
-
}
|
|
1
|
+
export const APPEARANCE = {
|
|
2
|
+
Primary: 'primary',
|
|
3
|
+
Neutral: 'neutral',
|
|
4
|
+
Red: 'red',
|
|
5
|
+
} as const;
|
|
6
6
|
|
|
7
|
-
export
|
|
8
|
-
Count
|
|
9
|
-
CountPlus
|
|
10
|
-
CountK
|
|
11
|
-
}
|
|
7
|
+
export const VARIANT = {
|
|
8
|
+
Count: 'count',
|
|
9
|
+
CountPlus: 'count-plus',
|
|
10
|
+
CountK: 'count-k',
|
|
11
|
+
} as const;
|
|
12
12
|
|
|
13
|
-
export
|
|
14
|
-
S
|
|
15
|
-
M
|
|
16
|
-
}
|
|
13
|
+
export const SIZE = {
|
|
14
|
+
S: 's',
|
|
15
|
+
M: 'm',
|
|
16
|
+
} as const;
|
|
17
17
|
|
|
18
18
|
export const DEFAULT_PLUS_LIMIT = 10;
|
|
19
19
|
export const DEFAULT_KEY_LIMIT = 1000;
|
package/src/components/utils.tsx
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
-
import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX,
|
|
3
|
+
import { DEFAULT_KEY_LIMIT, DEFAULT_KEY_POSTFIX, VARIANT } from './constants';
|
|
4
4
|
import styles from './styles.module.scss';
|
|
5
|
+
import { Variant } from './types';
|
|
5
6
|
|
|
6
7
|
export function formatValue({
|
|
7
8
|
value,
|
|
@@ -12,11 +13,11 @@ export function formatValue({
|
|
|
12
13
|
variant: Variant;
|
|
13
14
|
plusLimit: number;
|
|
14
15
|
}): ReactNode {
|
|
15
|
-
if (variant ===
|
|
16
|
+
if (variant === VARIANT.Count) {
|
|
16
17
|
return value;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
|
-
if (variant ===
|
|
20
|
+
if (variant === VARIANT.CountPlus) {
|
|
20
21
|
return value < plusLimit ? (
|
|
21
22
|
value
|
|
22
23
|
) : (
|
|
@@ -27,7 +28,7 @@ export function formatValue({
|
|
|
27
28
|
);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
if (variant ===
|
|
31
|
+
if (variant === VARIANT.CountK) {
|
|
31
32
|
return value < DEFAULT_KEY_LIMIT ? (
|
|
32
33
|
value
|
|
33
34
|
) : (
|