@aloudata/aloudata-design 0.4.8-beta.1 → 0.4.8-beta.11

package/dist/Radio/style/index.less

@@ -1,17 +1,24 @@
 @import '../../style/index.less';
 
-@radio-icon-button-padding-large: 10px;
+@radio-icon-button-padding-large: 8px;
 @radio-icon-button-padding-middle: 9px;
-@radio-icon-button-padding-small: 8px;
+@radio-icon-button-padding-small: 7px;
 @radio-group-height-large: 36px;
 @radio-group-height-middle: 32px;
 @radio-group-height-small: 28px;
 @radio-button-padding: 12px;
+@radio-button-padding-large: 14px;
+@radio-button-padding-small: 10px;
+@radio-button-padding-middle: 12px;
 
 // Radio组件基础样式
+[class^="ald-radio"] {
+  box-sizing: border-box;
+}
+
 .ald-radio-wrapper {
   display: inline-flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
   justify-content: start;
   height: 20px;
@@ -41,9 +48,10 @@
 .ald-radio-inner {
   position: relative;
   display: inline-block;
-  width: 17px;
-  height: 17px;
-  border: 1px solid @NL90;
+  width: 15px;
+  height: 15px;
+  border: 1px solid @BG60;
+  background-color: @BG100;
   border-radius: 50%;
 }
 
@@ -54,57 +62,81 @@
   justify-content: center;
   color: @NL0;
   font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  user-select: none;
 }
 // 绘制选中时的圆圈样式
 .ald-radio-checked > .ald-radio-inner {
-  background-color: @B60;
-  border: 0;
+  border: 1px solid @B40;
+  background: @B95;
   transform: background 0.5s ease;
 
   &::after {
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 6px;
-    height: 6px;
-    background-color: @ND0;
+    width: 7px;
+    height: 7px;
+    background-color: @B40;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     content: '';
   }
 }
+
 // 禁用状态下的样式
 .ald-radio-disabled > .ald-radio-inner {
   background-color: @NL90;
-  border: 0;
+  border: 1px solid @BG60;
 }
 
-.ald-radio-disabled.ald-radio-checked > .ald-radio-inner::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 6px;
-  height: 6px;
-  background: @NL90;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  content: '';
+.ald-radio-disabled.ald-radio-checked > .ald-radio-inner {
+  border: 1px solid @B40;
+  background: @B95;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    background: @B40;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+  }
 }
 // 禁用的样式
 .ald-radio-label.ald-radio-wrapper-disabled {
   cursor: default;
+  opacity: 0.5;
 
   .ald-radio-desc {
     color: @NL60;
   }
 }
+
+.ald-radio-button-wrapper-border-primary,
+.ald-radio-button-wrapper-border,
+.ald-radio-icon-button-wrapper-border,
+.ald-radio-icon-button-wrapper-border-primary {
+  &.ald-radio-label.ald-radio-wrapper-disabled {
+    opacity: 0.5;
+
+    .ald-radio-desc {
+      color: @NL20;
+    }
+  }
+}
+
 // RadioGroup基础样式
 .ald-radio-group {
   position: relative;
 
   .ald-radio-label .ald-radio-desc {
     color: @NL30;
-    font-weight: 500;
+    font-weight: 600;
     font-size: @font-size-middle;
     font-style: normal;
   }
@@ -130,7 +162,7 @@
   width: 0;
   height: 100%;
   background: @BG100;
-  border: 1px solid @NL90;
+  border: 1px solid @BG60;
   border-radius: @border-radius-middle;
   transition: width, left, height 0.3s, 0.3s, 0.3s ease;
 }
@@ -156,21 +188,27 @@
       color: @NL80;
     }
   }
+
   // border的样式
-  .ald-radio-button-wrapper-border {
+  .ald-radio-button-wrapper-border,
+  .ald-radio-button-wrapper-border-primary {
     padding: 0 @radio-button-padding - 1;
   }
 
   .ald-radio-button-wrapper-border,
-  .ald-radio-icon-button-wrapper-border {
+  .ald-radio-button-wrapper-border-primary,
+  .ald-radio-icon-button-wrapper-border,
+  .ald-radio-icon-button-wrapper-border-primary {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     background: @BG100;
-    border: 1px solid @NL90;
-    border-right: 1px solid transparent;
+    border-top: 1px solid @BG60;
+    border-left: 1px solid @BG60;
+    border-bottom: 1px solid @BG60;
+    overflow: hidden;
     cursor: pointer;
 
     &:first-child {
@@ -178,7 +216,7 @@
     }
 
     &:last-child {
-      border-right: 1px solid @NL90;
+      border-right: 1px solid @BG60;
       border-radius: 0 6px 6px 0;
     }
 
@@ -199,8 +237,10 @@
 
   // button选中状态下的样式
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
-  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
-    background: @B98;
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
+    background: @BG80;
     transition: background 0.5s ease;
 
     .ald-radio-desc {
@@ -210,6 +250,18 @@
     }
   }
 
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
+    background: @B40;
+    transition: background 0.5s ease;
+
+    .ald-radio-desc {
+      position: relative;
+      color: @ND0;
+      transition: text-shadow 0.5s ease;
+    }
+  }
+
   // filled样式的button
   .ald-radio-button-wrapper-filled {
     padding: 0 @radio-button-padding;
@@ -246,6 +298,10 @@
     .ald-radio-checked > .ald-radio-inner::after {
       width: 0;
     }
+
+    .ald-radio-desc {
+      font-weight: 400;
+    }
   }
 
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
@@ -254,6 +310,7 @@
 
     .ald-radio-desc {
       position: relative;
+      font-weight: 400;
       z-index: 2;
       color: @NL0;
     }
@@ -262,17 +319,32 @@
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-middle;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-middle;
     }
 
