@aloudata/aloudata-design 1.3.0 → 1.4.0

package/dist/IconButton/index.d.ts

@@ -1,16 +1,23 @@
 import React from 'react';
 import { IDropdownProps } from '../Dropdown';
 import { TSize } from '../Input';
+import { ITooltipProps } from '../Tooltip';
 interface IIconButtonProps {
     icon: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLElement>;
+    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 & React.RefAttributes<HTMLButtonElement>>;
+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

@@ -1,6 +1,4 @@
-var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange"];
-
-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); }
+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(); }
 
@@ -18,11 +16,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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 } from 'react';
+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,
@@ -31,7 +32,11 @@ var InternalIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 'middle' : _props$size,
       keepFocus = props.keepFocus,
-      className = props.className;
+      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) {
@@ -43,18 +48,22 @@ var InternalIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick(e);
   };
 
-  return /*#__PURE__*/React.createElement("button", {
+  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-focus': keepFocus,
+      'ald-icon-button-dark': mode === 'dark'
     }),
     type: "button",
     ref: ref,
-    onClick: onButtonClick,
-    disabled: disabled
+    onClick: onButtonClick // disabled={disabled}
+
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-icon-button-wrap"
-  }, icon));
+  }, icon)));
 });
 var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
@@ -66,6 +75,13 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
       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 () {
@@ -95,25 +111,52 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+  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,
-    disabled: disabled
+    onClick: onButtonClick
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-icon-button-wrap"
-  }, icon), /*#__PURE__*/React.createElement(FoldDownFill, {
-    size: sizeMemo === 'large' ? 20 : 16,
-    fill: "#575757"
-  })));
+  }, 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.less

@@ -1,7 +1,7 @@
 @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;
@@ -24,7 +24,7 @@
   padding: 0;
   outline: 0;
   font-size: inherit;
-  color: inherit;
+  color: #171717;
   -webkit-tap-highlight-color: transparent;
   appearance: none;
   box-sizing: border-box;
@@ -60,10 +60,26 @@
     background: var(--colors-gray-98, #f4f4f4);
   }
 
-  &.ant-dropdown-trigger {
+  &.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) {

package/dist/Progress/index.d.ts

@@ -1,3 +1,13 @@
-import Progress, { ProgressProps } from 'antd/es/progress';
-export { ProgressProps };
-export default Progress;
+import React from 'react';
+/**
+ * 条状进度条组件
+ */
+declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
+export default _default;
+export interface IProps {
+    loading: boolean;
+    className?: string;
+}
+export interface IProgressRef {
+    restart: () => void;
+}

package/dist/Progress/index.js

@@ -1,3 +1,88 @@
-import Progress, { ProgressProps } from 'antd/es/progress';
-export { ProgressProps };
-export default Progress;
+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 _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; }
+
+import classNames from 'classnames';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+var ELoadingState;
+/**
+ * 条状进度条组件
+ */
+
+(function (ELoadingState) {
+  ELoadingState["IDLE"] = "IDLE";
+  ELoadingState["LOADING"] = "LOADING";
+  ELoadingState["LOADED"] = "LOADED";
+})(ELoadingState || (ELoadingState = {}));
+
+export default /*#__PURE__*/forwardRef(function Progress(props, ref) {
+  var _classNames2;
+
+  var loading = props.loading,
+      className = props.className;
+
+  var _useState = useState(ELoadingState.IDLE),
+      _useState2 = _slicedToArray(_useState, 2),
+      loadingState = _useState2[0],
+      setLoadingState = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      key = _useState4[0],
+      setKey = _useState4[1];
+
+  useImperativeHandle(ref, function () {
+    return {
+      restart: function restart() {
+        setKey(function (prev) {
+          return prev + 1;
+        });
+      }
+    };
+  });
+  useEffect(function () {
+    if (loadingState !== ELoadingState.IDLE) {
+      if (loadingState === ELoadingState.LOADING && !loading) {
+        // loading 变为 false 时，进度条开始消失
+        setLoadingState(ELoadingState.LOADED);
+      }
+
+      return;
+    } // 防止 loading 快速变化导致的闪烁
+
+
+    var DELAY_TIME = 200;
+    var timer = setTimeout(function () {
+      if (loading) {
+        setLoadingState(ELoadingState.LOADING);
+      }
+    }, DELAY_TIME);
+    return function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [loading, loadingState]);
+  var onAnimationEnd = useCallback(function () {
+    if (loadingState === ELoadingState.LOADED) {
+      setLoadingState(ELoadingState.IDLE);
+    }
+  }, [loadingState]);
+  return /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: classNames('ald-progress-bar', className, _defineProperty({}, 'ald-progress-bar-show-bg', loadingState !== ELoadingState.IDLE))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-progress-bar-inner', (_classNames2 = {}, _defineProperty(_classNames2, 'ald-progress-bar-show-loading', loadingState === ELoadingState.LOADING), _defineProperty(_classNames2, 'ald-progress-bar-hide-loading', loadingState === ELoadingState.LOADED), _classNames2)),
+    onAnimationEnd: onAnimationEnd
+  }));
+});

