@aloudata/aloudata-design 0.2.0-beta.2 → 0.2.0-beta.22

package/es/Select/BaseSelect.js

@@ -30,6 +30,7 @@ import useCacheOptions from './hooks/useCacheOption';
 import useControlledState from '../_utils/hooks/useControlledState';
 var DEFAULT_LIST_HEIGHT = 256;
 var DEFAULT_ACTIVE_INDEX = -1;
+var DEFAULT_SELECT_LIST_INDEX = 1050;
 var ZERO = 0;
 export var Select = function Select(props, ref) {
   var _props$size = props.size,
@@ -48,7 +49,6 @@ export var Select = function Select(props, ref) {
       label = props.label,
       className = props.className,
       style = props.style,
-      optionStyle = props.optionStyle,
       groupStyle = props.groupStyle,
       _props$allowClear = props.allowClear,
       allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
@@ -73,7 +73,9 @@ export var Select = function Select(props, ref) {
       dropDownStyle = props.dropDownStyle,
       _props$dropdownMatchS = props.dropdownMatchSelectWidth,
       dropdownMatchSelectWidth = _props$dropdownMatchS === void 0 ? 'width' : _props$dropdownMatchS,
-      children = props.children;
+      children = props.children,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? DEFAULT_SELECT_LIST_INDEX : _props$zIndex;
   var prefix = usePrefixCls('select-legacy', customizePrefixCls);
 
   var _useControlledState = useControlledState(controlledValue, defaultValue),
@@ -114,7 +116,19 @@ export var Select = function Select(props, ref) {
       activeIndex = _useState10[0],
       setActiveIndex = _useState10[1];
 
-  var _useState11 = useState([]),
+  var initOptionChecked = function initOptionChecked() {
+    if (Array.isArray(value)) {
+      return value;
+    }
+
+    if (value === null) {
+      return [];
+    }
+
+    return [value];
+  };
+
+  var _useState11 = useState(initOptionChecked()),
       _useState12 = _slicedToArray(_useState11, 2),
       optionChecked = _useState12[0],
       setOptionChecked = _useState12[1]; // Exhibition value (tempvalue + value);
@@ -314,7 +328,6 @@ export var Select = function Select(props, ref) {
     visible: visible,
     hasGroup: hasGroup,
     groupStyle: groupStyle,
-    optionStyle: optionStyle,
     searchType: "no-search",
     placeholder: placeholder,
     data: flattenOptions,
@@ -344,7 +357,7 @@ export var Select = function Select(props, ref) {
     popupStyle: dropDownStyle,
     getPopupContainer: getContainer,
     stretch: dropdownMatchSelectWidth ? 'width' : 'minWidth',
-    zIndex: 100,
+    zIndex: zIndex,
     builtinPlacements: {
       left: {
         points: ['cr', 'cl']

package/es/Select/OptionsList/OptionItem/RenderLabelIcon.d.ts

@@ -1,3 +1,4 @@
+import 'antd/lib/checkbox/style';
 declare const RenderLabelIcon: ({ isSelected, multiple, disabled, prefixCls, isIndeterminate }: {
     isSelected: boolean;
     multiple: boolean;

package/es/Select/OptionsList/OptionItem/RenderLabelIcon.js

@@ -2,6 +2,7 @@ import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
 import React from 'react';
 import { noop } from 'lodash';
+import 'antd/lib/checkbox/style';
 import Icon from '../../../Icon';
 
 var RenderLabelIcon = function RenderLabelIcon(_ref) {

package/es/Select/OptionsList/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["input", "prefixCls", "data", "groupStyle", "height", "itemHeight", "selected", "optionChecked", "tempValue", "value", "placeholder", "notFoundContent", "onValueChange", "onTempValueChange", "setTempValue", "onInputChange", "onOptionClick", "activeIndex", "multiple", "visible", "style", "setActiveIndex"];
+var _excluded = ["input", "prefixCls", "data", "groupStyle", "height", "itemHeight", "selected", "optionChecked", "tempValue", "value", "placeholder", "notFoundContent", "onValueChange", "onTempValueChange", "setTempValue", "onInputChange", "onOptionClick", "activeIndex", "multiple", "visible", "setActiveIndex"];
 
 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; }
 
@@ -25,17 +25,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import React, { useCallback, useImperativeHandle, useMemo, useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import VirtualList from '../VirtualList';
-import { ForwardRenderGroup, ForwardRenderOption, ForwardRenderTooltip, RenderLabelIcon } from './OptionItem';
+import { ForwardRenderOption, ForwardRenderTooltip, RenderLabelIcon } from './OptionItem';
 var ZERO_LENGTH = 0;
 var DEFAULT_ACTIVE_INDEX = -1;
+var DEFAULT_LIST_HEIGHT = 256;
+var DEFAULT_LIST_PADDING = 8;
 
 var OptionsList = function OptionsList(props, ref) {
   var input = props.input,
       prefixCls = props.prefixCls,
       data = props.data,
       groupStyle = props.groupStyle,
-      height = props.height,
+      _props$height = props.height,
+      height = _props$height === void 0 ? DEFAULT_LIST_HEIGHT : _props$height,
       itemHeight = props.itemHeight,
       selected = props.selected,
       optionChecked = props.optionChecked,
@@ -51,7 +53,6 @@ var OptionsList = function OptionsList(props, ref) {
       activeIndex = props.activeIndex,
       multiple = props.multiple,
       visible = props.visible,
-      style = props.style,
       setActiveIndex = props.setActiveIndex,
       restProps = _objectWithoutProperties(props, _excluded);
 
@@ -92,7 +93,7 @@ var OptionsList = function OptionsList(props, ref) {
   }, [selected]); // 部分选中
   // 全部列表选项选中
 
-  var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length); // ”全部“选项是否选中
+  var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length) || (selected === null || selected === void 0 ? void 0 : selected.length) === ZERO_LENGTH; // ”全部“选项是否选中
 
   var allOptionChecked = isAllChecked && Array.isArray(optionChecked) && optionChecked.length === ZERO_LENGTH; // 点击全选
 
@@ -146,7 +147,9 @@ var OptionsList = function OptionsList(props, ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-list"),
-    style: style,
+    style: {
+      maxHeight: "".concat(height - DEFAULT_LIST_PADDING, "px")
+    },
     ref: OptionListRef,
     role: "list",
     "aria-hidden": "true",
@@ -155,20 +158,10 @@ var OptionsList = function OptionsList(props, ref) {
     onMouseLeave: function onMouseLeave() {
       return setActiveIndex(DEFAULT_ACTIVE_INDEX);
     }
-  }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? /*#__PURE__*/React.createElement(VirtualList, _objectSpread({
-    itemKey: "value",
-    prefixCls: prefixCls,
-    ref: VirtualListRef,
-    data: data,
-    height: height,
-    itemHeight: itemHeight
-  }, restProps), function (option, index) {
-    return option.isSelectOptGroup ? /*#__PURE__*/React.createElement(ForwardRenderGroup, {
-      option: option,
-      prefixCls: prefixCls,
-      groupStyle: groupStyle
-    }) : /*#__PURE__*/React.createElement(ForwardRenderTooltip, {
+  }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? data.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(ForwardRenderTooltip, {
       tooltip: option === null || option === void 0 ? void 0 : option.tooltip,
+      key: option === null || option === void 0 ? void 0 : option.value,
       render: /*#__PURE__*/React.createElement(ForwardRenderOption, _objectSpread({
         option: option,
         prefixCls: prefixCls,

package/es/Select/Selector/index.js

@@ -40,6 +40,8 @@ import color from '../../style/themes/default/themeColor.module.less';
 var ZERO = 0;
 var ICON_LARGE_SIZE = 20;
 var ICON_SMALL_SIZE = 16;
+var FIRST_INDEX = 0;
+var REVERSE_INDEX = -1;
 
 var defaultArrowComponent = function defaultArrowComponent(prefix, size) {
   return /*#__PURE__*/React.createElement(Icon, {
@@ -163,18 +165,20 @@ var Selector = function Selector(props, ref) {
 
   var renderMultipleValue = function renderMultipleValue() {
     // @ts-ignore
-    var allValueLabel = value === null || value === void 0 ? void 0 : value.reduce(function (prev, curr) {
+    var allTooltipTitleNode = value === null || value === void 0 ? void 0 : value.reduce(function (prev, curr) {
       var item = getOptionByValue(curr);
 
       if (item) {
-        return [].concat(_toConsumableArray(prev), [(item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.label)]);
+        return [].concat(_toConsumableArray(prev), [(item === null || item === void 0 ? void 0 : item.title) || optionLabelRenderer(curr, getOptionByValue(curr)) || (item === null || item === void 0 ? void 0 : item.label), ',']);
       }
 
-      return [].concat(_toConsumableArray(prev), [curr]);
+      return [].concat(_toConsumableArray(prev), [curr, ',']);
     }, []);
 
-    if (Array.isArray(value) && value.length === filteredOptions.length) {
-      return /*#__PURE__*/React.createElement("span", null, "\u5168\u90E8");
+    if (Array.isArray(value) && (value.length === filteredOptions.length || isEmpty(value))) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "multipleAll"
+      }, "\u5168\u90E8");
     }
 
     var renderItem = function renderItem(valueItem) {
@@ -188,7 +192,7 @@ var Selector = function Selector(props, ref) {
     return !input && !isNil(value) ? /*#__PURE__*/React.createElement(Tooltip // @ts-ignore
     , {
       // @ts-ignore
-      title: allValueLabel === null || allValueLabel === void 0 ? void 0 : allValueLabel.join(','),
+      title: allTooltipTitleNode.slice(FIRST_INDEX, REVERSE_INDEX),
       placement: "top",
       getTooltipContainer: function getTooltipContainer() {
         var _selectorRef$current4;
@@ -241,7 +245,7 @@ var Selector = function Selector(props, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames("".concat(prefix, "-values-wrapper")),
     ref: selectValuesRef
-  }, multiple ? renderMultipleValue() : renderSingleValue(), renderPlaceHolder())), /*#__PURE__*/React.createElement("div", {
+  }, multiple ? renderMultipleValue() : renderSingleValue(), !multiple && renderPlaceHolder())), /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",
     className: classnames("".concat(prefix, "-arrow"), _defineProperty({}, "".concat(prefix, "-arrow-focused"), visible)),
     onClick: showClose ? onAllClearClick : undefined

package/es/Select/index.d.ts

@@ -2,7 +2,6 @@ import BaseSelect from './BaseSelect';
 import { IOption as Option, ISelectProps as SelectProps, IOptGroupProps as OptGroupProps, IOptionProps as OptionProps } from './interface';
 import Options from './OptionsList/Options';
 import OptGroup from './OptionsList/OptGroup';
-import './style';
 export declare type TSelect = typeof BaseSelect & {
     Group: typeof OptGroup;
     Option: typeof Options;

package/es/Select/index.js

@@ -1,7 +1,6 @@
 import BaseSelect from './BaseSelect';
 import Options from './OptionsList/Options';
 import OptGroup from './OptionsList/OptGroup';
-import './style';
 var Select = BaseSelect;
 Select.Option = Options;
 Select.Group = OptGroup;

package/es/Select/interface.d.ts

@@ -117,6 +117,9 @@ export interface ISelectProps {
     labelRenderer?: (input: string) => (option: IOption, isGroup: boolean) => React.ReactNode;
     searchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
     matchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
+    /**
+     * @description 渲染选中条目对应的内容
+     */
     optionLabelRenderer?: (value: string | number, option?: IOption) => React.ReactNode;
     /**
      * @description 选中值改变时的回调
@@ -156,6 +159,11 @@ export interface ISelectProps {
      */
     label?: React.ReactNode;
     children?: React.ReactNode[] | React.ReactNode;
+    /**
+     * @description 下拉菜单的 z-index层级 属性
+     * @default 1050
+     */
+    zIndex?: number;
 }
 export interface ISelectorProps {
     input: string;

package/es/Select/style/index.less

@@ -35,7 +35,7 @@
 // Base Text
 // @text-color-base: #313e75;
 // @text-color-disabled: #313e75;
-@text-font-size-base: 14px;
+@text-font-base-size: 14px;
 // @text-lint-height-base: 22px;
 
 //Background Color
@@ -44,8 +44,8 @@
 
 @ald-prefix: ~'@{component-prefix}';
 @select-prefix-cls-legacy: ~'@{component-prefix}-select-legacy';
-@select-input-fontSize: @text-font-size-base;
-@select-input-fontSize-sm: @text-font-size-base - 2px;
+@select-input-fontSize: @text-font-base-size;
+@select-input-fontSize-sm: @text-font-base-size - 2px;
 // @color-font-list-primary-normal: @palette-black-6; // $color-black-6
 // @color-box-shadow-focused: #c0c4d3;
 // @color-background-matchHeight: #ffcf3c;
@@ -56,7 +56,7 @@
   overflow: hidden;
   border: 1px solid transparent;
   border-radius: @border-radius-base;
-  padding: 0 36px 0 12px;
+  padding: 0 36px 0 11px;
   outline: none;
   transition: all 0.2s;
   cursor: pointer;
@@ -141,7 +141,7 @@
   &-close {
     position: absolute;
     top: 0;
-    right: 12px;
+    right: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -162,7 +162,7 @@
 
     &-text {
       overflow: hidden;
-      font-size: 14px;
+      font-size: @select-input-fontSize-sm;
       line-height: 22px;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -197,7 +197,7 @@
 
     &-text {
       overflow: hidden;
-      font-size: 14px;
+      font-size: @select-input-fontSize-sm;
       line-height: 22px;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -209,6 +209,7 @@
     top: 0;
     left: 0;
     color: @select-placeholder-color;
+    font-size: @select-input-fontSize-sm;
   }
 
   &-input {
@@ -282,7 +283,28 @@
     }
   }
 
+  &-default {
+    height: 28px;
+    .@{select-prefix-cls-legacy} {
+      &-selector {
+        height: 26px;
+        min-height: 26px;
+      }
+
+      &-values-wrapper {
+        line-height: 26px;
+        font-size: 12px;
+      }
+
+      &-selector-label {
+        height: 26px;
+        font-size: 12px;
+      }
+    }
+  }
+
   &-large {
+    height: @height-lg;
     .@{select-prefix-cls-legacy} {
       &-selector {
         min-height: @height-lg;
@@ -310,6 +332,14 @@
       &-input-tags {
         top: 0;
       }
+
+      &-placeholder {
+        font-size: @select-input-fontSize;
+      }
+
+      &-item-text {
+        font-size: @select-input-fontSize;
+      }
     }
   }
 
@@ -406,6 +436,8 @@
   // min-width: 160px;
   // padding: 16px 0 16px 8px;
   outline: none;
+  overflow-y: scroll;
+  overflow-y: overlay;
 }
 
 .@{select-prefix-cls-legacy}-list-option {
@@ -434,13 +466,14 @@
     transform: translateY(-50%);
     left: 12px;
     color: @B40;
+    margin-top: -2px;
 
     &-checkbox {
       .@{component-prefix}-checkbox-inner {
         border-color: @NL90;
         // background-color: @BG100;
         border-radius: 4px;
-
+        box-shadow: none;
         // &::after {
         //   // border-color: @B40;
         // }

package/es/Table/index.d.ts

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import './style';
+import React from 'react';
 import { ITableProps } from './interface';
-declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, scrollY, onRowSelected, loadMore, hasNextPage, loading, }: ITableProps<T>): ReactElement;
-export default Table;
+declare const _default: React.ForwardRefExoticComponent<Pick<ITableProps<Record<string, unknown>>, "onChange" | "loading" | "data" | "ellipsis" | "columns" | "total" | "renderHeaderLeft" | "renderHeaderRight" | "onRowSelected" | "loadMore" | "hasNextPage" | "sortable" | "defaultSort" | "resizeColumn" | "sortDirections" | "showHeader" | "innerScroll" | "scrollThreshold" | "rowClassName" | "renderEmpty" | "rowKey"> & React.RefAttributes<unknown>>;
+export default _default;