@aloudata/aloudata-design 2.14.6 → 2.14.7

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.
@@ -224,6 +224,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
224
224
  }, prefix), _.isEmpty(displayValues) && /*#__PURE__*/React.createElement("div", {
225
225
  className: setClassNames('placeholder')
226
226
  }, placeholder), !_.isEmpty(displayValues) && /*#__PURE__*/React.createElement(Selector, _extends({}, restProps, {
227
+ suffixIcon: suffixIcon,
227
228
  size: size,
228
229
  mode: mode,
229
230
  dropdownRef: dropdownRef,
@@ -6,4 +6,6 @@ export default function MultipleResponsiveSelectedSection(params: {
6
6
  renderItem: (valueItem: DisplayValueType) => React.JSX.Element | null;
7
7
  onToggleOpen: (open: boolean) => void;
8
8
  dropdownRef: RefObject<RefTriggerProps>;
9
+ maxHeight?: number;
10
+ suffixIcon?: React.ReactNode;
9
11
  }): React.JSX.Element;
@@ -1,9 +1,13 @@
1
1
  import React, { useEffect, useRef } from 'react';
2
+ import ScrollArea from "../../ScrollArea";
3
+ import Suffix from "../components/Suffix";
2
4
  export default function MultipleResponsiveSelectedSection(params) {
3
5
  var displayValues = params.displayValues,
4
6
  renderItem = params.renderItem,
5
7
  onToggleOpen = params.onToggleOpen,
6
- dropdownRef = params.dropdownRef;
8
+ dropdownRef = params.dropdownRef,
9
+ maxHeight = params.maxHeight,
10
+ suffixIcon = params.suffixIcon;
7
11
  var multipleSelectedSectionRef = useRef(null);
8
12
  useEffect(function () {
9
13
  function getSelect() {
@@ -30,5 +34,17 @@ export default function MultipleResponsiveSelectedSection(params) {
30
34
  return /*#__PURE__*/React.createElement("div", {
31
35
  ref: multipleSelectedSectionRef,
32
36
  className: "beta-ald-select-selector-multiple-responsive-selected-section"
33
- }, displayValues.map(renderItem));
37
+ }, /*#__PURE__*/React.createElement(ScrollArea, {
38
+ innerClassName: "beta-ald-select-selector-multiple-responsive-selected-section-inner",
39
+ innerStyle: {
40
+ maxHeight: maxHeight
41
+ }
42
+ }, /*#__PURE__*/React.createElement("div", {
43
+ className: "beta-ald-select-selector-multiple-responsive-selected-section-tags"
44
+ }, displayValues.map(renderItem))), /*#__PURE__*/React.createElement(Suffix, {
45
+ showArrow: true,
46
+ allowClear: false,
47
+ icon: suffixIcon,
48
+ displayValues: displayValues
49
+ }));
34
50
  }
@@ -33,7 +33,8 @@ export default function MultipleSelector(props) {
33
33
  disabled = props.disabled,
34
34
  maxTagPlaceholder = props.maxTagPlaceholder,
35
35
  showResponsiveSelectedSection = props.showResponsiveSelectedSection,
36
- dropdownRef = props.dropdownRef;
36
+ dropdownRef = props.dropdownRef,
37
+ suffixIcon = props.suffixIcon;
37
38
  var innerMaxTagPlaceholder = function innerMaxTagPlaceholder(omittedValues) {
38
39
  return "+ ".concat(omittedValues.length === displayValues.length ? omittedValues.length - 1 : omittedValues.length);
39
40
  };
@@ -44,7 +45,6 @@ export default function MultipleSelector(props) {
44
45
  var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isPreview) {
45
46
  var onMouseDown = function onMouseDown(e) {
46
47
  onPreventMouseDown(e);
47
- onToggleOpen(!open);
48
48
  };
49
49
  return /*#__PURE__*/React.createElement("span", {
50
50
  className: "beta-ald-select-custom-tag-render-wrapper",
@@ -106,15 +106,16 @@ export default function MultipleSelector(props) {
106
106
  };
107
107
  var maxHeight = useMemo(function () {
108
108
  if (isMultiple(mode)) {
109
+ var maxRows;
109
110
  if (_typeof(mode) === 'object') {
110
- var maxRows = mode.maxRows;
111
- if (!maxRows) {
112
- // 2.5行高+2行间距
113
- return 2.5 * tagHeight + 2 * gap;
114
- } else {
115
- // 总行高+总行间距
116
- return maxRows * tagHeight + (maxRows - 1) * gap;
117
- }
111
+ maxRows = mode.maxRows;
112
+ }
113
+ if (!maxRows) {
114
+ // 2.5行高+2行间距
115
+ return 2.5 * tagHeight + 2 * gap;
116
+ } else {
117
+ // 总行高+总行间距
118
+ return maxRows * tagHeight + (maxRows - 1) * gap;
118
119
  }
119
120
  }
120
121
  return undefined;
@@ -139,6 +140,8 @@ export default function MultipleSelector(props) {
139
140
  }), showResponsiveSelectedSection && /*#__PURE__*/React.createElement(MultipleResponsiveSelectedSection, {
140
141
  displayValues: displayValues,
141
142
  renderItem: renderItem,
143
+ maxHeight: maxHeight,
144
+ suffixIcon: suffixIcon,
142
145
  onToggleOpen: onToggleOpen,
143
146
  dropdownRef: dropdownRef
144
147
  }));
@@ -119,14 +119,17 @@
119
119
  position: absolute;
120
120
  top: -1px;
121
121
  left: -1px;
122
- display: flex;
123
- gap: 4px;
124
- flex-wrap: wrap;
125
- align-items: flex-start;
126
122
  border-width: 1px;
127
123
  border-style: solid;
128
124
  background-color: #fff;
129
125
  z-index: 1;
126
+
127
+ .beta-ald-select-selector-multiple-responsive-selected-section-tags {
128
+ align-items: flex-start;
129
+ display: flex !important;
130
+ flex-wrap: wrap;
131
+ gap: 4px;
132
+ }
130
133
  }
131
134
  }
132
135
 
@@ -1,3 +1,4 @@
1
+ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
1
2
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
3
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
4
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -6,7 +7,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
6
7
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
8
  import classNames from 'classnames';
8
9
  import _ from 'lodash';
9
- import React, { useContext, useRef, useState } from 'react';
10
+ import React, { useCallback, useContext, useRef, useState } from 'react';
10
11
  import { DragPreviewImage, useDrag, useDrop } from 'react-dnd';
11
12
  import { EPutPosition } from "../..";
12
13
  import DragLightLine from "../../../Icon/components/DragLightLine";
@@ -144,16 +145,54 @@ export default function LogicItem(_ref) {
144
145
  drop = _useDrop2[1];
145
146
  drag(drop(ref));
146
147
  var isDragOver = isOver && canDrop && !isRoot;
147
- var firstRefCallback = function firstRefCallback(e) {
148
- if (e) {
149
- setFirstNodeHight(e.clientHeight);
150
- }
151
- };
152
- var lastRefCallback = function lastRefCallback(e) {
153
- if (e) {
154
- setLastNodeHight(e.clientHeight);
155
- }
156
- };
148
+ var firstRef = useCallback(function (node) {
149
+ if (!node) return;
150
+ var resizeObserver = new ResizeObserver(function (entries) {
151
+ var _iterator = _createForOfIteratorHelper(entries),
152
+ _step;
153
+ try {
154
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
155
+ var entry = _step.value;
156
+ var newHeight = entry.contentRect.height;
157
+ if (newHeight > 0) {
158
+ setFirstNodeHight(newHeight);
159
+ }
160
+ }
161
+ } catch (err) {
162
+ _iterator.e(err);
163
+ } finally {
164
+ _iterator.f();
165
+ }
166
+ });
167
+ resizeObserver.observe(node);
168
+ return function () {
169
+ resizeObserver.disconnect();
170
+ };
171
+ }, []);
172
+ var lastRef = useCallback(function (node) {
173
+ if (!node) return;
174
+ var resizeObserver = new ResizeObserver(function (entries) {
175
+ var _iterator2 = _createForOfIteratorHelper(entries),
176
+ _step2;
177
+ try {
178
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
179
+ var entry = _step2.value;
180
+ var newHeight = entry.contentRect.height;
181
+ if (newHeight > 0) {
182
+ setLastNodeHight(newHeight);
183
+ }
184
+ }
185
+ } catch (err) {
186
+ _iterator2.e(err);
187
+ } finally {
188
+ _iterator2.f();
189
+ }
190
+ });
191
+ resizeObserver.observe(node);
192
+ return function () {
193
+ resizeObserver.disconnect();
194
+ };
195
+ }, []);
157
196
  var onAddCondition = function onAddCondition() {
158
197
  var id = value.id;
159
198
  addCondition(id);
@@ -195,16 +234,16 @@ export default function LogicItem(_ref) {
195
234
  },
196
235
  ref: ref
197
236
  }, _.map(nodes, function (node, index) {
198
- var ref = null;
237
+ var heightRef = null;
199
238
  if (index === 0) {
200
- ref = firstRefCallback;
239
+ heightRef = firstRef;
201
240
  } else if (index === nodes.length - 1) {
202
- ref = lastRefCallback;
241
+ heightRef = lastRef;
203
242
  }
204
243
  return /*#__PURE__*/React.createElement("div", {
205
244
  className: "ald-logic-tree-node-wrap",
206
- ref: ref,
207
- key: node.id
245
+ key: node.id,
246
+ ref: heightRef
208
247
  }, /*#__PURE__*/React.createElement("div", {
209
248
  className: "ald-logic-tree-horizontal-line"
210
249
  }), /*#__PURE__*/React.createElement(LogicItem, {
@@ -23,7 +23,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
23
23
  render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
24
24
  ellipsis?: boolean | undefined;
25
25
  noPadding?: boolean | undefined;
26
- align?: "center" | "left" | "right" | undefined;
26
+ align?: "left" | "right" | "center" | undefined;
27
27
  fixed?: "left" | "right" | undefined;
28
28
  sortOrder?: "ascend" | "descend" | null | undefined;
29
29
  };