@aloudata/aloudata-design 0.4.8 → 0.4.10

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "className", "popupClassName", "notFoundContent", "value", "style"];
+var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "className", "popupClassName", "listHeight", "listItemHeight", "notFoundContent", "value", "tagRender", "style"];
 
 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); }
 
@@ -28,12 +28,20 @@ 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; }
 
+import { FoldDownFill } from '@aloudata/icons-react';
 import { Select as AntdSelect } from 'antd';
 import classNames from 'classnames';
-import React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';
+import List from 'rc-virtual-list';
+import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import Empty from "../Empty";
-import MultipleList from "./components/MultipleOption";
+import MultipleOption from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
+import theme from "../style/themes/default/themeColor.module.less";
+var suffixIconSizeMap = {
+  large: 20,
+  middle: 16,
+  small: 14
+};
 
 var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue) {
   if (typeof value !== 'undefined') {
@@ -90,9 +98,17 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       prefix = props.prefix,
       className = props.className,
       popupClassName = props.popupClassName,
+      listHeight = props.listHeight,
+      _props$listItemHeight = props.listItemHeight,
+      listItemHeight = _props$listItemHeight === void 0 ? 36 : _props$listItemHeight,
       _props$notFoundConten = props.notFoundContent,
-      notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, null) : _props$notFoundConten,
+      notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SEARCH_SMALL,
+    size: "small",
+    title: "\u65E0\u6570\u636E"
+  }) : _props$notFoundConten,
       value = props.value,
+      tagRender = props.tagRender,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
       restProps = _objectWithoutProperties(props, _excluded);
@@ -118,6 +134,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       prefixWidth = _React$useState6[0],
       setPrefixWidth = _React$useState6[1];
 
+  var updatedRef = useRef(false);
+
   var onMultipleOptionChange = function onMultipleOptionChange(option, selected) {
     var newOptions = [];
 
@@ -144,16 +162,33 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }), newOptions);
   };
 
