@hi-ui/dropdown 4.1.5 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hi-ui/dropdown
 
+## 4.2.1
+
+### Patch Changes
+
+- [#2934](https://github.com/XiaoMi/hiui/pull/2934) [`cafc0a56b`](https://github.com/XiaoMi/hiui/commit/cafc0a56b2630ab145fceeea4838b7914bbd8da1) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - fix: 修复 overlay={{className: 'xx'}} 不生效问题
+
+## 4.2.0
+
+### Minor Changes
+
+- [#2889](https://github.com/XiaoMi/hiui/pull/2889) [`dce209cd0`](https://github.com/XiaoMi/hiui/commit/dce209cd0ec0ac7ba405373923eb656d75842085) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 支持配置字段别名
+
 ## 4.1.5
 
 ### Patch Changes

package/lib/cjs/Dropdown.js

@@ -23,6 +23,7 @@ var useDropdown = require('./use-dropdown.js');
 var typeAssertion = require('@hi-ui/type-assertion');
 var Button = require('@hi-ui/button');
 var icons = require('@hi-ui/icons');
+var index = require('./utils/index.js');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -45,6 +46,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     triggerButton = _a.children,
     _a$data = _a.data,
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
+    fieldNames = _a.fieldNames,
     title = _a.title,
     _a$type = _a.type,
     type = _a$type === void 0 ? 'text' : _a$type,
@@ -53,7 +55,10 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     overlayClassName = _a.overlayClassName,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'md' : _a$size,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
+  var transformedData = React.useMemo(function () {
+    return index.transformData(data, fieldNames);
+  }, [data, fieldNames]);
   var _b = useDropdown.useDropdown(rest),
     rootProps = _b.rootProps,
     providedValue = tslib.__rest(_b, ["rootProps"]);
@@ -124,14 +129,14 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     role: role,
     className: cls
-  }, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(data) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, Object.assign({}, getMenuProps({
+  }, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(transformedData) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, Object.assign({}, getMenuProps({
     overlay: {
       disabledPortal: false,
       className: overlayClassName
     }
   }), {
     size: size
-  }), dig(data))) : null));
+  }), dig(transformedData))) : null));
 });
 if (env.__DEV__) {
   Dropdown.displayName = 'Dropdown';

package/lib/cjs/use-dropdown.js

@@ -128,12 +128,14 @@ var useDropdown = function useDropdown(props) {
     if (ref === void 0) {
       ref = null;
     }
+    var _a;
     var menuParents = parents.concat(triggerElementRef);
     var menuProps = Object.assign(Object.assign({}, props), {
       ref: reactUtils.mergeRefs(popperElementRef, ref),
       parents: menuParents,
       style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[classname.getPrefixStyleVar('dropdown-menu-width')] = typeAssertion.isNumeric(width) ? width + 'px' : width, _Object$assign)),
       overlay: Object.assign(Object.assign(Object.assign({}, overlay), props.overlay), {
+        className: (_a = props.overlay.className) !== null && _a !== void 0 ? _a : overlay === null || overlay === void 0 ? void 0 : overlay.className,
         closeOnOutsideClick: true,
         visible: menuVisible,
         attachEl: triggerElementRef.current,

package/lib/cjs/utils/index.js

@@ -23,4 +23,28 @@ var typeAssertion = require('@hi-ui/type-assertion');
 var normalizeTrigger = function normalizeTrigger(trigger) {
   return typeAssertion.isArray(trigger) ? Array.from(new Set(trigger)) : [trigger];
 };
+var transformData = function transformData(data, fieldNames) {
+  /**
+   * 转换对象
+   */
+  var getKeyFields = function getKeyFields(node, key) {
+    if (fieldNames) {
+      return node[fieldNames[key] || key];
+    }
+    return node[key];
+  };
+  var traverseNode = function traverseNode(node) {
+    var _a, _b;
+    var newNode = Object.assign({}, node);
+    newNode.id = getKeyFields(newNode, 'id');
+    newNode.title = getKeyFields(newNode, 'title');
+    newNode.href = getKeyFields(newNode, 'href');
+    newNode.disabled = (_a = getKeyFields(newNode, 'disabled')) !== null && _a !== void 0 ? _a : false;
+    newNode.split = (_b = getKeyFields(newNode, 'split')) !== null && _b !== void 0 ? _b : false;
+    newNode.target = getKeyFields(newNode, 'target');
+    return newNode;
+  };
+  return data.map(traverseNode);
+};
 exports.normalizeTrigger = normalizeTrigger;
+exports.transformData = transformData;

package/lib/esm/Dropdown.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, cloneElement } from 'react';
+import React, { forwardRef, useMemo, cloneElement } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { Popper } from '@hi-ui/popper';
@@ -17,6 +17,7 @@ import { useDropdown } from './use-dropdown.js';
 import { isArrayNonEmpty, isArray } from '@hi-ui/type-assertion';
 import Button, { ButtonGroup } from '@hi-ui/button';
 import { DownOutlined } from '@hi-ui/icons';
+import { transformData } from './utils/index.js';
 var _role = 'dropdown';
 var _prefix = getPrefixCls(_role);
 var DEFAULT_DATA = [];
@@ -32,6 +33,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
     triggerButton = _a.children,
     _a$data = _a.data,
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
+    fieldNames = _a.fieldNames,
     title = _a.title,
     _a$type = _a.type,
     type = _a$type === void 0 ? 'text' : _a$type,
@@ -40,7 +42,10 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
     overlayClassName = _a.overlayClassName,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'md' : _a$size,
-    rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
+  var transformedData = useMemo(function () {
+    return transformData(data, fieldNames);
+  }, [data, fieldNames]);
   var _b = useDropdown(rest),
     rootProps = _b.rootProps,
     providedValue = __rest(_b, ["rootProps"]);
@@ -111,14 +116,14 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref,
     role: role,
     className: cls
-  }, rootProps), renderButton(), isArrayNonEmpty(data) ? ( /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
+  }, rootProps), renderButton(), isArrayNonEmpty(transformedData) ? ( /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
     overlay: {
       disabledPortal: false,
       className: overlayClassName
     }
   }), {
     size: size
-  }), dig(data))) : null));
+  }), dig(transformedData))) : null));
 });
 if (__DEV__) {
   Dropdown.displayName = 'Dropdown';

package/lib/esm/use-dropdown.js

@@ -123,12 +123,14 @@ var useDropdown = function useDropdown(props) {
     if (ref === void 0) {
       ref = null;
     }
+    var _a;
     var menuParents = parents.concat(triggerElementRef);
     var menuProps = Object.assign(Object.assign({}, props), {
       ref: mergeRefs(popperElementRef, ref),
       parents: menuParents,
       style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[getPrefixStyleVar('dropdown-menu-width')] = isNumeric(width) ? width + 'px' : width, _Object$assign)),
       overlay: Object.assign(Object.assign(Object.assign({}, overlay), props.overlay), {
+        className: (_a = props.overlay.className) !== null && _a !== void 0 ? _a : overlay === null || overlay === void 0 ? void 0 : overlay.className,
         closeOnOutsideClick: true,
         visible: menuVisible,
         attachEl: triggerElementRef.current,

package/lib/esm/utils/index.js

@@ -18,4 +18,27 @@ import { isArray } from '@hi-ui/type-assertion';
 var normalizeTrigger = function normalizeTrigger(trigger) {
   return isArray(trigger) ? Array.from(new Set(trigger)) : [trigger];
 };
-export { normalizeTrigger };
+var transformData = function transformData(data, fieldNames) {
+  /**
+   * 转换对象
+   */
+  var getKeyFields = function getKeyFields(node, key) {
+    if (fieldNames) {
+      return node[fieldNames[key] || key];
+    }
+    return node[key];
+  };
+  var traverseNode = function traverseNode(node) {
+    var _a, _b;
+    var newNode = Object.assign({}, node);
+    newNode.id = getKeyFields(newNode, 'id');
+    newNode.title = getKeyFields(newNode, 'title');
+    newNode.href = getKeyFields(newNode, 'href');
+    newNode.disabled = (_a = getKeyFields(newNode, 'disabled')) !== null && _a !== void 0 ? _a : false;
+    newNode.split = (_b = getKeyFields(newNode, 'split')) !== null && _b !== void 0 ? _b : false;
+    newNode.target = getKeyFields(newNode, 'target');
+    return newNode;
+  };
+  return data.map(traverseNode);
+};
+export { normalizeTrigger, transformData };

package/lib/types/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
+import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { PopperOverlayProps } from '@hi-ui/popper';
 import { UseDropdownProps } from './use-dropdown';
 import { DropdownDataItem } from './types';
@@ -16,6 +16,10 @@ export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>,
      * 下拉菜单数据项
      */
     data?: DropdownDataItem[];
+    /**
+     * 设置data 中id, title, href, target, disabled, split 等属性对应的 key
+     */
+    fieldNames?: HiBaseFieldNames;
     /**
      * 设置下拉面板宽度
      */

package/lib/types/utils/index.d.ts

@@ -1,4 +1,5 @@
-import { DropdownTriggerActionEnum } from '../types';
+import { DropdownTriggerActionEnum, DropdownDataItem } from '../types';
+import { HiBaseFieldNames } from '@hi-ui/core';
 /**
  * 抹平 trigger 结构为数组
  *
@@ -6,3 +7,4 @@ import { DropdownTriggerActionEnum } from '../types';
  * @returns
  */
 export declare const normalizeTrigger: (trigger: DropdownTriggerActionEnum | DropdownTriggerActionEnum[]) => DropdownTriggerActionEnum[];
+export declare const transformData: (data: DropdownDataItem[], fieldNames?: HiBaseFieldNames | undefined) => DropdownDataItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/dropdown",
-  "version": "4.1.5",
+  "version": "4.2.1",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",