@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.11

package/lib/Navigator/style/index.less

@@ -0,0 +1,228 @@
+@import '../../style/index.less';
+@import '../../Icon/index.less';
+
+/* stylelint-disable */
+
+@ald-prefix:ant;
+
+.supTitle() {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.subTitle() {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.ald-nav {
+  width: 216px;
+  background-color: @BBG15;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+
+  &-logo {
+    height: 72px;
+    padding: 24px;
+    width: 100%;
+
+    &-able-click {
+      cursor: pointer;
+    }
+  }
+
+  &-menu-icon-right.anticon {
+    color: @ND60;
+  }
+
+  &-menu {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .ant-menu-sub.ant-menu-inline {
+      background-color: unset;
+    }
+
+    .anticon.ant-menu-item-icon {
+      font-size: 20px !important;
+      width: 20px !important;
+      height: 20px !important;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      background: @ND90;
+      border: 3px solid transparent;
+      background-clip: padding-box;
+    }
+
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 12px;
+      height: 12px;
+    }
+
+    .ant-menu-inline,
+    .ant-menu-vertical,
+    .ant-menu-vertical-left {
+      border-right: unset;
+    }
+
+    .ant-menu {
+      background: @BBG15;
+      color: @ND0;
+
+      &.ant-menu-root {
+
+        .ant-menu-item {
+          margin-bottom: 16px;
+          padding: 0 12px !important;
+        }
+
+        li:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+      }
+
+      &.ant-menu-sub {
+        .ant-menu-item {
+          margin-top: 4px;
+          margin-bottom: 0;
+          padding: 0 12px 0 44px!important;
+        }
+      }
+
+      // 只有子级菜单相关颜色操作
+      .ant-menu-item-only-child {
+        color: @ND30;
+        height: 32px !important;
+        line-height: 32px !important;
+        font-size: 12px !important;
+        .subTitle();
+
+        &:hover {
+          color: @ND30 !important;
+        }
+
+        &.ant-menu-item-selected {
+          font-weight: 500;
+
+          &:hover {
+            color: @ND0 !important;
+          }
+        }
+      }
+
+      .ant-menu-item {
+        height: 40px;
+        width: 100%;
+        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;
+          position: relative;
+          overflow: unset;
+
+          ::before {
+            background: @B40;
+          }
+        }
+
+        &::after {
+          display: none !important;
+        }
+      }
+
+      .ant-menu-submenu {
+        margin-bottom: 16px;
+
+        .ant-menu-submenu-title {
+          padding: 0 12px !important;
+          height: 40px;
+          line-height: 40px;
+          .supTitle();
+
+          &:hover {
+            color: @ND0;
+          }
+        }
+
+        &-selected {
+          color: @ND0;
+        }
+
+        &-active {
+          color: @ND0;
+        }
+      }
+
+      // 修改icon和文字的margin
+      .ant-menu-item .ant-menu-item-icon + span,
+      .ant-menu-submenu-title .ant-menu-item-icon + span,
+      .ant-menu-item .anticon + span,
+      .ant-menu-submenu-title .anticon + span {
+        margin-left: 12px;
+      }
+
+      // 取消item点击时的高亮背景色
+      .ant-menu-item:active,
+      .ant-menu-submenu-title:active {
+        background: unset;
+      }
+
+      .ant-menu-inline .ant-menu-item,
+      .ant-menu-inline .ant-menu-submenu-title {
+        width: 100% !important;
+      }
+
+      // 删除右侧的高亮
+      .ant-menu-vertical .ant-menu-item::after,
+      .ant-menu-vertical-left .ant-menu-item::after,
+      .ant-menu-vertical-right .ant-menu-item::after,
+      .ant-menu-inline .ant-menu-item::after {
+        display: none;
+      }
+    }
+
+    .ant-menu-light .ant-menu-item:hover,
+    .ant-menu-light .ant-menu-item-active,
+    .ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+    .ant-menu-light .ant-menu-submenu-active,
+    .ant-menu-light .ant-menu-submenu-title:hover {
+      color: unset;
+    }
+  }
+
+  &-footer {
+    height: 72px;
+
+    &-wrap {
+      color: @ND0;
+      height: 100%;
+    }
+  }
+}

