@aloudata/aloudata-design 0.4.3 → 0.4.4

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "onChange", "open", "prefix", "className", "style"];
+var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "onChange", "open", "prefix", "className", "popupClassName", "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); }
 
@@ -31,6 +31,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { Select as AntdSelect } from 'antd';
 import classNames from 'classnames';
 import React, { forwardRef, useLayoutEffect, useMemo } from 'react';
+import Empty from "../Empty";
 import MultipleList from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
 var Select = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -42,6 +43,10 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       open = props.open,
       prefix = props.prefix,
       className = props.className,
+      popupClassName = props.popupClassName,
+      _props$notFoundConten = props.notFoundContent,
+      notFoundContent = _props$notFoundConten === void 0 ? /*#__PURE__*/React.createElement(Empty, null) : _props$notFoundConten,
+      value = props.value,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
       restProps = _objectWithoutProperties(props, _excluded);
@@ -72,8 +77,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     var newOptions = [];
 
     if (selected) {
+      var _props$onSelect;
+
       newOptions = [].concat(_toConsumableArray(selectedOptions), [option]);
+      (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, option.value, option);
     } else {
+      var _props$onDeselect;
+
+      (_props$onDeselect = props.onDeselect) === null || _props$onDeselect === void 0 ? void 0 : _props$onDeselect.call(props, option.value, option);
       newOptions = selectedOptions.filter(function (item) {
         return item.value !== option.value;
       });
@@ -104,14 +115,13 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     }));
   };
 
-  var onSingleOptionChange = function onSingleOptionChange(option, selected) {
-    if (selected) {
-      setSelectedOptions([option]);
-      onChange === null || onChange === void 0 ? void 0 : onChange(option.value, option);
-    } else {
-      setSelectedOptions([]);
-      onChange === null || onChange === void 0 ? void 0 : onChange('', option);
-    }
+  var onSingleOptionChange = function onSingleOptionChange(option) {
+    var _props$onSelect2;
+
+    setSelectedOptions([option]);
+    onChange === null || onChange === void 0 ? void 0 : onChange(option.value, option);
+    (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 ? void 0 : _props$onSelect2.call(props, option.value, option);
+    setIsOpen(false);
   };
 
   var singleRender = function singleRender() {
@@ -126,18 +136,32 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         selected: isSelected,
         option: option,
         disabled: option.disabled,
-        onChange: function onChange(selected) {
-          onSingleOptionChange(option, selected);
+        onChange: function onChange() {
+          onSingleOptionChange(option);
         }
       });
     }));
   };
 
-  var dropdownRenderFunc = dropdownRender ? dropdownRender : !isMultiple ? singleRender : multipleRender; // todo: prefix ,考虑style 的width
-  // todo: tagRender
+  var getDropdownRender = function getDropdownRender() {
+    if (dropdownRender) {
+      return dropdownRender;
+    } else if (Array.isArray(options) && options.length > 0) {
+      if (!isMultiple) {
+        return singleRender;
+      } else {
+        return multipleRender;
+      }
+    } else {
+      return function () {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, notFoundContent);
+      };
+    }
+  }; // todo: tagRender
   // todo: 隐藏已选择项
   // todo: 分组
 
+
   var currentValue = useMemo(function () {
     if (isMultiple) {
       return selectedOptions.map(function (option) {
@@ -153,7 +177,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     if (prefixRef.current) {
       setPrefixWidth(prefixRef.current.offsetWidth);
     }
-  }, [props.size]);
+  }, [props.size, prefix]);
   var selectorStyle = style.width ? {
     width: '100%'
   } : {};
@@ -199,6 +223,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     maxTagCount: "responsive",
     ref: ref,
     tagRender: tagRender,
+    popupClassName: classNames('ald-select-popup', popupClassName),
     maxTagPlaceholder: maxTagPlaceholder,
     className: classNames(className, {
       'ald-select-prefix-select': !!prefix || prefix === 0
@@ -216,8 +241,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
 
       _onDropdownVisibleChange === null || _onDropdownVisibleChange === void 0 ? void 0 : _onDropdownVisibleChange(open);
     },
-    value: currentValue,
-    dropdownRender: dropdownRenderFunc
+    value: value !== null && value !== void 0 ? value : currentValue,
+    dropdownRender: getDropdownRender()
   })));
 });
 export default Select;

package/dist/Select/style/index.less

@@ -1,6 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 @import './variables.less';
-
+@import '../../Empty/style/index.less';
 @import './multiple.less';
 @import './single.less';
 @import './size.less';
@@ -9,6 +9,12 @@
 .ant-select-dropdown {
   padding-left: 0;
   padding-right: 0;
+
+  &.ald-select-popup {
+    max-height: 264px;
+    overflow-y: auto;
+    overflow-y: overlay;
+  }
 }
 
 .ald-select {
@@ -20,7 +26,6 @@
   // padding: 0 4px;
   cursor: pointer;
 
-
   .ald-select-prefix {
     color: @NL40;
     display: inline-flex;
@@ -31,7 +36,7 @@
     height: 100%;
 
     &.ald-select-prefix-single {
-     cursor: pointer;
+      cursor: pointer;
     }
 
     &.ald-select-prefix-multiple {
@@ -39,11 +44,12 @@
     }
   }
 
-  .ant-select.ald-select-prefix-select{
-   .ant-select-selector{
-      border:none;
+  .ant-select.ald-select-prefix-select {
+    .ant-select-selector {
+      border: none;
     }
   }
+
 }
 
 .ant-select-selection-overflow {
@@ -70,13 +76,12 @@
       }
     }
 
-    &.ant-select-selection-overflow-item-rest{
-      .ant-select-selection-item{
-        border:none;
+    &.ant-select-selection-overflow-item-rest {
+      .ant-select-selection-item {
+        border: none;
         background: none;
         margin-bottom: 0;
       }
-
     }
 
     .ald-select-multiple-tag-default {
@@ -94,11 +99,10 @@
     }
   }
 
-  .ant-select-selection-overflow-item-rest{
-    .ant-select-selection-item{
+  .ant-select-selection-overflow-item-rest {
+    .ant-select-selection-item {
       padding-inline-start: 0;
     }
-    
   }
 
   .ant-select-selection-overflow-item:first-of-type {
@@ -106,4 +110,4 @@
       content: '';
     }
   }
-}
+}

package/package.json

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