Skip to content

Commit b6fdccf

Browse files
SunLxySunLxy
committed
refactor(notify):重构消息通知#845 
1 parent 5b47241 commit b6fdccf

File tree

6 files changed

+231
-105
lines changed

6 files changed

+231
-105
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
"watch:uiw": "lerna exec --scope uiw -- tsbb watch",
1717
"watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
1818
"watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
19-
"watch": "lerna exec --scope @uiw/react-popover -- tsbb watch",
19+
"watch": "lerna exec --scope @uiw/react-notify -- tsbb watch",
2020
"watch2": "lerna exec --scope @uiw/react-search-select -- tsbb watch",
21-
"watch:css": "lerna exec --scope @uiw/react-search-select -- compile-less -d src -o esm --watch",
21+
"watch:css": "lerna exec --scope @uiw/react-notify -- compile-less -d src -o esm --watch",
2222
"//-----------": "//-----------",
2323
"build": "npm run b:uiw && npm run b:css && npm run b:css:dist",
2424
"start": "lerna exec --scope website -- npm run start",

‎packages/react-notify/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@
4444
"react-dom": ">=18.0.0"
4545
},
4646
"dependencies": {
47+
"@uiw/react-modal": "^4.21.2",
48+
"@uiw/react-overlay": "^4.21.2",
4749
"@uiw/react-alert": "^4.21.2",
4850
"@uiw/react-button": "^4.21.2",
4951
"@uiw/react-icon": "^4.21.2",
5052
"@uiw/utils": "^4.21.2"
5153
}
52-
}
54+
}

