@canlooks/can-ui 0.0.199 → 0.0.200

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 (7) hide show
  1. package/dist/cjs/components/cascade/cascade.js +57 -54
  2. package/dist/cjs/components/cascade/cascade.style.js +0 -1
  3. package/dist/cjs/components/cascade/cascadePanel.js +1 -1
  4. package/dist/esm/components/cascade/cascade.js +57 -54
  5. package/dist/esm/components/cascade/cascade.style.js +0 -1
  6. package/dist/esm/components/cascade/cascadePanel.js +1 -1
  7. package/package.json +1 -1
package/dist/cjs/components/cascade/cascade.js CHANGED
@@ -32,6 +32,36 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
32
32
  (0, react_1.useEffect)(() => {
33
33
  loadOptions && searchable && deferredSearchValue && innerLoadOptions();
34
34
  }, [deferredSearchValue]);
35
+ /**
36
+ * --------------------------------------------------------------------
37
+ * 控制选中状态
38
+ */
39
+ const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
40
+ // 路径转单一键
41
+ const toStandardValue = (path) => {
42
+ if (!path) {
43
+ return;
44
+ }
45
+ if (multiple) {
46
+ return path.map(path => path[path.length - 1]);
47
+ }
48
+ return path[path.length - 1];
49
+ };
50
+ // 单一键转路径
51
+ const toPathifiedValue = (value) => {
52
+ if (!value) {
53
+ return;
54
+ }
55
+ const findParent = (v, path = []) => {
56
+ const node = optionsMap.get(v);
57
+ if (node) {
58
+ path.unshift(v);
59
+ node._parentId && findParent(node._parentId, path);
60
+ }
61
+ return path;
62
+ };
63
+ return multiple ? value.map(v => findParent(v)) : findParent(value);
64
+ };
35
65
  /**
36
66
  * --------------------------------------------------------------------
37
67
  * 打开的弹框与面板
@@ -41,7 +71,14 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
41
71
  // 关闭动画结束后清空搜索框
42
72
  searchable && !open && setInnerSearchValue('');
43
73
  };
44
- const [openedPanels, setOpenedPanels] = (0, react_1.useState)([]);
74
+ const [openedPanels, setOpenedPanels] = (0, react_1.useState)(() => {
75
+ const value = multiple ? pathifiedValue.current?.[0] : pathifiedValue.current;
76
+ if ((0, utils_1.isNoValue)(value)) {
77
+ return [];
78
+ }
79
+ console.log(142, value.slice(0, -1));
80
+ return value.slice(0, -1);
81
+ });
45
82
  const toggleOpenedPanels = (value, index) => {
46
83
  setOpenedPanels(o => {
47
84
  const newOpened = o.slice(0, index);
@@ -69,55 +106,17 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
69
106
  // 打开下拉框时请求数据
70
107
  loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
71
108
  }, [innerOpen.current]);
72
- const actualOptions = innerOptions || options;
73
- /**
74
- * --------------------------------------------------------------------
75
- * 控制选中状态
76
- */
77
- const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
78
- // 路径转单一键
79
- const toStandardValue = (path) => {
80
- if (!path) {
81
- return;
82
- }
83
- if (multiple) {
84
- return path.map(path => path[path.length - 1]);
85
- }
86
- return path[path.length - 1];
87
- };
88
- // 单一键转路径
89
- const toPathifiedValue = (value) => {
90
- if (!value) {
91
- return;
92
- }
93
- const findParent = (v, path = []) => {
94
- const node = optionsMap.get(v);
95
- if (node) {
96
- path.unshift(v);
97
- node._parentId && findParent(node._parentId, path);
98
- }
99
- return path;
100
- };
101
- return multiple ? value.map(v => findParent(v)) : findParent(value);
102
- };
103
- const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
104
- options: actualOptions,
105
- multiple,
106
- value: toStandardValue(pathifiedValue.current),
107
- onChange(value) {
108
- setPathifiedValue(toPathifiedValue(value));
109
- },
110
- primaryKey,
111
- childrenKey,
112
- clearable,
113
- integration
114
- });
115
109
  const onClear = () => {
116
110
  setInnerValue([]);
117
111
  setOpenedPanels([]);
118
112
  };
