@hi-ui/check-select 4.3.2 → 4.3.4

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.
@@ -12,8 +12,8 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  var React = require('react');
16
+
17
17
  /** @LICENSE
18
18
  * @hi-ui/use-cache
19
19
  * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
@@ -27,17 +27,13 @@ var React = require('react');
27
27
  /**
28
28
  * A hook using for data cache that compatible with the controlled and uncontrolled modes coexist.
29
29
  */
30
-
31
-
32
30
  var useCache = function useCache(data) {
33
31
  var _useState = React.useState(data),
34
- internalData = _useState[0],
35
- setInternalData = _useState[1];
36
-
32
+ internalData = _useState[0],
33
+ setInternalData = _useState[1];
37
34
  React.useEffect(function () {
38
35
  setInternalData(data);
39
36
  }, [data]);
40
37
  return [internalData, setInternalData];
41
38
  };
42
-
43
39
  exports.useCache = useCache;
@@ -12,31 +12,24 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  var tslib = require('tslib');
17
-
18
16
  var React = require('react');
19
-
20
17
  var useChildren = require('@hi-ui/use-children');
21
-
22
18
  var NOOP_ARRAY = [];
23
-
24
19
  var useData = function useData(_ref) {
25
20
  var data = _ref.data,
26
- children = _ref.children;
21
+ children = _ref.children;
27
22
  return React.useMemo(function () {
28
- var mergedData; // data 优先级大于内嵌式组合
29
-
23
+ var mergedData;
24
+ // data 优先级大于内嵌式组合
30
25
  if (Array.isArray(data)) {
31
26
  mergedData = data;
32
27
  } else if (children) {
33
28
  mergedData = parseChildren(children);
34
29
  }
35
-
36
30
  return mergedData || NOOP_ARRAY;
37
31
  }, [children, data]);
38
32
  };
