th-design 1.0.0

package/dist/esm/components/ThTable/typing.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import type { ProTableProps, RequestData } from '@ant-design/pro-table';
+import type { ButtonProps } from 'antd/es/button';
+import type { SortOrder } from 'antd/es/table/interface';
+/**
+ * ThTable 组件属性
+ */
+export interface ThTableProps<T extends Record<string, any> = any, U extends Record<string, any> = any, ValueType = 'text'> extends Omit<ProTableProps<T, U, ValueType>, 'headerTitle'> {
+    /**
+     * 获取列表接口数据
+     */
+    request: (params: {
+        pageSize?: number;
+        current?: number;
+        sorter?: Record<string, SortOrder>;
+        filter?: Record<string, (string | number)[] | null>;
+        [key: string]: any;
+    }) => Promise<Partial<RequestData<T>>>;
+    /**
+     * 权限按钮列表,用于配合 btnPermissionCode 校验按钮显示权限
+     * @default []
+     */
+    btnPermissionList?: {
+        code: string;
+    }[];
+    /**
+     * 额外的查询参数，不会显示在搜索表单中
+     */
+    hideSearch?: Record<string, any>;
+    /**
+     * 横向滚动的宽度
+     */
+    scrollX?: string;
+    /**
+     * table 容器样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 其余高度偏移量
+     * @default 0
+     */
+    otherHeight?: number;
+    /**
+     * 操作栏按钮集
+     * @default []
+     */
+    headerOperation?: IHeaderOperationItem[];
+    /**
+     * 自定义入参格式化,在请求发送前格式化参数
+     */
+    requestFormatter?: (params: any, sorter: any, filter: any) => Promise<Partial<RequestData<T>>>;
+}
+export interface IHeaderOperationItem extends ButtonProps {
+    name: string;
+    key: string;
+    btnPermissionCode?: string;
+    btnRender?: React.ReactNode;
+    buttonRender?: () => React.ReactNode;
+}

package/dist/esm/components/ThTable/typing.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ThTable/utils.d.ts

@@ -0,0 +1,12 @@
+export declare const hasBtnPermission: (btnList: any, code: any) => boolean;
+export declare const createUuid: () => any;
+/**
+ * 辅助函数：用于获取用户传入的column
+ * @param:{key,columns}
+ * */
+export declare const getColumnByKey: (key: any, columns: any) => any;
+/**
+ * 用于转换查询条件、符合后台接受数据格式
+ * @params
+ */
+export declare const formatterQueryParams: (queryParams: any, hideSearch: any, columns: any) => any;

package/dist/esm/components/ThTable/utils.js

@@ -0,0 +1,108 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+//判断是否有当前按钮权限
+export var hasBtnPermission = function hasBtnPermission() {
+  var btnList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var code = arguments.length > 1 ? arguments[1] : undefined;
+  var btnMap = Boolean(btnList) && btnList != 'null' && btnList != 'undefined' ? btnList : [];
+  return btnMap.filter(function (item) {
+    return item.code == code;
+  }).length == 0 ? false : true;
+  // return true
+};
+
+/*
+ *生成uuid
+ */
+export var createUuid = function createUuid() {
+  var s = [];
+  var hexDigits = '0123456789abcdef';
+  for (var i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
+  s[19] = hexDigits.substr(s[19] & 0x3 | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+  s[8] = s[13] = s[18] = s[23] = '-';
+  var uuid = s.join('');
+  return uuid;
+};
+
+/*
+ *辅助对象，用于储存默认格式opt
+ */
+var defaultOptObject = {
+  text: 'like',
+  //文本框
+  select: 'eq',
+  //下拉框
+  radio: 'eq',
+  radioButton: 'eq',
+  //radio按钮
+  checkbox: 'in',
+  //复选框
+  treeSelect: 'eq',
+  //树形下拉框
+  dateTime: 'eq',
+  //带时间日期
+  date: 'eq',
+  //不带时间日期
+  dateRange: 'between',
+  dateTimeRange: 'between',
+  money: 'eq',
+  //钱
+  digit: 'eq',
+  //数字
+  percent: 'eq' //百分比
+};
+/**
+ * 辅助函数：用于获取用户传入的column
+ * @param:{key,columns}
+ * */
+export var getColumnByKey = function getColumnByKey(key, columns) {
+  var column = columns.filter(function (i) {
+    return key == i.dataIndex;
+  });
+  return column[0] || {};
+};
+
+/**
+ * 用于转换查询条件、符合后台接受数据格式
+ * @params
+ */
+export var formatterQueryParams = function formatterQueryParams(queryParams, hideSearch, columns) {
+  var params = {};
+  //先遍历隐藏查询条件
+  Object.keys(hideSearch).forEach(function (key) {
+    queryParams[key] = hideSearch[key].values;
+  });
+  //遍历所有有值的查询条件
+  Object.keys(queryParams).forEach(function (key) {
+    if (queryParams[key] && queryParams[key] != '') {
+      var column = getColumnByKey(key, columns);
+      if (column.search) {
+        //搜索列表中存在项
+        var valueType = column.valueType || 'text';
+        //做三重兼容，优先级 用户传入>默认>容错，
+        var opt = column.opt || defaultOptObject[valueType] || 'like';
+        params[key] = {
+          opt: opt,
+          values: _typeof(queryParams[key]) == 'object' ? _toConsumableArray(queryParams[key]) : [queryParams[key]]
+        };
+      } else {
+        var _hideSearch$key;
+        //隐藏项传来的值
+        var _opt = ((_hideSearch$key = hideSearch[key]) === null || _hideSearch$key === void 0 ? void 0 : _hideSearch$key.opt) || 'eq';
+        params[key] = {
+          opt: _opt,
+          values: _typeof(queryParams[key]) == 'object' ? _toConsumableArray(queryParams[key]) : [queryParams[key]]
+        };
+      }
+    }
+  });
+  return params;
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThSelect } from './components/ThSelect';
+export { default as ThTable } from './components/ThTable';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { default as ThSelect } from "./components/ThSelect";
+export { default as ThTable } from "./components/ThTable";

package/dist/esm/typings.d.ts

@@ -0,0 +1,20 @@
+declare module 'slash2';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';
+declare module 'omit.js';
+declare module 'numeral';
+declare module 'mockjs';
+declare module 'react-fittext';
+declare module '*.css';
+declare module '*.less';
+
+declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;

package/package.json

@@ -0,0 +1,75 @@
+{
+  "private": false,
+  "name": "th-design",
+  "version": "1.0.0",
+  "description": "tellhow component library",
+  "author": "luohq",
+  "keywords": [
+    "tellhow",
+    "React",
+    "Component"
+  ],
+  "scripts": {
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "dist/esm/index.js",
+  "typings": "dist/esm/index.d.ts",
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "slideEffects": false,
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@umijs/max": "^4.6.15",
+    "ahooks": "^3.9.6",
+    "antd": "5.29.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "antd": ">=5.29.3"
+},
+  "devDependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-table": "^3.0.10",
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^13.0.0",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-resizable": "^3.0.3",
+    "@umijs/fabric": "^2.8.1",
+    "@umijs/test": "^3.0.5",
+    "babel-plugin-import": "^1.13.5",
+    "classnames": "^2.3.2",
+    "dumi": "^2.4.21",
+    "father": "^4.0.0-rc.2",
+    "gh-pages": "^3.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.1",
+    "react-docgen-typescript": "^2.4.0",
+    "react-resizable": "^3.0.4",
+    "yorkie": "^2.0.0"
+  }
+}