dtable-ui-component 7.0.1-beta.2 → 7.0.1-beta.btn1

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.
Files changed (38) hide show
  1. package/lib/AsyncUserSelect/index.css +18 -36
  2. package/lib/AsyncUserSelect/index.js +18 -29
  3. package/lib/DTableCustomizeCollaboratorSelect/index.css +86 -0
  4. package/lib/DTableCustomizeCollaboratorSelect/index.js +158 -0
  5. package/lib/DTableCustomizeSelect/index.css +42 -120
  6. package/lib/DTableCustomizeSelect/index.js +4 -9
  7. package/lib/DTableFiltersPopover/index.js +9 -8
  8. package/lib/DTableFiltersPopover/utils/filter-item-utils.js +19 -7
  9. package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js +9 -5
  10. package/lib/DTableFiltersPopover/widgets/filter-group.js +1 -1
  11. package/lib/DTableFiltersPopover/widgets/filter-item.js +8 -16
  12. package/lib/DTableFiltersPopover/widgets/filter-list/index.css +6 -8
  13. package/lib/DTableGroupSelect/index.css +96 -0
  14. package/lib/DTableGroupSelect/index.js +131 -0
  15. package/lib/DTableGroupSelect/option.js +42 -0
  16. package/lib/DTableGroupSelect/select-option-group.css +54 -0
  17. package/lib/DTableGroupSelect/select-option-group.js +227 -0
  18. package/lib/DTableModalHeader/index.js +3 -10
  19. package/lib/DTableSelect/dtable-select-label.css +4 -4
  20. package/lib/DTableSelect/dtable-select-label.js +1 -1
  21. package/lib/DTableSelect/index.js +3 -3
  22. package/lib/DTableSelect/user-select.css +46 -7
  23. package/lib/DTableSelect/utils.js +79 -165
  24. package/lib/FieldDisplaySetting/index.js +1 -1
  25. package/lib/SelectItem/index.js +1 -1
  26. package/lib/SelectOptionGroup/KeyCodes.js +4 -96
  27. package/lib/SelectOptionGroup/index.css +52 -74
  28. package/lib/SelectOptionGroup/index.js +26 -35
  29. package/lib/SelectOptionGroup/option.js +4 -16
  30. package/lib/index.js +10 -3
  31. package/package.json +1 -1
  32. package/lib/DTableCustomizeSearchInput/index.css +0 -81
  33. package/lib/DTableCustomizeSearchInput/index.js +0 -136
  34. package/lib/DTableModalHeader/index.css +0 -22
  35. package/lib/DTableSelect/select-dropdown-indicator/index.css +0 -16
  36. package/lib/DTableSelect/select-dropdown-indicator/index.js +0 -24
  37. package/lib/assets/icons/close.svg +0 -1
  38. package/lib/assets/icons/down.svg +0 -3
