@pisell/materials 1.0.605 → 1.0.607

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 (110) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +1 -1
  6. package/build/lowcode/preview.js +154 -146
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +29 -29
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +30 -30
  11. package/es/components/Pagination/index.d.ts +1 -1
  12. package/es/components/appVersionControl/index.less +3 -0
  13. package/es/components/dataSourceComponents/dataSourceForm/utils.js +6 -9
  14. package/es/components/dataSourceComponents/fields/Input.Subdomain/WithMode.js +4 -2
  15. package/es/components/dataSourceComponents/fields/index.d.ts +1 -1
  16. package/es/components/dataSourceComponents/provider/variables/VariablesProvider.js +3 -0
  17. package/es/components/pisellDraggable/components/Action/Action.d.ts +10 -0
  18. package/es/components/pisellDraggable/components/Action/Action.js +31 -0
  19. package/es/components/pisellDraggable/components/Action/Action.less +50 -0
  20. package/es/components/pisellDraggable/components/Action/index.d.ts +2 -0
  21. package/es/components/pisellDraggable/components/Action/index.js +1 -0
  22. package/es/components/pisellDraggable/components/Handle/Handle.d.ts +3 -0
  23. package/es/components/pisellDraggable/components/Handle/Handle.js +15 -0
  24. package/es/components/pisellDraggable/components/Handle/index.d.ts +1 -0
  25. package/es/components/pisellDraggable/components/Handle/index.js +1 -0
  26. package/es/components/pisellDraggable/components/Remove/Remove.d.ts +3 -0
  27. package/es/components/pisellDraggable/components/Remove/Remove.js +17 -0
  28. package/es/components/pisellDraggable/components/Remove/index.d.ts +1 -0
  29. package/es/components/pisellDraggable/components/Remove/index.js +1 -0
  30. package/es/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts +8 -0
  31. package/es/components/pisellDraggable/components/TreeItem/SortableTreeItem.js +51 -0
  32. package/es/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +21 -0
  33. package/es/components/pisellDraggable/components/TreeItem/TreeItem.js +57 -0
  34. package/es/components/pisellDraggable/components/TreeItem/TreeItem.less +128 -0
  35. package/es/components/pisellDraggable/components/TreeItem/index.d.ts +2 -0
  36. package/es/components/pisellDraggable/components/TreeItem/index.js +2 -0
  37. package/es/components/pisellDraggable/components/index.d.ts +4 -0
  38. package/es/components/pisellDraggable/components/index.js +4 -0
  39. package/es/components/pisellDraggable/index.d.ts +27 -3
  40. package/es/components/pisellDraggable/index.js +380 -2
  41. package/es/components/pisellDraggable/types.d.ts +15 -99
  42. package/es/components/pisellDraggable/utilities.d.ts +17 -0
  43. package/es/components/pisellDraggable/utilities.js +230 -0
  44. package/es/components/pisellModal/components/Information/index.js +0 -1
  45. package/es/components/table/Table/utils.d.ts +1 -1
  46. package/es/components/versionModal/index.js +3 -1
  47. package/es/components/versionModal/index.less +9 -2
  48. package/es/locales/en-US.d.ts +6 -6
  49. package/es/locales/en-US.js +16 -22
  50. package/es/locales/zh-CN.d.ts +6 -6
  51. package/es/locales/zh-CN.js +15 -21
  52. package/es/locales/zh-TW.d.ts +6 -6
  53. package/es/locales/zh-TW.js +17 -23
  54. package/lib/components/Pagination/index.d.ts +1 -1
  55. package/lib/components/appVersionControl/index.less +3 -0
  56. package/lib/components/dataSourceComponents/dataSourceForm/utils.js +0 -6
  57. package/lib/components/dataSourceComponents/fields/Input.Subdomain/WithMode.js +2 -2
  58. package/lib/components/dataSourceComponents/fields/index.d.ts +1 -1
  59. package/lib/components/dataSourceComponents/provider/variables/VariablesProvider.js +3 -0
  60. package/lib/components/pisellDraggable/components/Action/Action.d.ts +10 -0
  61. package/lib/components/pisellDraggable/components/Action/Action.js +60 -0
  62. package/lib/components/pisellDraggable/components/Action/Action.less +50 -0
  63. package/lib/components/pisellDraggable/components/Action/index.d.ts +2 -0
  64. package/lib/components/pisellDraggable/components/Action/index.js +29 -0
  65. package/lib/components/pisellDraggable/components/Handle/Handle.d.ts +3 -0
  66. package/lib/components/pisellDraggable/components/Handle/Handle.js +54 -0
  67. package/lib/components/pisellDraggable/components/Handle/index.d.ts +1 -0
  68. package/lib/components/pisellDraggable/components/Handle/index.js +29 -0
  69. package/lib/components/pisellDraggable/components/Remove/Remove.d.ts +3 -0
  70. package/lib/components/pisellDraggable/components/Remove/Remove.js +53 -0
  71. package/lib/components/pisellDraggable/components/Remove/index.d.ts +1 -0
  72. package/lib/components/pisellDraggable/components/Remove/index.js +29 -0
  73. package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts +8 -0
  74. package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.js +83 -0
  75. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +21 -0
  76. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.js +93 -0
  77. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.less +128 -0
  78. package/lib/components/pisellDraggable/components/TreeItem/index.d.ts +2 -0
  79. package/lib/components/pisellDraggable/components/TreeItem/index.js +32 -0
  80. package/lib/components/pisellDraggable/components/index.d.ts +4 -0
  81. package/lib/components/pisellDraggable/components/index.js +40 -0
  82. package/lib/components/pisellDraggable/index.d.ts +27 -3
  83. package/lib/components/pisellDraggable/index.js +237 -2
  84. package/lib/components/pisellDraggable/types.d.ts +15 -99
  85. package/lib/components/pisellDraggable/utilities.d.ts +17 -0
  86. package/lib/components/pisellDraggable/utilities.js +190 -0
  87. package/lib/components/pisellModal/components/Information/index.js +0 -1
  88. package/lib/components/table/Table/utils.d.ts +1 -1
  89. package/lib/components/versionModal/index.js +1 -1
  90. package/lib/components/versionModal/index.less +9 -2
  91. package/lib/locales/en-US.d.ts +6 -6
  92. package/lib/locales/en-US.js +8 -0
  93. package/lib/locales/zh-CN.d.ts +6 -6
  94. package/lib/locales/zh-CN.js +7 -0
  95. package/lib/locales/zh-TW.d.ts +6 -6
  96. package/lib/locales/zh-TW.js +7 -0
  97. package/lowcode/custom-select/meta.ts +11 -15
  98. package/lowcode/data-source-menu/meta.ts +1 -1
  99. package/lowcode/form-item-translation/meta.ts +59 -1
  100. package/package.json +1 -1
  101. package/es/components/pisellDraggable/PisellDraggable.d.ts +0 -18
  102. package/es/components/pisellDraggable/PisellDraggable.js +0 -190
  103. package/es/components/pisellDraggable/PisellDraggable.less +0 -154
  104. package/es/components/pisellDraggable/SortableItem.d.ts +0 -41
  105. package/es/components/pisellDraggable/SortableItem.js +0 -115
  106. package/lib/components/pisellDraggable/PisellDraggable.d.ts +0 -18
  107. package/lib/components/pisellDraggable/PisellDraggable.js +0 -175
  108. package/lib/components/pisellDraggable/PisellDraggable.less +0 -154
  109. package/lib/components/pisellDraggable/SortableItem.d.ts +0 -41
  110. package/lib/components/pisellDraggable/SortableItem.js +0 -127