‎packages/react-notify/src/Container.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
2-
import Alert, { AlertProps } from '@uiw/react-alert';
2+
import { AlertProps } from '@uiw/react-alert';
33
import { IProps } from '@uiw/utils';
44
import { NotificationCreateProps } from './index';
5-
5+
import { NotifyStyleAlertBase, NotifyGlobalStyle } from './style';
66
export type Placement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
7-
87
export interface ContainerProps extends IProps {
98
placement?: Placement;
109
}
@@ -73,14 +72,15 @@ export default class Container extends React.Component<ContainerProps, Container
7372
const { placement } = this.state;
7473
return (
7574
<React.Fragment>
75+
<NotifyGlobalStyle />
7676
{placement &&
7777
Object.keys(this.state.notifys[placement]).map((key) => {
7878
const { description, isOpen, ...alertProps } = this.state.notifys[placement][key];
7979
if (alertProps.type === 'open') {
8080
delete alertProps.type;
8181
}
8282
return (
83-
<Alert
83+
<NotifyStyleAlertBase
8484
className={prefixCls}
8585
key={key}
8686
useButton={false}

‎packages/react-notify/src/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
33
import { AlertProps } from '@uiw/react-alert';
44
import { randomid } from '@uiw/utils';
55
import Container, { Placement, ContainerNotifys } from './Container';
6-
import './style/index.less';
6+
// import './style/index.less';
77

88
export interface NotificationCreateProps extends Omit<AlertProps, 'type'> {
99
placement?: Placement;
@@ -64,6 +64,7 @@ function NotificationCreate(props: NotificationCreateProps, type: NotificationCr
6464
document.body.appendChild(div);
6565
div.className = ['w-notify-warpper', props.placement].filter(Boolean).join(' ').trim();
6666
notifysDom[props.placement] = div;
67+
console.log('3333', 4443);
6768
notifys[props.placement] = ReactDOM.render(<Container />, div);
6869
}
6970

‎packages/react-notify/src/style/index.less

Lines changed: 97 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,101 @@
11
@notify-prefix: ~'w-notify';
22

33
.@{notify-prefix} {
4-
&-warpper & .w-modal-inner {
5-
.w-modal-header {
6-
> .w-icon {
7-
font-size: 28px !important;
8-
}
9-
> .w-btn {
10-
min-width: 18px;
11-
min-height: 18px;
12-
padding: 5px 5px;
13-
}
14-
}
15-
&.w-modal-shown-icon:not(.w-modal-shown-title) {
16-
.w-modal-header {
17-
> button {
18-
top: 12px;
19-
right: 10px;
20-
position: absolute;
21-
}
22-
}
23-
.w-modal-body {
24-
padding-right: 36px;
25-
}
26-
}
27-
&.w-modal-shown-title {
28-
.w-modal-header {
29-
padding-top: 20px;
30-
> button {
31-
top: 5px;
32-
right: 5px;
33-
position: absolute;
34-
}
35-
}
36-
.w-modal-header > h4 {
37-
padding-left: 40px;
38-
padding-right: 20px;
39-
}
40-
.w-modal-body {
41-
padding-left: 60px;
42-
opacity: 0.75;
43-
}
44-
&:not(.w-modal-shown-icon) {
45-
.w-modal-header > h4 {
46-
padding-left: 5px;
47-
}
48-
.w-modal-body {
49-
padding-left: 25px;
50-
}
51-
}
52-
}
53-
&:not(.w-modal-shown-title):not(.w-modal-shown-icon) {
54-
.w-modal-body {
55-
padding: 16px;
56-
}
57-
}
58-
&:not(.w-modal-shown-title) {
59-
&.w-modal-inner {
60-
padding-bottom: 0;
61-
.w-modal-header {
62-
padding-top: 16px;
63-
> .w-icon {
64-
font-size: 20px !important;
65-
}
66-
}
67-
}
68-
.w-modal-body {
69-
padding: 16px 12px;
70-
}
71-
}
72-
}
73-
&-warpper & .w-overlay-content {
74-
margin: 5px;
75-
}
76-
&-warpper {
77-
position: fixed;
78-
padding: 5px;
79-
z-index: 999;
80-
}
81-
& {
82-
position: relative !important;
83-
z-index: 9999;
84-
}
85-
&-warpper.topLeft {
86-
top: 0;
87-
left: 0;
88-
}
89-
&-warpper.topRight {
90-
top: 0;
91-
right: 0;
92-
}
93-
&-warpper.bottomLeft {
94-
bottom: 0;
95-
left: 0;
96-
}
97-
&-warpper.bottomRight {
98-
bottom: 0;
99-
right: 0;
100-
}
4+
// &-warpper & .w-modal-inner {
5+
// .w-modal-header {
6+
// > .w-icon {
7+
// font-size: 28px !important;
8+
// }
9+
// > .w-btn {
10+
// min-width: 18px;
11+
// min-height: 18px;
12+
// padding: 5px 5px;
13+
// }
14+
// }
15+
// &.w-modal-shown-icon:not(.w-modal-shown-title) {
16+
// .w-modal-header {
17+
// > button {
18+
// top: 12px;
19+
// right: 10px;
20+
// position: absolute;
21+
// }
22+
// }
23+
// .w-modal-body {
24+
// padding-right: 36px;
25+
// }
26+
// }
27+
// &.w-modal-shown-title {
28+
// .w-modal-header {
29+
// padding-top: 20px;
30+
// > button {
31+
// top: 5px;
32+
// right: 5px;
33+
// position: absolute;
34+
// }
35+
// }
36+
// .w-modal-header > h4 {
37+
// padding-left: 40px;
38+
// padding-right: 20px;
39+
// }
40+
// .w-modal-body {
41+
// padding-left: 60px;
42+
// opacity: 0.75;
43+
// }
44+
// &:not(.w-modal-shown-icon) {
45+
// .w-modal-header > h4 {
46+
// padding-left: 5px;
47+
// }
48+
// .w-modal-body {
49+
// padding-left: 25px;
50+
// }
51+
// }
52+
// }
53+
// &:not(.w-modal-shown-title):not(.w-modal-shown-icon) {
54+
// .w-modal-body {
55+
// padding: 16px;
56+
// }
57+
// }
58+
// &:not(.w-modal-shown-title) {
59+
// &.w-modal-inner {
60+
// padding-bottom: 0;
61+
// .w-modal-header {
62+
// padding-top: 16px;
63+
// > .w-icon {
64+
// font-size: 20px !important;
65+
// }
66+
// }
67+
// }
68+
// .w-modal-body {
69+
// padding: 16px 12px;
70+
// }
71+
// }
72+
// }
73+
// &-warpper & .w-overlay-content {
74+
// margin: 5px;
75+
// }
76+
// &-warpper {
77+
// position: fixed;
78+
// padding: 5px;
79+
// z-index: 999;
80+
// }
81+
// // & {
82+
// // position: relative !important;
83+
// // z-index: 9999;
84+
// // }
85+
// &-warpper.topLeft {
86+
// top: 0;
87+
// left: 0;
88+
// }
89+
// &-warpper.topRight {
90+
// top: 0;
91+
// right: 0;
92+
// }
93+
// &-warpper.bottomLeft {
94+
// bottom: 0;
95+
// left: 0;
96+
// }
97+
// &-warpper.bottomRight {
98+
// bottom: 0;
99+
// right: 0;
100+
// }
101101
}

‎packages/react-notify/src/style/index.ts

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import styled, { createGlobalStyle, css } from 'styled-components';
2+
import Alert, { AlertProps } from '@uiw/react-alert';
3+
import { ModalStyleInner, ModalStyleHeader, ModalStyleBody } from '@uiw/react-modal';
4+
import { IconStyleBase } from '@uiw/react-icon';
5+
import { ButtonStyleBase } from '@uiw/react-button';
6+
import { ContentWrap } from '@uiw/react-overlay';
7+
export const NotifyStyleBase = styled.div``;
8+
export const NotifyGlobalStyle = createGlobalStyle`
9+
.w-notify-warpper{
10+
position: fixed;
11+
padding: 5px;
12+
z-index: 999;
13+
&.topLeft {
14+
top: 0;
15+
left: 0;
16+
}
17+
&.topRight {
18+
top: 0;
19+
right: 0;
20+
}
21+
&.bottomLeft {
22+
bottom: 0;
23+
left: 0;
24+
}
25+
&.bottomRight {
26+
bottom: 0;
27+
right: 0;
28+
}
29+
}
30+
`;
31+
32+
export interface NotifyStyleAlertBaseProps extends AlertProps {}
33+
34+
export const NotifyStyleAlertBase = styled(Alert)`
35+
position: relative !important;
36+
z-index: 9999;
37+
${ModalStyleInner} {
38+
${ModalStyleHeader} {
39+
> ${IconStyleBase} {
40+
font-size: 28px !important;
41+
}
42+
> ${ButtonStyleBase} {
43+
min-width: 18px;
44+
min-height: 18px;
45+
padding: 5px 5px;
46+
}
47+
}
48+
${(props) =>
49+
props.icon &&
50+
!props.title &&
51+
css`
52+
${ModalStyleHeader} {
53+
> button {
54+
top: 12px;
55+
right: 10px;
56+
position: absolute;
57+
}
58+
}
59+
${ModalStyleBody} {
60+
padding-right: 36px;
61+
}
62+
`}
63+
${(props) =>
64+
props.title &&
65+
css`
66+
${ModalStyleHeader} {
67+
padding-top: 20px;
68+
> button {
69+
top: 5px;
70+
right: 5px;
71+
position: absolute;
72+
}
73+
}
74+
${ModalStyleHeader} > h4 {
75+
padding-left: 40px;
76+
padding-right: 20px;
77+
}
78+
${ModalStyleBody} {
79+
padding-left: 60px;
80+
opacity: 0.75;
81+
}
82+
${!props.icon &&
83+
css`
84+
${ModalStyleHeader} > h4 {
85+
padding-left: 5px;
86+
}
87+
${ModalStyleBody} {
88+
padding-left: 25px;
89+
}
90+
`}
91+
`}
92+
93+
${(props) =>
94+
!props.title &&
95+
!props.icon &&
96+
css`
97+
& {
98+
${ModalStyleBody} {
99+
padding: 16px;
100+
}
101+
}
102+
`}
103+
${(props) =>
104+
!props.title &&
105+
css`
106+
&.${ModalStyleInner} {
107+
padding-bottom: 0;
108+
${ModalStyleHeader} {
109+
padding-top: 16px;
110+
> ${IconStyleBase} {
111+
font-size: 20px !important;
112+
}
113+
}
114+
}
115+
${ModalStyleBody} {
116+
padding: 16px 12px;
117+
}
118+
`}
119+
}
120+
${ContentWrap} {
121+
margin: 5px;
122+
}
123+
`;

0 commit comments

Comments
 (0)