@aloudata/aloudata-design 1.2.1 → 1.3.1

package/dist/Dropdown/index.d.ts

@@ -1,3 +1,4 @@
+import { MenuProps } from 'antd';
 import React, { ReactElement } from 'react';
 import DropdownButton from './Button';
 declare type Align = {
@@ -35,7 +36,8 @@ export interface IDropdownProps {
      * @type Menu | () => Menu
      * @default -
      */
-    overlay: ReactElement | (() => ReactElement);
+    overlay?: ReactElement | (() => ReactElement);
+    menu?: MenuProps;
     /**
      * @description 下拉根元素的类名称
      * @default -

package/dist/Dropdown/index.js

@@ -1,15 +1,30 @@
-var _excluded = ["children", "open"];
+var _excluded = ["children", "open", "overlayClassName", "menu", "align", "placement"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { Dropdown as AntdDropdown } from 'antd';
-import React from 'react';
+import getPlacements from 'antd/es/_util/placements';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { addPopupOffset } from "../Menu";
 import DropdownButton from "./Button";
 export default function Dropdown(props) {
   var children = props.children,
       open = props.open,
+      overlayClassName = props.overlayClassName,
+      menu = props.menu,
+      align = props.align,
+      placement = props.placement,
       otherProps = _objectWithoutProperties(props, _excluded); // antd 根据 open 字段是否存在来判断 open 是否是可控模式
 
 
@@ -19,6 +34,35 @@ export default function Dropdown(props) {
     antdDropdownProps.open = open;
   }
 
-  return /*#__PURE__*/React.createElement(AntdDropdown, antdDropdownProps, children);
+  var menus = useMemo(function () {
+    if (menu) {
+      return _objectSpread(_objectSpread({}, menu), {}, {
+        items: addPopupOffset(menu.items)
+      });
+    }
+
+    return undefined;
+  }, [menu]);
+  var defaultAlign = useMemo(function () {
+    var _getPlacements;
+
+    if (align) {
+      return align;
+    }
+
+    return {
+      offset: ((_getPlacements = getPlacements({
+        arrowWidth: 0,
+        offset: 1,
+        borderRadius: 0
+      })[placement || 'bottomLeft']) === null || _getPlacements === void 0 ? void 0 : _getPlacements['offset']) || [0, 1]
+    };
+  }, [align]);
+  return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
+    overlayClassName: classNames('ald-dropdown-overlay', overlayClassName),
+    menu: menus,
+    align: defaultAlign,
+    placement: placement
+  }, antdDropdownProps), children);
 }
 Dropdown.Button = DropdownButton;

package/dist/Dropdown/style/index.less

@@ -7,14 +7,29 @@
   box-shadow: none;
 }
 
+.ant-dropdown-menu-submenu-title-content {
+  padding: 8px 24px 8px 8px;
+  line-height: 20px;
+  border-radius: 0 !important;
+
+  .ant-dropdown-menu-submenu-expand-icon {
+    right: 8px;
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    top: 0;
+  }
+}
+
 .ant-dropdown > .ant-dropdown-menu {
   min-width: @Dropdown-menu-minWidth;
   padding: 4px;
   color: @NL0;
   box-shadow: @shadow-L;
 
-  .ant-dropdown-menu-submenu-title {
-    font-size: 13px;
+  .ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title {
+    .ant-dropdown-menu-submenu-title-content();
   }
 }
 
@@ -24,6 +39,8 @@
   box-shadow: @shadow-L;
 
   .ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title {
+    .ant-dropdown-menu-submenu-title-content();
+
     &:hover {
       background-color: #f8f8f8;
     }
@@ -39,8 +56,8 @@
   }
 }
 
