@antscorp/antsomi-ui 1.3.5-beta.256 → 1.3.5-beta.258
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/es/components/atoms/Steps/Steps.d.ts +0 -1
- package/es/components/atoms/Steps/Steps.js +4 -4
- package/es/components/atoms/Steps/styled.d.ts +1 -4
- package/es/components/atoms/Steps/styled.js +31 -5
- package/es/models/ObjectTemplate.d.ts +2 -0
- package/es/models/ObjectTemplate.js +4 -0
- package/package.json +2 -2
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { StepsProps as AntdStepsProps, StepProps as AntdStepProps } from 'antd';
|
|
3
3
|
export type StepsProps = AntdStepsProps & {
|
|
4
4
|
saveHighestStep?: boolean;
|
|
5
|
-
iconSize?: number;
|
|
6
5
|
};
|
|
7
6
|
export type StepProps = AntdStepProps;
|
|
8
7
|
export declare const Steps: React.FC<StepsProps>;
|
|
@@ -15,7 +15,7 @@ import { isNumber } from 'lodash';
|
|
|
15
15
|
// Styled
|
|
16
16
|
import { SelectedIcon, StepsWrapper } from './styled';
|
|
17
17
|
export const Steps = memo(props => {
|
|
18
|
-
const { items, saveHighestStep = true,
|
|
18
|
+
const { items, saveHighestStep = true, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "className"]);
|
|
19
19
|
const { current, size = 'small' } = restOfProps;
|
|
20
20
|
const [highestStep, setHighestStep] = useState(0);
|
|
21
21
|
useEffect(() => {
|
|
@@ -38,14 +38,14 @@ export const Steps = memo(props => {
|
|
|
38
38
|
}
|
|
39
39
|
else {
|
|
40
40
|
status = 'finish';
|
|
41
|
-
icon = React.createElement(SelectedIcon,
|
|
41
|
+
icon = React.createElement(SelectedIcon, null, index + 1);
|
|
42
42
|
className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
return Object.assign({ status, icon, className }, item);
|
|
46
46
|
})
|
|
47
|
-
: items, [current, saveHighestStep, highestStep, items
|
|
47
|
+
: items, [current, saveHighestStep, highestStep, items]);
|
|
48
48
|
/** Check whether the user has reactivated the previous step or not */
|
|
49
49
|
const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
|
|
50
|
-
return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size:
|
|
50
|
+
return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
|
|
51
51
|
});
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
-
size: 'small' | 'default';
|
|
4
|
-
}, never>;
|
|
2
|
+
export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
3
|
export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
|
|
6
4
|
Step: typeof import("rc-steps").Step;
|
|
7
5
|
}, any, {
|
|
8
|
-
iconSize: number;
|
|
9
6
|
isReactivate: boolean;
|
|
10
7
|
highestStep: number;
|
|
11
8
|
}, never>;
|
|
@@ -3,28 +3,54 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { Steps } from 'antd';
|
|
4
4
|
// Constants
|
|
5
5
|
import { THEME } from '@antscorp/antsomi-ui/es/constants';
|
|
6
|
+
const STEP_SIZE = {
|
|
7
|
+
SMALL: 24,
|
|
8
|
+
DEFAULT: 32,
|
|
9
|
+
};
|
|
6
10
|
export const SelectedIcon = styled.div `
|
|
7
11
|
border: 1px solid #b8cfe6;
|
|
8
12
|
border-radius: 100%;
|
|
9
|
-
width: ${({ size }) => (size === 'small' ? 20 : 30)}px;
|
|
10
|
-
height: ${({ size }) => (size === 'small' ? 20 : 30)}px;
|
|
11
13
|
font-size: 14px;
|
|
12
14
|
color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
13
21
|
`;
|
|
14
22
|
export const StepsWrapper = styled(Steps) `
|
|
15
23
|
&.save-highest-step {
|
|
16
24
|
/** Steps Default */
|
|
17
25
|
&.antsomi-steps:not(.antsomi-steps-dot) {
|
|
26
|
+
&.antsomi-steps-small
|
|
27
|
+
.antsomi-steps-item
|
|
28
|
+
.antsomi-steps-item-container
|
|
29
|
+
.antsomi-steps-item-icon {
|
|
30
|
+
width: ${STEP_SIZE.SMALL}px;
|
|
31
|
+
height: ${STEP_SIZE.SMALL}px;
|
|
32
|
+
}
|
|
33
|
+
|
|
18
34
|
.antsomi-steps-item {
|
|
19
|
-
.antsomi-steps-item-container {
|
|
20
|
-
.antsomi-steps-item-icon {
|
|
21
|
-
box-sizing:
|
|
35
|
+
& > .antsomi-steps-item-container {
|
|
36
|
+
& > .antsomi-steps-item-icon {
|
|
37
|
+
box-sizing: border-box;
|
|
22
38
|
border-radius: 100%;
|
|
23
39
|
font-size: 14px;
|
|
24
40
|
font-weight: bold;
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
align-items: center;
|
|
44
|
+
width: ${STEP_SIZE.DEFAULT}px;
|
|
45
|
+
height: ${STEP_SIZE.DEFAULT}px;
|
|
25
46
|
|
|
26
47
|
.antsomi-steps-icon {
|
|
27
48
|
color: white;
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
align-items: center;
|
|
28
54
|
}
|
|
29
55
|
}
|
|
30
56
|
|
|
@@ -54,6 +54,7 @@ export declare class ObjectTemplate extends Model<TObjectTemplate> {
|
|
|
54
54
|
get goal(): number[] | undefined;
|
|
55
55
|
get channel(): number | undefined;
|
|
56
56
|
get shareAccess(): TShareAccess | undefined;
|
|
57
|
+
get deviceType(): number | undefined;
|
|
57
58
|
toJson(): {
|
|
58
59
|
id: string | number;
|
|
59
60
|
name: string;
|
|
@@ -79,5 +80,6 @@ export declare class ObjectTemplate extends Model<TObjectTemplate> {
|
|
|
79
80
|
goal: number[] | undefined;
|
|
80
81
|
channel: number | undefined;
|
|
81
82
|
shareAccess: TShareAccess | undefined;
|
|
83
|
+
deviceType: number | undefined;
|
|
82
84
|
};
|
|
83
85
|
}
|
|
@@ -76,6 +76,9 @@ export class ObjectTemplate extends Model {
|
|
|
76
76
|
get shareAccess() {
|
|
77
77
|
return this.model.share_access;
|
|
78
78
|
}
|
|
79
|
+
get deviceType() {
|
|
80
|
+
return this.model.device_type;
|
|
81
|
+
}
|
|
79
82
|
toJson() {
|
|
80
83
|
return {
|
|
81
84
|
id: this.id,
|
|
@@ -102,6 +105,7 @@ export class ObjectTemplate extends Model {
|
|
|
102
105
|
goal: this.goal,
|
|
103
106
|
channel: this.channel,
|
|
104
107
|
shareAccess: this.shareAccess,
|
|
108
|
+
deviceType: this.deviceType,
|
|
105
109
|
};
|
|
106
110
|
}
|
|
107
111
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antscorp/antsomi-ui",
|
|
3
|
-
"version": "1.3.5-beta.
|
|
3
|
+
"version": "1.3.5-beta.258",
|
|
4
4
|
"description": "An enterprise-class UI design language and React UI library.",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"dist/*",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"not op_mini all"
|
|
61
61
|
],
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@antscorp/icons": "^0.27.
|
|
63
|
+
"@antscorp/icons": "^0.27.22",
|
|
64
64
|
"@antscorp/image-editor": "1.0.2",
|
|
65
65
|
"@antscorp/processing-notification": "^1.0.3",
|
|
66
66
|
"@emotion/react": "^11.11.1",
|