@pisell/materials 1.0.607 → 1.0.608
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +3 -3
- package/build/lowcode/preview.js +7 -7
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +18 -18
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +19 -19
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useFormat.d.ts +6 -2
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useFormat.js +15 -1
- package/es/components/dataSourceComponents/fields/Select/index.js +2 -1
- package/es/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +1 -1
- package/es/components/pisellDraggable/components/TreeItem/TreeItem.js +1 -1
- package/es/components/pisellDraggable/index.d.ts +2 -1
- package/es/components/pisellDropSort/PisellDropSort.d.ts +5 -0
- package/es/components/pisellDropSort/PisellDropSort.js +102 -0
- package/es/components/pisellDropSort/PisellDropSort.less +92 -0
- package/es/components/pisellDropSort/components/SortableItem/index.d.ts +19 -0
- package/es/components/pisellDropSort/components/SortableItem/index.js +93 -0
- package/es/components/pisellDropSort/components/SortableItem/index.less +155 -0
- package/es/components/pisellDropSort/index.d.ts +3 -0
- package/es/components/pisellDropSort/index.js +2 -0
- package/es/components/pisellDropSort/types.d.ts +42 -0
- package/es/components/pisellDropSort/types.js +1 -0
- package/es/components/table/Table/utils.d.ts +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/locales/en-US.d.ts +1 -0
- package/es/locales/en-US.js +1 -1
- package/es/locales/zh-CN.d.ts +1 -0
- package/es/locales/zh-CN.js +1 -1
- package/es/locales/zh-TW.d.ts +1 -0
- package/es/locales/zh-TW.js +1 -1
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useFormat.d.ts +6 -2
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useFormat.js +16 -1
- package/lib/components/dataSourceComponents/fields/Select/index.js +2 -1
- package/lib/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +1 -1
- package/lib/components/pisellDraggable/components/TreeItem/TreeItem.js +1 -1
- package/lib/components/pisellDraggable/index.d.ts +2 -1
- package/lib/components/pisellDropSort/PisellDropSort.d.ts +5 -0
- package/lib/components/pisellDropSort/PisellDropSort.js +147 -0
- package/lib/components/pisellDropSort/PisellDropSort.less +92 -0
- package/lib/components/pisellDropSort/components/SortableItem/index.d.ts +19 -0
- package/lib/components/pisellDropSort/components/SortableItem/index.js +164 -0
- package/lib/components/pisellDropSort/components/SortableItem/index.less +155 -0
- package/lib/components/pisellDropSort/index.d.ts +3 -0
- package/lib/components/pisellDropSort/index.js +36 -0
- package/lib/components/pisellDropSort/types.d.ts +42 -0
- package/lib/components/pisellDropSort/types.js +17 -0
- package/lib/components/table/Table/utils.d.ts +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +3 -0
- package/lib/locales/en-US.d.ts +1 -0
- package/lib/locales/en-US.js +3 -1
- package/lib/locales/zh-CN.d.ts +1 -0
- package/lib/locales/zh-CN.js +3 -1
- package/lib/locales/zh-TW.d.ts +1 -0
- package/lib/locales/zh-TW.js +3 -1
- package/lowcode/pisell-drop-sort/meta.ts +343 -0
- package/package.json +1 -1
|
@@ -9,12 +9,16 @@ export declare type UseFormatParams = {
|
|
|
9
9
|
dataSourceKey: string;
|
|
10
10
|
fields: Field[];
|
|
11
11
|
};
|
|
12
|
-
export declare type
|
|
12
|
+
export declare type ApiListResult = {
|
|
13
13
|
list: any[];
|
|
14
14
|
count: number;
|
|
15
|
-
page: number;
|
|
16
15
|
size: number;
|
|
16
|
+
} & ({
|
|
17
|
+
page: number;
|
|
17
18
|
} | {
|
|
19
|
+
skip: number;
|
|
20
|
+
});
|
|
21
|
+
export declare type FormatListResultParams = ApiListResult | {
|
|
18
22
|
data: any[];
|
|
19
23
|
meta: {
|
|
20
24
|
count: number;
|
|
@@ -122,7 +122,7 @@ var useFormat = function useFormat(_ref4) {
|
|
|
122
122
|
fields = _ref4.fields;
|
|
123
123
|
// list接口请求 结果格式化
|
|
124
124
|
var formatListResult = useMemoizedFn(function (res) {
|
|
125
|
-
if (dataSourceKey === 'pisell2-api' && 'list' in res) {
|
|
125
|
+
if (dataSourceKey === 'pisell2-api' && 'list' in res && 'page' in res) {
|
|
126
126
|
return {
|
|
127
127
|
data: res.list,
|
|
128
128
|
count: res.count,
|
|
@@ -130,6 +130,14 @@ var useFormat = function useFormat(_ref4) {
|
|
|
130
130
|
pageSize: res.size
|
|
131
131
|
};
|
|
132
132
|
}
|
|
133
|
+
if (dataSourceKey === 'mypisell-api' && 'list' in res && 'skip' in res) {
|
|
134
|
+
return {
|
|
135
|
+
data: res.list,
|
|
136
|
+
count: res.count,
|
|
137
|
+
page: res.skip,
|
|
138
|
+
pageSize: res.size
|
|
139
|
+
};
|
|
140
|
+
}
|
|
133
141
|
if ('meta' in res) {
|
|
134
142
|
return {
|
|
135
143
|
data: res.data,
|
|
@@ -156,6 +164,12 @@ var useFormat = function useFormat(_ref4) {
|
|
|
156
164
|
size: (params === null || params === void 0 ? void 0 : params.pageSize) || 10
|
|
157
165
|
}, customApiFormatFilter(params.filter || {}));
|
|
158
166
|
}
|
|
167
|
+
if (dataSourceKey === 'mypisell-api') {
|
|
168
|
+
return _objectSpread({
|
|
169
|
+
skip: (params === null || params === void 0 ? void 0 : params.page) || 1,
|
|
170
|
+
num: (params === null || params === void 0 ? void 0 : params.pageSize) || 10
|
|
171
|
+
}, customApiFormatFilter(params.filter || {}));
|
|
172
|
+
}
|
|
159
173
|
return params;
|
|
160
174
|
});
|
|
161
175
|
var formatCreateUpdateParams = useMemoizedFn(function (params) {
|
|
@@ -16,6 +16,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
|
|
|
16
16
|
onRemove?(): void;
|
|
17
17
|
wrapperRef?(node: HTMLLIElement): void;
|
|
18
18
|
item: TreeItemType;
|
|
19
|
-
renderItem?(item:
|
|
19
|
+
renderItem?(item: Props, ref: React.ForwardedRef<HTMLDivElement>): React.ReactNode;
|
|
20
20
|
}
|
|
21
21
|
export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -25,7 +25,7 @@ export var TreeItem = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
25
25
|
renderItem = props.renderItem,
|
|
26
26
|
otherProps = _objectWithoutProperties(props, _excluded);
|
|
27
27
|
if (renderItem) {
|
|
28
|
-
return renderItem(props);
|
|
28
|
+
return renderItem(props, ref);
|
|
29
29
|
}
|
|
30
30
|
return /*#__PURE__*/React.createElement("li", _extends({
|
|
31
31
|
className: classNames('Wrapper', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import type { TreeItem, TreeItems } from './types';
|
|
7
|
+
import type { Props as TreeItemProps } from './components/TreeItem/TreeItem';
|
|
7
8
|
interface Props {
|
|
8
9
|
/** 是否支持折叠功能 */
|
|
9
10
|
collapsible?: boolean;
|
|
@@ -16,7 +17,7 @@ interface Props {
|
|
|
16
17
|
/** 是否支持删除节点功能 */
|
|
17
18
|
removable?: boolean;
|
|
18
19
|
/** 自定义渲染树节点 */
|
|
19
|
-
renderItem?: (item:
|
|
20
|
+
renderItem?: (item: TreeItemProps, ref: React.RefObject<HTMLDivElement>) => React.ReactNode;
|
|
20
21
|
/** 树形数据变化回调 */
|
|
21
22
|
onChange?: (items: TreeItems) => void;
|
|
22
23
|
/** 删除节点前 */
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { useCallback, useMemo } from 'react';
|
|
2
|
+
import { PlusOutlined } from '@ant-design/icons';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import Button from "../button";
|
|
5
|
+
import SortableItem from "./components/SortableItem";
|
|
6
|
+
import { SortableTree } from "../pisellDraggable";
|
|
7
|
+
import "./PisellDropSort.less";
|
|
8
|
+
import { getText } from "../../locales";
|
|
9
|
+
var PisellDropSort = function PisellDropSort(_ref) {
|
|
10
|
+
var _ref$value = _ref.value,
|
|
11
|
+
value = _ref$value === void 0 ? [] : _ref$value,
|
|
12
|
+
_ref$allowDrag = _ref.allowDrag,
|
|
13
|
+
allowDrag = _ref$allowDrag === void 0 ? true : _ref$allowDrag,
|
|
14
|
+
_ref$allowDelete = _ref.allowDelete,
|
|
15
|
+
allowDelete = _ref$allowDelete === void 0 ? true : _ref$allowDelete,
|
|
16
|
+
_ref$allowAddChild = _ref.allowAddChild,
|
|
17
|
+
allowAddChild = _ref$allowAddChild === void 0 ? true : _ref$allowAddChild,
|
|
18
|
+
_ref$allowAddRoot = _ref.allowAddRoot,
|
|
19
|
+
allowAddRoot = _ref$allowAddRoot === void 0 ? true : _ref$allowAddRoot,
|
|
20
|
+
_ref$disabled = _ref.disabled,
|
|
21
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
22
|
+
_ref$spacing = _ref.spacing,
|
|
23
|
+
spacing = _ref$spacing === void 0 ? 8 : _ref$spacing,
|
|
24
|
+
_ref$maxLevel = _ref.maxLevel,
|
|
25
|
+
maxLevel = _ref$maxLevel === void 0 ? 3 : _ref$maxLevel,
|
|
26
|
+
_ref$showBorder = _ref.showBorder,
|
|
27
|
+
showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
|
|
28
|
+
style = _ref.style,
|
|
29
|
+
className = _ref.className,
|
|
30
|
+
onChange = _ref.onChange,
|
|
31
|
+
onDelete = _ref.onDelete,
|
|
32
|
+
onAdd = _ref.onAdd,
|
|
33
|
+
propsRenderItem = _ref.renderItem,
|
|
34
|
+
leftContent = _ref.leftContent,
|
|
35
|
+
onAddRoot = _ref.onAddRoot;
|
|
36
|
+
// 转换数据格式
|
|
37
|
+
var treeItems = useMemo(function () {
|
|
38
|
+
return value.map(function (item) {
|
|
39
|
+
var _item$children;
|
|
40
|
+
return {
|
|
41
|
+
id: item.id,
|
|
42
|
+
children: ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (child) {
|
|
43
|
+
return {
|
|
44
|
+
id: child.id,
|
|
45
|
+
children: []
|
|
46
|
+
};
|
|
47
|
+
})) || []
|
|
48
|
+
};
|
|
49
|
+
});
|
|
50
|
+
}, [value]);
|
|
51
|
+
|
|
52
|
+
// 自定义渲染节点
|
|
53
|
+
var renderItem = useCallback(function (itemProps, ref) {
|
|
54
|
+
return /*#__PURE__*/React.createElement(SortableItem, {
|
|
55
|
+
itemProps: itemProps,
|
|
56
|
+
domRef: ref,
|
|
57
|
+
render: propsRenderItem,
|
|
58
|
+
allowAddChild: allowAddChild,
|
|
59
|
+
allowDelete: allowDelete,
|
|
60
|
+
allowDrag: allowDrag,
|
|
61
|
+
disabled: disabled,
|
|
62
|
+
onAdd: onAdd,
|
|
63
|
+
onDelete: onDelete,
|
|
64
|
+
showBorder: showBorder,
|
|
65
|
+
spacing: spacing,
|
|
66
|
+
maxLevel: maxLevel
|
|
67
|
+
});
|
|
68
|
+
}, [allowAddChild, allowDelete, allowDrag, value, disabled, maxLevel, onAdd, onDelete, showBorder, spacing, treeItems]);
|
|
69
|
+
|
|
70
|
+
// 处理拖拽完成
|
|
71
|
+
var handleChange = useCallback(function (items) {
|
|
72
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(items);
|
|
73
|
+
}, [onChange]);
|
|
74
|
+
var containerClassName = classNames('pisell-lowcode-drop-sort-container', className);
|
|
75
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: containerClassName,
|
|
77
|
+
style: style
|
|
78
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: "pisell-lowcode-drop-sort-container-header"
|
|
80
|
+
}, /*#__PURE__*/React.createElement("span", null, leftContent), allowAddRoot && !disabled && /*#__PURE__*/React.createElement(Button, {
|
|
81
|
+
icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
|
|
82
|
+
type: "primary",
|
|
83
|
+
onClick: function onClick() {
|
|
84
|
+
return onAddRoot === null || onAddRoot === void 0 ? void 0 : onAddRoot();
|
|
85
|
+
},
|
|
86
|
+
size: "large"
|
|
87
|
+
}, getText('pisell-lowcode-drop-sort-add'))), /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
className: "pisell-lowcode-drop-sort-container-content",
|
|
89
|
+
style: {
|
|
90
|
+
gap: spacing !== null && spacing !== void 0 ? spacing : 8
|
|
91
|
+
}
|
|
92
|
+
}, /*#__PURE__*/React.createElement(SortableTree, {
|
|
93
|
+
value: treeItems,
|
|
94
|
+
collapsible: true,
|
|
95
|
+
indicator: false,
|
|
96
|
+
indentationWidth: 24,
|
|
97
|
+
removable: allowDelete,
|
|
98
|
+
renderItem: renderItem,
|
|
99
|
+
onChange: handleChange
|
|
100
|
+
})));
|
|
101
|
+
};
|
|
102
|
+
export default PisellDropSort;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
.pisell-lowcode-drop-sort-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 12px;
|
|
5
|
+
|
|
6
|
+
&-header {
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
align-items: center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&-content {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
gap: 8px;
|
|
16
|
+
flex: 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&-item {
|
|
20
|
+
display: flex;
|
|
21
|
+
padding: 12px;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: 8px;
|
|
24
|
+
align-self: stretch;
|
|
25
|
+
|
|
26
|
+
border-radius: 12px;
|
|
27
|
+
border: 1px solid var(--Gray-200, #eaecf0);
|
|
28
|
+
background: var(--Base-White, #fff);
|
|
29
|
+
/* Shadow/xs */
|
|
30
|
+
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
|
31
|
+
|
|
32
|
+
transition: all 0.3s;
|
|
33
|
+
|
|
34
|
+
&.with-border {
|
|
35
|
+
border: 1px solid #f0f0f0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&.dragging {
|
|
39
|
+
opacity: 0.5;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&-content {
|
|
43
|
+
padding: 12px;
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-title {
|
|
50
|
+
flex: 1;
|
|
51
|
+
margin: 0 12px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&-actions {
|
|
55
|
+
display: flex;
|
|
56
|
+
gap: 8px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&-children {
|
|
61
|
+
padding-left: 24px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&-disabled {
|
|
65
|
+
cursor: not-allowed;
|
|
66
|
+
opacity: 0.5;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.drag-handle {
|
|
70
|
+
cursor: move;
|
|
71
|
+
color: #999;
|
|
72
|
+
|
|
73
|
+
&:hover {
|
|
74
|
+
color: #666;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.action-button {
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
color: #999;
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
color: #666;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&.delete {
|
|
87
|
+
&:hover {
|
|
88
|
+
color: #ff4d4f;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Props as TreeItem } from '../../../pisellDraggable/components/TreeItem/TreeItem';
|
|
3
|
+
import './index.less';
|
|
4
|
+
interface SortableItemProps {
|
|
5
|
+
itemProps: TreeItem;
|
|
6
|
+
render?: (itemProps: TreeItem) => React.ReactNode;
|
|
7
|
+
domRef: React.RefObject<HTMLDivElement>;
|
|
8
|
+
allowAddChild?: boolean;
|
|
9
|
+
allowDelete?: boolean;
|
|
10
|
+
allowDrag?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
onAdd?: (itemProps: TreeItem) => void;
|
|
13
|
+
onDelete?: (itemProps: TreeItem) => void;
|
|
14
|
+
showBorder?: boolean;
|
|
15
|
+
spacing?: number;
|
|
16
|
+
maxLevel?: number;
|
|
17
|
+
}
|
|
18
|
+
declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;
|
|
19
|
+
export default SortableItem;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
var _excluded = ["item", "depth", "clone", "ghost", "indicator", "disableSelection", "disableInteraction", "wrapperRef", "style", "onCollapse", "onRemove", "childCount", "indentationWidth", "handleProps", "collapsed"];
|
|
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 React from 'react';
|
|
6
|
+
import classNames from 'classnames';
|
|
7
|
+
import DotsSix from '@pisell/icon/es/DotsSix';
|
|
8
|
+
import Button from "../../../button";
|
|
9
|
+
import Icon from "../../../icon";
|
|
10
|
+
import "./index.less";
|
|
11
|
+
var SortableItem = function SortableItem(props) {
|
|
12
|
+
var itemProps = props.itemProps,
|
|
13
|
+
render = props.render,
|
|
14
|
+
domRef = props.domRef,
|
|
15
|
+
allowAddChild = props.allowAddChild,
|
|
16
|
+
allowDelete = props.allowDelete,
|
|
17
|
+
allowDrag = props.allowDrag,
|
|
18
|
+
disabled = props.disabled,
|
|
19
|
+
onAdd = props.onAdd,
|
|
20
|
+
onDelete = props.onDelete,
|
|
21
|
+
showBorder = props.showBorder,
|
|
22
|
+
spacing = props.spacing,
|
|
23
|
+
maxLevel = props.maxLevel;
|
|
24
|
+
var item = itemProps.item,
|
|
25
|
+
depth = itemProps.depth,
|
|
26
|
+
clone = itemProps.clone,
|
|
27
|
+
ghost = itemProps.ghost,
|
|
28
|
+
indicator = itemProps.indicator,
|
|
29
|
+
disableSelection = itemProps.disableSelection,
|
|
30
|
+
disableInteraction = itemProps.disableInteraction,
|
|
31
|
+
wrapperRef = itemProps.wrapperRef,
|
|
32
|
+
style = itemProps.style,
|
|
33
|
+
onCollapse = itemProps.onCollapse,
|
|
34
|
+
onRemove = itemProps.onRemove,
|
|
35
|
+
childCount = itemProps.childCount,
|
|
36
|
+
indentationWidth = itemProps.indentationWidth,
|
|
37
|
+
handleProps = itemProps.handleProps,
|
|
38
|
+
collapsed = itemProps.collapsed,
|
|
39
|
+
otherProps = _objectWithoutProperties(itemProps, _excluded);
|
|
40
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
41
|
+
className: classNames('pisell-lowcode-drop-sort-item', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
|
|
42
|
+
ref: wrapperRef,
|
|
43
|
+
style: {
|
|
44
|
+
'--spacing': "".concat(indentationWidth * depth, "px")
|
|
45
|
+
}
|
|
46
|
+
}, otherProps), /*#__PURE__*/React.createElement("div", {
|
|
47
|
+
className: classNames('pisell-lowcode-drop-sort-item-tree-item', {
|
|
48
|
+
'pisell-lowcode-drop-sort-item-tree-item-border': showBorder,
|
|
49
|
+
disabled: disabled
|
|
50
|
+
}),
|
|
51
|
+
ref: domRef,
|
|
52
|
+
style: style
|
|
53
|
+
}, allowDrag && !disabled && /*#__PURE__*/React.createElement(Button, _extends({
|
|
54
|
+
icon: /*#__PURE__*/React.createElement(DotsSix, {
|
|
55
|
+
className: "pisell-lowcode-drop-sort-item-drag-handle-icon"
|
|
56
|
+
}),
|
|
57
|
+
type: "text",
|
|
58
|
+
className: "pisell-lowcode-drop-sort-item-button"
|
|
59
|
+
}, handleProps)), onCollapse && /*#__PURE__*/React.createElement(Button, {
|
|
60
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
61
|
+
type: "pisell2-chevron-down",
|
|
62
|
+
className: "pisell-lowcode-drop-sort-item-icon"
|
|
63
|
+
}),
|
|
64
|
+
onClick: onCollapse,
|
|
65
|
+
type: "text",
|
|
66
|
+
className: classNames('Collapse', collapsed && 'collapsed', 'pisell-lowcode-drop-sort-item-button')
|
|
67
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
68
|
+
className: "pisell-lowcode-drop-sort-item-content"
|
|
69
|
+
}, render && render(itemProps)), !clone && allowAddChild && !disabled && /*#__PURE__*/React.createElement(Button, {
|
|
70
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
71
|
+
type: "pisell2-plus",
|
|
72
|
+
className: "pisell-lowcode-drop-sort-item-icon"
|
|
73
|
+
}),
|
|
74
|
+
onClick: function onClick() {
|
|
75
|
+
return onAdd === null || onAdd === void 0 ? void 0 : onAdd(itemProps);
|
|
76
|
+
},
|
|
77
|
+
type: "text",
|
|
78
|
+
className: "pisell-lowcode-drop-sort-item-button"
|
|
79
|
+
}), !clone && allowDelete && !disabled && /*#__PURE__*/React.createElement(Button, {
|
|
80
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
81
|
+
type: "pisell2-trash-01",
|
|
82
|
+
className: "pisell-lowcode-drop-sort-item-icon"
|
|
83
|
+
}),
|
|
84
|
+
onClick: function onClick() {
|
|
85
|
+
return onDelete === null || onDelete === void 0 ? void 0 : onDelete(itemProps);
|
|
86
|
+
},
|
|
87
|
+
type: "text",
|
|
88
|
+
className: "pisell-lowcode-drop-sort-item-button"
|
|
89
|
+
}), clone && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
|
|
90
|
+
className: 'pisell-lowcode-drop-sort-item-count'
|
|
91
|
+
}, childCount) : null));
|
|
92
|
+
};
|
|
93
|
+
export default SortableItem;
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
.pisell-lowcode-drop-sort-item {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
padding-left: var(--spacing);
|
|
4
|
+
|
|
5
|
+
&.clone {
|
|
6
|
+
display: inline-block;
|
|
7
|
+
pointer-events: none;
|
|
8
|
+
padding: 0;
|
|
9
|
+
padding-left: 10px;
|
|
10
|
+
padding-top: 5px;
|
|
11
|
+
|
|
12
|
+
.pisell-lowcode-drop-sort-item-tree-item {
|
|
13
|
+
--vertical-padding: 5px;
|
|
14
|
+
|
|
15
|
+
padding-right: 24px;
|
|
16
|
+
box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&.ghost {
|
|
21
|
+
&.indicator {
|
|
22
|
+
opacity: 1;
|
|
23
|
+
position: relative;
|
|
24
|
+
z-index: 1;
|
|
25
|
+
margin-bottom: -1px;
|
|
26
|
+
|
|
27
|
+
.pisell-lowcode-drop-sort-item-tree-item {
|
|
28
|
+
position: relative;
|
|
29
|
+
padding: 0;
|
|
30
|
+
height: 8px;
|
|
31
|
+
border-color: #2389ff;
|
|
32
|
+
background-color: #56a1f8;
|
|
33
|
+
|
|
34
|
+
&:before {
|
|
35
|
+
position: absolute;
|
|
36
|
+
left: -8px;
|
|
37
|
+
top: -4px;
|
|
38
|
+
display: block;
|
|
39
|
+
content: '';
|
|
40
|
+
width: 12px;
|
|
41
|
+
height: 12px;
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
border: 1px solid #2389ff;
|
|
44
|
+
background-color: #ffffff;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
> * {
|
|
48
|
+
/* Items are hidden using height and opacity to retain focus */
|
|
49
|
+
opacity: 0;
|
|
50
|
+
height: 0;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&:not(.indicator) {
|
|
56
|
+
opacity: 0.5;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pisell-lowcode-drop-sort-item-tree-item > * {
|
|
60
|
+
box-shadow: none;
|
|
61
|
+
background-color: transparent;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.pisell-lowcode-drop-sort-item-tree-item {
|
|
68
|
+
position: relative;
|
|
69
|
+
display: flex;
|
|
70
|
+
padding: 12px;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 16px;
|
|
73
|
+
align-self: stretch;
|
|
74
|
+
border-radius: 12px;
|
|
75
|
+
background: var(--Base-White, #fff);
|
|
76
|
+
|
|
77
|
+
--vertical-padding: 10px;
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
// transition: all 0.25s;
|
|
80
|
+
|
|
81
|
+
.pisell-lowcode-drop-sort-item-content {
|
|
82
|
+
flex: 1;
|
|
83
|
+
height: 48px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.pisell-lowcode-drop-sort-item-button {
|
|
87
|
+
&:hover {
|
|
88
|
+
background: var(--Gray-100, #F2F4F7);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&:hover {
|
|
93
|
+
background: var(--Gray-25, #FCFCFD);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&.disabled {
|
|
97
|
+
border: 1px solid var(--Gray-200, #EAECF0);
|
|
98
|
+
background: var(--Gray-100, #F2F4F7);
|
|
99
|
+
cursor: not-allowed;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.pisell-lowcode-drop-sort-item-tree-item-border {
|
|
104
|
+
border: 1px solid var(--Gray-200, #eaecf0);
|
|
105
|
+
/* Shadow/xs */
|
|
106
|
+
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.pisell-lowcode-drop-sort-item-icon {
|
|
110
|
+
font-size: 20px;
|
|
111
|
+
color: #101828;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.pisell-lowcode-drop-sort-item-drag-handle-icon {
|
|
115
|
+
font-size: 20px;
|
|
116
|
+
color: #98a2b3;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.pisell-lowcode-drop-sort-item-count {
|
|
120
|
+
position: absolute;
|
|
121
|
+
top: -10px;
|
|
122
|
+
right: -10px;
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
width: 24px;
|
|
127
|
+
height: 24px;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
background-color: #2389ff;
|
|
130
|
+
font-size: 0.8rem;
|
|
131
|
+
font-weight: 600;
|
|
132
|
+
color: #fff;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.disableInteraction {
|
|
136
|
+
pointer-events: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.disableSelection,
|
|
140
|
+
.clone {
|
|
141
|
+
.pisell-lowcode-drop-sort-item-count {
|
|
142
|
+
user-select: none;
|
|
143
|
+
-webkit-user-select: none;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.Collapse {
|
|
148
|
+
svg {
|
|
149
|
+
transition: transform 250ms ease;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
&.collapsed svg {
|
|
153
|
+
transform: rotate(-90deg);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import type { Props as TreeItem } from '../pisellDraggable/components/TreeItem/TreeItem';
|
|
3
|
+
import type { TreeItem as TreeItemType } from '../pisellDraggable/types';
|
|
4
|
+
export interface DropSortItem extends TreeItemType {
|
|
5
|
+
[key: string]: any;
|
|
6
|
+
}
|
|
7
|
+
export interface PisellDropSortProps {
|
|
8
|
+
/** value */
|
|
9
|
+
value: DropSortItem[];
|
|
10
|
+
/** 允许拖拽 */
|
|
11
|
+
allowDrag?: boolean;
|
|
12
|
+
/** 允许删除 */
|
|
13
|
+
allowDelete?: boolean;
|
|
14
|
+
/** 允许添加子节点 */
|
|
15
|
+
allowAddChild?: boolean;
|
|
16
|
+
/** 允许添加根节点 */
|
|
17
|
+
allowAddRoot?: boolean;
|
|
18
|
+
/** 是否禁用 */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/** 节点间距 */
|
|
21
|
+
spacing?: number;
|
|
22
|
+
/** 最大层级数 */
|
|
23
|
+
maxLevel?: number;
|
|
24
|
+
/** 是否显示边框 */
|
|
25
|
+
showBorder?: boolean;
|
|
26
|
+
/** 样式 */
|
|
27
|
+
style?: CSSProperties;
|
|
28
|
+
/** 类名 */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** 数据源变化回调 */
|
|
31
|
+
onChange?: (items: DropSortItem[]) => void;
|
|
32
|
+
/** 删除节点回调 */
|
|
33
|
+
onDelete?: (itemProps: TreeItem) => void;
|
|
34
|
+
/** 添加节点回调 */
|
|
35
|
+
onAdd?: (itemProps: TreeItem) => void;
|
|
36
|
+
/** 自定义渲染节点 */
|
|
37
|
+
renderItem?: (itemProps: TreeItem) => React.ReactNode;
|
|
38
|
+
/** 添加根节点回调 */
|
|
39
|
+
onAddRoot?: () => void;
|
|
40
|
+
/** 左侧自定义内容 */
|
|
41
|
+
leftContent?: React.ReactNode;
|
|
42
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
|
|
|
167
167
|
sort?: SortType | undefined;
|
|
168
168
|
mode: "" | "localStorage" | "remote";
|
|
169
169
|
currentViewMode: ModeType;
|
|
170
|
-
}) => ("
|
|
170
|
+
}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
|
|
171
171
|
export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
|
|
172
172
|
export declare const stringify: (obj: Record<string, any>) => string;
|
|
173
173
|
export {};
|
package/es/index.d.ts
CHANGED
|
@@ -132,3 +132,4 @@ export { default as PisellPriceKeyboard } from './components/virtual-keyboard/Am
|
|
|
132
132
|
export { default as PisellNumberKeyboard } from './components/virtual-keyboard/Number';
|
|
133
133
|
export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Time';
|
|
134
134
|
export { default as WalletCard } from './components/walletCard';
|
|
135
|
+
export { default as PisellDropSort } from './components/pisellDropSort';
|
package/es/index.js
CHANGED
|
@@ -131,4 +131,5 @@ export { default as VirtualKeyboard } from "./components/virtual-keyboard";
|
|
|
131
131
|
export { default as PisellPriceKeyboard } from "./components/virtual-keyboard/Amount";
|
|
132
132
|
export { default as PisellNumberKeyboard } from "./components/virtual-keyboard/Number";
|
|
133
133
|
export { default as VirtualKeyboardTime } from "./components/virtual-keyboard/Time";
|
|
134
|
-
export { default as WalletCard } from "./components/walletCard";
|
|
134
|
+
export { default as WalletCard } from "./components/walletCard";
|
|
135
|
+
export { default as PisellDropSort } from "./components/pisellDropSort";
|
package/es/locales/en-US.d.ts
CHANGED
|
@@ -213,5 +213,6 @@ declare const _default: {
|
|
|
213
213
|
'pisell-lowcode-app-version-control-promote-version-ok': string;
|
|
214
214
|
'pisell-lowcode-app-version-control-promote-version-cancel': string;
|
|
215
215
|
'pisell-lowcode-app-version-control-version-exists': string;
|
|
216
|
+
'pisell-lowcode-drop-sort-add': string;
|
|
216
217
|
};
|
|
217
218
|
export default _default;
|
package/es/locales/en-US.js
CHANGED
|
@@ -264,4 +264,4 @@ export default (_tableFilterSearch$ = {
|
|
|
264
264
|
'pisell-icon-select-select': 'Select icon'
|
|
265
265
|
}, _defineProperty(_tableFilterSearch$, "subdomain-error-too-short", 'Subdomain must be at least 2 characters long'), _defineProperty(_tableFilterSearch$, "subdomain-error-too-long", 'Subdomain cannot exceed 60 characters'), _defineProperty(_tableFilterSearch$, "subdomain-error-pattern", 'Subdomain can only contain lowercase letters, numbers and hyphens'), _defineProperty(_tableFilterSearch$, "subdomain-error-numbers-only", 'Subdomain cannot contain only numbers'), _defineProperty(_tableFilterSearch$, "subdomain-error-hyphen-ends", 'Subdomain cannot start or end with a hyphen'), _defineProperty(_tableFilterSearch$, "subdomain-error-consecutive-hyphens", 'Subdomain cannot contain consecutive hyphens'), _defineProperty(_tableFilterSearch$, "subdomain-error-required", 'Please enter subdomain'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-live', 'Live'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-draft', 'Draft'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-deprecated', 'Deprecated'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-new-version', 'New version'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-to-live', 'Promote to live'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version', function pisellLowcodeAppVersionControlPromoteVersion(version) {
|
|
266
266
|
return "Promote version ".concat(version || "", "?");
|
|
267
|
-
}), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version-describe', 'Promoting this version will lock it further changes'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version-ok', 'Promote'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version-cancel', 'Cancel'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-version-exists', 'Version already exists'), _tableFilterSearch$);
|
|
267
|
+
}), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version-describe', 'Promoting this version will lock it further changes'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version-ok', 'Promote'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-promote-version-cancel', 'Cancel'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-app-version-control-version-exists', 'Version already exists'), _defineProperty(_tableFilterSearch$, 'pisell-lowcode-drop-sort-add', 'Add'), _tableFilterSearch$);
|