-.ald-menu.ald-menu,
-.ald-submenu.ald-submenu {
+.ant-menu.ant-menu,
+.ant-submenu.ant-submenu {
   .ant-dropdown-menu-item-active {
     background-color: #f8f8f8;
   }
@@ -53,6 +70,8 @@
 
   .ant-dropdown-menu-item,
   .ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title {
+    .ant-dropdown-menu-submenu-title-content();
+
     padding: 8px 24px 8px 8px;
 
     &:hover {
@@ -70,17 +89,7 @@
   }
 }
 
-.ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title {
-  padding: 8px 24px 8px 8px;
-  line-height: 20px;
-  border-radius: 0 !important;
-
-  .ant-dropdown-menu-submenu-expand-icon {
-    right: 12px;
-  }
-}
-
-.ald-submenu.ant-dropdown-menu-submenu-popup {
+.ant-submenu.ant-dropdown-menu-submenu-popup {
   padding: 0;
   border: none;
   box-shadow: @shadow-L;

package/dist/IconButton/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IDropdownProps } from '../Dropdown';
+import { TSize } from '../Input';
+import { ITooltipProps } from '../Tooltip';
+interface IIconButtonProps {
+    icon: React.ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+    disabled?: boolean;
+    size?: TSize;
+    className?: string;
+    keepFocus?: boolean;
+    tooltip?: ITooltipProps;
+    id?: string;
+    mode?: 'light' | 'dark';
+}
+declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & IDropdownProps & {
+    showArrow?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>> & {
+    dropdown: typeof DropdownButton;
+    __ANT_BUTTON: boolean;
+};
+export default IconButton;

package/dist/IconButton/index.js

@@ -0,0 +1,162 @@
+var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "overlay", "showArrow", "mode"];
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { FoldDownFill } from '@aloudata/icons-react';
+import classnames from 'classnames';
+import React, { forwardRef, useMemo } from 'react';
+import Dropdown from "../Dropdown";
+import { getSizeType } from "../Input/components/Input";
+import Tooltip from "../Tooltip";
+var InternalIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var icon = props.icon,
+      _props$onClick = props.onClick,
+      onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+      disabled = props.disabled,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      keepFocus = props.keepFocus,
+      className = props.className,
+      tooltip = props.tooltip,
+      id = props.id,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'light' : _props$mode;
+
+  var onButtonClick = function onButtonClick(e) {
+    if (disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+
+    onClick(e);
+  };
+
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+    title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
+  }), /*#__PURE__*/React.createElement("button", {
+    id: id,
+    className: classnames(className, 'ald-icon-button', "ald-icon-button-".concat(getSizeType(size)), {
+      'ald-icon-button-disabled': disabled,
+      'ald-icon-button-focus': keepFocus,
+      'ald-icon-button-dark': mode === 'dark'
+    }),
+    type: "button",
+    ref: ref,
+    onClick: onButtonClick // disabled={disabled}
+
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-icon-button-wrap"
+  }, icon)));
+});
+var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var icon = props.icon,
+      _props$onClick2 = props.onClick,
+      onClick = _props$onClick2 === void 0 ? function () {} : _props$onClick2,
+      disabled = props.disabled,
+      _props$size2 = props.size,
+      size = _props$size2 === void 0 ? 'middle' : _props$size2,
+      menu = props.menu,
+      className = props.className,
+      onOpenChange = props.onOpenChange,
+      tooltip = props.tooltip,
+      id = props.id,
+      overlay = props.overlay,
+      _props$showArrow = props.showArrow,
+      showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+      _props$mode2 = props.mode,
+      mode = _props$mode2 === void 0 ? 'light' : _props$mode2,
+      restDropdownProps = _objectWithoutProperties(props, _excluded);
+
+  var sizeMemo = React.useMemo(function () {
+    return getSizeType(size);
+  }, [size]);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dropdownOpen = _React$useState2[0],
+      setDropdownOpen = _React$useState2[1];
+
+  var onButtonClick = function onButtonClick(e) {
+    if (disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+
+    onClick(e);
+  };
+
+  var onDropdownOpenChange = function onDropdownOpenChange(open) {
+    setDropdownOpen(open);
+
+    if (onOpenChange) {
+      onOpenChange(open);
+    }
+  };
+
+  var canDropdown = useMemo(function () {
+    var hasMenu = menu && menu.items && menu.items.length > 0;
+    return (hasMenu || overlay) && !disabled;
+  }, [menu, overlay, disabled]);
+
+  if (!canDropdown) {
+    return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+      title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
+    }), /*#__PURE__*/React.createElement("button", {
+      id: id,
+      className: classnames(className, 'ald-icon-button-dropdown', "ald-icon-button-".concat(getSizeType(size)), {
+        'ald-icon-button-disabled': disabled,
+        'ald-icon-button-dropdown-open': dropdownOpen,
+        'ald-icon-button-dark': mode === 'dark'
+      }),
+      type: "button",
+      ref: ref,
+      onClick: onButtonClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-icon-button-wrap"
+    }, icon), showArrow && /*#__PURE__*/React.createElement(FoldDownFill, {
+      size: sizeMemo === 'large' ? 20 : 16
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+    title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
+  }), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    menu: menu,
+    onOpenChange: onDropdownOpenChange
+  }, restDropdownProps), /*#__PURE__*/React.createElement("button", {
+    id: id,
+    className: classnames(className, 'ald-icon-button-dropdown', "ald-icon-button-".concat(getSizeType(size)), {
+      'ald-icon-button-disabled': disabled,
+      'ald-icon-button-dropdown-open': dropdownOpen
+    }),
+    type: "button",
+    ref: ref,
+    onClick: onButtonClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-icon-button-wrap"
+  }, icon), showArrow && /*#__PURE__*/React.createElement(FoldDownFill, {
+    size: sizeMemo === 'large' ? 20 : 16
+  }))));
+});
+var IconButton = InternalIconButton;
+IconButton.dropdown = DropdownButton;
+IconButton.__ANT_BUTTON = true;
+export default IconButton;