@@ -1,136 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _classnames = _interopRequireDefault(require("classnames"));
11
- var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
12
- require("./index.css");
13
- var _jsxRuntime = require("react/jsx-runtime");
14
- class DTableCustomizeSearchInput extends _react.Component {
15
- constructor(props) {
16
- super(props);
17
- this.onCompositionStart = () => {
18
- this.isInputtingChinese = true;
19
- };
20
- this.onChange = e => {
21
- this.timer && clearTimeout(this.timer);
22
- const _this$props = this.props,
23
- onChange = _this$props.onChange,
24
- _this$props$wait = _this$props.wait,
25
- wait = _this$props$wait === void 0 ? 100 : _this$props$wait;
26
- let text = e.target.value;
27
- this.setState({
28
- searchValue: text || ''
29
- }, () => {
30
- if (this.isInputtingChinese) return;
31
- this.timer = setTimeout(() => {
32
- onChange && onChange(this.state.searchValue.trim());
33
- }, wait);
34
- });
35
- };
36
- this.onCompositionEnd = e => {
37
- this.isInputtingChinese = false;
38
- this.onChange(e);
39
- };
40
- this.clearSearch = e => {
41
- e && e.stopPropagation && e.stopPropagation();
42
- const clearValue = this.props.clearValue;
43
- this.setState({
44
- searchValue: ''
45
- }, () => {
46
- clearValue && clearValue();
47
- });
48
- };
49
- this.setFocus = isSelectAllText => {
50
- if (this.inputRef === document.activeElement) return;
51
- this.inputRef.focus();
52
- if (isSelectAllText) {
53
- const txtLength = this.state.searchValue.length;
54
- this.inputRef.setSelectionRange(0, txtLength);
55
- }
56
- };
57
- this.renderClear = () => {
58
- const _this$props2 = this.props,
59
- isClearable = _this$props2.isClearable,
60
- clearClassName = _this$props2.clearClassName;
61
- const searchValue = this.state.searchValue;
62
- if (!isClearable || !searchValue) return null;
63
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
64
- className: (0, _classnames.default)('search-text-clear input-icon-addon', clearClassName),
65
- style: {
66
- fontSize: '12px'
67
- },
68
- onClick: this.clearSearch,
69
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
70
- symbol: "close",
71
- color: "var(--bs-icon-secondary-color)"
72
- })
73
- });
74
- };
75
- this.state = {
76
- searchValue: props.value || ''
77
- };
78
- this.isInputtingChinese = false;
79
- this.timer = null;
80
- this.inputRef = null;
81
- }
82
- componentDidMount() {
83
- if (this.props.autoFocus && this.inputRef && this.inputRef !== document.activeElement) {
84
- setTimeout(() => {
85
- this.inputRef.focus();
86
- }, 0);
87
- }
88
- }
89
- UNSAFE_componentWillReceiveProps(nextProps) {
90
- if (nextProps.value !== this.props.value) {
91
- this.setState({
92
- searchValue: nextProps.value
93
- });
94
- }
95
- }
96
- componentWillUnmount() {
97
- this.timer && clearTimeout(this.timer);
98
- this.timer = null;
99
- this.inputRef = null;
100
- }
101
- render() {
102
- const _this$props3 = this.props,
103
- placeholder = _this$props3.placeholder,
104
- autoFocus = _this$props3.autoFocus,
105
- className = _this$props3.className,
106
- onKeyDown = _this$props3.onKeyDown,
107
- _this$props3$disabled = _this$props3.disabled,
108
- disabled = _this$props3$disabled === void 0 ? false : _this$props3$disabled,
109
- _this$props3$style = _this$props3.style,
110
- style = _this$props3$style === void 0 ? {} : _this$props3$style,
111
- isClearable = _this$props3.isClearable,
112
- _this$props3$isMultip = _this$props3.isMultiple,
113
- isMultiple = _this$props3$isMultip === void 0 ? false : _this$props3$isMultip;
114
- const searchValue = this.state.searchValue;
115
- const inputWidth = isClearable && searchValue && !isMultiple ? 'calc(100% - 40px)' : '100%';
116
- style.width = inputWidth;
117
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
118
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
119
- type: "text",
120
- name: "search-input",
121
- value: searchValue,
122
- className: (0, _classnames.default)('form-control', className),
123
- onChange: this.onChange,
124
- autoFocus: autoFocus,
125
- placeholder: placeholder,
126
- onCompositionStart: this.onCompositionStart,
127
- onCompositionEnd: this.onCompositionEnd,
128
- onKeyDown: onKeyDown,
129
- disabled: disabled,
130
- style: style,
131
- ref: ref => this.inputRef = ref
132
- }), this.renderClear()]
133
- });
134
- }
135
- }
136
- var _default = exports.default = DTableCustomizeSearchInput;
@@ -1,22 +0,0 @@
1
- .modal-header .dtable-modal-close.close {
2
- padding: 14px 16px;
3
- opacity: 1;
4
- margin: -1rem -1rem -1rem auto;
5
- background-color: transparent;
6
- border: 0;
7
- float: right;
8
- font-size: 1.40625rem;
9
- font-weight: 700;
10
- line-height: 1;
11
- color: #000;
12
- }
13
-
14
- .modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
15
- opacity: 1;
16
- }
17
-
18
- .modal-header .dtable-modal-close .dtable-modal-close-inner {
19
- width: 28px;
20
- height: 28px;
21
- font-size: 22.5px; /* same with Seafile close icon */
22
- }
@@ -1,16 +0,0 @@
1
- .select-dropdown-indicator {
2
- position: absolute;
3
- top: 50%;
4
- right: 18px;
5
- transform: translateY(-50%);
6
- margin-left: -2px;
7
- }
8
-
9
- .select-dropdown-indicator svg {
10
- width: 12px;
11
- height: 12px;
12
- }
13
-
14
- .dis-multicolor-icon-down {
15
- opacity: 0.65 !important;
16
- }
@@ -1,24 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
10
- require("./index.css");
11
- var _jsxRuntime = require("react/jsx-runtime");
12
- const SelectDropdownIndicator = _ref => {
13
- let isDisabled = _ref.isDisabled;
14
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
15
- className: "select-dropdown-indicator d-flex align-items-center",
16
- "aria-hidden": "true",
17
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
18
- symbol: "down",
19
- color: "var(--bs-icon-color)",
20
- className: isDisabled ? 'dis-multicolor-icon-down' : ''
21
- })
22
- });
23
- };
24
- var _default = exports.default = SelectDropdownIndicator;
@@ -1 +0,0 @@
1
- <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718937171668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z" p-id="18369" fill="currentColor"></path></svg>
@@ -1,3 +0,0 @@
1
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M3.27148 11.2718L6.09991 8.44336L15.9994 18.3429L25.8989 8.44336L28.7273 11.2718L15.9994 23.9997L3.27148 11.2718Z" fill="currentColor"/>
3
- </svg>