@aloudata/aloudata-design 0.4.3 → 0.4.6

package/dist/Modal/index.d.ts

@@ -11,7 +11,7 @@ interface IModalInterface extends React.FC<ModalProps> {
 export interface ModalProps extends Omit<AntdModalProps, 'okButtonProps' | 'cancelButtonProps' | 'okType'> {
     forbidBodyScroll?: boolean;
     children?: React.ReactNode;
-    subTitle?: string;
+    subTitle?: React.ReactNode;
     icon?: React.ReactElement;
     cancelButtonProps?: IButtonProps;
     okButtonProps?: IButtonProps;

package/dist/Modal/index.js

@@ -41,7 +41,8 @@ function getButtonProps(buttonProps, defaultBtnType, okType) {
       _buttonProps$shape = buttonProps.shape,
       shape = _buttonProps$shape === void 0 ? 'default' : _buttonProps$shape;
   return {
-    disable: loading ? true : disabled,
+    disabled: loading ? true : disabled,
+    loading: loading,
     type: getButtonType(type),
     className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), buttonClassName, getButtonSizeClass(size)),
     danger: getDangerStatus(type),

package/dist/Modal/style/index.less

@@ -10,31 +10,32 @@
 
   .ald-modal-close {
     position: relative;
-    top: 5px;
-    left: -4px;
+    // top: 5px;
+    // left: -4px;
   }
 
   .ald-modal-title-container {
-    display: inline-flex;
+    display: flex;
     align-items: center;
 
     .ald-modal-text-container {
       margin-left: 12px;
+      flex: 1;
     }
 
     .title {
       color: @NL0;
       font-weight: 600;
-      font-size: 18px;
-      line-height: 28px;
+      font-size: 16px;
+      line-height: 24px;
     }
 
     .subTitle {
       margin-top: 4px;
       color: @NL40;
       font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
+      font-size: 12px;
+      line-height: 16px;
     }
   }
 

package/dist/Select/index.d.ts

@@ -1,6 +1,6 @@
 import { RefSelectProps, SelectProps } from 'antd';
 import React from 'react';
-export interface ISelectProps extends Omit<SelectProps, 'dropdownMatchSelectWidth'> {
+export interface ISelectProps extends Omit<SelectProps, 'mode'> {
     prefix?: React.ReactNode;
     mode?: 'multiple';
 }

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", "defaultValue", "onChange", "open", "defaultOpen", "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); }
 
@@ -30,33 +30,83 @@ 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 React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';
+import Empty from "../Empty";
 import MultipleList from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
+
+var getSelectedOptionsFromValue = function getSelectedOptionsFromValue(isMultiple, options, value, defaultValue) {
+  if (typeof value !== 'undefined') {
+    if (isMultiple) {
+      if (Array.isArray(value)) {
+        var newOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+          return value.includes(option.value);
+        });
+        return newOptions || [];
+      }
+    } else {
+      var _newOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+        return option.value === value;
+      });
+
+      return _newOptions || [];
+    }
+
+    return [];
+  }
+
+  if (typeof defaultValue !== 'undefined') {
+    if (isMultiple) {
+      if (Array.isArray(defaultValue)) {
+        var _newOptions2 = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+          return defaultValue.includes(option.value);
+        });
+
+        return _newOptions2 || [];
+      }
+    } else {
+      var _newOptions3 = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+        return option.value === defaultValue;
+      });
+
+      return _newOptions3 || [];
+    }
+
+    return [];
+  }
+
+  return [];
+};
+
 var Select = /*#__PURE__*/forwardRef(function (props, ref) {
   var mode = props.mode,
       options = props.options,
       dropdownRender = props.dropdownRender,
       _onDropdownVisibleChange = props.onDropdownVisibleChange,
+      defaultValue = props.defaultValue,
       onChange = props.onChange,
       open = props.open,
+      defaultOpen = props.defaultOpen,
       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);
 
   var isMultiple = mode === 'multiple';
 
-  var _React$useState = React.useState([]),
+  var _React$useState = React.useState(getSelectedOptionsFromValue(isMultiple, options, value, defaultValue)),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selectedOptions = _React$useState2[0],
       setSelectedOptions = _React$useState2[1];
 
-  style.width = style.width || '100%';
   var dropDownTimeRef = React.useRef(0);
 
-  var _React$useState3 = React.useState(open),
+  var _React$useState3 = React.useState(typeof open === 'boolean' ? open : defaultOpen),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       isOpen = _React$useState4[0],
       setIsOpen = _React$useState4[1];
@@ -72,8 +122,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;
       });
@@ -98,20 +154,21 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         option: option,
         disabled: option.disabled,
         onChange: function onChange(selected) {
-          onMultipleOptionChange(option, selected);
+          if (typeof value === 'undefined') {
+            onMultipleOptionChange(option, selected);
+          }
         }
       });
     }));
   };
 
-  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 +183,34 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         selected: isSelected,
         option: option,
         disabled: option.disabled,
-        onChange: function onChange(selected) {
-          onSingleOptionChange(option, selected);
+        onChange: function onChange() {
+          if (typeof value === 'undefined') {
+            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,10 +226,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     if (prefixRef.current) {
       setPrefixWidth(prefixRef.current.offsetWidth);
     }
-  }, [props.size]);
-  var selectorStyle = style.width ? {
-    width: '100%'
-  } : {};
+  }, [props.size, prefix]);
   var styleVar = {
     '--ald-select-prefix-width': "".concat(prefixWidth, "px")
   };
@@ -172,8 +242,11 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, "\u7B49", omittedValues.length, "\u9879");
   };
 
+  useEffect(function () {
+    getSelectedOptionsFromValue(isMultiple, options, value);
+  }, [value]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-select', {
+    className: classNames('ald-select', className, {
       'ald-select-multiple': isMultiple,
       'ald-select-single': !isMultiple,
       'ald-select-large': props.size === 'large',
@@ -195,18 +268,21 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     options: options,
     mode: isMultiple ? 'multiple' : undefined,
     bordered: false,
-    open: isOpen,
+    open: typeof open === 'boolean' ? open : isOpen,
     maxTagCount: "responsive",
     ref: ref,
     tagRender: tagRender,
+    popupClassName: classNames('ald-select-popup', popupClassName),
     maxTagPlaceholder: maxTagPlaceholder,
-    className: classNames(className, {
+    className: classNames({
       'ald-select-prefix-select': !!prefix || prefix === 0
     }),
     dropdownStyle: {
       width: '100%'
     },
-    style: selectorStyle,
+    style: {
+      width: '100%'
+    },
     onDropdownVisibleChange: function onDropdownVisibleChange(open) {
       setIsOpen(open);
 
@@ -216,8 +292,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 {
@@ -19,7 +25,7 @@
   border-radius: 4px;
   // padding: 0 4px;
   cursor: pointer;
-
+  width:100%;
 
   .ald-select-prefix {
     color: @NL40;
@@ -31,7 +37,7 @@
     height: 100%;
 
     &.ald-select-prefix-single {
-     cursor: pointer;
+      cursor: pointer;
     }
 
     &.ald-select-prefix-multiple {
@@ -39,11 +45,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 +77,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 +100,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 +111,4 @@
       content: '';
     }
   }
-}
+}

package/package.json

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