119
113
  const onOptionClick = async (option, index) => {
120
114
  const optVal = option[primaryKey];
115
+ if (!option.children?.length) {
116
+ toggleSelected(option[primaryKey]);
117
+ !multiple && setInnerOpen(false);
118
+ return;
119
+ }
121
120
  const opened = openedPanels[index] === optVal;
122
121
  if (!opened) {
123
122
  loadOptions && await innerLoadOptions(innerSearchValue.current, option);
@@ -131,6 +130,19 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
131
130
  toggleSelected(option[primaryKey]);
132
131
  onOptionClick(option, index);
133
132
  };
133
+ const actualOptions = innerOptions || options;
134
+ const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
135
+ options: actualOptions,
136
+ multiple,
137
+ value: toStandardValue(pathifiedValue.current),
138
+ onChange(value) {
139
+ setPathifiedValue(toPathifiedValue(value));
140
+ },
141
+ primaryKey,
142
+ childrenKey,
143
+ clearable,
144
+ integration
145
+ });
134
146
  /**
135
147
  * --------------------------------------------------------------------
136
148
  * 键盘控制
@@ -156,13 +168,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
156
168
  setOpen: setInnerOpen,
157
169
  onEnter(info) {
158
170
  keyboardPressHandler(info);
159
- },
160
- onKeyDown(info, e) {
161
- if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
162
- // 在最后一个面板按右箭头，相当于按回车
163
- e.preventDefault();
164
- keyboardPressHandler(info);
165
- }
166
171
  }
167
172
  });
168
173
  const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
@@ -185,9 +190,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
185
190
  if (multiple) {
186
191
  return pathifiedValue.current?.map(path => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: (0, utils_1.joinNodes)(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
187
192
  }
188
- else {
189
- return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
190
- }
193
+ return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
191
194
  };
192
195
  return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
193
196
  css: cascade_style_1.cascadePopperStyle,
package/dist/cjs/components/cascade/cascade.style.js CHANGED
@@ -61,7 +61,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
61
61
  white-space: nowrap;
62
62
  text-overflow: ellipsis;
63
63
  overflow: hidden;
64
- direction: rtl;
65
64
  }
66
65
  }
67
66
  }
package/dist/cjs/components/cascade/cascadePanel.js CHANGED
@@ -35,7 +35,7 @@ function CascadePanel({ options, index = 0 }) {
35
35
  if (!option || typeof option !== 'object') {
36
36
  return option;
37
37
  }
38
- const { _parentId, ...opt } = option;
38
+ const { _parentId, _isLast, ...opt } = option;
39
39
  const optVal = opt[primaryKey];
40
40
  const status = selectionStatus?.get(optVal);
41
41
  const opened = openedPanels[index] === optVal;
package/dist/esm/components/cascade/cascade.js CHANGED
@@ -28,6 +28,36 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
28
28
  useEffect(() => {
29
29
  loadOptions && searchable && deferredSearchValue && innerLoadOptions();
30
30
  }, [deferredSearchValue]);
31
+ /**
32
+ * --------------------------------------------------------------------
33
+ * 控制选中状态
34
+ */
35
+ const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
36
+ // 路径转单一键
37
+ const toStandardValue = (path) => {
38
+ if (!path) {
39
+ return;
40
+ }
41
+ if (multiple) {
42
+ return path.map(path => path[path.length - 1]);
43
+ }
44
+ return path[path.length - 1];
45
+ };
46
+ // 单一键转路径
47
+ const toPathifiedValue = (value) => {
48
+ if (!value) {
49
+ return;
50
+ }
51
+ const findParent = (v, path = []) => {
52
+ const node = optionsMap.get(v);
53
+ if (node) {
54
+ path.unshift(v);
55
+ node._parentId && findParent(node._parentId, path);
56
+ }
57
+ return path;
58
+ };
59
+ return multiple ? value.map(v => findParent(v)) : findParent(value);
60
+ };
31
61
  /**
32
62
  * --------------------------------------------------------------------
33
63
  * 打开的弹框与面板
@@ -37,7 +67,14 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
37
67
  // 关闭动画结束后清空搜索框
38
68
  searchable && !open && setInnerSearchValue('');
39
69
  };
40
- const [openedPanels, setOpenedPanels] = useState([]);
70
+ const [openedPanels, setOpenedPanels] = useState(() => {
71
+ const value = multiple ? pathifiedValue.current?.[0] : pathifiedValue.current;
72
+ if (isNoValue(value)) {
73
+ return [];
74
+ }
75
+ console.log(142, value.slice(0, -1));
76
+ return value.slice(0, -1);
77
+ });
41
78
  const toggleOpenedPanels = (value, index) => {
42
79
  setOpenedPanels(o => {
43
80
  const newOpened = o.slice(0, index);
@@ -65,55 +102,17 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
65
102
  // 打开下拉框时请求数据
66
103
  loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
67
104
  }, [innerOpen.current]);
68
- const actualOptions = innerOptions || options;
69
- /**
70
- * --------------------------------------------------------------------
71
- * 控制选中状态
72
- */
73
- const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
74
- // 路径转单一键
75
- const toStandardValue = (path) => {
76
- if (!path) {
77
- return;
78
- }
79
- if (multiple) {
80
- return path.map(path => path[path.length - 1]);
81
- }
82
- return path[path.length - 1];
83
- };
84
- // 单一键转路径
85
- const toPathifiedValue = (value) => {
86
- if (!value) {
87
- return;
88
- }
89
- const findParent = (v, path = []) => {
90
- const node = optionsMap.get(v);
91
- if (node) {
92
- path.unshift(v);
93
- node._parentId && findParent(node._parentId, path);
94
- }
95
- return path;
96
- };
97
- return multiple ? value.map(v => findParent(v)) : findParent(value);
98
- };
99
- const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
100
- options: actualOptions,
101
- multiple,
102
- value: toStandardValue(pathifiedValue.current),
103
- onChange(value) {
104
- setPathifiedValue(toPathifiedValue(value));
105
- },
106
- primaryKey,
107
- childrenKey,
108
- clearable,
109
- integration
110
- });
111
105
  const onClear = () => {
112
106
  setInnerValue([]);
113
107
  setOpenedPanels([]);
114
108
  };