+  var getListHeight = function getListHeight() {
+    if (typeof listHeight === 'number' && options !== null && options !== void 0 && options.length) {
+      if (listHeight <= options.length * listItemHeight) {
+        return listHeight;
+      }
+    }
+
+    return 0;
+  };
+
   var multipleRender = function multipleRender() {
     return /*#__PURE__*/React.createElement("div", {
       className: "ald-multiple-option-list"
-    }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+    }, /*#__PURE__*/React.createElement(List, {
+      data: options || [],
+      "data-id": "list",
+      height: getListHeight(),
+      itemHeight: listItemHeight,
+      itemKey: "value"
+    }, function (option) {
       var isSelected = selectedOptions.some(function (selectedOption) {
         return selectedOption.value === option.value;
       });
-      return /*#__PURE__*/React.createElement(MultipleList, {
+      return /*#__PURE__*/React.createElement(MultipleOption, {
         key: option.value,
         selected: isSelected,
+        className: option.className,
         option: option,
         disabled: option.disabled,
         onChange: function onChange(selected) {
@@ -178,13 +213,20 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   var singleRender = function singleRender() {
     return /*#__PURE__*/React.createElement("div", {
       className: "ald-single-option-list"
-    }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+    }, /*#__PURE__*/React.createElement(List, {
+      data: options || [],
+      "data-id": "list",
+      height: getListHeight(),
+      itemHeight: listItemHeight,
+      itemKey: "value"
+    }, function (option) {
       var isSelected = selectedOptions.some(function (selectedOption) {
         return selectedOption.value === option.value;
       });
       return /*#__PURE__*/React.createElement(SingleOption, {
         key: option.value,
         selected: isSelected,
+        className: option.className,
         option: option,
         disabled: option.disabled,
         onChange: function onChange() {
@@ -196,7 +238,18 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var getDropdownRender = function getDropdownRender() {
     if (dropdownRender) {
-      return dropdownRender;
+      if (isMultiple) {
+        var menu = multipleRender();
+        return function () {
+          return dropdownRender(menu);
+        };
+      } else {
+        var _menu = singleRender();
+
+        return function () {
+          return dropdownRender(_menu);
+        };
+      }
     } else if (Array.isArray(options) && options.length > 0) {
       if (!isMultiple) {
         return singleRender;
@@ -208,8 +261,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, notFoundContent);
       };
     }
-  }; // todo: tagRender
-  // todo: 隐藏已选择项
+  }; // todo: 隐藏已选择项
   // todo: 分组
 
 
@@ -233,7 +285,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     '--ald-select-prefix-width': "".concat(prefixWidth, "px")
   };
 
-  var tagRender = function tagRender(props) {
+  var defaultTagRender = function defaultTagRender(props) {
     var label = props.label;
     return /*#__PURE__*/React.createElement("span", {
       className: "ald-select-multiple-tag-default"
@@ -245,7 +297,11 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   useEffect(function () {
-    getSelectedOptionsFromValue(isMultiple, options, value);
+    if (updatedRef.current) {
+      setSelectedOptions(getSelectedOptionsFromValue(isMultiple, options, value));
+    } else {
+      updatedRef.current = true;
+    }
   }, [value]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-select', className, {
@@ -273,7 +329,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     open: typeof open === 'boolean' ? open : isOpen,
     maxTagCount: "responsive",
     ref: ref,
-    tagRender: tagRender,
+    tagRender: tagRender || defaultTagRender,
+    onChange: onChange,
     popupClassName: classNames('ald-select-popup', popupClassName),
     maxTagPlaceholder: maxTagPlaceholder,
     className: classNames({
@@ -285,6 +342,10 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       width: '100%'
     },
+    suffixIcon: /*#__PURE__*/React.createElement(FoldDownFill, {
+      size: suffixIconSizeMap[props.size || 'middle'],
+      fill: theme.NL50
+    }),
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {
       setIsOpen(open);
 

package/dist/Select/style/index.less

@@ -11,9 +11,10 @@
   padding-right: 0;
 
   &.ald-select-popup {
-    max-height: 264px;
+    // max-height: 264px;
     overflow-y: auto;
     overflow-y: overlay;
+    border:1px solid @BG70;
   }
 }
 
@@ -23,9 +24,14 @@
   box-sizing: border-box;
   border: 1px solid @BG60;
   border-radius: 4px;
+  background-color: @BG100;
   // padding: 0 4px;
   cursor: pointer;
-  width:100%;
+  width: 100%;
+
+  .ant-select-selector {
+    color: @NL0;
+  }
 
   .ald-select-prefix {
     color: @NL40;
@@ -50,7 +56,6 @@
       border: none;
     }
   }
-
 }
 
 .ant-select-selection-overflow {

package/dist/Select/style/multiple.less

@@ -5,20 +5,31 @@
   justify-content: space-between;
   flex-direction: column;
   color: @NL0;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 20px;
 
 }
 
 .ald-multiple-option{
   padding: 8px 14px;
-  height: 20px;
+  // height: 20px;
   margin-left: 0;
   display: flex;
+  height: 36px;
+  box-sizing: border-box;
 
   &:hover{
     background-color: @BG90;
   }
+
+  &.ald-multiple-option-disabled{
+    opacity: 0.5;
+
+    &:hover{
+      background: none;
+      cursor: default;
+    }
+  }
 }
 
 .ald-multiple-option-label{

package/dist/Select/style/single.less

@@ -1,6 +1,6 @@
 .ald-single-option-list{
   color: @NL0;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 20px;
 
   .ald-single-option{
@@ -8,6 +8,8 @@
     display: flex;
     align-items: center;
     margin-left: 0;
+    height: 36px;
+    box-sizing: border-box;
 
     &:hover{
       background-color: @BG90;
@@ -23,5 +25,14 @@
     .ald-single-option-text{
       white-space: nowrap;
     }
+
+    &.ald-single-option-disabled{
+      opacity: 0.5;
+
+      &:hover{
+        background: none;
+        cursor: default;
+      }
+    }
   }
 }

package/dist/Select/style/status.less

@@ -6,7 +6,7 @@
    */
   &:hover,&.ald-select-open{
     border-color:@B40;
-    box-shadow: @shadow-drop;
+    // box-shadow: @shadow-drop;
   }
 
   /** 

package/dist/Table/style/index.less

@@ -41,7 +41,7 @@
     color: inherit;
     text-align: left;
     word-break: break-all;
-    border-bottom: 1px solid @BG70;
+    border-bottom: 1px solid @BG80;
 
     &-content {
       flex: 1;
@@ -63,8 +63,10 @@
   &-thead {
     flex: 1;
     overflow: hidden;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 600;
+    background-color: @BG80;
+    mix-blend-mode: multiply;
 
     .ald-table-row {
       min-width: 9999px; // 防止拖动时的闪动
@@ -76,7 +78,6 @@
       padding: 6px 16px;
       color: @NL0;
       line-height: 20px;
-      background-color: @BG80;
       height: 100%;
 
       .ald-table-cell-content {
@@ -92,7 +93,7 @@
         z-index: 1;
         display: inline-block;
         width: 12px;
-        height: 14px;
+        height: 1em;
         transform: translateY(-50%);
         touch-action: none;
 
@@ -101,6 +102,7 @@
           width: 1px;
           height: 100%;
           background-color: @BG70;
+          mix-blend-mode: multiply;
           content: '';
         }
       }
@@ -130,7 +132,7 @@
         display: flex;
         align-items: center;
         padding-left: 16px;
-        color: @NL40;
+        color: @NL0;
 
         .ald-table-cell-container {
           width: 100%;
@@ -192,8 +194,8 @@
 
     &-left {
       color: @NL0;
-      font-weight: 500;
-      font-size: 14px;
+      font-weight: 600;
+      font-size: 13px;
     }
 
     &-right {
@@ -202,7 +204,7 @@
       justify-content: flex-end;
       height: 28px;
       color: @NL0;
-      font-size: 14px;
+      font-size: 13px;
     }
   }
 
@@ -216,6 +218,10 @@
     margin-left: 4px;
   }
 
+  .ald-table-thead {
+    border-top: 1px solid @BG70;
+  }
+
   &-column-resizable {
     overflow: overlay;
 

package/dist/Tabs/index.d.ts

@@ -39,6 +39,21 @@ export interface ITabsProps extends Omit<TabsProps, 'size'> {
     tabPosition?: 'left' | 'right' | 'top' | 'bottom';
     className?: string;
     children?: React.ReactNode;
+    /**
+     * @description header行背景颜色
+     * @default -
+     */
+    headerBackgroundColor?: string;
+    /**
+     * @description tab 宽度等分,只有tabPosition 为top的时候生效
+     * @default false
+     */
+    monospace?: boolean;
+    /**
+     * @description tab 填充padding，默认false
+     * @default false
+     */
+    padding?: boolean | number;
 }
 declare function Tabs(props: ITabsProps): JSX.Element;
 declare namespace Tabs {

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "className", "popupClassName", "adaptHeight"];
+var _excluded = ["size", "className", "popupClassName", "adaptHeight", "style", "monospace", "tabPosition", "padding"];
 
 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); }
 
@@ -12,36 +12,76 @@ 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; }
 
-import React from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
+import React, { useMemo } from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
 
-import { Tabs as AntdTabs } from 'antd';
 import { MoreVerticalLine } from '@aloudata/icons-react';
-import TabPane from "./TabPane";
+import { Tabs as AntdTabs } from 'antd';
 import classNames from 'classnames';
+import TabPane from "./TabPane";
 export default function Tabs(props) {
   var size = props.size,
       className = props.className,
       popupClassName = props.popupClassName,
       adaptHeight = props.adaptHeight,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      monospace = props.monospace,
+      _props$tabPosition = props.tabPosition,
+      tabPosition = _props$tabPosition === void 0 ? 'top' : _props$tabPosition,
+      _props$padding = props.padding,
+      padding = _props$padding === void 0 ? false : _props$padding,
       otherProps = _objectWithoutProperties(props, _excluded);
 
+  var headerBackgroundColor = props.headerBackgroundColor;
+
   var tabsProps = _objectSpread({}, otherProps);
 
   if (size === 'large') {
     tabsProps.size = size;
   }
 
+  var _monospace = tabPosition !== 'top' ? false : monospace;
+
+  var _padding = useMemo(function () {
+    if (tabPosition !== 'top') return 0;
+
+    if (typeof padding === 'number') {
+      return padding;
+    }
+
+    if (typeof padding === 'boolean' && padding) {
+      return 16;
+    }
+
+    return 0;
+  }, [padding, tabPosition]);
+
+  var getTabBarGutter = function getTabBarGutter() {
+    if (tabPosition === 'top' && !_monospace) {
+      return 24;
+    }
+
+    return 0;
+  };
+
   return /*#__PURE__*/React.createElement(AntdTabs, _extends({
     moreIcon: /*#__PURE__*/React.createElement("div", {
       className: "ald-tabs-more-icon"
     }, /*#__PURE__*/React.createElement(MoreVerticalLine, {
       color: "currentColor"
     })),
-    tabBarGutter: 24,
+    style: Object.assign(style, {
+      '--header-bg-color': headerBackgroundColor,
+      '--tabs-padding': "".concat(_padding, "px")
+    }),
+    tabPosition: tabPosition,
+    tabBarGutter: getTabBarGutter(),
     popupClassName: classNames(popupClassName, 'ald-tabs-dropdown'),
     className: classNames('ald-tabs', className, {
       'ald-adapt-height': adaptHeight,
-      'ald-tabs-default': size !== 'large'
+      'ald-tabs-default': size !== 'large',
+      'ald-tabs-monospace': _monospace,
+      'ald-tabs-padding': !!padding
     })
   }, tabsProps));
 }

package/dist/Tabs/style/index.less

@@ -22,6 +22,10 @@
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL40;
+
+    .ant-tabs-nav {
+      background-color: var(--header-bg-color);
+    }
   }
 
   .ant-tabs-tab {
@@ -125,12 +129,22 @@
   &.ant-tabs-bottom > .ant-tabs-nav,
   &.ant-tabs-top > div > .ant-tabs-nav,
   &.ant-tabs-bottom > div > .ant-tabs-nav {
-    margin: 0 0 20px;
+    margin-bottom: 16px;
 
     &::before {
       border-color: @BG70;
     }
   }
+
+  &.ant-tabs-left {
+    .ant-tabs-nav-list {
+      padding-right: 24px;
+    }
+
+    .ant-tabs-tab {
+      padding: 8px 0;
+    }
+  }
 }
 
 .ald-tabs-dropdown {
@@ -166,3 +180,30 @@
     }
   }
 }
+
+.ald-tabs-monospace {
+  .ant-tabs-nav {
+    .ant-tabs-nav-wrap {
+      .ant-tabs-nav-list {
+        width: 100%;
+
+        .ant-tabs-tab {
+          flex-grow: 1;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+
+.ald-tabs-padding {
+  .ant-tabs-nav {
+    .ant-tabs-nav-wrap {
+      margin: 0 var(--tabs-padding);
+    }
+  }
+
+  .ant-tabs-content-holder {
+    padding: 0 var(--tabs-padding) var(--tabs-padding);
+  }
+}

package/dist/Tooltip/style/index.less

@@ -5,12 +5,18 @@
     padding: 6px 12px;
     line-height: 20px;
     background: @BG10;
-    border-radius: @border-radius-base;
+    border-radius: 4px;
     box-shadow: none;
     color:@ND0;
     font-size: 13px;
   }
 
+  .ant-tooltip-arrow {
+    &::before{
+      background-color: @BG10;
+    }
+  }
+
   .ant-tooltip-arrow-content {
     background: @BG10;
   }

package/dist/notification/demo/index.js

@@ -1,13 +1,34 @@
-import { Button, notification } from "../..";
+import { Button, notification, Space } from "../..";
 import React from 'react';
 export default (function () {
-  var notices = function notices() {
-    notification.error({
-      message: 'Notification Title'
+  var notices = function notices(type) {
+    notification[type]({
+      message: 'Notification Message',
+      description: 'description,description,description,description,description,description,description,description',
+      style: {
+        maxHeight: 500,
+        overflow: 'auto'
+      }
     });
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: notices
-  }, "Notification error"));
+  return /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('success');
+    }
+  }, "Notification success with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('error');
+    }
+  }, "Notification error with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('warning');
+    }
+  }, "Notification warning with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('info');
+    }
+  }, "Notification info with message\u3001description"));
 });

package/dist/notification/index.d.ts

@@ -1,2 +1,10 @@
-import { notification } from 'antd';
+import type { ArgsProps } from 'antd/es/notification/interface';
+declare const notification: {
+    open: (config: ArgsProps) => void;
+    success: (config: ArgsProps) => void;
+    error: (config: ArgsProps) => void;
+    warning: (config: ArgsProps) => void;
+    info: (config: ArgsProps) => void;
+    destroy: (key?: string) => void;
+};
 export default notification;