package/lib/Select/OptionsList/OptionItem/RenderGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IOption as Option } from '../../interface';
+interface IGroupProps {
+    option: Option;
+    prefixCls: string;
+    groupStyle?: React.CSSProperties;
+}
+declare const _default: React.ForwardRefExoticComponent<IGroupProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/Select/OptionsList/OptionItem/RenderGroup.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RenderGroup = function RenderGroup(props, ref) {
+  var _props$option = props.option,
+      value = _props$option.value,
+      label = _props$option.label,
+      prefixCls = props.prefixCls,
+      groupStyle = props.groupStyle;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "".concat(prefixCls, "-list-group"),
+    style: groupStyle
+  }, label !== undefined ? label : value);
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(RenderGroup);
+
+exports.default = _default;

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

@@ -0,0 +1,8 @@
+declare const RenderLabelIcon: ({ isSelected, multiple, disabled, prefixCls, isIndeterminate }: {
+    isSelected: boolean;
+    multiple: boolean;
+    disabled?: boolean | undefined;
+    prefixCls?: string | undefined;
+    isIndeterminate?: boolean | undefined;
+}) => JSX.Element | null;
+export default RenderLabelIcon;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/checkbox/style");
+
+var _checkbox = _interopRequireDefault(require("antd/es/checkbox"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodash = require("lodash");
+
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RenderLabelIcon = function RenderLabelIcon(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      prefixCls = _ref.prefixCls,
+      _ref$isIndeterminate = _ref.isIndeterminate,
+      isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate;
+
+  if (multiple) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-list-option-icon"),
+      key: "".concat(String(isSelected))
+    }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+      className: "".concat(prefixCls, "-list-option-icon-checkbox"),
+      checked: isSelected,
+      disabled: disabled,
+      onChange: _lodash.noop,
+      indeterminate: isIndeterminate
+    }));
+  }
+
+  if (isSelected) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-list-option-icon"),
+      key: "".concat(String(isSelected))
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "check",
+      size: 16
+    }));
+  }
+
+  return null;
+};
+
+var _default = RenderLabelIcon;
+exports.default = _default;

package/lib/Select/OptionsList/OptionItem/RenderOption.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IOption, TMaybeArray as MaybeArray } from '../../interface';
+interface IOptionProp {
+    option: IOption;
+    selected: MaybeArray<string | number> | null | undefined;
+    prefixCls?: string;
+    labelRenderer: (option: IOption, isGruop: false) => React.ReactNode;
+    onOptionClick?: (selectedValue: string | number) => void;
+    index: number;
+    optionStyle?: React.CSSProperties;
+    multiple?: boolean;
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+}
+declare const _default: React.ForwardRefExoticComponent<IOptionProp & React.RefAttributes<unknown>>;
+export default _default;