115
109
  const onOptionClick = async (option, index) => {
116
110
  const optVal = option[primaryKey];
111
+ if (!option.children?.length) {
112
+ toggleSelected(option[primaryKey]);
113
+ !multiple && setInnerOpen(false);
114
+ return;
115
+ }
117
116
  const opened = openedPanels[index] === optVal;
118
117
  if (!opened) {
119
118
  loadOptions && await innerLoadOptions(innerSearchValue.current, option);
@@ -127,6 +126,19 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
127
126
  toggleSelected(option[primaryKey]);
128
127
  onOptionClick(option, index);
129
128
  };
129
+ const actualOptions = innerOptions || options;
130
+ const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
131
+ options: actualOptions,
132
+ multiple,
133
+ value: toStandardValue(pathifiedValue.current),
134
+ onChange(value) {
135
+ setPathifiedValue(toPathifiedValue(value));
136
+ },
137
+ primaryKey,
138
+ childrenKey,
139
+ clearable,
140
+ integration
141
+ });
130
142
  /**
131
143
  * --------------------------------------------------------------------
132
144
  * 键盘控制
@@ -152,13 +164,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
152
164
  setOpen: setInnerOpen,
153
165
  onEnter(info) {
154
166
  keyboardPressHandler(info);
155
- },
156
- onKeyDown(info, e) {
157
- if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
158
- // 在最后一个面板按右箭头，相当于按回车
159
- e.preventDefault();
160
- keyboardPressHandler(info);
161
- }
162
167
  }
163
168
  });
164
169
  const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
@@ -181,9 +186,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
181
186
  if (multiple) {
182
187
  return pathifiedValue.current?.map(path => _jsx(Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: joinNodes(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
183
188
  }
184
- else {
185
- return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
186
- }
189
+ return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
187
190
  };
188
191
  return (_jsx(Popper, { ...mergeComponentProps({
189
192
  css: cascadePopperStyle,
package/dist/esm/components/cascade/cascade.style.js CHANGED
@@ -58,7 +58,6 @@ export const style = defineCss(({ spacing, text, easing }) => css `
58
58
  white-space: nowrap;
59
59
  text-overflow: ellipsis;
60
60
  overflow: hidden;
61
- direction: rtl;
62
61
  }
63
62
  }
64
63
  }
package/dist/esm/components/cascade/cascadePanel.js CHANGED
@@ -32,7 +32,7 @@ export function CascadePanel({ options, index = 0 }) {
32
32
  if (!option || typeof option !== 'object') {
33
33
  return option;
34
34
  }
35
- const { _parentId, ...opt } = option;
35
+ const { _parentId, _isLast, ...opt } = option;
36
36
  const optVal = opt[primaryKey];
37
37
  const status = selectionStatus?.get(optVal);
38
38
  const opened = openedPanels[index] === optVal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.199",
3
+ "version": "0.0.200",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",