dtable-ui-component 0.3.15 → 0.3.17
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/FieldDisplaySetting/field-item.js +99 -0
- package/lib/FieldDisplaySetting/index.css +74 -0
- package/lib/FieldDisplaySetting/index.js +91 -0
- package/lib/RowExpandFileFormatter/index.css +1 -0
- package/lib/RowExpandImageFormatter/index.css +1 -0
- package/lib/index.js +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React, { useState, useRef } from 'react';
|
|
3
|
+
import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
|
|
4
|
+
import { DTableSwitch } from '../index';
|
|
5
|
+
|
|
6
|
+
function FieldItem(_ref) {
|
|
7
|
+
var field = _ref.field,
|
|
8
|
+
isCollapsed = _ref.isCollapsed,
|
|
9
|
+
onClickField = _ref.onClickField,
|
|
10
|
+
onMoveField = _ref.onMoveField;
|
|
11
|
+
var enteredCounter = 0;
|
|
12
|
+
var fieldItemRef = useRef(null);
|
|
13
|
+
|
|
14
|
+
var _useState = useState(false),
|
|
15
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
16
|
+
isItemDropTipShow = _useState2[0],
|
|
17
|
+
setDropTipShow = _useState2[1];
|
|
18
|
+
|
|
19
|
+
var handleClickField = function handleClickField(e) {
|
|
20
|
+
e.nativeEvent.stopImmediatePropagation();
|
|
21
|
+
var value = e.target.checked;
|
|
22
|
+
if (value === field.shown) return;
|
|
23
|
+
onClickField(field.key, value);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var onDragStart = function onDragStart(e) {
|
|
27
|
+
e.stopPropagation();
|
|
28
|
+
e.dataTransfer.setDragImage(fieldItemRef.current, 10, 10);
|
|
29
|
+
e.dataTransfer.effectAllowed = 'move';
|
|
30
|
+
e.dataTransfer.setData('text/plain', field.key);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
var onTableDragEnter = function onTableDragEnter(e) {
|
|
34
|
+
e.stopPropagation();
|
|
35
|
+
enteredCounter++;
|
|
36
|
+
|
|
37
|
+
if (enteredCounter !== 0 && !isItemDropTipShow) {
|
|
38
|
+
setDropTipShow(true);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
var onDragOver = function onDragOver(e) {
|
|
43
|
+
if (e.dataTransfer.dropEffect === 'copy') {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
e.preventDefault();
|
|
49
|
+
e.dataTransfer.dropEffect = 'move';
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
var onDragLeave = function onDragLeave(e) {
|
|
53
|
+
e.stopPropagation();
|
|
54
|
+
enteredCounter--;
|
|
55
|
+
|
|
56
|
+
if (enteredCounter === 0) {
|
|
57
|
+
setDropTipShow(false);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var onDrop = function onDrop(e) {
|
|
62
|
+
e.stopPropagation();
|
|
63
|
+
e.preventDefault();
|
|
64
|
+
setDropTipShow(false);
|
|
65
|
+
var droppedColumnKey = e.dataTransfer.getData('text/plain');
|
|
66
|
+
if (droppedColumnKey === field.key) return;
|
|
67
|
+
onMoveField(droppedColumnKey, field.key);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
var placeholder = function placeholder() {
|
|
71
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: "field-switch"
|
|
73
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
74
|
+
className: "dtable-font ".concat(COLUMNS_ICON_CONFIG[field.type])
|
|
75
|
+
}), /*#__PURE__*/React.createElement("span", null, field.name));
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
ref: fieldItemRef,
|
|
80
|
+
className: "field-item-container ".concat(isCollapsed ? 'd-none' : ''),
|
|
81
|
+
onDrop: onDrop,
|
|
82
|
+
onDragEnter: onTableDragEnter,
|
|
83
|
+
onDragOver: onDragOver,
|
|
84
|
+
onDragLeave: onDragLeave
|
|
85
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
className: "field-dragbar",
|
|
87
|
+
draggable: "true",
|
|
88
|
+
onDragStart: onDragStart
|
|
89
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
90
|
+
className: "dtable-font dtable-icon-drag pr-2"
|
|
91
|
+
})), /*#__PURE__*/React.createElement(DTableSwitch, {
|
|
92
|
+
checked: field.shown,
|
|
93
|
+
switchClassName: "flex-fill",
|
|
94
|
+
placeholder: placeholder(),
|
|
95
|
+
onChange: handleClickField
|
|
96
|
+
}));
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default FieldItem;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
.field-setting .field-setting-header .expand-button {
|
|
2
|
+
color: #ccc;
|
|
3
|
+
font-size: 10px;
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
transition: transform .3s cubic-bezier(.645,.045,.355,1);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.field-setting .field-setting-header .expand-button.revolving {
|
|
9
|
+
transform: rotate(90deg);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.field-setting .field-setting-header .expand-button:hover {
|
|
13
|
+
color: #3a2121;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.field-setting .field-setting-banner .show-all-button {
|
|
18
|
+
color: #ff8000;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
font-size: 12px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.field-setting .field-setting-body .field-item-container {
|
|
24
|
+
position: relative;
|
|
25
|
+
display: flex;
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
height: 30px;
|
|
28
|
+
line-height: 30px;
|
|
29
|
+
border-radius: 4px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.field-setting .field-setting-body .field-item-container:hover {
|
|
33
|
+
background-color: #f0f0f0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.field-setting .field-setting-body .field-dragbar {
|
|
37
|
+
color: #c2c2c2;
|
|
38
|
+
cursor: grab;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.field-item-container .dtable-switch .custom-switch {
|
|
42
|
+
width: 100%;
|
|
43
|
+
justify-content: space-between;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.field-item-container .dtable-switch .custom-switch .dtable-font {
|
|
47
|
+
-webkit-transform: scale(.8);
|
|
48
|
+
transform: scale(.8);
|
|
49
|
+
display: inline-block;
|
|
50
|
+
line-height: 24px;
|
|
51
|
+
margin-right: 8px;
|
|
52
|
+
color: #666;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.field-item-container .dtable-switch .custom-switch .custom-switch-description {
|
|
56
|
+
width: 192px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.field-item-container .dtable-switch .custom-switch .custom-switch-indicator {
|
|
60
|
+
width: 22px;
|
|
61
|
+
height: 12px;
|
|
62
|
+
border-radius: 6px;
|
|
63
|
+
margin-right: .25rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.field-item-container .dtable-switch .custom-switch .custom-switch-indicator::before {
|
|
67
|
+
height: 8px;
|
|
68
|
+
width: 8px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.field-item-container .dtable-switch .custom-switch-input:checked~.custom-switch-indicator:before {
|
|
72
|
+
left: 12px;
|
|
73
|
+
}
|
|
74
|
+
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import React, { useRef, useState } from 'react';
|
|
4
|
+
import { Label } from 'reactstrap';
|
|
5
|
+
import { Transition } from 'react-transition-group';
|
|
6
|
+
import FieldItem from './field-item';
|
|
7
|
+
import './index.css';
|
|
8
|
+
var FIELD_ITEM_HEIGHT = 30;
|
|
9
|
+
var BANNER_HEIGHT = 24;
|
|
10
|
+
var DURATION = 300;
|
|
11
|
+
|
|
12
|
+
function FieldDisplaySetting(_ref) {
|
|
13
|
+
var fields = _ref.fields,
|
|
14
|
+
textProperties = _ref.textProperties,
|
|
15
|
+
fieldAllShown = _ref.fieldAllShown,
|
|
16
|
+
onClickField = _ref.onClickField,
|
|
17
|
+
onMoveField = _ref.onMoveField,
|
|
18
|
+
onToggleFieldsVisibility = _ref.onToggleFieldsVisibility;
|
|
19
|
+
var nodeRef = useRef(null);
|
|
20
|
+
|
|
21
|
+
var _useState = useState(true),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
isCollapsed = _useState2[0],
|
|
24
|
+
setCollapsed = _useState2[1];
|
|
25
|
+
|
|
26
|
+
var expandAllFields = function expandAllFields() {
|
|
27
|
+
setCollapsed(!isCollapsed);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var defaultStyle = {
|
|
31
|
+
transition: "all ".concat(DURATION, "ms cubic-bezier(.645,.045,.355,1)"),
|
|
32
|
+
opacity: 0
|
|
33
|
+
};
|
|
34
|
+
var transitionStyles = {
|
|
35
|
+
entering: {
|
|
36
|
+
opacity: 1,
|
|
37
|
+
height: "".concat(fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT, "px")
|
|
38
|
+
},
|
|
39
|
+
entered: {
|
|
40
|
+
opacity: 1,
|
|
41
|
+
height: "".concat(fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT, "px")
|
|
42
|
+
},
|
|
43
|
+
exiting: {
|
|
44
|
+
opacity: 0,
|
|
45
|
+
height: 0
|
|
46
|
+
},
|
|
47
|
+
exited: {
|
|
48
|
+
opacity: 0,
|
|
49
|
+
height: 0
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: "field-setting"
|
|
54
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: "field-setting-header d-flex align-items-center justify-content-between",
|
|
56
|
+
onClick: expandAllFields
|
|
57
|
+
}, /*#__PURE__*/React.createElement(Label, {
|
|
58
|
+
className: "mb-0"
|
|
59
|
+
}, textProperties.titleValue), /*#__PURE__*/React.createElement("span", {
|
|
60
|
+
className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
|
|
61
|
+
})), /*#__PURE__*/React.createElement(Transition, {
|
|
62
|
+
nodeRef: nodeRef,
|
|
63
|
+
in: !isCollapsed,
|
|
64
|
+
timeout: DURATION
|
|
65
|
+
}, function (state) {
|
|
66
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
67
|
+
className: "field-setting-wrapper",
|
|
68
|
+
ref: nodeRef,
|
|
69
|
+
style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
|
|
70
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2")
|
|
72
|
+
}, /*#__PURE__*/React.createElement(Label, {
|
|
73
|
+
className: "mb-0"
|
|
74
|
+
}, textProperties.bannerValue), /*#__PURE__*/React.createElement("span", {
|
|
75
|
+
className: "show-all-button",
|
|
76
|
+
onClick: onToggleFieldsVisibility
|
|
77
|
+
}, fieldAllShown ? textProperties.hideValue : textProperties.showValue)), /*#__PURE__*/React.createElement("div", {
|
|
78
|
+
className: "field-setting-body"
|
|
79
|
+
}, fields.map(function (field, index) {
|
|
80
|
+
return /*#__PURE__*/React.createElement(FieldItem, {
|
|
81
|
+
key: "".concat(field.key, "-").concat(index),
|
|
82
|
+
field: field,
|
|
83
|
+
isCollapsed: isCollapsed,
|
|
84
|
+
onClickField: onClickField,
|
|
85
|
+
onMoveField: onMoveField
|
|
86
|
+
});
|
|
87
|
+
})));
|
|
88
|
+
}));
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default FieldDisplaySetting;
|
package/lib/index.js
CHANGED
|
@@ -59,4 +59,6 @@ export { default as DTableSwitch } from './DTableSwitch';
|
|
|
59
59
|
export { default as DTableCustomizeSelect } from './DTableCustomizeSelect';
|
|
60
60
|
export { default as DTableCustomizeCollaboratorSelect } from './DTableCustomizeCollaboratorSelect';
|
|
61
61
|
export { default as DTableSearchInput } from './DTableSearchInput';
|
|
62
|
-
export { default as ModalPortal } from './ModalPortal';
|
|
62
|
+
export { default as ModalPortal } from './ModalPortal'; // setting
|
|
63
|
+
|
|
64
|
+
export { default as FieldDisplaySetting } from './FieldDisplaySetting';
|