-    .ald-radio-icon-button-wrapper-border {
-      padding: 0 @radio-icon-button-padding-middle - 1;
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-middle - 1;
     }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-middle;
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
+      padding: 0 @radio-icon-button-padding-middle - 1;
+
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 14px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-middle 0
+          @radio-icon-button-padding-middle - 1;
       }
     }
   }
@@ -280,22 +352,39 @@
   &.ald-radio-group-small {
     height: @radio-group-height-small;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-small;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-small;
     }
 
-    .ald-radio-icon-button-wrapper-border {
-      padding: 0 @radio-icon-button-padding-small - 1;
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-small - 1;
     }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-small;
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
+      padding: 0 @radio-icon-button-padding-small - 1;
+
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 14px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-small 0
+          @radio-icon-button-padding-small - 1;
       }
     }
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary,
+    .ald-radio-icon-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {
@@ -315,22 +404,39 @@
   &.ald-radio-group.ald-radio-group-large {
     height: @radio-group-height-large;
 
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-large;
+      }
+    }
+
     .ald-radio-icon-button-wrapper-filled {
       padding: 0 @radio-icon-button-padding-large;
     }
 
-    .ald-radio-icon-button-wrapper-border {
-      padding: 0 @radio-icon-button-padding-large - 1;
+    .ald-radio-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary {
+      padding: 0 @radio-button-padding-large - 1;
     }
 
-    .ald-radio-label {
-      .ald-radio-desc {
-        font-size: @font-size-large;
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border-primary {
+      padding: 0 @radio-icon-button-padding-large - 1;
+
+      &.ald-radio-label .ald-radio-desc {
+        font-size: 20px;
+      }
+
+      &:not(:last-child) {
+        padding: 0 @radio-icon-button-padding-large 0
+          @radio-icon-button-padding-large - 1;
       }
     }
 
     .ald-radio-button-wrapper-border,
     .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-border-primary,
+    .ald-radio-icon-button-wrapper-border-primary,
     .ald-radio-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filled {
       &:first-of-type {

package/dist/Select/components/MultipleOption.d.ts

@@ -5,6 +5,7 @@ interface IMultipleOptionProps {
     disabled?: boolean;
     option: DefaultOptionType;
     onChange?: (selected: boolean) => void;
+    className?: string;
 }
 export default function MultipleList(params: IMultipleOptionProps): JSX.Element;
 export {};

package/dist/Select/components/MultipleOption.js

@@ -1,18 +1,22 @@
 import { Checkbox } from 'antd';
+import classnames from 'classnames';
 import React from 'react';
 export default function MultipleList(params) {
   var disabled = params.disabled,
       option = params.option,
       selected = params.selected,
-      onChange = params.onChange;
+      onChange = params.onChange,
+      className = params.className;
 
   var onClick = function onClick() {
-    //TODO: 这里有bug 等待antd升级 https://github.com/ant-design/ant-design/pull/39078
+    if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected);
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "ald-multiple-option",
+    className: classnames('ald-multiple-option', className, {
+      'ald-multiple-option-disabled': disabled
+    }),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: selected,

package/dist/Select/components/SingleOption.d.ts

@@ -5,6 +5,7 @@ interface ISelectProps {
     option: DefaultOptionType;
     onChange: (selected: boolean) => void;
     disabled?: boolean;
+    className?: string;
 }
 export default function SingleOption(params: ISelectProps): JSX.Element;
 export {};

package/dist/Select/components/SingleOption.js

@@ -1,4 +1,5 @@
 import { CheckLine } from '@aloudata/icons-react';
+import classnames from 'classnames';
 import React from 'react';
 import colors from "../../style/themes/default/themeColor.module.less";
 export default function SingleOption(params) {
@@ -6,7 +7,8 @@ export default function SingleOption(params) {
       selected = params.selected,
       option = params.option,
       _params$onChange = params.onChange,
-      onChange = _params$onChange === void 0 ? function () {} : _params$onChange;
+      onChange = _params$onChange === void 0 ? function () {} : _params$onChange,
+      className = params.className;
 
   var onClick = function onClick() {
     if (disabled) return;
@@ -14,7 +16,9 @@ export default function SingleOption(params) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "ald-single-option",
+    className: classnames('ald-single-option', className, {
+      'ald-single-option-disabled': disabled
+    }),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-icons-check-line"

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", "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,8 +98,15 @@ 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: "No data"
+  }) : _props$notFoundConten,
       value = props.value,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
@@ -118,6 +133,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 +161,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 +212,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 +237,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;
@@ -245,7 +297,11 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   useEffect(function () {
-    setSelectedOptions(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, {
@@ -274,6 +330,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     maxTagCount: "responsive",
     ref: ref,
     tagRender: tagRender,
+    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,7 +11,7 @@
   padding-right: 0;
 
   &.ald-select-popup {
-    max-height: 264px;
+    // max-height: 264px;
     overflow-y: auto;
     overflow-y: overlay;
   }
@@ -23,9 +23,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 +55,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{