@@ -5,7 +5,7 @@ export declare const paginationConfig: {
5
5
  className: string;
6
6
  defaultCurrent: number;
7
7
  showTotal: (total: number, range: [number, number]) => string;
8
- itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
8
+ itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
9
9
  responsive: boolean;
10
10
  size: string;
11
11
  };
@@ -8,6 +8,9 @@
8
8
  justify-content: center;
9
9
  gap: 12px;
10
10
  padding: 12px !important;
11
+ &::after {
12
+ display: none;
13
+ }
11
14
  .pisell-lowcode-app-version-control-avatar {
12
15
  display: flex;
13
16
  .pisell-lowcode-avatar-string {
@@ -170,7 +170,7 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
170
170
  }));
171
171
  break;
172
172
  case 'phone':
173
- rules.push(_objectSpread(_objectSpread({}, typeobj), {}, {
173
+ rules.push({
174
174
  validator: function validator(_, value) {
175
175
  // 如果值为空或者只有空格,直接返回成功,不进行校验
176
176
  if (!(value !== null && value !== void 0 && value.trim())) {
@@ -189,10 +189,10 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
189
189
  return Promise.reject(new Error(typeobj.message || getText('pisell-data-source-form-phone-message')));
190
190
  }
191
191
  }
192
- }));
192
+ });
193
193
  break;
