@hi-ui/dropdown 4.0.5 → 4.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @hi-ui/dropdown
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2592](https://github.com/XiaoMi/hiui/pull/2592) [`4a903b331`](https://github.com/XiaoMi/hiui/commit/4a903b33146db140a2c8edd6951385ad9a6fcdde) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: add size api
+
+## 4.0.6
+
+### Patch Changes
+
+- [#2491](https://github.com/XiaoMi/hiui/pull/2491) [`80262b227`](https://github.com/XiaoMi/hiui/commit/80262b227cbab0799007fd931c93c2848204b48c) Thanks [@safga](https://github.com/safga)! - fix: 增加 dataItem 设置 disable 后样式

package/lib/cjs/Dropdown.js

@@ -52,11 +52,6 @@ var _prefix = classname.getPrefixCls(_role);
 var DEFAULT_DATA = [];
 /**
  * 下拉菜单
- *
- * TODO:
- * 1. 支持自定义icon
- * 2. 支持 titleRender
- * 3. 支持 onClick 阻止默认行为关闭
  */
 
 var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -74,7 +69,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _onClick = _a.onClick,
       onButtonClick = _a.onButtonClick,
       overlayClassName = _a.overlayClassName,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName"]);
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'lg' : _a$size,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
 
   var _b = useDropdown.useDropdown(rest),
       rootProps = _b.rootProps,
@@ -91,7 +88,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var menu = typeAssertion.isArrayNonEmpty(item.children) ? /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
         overlay: {
           gutterGap: 16
-        }
+        },
+        size: size
       }, dig(item.children)) : null;
 
       if (item.split) {
@@ -109,6 +107,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         value: item.id,
         menu: menu,
         onClick: function onClick() {
+          if (item.disabled) return;
           _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
 
           if (!typeAssertion.isArray(item.children)) {
@@ -159,7 +158,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       disabledPortal: false,
       className: overlayClassName
     }
-  })), dig(data)) : null));
+  }), {
+    size: size
+  }), dig(data)) : null));
 });
 
 if (env.__DEV__) {
@@ -167,10 +168,6 @@ if (env.__DEV__) {
 }
 
 var dropdownMenuPrefix = classname.getPrefixCls('dropdown-menu');
-/**
- * TODO: What is DropdownMenu
- */
-
 var DropdownMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls2 = _a.prefixCls,
       prefixCls = _a$prefixCls2 === void 0 ? dropdownMenuPrefix : _a$prefixCls2,
@@ -178,9 +175,11 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       parents = _a.parents,
       className = _a.className,
       children = _a.children,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children"]);
+      _a$size2 = _a.size,
+      size = _a$size2 === void 0 ? 'lg' : _a$size2,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children", "size"]);
 
-  var cls = classname.cx(prefixCls, className);
+  var cls = classname.cx(prefixCls, className, prefixCls + "--size-" + size);
   return /*#__PURE__*/React__default["default"].createElement(popper.Popper, Object.assign({}, overlay), /*#__PURE__*/React__default["default"].createElement("ul", Object.assign({
     ref: ref,
     className: cls
@@ -196,10 +195,6 @@ if (env.__DEV__) {
 }
 
 var dropdownMenuItemPrefix = classname.getPrefixCls('dropdown-menu-item');
-/**
- * TODO: What is DropdownMenuItem
- */
-
 var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls3 = _a.prefixCls,
       prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls3,
@@ -231,7 +226,7 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       getTriggerProps = _useDropdown.getTriggerProps,
       getMenuProps = _useDropdown.getMenuProps;
 
-  var cls = classname.cx(prefixCls, className, menuVisible && prefixCls + "--active");
+  var cls = classname.cx(prefixCls, className, menuVisible && prefixCls + "--active", disabled && prefixCls + "--disabled");
   var shouldUseLink = href && !disabled;
   return /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
     ref: ref,

package/lib/cjs/styles/index.scss.js

@@ -12,9 +12,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v4-dropdown {display: inline-block; }.hi-v4-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: var(--hi-v4-dropdown-menu-width, 180px); }.hi-v4-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: 0;box-sizing: border-box;overflow: visible;padding: var(--hi-v4-spacing-2, 4px) 0; }.hi-v4-dropdown-menu-item__link {color: var(--hi-v4-color-gray-700, #1f2733);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg); }.hi-v4-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;border-radius: var(--hi-v4-border-radius-md, 4px);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-6, 12px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; }.hi-v4-dropdown-menu-item__trigger:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-dropdown-menu-item--active > .hi-v4-dropdown-menu-item__trigger {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v4-color-gray-200, #ebedf0);width: 100%;height: 1px;margin: var(--hi-v4-spacing-4, 8px) 0; }";
+var css_248z = ".hi-v4-dropdown {display: inline-block;}.hi-v4-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: var(--hi-v4-dropdown-menu-width, 180px);}.hi-v4-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: 0;box-sizing: border-box;overflow: visible;}.hi-v4-dropdown-menu-item__link {color: var(--hi-v4-color-gray-700, #1f2733);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v4-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}.hi-v4-dropdown-menu--size-lg .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-5, 10px);}.hi-v4-dropdown-menu--size-md .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-4, 8px);}.hi-v4-dropdown-menu--size-sm .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);}.hi-v4-dropdown-menu-item:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--active:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--disabled > .hi-v4-dropdown-menu-item__trigger {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v4-color-gray-200, #ebedf0);width: 100%;height: 1px;margin: var(--hi-v4-spacing-4, 8px) 0;}";
 
-var __styleInject__ = require('inject-head-style')["default"];
+var __styleInject__ = require('style-inject')["default"];
 
 __styleInject__(css_248z);
 

package/lib/esm/Dropdown.js

@@ -24,11 +24,6 @@ var _prefix = getPrefixCls(_role);
 var DEFAULT_DATA = [];
 /**
  * 下拉菜单
- *
- * TODO:
- * 1. 支持自定义icon
- * 2. 支持 titleRender
- * 3. 支持 onClick 阻止默认行为关闭
  */
 
 var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -46,7 +41,9 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
       _onClick = _a.onClick,
       onButtonClick = _a.onButtonClick,
       overlayClassName = _a.overlayClassName,
-      rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName"]);
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'lg' : _a$size,
+      rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
 
   var _b = useDropdown(rest),
       rootProps = _b.rootProps,
@@ -63,7 +60,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
       var menu = isArrayNonEmpty(item.children) ? /*#__PURE__*/React.createElement(DropdownMenu, {
         overlay: {
           gutterGap: 16
-        }
+        },
+        size: size
       }, dig(item.children)) : null;
 
       if (item.split) {
@@ -81,6 +79,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
         value: item.id,
         menu: menu,
         onClick: function onClick() {
+          if (item.disabled) return;
           _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
 
           if (!isArray(item.children)) {
@@ -131,7 +130,9 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
       disabledPortal: false,
       className: overlayClassName
     }
-  })), dig(data)) : null));
+  }), {
+    size: size
+  }), dig(data)) : null));
 });
 
 if (__DEV__) {
@@ -139,10 +140,6 @@ if (__DEV__) {
 }
 
 var dropdownMenuPrefix = getPrefixCls('dropdown-menu');
-/**
- * TODO: What is DropdownMenu
- */
-
 var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls2 = _a.prefixCls,
       prefixCls = _a$prefixCls2 === void 0 ? dropdownMenuPrefix : _a$prefixCls2,
@@ -150,9 +147,11 @@ var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
       parents = _a.parents,
       className = _a.className,
       children = _a.children,
-      rest = __rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children"]);
+      _a$size2 = _a.size,
+      size = _a$size2 === void 0 ? 'lg' : _a$size2,
+      rest = __rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children", "size"]);
 
-  var cls = cx(prefixCls, className);
+  var cls = cx(prefixCls, className, prefixCls + "--size-" + size);
   return /*#__PURE__*/React.createElement(Popper, Object.assign({}, overlay), /*#__PURE__*/React.createElement("ul", Object.assign({
     ref: ref,
     className: cls
@@ -168,10 +167,6 @@ if (__DEV__) {
 }
 
 var dropdownMenuItemPrefix = getPrefixCls('dropdown-menu-item');
-/**
- * TODO: What is DropdownMenuItem
- */
-
 var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls3 = _a.prefixCls,
       prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls3,
@@ -203,7 +198,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       getTriggerProps = _useDropdown.getTriggerProps,
       getMenuProps = _useDropdown.getMenuProps;
 
-  var cls = cx(prefixCls, className, menuVisible && prefixCls + "--active");
+  var cls = cx(prefixCls, className, menuVisible && prefixCls + "--active", disabled && prefixCls + "--disabled");
   var shouldUseLink = href && !disabled;
   return /*#__PURE__*/React.createElement("li", Object.assign({
     ref: ref,

package/lib/esm/styles/index.scss.js

@@ -7,8 +7,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import __styleInject__ from 'inject-head-style';
-var css_248z = ".hi-v4-dropdown {display: inline-block; }.hi-v4-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: var(--hi-v4-dropdown-menu-width, 180px); }.hi-v4-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: 0;box-sizing: border-box;overflow: visible;padding: var(--hi-v4-spacing-2, 4px) 0; }.hi-v4-dropdown-menu-item__link {color: var(--hi-v4-color-gray-700, #1f2733);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg); }.hi-v4-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;border-radius: var(--hi-v4-border-radius-md, 4px);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-6, 12px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; }.hi-v4-dropdown-menu-item__trigger:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-dropdown-menu-item--active > .hi-v4-dropdown-menu-item__trigger {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v4-color-gray-200, #ebedf0);width: 100%;height: 1px;margin: var(--hi-v4-spacing-4, 8px) 0; }";
+import __styleInject__ from 'style-inject';
+var css_248z = ".hi-v4-dropdown {display: inline-block;}.hi-v4-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: var(--hi-v4-dropdown-menu-width, 180px);}.hi-v4-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: 0;box-sizing: border-box;overflow: visible;}.hi-v4-dropdown-menu-item__link {color: var(--hi-v4-color-gray-700, #1f2733);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v4-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}.hi-v4-dropdown-menu--size-lg .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-5, 10px);}.hi-v4-dropdown-menu--size-md .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-4, 8px);}.hi-v4-dropdown-menu--size-sm .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);}.hi-v4-dropdown-menu-item:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--active:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--disabled > .hi-v4-dropdown-menu-item__trigger {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v4-color-gray-200, #ebedf0);width: 100%;height: 1px;margin: var(--hi-v4-spacing-4, 8px) 0;}";
 
 __styleInject__(css_248z);
 

package/lib/types/Dropdown.d.ts

@@ -1,15 +1,10 @@
 import React from 'react';
-import { HiBaseHTMLProps } from '@hi-ui/core';
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { PopperOverlayProps } from '@hi-ui/popper';
 import { UseDropdownProps } from './use-dropdown';
 import { DropdownDataItem } from './types';
 /**
  * 下拉菜单
- *
- * TODO:
- * 1. 支持自定义icon
- * 2. 支持 titleRender
- * 3. 支持 onClick 阻止默认行为关闭
  */
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, UseDropdownProps {
@@ -54,4 +49,8 @@ export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>,
      * 自定义控制 下拉 popper 行为
      */
     overlay?: PopperOverlayProps;
+    /**
+     * 设置大小
+     */
+    size?: HiBaseSizeEnum;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/dropdown",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -63,10 +63,8 @@
   },
   "devDependencies": {
     "@hi-ui/core": "^4.0.4",
-    "@hi-ui/core-css": "^4.0.1",
-    "@hi-ui/hi-build": "^4.0.1",
+    "@hi-ui/core-css": "^4.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
-  },
-  "gitHead": "686243832edd8a2d114ac385d0910838233c1e85"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Xiaomi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.