package/dist/Progress/style/index.less

@@ -1 +1,57 @@
 @import '../../style/index.less';
+
+.ald-progress-bar {
+  border-radius: 2px 0 0;
+  height: 3px;
+  width: 100%;
+  pointer-events: none;
+
+  &-show-bg {
+    background-color: #d6e3f4;
+  }
+
+  &-inner {
+    background-color: #3271c9;
+    border-radius: 2px 0 0;
+    height: 100%;
+    width: 0;
+  }
+
+  &-show-loading {
+    animation: loading 2s ease-in-out forwards;
+  }
+
+  &-hide-loading {
+    animation: disappear 0.5s forwards;
+  }
+}
+
+@keyframes loading {
+  0% {
+    width: 0;
+  }
+
+  90% {
+    width: 90%;
+  }
+
+  100% {
+    width: 90%;
+  }
+}
+
+@keyframes disappear {
+  0% {
+    width: 90%;
+  }
+
+  99% {
+    width: 99%;
+    opacity: 1;
+  }
+
+  100% {
+    width: 100%;
+    opacity: 0;
+  }
+}

package/dist/ScrollArea/index.d.ts

@@ -0,0 +1,11 @@
+import { ScrollAreaProps } from '@radix-ui/react-scroll-area';
+import React, { ReactNode } from 'react';
+interface Props extends ScrollAreaProps {
+    children?: ReactNode;
+    className?: string;
+    horizontalScrollBarClassName?: string;
+    verticalScrollBarClassName?: string;
+    onViewportScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/ScrollArea/index.js

@@ -0,0 +1,49 @@
+var _excluded = ["children", "className", "horizontalScrollBarClassName", "verticalScrollBarClassName", "onViewportScroll"];
+
+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 _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 * as ScrollAreaComponent from '@radix-ui/react-scroll-area';
+import classNames from 'classnames';
+import React, { forwardRef, memo } from 'react';
+
+var ScrollArea = function ScrollArea(props, ref) {
+  var children = props.children,
+      className = props.className,
+      horizontalScrollBarClassName = props.horizontalScrollBarClassName,
+      verticalScrollBarClassName = props.verticalScrollBarClassName,
+      onViewportScroll = props.onViewportScroll,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(ScrollAreaComponent.Root, _extends({}, rest, {
+    scrollHideDelay: 50,
+    className: classNames('ald-scroll-area', className)
+  }), /*#__PURE__*/React.createElement(ScrollAreaComponent.Viewport, {
+    className: "ald-scroll-area-inner",
+    onScroll: function onScroll(event) {
+      onViewportScroll === null || onViewportScroll === void 0 ? void 0 : onViewportScroll(event);
+    },
+    ref: ref
+  }, children), /*#__PURE__*/React.createElement(ScrollAreaComponent.Scrollbar, {
+    style: {
+      right: 3
+    },
+    className: classNames('ald-scroll-area-bar', verticalScrollBarClassName),
+    orientation: "vertical"
+  }, /*#__PURE__*/React.createElement(ScrollAreaComponent.Thumb, {
+    className: 'ald-scroll-area-thumb'
+  })), /*#__PURE__*/React.createElement(ScrollAreaComponent.Scrollbar, {
+    className: classNames('ald-scroll-area-bar', horizontalScrollBarClassName),
+    style: {
+      bottom: 3
+    },
+    orientation: "horizontal"
+  }, /*#__PURE__*/React.createElement(ScrollAreaComponent.Thumb, {
+    className: 'ald-scroll-area-thumb'
+  })));
+};
+
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(ScrollArea));

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

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

package/dist/ScrollArea/style/index.js

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

package/dist/ScrollArea/style/index.less

@@ -0,0 +1,48 @@
+@import '../../style/index.less';
+
+.ald-scroll-area {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  --scrollbar-size: 6px;
+  // 滚动条轨道
+  .ald-scroll-area-bar {
+    z-index: 6;
+    display: flex;
+    user-select: none;
+    touch-action: none;
+    background: transparent;
+    transition: background 160ms ease-out;
+  }
+
+  .ald-scroll-area-bar[data-orientation='vertical'] {
+    width: var(--scrollbar-size);
+    padding: 2px 0;
+  }
+
+  .ald-scroll-area-bar[data-orientation='horizontal'] {
+    flex-direction: column;
+    padding: 0 2px;
+    height: var(--scrollbar-size);
+  }
+  // 滚动条可拖动条
+  .ald-scroll-area-thumb {
+    flex: 1;
+    background: #575757;
+    border-radius: var(--scrollbar-size);
+    position: relative;
+    opacity: 0.2;
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+}
+
+.ald-scroll-area-inner {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

package/dist/Select/index.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export interface ISelectProps extends Omit<SelectProps, 'mode'> {
     prefix?: React.ReactNode;
     mode?: 'multiple';
+    showAllOption?: boolean;
 }
 export declare type IRefSelectProps = RefSelectProps;
 export declare type IAldRefSelectProps = IRefSelectProps & {