@aloudata/aloudata-design 0.1.0-beta.3 → 0.2.0-beta.1

package/es/Navigator/style/index.less

@@ -0,0 +1,224 @@
+@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();
+
+        &-selected {
+          background-color: @BBG20 !important;
+          color: @ND0;
+          position: relative;
+          overflow: unset;
+
+          ::before {
+            width: 4px;
+            content: '';
+            background: @B40;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: -12px;
+            border-radius: 1px;
+          }
+        }
+
+        &::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: 56px;
+
+    &-wrap {
+      border: 1px solid @ND0;
+      color: @ND0;
+      height: 100%;
+    }
+  }
+}

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

@@ -1,6 +1,5 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
 import React from 'react';
+import Tooltip from '../../../Tooltip';
 
 var RenderTooltip = function RenderTooltip(props, ref) {
   var tooltip = props.tooltip,
@@ -10,7 +9,7 @@ var RenderTooltip = function RenderTooltip(props, ref) {
   if (tooltip) {
     return /*#__PURE__*/React.createElement("div", {
       ref: ref
-    }, /*#__PURE__*/React.createElement(_Tooltip, {
+    }, /*#__PURE__*/React.createElement(Tooltip, {
       title: tooltip,
       destroyTooltipOnHide: true,
       placement: "right",

package/es/Select/OptionsList/Options.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IOptionProps } from '../interface';
-export interface IOptionFC extends React.FC<IOptionProps> {
+import { IOption } from '../interface';
+export interface IOptionFC extends React.FC<IOption> {
     isSelectOption: boolean;
 }
 declare const Option: IOptionFC;

package/es/Select/OptionsList/index.js

@@ -156,7 +156,7 @@ var OptionsList = function OptionsList(props, ref) {
       return setActiveIndex(DEFAULT_ACTIVE_INDEX);
     }
   }, multiple && renderAllOptions(), data.length > ZERO_LENGTH ? /*#__PURE__*/React.createElement(VirtualList, _objectSpread({
-    itemKey: "key",
+    itemKey: "value",
     prefixCls: prefixCls,
     ref: VirtualListRef,
     data: data,

package/es/Select/Selector/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ISelectorProps as SelectorProps } from '../interface';
-declare const ForwardSelector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<unknown>>;
+import { ISelectorProps } from '../interface';
+declare const ForwardSelector: React.ForwardRefExoticComponent<ISelectorProps & React.RefAttributes<unknown>>;
 export default ForwardSelector;

package/es/Select/Selector/index.js

@@ -1,5 +1,3 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
 var _excluded = ["input", "disabled", "prefix", "size", "multiple", "bordered", "isFocused", "className", "visible", "style", "allowClear", "label", "mode", "value", "searchType", "arrowComponent", "closeComponent", "placeholder", "deleteValue", "optionLabelRenderer", "getOptionByValue", "onInputChange", "onAllowClear", "filteredOptions"];
 
 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; }
@@ -36,7 +34,9 @@ import Icon from '../../Icon';
 import classnames from 'classnames';
 import { isEmpty, isNil } from 'lodash';
 import React, { useRef, useState, useImperativeHandle, useMemo } from 'react';
+import Tooltip from '../../Tooltip';
 import OverFLow from 'rc-overflow';
+import color from '../../style/themes/default/themeColor.module.less';
 var ZERO = 0;
 var ICON_LARGE_SIZE = 20;
 var ICON_SMALL_SIZE = 16;
@@ -45,7 +45,8 @@ var defaultArrowComponent = function defaultArrowComponent(prefix, size) {
   return /*#__PURE__*/React.createElement(Icon, {
     className: "".concat(prefix, "-icon-arrow"),
     size: size === 'large' ? ICON_LARGE_SIZE : ICON_SMALL_SIZE,
-    type: "expand_more1"
+    type: "expand_more1",
+    color: color.NL40
   });
 };
 
@@ -53,7 +54,8 @@ var defaultCloseComponent = function defaultCloseComponent(prefix, size) {
   return /*#__PURE__*/React.createElement(Icon, {
     className: "".concat(prefix, "-icon-close"),
     size: size === 'large' ? ICON_LARGE_SIZE : ICON_SMALL_SIZE,
-    type: "cancel"
+    type: "cancel",
+    color: color.NL40
   });
 };
 
@@ -183,10 +185,11 @@ var Selector = function Selector(props, ref) {
       return /*#__PURE__*/React.createElement("span", null, "\u7B49", valueItems.length, "\u9879");
     };
 
-    return !input && !isNil(value) ? /*#__PURE__*/React.createElement(_Tooltip, {
+    return !input && !isNil(value) ? /*#__PURE__*/React.createElement(Tooltip // @ts-ignore
+    , {
       // @ts-ignore
       title: allValueLabel === null || allValueLabel === void 0 ? void 0 : allValueLabel.join(','),
-      placement: "bottom",
+      placement: "top",
       getTooltipContainer: function getTooltipContainer() {
         var _selectorRef$current4;
 

package/es/Select/demo/single/index.d.ts

@@ -1,2 +1,3 @@
+import './index.less';
 declare const _default: () => JSX.Element;
 export default _default;

package/es/Select/demo/single/index.js

@@ -13,6 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from "react"; // import { Select } from '@aloudata/aloudata-design';
 
 import Select from '../../index';
+import './index.less';
 var Option = Select.Option;
 export default (function () {
   var _React$useState = React.useState(''),
@@ -55,7 +56,9 @@ export default (function () {
     value: "f"
   }, "f"), /*#__PURE__*/React.createElement(Option, {
     key: "g",
-    value: "g"
+    title: "gg",
+    value: "g",
+    tooltip: "a"
   }, "g")), /*#__PURE__*/React.createElement(Select, {
     className: 'ald-select',
     style: {

package/es/Select/demo/single/index.less

@@ -0,0 +1,5 @@
+.ald-select-demo {
+  .ald-select {
+    margin: 0 24px 16px 0;
+  }
+}

package/es/Select/interface.d.ts

@@ -8,7 +8,7 @@ export interface IOption {
     /**
      列表单项主要文字
      */
-    label: string | React.ReactNode;
+    label?: string | React.ReactNode;
     /**
         作为列表的 `key` 来使用
      */
@@ -16,7 +16,6 @@ export interface IOption {
     /**
         列表次要文字
      */
-    description?: string;
     /**
         是否禁用
      */

package/es/Select/style/index.less

@@ -130,7 +130,8 @@
     // box-shadow: 0 0 6px 0 @color-box-shadow-focused;
 
     .@{select-prefix-cls-legacy} {
-      &-item-all {
+      &-item-all,
+      &-item {
         opacity: 0.5;
       }
     }
@@ -352,15 +353,6 @@
     }
   }
 
-  &-single,
-  &-focused {
-    .@{select-prefix-cls-legacy} {
-      &-item {
-        opacity: 0.5;
-      }
-    }
-  }
-
   // rc-trigger
   &-dropdown {
     position: absolute;

package/es/Table/demo/basic/createData.d.ts

@@ -0,0 +1,9 @@
+declare function makeData(length: number): {
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    progress: number;
+    status: string;
+}[];
+export { makeData };

package/es/Table/demo/basic/createData.js

@@ -0,0 +1,18 @@
+function makeData(length) {
+  var data = [];
+
+  for (var i = 0; i < length; i++) {
+    data.push({
+      firstName: 'supermarket',
+      lastName: 'charity',
+      age: i + 1,
+      visits: 47,
+      progress: 41,
+      status: 'relationship'
+    });
+  }
+
+  return data;
+}
+
+export { makeData };

package/es/Table/demo/basic/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/basic/index.js

@@ -0,0 +1,64 @@
+import "antd/es/radio/style";
+import _Radio from "antd/es/radio";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { Table } from '@aloudata/aloudata-design';
+import { makeData } from './createData';
+// import Table from '../../Example'
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+export default (function () {
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrollY = _React$useState2[0],
+      setScrollY = _React$useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setScrollY(e.target.value);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(_Radio.Group, {
+    value: scrollY,
+    onChange: handleChange
+  }, /*#__PURE__*/React.createElement(_Radio.Button, {
+    value: 0
+  }, "\u65E0\u6EDA\u52A8"), /*#__PURE__*/React.createElement(_Radio.Button, {
+    value: 200
+  }, "\u5185\u90E8\u6EDA\u52A8")), /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    scrollY: scrollY,
+    data: makeData(10)
+  }));
+});

package/es/Table/demo/editCell/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/editCell/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Table } from '@aloudata/aloudata-design';
+import { makeData } from '../basic/createData'; // import Table from '../../Example'
+
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress',
+  Cell: function Cell(row) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: 'red'
+      }
+    }, "\u8FDB\u5EA6\uFF1A", row.progress);
+  }
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    data: makeData(10)
+  }));
+});

package/es/Table/demo/renderHeaderRight/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/renderHeaderRight/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Table, Input } from '@aloudata/aloudata-design';
+import { makeData } from '../basic/createData'; // import Table from '../../Example'
+
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    data: makeData(10),
+    renderHeaderRight: function renderHeaderRight() {
+      return /*#__PURE__*/React.createElement(Input, {
+        placeholder: "\u8BF7\u8F93\u5165"
+      });
+    }
+  }));
+});

package/es/Table/demo/rowSelect/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/Table/demo/rowSelect/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Table, Input } from '@aloudata/aloudata-design';
+import { makeData } from '../basic/createData'; // import Table from '../../Example'
+
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    onRowSelected: function onRowSelected(record) {
+      console.log(record);
+    },
+    data: makeData(10),
+    renderHeaderRight: function renderHeaderRight() {
+      return /*#__PURE__*/React.createElement(Input, {
+        placeholder: "\u8BF7\u8F93\u5165"
+      });
+    }
+  }));
+});

package/es/Table/demo/virtualList/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;