194
194
  case 'mobile':
195
- rules.push(_objectSpread(_objectSpread({}, typeobj), {}, {
195
+ rules.push({
196
196
  validator: function validator(_, value) {
197
197
  // 如果值为空或者只有空格,直接返回成功,不进行校验
198
198
  if (!(value !== null && value !== void 0 && value.trim())) {
@@ -232,16 +232,13 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
232
232
  return Promise.resolve();
233
233
  }
234
234
  }
235
- }));
235
+ });
236
236
  break;
237
237
  case 'subdomain':
238
- rules.push(_objectSpread(_objectSpread({}, typeobj), {}, {
238
+ rules.push({
239
239
  validator: function validator(_, value) {
240
240
  if (!value) return Promise.resolve();
241
241
  var subdomain = value.split('.')[0];
242
- if (!subdomain) {
243
- return Promise.resolve();
244
- }
245
242
  if (!/^[a-z0-9-]+$/.test(subdomain)) {
246
243
  return Promise.reject(new Error(getText('subdomain-error-pattern')));
247
244
  }
@@ -256,7 +253,7 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
256
253
  }
257
254
  return Promise.resolve();
258
255
  }
259
- }));
256
+ });
260
257
  break;
261
258
  }
262
259
  }
@@ -171,7 +171,8 @@ var Subdomain = function Subdomain(props) {
171
171
  var _parseExternalValue2 = parseExternalValue(inputValue),
172
172
  newSubdomain = _parseExternalValue2.subdomain;
173
173
  setSubdomain(newSubdomain);
174
- propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(newSubdomain + suffix);
174
+ // 当输入为空时,传递空字符串而不是带后缀的值
175
+ propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(newSubdomain ? newSubdomain + suffix : '');
175
176
  } catch (error) {
176
177
  console.error('Error handling change:', error);
177
178
  }
