dtable-ui-component 0.3.12 → 0.3.13-alpha1
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/lib/NotificationPopover/index.css +187 -0
- package/lib/NotificationPopover/index.js +126 -0
- package/lib/SelectItem/index.js +3 -2
- package/lib/index.js +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
/* copy from dtable, should optimize codes soon, delete useless codes */
|
|
2
|
+
.notification-wrapper .popover {
|
|
3
|
+
max-width: 300px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.notification-container {
|
|
7
|
+
position: absolute;
|
|
8
|
+
background: #fff;
|
|
9
|
+
width: 320px;
|
|
10
|
+
right: -10px;
|
|
11
|
+
top: -1px;
|
|
12
|
+
border-radius: 3px;
|
|
13
|
+
box-shadow: 0 0 5px #ccc;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.notification-container .notification-header {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
height: 50px;
|
|
21
|
+
border-bottom: 1px solid #ededed;
|
|
22
|
+
font-size: 16px;
|
|
23
|
+
font-weight: 600;
|
|
24
|
+
position: relative;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.notification-container .notification-header .notification-close-icon {
|
|
28
|
+
position: absolute;
|
|
29
|
+
right: 14px;
|
|
30
|
+
height: 24px;
|
|
31
|
+
width: 24px;
|
|
32
|
+
text-align: center;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
color: #000;
|
|
35
|
+
opacity: 0.5;
|
|
36
|
+
font-weight: 700;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.notification-container .notification-header .notification-close-icon:hover {
|
|
40
|
+
opacity: 0.75;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.notification-container .notification-body {
|
|
44
|
+
padding: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.notification-container .notification-body .show-weixin-qrcode {
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
border-bottom: 1px solid #ededed;
|
|
50
|
+
height: 40px;
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: flex-start;
|
|
54
|
+
padding-left: 10px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.show-weixin-qrcode .weixin-icon {
|
|
58
|
+
color: #999;
|
|
59
|
+
font-size: 20px;
|
|
60
|
+
margin-left: 20px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.notification-container .notification-body .mark-notifications {
|
|
64
|
+
color: #b4b4b4;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
border-bottom: 1px solid #ededed;
|
|
67
|
+
height: 36px;
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: flex-end;
|
|
71
|
+
padding-right: 1rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.notification-container .notification-body .mark-notifications:hover {
|
|
75
|
+
text-decoration: underline;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.notification-body .notification-list-container {
|
|
79
|
+
max-height: 260px;
|
|
80
|
+
overflow: auto;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.notification-list-container .notification-item {
|
|
84
|
+
padding: 14px 16px 14px 10px;
|
|
85
|
+
border-bottom: 1px solid #ededed;
|
|
86
|
+
position: relative;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.notification-list-container .notification-item:last-child {
|
|
91
|
+
border-bottom: none;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.notification-list-container .notification-item:hover {
|
|
95
|
+
background: #f5f5f5;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.notification-list-container .notification-item .notification-item-header {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.notification-list-container .notification-item .notification-point {
|
|
104
|
+
display: inline-block;
|
|
105
|
+
width: 8px;
|
|
106
|
+
height: 8px;
|
|
107
|
+
border-radius: 50%;
|
|
108
|
+
background: red;
|
|
109
|
+
margin-right: 12px;
|
|
110
|
+
position: absolute;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.notification-list-container .notification-item .notification-header-info {
|
|
114
|
+
display: flex;
|
|
115
|
+
justify-content: space-between;
|
|
116
|
+
flex: 1;
|
|
117
|
+
margin-left: 20px;
|
|
118
|
+
width: calc(100% - 20px);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.notification-user-detail {
|
|
122
|
+
display: flex;
|
|
123
|
+
width: 65%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.notification-user-detail img {
|
|
127
|
+
margin-top: 3px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.notification-user-name {
|
|
131
|
+
text-overflow: ellipsis;
|
|
132
|
+
overflow: hidden;
|
|
133
|
+
white-space: nowrap;
|
|
134
|
+
font-weight: 500;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.notification-item .notification-header-info .notification-time {
|
|
138
|
+
color: #b4b4b4;
|
|
139
|
+
text-overflow: ellipsis;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
white-space: nowrap;
|
|
142
|
+
font-size: 13px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.notification-list-container .notification-item .notification-content-wrapper {
|
|
146
|
+
font-size: 13px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.notification-item .notification-content-quotes {
|
|
150
|
+
width: 8px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.notification-list-container .notification-item .notification-comment-content {
|
|
154
|
+
max-width: calc(100% - 16px);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.notification-list-container .notification-item .notification-comment-content p {
|
|
158
|
+
display: inline-block;
|
|
159
|
+
letter-spacing: 1px;
|
|
160
|
+
max-width: 100%;
|
|
161
|
+
overflow: hidden;
|
|
162
|
+
text-overflow: ellipsis;
|
|
163
|
+
white-space: nowrap;
|
|
164
|
+
margin-bottom: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.notification-list-container .notification-item .notification-comment-content p img {
|
|
168
|
+
max-width: 70%;
|
|
169
|
+
height: auto;
|
|
170
|
+
max-height: 60px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.notification-body .notification-footer {
|
|
174
|
+
height: 40px;
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
justify-content: center;
|
|
178
|
+
background: #f9f9f9;
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
border-bottom-right-radius: 3px;
|
|
181
|
+
border-bottom-left-radius: 3px;
|
|
182
|
+
border-top: 1px solid #ededed;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.notification-body .notification-footer:hover {
|
|
186
|
+
text-decoration: underline;
|
|
187
|
+
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
4
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { Popover } from 'reactstrap';
|
|
7
|
+
import './index.css';
|
|
8
|
+
|
|
9
|
+
var NotificationPopover = /*#__PURE__*/function (_React$Component) {
|
|
10
|
+
_inherits(NotificationPopover, _React$Component);
|
|
11
|
+
|
|
12
|
+
var _super = _createSuper(NotificationPopover);
|
|
13
|
+
|
|
14
|
+
function NotificationPopover() {
|
|
15
|
+
var _this;
|
|
16
|
+
|
|
17
|
+
_classCallCheck(this, NotificationPopover);
|
|
18
|
+
|
|
19
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
20
|
+
args[_key] = arguments[_key];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
24
|
+
|
|
25
|
+
_this.handleOutsideClick = function (e) {
|
|
26
|
+
if (!_this.notificationContainerRef.contains(e.target)) {
|
|
27
|
+
document.removeEventListener('mousedown', _this.handleOutsideClick);
|
|
28
|
+
|
|
29
|
+
if (e.target.className === 'tool notification' || e.target.parentNode.className === 'tool notification') {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
_this.props.onNotificationListToggle();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
_this.onNotificationDialogToggle = function () {
|
|
38
|
+
_this.props.onNotificationDialogToggle();
|
|
39
|
+
|
|
40
|
+
_this.props.onNotificationListToggle();
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
_this.onWeixinQRCodeDialogToggle = function () {
|
|
44
|
+
_this.props.onOpenWeixinQRCodeDialog();
|
|
45
|
+
|
|
46
|
+
_this.props.onNotificationListToggle();
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
_this.onHandleScroll = function () {
|
|
50
|
+
if (_this.notificationListRef.offsetHeight + _this.notificationListRef.scrollTop + 1 >= _this.notificationsWrapperRef.offsetHeight) {
|
|
51
|
+
_this.props.listNotifications();
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return _this;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
_createClass(NotificationPopover, [{
|
|
59
|
+
key: "componentDidMount",
|
|
60
|
+
value: function componentDidMount() {
|
|
61
|
+
document.addEventListener('mousedown', this.handleOutsideClick);
|
|
62
|
+
}
|
|
63
|
+
}, {
|
|
64
|
+
key: "componentWillUnmount",
|
|
65
|
+
value: function componentWillUnmount() {
|
|
66
|
+
document.removeEventListener('mousedown', this.handleOutsideClick);
|
|
67
|
+
}
|
|
68
|
+
}, {
|
|
69
|
+
key: "render",
|
|
70
|
+
value: function render() {
|
|
71
|
+
var _this2 = this;
|
|
72
|
+
|
|
73
|
+
var _this$props = this.props,
|
|
74
|
+
headerText = _this$props.headerText,
|
|
75
|
+
bodyText = _this$props.bodyText,
|
|
76
|
+
footerText = _this$props.footerText;
|
|
77
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
78
|
+
className: "notification-wrapper",
|
|
79
|
+
target: "notification-popover",
|
|
80
|
+
isOpen: true,
|
|
81
|
+
fade: false,
|
|
82
|
+
hideArrow: true,
|
|
83
|
+
placement: "bottom"
|
|
84
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: "notification-container",
|
|
86
|
+
ref: function ref(_ref3) {
|
|
87
|
+
return _this2.notificationContainerRef = _ref3;
|
|
88
|
+
}
|
|
89
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
90
|
+
className: "notification-header"
|
|
91
|
+
}, headerText, /*#__PURE__*/React.createElement("span", {
|
|
92
|
+
className: "dtable-font dtable-icon-x notification-close-icon",
|
|
93
|
+
onClick: this.props.onNotificationListToggle
|
|
94
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "notification-body"
|
|
96
|
+
}, this.props.enableWeixin && /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
className: "show-weixin-qrcode",
|
|
98
|
+
onClick: this.onWeixinQRCodeDialogToggle
|
|
99
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
100
|
+
className: "dtable-font dtable-icon-wechat weixin-icon"
|
|
101
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
102
|
+
className: "ml-2"
|
|
103
|
+
}, "\u5173\u6CE8\u516C\u4F17\u53F7\u83B7\u53D6\u5B9E\u65F6\u901A\u77E5")), /*#__PURE__*/React.createElement("div", {
|
|
104
|
+
className: "mark-notifications",
|
|
105
|
+
onClick: this.props.onMarkAllNotifications
|
|
106
|
+
}, bodyText), /*#__PURE__*/React.createElement("div", {
|
|
107
|
+
className: "notification-list-container",
|
|
108
|
+
onScroll: this.onHandleScroll,
|
|
109
|
+
ref: function ref(_ref2) {
|
|
110
|
+
return _this2.notificationListRef = _ref2;
|
|
111
|
+
}
|
|
112
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
113
|
+
ref: function ref(_ref) {
|
|
114
|
+
return _this2.notificationsWrapperRef = _ref;
|
|
115
|
+
}
|
|
116
|
+
}, this.props.children)), /*#__PURE__*/React.createElement("div", {
|
|
117
|
+
className: "notification-footer",
|
|
118
|
+
onClick: this.onNotificationDialogToggle
|
|
119
|
+
}, footerText))));
|
|
120
|
+
}
|
|
121
|
+
}]);
|
|
122
|
+
|
|
123
|
+
return NotificationPopover;
|
|
124
|
+
}(React.Component);
|
|
125
|
+
|
|
126
|
+
export { NotificationPopover as default };
|
package/lib/SelectItem/index.js
CHANGED
|
@@ -29,6 +29,7 @@ var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
29
29
|
lineHeight: '20px',
|
|
30
30
|
textAlign: 'center',
|
|
31
31
|
borderRadius: '10px',
|
|
32
|
+
maxWidth: '250px',
|
|
32
33
|
fontSize: fontSize ? "".concat(fontSize, "px") : '13px',
|
|
33
34
|
backgroundColor: option.color,
|
|
34
35
|
color: option.textColor || null
|
|
@@ -46,7 +47,7 @@ var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
46
47
|
fontSize = _this$props.fontSize;
|
|
47
48
|
var style = this.getStyle(option, fontSize);
|
|
48
49
|
return /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: "dtable-ui select-item",
|
|
50
|
+
className: "dtable-ui select-item text-truncate",
|
|
50
51
|
style: style,
|
|
51
52
|
title: option.name
|
|
52
53
|
}, option.name);
|
|
@@ -56,4 +57,4 @@ var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
56
57
|
return SelectItem;
|
|
57
58
|
}(React.PureComponent);
|
|
58
59
|
|
|
59
|
-
export default
|
|
60
|
+
export { SelectItem as default };
|
package/lib/index.js
CHANGED
|
@@ -53,8 +53,10 @@ export { default as DateEditor } from './DateEditor';
|
|
|
53
53
|
export { default as LinkEditor } from './LinkEditor'; // dtable custom
|
|
54
54
|
|
|
55
55
|
export { default as DTablePopover } from './DTablePopover';
|
|
56
|
+
export { default as NotificationPopover } from './NotificationPopover';
|
|
56
57
|
export { default as DTableSelect } from './DTableSelect';
|
|
57
58
|
export { default as DTableSwitch } from './DTableSwitch';
|
|
58
59
|
export { default as DTableCustomizeSelect } from './DTableCustomizeSelect';
|
|
59
60
|
export { default as DTableCustomizeCollaboratorSelect } from './DTableCustomizeCollaboratorSelect';
|
|
60
|
-
export { default as DTableSearchInput } from './DTableSearchInput';
|
|
61
|
+
export { default as DTableSearchInput } from './DTableSearchInput';
|
|
62
|
+
export { default as ModalPortal } from './ModalPortal';
|