package/lib/Select/OptionsList/OptionItem/RenderOption.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodash = require("lodash");
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _RenderLabelIcon = _interopRequireDefault(require("./RenderLabelIcon"));
+
+var _excluded = ["value", "disabled", "tooltip", "groupValue", "groupLabel", "label"];
+
+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; }
+
+var FIRST_INDEX = 0;
+var INVALID_INDEX = -1; // ================= RenderOption =====================
+
+var RenderOption = function RenderOption(props, ref) {
+  var _classnames;
+
+  var _props$option = props.option,
+      value = _props$option.value,
+      disabled = _props$option.disabled,
+      tooltip = _props$option.tooltip,
+      groupValue = _props$option.groupValue,
+      groupLabel = _props$option.groupLabel,
+      label = _props$option.label,
+      restOption = _objectWithoutProperties(_props$option, _excluded),
+      selected = props.selected,
+      onOptionClick = props.onOptionClick,
+      labelRenderer = props.labelRenderer,
+      prefixCls = props.prefixCls,
+      optionStyle = props.optionStyle,
+      multiple = props.multiple,
+      index = props.index,
+      activeIndex = props.activeIndex,
+      setActiveIndex = props.setActiveIndex;
+
+  var isSelected = typeof selected === 'string' || typeof selected === 'number' || (0, _lodash.isNull)(selected) || typeof selected === 'undefined' ? selected === value : selected.includes(value);
+
+  var onClick = function onClick(e) {
+    onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(value);
+    e.preventDefault();
+  };
+
+  var labelNode = labelRenderer(_objectSpread({
+    value: value,
+    disabled: disabled,
+    tooltip: tooltip,
+    groupValue: groupValue,
+    groupLabel: groupLabel,
+    label: label
+  }, restOption), false);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "".concat(prefixCls, "-list-option-container"),
+    style: optionStyle
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      return setActiveIndex(index);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setActiveIndex(INVALID_INDEX);
+    },
+    className: (0, _classnames2.default)("".concat(prefixCls, "-list-option"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-list-option-isSelected"), isSelected), _defineProperty(_classnames, "".concat(prefixCls, "-list-option-isHover"), !disabled && index === activeIndex), _defineProperty(_classnames, "".concat(prefixCls, "-list-option-disabled"), disabled), _defineProperty(_classnames, "".concat(prefixCls, "-list-option-nomargin"), index === FIRST_INDEX), _classnames)),
+    onClick: disabled ? undefined : onClick,
+    onKeyDown: _lodash.noop,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement(_RenderLabelIcon.default, {
+    isSelected: isSelected,
+    multiple: !!multiple,
+    disabled: !!disabled,
+    prefixCls: prefixCls
+  }), labelNode));
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(RenderOption);
+
+exports.default = _default;

package/lib/Select/OptionsList/OptionItem/RenderTooltip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ITooltipProps {
+    render: JSX.Element & React.ReactNode;
+    getContainer?: (node: HTMLElement) => HTMLElement;
+    tooltip?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/Select/OptionsList/OptionItem/RenderTooltip.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Tooltip = _interopRequireDefault(require("../../../Tooltip"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RenderTooltip = function RenderTooltip(props, ref) {
+  var tooltip = props.tooltip,
+      render = props.render,
+      getContainer = props.getContainer;
+
+  if (tooltip) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: tooltip,
+      destroyTooltipOnHide: true,
+      placement: "right",
+      getTooltipContainer: getContainer
+    }, /*#__PURE__*/_react.default.createElement("div", null, render)));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, render);
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(RenderTooltip);
+
+exports.default = _default;

package/lib/Select/OptionsList/OptionItem.d.ts

@@ -1,35 +1,4 @@
-import React from 'react';
-import { IOption as Option, TMaybeArray as MaybeArray } from '../interface';
-interface IGroupProps {
-    option: Option;
-    prefixCls: string;
-    groupStyle?: React.CSSProperties;
-}
-interface ITooltipProps {
-    render: JSX.Element & React.ReactNode;
-    getContainer?: (node: HTMLElement) => HTMLElement;
-    tooltip?: string;
-}
-interface IOptionProp {
-    option: Option;
-    selected: MaybeArray<string | number> | null | undefined;
-    prefixCls?: string;
-    labelRenderer: (option: Option, isGruop: false) => React.ReactNode;
-    onOptionClick?: (selectedValue: string | number) => void;
-    index: number;
-    optionStyle?: React.CSSProperties;
-    multiple?: boolean;
-    activeIndex: number;
-    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
-}
-export declare const RenderLabelIcon: ({ isSelected, multiple, disabled, prefixCls, isIndeterminate }: {
-    isSelected: boolean;
-    multiple: boolean;
-    disabled?: boolean | undefined;
-    prefixCls?: string | undefined;
-    isIndeterminate?: boolean | undefined;
-}) => JSX.Element | null;
-export declare const ForwardRenderGroup: React.ForwardRefExoticComponent<IGroupProps & React.RefAttributes<unknown>>;
-export declare const ForwardRenderOption: React.ForwardRefExoticComponent<IOptionProp & React.RefAttributes<unknown>>;
-export declare const ForwardRenderTooltip: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<unknown>>;
-export {};
+export { default as ForwardRenderGroup } from './OptionItem/RenderGroup';
+export { default as ForwardRenderOption } from './OptionItem/RenderOption';
+export { default as RenderLabelIcon } from './OptionItem/RenderLabelIcon';
+export { default as ForwardRenderTooltip } from './OptionItem/RenderTooltip';