@@ -181,7 +182,8 @@ var Subdomain = function Subdomain(props) {
181
182
  var onBlur = useCallback(function (e) {
182
183
  try {
183
184
  propsOnBlur === null || propsOnBlur === void 0 ? void 0 : propsOnBlur(e);
184
- propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(subdomain + suffix);
185
+ // 当输入为空时,传递空字符串而不是带后缀的值
186
+ propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(subdomain ? subdomain + suffix : '');
185
187
  } catch (error) {
186
188
  console.error('Error handling blur:', error);
187
189
  }
@@ -59,7 +59,7 @@ declare const formFieldMap: {
59
59
  FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
60
60
  FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
61
61
  };
62
- declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<any> | (import("react").FC<{}> & {
62
+ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
63
63
  Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
64
64
  } & {
65
65
  Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -40,6 +40,9 @@ var VariablesProvider = function VariablesProvider(props) {
40
40
  // 初始变量中包含 URL 参数
41
41
  var variablesRef = useRef(mergeWith(variables, {
42
42
  global: {
43
+ value: {
44
+ query: initialQuery
45
+ },
43
46
  query: initialQuery
44
47
  }
45
48
  }, defaultCustomizer));
@@ -0,0 +1,10 @@
1
+ import React, { CSSProperties } from 'react';
2
+ import './Action.less';
3
+ export interface Props extends React.HTMLAttributes<HTMLButtonElement> {
4
+ active?: {
5
+ fill: string;
6
+ background: string;
7
+ };
8
+ cursor?: CSSProperties['cursor'];
9
+ }
10
+ export declare const Action: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,31 @@
1
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
+ var _excluded = ["active", "className", "cursor", "style"];
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
8
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
9
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
+ import classNames from 'classnames';
12
+ import React, { forwardRef } from 'react';
13
+ import "./Action.less";
14
+ export var Action = /*#__PURE__*/forwardRef(function (_ref, ref) {
15
+ var active = _ref.active,
16
+ className = _ref.className,
17
+ cursor = _ref.cursor,
18
+ style = _ref.style,
19
+ props = _objectWithoutProperties(_ref, _excluded);
20
+ return /*#__PURE__*/React.createElement("button", _extends({
21
+ ref: ref
22
+ }, props, {
23
+ className: classNames('Action', className),
24
+ tabIndex: 0,
25
+ style: _objectSpread(_objectSpread({}, style), {}, {
26
+ cursor: cursor,
27
+ '--fill': active === null || active === void 0 ? void 0 : active.fill,
28
+ '--background': active === null || active === void 0 ? void 0 : active.background
29
+ })
30
+ }));
31
+ });
@@ -0,0 +1,50 @@
1
+ @focused-outline-color: #4c9ffe;
2
+
3
+ .Action {
4
+ display: flex;
5
+ width: 12px;
6
+ padding: 15px;
7
+ align-items: center;
8
+ justify-content: center;
9
+ flex: 0 0 auto;
10
+ touch-action: none;
11
+ cursor: var(--cursor, pointer);
12
+ border-radius: 5px;
13
+ border: none;
14
+ outline: none;
15
+ appearance: none;
16
+ background-color: transparent;
17
+ -webkit-tap-highlight-color: transparent;
18
+
19
+ @media (hover: hover) {
20
+ &:hover {
21
+ background-color: var(--action-background, rgba(0, 0, 0, 0.05));
22
+
23
+ svg {
24
+ fill: #6f7b88;
25
+ }
26
+ }
27
+ }
28
+
29
+ svg {
30
+ flex: 0 0 auto;
31
+ margin: auto;
32
+ height: 100%;
33
+ overflow: visible;
34
+ fill: #919eab;
35
+ }
36
+
37
+ &:active {
38
+ background-color: var(--background, rgba(0, 0, 0, 0.05));
39
+
40
+ svg {
41
+ fill: var(--fill, #788491);
42
+ }
43
+ }
44
+
45
+ &:focus-visible {
46
+ outline: none;
47
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
48
+ 0 0px 0px 2px @focused-outline-color;
49
+ }
50
+ }
@@ -0,0 +1,2 @@
1
+ export { Action } from './Action';
2
+ export type { Props as ActionProps } from './Action';
@@ -0,0 +1 @@
1
+ export { Action } from "./Action";
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { ActionProps } from '../Action';
3
+ export declare const Handle: React.ForwardRefExoticComponent<ActionProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,15 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+ import React, { forwardRef } from 'react';
3
+ import { Action } from "../Action";
4
+ export var Handle = /*#__PURE__*/forwardRef(function (props, ref) {
5
+ return /*#__PURE__*/React.createElement(Action, _extends({
6
+ ref: ref,
7
+ cursor: "grab",
8
+ "data-cypress": "draggable-handle"
9
+ }, props), /*#__PURE__*/React.createElement("svg", {
10
+ viewBox: "0 0 20 20",
11
+ width: "12"
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
14
+ })));
15
+ });
@@ -0,0 +1 @@
1
+ export { Handle } from './Handle';
@@ -0,0 +1 @@
1
+ export { Handle } from "./Handle";
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { ActionProps } from '../Action';
3
+ export declare function Remove(props: ActionProps): React.JSX.Element;
@@ -0,0 +1,17 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+ import React from 'react';
3
+ import { Action } from "../Action";
4
+ export function Remove(props) {
5
+ return /*#__PURE__*/React.createElement(Action, _extends({}, props, {
6
+ active: {
7
+ fill: 'rgba(255, 70, 70, 0.95)',
8
+ background: 'rgba(255, 70, 70, 0.1)'
9
+ }
10
+ }), /*#__PURE__*/React.createElement("svg", {
11
+ width: "8",
12
+ viewBox: "0 0 22 22",
13
+ xmlns: "http://www.w3.org/2000/svg"
14
+ }, /*#__PURE__*/React.createElement("path", {
15
+ d: "M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z"
16
+ })));
17
+ }
@@ -0,0 +1 @@
1
+ export { Remove } from './Remove';
@@ -0,0 +1 @@
1
+ export { Remove } from "./Remove";
@@ -0,0 +1,8 @@
1
+ import type { UniqueIdentifier } from '@dnd-kit/core';
2
+ import React from 'react';
3
+ import { Props as TreeItemProps } from './TreeItem';
4
+ interface Props extends TreeItemProps {
5
+ id: UniqueIdentifier;
6
+ }
7
+ export declare function SortableTreeItem({ id, depth, ...props }: Props): React.JSX.Element;
8
+ export {};
@@ -0,0 +1,51 @@
1
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
+ var _excluded = ["id", "depth"];
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
8
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
9
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
+ import { useSortable } from '@dnd-kit/sortable';
12
+ import { CSS } from '@dnd-kit/utilities';
13
+ import React from 'react';
14
+ import { iOS } from "../../utilities";
15
+ import { TreeItem } from "./TreeItem";
16
+ var animateLayoutChanges = function animateLayoutChanges(_ref) {
17
+ var isSorting = _ref.isSorting,
18
+ wasDragging = _ref.wasDragging;
19
+ return isSorting || wasDragging ? false : true;
20
+ };
21
+ export function SortableTreeItem(_ref2) {
22
+ var id = _ref2.id,
23
+ depth = _ref2.depth,
24
+ props = _objectWithoutProperties(_ref2, _excluded);
25
+ var _useSortable = useSortable({
26
+ id: id,
27
+ animateLayoutChanges: animateLayoutChanges
28
+ }),
29
+ attributes = _useSortable.attributes,
30
+ isDragging = _useSortable.isDragging,
31
+ isSorting = _useSortable.isSorting,
32
+ listeners = _useSortable.listeners,
33
+ setDraggableNodeRef = _useSortable.setDraggableNodeRef,
34
+ setDroppableNodeRef = _useSortable.setDroppableNodeRef,
35
+ transform = _useSortable.transform,
36
+ transition = _useSortable.transition;
37
+ var style = {
38
+ transform: CSS.Translate.toString(transform),
39
+ transition: transition
40
+ };
41
+ return /*#__PURE__*/React.createElement(TreeItem, _extends({
42
+ ref: setDraggableNodeRef,
43
+ wrapperRef: setDroppableNodeRef,
44
+ style: style,
45
+ depth: depth,
46
+ ghost: isDragging,
47
+ disableSelection: iOS,
48
+ disableInteraction: isSorting,
49
+ handleProps: _objectSpread(_objectSpread({}, attributes), listeners)
50
+ }, props));
51
+ }
@@ -0,0 +1,21 @@
1
+ import React, { HTMLAttributes } from 'react';
2
+ import type { TreeItem as TreeItemType } from '../../types';
3
+ import './TreeItem.less';
4
+ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
5
+ childCount?: number;
6
+ clone?: boolean;
7
+ collapsed?: boolean;
8
+ depth: number;
9
+ disableInteraction?: boolean;
10
+ disableSelection?: boolean;
11
+ ghost?: boolean;
12
+ handleProps?: any;
13
+ indicator?: boolean;
14
+ indentationWidth: number;
15
+ onCollapse?(): void;
16
+ onRemove?(): void;
17
+ wrapperRef?(node: HTMLLIElement): void;
18
+ item: TreeItemType;
19
+ renderItem?(item: TreeItemType): React.ReactNode;
20
+ }
21
+ export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,57 @@
1
+ var _excluded = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "style", "wrapperRef", "item", "renderItem"];
2
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
+ import classNames from 'classnames';
6
+ import React, { forwardRef } from 'react';
7
+ import { Action, Handle, Remove } from "../../components";
8
+ import "./TreeItem.less";
9
+ export var TreeItem = /*#__PURE__*/forwardRef(function (props, ref) {
10
+ var childCount = props.childCount,
11
+ clone = props.clone,
12
+ depth = props.depth,
13
+ disableSelection = props.disableSelection,
14
+ disableInteraction = props.disableInteraction,
15
+ ghost = props.ghost,
16
+ handleProps = props.handleProps,
17
+ indentationWidth = props.indentationWidth,
18
+ indicator = props.indicator,
19
+ collapsed = props.collapsed,
20
+ onCollapse = props.onCollapse,
21
+ onRemove = props.onRemove,
22
+ style = props.style,
23
+ wrapperRef = props.wrapperRef,
24
+ item = props.item,
25
+ renderItem = props.renderItem,
26
+ otherProps = _objectWithoutProperties(props, _excluded);
27
+ if (renderItem) {
28
+ return renderItem(props);
29
+ }
30
+ return /*#__PURE__*/React.createElement("li", _extends({
31
+ className: classNames('Wrapper', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
32
+ ref: wrapperRef,
33
+ style: {
34
+ '--spacing': "".concat(indentationWidth * depth, "px")
35
+ }
36
+ }, otherProps), /*#__PURE__*/React.createElement("div", {
37
+ className: 'TreeItem',
38
+ ref: ref,
39
+ style: style
40
+ }, /*#__PURE__*/React.createElement(Handle, handleProps), onCollapse && /*#__PURE__*/React.createElement(Action, {
41
+ onClick: onCollapse,
42
+ className: classNames('Collapse', collapsed && 'collapsed')
43
+ }, collapseIcon), /*#__PURE__*/React.createElement("span", {
44
+ className: 'Text'
45
+ }, item.id), !clone && onRemove && /*#__PURE__*/React.createElement(Remove, {
46
+ onClick: onRemove
47
+ }), clone && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
48
+ className: 'Count'
49
+ }, childCount) : null));
50
+ });
51
+ var collapseIcon = /*#__PURE__*/React.createElement("svg", {
52
+ width: "10",
53
+ xmlns: "http://www.w3.org/2000/svg",
54
+ viewBox: "0 0 70 41"
55
+ }, /*#__PURE__*/React.createElement("path", {
56
+ d: "M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
57
+ }));
@@ -0,0 +1,128 @@
1
+ .Wrapper {
2
+ list-style: none;
3
+ box-sizing: border-box;
4
+ padding-left: var(--spacing);
5
+ margin-bottom: -1px;
6
+
7
+ &.clone {
8
+ display: inline-block;
9
+ pointer-events: none;
10
+ padding: 0;
11
+ padding-left: 10px;
12
+ padding-top: 5px;
13
+
14
+ .TreeItem {
15
+ --vertical-padding: 5px;
16
+
17
+ padding-right: 24px;
18
+ border-radius: 4px;
19
+ box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
20
+ }
21
+ }
22
+
23
+ &.ghost {
24
+ &.indicator {
25
+ opacity: 1;
26
+ position: relative;
27
+ z-index: 1;
28
+ margin-bottom: -1px;
29
+
30
+ .TreeItem {
31
+ position: relative;
32
+ padding: 0;
33
+ height: 8px;
34
+ border-color: #2389ff;
35
+ background-color: #56a1f8;
36
+
37
+ &:before {
38
+ position: absolute;
39
+ left: -8px;
40
+ top: -4px;
41
+ display: block;
42
+ content: '';
43
+ width: 12px;
44
+ height: 12px;
45
+ border-radius: 50%;
46
+ border: 1px solid #2389ff;
47
+ background-color: #ffffff;
48
+ }
49
+
50
+ >* {
51
+ /* Items are hidden using height and opacity to retain focus */
52
+ opacity: 0;
53
+ height: 0;
54
+ }
55
+ }
56
+ }
57
+
58
+ &:not(.indicator) {
59
+ opacity: 0.5;
60
+ }
61
+
62
+ .TreeItem>* {
63
+ box-shadow: none;
64
+ background-color: transparent;
65
+ }
66
+ }
67
+ }
68
+
69
+ .TreeItem {
70
+ --vertical-padding: 10px;
71
+
72
+ position: relative;
73
+ display: flex;
74
+ align-items: center;
75
+ padding: var(--vertical-padding) 10px;
76
+ background-color: #fff;
77
+ border: 1px solid #dedede;
78
+ color: #222;
79
+ box-sizing: border-box;
80
+ }
81
+
82
+ .Text {
83
+ flex-grow: 1;
84
+ padding-left: 0.5rem;
85
+ white-space: nowrap;
86
+ text-overflow: ellipsis;
87
+ overflow: hidden;
88
+ }
89
+
90
+ .Count {
91
+ position: absolute;
92
+ top: -10px;
93
+ right: -10px;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ width: 24px;
98
+ height: 24px;
99
+ border-radius: 50%;
100
+ background-color: #2389ff;
101
+ font-size: 0.8rem;
102
+ font-weight: 600;
103
+ color: #fff;
104
+ }
105
+
106
+ .disableInteraction {
107
+ pointer-events: none;
108
+ }
109
+
110
+ .disableSelection,
111
+ .clone {
112
+
113
+ .Text,
114
+ .Count {
115
+ user-select: none;
116
+ -webkit-user-select: none;
117
+ }
118
+ }
119
+
120
+ .Collapse {
121
+ svg {
122
+ transition: transform 250ms ease;
123
+ }
124
+
125
+ &.collapsed svg {
126
+ transform: rotate(-90deg);
127
+ }
128
+ }
@@ -0,0 +1,2 @@
1
+ export { TreeItem } from './TreeItem';
2
+ export { SortableTreeItem } from './SortableTreeItem';
@@ -0,0 +1,2 @@
1
+ export { TreeItem } from "./TreeItem";
2
+ export { SortableTreeItem } from "./SortableTreeItem";
@@ -0,0 +1,4 @@
1
+ export { Action } from './Action';
2
+ export { Handle } from './Handle';
3
+ export { Remove } from './Remove';
4
+ export { TreeItem, SortableTreeItem } from './TreeItem';
@@ -0,0 +1,4 @@
1
+ export { Action } from "./Action";
2
+ export { Handle } from "./Handle";
3
+ export { Remove } from "./Remove";
4
+ export { TreeItem, SortableTreeItem } from "./TreeItem";
@@ -1,3 +1,27 @@
1
- import PisellDraggable from './PisellDraggable';
2
- export type { DraggableItem, PisellDraggableProps } from './types';
3
- export default PisellDraggable;
1
+ /**
2
+ * 可拖拽树形组件
3
+ * 基于@dnd-kit库实现,支持拖拽排序、展开折叠、删除等功能
4
+ */
5
+ import React from 'react';
6
+ import type { TreeItem, TreeItems } from './types';
7
+ interface Props {
8
+ /** 是否支持折叠功能 */
9
+ collapsible?: boolean;
10
+ /** 初始树形数据,默认使用 initialItems */
11
+ value?: TreeItems;
12
+ /** 缩进宽度,控制子节点的缩进距离 */
13
+ indentationWidth?: number;
14
+ /** 是否显示拖拽指示器 */
15
+ indicator?: boolean;
16
+ /** 是否支持删除节点功能 */
17
+ removable?: boolean;
18
+ /** 自定义渲染树节点 */
19
+ renderItem?: (item: TreeItem) => React.ReactNode;
20
+ /** 树形数据变化回调 */
21
+ onChange?: (items: TreeItems) => void;
22
+ /** 删除节点前 */
23
+ onRemoveBefore?: (item: TreeItem) => Promise<boolean>;
24
+ }
25
+ export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, }: Props): React.JSX.Element;
26
+ declare const Demo: () => React.JSX.Element;
27
+ export default Demo;