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

package/lib/Table/react-table-config.d.ts

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  UseSortByState
+} from 'react-table';
+
+declare module 'react-table' {
+  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
+
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+    UseFiltersOptions<D>,
+    UseGlobalFiltersOptions<D>,
+    UseGroupByOptions<D>,
+    UsePaginationOptions<D>,
+    UseResizeColumnsOptions<D>,
+    UseRowSelectOptions<D>,
+    UseRowStateOptions<D>,
+    UseSortByOptions<D>,
+    // note that having Record here allows you to add anything to the options, this matches the spirit of the
+    // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+    // feature set, this is a safe default.
+    Record<string, unknown> {}
+
+  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedHooks<D>,
+    UseGroupByHooks<D>,
+    UseRowSelectHooks<D>,
+    UseSortByHooks<D> {}
+
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderInstanceProps<D>,
+    UseExpandedInstanceProps<D>,
+    UseFiltersInstanceProps<D>,
+    UseGlobalFiltersInstanceProps<D>,
+    UseGroupByInstanceProps<D>,
+    UsePaginationInstanceProps<D>,
+    UseRowSelectInstanceProps<D>,
+    UseRowStateInstanceProps<D>,
+    UseSortByInstanceProps<D> {}
+
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderState<D>,
+    UseExpandedState<D>,
+    UseFiltersState<D>,
+    UseGlobalFiltersState<D>,
+    UseGroupByState<D>,
+    UsePaginationState<D>,
+    UseResizeColumnsState<D>,
+    UseRowSelectState<D>,
+    UseRowStateState<D>,
+    UseSortByState<D> {}
+
+  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnOptions<D>,
+    UseGlobalFiltersColumnOptions<D>,
+    UseGroupByColumnOptions<D>,
+    UseResizeColumnsColumnOptions<D>,
+    UseSortByColumnOptions<D> {}
+
+  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnProps<D>,
+    UseGroupByColumnProps<D>,
+    UseResizeColumnsColumnProps<D>,
+    UseSortByColumnProps<D> {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = unknown>
+    extends UseGroupByCellProps<D>,
+    UseRowStateCellProps<D> {}
+
+  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedRowProps<D>,
+    UseGroupByRowProps<D>,
+    UseRowSelectRowProps<D>,
+    UseRowStateRowProps<D> {}
+}

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

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/lib/Table/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style");
+
+require("./index.less");

package/lib/Table/style/index.less

@@ -0,0 +1,141 @@
+@import '../../style/index.less';
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+@table-row-height:40px;
+.@{ald-prefix}-block-table {
+  overflow: hidden;
+
+  &-thead {
+    .@{ald-prefix}-block-table-cell {
+      position: relative;
+      color: @NL50;
+
+      &-sorting {
+        color: @B40;
+      }
+      // border: 1px solid red;
+
+      .@{ald-prefix}-block-table-bar {
+        display: inline-block;
+        background: blue;
+        width: 1px;
+        height: 12px;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 1;
+        touch-action: none;
+        background-color: @NL95;
+      }
+
+      &:last-child {
+        .@{ald-prefix}-block-table-bar {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &-tbody {
+    overflow: hidden;
+
+    &-scroll {
+      overflow-y: scroll;
+      overflow-y: overlay;
+    }
+    .@{ald-prefix}-block-table-row {
+      &:hover {
+        background-color: @NL97;
+      }
+
+      &-selected {
+        background-color: @BBG97;
+
+        &:hover {
+          background-color: @BBG97;
+        }
+      }
+
+      &:last-of-type {
+        .@{ald-prefix}-block-table-cell {
+          border-bottom: 1px solid transparent;
+        }
+      }
+    }
+  }
+
+  &-row {
+    max-width: 100%;
+  }
+
+  &-cell {
+    padding: 0 12px;
+    height: @table-row-height;
+    line-height: @table-row-height;
+    border-bottom: 1px solid @NL95;
+    text-align: left;
+    color: @NL0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+  }
+
+  &-loading {
+    text-align: center;
+    line-height: @table-row-height;
+    color: @NL80;
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    align-items: center;
+    margin-bottom: 24px;
+
+    &-left {
+      font-weight: 500;
+      font-size: 14px;
+      color: @NL0;
+    }
+
+    &-right {
+      display: flex;
+      height: 28px;
+      align-items: center;
+      font-size: 14px;
+      color: @NL0;
+    }
+  }
+
+  &-list {
+    overflow: overlay !important;
+  }
+
+  &-sortIcon {
+    margin-left: 4px;
+    margin-top: -2px;
+  }
+
+  &-column-resizable {
+    overflow: overlay;
+    .@{ald-prefix}-block-table {
+      &-cell {
+        flex: none;
+      }
+
+      &-thead {
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      &-tbody {
+        overflow: initial;
+      }
+    }
+  }
+}

package/lib/Tooltip/index.d.ts

@@ -58,6 +58,7 @@ export interface ITooltipProps {
      * @default -
      */
     overlayClassName?: string;
+    getTooltipContainer?: (node: HTMLElement) => HTMLElement;
     children?: React.ReactNode;
 }
 export default function Tooltip(props: ITooltipProps): JSX.Element;

package/lib/Tooltip/index.js

@@ -27,6 +27,7 @@ function Tooltip(props) {
       mouseLeaveDelay = props.mouseLeaveDelay,
       getPopupContainer = props.getPopupContainer,
       destroyTooltipOnHide = props.destroyTooltipOnHide,
+      getTooltipContainer = props.getTooltipContainer,
       overlayClassName = props.overlayClassName;
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     title: title,
@@ -39,6 +40,7 @@ function Tooltip(props) {
     mouseEnterDelay: mouseEnterDelay,
     mouseLeaveDelay: mouseLeaveDelay,
     getPopupContainer: getPopupContainer,
-    destroyTooltipOnHide: destroyTooltipOnHide
+    destroyTooltipOnHide: destroyTooltipOnHide,
+    getTooltipContainer: getTooltipContainer
   }, children);
 }

package/lib/index.d.ts

@@ -6,3 +6,6 @@ export { default as Input } from './Input';
 export { default as Tabs } from './Tabs';
 export { default as Tooltip } from './Tooltip';
 export { default as Select } from './Select';
+export { default as Table, } from './Table';
+export type { ISort, TSortOrder, ITableProps, IColumn } from './Table/interface';
+export { default as Navigator } from './Navigator';

package/lib/index.js

@@ -27,12 +27,24 @@ Object.defineProperty(exports, "Menu", {
     return _Menu.default;
   }
 });
+Object.defineProperty(exports, "Navigator", {
+  enumerable: true,
+  get: function get() {
+    return _Navigator.default;
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _Table.default;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
@@ -60,4 +72,8 @@ var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
 var _Select = _interopRequireDefault(require("./Select"));
 
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _Navigator = _interopRequireDefault(require("./Navigator"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/themes/default/index.less

@@ -1,4 +1,4 @@
-@import './themeColor.less';
+@import './themeColor.module.less';
 @font-family:sans-serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol','Noto Color Emoji';
 @ald-prefix: 'ald';
 

package/lib/style/themes/default/themeColor.module.less.d.ts

@@ -0,0 +1,108 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'B10': string;
+  'B20': string;
+  'B30': string;
+  'B40': string;
+  'B50': string;
+  'B60': string;
+  'B70': string;
+  'B80': string;
+  'B90': string;
+  'B95': string;
+  'B98': string;
+  'BBG10': string;
+  'BBG15': string;
+  'BBG20': string;
+  'BBG30': string;
+  'BBG40': string;
+  'BBG50': string;
+  'BBG60': string;
+  'BBG70': string;
+  'BBG80': string;
+  'BBG90': string;
+  'BBG95': string;
+  'BBG97': string;
+  'BBG98': string;
+  'BG0': string;
+  'BG10': string;
+  'BG100': string;
+  'BG20': string;
+  'BG30': string;
+  'BG40': string;
+  'BG50': string;
+  'BG60': string;
+  'BG70': string;
+  'BG80': string;
+  'BG90': string;
+  'BG95': string;
+  'BG97': string;
+  'BLACK': string;
+  'IMAGE_HOLDER': string;
+  'MATE': string;
+  'ND0': string;
+  'ND10': string;
+  'ND20': string;
+  'ND30': string;
+  'ND40': string;
+  'ND50': string;
+  'ND60': string;
+  'ND70': string;
+  'ND80': string;
+  'ND90': string;
+  'ND95': string;
+  'ND97': string;
+  'NL0': string;
+  'NL10': string;
+  'NL20': string;
+  'NL30': string;
+  'NL40': string;
+  'NL50': string;
+  'NL60': string;
+  'NL70': string;
+  'NL80': string;
+  'NL90': string;
+  'NL95': string;
+  'NL97': string;
+  'SA10': string;
+  'SA20': string;
+  'SA30': string;
+  'SA40': string;
+  'SA50': string;
+  'SA60': string;
+  'SA70': string;
+  'SA80': string;
+  'SA90': string;
+  'SA95': string;
+  'SA98': string;
+  'SB10': string;
+  'SB20': string;
+  'SB30': string;
+  'SB40': string;
+  'SB50': string;
+  'SB60': string;
+  'SB70': string;
+  'SB80': string;
+  'SB90': string;
+  'SB95': string;
+  'SB98': string;
+  'SC10': string;
+  'SC20': string;
+  'SC30': string;
+  'SC40': string;
+  'SC50': string;
+  'SC60': string;
+  'SC70': string;
+  'SC80': string;
+  'SC90': string;
+  'SC95': string;
+  'SC98': string;
+  'SHADOW_ACTIONSHEET': string;
+  'SHADOW_CARD': string;
+  'SHADOW_NOTIFICATION': string;
+  'SHADOW_OPTION': string;
+  'WHITE': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.1.0-beta1",
+  "version": "0.2.0-beta.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -13,7 +13,9 @@
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "umi-test",
     "test:coverage": "umi-test --coverage",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "release": "npm publish --access public",
+    "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags"
   },
   "module": "es/index.js",
   "typings": "es/index.d.ts",
@@ -23,6 +25,10 @@
       "pre-commit": "npm run lint && npm run stylelint && npm run test"
     }
   },
+  "files": [
+    "es",
+    "lib"
+  ],
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
@@ -36,7 +42,6 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@types/react-truncate": "^2.3.4",
     "antd": "^4.18.6",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",
@@ -44,8 +49,9 @@
     "rc-overflow": "^1.2.3",
     "rc-trigger": "^5.2.10",
     "rc-virtual-list": "^3.4.2",
-    "react": "^16.12.0 || ^17.0.0",
-    "react-dom": "^16.12.0 || ^17.0.0"
+    "react-table": "^7.7.0",
+    "react-window": "^1.8.6",
+    "react-window-infinite-loader": "^1.0.7"
   },
   "devDependencies": {
     "@aloudata/eslint-config-base": "^0.0.6",
@@ -55,6 +61,10 @@
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.178",
+    "@types/react-table": "^7.7.9",
+    "@types/react-window": "^1.8.5",
+    "@types/react-truncate": "^2.3.4",
+    "@types/react-window-infinite-loader": "^1.0.6",
     "@umijs/fabric": "^2.8.1",
     "@umijs/test": "^3.0.5",
     "babel-plugin-import": "^1.13.3",
@@ -65,16 +75,22 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "father-build": "^1.17.2",
+    "father-build": "^1.21.2",
     "gh-pages": "^3.0.0",
     "husky": "^3.0.9",
     "lint-staged": "^10.0.7",
-    "postcss": "8.4.6",
+    "postcss": "^8.4.7",
+    "postcss-less": "^6.0.0",
     "prettier": "^2.2.1",
     "stylelint": "^14.5.3",
-    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-standard": "^25.0.0",
+    "typescript": "4.1.2",
     "yorkie": "^2.0.0"
   },
+  "peerDependencies": {
+    "react": "^16.12.0 || ^17.0.0",
+    "react-dom": "^16.12.0 || ^17.0.0"
+  },
   "jest": {
     "setupFiles": [
       "./jest/setupTests.js"

package/.editorconfig

@@ -1,16 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab

package/.eslintrc.js

@@ -1,43 +0,0 @@
-module.exports = {
-  extends: [
-    '@aloudata/eslint-config-base'
-  ],
-  parserOptions: {
-    project: './tsconfig.json',
-  },
-  ignorePatterns: [
-    '**/*.less.d.ts',
-    '**/demo/*',
-    "**/iconfont.js",
-    "jest"
-  ],
-  rules: {
-    'react/require-default-props': 'off',
-    'linebreak-style': 'off',
-    curly: ['error', 'all'],
-    'import/extensions': 'off',
-    '@typescript-eslint/type-annotation-spacing': ['error', { after: true }],
-    '@typescript-eslint/no-unsafe-member-access': ['error'],
-    // 'id-length': ['error', { properties: 'never', exceptions: ['i', 'j', 'e', '_'] }],
-    // 'react/jsx-key': ['error'],
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'interface',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^I[A-Z]',
-          match: true
-        }
-      },
-      {
-        selector: 'enum',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^E[A-Z]',
-          match: true
-        }
-      }
-    ],
-  }
-};

package/.fatherrc.ts

@@ -1,16 +0,0 @@
-export default {
-  esm: 'babel', // 通过 babel 编译相关组件即可，而无需打包在一个文件中，实现在使用时可按需加载。
-  cjs: 'babel',
-  // lessInBabelMode: true, // less 转 css
-  // 打包的产物若需引入 antd ，则通过按需加载形式引入。
-  extraBabelPlugins: [
-    [
-      'babel-plugin-import',
-      {
-        libraryName: 'antd',
-        libraryDirectory: 'es',
-        style: true,
-      },
-    ],
-  ],
-}

package/.prettierignore

@@ -1,7 +0,0 @@
-**/*.svg
-**/*.ejs
-**/*.html
-package.json
-.umi
-.umi-production
-.umi-test

package/.prettierrc.js

@@ -1 +0,0 @@
-module.exports = require('@umijs/fabric').prettier;

package/.stylelintrc.json

@@ -1,36 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "ignoreFiles": [
-    "src/style/**/*",
-    "**/*.tsx",
-    "**/*.js",
-    "**/*.ts",
-    "**/*.png",
-    "**/*.css",
-    "**/*.json",
-    "**/*.md",
-    "**/*.ttf",
-    "**/*.woff",
-    "**/*.woff2",
-    "**/*.html"
-  ],
-  "overrides": [{
-    "files": ["**/*.less"],
-    "customSyntax": "postcss-less",
-    "rules": {
-      "no-missing-end-of-source-newline": null,
-      "no-empty-source": null,
-      "selector-pseudo-class-no-unknown": [
-        true,
-        {
-          "ignorePseudoClasses": ["global", "local"]
-        }
-      ],
-      "selector-class-pattern": ["^([a-z][a-zA-Z0-9]+)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*$)$"],
-      "alpha-value-notation": null,
-      "color-function-notation": null,
-      "keyframes-name-pattern": "^[a-z][a-zA-Z0-9]+$",
-      "string-quotes": "single"
-    }
-  }]
-}

package/.umirc.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'dumi';
-export default defineConfig({
-  // mode:'site',
-  title: 'design',
-  logo: 'https://cdn.aloudata.com/source/workstation_test/static/logo.8b20330e.svg',
-  outputPath: 'docs-dist',
-  apiParser:{
-    propFilter:{
-      skipNodeModules: true,
-      skipPropsWithoutDoc:true
-    }
-  }
-  // mode:'site'
-  // more config: https://d.umijs.org/config
-});