dtable-ui-component 0.1.84 → 0.1.87
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/DTableCustomizeCollaboratorSelect/index.css +124 -0
- package/lib/DTableCustomizeCollaboratorSelect/index.js +187 -0
- package/lib/DTableCustomizeCollaboratorSelect/utils.js +24 -0
- package/lib/DTableCustomizeSelect/index.js +155 -0
- package/lib/DTablePopover/index.js +115 -0
- package/lib/DTablePopover/utils.js +5 -0
- package/lib/DTableSearchInput/index.js +161 -0
- package/lib/DTableSearchInput/utils.js +4 -0
- package/lib/DTableSelect/index.js +141 -0
- package/lib/DTableSwitch/index.js +27 -0
- package/lib/SelectOptionGroup/KeyCodes.js +10 -0
- package/lib/SelectOptionGroup/index.js +217 -0
- package/lib/SelectOptionGroup/option.js +60 -0
- package/lib/assets/css/DTableCustomSelect.css +148 -0
- package/lib/index.js +8 -1
- package/package.json +2 -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 -164
- package/es/components/cell-formatter/geolocation-formatter.js +0 -52
- package/es/components/cell-formatter/image-formatter.js +0 -153
- package/es/components/cell-formatter/index.js +0 -27
- 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 -69
- package/es/components/cell-formatter/number-formatter.js +0 -46
- package/es/components/cell-formatter/rate-formatter.js +0 -79
- package/es/components/cell-formatter/single-select-formatter.js +0 -69
- package/es/components/cell-formatter/text-formatter.js +0 -55
- 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 -150
- 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/constants/cell-types.js +0 -25
- package/es/constants/index.js +0 -48
- 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 -6
- 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-value-validator.js +0 -32
- package/es/utils/column-utils.js +0 -7
- 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 -495
|
@@ -1,106 +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 SelectEditorOption = /*#__PURE__*/function (_React$Component) {
|
|
8
|
-
_inherits(SelectEditorOption, _React$Component);
|
|
9
|
-
|
|
10
|
-
var _super = _createSuper(SelectEditorOption);
|
|
11
|
-
|
|
12
|
-
function SelectEditorOption() {
|
|
13
|
-
var _this;
|
|
14
|
-
|
|
15
|
-
_classCallCheck(this, SelectEditorOption);
|
|
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.onDeleteOption = function (event) {
|
|
24
|
-
event.nativeEvent.stopImmediatePropagation();
|
|
25
|
-
event.stopPropagation();
|
|
26
|
-
|
|
27
|
-
_this.props.onDeleteSelectOption(_this.props.option);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
_this.getContainerStyle = function () {
|
|
31
|
-
var option = _this.props.option;
|
|
32
|
-
return {
|
|
33
|
-
display: 'inline-flex',
|
|
34
|
-
justifyContent: 'center',
|
|
35
|
-
marginRight: '10px',
|
|
36
|
-
padding: '0px 10px',
|
|
37
|
-
height: '20px',
|
|
38
|
-
borderRadius: '10px',
|
|
39
|
-
fontSize: '13px',
|
|
40
|
-
backgroundColor: option.color
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
_this.getOptionStyle = function (option) {
|
|
45
|
-
var textColor = option.textColor || null;
|
|
46
|
-
return {
|
|
47
|
-
flex: 1,
|
|
48
|
-
display: 'flex',
|
|
49
|
-
alignContent: 'center',
|
|
50
|
-
margin: '0 4px 0 2px',
|
|
51
|
-
color: textColor
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
_this.getOperationStyle = function (option) {
|
|
56
|
-
var textColor = option.textColor || null;
|
|
57
|
-
return {
|
|
58
|
-
height: '20px',
|
|
59
|
-
width: '16px',
|
|
60
|
-
cursor: 'pointer',
|
|
61
|
-
color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
|
|
62
|
-
transform: 'scale(.8)'
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
return _this;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
_createClass(SelectEditorOption, [{
|
|
70
|
-
key: "render",
|
|
71
|
-
value: function render() {
|
|
72
|
-
var _this$props = this.props,
|
|
73
|
-
option = _this$props.option,
|
|
74
|
-
isShowRemoveIcon = _this$props.isShowRemoveIcon;
|
|
75
|
-
var containerStyle = this.getContainerStyle();
|
|
76
|
-
var optionStyle = this.getOptionStyle(option);
|
|
77
|
-
var operationStyle = this.getOperationStyle(option);
|
|
78
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
79
|
-
className: "dtable-ui select-option-item",
|
|
80
|
-
style: containerStyle
|
|
81
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
82
|
-
className: "option-info",
|
|
83
|
-
style: optionStyle
|
|
84
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
85
|
-
className: "option-name"
|
|
86
|
-
}, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
|
|
87
|
-
className: "option-remove",
|
|
88
|
-
style: operationStyle,
|
|
89
|
-
onClick: this.onDeleteOption
|
|
90
|
-
}, /*#__PURE__*/React.createElement("i", {
|
|
91
|
-
className: "dtable-font dtable-icon-fork-number",
|
|
92
|
-
style: {
|
|
93
|
-
fontSize: '12px',
|
|
94
|
-
lineHeight: '20px'
|
|
95
|
-
}
|
|
96
|
-
})));
|
|
97
|
-
}
|
|
98
|
-
}]);
|
|
99
|
-
|
|
100
|
-
return SelectEditorOption;
|
|
101
|
-
}(React.Component);
|
|
102
|
-
|
|
103
|
-
SelectEditorOption.defaultProps = {
|
|
104
|
-
isShowRemoveIcon: false
|
|
105
|
-
};
|
|
106
|
-
export default SelectEditorOption;
|
|
@@ -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 };
|