@aloudata/aloudata-design 0.4.4 → 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", "popupClassName", "notFoundContent", "value", "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,17 +30,63 @@ 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,
@@ -53,15 +99,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
 
   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];
@@ -109,7 +154,9 @@ 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);
+          }
         }
       });
     }));
@@ -137,7 +184,9 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         option: option,
         disabled: option.disabled,
         onChange: function onChange() {
-          onSingleOptionChange(option);
+          if (typeof value === 'undefined') {
+            onSingleOptionChange(option);
+          }
         }
       });
     }));
@@ -178,9 +227,6 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       setPrefixWidth(prefixRef.current.offsetWidth);
     }
   }, [props.size, prefix]);
-  var selectorStyle = style.width ? {
-    width: '100%'
-  } : {};
   var styleVar = {
     '--ald-select-prefix-width': "".concat(prefixWidth, "px")
   };
@@ -196,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',
@@ -219,19 +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);
 

package/dist/Select/style/index.less

@@ -25,6 +25,7 @@
   border-radius: 4px;
   // padding: 0 4px;
   cursor: pointer;
+  width:100%;
 
   .ald-select-prefix {
     color: @NL40;

package/package.json

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