package/dist/IconButton/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/dist/IconButton/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.less";

package/dist/IconButton/style/index.less

@@ -0,0 +1,128 @@
+@import '../../style/index.less';
+@import '../../Dropdown/style/index.less';
+@import '../../Menu/style/index.less';
+@import '../../Tooltip/style/index.less';
+@icon-button-size-large: 28px;
+@icon-button-size-middle: 24px;
+@icon-button-size-small: 20px;
+@icon-button-icon-size-large: 24px;
+@icon-button-icon-size-middle: 20px;
+@icon-button-icon-size-small: 16px;
+
+.ald-icon-button,
+.ald-icon-button-dropdown {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  outline: 0;
+  font-size: inherit;
+  color: #171717;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  box-sizing: border-box;
+  user-select: none;
+  transition: all 0.3s;
+
+  &:hover {
+    background: var(--colors-gray-98, #f4f4f4);
+  }
+
+  &:active {
+    // mouse down
+    background: var(--colors-gray-100, #ededed);
+  }
+
+  &-disabled {
+    opacity: 0.5;
+    cursor: default;
+    background-color: transparent;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+
+  &.ald-icon-button-focus {
+    background: var(--colors-gray-100, #f4f4f4);
+  }
+
+  &.ald-icon-button-dropdown-open {
+    background: var(--colors-gray-98, #f4f4f4);
+  }
+
+  &.ald-icon-button-dropdown {
+    width: fit-content;
+    word-spacing: 0;
+  }
+
+  &.ald-icon-button-dark {
+    color: #d5d5d5;
+
+    &:hover {
+      background: fade(#f4f4f4, 10%);
+    }
+
+    &:active {
+      background: fade(#ededed, 20%);
+    }
+  }
+
+  &:not(.ald-icon-button-dark) {
+    mix-blend-mode: multiply;
+  }
+}
+
+.ald-icon-button-wrap-content(@size) {
+  max-width: @size;
+  max-height: @size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.ald-icon-button-large {
+  width: @icon-button-size-large;
+  height: @icon-button-size-large;
+  padding: 2px;
+  border-radius: 4px;
+  font-size: @icon-button-icon-size-large;
+
+  .ald-icon-button-wrap {
+    .ald-icon-button-wrap-content(@icon-button-icon-size-large);
+  }
+}
+
+.ald-icon-button-middle {
+  width: @icon-button-size-middle;
+  height: @icon-button-size-middle;
+  padding: 2px;
+  border-radius: 2px;
+  font-size: @icon-button-icon-size-middle;
+
+  .ald-icon-button-wrap {
+    .ald-icon-button-wrap-content(@icon-button-icon-size-middle);
+  }
+}
+
+.ald-icon-button-small {
+  width: @icon-button-size-small;
+  height: @icon-button-size-small;
+  padding: 2px;
+  border-radius: 2px;
+  font-size: @icon-button-icon-size-small;
+
+  .ald-icon-button-wrap {
+    .ald-icon-button-wrap-content(@icon-button-icon-size-small);
+  }
+}

package/dist/Menu/index.d.ts

@@ -14,6 +14,7 @@ export interface IMenuProps extends Omit<MenuProps, 'theme'> {
     children?: React.ReactNode | React.ReactNode[];
 }
 export declare type ItemType = antdItemType;
+export declare function addPopupOffset(items?: ItemType[]): antdItemType[] | undefined;
 declare function Menu(props: IMenuProps): JSX.Element;
 declare namespace Menu {
     var Item: typeof MenuItem;

package/dist/Menu/index.js

@@ -25,7 +25,7 @@ function isSubMenuType(item) {
   return item.children !== undefined;
 }
 
-function addPopupOffset(items) {
+export function addPopupOffset(items) {
   if (typeof items === 'undefined') {
     return;
   }
@@ -44,7 +44,6 @@ function addPopupOffset(items) {
     return item;
   }, []);
 }
-
 export default function Menu(props) {
   var className = props.className,
       expandIcon = props.expandIcon,

package/dist/Menu/style/dropdown.less

@@ -1,16 +1,15 @@
-
 // Menu 和子menu的样式
 .dropdown-menu-content {
   background: @BG100;
   border: 1px solid @BG70;
   border-radius: 2px;
   box-shadow: @shadow-L;
-  padding:  0;
+  padding: 0;
 
   .ant-dropdown-menu-item-divider,
   .ant-dropdown-menu-submenu-title-divider {
     background-color: @BG70;
-    margin:0;
+    margin: 0;
   }
 
   .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
@@ -36,7 +35,7 @@
 }
 
 .ant-dropdown.ant-dropdown {
-  .ald-menu.ant-dropdown-menu {
+  .ant-dropdown-menu.ant-dropdown-menu {
     .dropdown-menu-content();
   }
 }
@@ -51,7 +50,7 @@
   }
 
   &.ant-dropdown-menu-submenu-active {
-    background-color: @BG90; 
+    background-color: @BG90;
   }
 }
 

package/dist/index.d.ts

@@ -32,8 +32,9 @@ export type { IEmptyProps as EmptyProps } from './Empty';
 export { default as Form } from './Form';
 export type { FormInstance, FormItemProps, FormProps } from './Form';
 export { default as Icon } from './Icon';
+export { default as IconButton } from './IconButton';
 export { default as Input } from './Input';
-export type { IInputProps as InputProps, InputRef, TextAreaRef } from './Input';
+export type { IInputProps as InputProps, InputRef, TextAreaRef, TSize, } from './Input';
 export { default as InputNumber } from './InputNumber';
 export type { IInputNumberProps as InputNumberProps } from './InputNumber';
 export { default as Layout } from './Layout';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Dropdown } from "./Dropdown";
 export { default as Empty } from "./Empty";
 export { default as Form } from "./Form";
 export { default as Icon } from "./Icon";
+export { default as IconButton } from "./IconButton";
 export { default as Input } from "./Input";
 export { default as InputNumber } from "./InputNumber";
 export { default as Layout } from "./Layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",