39
-
40
33
  var parseChildren = function parseChildren(children) {
41
34
  var data = [];
42
35
  var list = useChildren.toArray(children);
@@ -44,13 +37,11 @@ var parseChildren = function parseChildren(children) {
44
37
  if (! /*#__PURE__*/React.isValidElement(item)) return;
45
38
  if (!item.type) return;
46
39
  var HiName = item.type.HiName;
47
-
48
40
  switch (HiName) {
49
41
  case 'CheckSelectOption':
50
42
  var option = parseOption(item);
51
43
  data.push(option);
52
44
  break;
53
-
54
45
  case 'CheckSelectOptionGroup':
55
46
  var optGroup = parseOptionGroup(item);
56
47
  data.push(optGroup);
@@ -59,14 +50,12 @@ var parseChildren = function parseChildren(children) {
59
50
  });
60
51
  return data;
61
52
  };
62
-
63
53
  var parseOption = function parseOption(node) {
64
54
  var _a = node.props,
65
- value = _a.value,
66
- children = _a.children,
67
- disabled = _a.disabled,
68
- rest = tslib.__rest(_a, ["value", "children", "disabled", "groupTitle"]);
69
-
55
+ value = _a.value,
56
+ children = _a.children,
57
+ disabled = _a.disabled,
58
+ rest = tslib.__rest(_a, ["value", "children", "disabled", "groupTitle"]);
70
59
  var option = {
71
60
  id: value,
72
61
  title: children,
@@ -76,28 +65,23 @@ var parseOption = function parseOption(node) {
76
65
  };
77
66
  return option;
78
67
  };
79
-
80
68
  var parseOptionGroup = function parseOptionGroup(node) {
81
69
  var key = node.key,
82
- _a = node.props,
83
- groupId = _a.groupId,
84
- label = _a.label,
85
- children = _a.children,
86
- rest = tslib.__rest(_a, ["groupId", "label", "children"]);
87
-
70
+ _a = node.props,
71
+ groupId = _a.groupId,
72
+ label = _a.label,
73
+ children = _a.children,
74
+ rest = tslib.__rest(_a, ["groupId", "label", "children"]);
88
75
  var optGroup = {
89
76
  groupId: groupId !== null && groupId !== void 0 ? groupId : key,
90
77
  groupTitle: label,
91
78
  rootProps: rest,
92
79
  children: []
93
80
  };
94
-
95
81
  if (children) {
96
82
  optGroup.children = parseChildren(children);
97
83
  }
98
-
99
84
  return optGroup;
100
85
  };
101
-
102
86
  exports.parseChildren = parseChildren;
103
87
  exports.useData = useData;
@@ -12,19 +12,15 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  var React = require('react');
17
-
18
16
  var treeUtils = require('@hi-ui/tree-utils');
19
-
20
17
  var NOOP_ARRAY = [];
21
18
  var DEFAULT_FIELD_NAMES = {};
22
-
23
19
  var useFlattenData = function useFlattenData(_ref) {
24
20
  var _ref$data = _ref.data,
25
- data = _ref$data === void 0 ? NOOP_ARRAY : _ref$data,
26
- _ref$fieldNames = _ref.fieldNames,
27
- fieldNames = _ref$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref$fieldNames;
21
+ data = _ref$data === void 0 ? NOOP_ARRAY : _ref$data,
22
+ _ref$fieldNames = _ref.fieldNames,
23
+ fieldNames = _ref$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref$fieldNames;
28
24
  var flattedData = React.useMemo(function () {
29
25
  return flattenData({
30
26
  data: data,
@@ -33,29 +29,25 @@ var useFlattenData = function useFlattenData(_ref) {
33
29
  }, [data, fieldNames]);
34
30
  return flattedData;
35
31
  };
36
-
37
32
  var flattenData = function flattenData(_ref2) {
38
33
  var _ref2$data = _ref2.data,
39
- data = _ref2$data === void 0 ? NOOP_ARRAY : _ref2$data,
40
- _ref2$fieldNames = _ref2.fieldNames,
41
- fieldNames = _ref2$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref2$fieldNames; // 转换对象
42
-
34
+ data = _ref2$data === void 0 ? NOOP_ARRAY : _ref2$data,
35
+ _ref2$fieldNames = _ref2.fieldNames,
36
+ fieldNames = _ref2$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _ref2$fieldNames;
37
+ // 转换对象
43
38
  var getKeyFields = function getKeyFields(node, key) {
44
39
  return node[fieldNames[key] || key];
45
40
  };
46
-
47
41
  return treeUtils.baseFlattenTree({
48
42
  tree: data,
49
43
  childrenFieldName: function childrenFieldName(node) {
50
44
  return getKeyFields(node, 'children');
51
45
  },
52
46
  transform: function transform(node) {
53
- var _a; // 不对外暴露
54
-
55
-
47
+ var _a;
48
+ // 不对外暴露
56
49
  delete node.parent;
57
50
  var raw = node.raw;
58
-
59
51
  if ('groupId' in raw) {
60
52
  // 用于虚拟列表唯一 id
61
53
  node.id = raw.groupId;
@@ -67,11 +59,9 @@ var flattenData = function flattenData(_ref2) {
67
59
  node.title = getKeyFields(raw, 'title');
68
60
  node.disabled = (_a = getKeyFields(raw, 'disabled')) !== null && _a !== void 0 ? _a : false;
69
61
  }
70
-
71
62
  return node;
72
63
  }
73
64
  });
74
65
  };
75
-
76
66
  exports.flattenData = flattenData;
77
67
  exports.useFlattenData = useFlattenData;
package/lib/cjs/index.js CHANGED
@@ -12,11 +12,8 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  require('./styles/index.scss.js');
17
-
18
16
  var CheckSelect = require('./CheckSelect.js');
19
-
20
17
  exports.CheckSelect = CheckSelect.CheckSelect;
21
18
  exports.CheckSelectOption = CheckSelect.CheckSelectOption;
22
19
  exports.CheckSelectOptionGroup = CheckSelect.CheckSelectOptionGroup;
@@ -13,9 +13,6 @@ Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
15
  var css_248z = ".hi-v4-check-select-option {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;border-radius: var(--hi-v4-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option__indent {display: inline-block;width: 16px;height: 100%;}.hi-v4-check-select-option__title {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: inherit;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;font-weight: inherit;color: inherit;line-height: inherit;}.hi-v4-check-select-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--focused {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-select-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-check-select-option-group {display: inline-block;margin-top: var(--hi-v4-spacing-6, 12px);margin-bottom: var(--hi-v4-spacing-2, 4px);padding: var(--hi-v4-spacing-3, 6px) 0 var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-check-select-option-group:first-child {margin-top: var(--hi-v4-spacing-2, 4px);}";
16
-
17
16
  var __styleInject__ = require('style-inject')["default"];
18
-
19
17
  __styleInject__(css_248z);
20
-
21
18
  exports["default"] = css_248z;
@@ -12,77 +12,57 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  var tslib = require('tslib');
17
-
18
16
  var React = require('react');
19
-
20
17
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
21
-
22
18
  var arrayUtils = require('@hi-ui/array-utils');
23
-
24
19
  var useCheck = require('@hi-ui/use-check');
25
-
26
20
  var useLatest = require('@hi-ui/use-latest');
27
-
28
21
  var index = require('./hooks/use-cache/lib/esm/index.js');
29
-
30
22
  var useData = require('./hooks/use-data.js');
31
-
32
23
  var useFlattenData = require('./hooks/use-flatten-data.js');
33
-
34
24
  require('@hi-ui/env');
35
-
36
25
  require('@hi-ui/type-assertion');
37
-
38
26
  var NOOP_ARRAY = [];
39
27
  var NOOP_VALUE = [];
40
-
41
28
  var useCheckSelect = function useCheckSelect(_a) {
42
29
  var _a$data = _a.data,
43
- dataProp = _a$data === void 0 ? NOOP_ARRAY : _a$data,
44
- children = _a.children,
45
- _a$disabled = _a.disabled,
46
- disabled = _a$disabled === void 0 ? false : _a$disabled,
47
- valueProp = _a.value,
48
- _a$defaultValue = _a.defaultValue,
49
- defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
50
- onChangeProp = _a.onChange,
51
- onSelect = _a.onSelect,
52
- fieldNames = _a.fieldNames,
53
- rest = tslib.__rest(_a, ["data", "children", "disabled", "value", "defaultValue", "onChange", "onSelect", "fieldNames"]);
54
-
30
+ dataProp = _a$data === void 0 ? NOOP_ARRAY : _a$data,
31
+ children = _a.children,
32
+ _a$disabled = _a.disabled,
33
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
34
+ valueProp = _a.value,
35
+ _a$defaultValue = _a.defaultValue,
36
+ defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
37
+ onChangeProp = _a.onChange,
38
+ onSelect = _a.onSelect,
39
+ fieldNames = _a.fieldNames,
40
+ rest = tslib.__rest(_a, ["data", "children", "disabled", "value", "defaultValue", "onChange", "onSelect", "fieldNames"]);
55
41
  var data = useData.useData({
56
42
  data: dataProp,
57
43
  children: children
58
44
  });
59
-
60
45
  var _useCache = index.useCache(data),
61
- cacheData = _useCache[0],
62
- setCacheData = _useCache[1];
63
-
46
+ cacheData = _useCache[0],
47
+ setCacheData = _useCache[1];
64
48
  var flattedData = useFlattenData.useFlattenData({
65
49
  data: cacheData,
66
50
  fieldNames: fieldNames
67
51
  });
68
52
  var flattedDataRef = useLatest.useLatestRef(flattedData);
69
-
70
53
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChangeProp),
71
- value = _useUncontrolledState[0],
72
- tryChangeValue = _useUncontrolledState[1];
73
-
54
+ value = _useUncontrolledState[0],
55
+ tryChangeValue = _useUncontrolledState[1];
74
56
  var onSelectLatest = useLatest.useLatestCallback(onSelect);
75
- var usedItemsRef = React.useRef([]); // 扁平化的选中数据,可能包括异步临时选中缓存数据
76
-
57
+ var usedItemsRef = React.useRef([]);
58
+ // 扁平化的选中数据,可能包括异步临时选中缓存数据
77
59
  var _useState = React.useState([]),
78
- checkedItems = _useState[0],
79
- setCheckedItems = _useState[1];
60
+ checkedItems = _useState[0],
61
+ setCheckedItems = _useState[1];
80
62
  /**
81
63
  * 更新缓存的 data 数据
82
64
  * 兼容在搜索异步加载结果的场景时,将选中的项加入到 cacheData 数据中,这样再次打开下拉框时可以显示之前选中的值
83
65
  */
84
-
85
-
86
66
  var updateCacheData = React.useCallback(function (nextCheckedItems) {
87
67
  var newData = [].concat(cacheData);
88
68
  nextCheckedItems.forEach(function (item) {
@@ -96,38 +76,35 @@ var useCheckSelect = function useCheckSelect(_a) {
96
76
  }, [cacheData, flattedData, setCacheData]);
97
77
  var proxyTryChangeValue = React.useCallback(function (value, item, shouldChecked) {
98
78
  var changedItems = item;
99
-
100
79
  if (!Array.isArray(item)) {
101
80
  changedItems = [item];
102
81
  onSelectLatest(value, item, shouldChecked);
103
82
  }
104
-
105
83
  var usedItems = arrayUtils.uniqBy([].concat(changedItems, usedItemsRef.current, flattedDataRef.current), 'id');
106
- usedItemsRef.current = usedItems; // 使用最新的value
107
-
84
+ usedItemsRef.current = usedItems;
85
+ // 使用最新的value
108
86
  var nextCheckedItems = usedItems.filter(function (item) {
109
87
  return value.includes(item.id);
110
88
  });
111
89
  setCheckedItems(nextCheckedItems);
112
- tryChangeValue(value, // 处理脏数据
90
+ tryChangeValue(value,
91
+ // 处理脏数据
113
92
  changedItems.map(function (item) {
114
93
  return 'raw' in item ? item.raw : item;
115
94
  }), nextCheckedItems.map(function (item) {
116
95
  return 'raw' in item ? item.raw : item;
117
- })); // 每次更新 value 时,同步更新下 cacheData
118
-
96
+ }));
97
+ // 每次更新 value 时,同步更新下 cacheData
119
98
  updateCacheData(nextCheckedItems);
120
99
  }, [flattedDataRef, tryChangeValue, updateCacheData, onSelectLatest]);
121
-
122
100
  var _useCheckDefault = useCheck.useCheck({
123
- disabled: disabled,
124
- checkedIds: value,
125
- onCheck: proxyTryChangeValue,
126
- allowCheck: allowCheck
127
- }),
128
- onOptionCheck = _useCheckDefault[0],
129
- isCheckedId = _useCheckDefault[1];
130
-
101
+ disabled: disabled,
102
+ checkedIds: value,
103
+ onCheck: proxyTryChangeValue,
104
+ allowCheck: allowCheck
105
+ }),
106
+ onOptionCheck = _useCheckDefault[0],
107
+ isCheckedId = _useCheckDefault[1];
131
108
  return {
132
109
  rootProps: rest,
133
110
  data: data,
@@ -139,9 +116,7 @@ var useCheckSelect = function useCheckSelect(_a) {
139
116
  checkedItems: checkedItems
140
117
  };
141
118
  };
142
-
143
119
  var allowCheck = function allowCheck(option) {
144
120
  return !option.disabled;
145
121
  };
146
-
147
122
  exports.useCheckSelect = useCheckSelect;
@@ -12,10 +12,10 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
+
15
16
  /**
16
17
  * 判断选项是否进行可选操作
17
18
  */
18
-
19
19
  var isCheckableOption = function isCheckableOption(item) {
20
20
  if ('groupTitle' in item) return false;
21
21
  if (item.disabled) return false;
@@ -24,13 +24,10 @@ var isCheckableOption = function isCheckableOption(item) {
24
24
  /**
25
25
  * 判断选项为
26
26
  */
27
-
28
-
29
27
  var isOption = function isOption(item) {
30
28
  if ('groupTitle' in item) return false;
31
29
  return true;
32
30
  };
33
-
34
31
  var getAllCheckedStatus = function getAllCheckedStatus(dropdownItems, values, filterFunc) {
35
32
  var dropdownIds = dropdownItems.filter(filterFunc).map(function (_ref) {
36
33
  var id = _ref.id;
@@ -46,7 +43,6 @@ var getAllCheckedStatus = function getAllCheckedStatus(dropdownItems, values, fi
46
43
  });
47
44
  return [hasValue && dropdownIdsSet.size === 0, hasValue && dropdownIdsSet.size > 0];
48
45
  };
49
-
50
46
  exports.getAllCheckedStatus = getAllCheckedStatus;
51
47
  exports.isCheckableOption = isCheckableOption;
52
48
  exports.isOption = isOption;