@pisell/materials 1.0.648 → 1.0.649

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.
@@ -36,7 +36,8 @@ var PisellDropSort = function PisellDropSort(_ref) {
36
36
  onAddRoot = _ref.onAddRoot,
37
37
  __designMode = _ref.__designMode,
38
38
  isCustomAction = _ref.isCustomAction,
39
- emptyContent = _ref.emptyContent;
39
+ emptyContent = _ref.emptyContent,
40
+ getItemStyle = _ref.getItemStyle;
40
41
  // 自定义渲染节点
41
42
  var renderItem = useCallback(function (itemProps, ref) {
42
43
  return /*#__PURE__*/React.createElement(SortableItem, {
@@ -53,7 +54,8 @@ var PisellDropSort = function PisellDropSort(_ref) {
53
54
  spacing: spacing,
54
55
  maxLevel: maxLevel,
55
56
  __designMode: __designMode,
56
- isCustomAction: isCustomAction
57
+ isCustomAction: isCustomAction,
58
+ getItemStyle: getItemStyle
57
59
  });
58
60
  }, [allowAddChild, allowDelete, allowDrag, value, disabled, maxLevel, onAdd, onDelete, showBorder, spacing, isCustomAction]);
59
61
 
@@ -18,6 +18,8 @@ interface SortableItemProps {
18
18
  __designMode?: string;
19
19
  /** 是否自定义操作 */
20
20
  isCustomAction?: boolean;
21
+ /** 获取item样式 */
22
+ getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
21
23
  }
22
24
  declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;
23
25
  export default SortableItem;
@@ -28,7 +28,8 @@ var SortableItem = function SortableItem(props) {
28
28
  spacing = props.spacing,
29
29
  maxLevel = props.maxLevel,
30
30
  __designMode = props.__designMode,
31
- isCustomAction = props.isCustomAction;
31
+ isCustomAction = props.isCustomAction,
32
+ getItemStyle = props.getItemStyle;
32
33
  var item = itemProps.item,
33
34
  depth = itemProps.depth,
34
35
  clone = itemProps.clone,
@@ -45,6 +46,8 @@ var SortableItem = function SortableItem(props) {
45
46
  handleProps = itemProps.handleProps,
46
47
  collapsed = itemProps.collapsed,
47
48
  otherProps = _objectWithoutProperties(itemProps, _excluded);
49
+ var itemStyle = (getItemStyle === null || getItemStyle === void 0 ? void 0 : getItemStyle(itemProps)) || {};
50
+ var mergedStyle = _objectSpread(_objectSpread({}, itemStyle), style);
48
51
  return /*#__PURE__*/React.createElement("li", _extends({
49
52
  className: classNames('pisell-lowcode-drop-sort-item', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
50
53
  ref: wrapperRef,
@@ -57,7 +60,7 @@ var SortableItem = function SortableItem(props) {
57
60
  disabled: disabled
58
61
  }),
59
62
  ref: domRef,
60
- style: style
63
+ style: mergedStyle
61
64
  }, allowDrag && !disabled && /*#__PURE__*/React.createElement(Button, _extends({
62
65
  icon: /*#__PURE__*/React.createElement(DotsSix, {
63
66
  className: "pisell-lowcode-drop-sort-item-drag-handle-icon"
@@ -86,12 +86,12 @@
86
86
 
87
87
  .pisell-lowcode-drop-sort-item-button {
88
88
  &:hover {
89
- background: var(--Gray-100, #F2F4F7);
89
+ background: var(--Gray-300, #D0D5DD) !important;
90
90
  }
91
91
  }
92
92
 
93
93
  &:hover {
94
- background: var(--Gray-25, #FCFCFD);
94
+ background: var(--Gray-100, #F2F4F7) !important;
95
95
  }
96
96
 
97
97
  &.disabled {
@@ -105,6 +105,7 @@
105
105
  border: 1px solid var(--Gray-200, #eaecf0);
106
106
  /* Shadow/xs */
107
107
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
108
+ transition: background-color 0.2s !important;
108
109
  }
109
110
 
110
111
  .pisell-lowcode-drop-sort-item-icon {
@@ -47,4 +47,6 @@ export interface PisellDropSortProps {
47
47
  __designMode?: string;
48
48
  /** 是否自定义操作 */
49
49
  isCustomAction?: boolean;
50
+ /** 获取item样式 */
51
+ getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
50
52
  }
@@ -185,6 +185,12 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
185
185
  });
186
186
  });
187
187
  }, [value]);
188
+ var getItemStyle = useCallback(function (itemProps) {
189
+ var item = itemProps.item;
190
+ return {
191
+ backgroundColor: item.isGroup ? '#fff' : 'var(--Gray-50, #F9FAFB)'
192
+ };
193
+ }, []);
188
194
  return /*#__PURE__*/React.createElement(PisellDropSort, {
189
195
  value: formatValue,
190
196
  allowDrag: allowDrag,
@@ -202,6 +208,7 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
202
208
  __designMode: __designMode,
203
209
  leftContent: leftContent,
204
210
  rightContent: rightContent,
211
+ getItemStyle: getItemStyle,
205
212
  emptyContent: /*#__PURE__*/React.createElement(PisellEmpty, {
206
213
  maxWidth: 400,
207
214
  description: getText('pisell-lowcode-navigation-menu-add-page-tip')
@@ -42,7 +42,7 @@
42
42
  gap: 8px;
43
43
  .pisell-lowcode-navigation-menu-item-action-button {
44
44
  &:hover {
45
- background: var(--Gray-100, #f2f4f7);
45
+ background: var(--Gray-300, #D0D5DD);
46
46
  }
47
47
  }
48
48
  .pisell-lowcode-navigation-menu-item-action-button-icon {
@@ -61,7 +61,8 @@ var PisellDropSort = ({
61
61
  onAddRoot,
62
62
  __designMode,
63
63
  isCustomAction,
64
- emptyContent
64
+ emptyContent,
65
+ getItemStyle
65
66
  }) => {
66
67
  const renderItem = (0, import_react.useCallback)(
67
68
  (itemProps, ref) => {
@@ -81,7 +82,8 @@ var PisellDropSort = ({
81
82
  spacing,
82
83
  maxLevel,
83
84
  __designMode,
84
- isCustomAction
85
+ isCustomAction,
86
+ getItemStyle
85
87
  }
86
88
  );
87
89
  },
@@ -18,6 +18,8 @@ interface SortableItemProps {
18
18
  __designMode?: string;
19
19
  /** 是否自定义操作 */
20
20
  isCustomAction?: boolean;
21
+ /** 获取item样式 */
22
+ getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
21
23
  }
22
24
  declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;
23
25
  export default SortableItem;
@@ -53,7 +53,8 @@ var SortableItem = (props) => {
53
53
  spacing,
54
54
  maxLevel,
55
55
  __designMode,
56
- isCustomAction
56
+ isCustomAction,
57
+ getItemStyle
57
58
  } = props;
58
59
  const {
59
60
  item,
@@ -73,6 +74,11 @@ var SortableItem = (props) => {
73
74
  collapsed,
74
75
  ...otherProps
75
76
  } = itemProps;
77
+ const itemStyle = (getItemStyle == null ? void 0 : getItemStyle(itemProps)) || {};
78
+ const mergedStyle = {
79
+ ...itemStyle,
80
+ ...style
81
+ };
76
82
  return /* @__PURE__ */ import_react.default.createElement(
77
83
  "li",
78
84
  {
@@ -98,7 +104,7 @@ var SortableItem = (props) => {
98
104
  disabled
99
105
  }),
100
106
  ref: domRef,
101
- style
107
+ style: mergedStyle
102
108
  },
103
109
  allowDrag && !disabled && /* @__PURE__ */ import_react.default.createElement(
104
110
  import_button.default,
@@ -86,12 +86,12 @@
86
86
 
87
87
  .pisell-lowcode-drop-sort-item-button {
88
88
  &:hover {
89
- background: var(--Gray-100, #F2F4F7);
89
+ background: var(--Gray-300, #D0D5DD) !important;
90
90
  }
91
91
  }
92
92
 
93
93
  &:hover {
94
- background: var(--Gray-25, #FCFCFD);
94
+ background: var(--Gray-100, #F2F4F7) !important;
95
95
  }
96
96
 
97
97
  &.disabled {
@@ -105,6 +105,7 @@
105
105
  border: 1px solid var(--Gray-200, #eaecf0);
106
106
  /* Shadow/xs */
107
107
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
108
+ transition: background-color 0.2s !important;
108
109
  }
109
110
 
110
111
  .pisell-lowcode-drop-sort-item-icon {
@@ -47,4 +47,6 @@ export interface PisellDropSortProps {
47
47
  __designMode?: string;
48
48
  /** 是否自定义操作 */
49
49
  isCustomAction?: boolean;
50
+ /** 获取item样式 */
51
+ getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
50
52
  }
@@ -192,6 +192,12 @@ var PisellNavigationMenu = ({
192
192
  disabledDrop: !item.isGroup
193
193
  }));
194
194
  }, [value]);
195
+ const getItemStyle = (0, import_react.useCallback)((itemProps) => {
196
+ const { item } = itemProps;
197
+ return {
198
+ backgroundColor: item.isGroup ? "#fff" : "var(--Gray-50, #F9FAFB)"
199
+ };
200
+ }, []);
195
201
  return /* @__PURE__ */ import_react.default.createElement(
196
202
  import_pisellDropSort.default,
197
203
  {
@@ -211,6 +217,7 @@ var PisellNavigationMenu = ({
211
217
  __designMode,
212
218
  leftContent,
213
219
  rightContent,
220
+ getItemStyle,
214
221
  emptyContent: /* @__PURE__ */ import_react.default.createElement(
215
222
  import_pisellEmpty.default,
216
223
  {
@@ -42,7 +42,7 @@
42
42
  gap: 8px;
43
43
  .pisell-lowcode-navigation-menu-item-action-button {
44
44
  &:hover {
45
- background: var(--Gray-100, #f2f4f7);
45
+ background: var(--Gray-300, #D0D5DD);
46
46
  }
47
47
  }
48
48
  .pisell-lowcode-navigation-menu-item-action-button-icon {
@@ -24,18 +24,6 @@ export default {
24
24
  subName: '',
25
25
  },
26
26
  generalProps: [
27
- // TODO: 后面统一追加至高级面板中
28
- {
29
- name: 'innerRef',
30
- title: { label: 'ref', tip: 'ref' },
31
- setter: {
32
- componentName: 'FunctionSetter',
33
- props: {
34
- template:
35
- "innerRef(ref){\n console.log('innerRef',ref); \n this.ref = ref; \n}",
36
- },
37
- },
38
- },
39
27
  formItemGeneralDataGroup,
40
28
  getFormItemGeneralInfoGroup([
41
29
  generalItemMap['label'],
@@ -205,6 +193,18 @@ export default {
205
193
  title: { label: '按下清除按钮的回调', tip: '按下清除按钮的回调' },
206
194
  propType: 'func',
207
195
  },
196
+ // TODO: 后面统一追加至高级面板中
197
+ {
198
+ name: 'innerRef',
199
+ title: { label: 'innerRef', tip: 'innerRef' },
200
+ setter: {
201
+ componentName: 'FunctionSetter',
202
+ props: {
203
+ template:
204
+ "innerRef(ref){\n console.log('innerRef',ref); \n this.ref = ref; \n}",
205
+ },
206
+ },
207
+ },
208
208
  ],
209
209
  configure: {
210
210
  supports: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisell/materials",
3
- "version": "1.0.648",
3
+ "version": "1.0.649",
4
4
  "main": "./lib/index.js",
5
5
  "module": "./es/index.js",
6
6
  "types": "./lib/index.d.ts",
@@ -72,9 +72,9 @@
72
72
  "react-virtualized-auto-sizer": "^1.0.20",
73
73
  "react-window": "^1.8.10",
74
74
  "styled-components": "^6.0.0-rc.3",
75
+ "@pisell/date-picker": "1.0.115",
75
76
  "@pisell/icon": "0.0.10",
76
- "@pisell/utils": "1.0.43",
77
- "@pisell/date-picker": "1.0.115"
77
+ "@pisell/utils": "1.0.43"
78
78
  },
79
79
  "peerDependencies": {
80
80
  "react": "^18.0.0",