@douyinfe/semi-foundation 2.27.1 → 2.28.0-alpha.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/base/foundation.ts +2 -2
- package/lib/cjs/base/foundation.d.ts +2 -2
- package/lib/cjs/modal/modalFoundation.d.ts +4 -2
- package/lib/cjs/modal/modalFoundation.js +44 -2
- package/lib/cjs/toast/toast.css +12 -0
- package/lib/cjs/toast/toast.scss +12 -0
- package/lib/cjs/toast/variables.scss +8 -0
- package/lib/es/base/foundation.d.ts +2 -2
- package/lib/es/modal/modalFoundation.d.ts +4 -2
- package/lib/es/modal/modalFoundation.js +43 -2
- package/lib/es/toast/toast.css +12 -0
- package/lib/es/toast/toast.scss +12 -0
- package/lib/es/toast/variables.scss +8 -0
- package/modal/modalFoundation.ts +26 -5
- package/package.json +2 -2
- package/toast/toast.scss +12 -0
- package/toast/variables.scss +8 -0
package/base/foundation.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
|
|
|
16
16
|
getProps(): P;
|
|
17
17
|
getState(key: string): any;
|
|
18
18
|
getStates(): S;
|
|
19
|
-
setState(s: Pick<S,
|
|
19
|
+
setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
|
|
20
20
|
getCache(c: string): any;
|
|
21
21
|
getCaches(): any;
|
|
22
22
|
setCache(key: any, value: any): void;
|
|
@@ -88,7 +88,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
|
|
|
88
88
|
return this._adapter.getStates();
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
setState(states: S, cb?: (...args: any) => void) {
|
|
91
|
+
setState<K extends keyof S>(states: Pick<S, K>, cb?: (...args: any) => void) {
|
|
92
92
|
return this._adapter.setState({ ...states }, cb);
|
|
93
93
|
}
|
|
94
94
|
|
|
@@ -11,7 +11,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
|
|
|
11
11
|
getProps(): P;
|
|
12
12
|
getState(key: string): any;
|
|
13
13
|
getStates(): S;
|
|
14
|
-
setState(s: Pick<S,
|
|
14
|
+
setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
|
|
15
15
|
getCache(c: string): any;
|
|
16
16
|
getCaches(): any;
|
|
17
17
|
setCache(key: any, value: any): void;
|
|
@@ -45,7 +45,7 @@ declare class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record
|
|
|
45
45
|
getProps(): any;
|
|
46
46
|
getState(key: string): any;
|
|
47
47
|
getStates(): any;
|
|
48
|
-
setState(states: S, cb?: (...args: any) => void): void;
|
|
48
|
+
setState<K extends keyof S>(states: Pick<S, K>, cb?: (...args: any) => void): void;
|
|
49
49
|
getContext(key: string): any;
|
|
50
50
|
getContexts(): any;
|
|
51
51
|
getCaches(): any;
|
|
@@ -4,8 +4,8 @@ export declare type Size = 'small' | 'medium' | 'large' | 'full-width';
|
|
|
4
4
|
export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
|
|
5
5
|
disabledBodyScroll: () => void;
|
|
6
6
|
enabledBodyScroll: () => void;
|
|
7
|
-
notifyCancel: (e: any) => void
|
|
8
|
-
notifyOk: (e: any) => void
|
|
7
|
+
notifyCancel: (e: any) => void | Promise<any>;
|
|
8
|
+
notifyOk: (e: any) => void | Promise<any>;
|
|
9
9
|
notifyClose: () => void;
|
|
10
10
|
toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
|
|
11
11
|
notifyFullScreen: (isFullScreen: boolean) => void;
|
|
@@ -55,6 +55,8 @@ export interface ModalProps {
|
|
|
55
55
|
export interface ModalState {
|
|
56
56
|
displayNone: boolean;
|
|
57
57
|
isFullScreen: boolean;
|
|
58
|
+
onOKReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
|
|
59
|
+
onCancelReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
|
|
58
60
|
}
|
|
59
61
|
export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
|
|
60
62
|
constructor(adapter: ModalAdapter);
|
|
@@ -7,6 +7,8 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _foundation = _interopRequireDefault(require("../base/foundation"));
|
|
9
9
|
|
|
10
|
+
var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
|
|
11
|
+
|
|
10
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
13
|
|
|
12
14
|
class ModalFoundation extends _foundation.default {
|
|
@@ -25,11 +27,51 @@ class ModalFoundation extends _foundation.default {
|
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
handleCancel(e) {
|
|
28
|
-
|
|
30
|
+
var _a;
|
|
31
|
+
|
|
32
|
+
const result = this._adapter.notifyCancel(e);
|
|
33
|
+
|
|
34
|
+
if ((0, _isPromise.default)(result)) {
|
|
35
|
+
this._adapter.setState({
|
|
36
|
+
onCancelReturnPromiseStatus: "pending"
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
(_a = result === null || result === void 0 ? void 0 : result.then(() => {
|
|
40
|
+
this._adapter.setState({
|
|
41
|
+
onCancelReturnPromiseStatus: "fulfilled"
|
|
42
|
+
});
|
|
43
|
+
})) === null || _a === void 0 ? void 0 : _a.catch(e => {
|
|
44
|
+
this._adapter.setState({
|
|
45
|
+
onCancelReturnPromiseStatus: "rejected"
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
throw e;
|
|
49
|
+
});
|
|
50
|
+
}
|
|
29
51
|
}
|
|
30
52
|
|
|
31
53
|
handleOk(e) {
|
|
32
|
-
|
|
54
|
+
var _a;
|
|
55
|
+
|
|
56
|
+
const result = this._adapter.notifyOk(e);
|
|
57
|
+
|
|
58
|
+
if ((0, _isPromise.default)(result)) {
|
|
59
|
+
this._adapter.setState({
|
|
60
|
+
onOKReturnPromiseStatus: "pending"
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
(_a = result === null || result === void 0 ? void 0 : result.then(() => {
|
|
64
|
+
this._adapter.setState({
|
|
65
|
+
onOKReturnPromiseStatus: "fulfilled"
|
|
66
|
+
});
|
|
67
|
+
})) === null || _a === void 0 ? void 0 : _a.catch(e => {
|
|
68
|
+
this._adapter.setState({
|
|
69
|
+
onOKReturnPromiseStatus: "rejected"
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
throw e;
|
|
73
|
+
});
|
|
74
|
+
}
|
|
33
75
|
}
|
|
34
76
|
|
|
35
77
|
beforeShow() {
|
package/lib/cjs/toast/toast.css
CHANGED
|
@@ -41,18 +41,30 @@
|
|
|
41
41
|
background-color: var(--semi-color-warning-light-default);
|
|
42
42
|
border: 1px solid var(--semi-color-warning);
|
|
43
43
|
}
|
|
44
|
+
.semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
|
|
45
|
+
color: var(--semi-color-warning);
|
|
46
|
+
}
|
|
44
47
|
.semi-toast-light.semi-toast-success .semi-toast-content {
|
|
45
48
|
background-color: var(--semi-color-success-light-default);
|
|
46
49
|
border: 1px solid var(--semi-color-success);
|
|
47
50
|
}
|
|
51
|
+
.semi-toast-light.semi-toast-success .semi-toast-icon-success {
|
|
52
|
+
color: var(--semi-color-success);
|
|
53
|
+
}
|
|
48
54
|
.semi-toast-light.semi-toast-info .semi-toast-content {
|
|
49
55
|
background-color: var(--semi-color-info-light-default);
|
|
50
56
|
border: 1px solid var(--semi-color-info);
|
|
51
57
|
}
|
|
58
|
+
.semi-toast-light.semi-toast-info .semi-toast-icon-info {
|
|
59
|
+
color: var(--semi-color-info);
|
|
60
|
+
}
|
|
52
61
|
.semi-toast-light.semi-toast-error .semi-toast-content {
|
|
53
62
|
background-color: var(--semi-color-danger-light-default);
|
|
54
63
|
border: 1px solid var(--semi-color-danger);
|
|
55
64
|
}
|
|
65
|
+
.semi-toast-light.semi-toast-error .semi-toast-icon-error {
|
|
66
|
+
color: var(--semi-color-danger);
|
|
67
|
+
}
|
|
56
68
|
.semi-toast .semi-toast-icon-warning {
|
|
57
69
|
color: var(--semi-color-warning);
|
|
58
70
|
}
|
package/lib/cjs/toast/toast.scss
CHANGED
|
@@ -48,6 +48,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
48
48
|
background-color: $color-toast_warning_light-bg;
|
|
49
49
|
border: $width-toast_light-border solid $color-toast_warning_light-border;
|
|
50
50
|
}
|
|
51
|
+
.#{$icon}-warning {
|
|
52
|
+
color: $color-toast_warning_light-icon;
|
|
53
|
+
}
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
&.#{$module}-success {
|
|
@@ -55,6 +58,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
55
58
|
background-color: $color-toast_success_light-bg;
|
|
56
59
|
border: $width-toast_light-border solid $color-toast_success_light-border;
|
|
57
60
|
}
|
|
61
|
+
.#{$icon}-success {
|
|
62
|
+
color: $color-toast_success_light-icon;
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
|
|
60
66
|
&.#{$module}-info {
|
|
@@ -62,6 +68,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
62
68
|
background-color: $color-toast_info_light-bg;
|
|
63
69
|
border: $width-toast_light-border solid $color-toast_info_light-border;
|
|
64
70
|
}
|
|
71
|
+
.#{$icon}-info {
|
|
72
|
+
color: $color-toast_info_light-icon;
|
|
73
|
+
}
|
|
65
74
|
}
|
|
66
75
|
|
|
67
76
|
&.#{$module}-error {
|
|
@@ -69,6 +78,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
69
78
|
background-color: $color-toast_danger_light-bg;
|
|
70
79
|
border: $width-toast_light-border solid $color-toast_danger_light-border;
|
|
71
80
|
}
|
|
81
|
+
.#{$icon}-error {
|
|
82
|
+
color: $color-toast_danger_light-icon;
|
|
83
|
+
}
|
|
72
84
|
}
|
|
73
85
|
}
|
|
74
86
|
|
|
@@ -5,13 +5,21 @@ $color-toast_warning-icon: var(--semi-color-warning); // 警告提示图标颜
|
|
|
5
5
|
$color-toast_success-icon: var(--semi-color-success); // 成功提示图标颜色
|
|
6
6
|
$color-toast_info-icon: var(--semi-color-info); // 通知提示图标颜色
|
|
7
7
|
$color-toast_danger-icon: var(--semi-color-danger); // 错误提示图标颜色
|
|
8
|
+
|
|
8
9
|
$color-toast_warning_light-bg: var(--semi-color-warning-light-default); // 多色样式 警告提示背景颜色
|
|
10
|
+
$color-toast_warning_light-icon: $color-toast_warning-icon; // 多色样式 警告提示图标颜色
|
|
9
11
|
$color-toast_warning_light-border: var(--semi-color-warning); // 多色样式 警告提示描边颜色
|
|
12
|
+
|
|
10
13
|
$color-toast_success_light-bg: var(--semi-color-success-light-default); // 多色样式 成功提示背景颜色
|
|
14
|
+
$color-toast_success_light-icon: $color-toast_success-icon; // 多色样式 成功提示图标颜色
|
|
11
15
|
$color-toast_success_light-border: var(--semi-color-success); // 多色样式 成功提示描边颜色
|
|
16
|
+
|
|
12
17
|
$color-toast_info_light-bg: var(--semi-color-info-light-default); // 多色样式 通知提示背景颜色
|
|
18
|
+
$color-toast_info_light-icon: $color-toast_info-icon; // 多色样式 通知提示图标颜色
|
|
13
19
|
$color-toast_info_light-border: var(--semi-color-info); // 多色样式 通知提示描边颜色
|
|
20
|
+
|
|
14
21
|
$color-toast_danger_light-bg: var(--semi-color-danger-light-default); // 多色样式 错误提示背景颜色
|
|
22
|
+
$color-toast_danger_light-icon: $color-toast_danger-icon; // 多色样式 错误提示图标颜色
|
|
15
23
|
$color-toast_danger_light-border: var(--semi-color-danger); // 多色样式 错误提示描边颜色
|
|
16
24
|
|
|
17
25
|
// Spacing
|
|
@@ -11,7 +11,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
|
|
|
11
11
|
getProps(): P;
|
|
12
12
|
getState(key: string): any;
|
|
13
13
|
getStates(): S;
|
|
14
|
-
setState(s: Pick<S,
|
|
14
|
+
setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
|
|
15
15
|
getCache(c: string): any;
|
|
16
16
|
getCaches(): any;
|
|
17
17
|
setCache(key: any, value: any): void;
|
|
@@ -45,7 +45,7 @@ declare class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record
|
|
|
45
45
|
getProps(): any;
|
|
46
46
|
getState(key: string): any;
|
|
47
47
|
getStates(): any;
|
|
48
|
-
setState(states: S, cb?: (...args: any) => void): void;
|
|
48
|
+
setState<K extends keyof S>(states: Pick<S, K>, cb?: (...args: any) => void): void;
|
|
49
49
|
getContext(key: string): any;
|
|
50
50
|
getContexts(): any;
|
|
51
51
|
getCaches(): any;
|
|
@@ -4,8 +4,8 @@ export declare type Size = 'small' | 'medium' | 'large' | 'full-width';
|
|
|
4
4
|
export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
|
|
5
5
|
disabledBodyScroll: () => void;
|
|
6
6
|
enabledBodyScroll: () => void;
|
|
7
|
-
notifyCancel: (e: any) => void
|
|
8
|
-
notifyOk: (e: any) => void
|
|
7
|
+
notifyCancel: (e: any) => void | Promise<any>;
|
|
8
|
+
notifyOk: (e: any) => void | Promise<any>;
|
|
9
9
|
notifyClose: () => void;
|
|
10
10
|
toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
|
|
11
11
|
notifyFullScreen: (isFullScreen: boolean) => void;
|
|
@@ -55,6 +55,8 @@ export interface ModalProps {
|
|
|
55
55
|
export interface ModalState {
|
|
56
56
|
displayNone: boolean;
|
|
57
57
|
isFullScreen: boolean;
|
|
58
|
+
onOKReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
|
|
59
|
+
onCancelReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
|
|
58
60
|
}
|
|
59
61
|
export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
|
|
60
62
|
constructor(adapter: ModalAdapter);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import BaseFoundation from '../base/foundation';
|
|
2
|
+
import isPromise from "../utils/isPromise";
|
|
2
3
|
export default class ModalFoundation extends BaseFoundation {
|
|
3
4
|
constructor(adapter) {
|
|
4
5
|
super(Object.assign({}, adapter)); // afterClose() {
|
|
@@ -15,11 +16,51 @@ export default class ModalFoundation extends BaseFoundation {
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
handleCancel(e) {
|
|
18
|
-
|
|
19
|
+
var _a;
|
|
20
|
+
|
|
21
|
+
const result = this._adapter.notifyCancel(e);
|
|
22
|
+
|
|
23
|
+
if (isPromise(result)) {
|
|
24
|
+
this._adapter.setState({
|
|
25
|
+
onCancelReturnPromiseStatus: "pending"
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
(_a = result === null || result === void 0 ? void 0 : result.then(() => {
|
|
29
|
+
this._adapter.setState({
|
|
30
|
+
onCancelReturnPromiseStatus: "fulfilled"
|
|
31
|
+
});
|
|
32
|
+
})) === null || _a === void 0 ? void 0 : _a.catch(e => {
|
|
33
|
+
this._adapter.setState({
|
|
34
|
+
onCancelReturnPromiseStatus: "rejected"
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
throw e;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
19
40
|
}
|
|
20
41
|
|
|
21
42
|
handleOk(e) {
|
|
22
|
-
|
|
43
|
+
var _a;
|
|
44
|
+
|
|
45
|
+
const result = this._adapter.notifyOk(e);
|
|
46
|
+
|
|
47
|
+
if (isPromise(result)) {
|
|
48
|
+
this._adapter.setState({
|
|
49
|
+
onOKReturnPromiseStatus: "pending"
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
(_a = result === null || result === void 0 ? void 0 : result.then(() => {
|
|
53
|
+
this._adapter.setState({
|
|
54
|
+
onOKReturnPromiseStatus: "fulfilled"
|
|
55
|
+
});
|
|
56
|
+
})) === null || _a === void 0 ? void 0 : _a.catch(e => {
|
|
57
|
+
this._adapter.setState({
|
|
58
|
+
onOKReturnPromiseStatus: "rejected"
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
throw e;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
23
64
|
}
|
|
24
65
|
|
|
25
66
|
beforeShow() {
|
package/lib/es/toast/toast.css
CHANGED
|
@@ -41,18 +41,30 @@
|
|
|
41
41
|
background-color: var(--semi-color-warning-light-default);
|
|
42
42
|
border: 1px solid var(--semi-color-warning);
|
|
43
43
|
}
|
|
44
|
+
.semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
|
|
45
|
+
color: var(--semi-color-warning);
|
|
46
|
+
}
|
|
44
47
|
.semi-toast-light.semi-toast-success .semi-toast-content {
|
|
45
48
|
background-color: var(--semi-color-success-light-default);
|
|
46
49
|
border: 1px solid var(--semi-color-success);
|
|
47
50
|
}
|
|
51
|
+
.semi-toast-light.semi-toast-success .semi-toast-icon-success {
|
|
52
|
+
color: var(--semi-color-success);
|
|
53
|
+
}
|
|
48
54
|
.semi-toast-light.semi-toast-info .semi-toast-content {
|
|
49
55
|
background-color: var(--semi-color-info-light-default);
|
|
50
56
|
border: 1px solid var(--semi-color-info);
|
|
51
57
|
}
|
|
58
|
+
.semi-toast-light.semi-toast-info .semi-toast-icon-info {
|
|
59
|
+
color: var(--semi-color-info);
|
|
60
|
+
}
|
|
52
61
|
.semi-toast-light.semi-toast-error .semi-toast-content {
|
|
53
62
|
background-color: var(--semi-color-danger-light-default);
|
|
54
63
|
border: 1px solid var(--semi-color-danger);
|
|
55
64
|
}
|
|
65
|
+
.semi-toast-light.semi-toast-error .semi-toast-icon-error {
|
|
66
|
+
color: var(--semi-color-danger);
|
|
67
|
+
}
|
|
56
68
|
.semi-toast .semi-toast-icon-warning {
|
|
57
69
|
color: var(--semi-color-warning);
|
|
58
70
|
}
|
package/lib/es/toast/toast.scss
CHANGED
|
@@ -48,6 +48,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
48
48
|
background-color: $color-toast_warning_light-bg;
|
|
49
49
|
border: $width-toast_light-border solid $color-toast_warning_light-border;
|
|
50
50
|
}
|
|
51
|
+
.#{$icon}-warning {
|
|
52
|
+
color: $color-toast_warning_light-icon;
|
|
53
|
+
}
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
&.#{$module}-success {
|
|
@@ -55,6 +58,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
55
58
|
background-color: $color-toast_success_light-bg;
|
|
56
59
|
border: $width-toast_light-border solid $color-toast_success_light-border;
|
|
57
60
|
}
|
|
61
|
+
.#{$icon}-success {
|
|
62
|
+
color: $color-toast_success_light-icon;
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
|
|
60
66
|
&.#{$module}-info {
|
|
@@ -62,6 +68,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
62
68
|
background-color: $color-toast_info_light-bg;
|
|
63
69
|
border: $width-toast_light-border solid $color-toast_info_light-border;
|
|
64
70
|
}
|
|
71
|
+
.#{$icon}-info {
|
|
72
|
+
color: $color-toast_info_light-icon;
|
|
73
|
+
}
|
|
65
74
|
}
|
|
66
75
|
|
|
67
76
|
&.#{$module}-error {
|
|
@@ -69,6 +78,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
69
78
|
background-color: $color-toast_danger_light-bg;
|
|
70
79
|
border: $width-toast_light-border solid $color-toast_danger_light-border;
|
|
71
80
|
}
|
|
81
|
+
.#{$icon}-error {
|
|
82
|
+
color: $color-toast_danger_light-icon;
|
|
83
|
+
}
|
|
72
84
|
}
|
|
73
85
|
}
|
|
74
86
|
|
|
@@ -5,13 +5,21 @@ $color-toast_warning-icon: var(--semi-color-warning); // 警告提示图标颜
|
|
|
5
5
|
$color-toast_success-icon: var(--semi-color-success); // 成功提示图标颜色
|
|
6
6
|
$color-toast_info-icon: var(--semi-color-info); // 通知提示图标颜色
|
|
7
7
|
$color-toast_danger-icon: var(--semi-color-danger); // 错误提示图标颜色
|
|
8
|
+
|
|
8
9
|
$color-toast_warning_light-bg: var(--semi-color-warning-light-default); // 多色样式 警告提示背景颜色
|
|
10
|
+
$color-toast_warning_light-icon: $color-toast_warning-icon; // 多色样式 警告提示图标颜色
|
|
9
11
|
$color-toast_warning_light-border: var(--semi-color-warning); // 多色样式 警告提示描边颜色
|
|
12
|
+
|
|
10
13
|
$color-toast_success_light-bg: var(--semi-color-success-light-default); // 多色样式 成功提示背景颜色
|
|
14
|
+
$color-toast_success_light-icon: $color-toast_success-icon; // 多色样式 成功提示图标颜色
|
|
11
15
|
$color-toast_success_light-border: var(--semi-color-success); // 多色样式 成功提示描边颜色
|
|
16
|
+
|
|
12
17
|
$color-toast_info_light-bg: var(--semi-color-info-light-default); // 多色样式 通知提示背景颜色
|
|
18
|
+
$color-toast_info_light-icon: $color-toast_info-icon; // 多色样式 通知提示图标颜色
|
|
13
19
|
$color-toast_info_light-border: var(--semi-color-info); // 多色样式 通知提示描边颜色
|
|
20
|
+
|
|
14
21
|
$color-toast_danger_light-bg: var(--semi-color-danger-light-default); // 多色样式 错误提示背景颜色
|
|
22
|
+
$color-toast_danger_light-icon: $color-toast_danger-icon; // 多色样式 错误提示图标颜色
|
|
15
23
|
$color-toast_danger_light-border: var(--semi-color-danger); // 多色样式 错误提示描边颜色
|
|
16
24
|
|
|
17
25
|
// Spacing
|
package/modal/modalFoundation.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import BaseFoundation, { DefaultAdapter } from '../base/foundation';
|
|
2
|
+
import isPromise from "../utils/isPromise";
|
|
2
3
|
|
|
3
4
|
export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
|
|
4
5
|
export type Size = 'small' | 'medium' | 'large' | 'full-width';
|
|
@@ -6,8 +7,8 @@ export type Size = 'small' | 'medium' | 'large' | 'full-width';
|
|
|
6
7
|
export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
|
|
7
8
|
disabledBodyScroll: () => void;
|
|
8
9
|
enabledBodyScroll: () => void;
|
|
9
|
-
notifyCancel: (e: any) => void
|
|
10
|
-
notifyOk: (e: any) => void
|
|
10
|
+
notifyCancel: (e: any) => void | Promise<any>;
|
|
11
|
+
notifyOk: (e: any) => void | Promise<any>;
|
|
11
12
|
notifyClose: () => void;
|
|
12
13
|
toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
|
|
13
14
|
notifyFullScreen: (isFullScreen: boolean) => void;
|
|
@@ -58,7 +59,9 @@ export interface ModalProps {
|
|
|
58
59
|
|
|
59
60
|
export interface ModalState {
|
|
60
61
|
displayNone: boolean;
|
|
61
|
-
isFullScreen: boolean
|
|
62
|
+
isFullScreen: boolean;
|
|
63
|
+
onOKReturnPromiseStatus?:"pending"|"fulfilled"|"rejected";
|
|
64
|
+
onCancelReturnPromiseStatus?:"pending"|"fulfilled"|"rejected"
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
|
|
@@ -74,11 +77,29 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
|
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
handleCancel(e: any) {
|
|
77
|
-
this._adapter.notifyCancel(e);
|
|
80
|
+
const result = this._adapter.notifyCancel(e);
|
|
81
|
+
if (isPromise(result)) {
|
|
82
|
+
this._adapter.setState({ onCancelReturnPromiseStatus: "pending" });
|
|
83
|
+
(result as Promise<any>)?.then(()=>{
|
|
84
|
+
this._adapter.setState({ onCancelReturnPromiseStatus: "fulfilled" });
|
|
85
|
+
})?.catch(e=>{
|
|
86
|
+
this._adapter.setState({ onCancelReturnPromiseStatus: "rejected" });
|
|
87
|
+
throw e;
|
|
88
|
+
});
|
|
89
|
+
}
|
|
78
90
|
}
|
|
79
91
|
|
|
80
92
|
handleOk(e: any) {
|
|
81
|
-
this._adapter.notifyOk(e);
|
|
93
|
+
const result = this._adapter.notifyOk(e);
|
|
94
|
+
if (isPromise(result)){
|
|
95
|
+
this._adapter.setState({ onOKReturnPromiseStatus: "pending" });
|
|
96
|
+
(result as Promise<any>)?.then(()=>{
|
|
97
|
+
this._adapter.setState({ onOKReturnPromiseStatus: "fulfilled" });
|
|
98
|
+
})?.catch(e=>{
|
|
99
|
+
this._adapter.setState({ onOKReturnPromiseStatus: "rejected" });
|
|
100
|
+
throw e;
|
|
101
|
+
});
|
|
102
|
+
}
|
|
82
103
|
}
|
|
83
104
|
|
|
84
105
|
beforeShow() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.28.0-alpha.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build:lib": "node ./scripts/compileLib.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"*.scss",
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "ee3933458b16abacd476c8ea1c28a245c9d85dc0",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/toast/toast.scss
CHANGED
|
@@ -48,6 +48,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
48
48
|
background-color: $color-toast_warning_light-bg;
|
|
49
49
|
border: $width-toast_light-border solid $color-toast_warning_light-border;
|
|
50
50
|
}
|
|
51
|
+
.#{$icon}-warning {
|
|
52
|
+
color: $color-toast_warning_light-icon;
|
|
53
|
+
}
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
&.#{$module}-success {
|
|
@@ -55,6 +58,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
55
58
|
background-color: $color-toast_success_light-bg;
|
|
56
59
|
border: $width-toast_light-border solid $color-toast_success_light-border;
|
|
57
60
|
}
|
|
61
|
+
.#{$icon}-success {
|
|
62
|
+
color: $color-toast_success_light-icon;
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
|
|
60
66
|
&.#{$module}-info {
|
|
@@ -62,6 +68,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
62
68
|
background-color: $color-toast_info_light-bg;
|
|
63
69
|
border: $width-toast_light-border solid $color-toast_info_light-border;
|
|
64
70
|
}
|
|
71
|
+
.#{$icon}-info {
|
|
72
|
+
color: $color-toast_info_light-icon;
|
|
73
|
+
}
|
|
65
74
|
}
|
|
66
75
|
|
|
67
76
|
&.#{$module}-error {
|
|
@@ -69,6 +78,9 @@ $icon: #{$prefix}-toast-icon;
|
|
|
69
78
|
background-color: $color-toast_danger_light-bg;
|
|
70
79
|
border: $width-toast_light-border solid $color-toast_danger_light-border;
|
|
71
80
|
}
|
|
81
|
+
.#{$icon}-error {
|
|
82
|
+
color: $color-toast_danger_light-icon;
|
|
83
|
+
}
|
|
72
84
|
}
|
|
73
85
|
}
|
|
74
86
|
|
package/toast/variables.scss
CHANGED
|
@@ -5,13 +5,21 @@ $color-toast_warning-icon: var(--semi-color-warning); // 警告提示图标颜
|
|
|
5
5
|
$color-toast_success-icon: var(--semi-color-success); // 成功提示图标颜色
|
|
6
6
|
$color-toast_info-icon: var(--semi-color-info); // 通知提示图标颜色
|
|
7
7
|
$color-toast_danger-icon: var(--semi-color-danger); // 错误提示图标颜色
|
|
8
|
+
|
|
8
9
|
$color-toast_warning_light-bg: var(--semi-color-warning-light-default); // 多色样式 警告提示背景颜色
|
|
10
|
+
$color-toast_warning_light-icon: $color-toast_warning-icon; // 多色样式 警告提示图标颜色
|
|
9
11
|
$color-toast_warning_light-border: var(--semi-color-warning); // 多色样式 警告提示描边颜色
|
|
12
|
+
|
|
10
13
|
$color-toast_success_light-bg: var(--semi-color-success-light-default); // 多色样式 成功提示背景颜色
|
|
14
|
+
$color-toast_success_light-icon: $color-toast_success-icon; // 多色样式 成功提示图标颜色
|
|
11
15
|
$color-toast_success_light-border: var(--semi-color-success); // 多色样式 成功提示描边颜色
|
|
16
|
+
|
|
12
17
|
$color-toast_info_light-bg: var(--semi-color-info-light-default); // 多色样式 通知提示背景颜色
|
|
18
|
+
$color-toast_info_light-icon: $color-toast_info-icon; // 多色样式 通知提示图标颜色
|
|
13
19
|
$color-toast_info_light-border: var(--semi-color-info); // 多色样式 通知提示描边颜色
|
|
20
|
+
|
|
14
21
|
$color-toast_danger_light-bg: var(--semi-color-danger-light-default); // 多色样式 错误提示背景颜色
|
|
22
|
+
$color-toast_danger_light-icon: $color-toast_danger-icon; // 多色样式 错误提示图标颜色
|
|
15
23
|
$color-toast_danger_light-border: var(--semi-color-danger); // 多色样式 错误提示描边颜色
|
|
16
24
|
|
|
17
25
|
// Spacing
|