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

package/lib/Input/index.d.ts

@@ -1,65 +1,16 @@
-import React, { ReactNode } from 'react';
-import type { ShowCountProps, InputProps } from 'antd/lib/input/Input';
-import './style';
-declare type TSize = 'small' | 'default' | 'large';
-declare type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
-export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' | 'disabled' | 'showCount' | 'maxLength' | 'value' | 'defaultValue' | 'onPressEnter' | 'onChange'> {
-    /**
-     * @description 输入框尺寸
-     * @default default
-     * @type 'small' | 'default' | 'large';
-     */
-    size?: TSize;
-    /**
-     * @description 输入框id
-     */
-    id?: string;
-    /**
-     * @description 提示文字
-     */
-    prefix?: ReactNode;
-    /**
-     * @description 带标签的 input，设置前置标签
-     */
-    allowClear?: boolean;
-    /**
-     * @description 可以点击清除图标删除内容
-     * @default true
-     */
-    disabled?: boolean;
-    /**
-     * @description 提示文字
-     * @default false
-     * @type boolean | { formatter: (args: { count: number; maxLength?: number; }) => string; };
-     */
-    showCount?: boolean | ShowCountProps;
-    /**
-     * @description 最大长度
-     */
-    maxLength?: number;
-    /**
-     * @description 输入框内容
-     */
-    value?: string;
-    /**
-     * @description 输入框默认内容
-     */
-    defaultValue?: string;
-    /**
-     * @description 按下回车的回调
-     * @type (e) => void
-     */
-    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
-    /**
-     * @description 输入框内容变化时的回调
-     * @type (e: React.ChangeEvent<HTMLInputElement>) => void;
-     */
-    onChange?: ChangeEventHandler;
-}
-declare function Input(props: IInputProps): JSX.Element;
-declare namespace Input {
-    var TextArea: typeof import("./components/TextArea").default;
-    var Group: typeof import("./components/Group").default;
-    var Password: typeof import("./components/Password").default;
+/// <reference types="react" />
+import { IInputProps, InputRef } from './components/Input';
+import Group from './components/Group';
+import TextArea from './components/TextArea';
+import Password from './components/Password';
+export type { IInputProps, InputRef, TSize } from './components/Input';
+export type { IGroupProps } from './components/Group';
+export type { ITextAreaProps, TextAreaRef } from './components/TextArea';
+export type { IPasswordProps } from './components/Password';
+interface ICompoundedComponent extends React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<InputRef>> {
+    Group: typeof Group;
+    TextArea: typeof TextArea;
+    Password: typeof Password;
 }
+declare const Input: ICompoundedComponent;
 export default Input;

package/lib/Input/index.js

@@ -5,59 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("antd/es/input/style");
+var _Input = _interopRequireDefault(require("./components/Input"));
 
-var _input = _interopRequireDefault(require("antd/es/input"));
-
-var _react = _interopRequireDefault(require("react"));
+var _Group = _interopRequireDefault(require("./components/Group"));
 
 var _TextArea = _interopRequireDefault(require("./components/TextArea"));
 
 var _Password = _interopRequireDefault(require("./components/Password"));
 
-var _Group = _interopRequireDefault(require("./components/Group"));
-
-require("./style");
-
-var _excluded = ["size"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-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; }
-
-// IInputProps 和 InputProps 类型合并，并去除InputProps中的重复属性
-function Input(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? 'default' : _props$size,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var getInputSize = function getInputSize(inputSize) {
-    if (inputSize === 'small' || inputSize === 'large') {
-      return inputSize;
-    }
-
-    return 'middle';
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_input.default, _objectSpread(_objectSpread({}, rest), {}, {
-    size: getInputSize(size),
-    bordered: true,
-    addonAfter: null,
-    addonBefore: null,
-    suffix: null
-  }));
-}
-
-Input.TextArea = _TextArea.default;
+var Input = _Input.default;
 Input.Group = _Group.default;
+Input.TextArea = _TextArea.default;
 Input.Password = _Password.default;
 var _default = Input;
 exports.default = _default;

package/lib/Input/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/input/style';
 import '../../style';
 import './index.less';

package/lib/Input/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/input/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/Input/style/index.less

@@ -4,9 +4,12 @@
 @ald-prefix:ant;
 
 @ald-iconfont-css-prefix:anticon;
-.@{ald-prefix}-input {
+
+.ant-input {
   color: @NL0;
   border-radius: @border-radius-base;
+  font-size: 12px;
+  height: 28px;
 
   &::placeholder {
     color: @NL50;
@@ -14,6 +17,9 @@
 
   &-prefix {
     color: @NL30;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
   }
 
   &-suffix {
@@ -38,28 +44,53 @@
 
   &-sm {
     border-radius: @border-radius-sm;
+    font-size: 12px;
+    height: 24px;
+  }
+
+  &-lg {
+    height: 32px;
+    font-size: 14px;
   }
 
   &-affix-wrapper {
     border-radius: @border-radius-base;
+    padding: 0 12px;
+    height: 28px;
 
     &-hover,
     &-focused,
     &:hover {
       box-shadow: unset;
     }
-    .@{ald-prefix}-input {
+
+    .ant-input {
       border-radius: 0;
       caret-color: @B40;
+      height: 100%;
     }
+  }
+}
+
+.ant-input-affix-wrapper.ant-input-affix-wrapper {
+  &-lg {
+    padding: 4px 11px;
+    height: 32px;
+    font-size: 14px;
+  }
+
+  &-sm {
+    border-radius: @border-radius-sm;
+    padding: 0 12px;
+    height: 24px;
 
-    &-sm {
-      border-radius: @border-radius-sm;
+    .ant-input-sm {
+      height: 22px;
     }
   }
 }
 .@{ald-iconfont-css-prefix} {
-  &.@{ald-iconfont-css-prefix}-close-circle, &.@{ald-prefix}-clear-icon {
+  &.@{ald-iconfont-css-prefix}-close-circle, &.ant-clear-icon {
     .ald-iconfont('\e616');
   }
 }

package/lib/Menu/Divider.d.ts

@@ -1,4 +1,4 @@
-import './style';
+/// <reference types="react" />
 export interface IMenuDividerProps {
 }
 export default function Menu(props: IMenuDividerProps): JSX.Element;

package/lib/Menu/Divider.js

@@ -11,8 +11,6 @@ var _menu = _interopRequireDefault(require("antd/es/menu"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./style");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }

package/lib/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './style';
+import { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export interface IMenuItemProps {
     /**
      * @description 唯一标志
@@ -12,6 +12,12 @@ export interface IMenuItemProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * @description 点击事件
+     * @type Function
+     * @default -
+     */
+    onClick?: MenuClickEventHandler;
     children?: React.ReactNode;
 }
 export default function Menu(props: IMenuItemProps): JSX.Element;

package/lib/Menu/MenuItem.js

@@ -11,8 +11,6 @@ var _menu = _interopRequireDefault(require("antd/es/menu"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./style");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }

package/lib/Menu/SubMenu.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 export interface ISubMenuProps {
     /**
      * @description 唯一标志

package/lib/Menu/SubMenu.js

@@ -13,8 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./style");
-
 var _excluded = ["popupClassName"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Menu/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import MenuItem from './MenuItem';
 import type { MenuClickEventHandler } from 'rc-menu/lib/interface';
-import './style';
 export interface IMenuProps {
     /**
      * @description 点击 MenuItem 调用此函数
+     * @type Function
      * @default -
      */
     onClick?: MenuClickEventHandler;

package/lib/Menu/index.js

@@ -19,8 +19,6 @@ var _Divider = _interopRequireDefault(require("./Divider"));
 
 var _SubMenu = _interopRequireDefault(require("./SubMenu"));
 
-require("./style");
-
 var _excluded = ["className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Menu/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/menu/style';
 import '../../style';
 import './index.less';

package/lib/Menu/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/menu/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/Navigator/components/Menu/index.js

@@ -64,14 +64,14 @@ function Menu(props) {
 
     if (isOpen) {
       return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        type: "arrow_drop_down",
+        type: "arrow_drop_up",
         size: 20,
         className: "ald-nav-menu-icon-right"
       });
     }
 
     return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "arrow_drop_up",
+      type: "arrow_drop_down",
       size: 20,
       className: "ald-nav-menu-icon-right"
     });

package/lib/Navigator/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IMenuItem } from './components/Menu';
-import './style';
 export type { IMenuItem } from './components/Menu';
 export interface INavigatorProps {
     /**

package/lib/Navigator/index.js

@@ -13,8 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Menu = _interopRequireDefault(require("./components/Menu"));
 
-require("./style");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/Navigator/style/index.less

@@ -129,6 +129,18 @@
         border-radius: 8px;
         .supTitle();
 
+        ::before {
+          width: 4px;
+          content: '';
+          background: transparent;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: -12px;
+          border-radius: 1px;
+          transition: all .3s;
+        }
+
         &-selected {
           background-color: @BBG20 !important;
           color: @ND0;
@@ -136,14 +148,7 @@
           overflow: unset;
 
           ::before {
-            width: 4px;
-            content: '';
             background: @B40;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: -12px;
-            border-radius: 1px;
           }
         }
 
@@ -213,10 +218,9 @@
   }
 
   &-footer {
-    height: 56px;
+    height: 72px;
 
     &-wrap {
-      border: 1px solid @ND0;
       color: @ND0;
       height: 100%;
     }

package/lib/Select/BaseSelect.js

@@ -74,7 +74,6 @@ 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,
@@ -341,7 +340,6 @@ var Select = function Select(props, ref) {
     visible: visible,
     hasGroup: hasGroup,
     groupStyle: groupStyle,
-    optionStyle: optionStyle,
     searchType: "no-search",
     placeholder: placeholder,
     data: flattenOptions,

package/lib/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/lib/Select/OptionsList/OptionItem/RenderLabelIcon.js

@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _lodash = require("lodash");
 
+require("antd/lib/checkbox/style");
+
 var _Icon = _interopRequireDefault(require("../../../Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Select/OptionsList/index.js

@@ -11,11 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
-var _VirtualList = _interopRequireDefault(require("../VirtualList"));
-
 var _OptionItem = require("./OptionItem");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,13 +45,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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,
@@ -69,7 +70,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);
 
@@ -164,7 +164,9 @@ var OptionsList = function OptionsList(props, ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-list"),
-    style: style,
+    style: {
+      maxHeight: "".concat(height - DEFAULT_LIST_PADDING, "px")
+    },
     ref: OptionListRef,
     role: "list",
     "aria-hidden": "true",
@@ -173,20 +175,10 @@ var OptionsList = function OptionsList(props, ref) {
     onMouseLeave: function onMouseLeave() {
       return setActiveIndex(DEFAULT_ACTIVE_INDEX);
     }
-  }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? /*#__PURE__*/_react.default.createElement(_VirtualList.default, _objectSpread({
-    itemKey: "value",
-    prefixCls: prefixCls,
-    ref: VirtualListRef,
-    data: data,
-    height: height,
-    itemHeight: itemHeight
-  }, restProps), function (option, index) {
-    return option.isSelectOptGroup ? /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderGroup, {
-      option: option,
-      prefixCls: prefixCls,
-      groupStyle: groupStyle
-    }) : /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderTooltip, {
+  }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? data.map(function (option, index) {
+    return /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderTooltip, {
       tooltip: option === null || option === void 0 ? void 0 : option.tooltip,
+      key: option === null || option === void 0 ? void 0 : option.value,
       render: /*#__PURE__*/_react.default.createElement(_OptionItem.ForwardRenderOption, _objectSpread({
         option: option,
         prefixCls: prefixCls,

package/lib/Select/Selector/index.js

@@ -62,6 +62,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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.default.createElement(_Icon.default, {
@@ -185,17 +187,17 @@ 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) {
+    if (Array.isArray(value) && value.length === filteredOptions.length && !(0, _lodash.isEmpty)(value)) {
       return /*#__PURE__*/_react.default.createElement("span", null, "\u5168\u90E8");
     }
 
@@ -210,7 +212,7 @@ var Selector = function Selector(props, ref) {
     return !input && !(0, _lodash.isNil)(value) ? /*#__PURE__*/_react.default.createElement(_Tooltip.default // @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;

package/lib/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/lib/Select/index.js

@@ -23,8 +23,6 @@ var _Options = _interopRequireDefault(require("./OptionsList/Options"));
 
 var _OptGroup = _interopRequireDefault(require("./OptionsList/OptGroup"));
 
-require("./style");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Select = _BaseSelect.default;

package/lib/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 选中值改变时的回调