dtable-ui-component 0.2.7 → 0.2.8-beta
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/DTableRadio/index.css +14 -2
- package/lib/DTableRadio/index.js +7 -5
- package/package.json +1 -1
- package/es/app.css +0 -20
- package/es/app.js +0 -91
- package/es/assets/images/avatar/default_avatar.png +0 -0
- package/es/assets/images/file/192/excel.png +0 -0
- package/es/assets/images/file/192/file.png +0 -0
- package/es/assets/images/file/192/music.png +0 -0
- package/es/assets/images/file/192/pdf.png +0 -0
- package/es/assets/images/file/192/pic.png +0 -0
- package/es/assets/images/file/192/ppt.png +0 -0
- package/es/assets/images/file/192/txt.png +0 -0
- package/es/assets/images/file/192/video.png +0 -0
- package/es/assets/images/file/192/word.png +0 -0
- package/es/assets/images/file/24/excel.png +0 -0
- package/es/assets/images/file/24/file.png +0 -0
- package/es/assets/images/file/24/music.png +0 -0
- package/es/assets/images/file/24/pdf.png +0 -0
- package/es/assets/images/file/24/pic.png +0 -0
- package/es/assets/images/file/24/ppt.png +0 -0
- package/es/assets/images/file/24/txt.png +0 -0
- package/es/assets/images/file/24/video.png +0 -0
- package/es/assets/images/file/24/word.png +0 -0
- package/es/assets/images/folder/folder-192.png +0 -0
- package/es/assets/images/folder/folder-24.png +0 -0
- package/es/components/cell-editor/checkbox-editor.js +0 -104
- package/es/components/cell-editor/collaborator-editor.js +0 -236
- package/es/components/cell-editor/date-editor.js +0 -151
- package/es/components/cell-editor/index.js +0 -9
- package/es/components/cell-editor/link-editor.js +0 -303
- package/es/components/cell-editor/multiple-select-editor.js +0 -237
- package/es/components/cell-editor/number-editor.js +0 -154
- package/es/components/cell-editor/single-select-editor.js +0 -202
- package/es/components/cell-editor/text-editor.js +0 -122
- package/es/components/cell-editor-dialog/pc-file-editor-dialog.js +0 -46
- package/es/components/cell-editor-dialog/pc-files-addition/index.js +0 -0
- package/es/components/cell-editor-dialog/pc-files-addition/pc-file-uploaded-item.js +0 -0
- package/es/components/cell-editor-dialog/pc-files-preview/index.js +0 -0
- package/es/components/cell-editor-dialog/pc-files-preview/pc-file-item-preview.js +0 -0
- package/es/components/cell-editor-popover/mb-collaborator-editor-popover.js +0 -177
- package/es/components/cell-editor-popover/mb-date-editor-popover.js +0 -245
- package/es/components/cell-editor-popover/mb-link-editor-popover.js +0 -170
- package/es/components/cell-editor-popover/mb-select-editor-popover.js +0 -230
- package/es/components/cell-editor-popover/pc-collaborator-editor-popover.js +0 -109
- package/es/components/cell-editor-popover/pc-date-editor-popover.js +0 -142
- package/es/components/cell-editor-popover/pc-link-editor-popover.js +0 -114
- package/es/components/cell-editor-popover/pc-select-editor-popover.js +0 -143
- package/es/components/cell-factory/cell-formatter-factory.js +0 -25
- package/es/components/cell-formatter/auto-number-formatter.js +0 -35
- package/es/components/cell-formatter/button-formatter.js +0 -55
- package/es/components/cell-formatter/checkbox-formatter.js +0 -44
- package/es/components/cell-formatter/collaborator-formatter.js +0 -91
- package/es/components/cell-formatter/creator-formatter.js +0 -87
- package/es/components/cell-formatter/ctime-formatter.js +0 -57
- package/es/components/cell-formatter/date-formatter.js +0 -59
- package/es/components/cell-formatter/duration-formatter.js +0 -37
- package/es/components/cell-formatter/email-formatter.js +0 -35
- package/es/components/cell-formatter/file-formatter.js +0 -63
- package/es/components/cell-formatter/formatter-config.js +0 -31
- package/es/components/cell-formatter/formula-formatter.js +0 -173
- package/es/components/cell-formatter/geolocation-formatter.js +0 -49
- package/es/components/cell-formatter/image-formatter.js +0 -153
- package/es/components/cell-formatter/index.js +0 -26
- package/es/components/cell-formatter/last-modifier-formatter.js +0 -87
- package/es/components/cell-formatter/link-formatter.js +0 -144
- package/es/components/cell-formatter/long-text-formatter.js +0 -106
- package/es/components/cell-formatter/mtime-formatter.js +0 -57
- package/es/components/cell-formatter/multiple-select-formatter.js +0 -70
- package/es/components/cell-formatter/number-formatter.js +0 -46
- package/es/components/cell-formatter/rate-formatter.js +0 -74
- package/es/components/cell-formatter/single-select-formatter.js +0 -69
- package/es/components/cell-formatter/text-formatter.js +0 -35
- package/es/components/cell-formatter/url-formatter.js +0 -35
- package/es/components/cell-formatter/widgets/file-item-formatter.js +0 -50
- package/es/components/cell-formatter/widgets/image-previewer-lightbox.js +0 -119
- package/es/components/common/collaborator-item.js +0 -63
- package/es/components/common/edit-editor-button.js +0 -56
- package/es/components/common/images-lazy-load.js +0 -148
- package/es/components/common/link-editor-option.js +0 -113
- package/es/components/common/mobile/mb-editor-header.js +0 -48
- package/es/components/common/modal-portal.js +0 -44
- package/es/components/common/select-editor-option.js +0 -106
- package/es/components/common/select-item.js +0 -58
- package/es/components/file-uploader/index.js +0 -53
- package/es/components/loading.js +0 -7
- package/es/components/toast/alert.js +0 -150
- package/es/components/toast/index.js +0 -3
- package/es/components/toast/toast.js +0 -179
- package/es/components/toast/toastManager.js +0 -170
- package/es/components/toast/toaster.js +0 -76
- package/es/css/cell-editor.css +0 -614
- package/es/css/cell-formatter.css +0 -241
- package/es/css/custom-rc-calendar.css +0 -118
- package/es/css/image-previewer-ligntbox.css +0 -87
- package/es/css/loading.css +0 -54
- package/es/index.js +0 -5
- package/es/lang/index.js +0 -50
- package/es/locals/de.js +0 -2
- package/es/locals/en.js +0 -17
- package/es/locals/fr.js +0 -2
- package/es/locals/zh-CN.js +0 -17
- package/es/utils/cell-types.js +0 -25
- package/es/utils/constants.js +0 -41
- package/es/utils/editor-utils.js +0 -71
- package/es/utils/normalize-long-text-value.js +0 -68
- package/es/utils/number-precision.js +0 -163
- package/es/utils/utils.js +0 -116
- package/es/utils/value-format-utils.js +0 -281
|
@@ -1,58 +0,0 @@
|
|
|
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
|
-
|
|
7
|
-
var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
|
|
8
|
-
_inherits(SelectItem, _React$PureComponent);
|
|
9
|
-
|
|
10
|
-
var _super = _createSuper(SelectItem);
|
|
11
|
-
|
|
12
|
-
function SelectItem() {
|
|
13
|
-
var _this;
|
|
14
|
-
|
|
15
|
-
_classCallCheck(this, SelectItem);
|
|
16
|
-
|
|
17
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
18
|
-
args[_key] = arguments[_key];
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
22
|
-
|
|
23
|
-
_this.getStyle = function (option, fontSize) {
|
|
24
|
-
return {
|
|
25
|
-
display: 'inline-block',
|
|
26
|
-
padding: '0px 10px',
|
|
27
|
-
marginRight: '8px',
|
|
28
|
-
height: '20px',
|
|
29
|
-
lineHeight: '20px',
|
|
30
|
-
textAlign: 'center',
|
|
31
|
-
borderRadius: '10px',
|
|
32
|
-
fontSize: fontSize ? "".concat(fontSize, "px") : '13px',
|
|
33
|
-
backgroundColor: option.color,
|
|
34
|
-
color: option.textColor || null
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return _this;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
_createClass(SelectItem, [{
|
|
42
|
-
key: "render",
|
|
43
|
-
value: function render() {
|
|
44
|
-
var _this$props = this.props,
|
|
45
|
-
option = _this$props.option,
|
|
46
|
-
fontSize = _this$props.fontSize;
|
|
47
|
-
var style = this.getStyle(option, fontSize);
|
|
48
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: "dtable-ui select-item",
|
|
50
|
-
style: style
|
|
51
|
-
}, option.name);
|
|
52
|
-
}
|
|
53
|
-
}]);
|
|
54
|
-
|
|
55
|
-
return SelectItem;
|
|
56
|
-
}(React.PureComponent);
|
|
57
|
-
|
|
58
|
-
export default SelectItem;
|
|
@@ -1,53 +0,0 @@
|
|
|
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
|
-
|
|
7
|
-
var FileUploader = /*#__PURE__*/function (_React$Component) {
|
|
8
|
-
_inherits(FileUploader, _React$Component);
|
|
9
|
-
|
|
10
|
-
var _super = _createSuper(FileUploader);
|
|
11
|
-
|
|
12
|
-
function FileUploader(props) {
|
|
13
|
-
var _this;
|
|
14
|
-
|
|
15
|
-
_classCallCheck(this, FileUploader);
|
|
16
|
-
|
|
17
|
-
_this = _super.call(this, props);
|
|
18
|
-
|
|
19
|
-
_this.onFilesChanged = function () {};
|
|
20
|
-
|
|
21
|
-
_this.uploadFiles = function (fileList) {
|
|
22
|
-
var isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
_this.checkRepeat = function () {};
|
|
26
|
-
|
|
27
|
-
_this.cancelUploadFile = function () {};
|
|
28
|
-
|
|
29
|
-
_this.onFileUploadProgress = function () {};
|
|
30
|
-
|
|
31
|
-
_this.onFileUploadSuccss = function () {};
|
|
32
|
-
|
|
33
|
-
_this.onFileUploadFailed = function () {};
|
|
34
|
-
|
|
35
|
-
_this.state = {};
|
|
36
|
-
_this.uploadFiles = [];
|
|
37
|
-
return _this;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
_createClass(FileUploader, [{
|
|
41
|
-
key: "render",
|
|
42
|
-
value: function render() {
|
|
43
|
-
return /*#__PURE__*/React.createElement("input", {
|
|
44
|
-
type: "file",
|
|
45
|
-
onChange: this.onFilesChanged
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}]);
|
|
49
|
-
|
|
50
|
-
return FileUploader;
|
|
51
|
-
}(React.Component);
|
|
52
|
-
|
|
53
|
-
export default FileUploader;
|
package/es/components/loading.js
DELETED
|
@@ -1,150 +0,0 @@
|
|
|
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 { css } from 'glamor';
|
|
7
|
-
|
|
8
|
-
var Alert = /*#__PURE__*/function (_React$PureComponent) {
|
|
9
|
-
_inherits(Alert, _React$PureComponent);
|
|
10
|
-
|
|
11
|
-
var _super = _createSuper(Alert);
|
|
12
|
-
|
|
13
|
-
function Alert(props) {
|
|
14
|
-
var _this;
|
|
15
|
-
|
|
16
|
-
_classCallCheck(this, Alert);
|
|
17
|
-
|
|
18
|
-
_this = _super.call(this, props);
|
|
19
|
-
_this.containerStyle = css({
|
|
20
|
-
borderRadius: '3px',
|
|
21
|
-
backgroundColor: '#fff',
|
|
22
|
-
padding: '10px 16px',
|
|
23
|
-
display: 'flex',
|
|
24
|
-
boxSizing: 'border-box',
|
|
25
|
-
boxShadow: 'rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px',
|
|
26
|
-
justifyContent: 'space-between',
|
|
27
|
-
flexDirection: 'row'
|
|
28
|
-
});
|
|
29
|
-
_this.containerBorderSuccess = css({
|
|
30
|
-
borderLeft: '3px solid rgb(71, 184, 129)'
|
|
31
|
-
});
|
|
32
|
-
_this.containerBorderWarn = css({
|
|
33
|
-
borderLeft: '3px solid rgb(217, 130, 43)'
|
|
34
|
-
});
|
|
35
|
-
_this.containerBorderDanger = css({
|
|
36
|
-
borderLeft: '3px solid rgb(236, 76, 71)'
|
|
37
|
-
});
|
|
38
|
-
_this.containerBorderNotify = css({
|
|
39
|
-
borderLeft: '3px solid rgb(16, 112, 202)'
|
|
40
|
-
});
|
|
41
|
-
_this.toastTextTitle = css({
|
|
42
|
-
fontWeight: '600',
|
|
43
|
-
fontSize: '14px',
|
|
44
|
-
color: '#435a6f',
|
|
45
|
-
margin: '0'
|
|
46
|
-
});
|
|
47
|
-
_this.toastTextChild = css({
|
|
48
|
-
fontSize: '14px',
|
|
49
|
-
color: '#999',
|
|
50
|
-
margin: '0'
|
|
51
|
-
});
|
|
52
|
-
_this.toastClose = css({
|
|
53
|
-
marginLeft: '15px',
|
|
54
|
-
height: '24px',
|
|
55
|
-
width: '24px',
|
|
56
|
-
lineHeight: '22px',
|
|
57
|
-
fontWeight: '700',
|
|
58
|
-
textAlign: 'center',
|
|
59
|
-
fontSize: '20px',
|
|
60
|
-
color: '#000',
|
|
61
|
-
cursor: 'pointer',
|
|
62
|
-
opacity: '0.5',
|
|
63
|
-
':hover': {
|
|
64
|
-
opacity: 1
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
_this.toastIcon = css({
|
|
68
|
-
marginRight: '10px',
|
|
69
|
-
width: '14px',
|
|
70
|
-
height: '20px',
|
|
71
|
-
lineHeight: '20px'
|
|
72
|
-
});
|
|
73
|
-
return _this;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
_createClass(Alert, [{
|
|
77
|
-
key: "getContainerStyle",
|
|
78
|
-
value: function getContainerStyle(intent) {
|
|
79
|
-
switch (intent) {
|
|
80
|
-
case 'success':
|
|
81
|
-
return {
|
|
82
|
-
borderStyle: this.containerBorderSuccess,
|
|
83
|
-
iconColor: css({
|
|
84
|
-
color: 'rgb(71, 184, 129)'
|
|
85
|
-
}),
|
|
86
|
-
iconClass: 'dtable-font dtable-icon-check-circle'
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
case 'warning':
|
|
90
|
-
return {
|
|
91
|
-
borderStyle: this.containerBorderWarn,
|
|
92
|
-
iconColor: css({
|
|
93
|
-
color: 'rgb(217, 130, 43)'
|
|
94
|
-
}),
|
|
95
|
-
iconClass: 'dtable-font dtable-icon-exclamation-triangle'
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
case 'none':
|
|
99
|
-
return {
|
|
100
|
-
borderStyle: this.containerBorderNotify,
|
|
101
|
-
iconColor: css({
|
|
102
|
-
color: 'rgb(16, 112, 202)'
|
|
103
|
-
}),
|
|
104
|
-
iconClass: 'dtable-font dtable-icon-exclamation-circle'
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
case 'danger':
|
|
108
|
-
return {
|
|
109
|
-
borderStyle: this.containerBorderDanger,
|
|
110
|
-
iconColor: css({
|
|
111
|
-
color: 'rgb(236, 76, 71)'
|
|
112
|
-
}),
|
|
113
|
-
iconClass: 'dtable-font dtable-icon-exclamation-circle'
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
default:
|
|
117
|
-
return {
|
|
118
|
-
borderStyle: this.containerBorderSuccess,
|
|
119
|
-
iconColor: css({
|
|
120
|
-
color: 'rgb(71, 184, 129)'
|
|
121
|
-
}),
|
|
122
|
-
iconClass: 'dtable-font dtable-icon-check-circle'
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}, {
|
|
127
|
-
key: "render",
|
|
128
|
-
value: function render() {
|
|
129
|
-
var toastStyle = this.getContainerStyle(this.props.intent);
|
|
130
|
-
return /*#__PURE__*/React.createElement("div", css(toastStyle.borderStyle, this.containerStyle), /*#__PURE__*/React.createElement("div", {
|
|
131
|
-
className: this.toastIcon
|
|
132
|
-
}, /*#__PURE__*/React.createElement("i", Object.assign({
|
|
133
|
-
className: toastStyle.iconClass
|
|
134
|
-
}, toastStyle.iconColor))), /*#__PURE__*/React.createElement("div", {
|
|
135
|
-
className: this.toastTextContainer
|
|
136
|
-
}, /*#__PURE__*/React.createElement("p", {
|
|
137
|
-
className: this.toastTextTitle
|
|
138
|
-
}, this.props.title), this.props.children ? /*#__PURE__*/React.createElement("p", {
|
|
139
|
-
className: this.toastTextChild
|
|
140
|
-
}, this.props.children) : null), this.props.isRemoveable && /*#__PURE__*/React.createElement("div", {
|
|
141
|
-
onClick: this.props.onRemove,
|
|
142
|
-
className: this.toastClose
|
|
143
|
-
}, /*#__PURE__*/React.createElement("span", null, "\xD7")));
|
|
144
|
-
}
|
|
145
|
-
}]);
|
|
146
|
-
|
|
147
|
-
return Alert;
|
|
148
|
-
}(React.PureComponent);
|
|
149
|
-
|
|
150
|
-
export default Alert;
|
|
@@ -1,179 +0,0 @@
|
|
|
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 { css } from 'glamor';
|
|
7
|
-
import Transition from 'react-transition-group/Transition';
|
|
8
|
-
import Alert from './alert';
|
|
9
|
-
var animationEasing = {
|
|
10
|
-
deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
|
|
11
|
-
acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)',
|
|
12
|
-
spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
|
|
13
|
-
};
|
|
14
|
-
var ANIMATION_DURATION = 240;
|
|
15
|
-
var openAnimation = css.keyframes('openAnimation', {
|
|
16
|
-
from: {
|
|
17
|
-
opacity: 0,
|
|
18
|
-
transform: 'translateY(-120%)'
|
|
19
|
-
},
|
|
20
|
-
to: {
|
|
21
|
-
transform: 'translateY(0)'
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
var closeAnimation = css.keyframes('closeAnimation', {
|
|
25
|
-
from: {
|
|
26
|
-
transform: 'scale(1)',
|
|
27
|
-
opacity: 1
|
|
28
|
-
},
|
|
29
|
-
to: {
|
|
30
|
-
transform: 'scale(0.9)',
|
|
31
|
-
opacity: 0
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
var animationStyles = css({
|
|
35
|
-
display: 'flex',
|
|
36
|
-
flexDirection: 'column',
|
|
37
|
-
alignItems: 'center',
|
|
38
|
-
height: 0,
|
|
39
|
-
transition: "all ".concat(ANIMATION_DURATION, "ms ").concat(animationEasing.deceleration),
|
|
40
|
-
'&[data-state="entering"], &[data-state="entered"]': {
|
|
41
|
-
animation: "".concat(openAnimation, " ").concat(ANIMATION_DURATION, "ms ").concat(animationEasing.spring, " both")
|
|
42
|
-
},
|
|
43
|
-
'&[data-state="exiting"]': {
|
|
44
|
-
animation: "".concat(closeAnimation, " 120ms ").concat(animationEasing.acceleration, " both")
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
var Toast = /*#__PURE__*/function (_React$PureComponent) {
|
|
49
|
-
_inherits(Toast, _React$PureComponent);
|
|
50
|
-
|
|
51
|
-
var _super = _createSuper(Toast);
|
|
52
|
-
|
|
53
|
-
function Toast() {
|
|
54
|
-
var _this;
|
|
55
|
-
|
|
56
|
-
_classCallCheck(this, Toast);
|
|
57
|
-
|
|
58
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
59
|
-
args[_key] = arguments[_key];
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
63
|
-
_this.state = {
|
|
64
|
-
isShown: true,
|
|
65
|
-
height: 0
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
_this.close = function () {
|
|
69
|
-
_this.clearCloseTimer();
|
|
70
|
-
|
|
71
|
-
_this.setState({
|
|
72
|
-
isShown: false
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
_this.startCloseTimer = function () {
|
|
77
|
-
if (_this.props.duration) {
|
|
78
|
-
_this.closeTimer = setTimeout(function () {
|
|
79
|
-
_this.close();
|
|
80
|
-
}, _this.props.duration * 1000);
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
_this.clearCloseTimer = function () {
|
|
85
|
-
if (_this.closeTimer) {
|
|
86
|
-
clearTimeout(_this.closeTimer);
|
|
87
|
-
_this.closeTimer = null;
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
_this.handleMouseEnter = function () {
|
|
92
|
-
_this.clearCloseTimer();
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
_this.handleMouseLeave = function () {
|
|
96
|
-
_this.startCloseTimer();
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
_this.onRef = function (ref) {
|
|
100
|
-
if (ref === null) return;
|
|
101
|
-
|
|
102
|
-
var _ref$getBoundingClien = ref.getBoundingClientRect(),
|
|
103
|
-
height = _ref$getBoundingClien.height;
|
|
104
|
-
|
|
105
|
-
_this.setState({
|
|
106
|
-
height: height
|
|
107
|
-
});
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
return _this;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
_createClass(Toast, [{
|
|
114
|
-
key: "componentDidUpdate",
|
|
115
|
-
value: function componentDidUpdate(prevProps) {
|
|
116
|
-
if (prevProps.isShown !== this.props.isShown) {
|
|
117
|
-
// eslint-disable-next-line react/no-did-update-set-state
|
|
118
|
-
this.setState({
|
|
119
|
-
isShown: this.props.isShown
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}, {
|
|
124
|
-
key: "componentDidMount",
|
|
125
|
-
value: function componentDidMount() {
|
|
126
|
-
this.startCloseTimer();
|
|
127
|
-
}
|
|
128
|
-
}, {
|
|
129
|
-
key: "componentWillUnmount",
|
|
130
|
-
value: function componentWillUnmount() {
|
|
131
|
-
this.clearCloseTimer();
|
|
132
|
-
}
|
|
133
|
-
}, {
|
|
134
|
-
key: "render",
|
|
135
|
-
value: function render() {
|
|
136
|
-
var _this2 = this;
|
|
137
|
-
|
|
138
|
-
return /*#__PURE__*/React.createElement(Transition, {
|
|
139
|
-
appear: true,
|
|
140
|
-
unmountOnExit: true,
|
|
141
|
-
timeout: ANIMATION_DURATION,
|
|
142
|
-
in: this.state.isShown,
|
|
143
|
-
onExited: this.props.onRemove
|
|
144
|
-
}, function (state) {
|
|
145
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
146
|
-
"data-state": state,
|
|
147
|
-
className: animationStyles,
|
|
148
|
-
onMouseEnter: _this2.handleMouseEnter,
|
|
149
|
-
onMouseLeave: _this2.handleMouseLeave,
|
|
150
|
-
style: {
|
|
151
|
-
height: _this2.state.height,
|
|
152
|
-
zIndex: _this2.props.zIndex,
|
|
153
|
-
marginBottom: _this2.state.isShown ? 0 : -_this2.state.height
|
|
154
|
-
}
|
|
155
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
156
|
-
ref: _this2.onRef,
|
|
157
|
-
style: {
|
|
158
|
-
padding: 8
|
|
159
|
-
}
|
|
160
|
-
}, /*#__PURE__*/React.createElement(Alert, {
|
|
161
|
-
intent: _this2.props.intent,
|
|
162
|
-
title: _this2.props.title,
|
|
163
|
-
children: _this2.props.children || '',
|
|
164
|
-
isRemoveable: _this2.props.hasCloseButton,
|
|
165
|
-
onRemove: function onRemove() {
|
|
166
|
-
return _this2.close();
|
|
167
|
-
}
|
|
168
|
-
})));
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
}]);
|
|
172
|
-
|
|
173
|
-
return Toast;
|
|
174
|
-
}(React.PureComponent);
|
|
175
|
-
|
|
176
|
-
Toast.defaultProps = {
|
|
177
|
-
intent: 'none'
|
|
178
|
-
};
|
|
179
|
-
export { Toast as default };
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
-
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
|
-
import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
|
|
5
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
6
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
7
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
-
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
|
-
var _excluded = ["id", "description"];
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { css } from 'glamor';
|
|
12
|
-
import Toast from './toast';
|
|
13
|
-
var wrapperClass = css({
|
|
14
|
-
maxWidth: 560,
|
|
15
|
-
margin: '0 auto',
|
|
16
|
-
top: 0,
|
|
17
|
-
left: 0,
|
|
18
|
-
right: 0,
|
|
19
|
-
position: 'fixed',
|
|
20
|
-
zIndex: 999999
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
var hasCustomId = function hasCustomId(settings) {
|
|
24
|
-
return Object.hasOwnProperty.call(settings, 'id');
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
|
|
28
|
-
_inherits(ToastManager, _React$PureComponent);
|
|
29
|
-
|
|
30
|
-
var _super = _createSuper(ToastManager);
|
|
31
|
-
|
|
32
|
-
function ToastManager(props, context) {
|
|
33
|
-
var _this;
|
|
34
|
-
|
|
35
|
-
_classCallCheck(this, ToastManager);
|
|
36
|
-
|
|
37
|
-
_this = _super.call(this, props, context);
|
|
38
|
-
|
|
39
|
-
_this.getToasts = function () {
|
|
40
|
-
return _this.state.toasts;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
_this.closeAll = function () {
|
|
44
|
-
_this.getToasts().forEach(function (toast) {
|
|
45
|
-
return toast.close();
|
|
46
|
-
});
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
_this.notify = function (title, settings) {
|
|
50
|
-
// If there's a custom toast ID passed, close existing toasts with the same custom ID
|
|
51
|
-
if (hasCustomId(settings)) {
|
|
52
|
-
var _iterator = _createForOfIteratorHelper(_this.state.toasts),
|
|
53
|
-
_step;
|
|
54
|
-
|
|
55
|
-
try {
|
|
56
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
57
|
-
var toast = _step.value;
|
|
58
|
-
|
|
59
|
-
// Since unique ID is still appended to a custom ID, skip the unique ID and check only prefix
|
|
60
|
-
if (String(toast.id).startsWith(settings.id)) {
|
|
61
|
-
_this.closeToast(toast.id);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
} catch (err) {
|
|
65
|
-
_iterator.e(err);
|
|
66
|
-
} finally {
|
|
67
|
-
_iterator.f();
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
var instance = _this.createToastInstance(title, settings);
|
|
72
|
-
|
|
73
|
-
_this.setState(function (previousState) {
|
|
74
|
-
return {
|
|
75
|
-
toasts: [instance].concat(_toConsumableArray(previousState.toasts))
|
|
76
|
-
};
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
return instance;
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
_this.createToastInstance = function (title, settings) {
|
|
83
|
-
var uniqueId = ++ToastManager.idCounter;
|
|
84
|
-
var id = hasCustomId(settings) ? "".concat(settings.id, "-").concat(uniqueId) : uniqueId;
|
|
85
|
-
var hasCloseButton = settings.hasCloseButton || true;
|
|
86
|
-
var duration = settings.duration || 2;
|
|
87
|
-
|
|
88
|
-
if (settings.hasCloseButton !== undefined) {
|
|
89
|
-
hasCloseButton = settings.hasCloseButton;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
if (settings.duration !== undefined) {
|
|
93
|
-
duration = settings.duration;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return {
|
|
97
|
-
id: id,
|
|
98
|
-
title: title,
|
|
99
|
-
description: settings.description,
|
|
100
|
-
hasCloseButton: hasCloseButton,
|
|
101
|
-
duration: duration,
|
|
102
|
-
close: function close() {
|
|
103
|
-
return _this.closeToast(id);
|
|
104
|
-
},
|
|
105
|
-
intent: settings.intent
|
|
106
|
-
};
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
_this.closeToast = function (id) {
|
|
110
|
-
_this.setState(function (previousState) {
|
|
111
|
-
return {
|
|
112
|
-
toasts: previousState.toasts.map(function (toast) {
|
|
113
|
-
if (toast.id === id) {
|
|
114
|
-
return _objectSpread(_objectSpread({}, toast), {}, {
|
|
115
|
-
isShown: false
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
return toast;
|
|
120
|
-
})
|
|
121
|
-
};
|
|
122
|
-
});
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
_this.removeToast = function (id) {
|
|
126
|
-
_this.setState(function (previousState) {
|
|
127
|
-
return {
|
|
128
|
-
toasts: previousState.toasts.filter(function (toast) {
|
|
129
|
-
return toast.id !== id;
|
|
130
|
-
})
|
|
131
|
-
};
|
|
132
|
-
});
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
props.bindNotify(_this.notify);
|
|
136
|
-
props.bindGetToasts(_this.getToasts);
|
|
137
|
-
props.bindCloseAll(_this.closeAll);
|
|
138
|
-
_this.state = {
|
|
139
|
-
toasts: []
|
|
140
|
-
};
|
|
141
|
-
return _this;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
_createClass(ToastManager, [{
|
|
145
|
-
key: "render",
|
|
146
|
-
value: function render() {
|
|
147
|
-
var _this2 = this;
|
|
148
|
-
|
|
149
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
150
|
-
className: wrapperClass
|
|
151
|
-
}, this.state.toasts.map(function (_ref) {
|
|
152
|
-
var id = _ref.id,
|
|
153
|
-
description = _ref.description,
|
|
154
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
155
|
-
|
|
156
|
-
return /*#__PURE__*/React.createElement(Toast, Object.assign({
|
|
157
|
-
key: id,
|
|
158
|
-
onRemove: function onRemove() {
|
|
159
|
-
return _this2.removeToast(id);
|
|
160
|
-
}
|
|
161
|
-
}, props), description);
|
|
162
|
-
}));
|
|
163
|
-
}
|
|
164
|
-
}]);
|
|
165
|
-
|
|
166
|
-
return ToastManager;
|
|
167
|
-
}(React.PureComponent);
|
|
168
|
-
|
|
169
|
-
ToastManager.idCounter = 0;
|
|
170
|
-
export { ToastManager as default };
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import ReactDOM from 'react-dom';
|
|
5
|
-
import ToastManager from './toastManager';
|
|
6
|
-
var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
|
|
7
|
-
/**
|
|
8
|
-
* The Toaster manages the interactionsb between
|
|
9
|
-
* the ToasterManger and the toast API.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
var Toaster = function Toaster() {
|
|
13
|
-
var _this = this;
|
|
14
|
-
|
|
15
|
-
_classCallCheck(this, Toaster);
|
|
16
|
-
|
|
17
|
-
this._bindNotify = function (handler) {
|
|
18
|
-
_this.notifyHandler = handler;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
this._bindGetToasts = function (handler) {
|
|
22
|
-
_this.getToastsHandler = handler;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
this._bindCloseAll = function (handler) {
|
|
26
|
-
_this.closeAllHandler = handler;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
this.getToasts = function () {
|
|
30
|
-
return _this.getToastsHandler();
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
this.closeAll = function () {
|
|
34
|
-
return _this.closeAllHandler();
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
this.notify = function (title) {
|
|
38
|
-
var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
39
|
-
return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
|
|
40
|
-
intent: 'none'
|
|
41
|
-
}));
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
this.success = function (title) {
|
|
45
|
-
var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
46
|
-
return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
|
|
47
|
-
intent: 'success'
|
|
48
|
-
}));
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
this.warning = function (title) {
|
|
52
|
-
var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
53
|
-
return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
|
|
54
|
-
intent: 'warning'
|
|
55
|
-
}));
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
this.danger = function (title) {
|
|
59
|
-
var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
60
|
-
return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
|
|
61
|
-
intent: 'danger'
|
|
62
|
-
}));
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
if (!isBrowser) return;
|
|
66
|
-
var container = document.createElement('div');
|
|
67
|
-
container.setAttribute('data-evergreen-toaster-container', '');
|
|
68
|
-
document.body.appendChild(container);
|
|
69
|
-
ReactDOM.render( /*#__PURE__*/React.createElement(ToastManager, {
|
|
70
|
-
bindNotify: this._bindNotify,
|
|
71
|
-
bindGetToasts: this._bindGetToasts,
|
|
72
|
-
bindCloseAll: this._bindCloseAll
|
|
73
|
-
}), container);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export { Toaster as default };
|