yuand 1.0.0

package/es/components/TableUseFetch/index.js

@@ -0,0 +1,283 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["classNames", "styles", "table", "locale", "dataKey", "totalKey", "manual", "nostyle", "request", "columns", "form", "alert", "toolbar", "pageSizeOptions", "pagination", "loadingDelay", "scroll"],
+  _excluded2 = ["title", "extra", "right", "formItem", "items", "reset", "dataForm", "handleValues", "onResetBefore"];
+import { useShallow } from "zustand/react/shallow";
+import { useEffect, useMemo } from "react";
+import { Table, Form, Button, Space } from "antd";
+import { getDataSource, getQuery, getTotal, formatDate, removeEmpty } from "../../utils/table";
+import { isObject } from "../../utils/util";
+import useFetch from "../../hooks/useFetch";
+import useX from "../../hooks/useX";
+import useTable from "./useTable";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var defaultClassNames = {
+  root: "main-container",
+  form: "search-form",
+  table: "main-table"
+};
+var defaultStyles = {
+  root: {},
+  form: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  table: {},
+  toolbar: {
+    marginBottom: 15
+  }
+};
+var ProTable = function ProTable(props) {
+  var _classNames$root, _classNames$form, _classNames$table;
+  var _props$classNames = props.classNames,
+    classNames = _props$classNames === void 0 ? defaultClassNames : _props$classNames,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? defaultStyles : _props$styles,
+    table = props.table,
+    locale = props.locale,
+    _props$dataKey = props.dataKey,
+    dataKey = _props$dataKey === void 0 ? "data" : _props$dataKey,
+    _props$totalKey = props.totalKey,
+    totalKey = _props$totalKey === void 0 ? "total" : _props$totalKey,
+    _props$manual = props.manual,
+    manual = _props$manual === void 0 ? false : _props$manual,
+    nostyle = props.nostyle,
+    _props$request = props.request,
+    request = _props$request === void 0 ? {} : _props$request,
+    columns = props.columns,
+    _props$form = props.form,
+    form = _props$form === void 0 ? {} : _props$form,
+    alert = props.alert,
+    _props$toolbar = props.toolbar,
+    toolbar = _props$toolbar === void 0 ? null : _props$toolbar,
+    _props$pageSizeOption = props.pageSizeOptions,
+    pageSizeOptions = _props$pageSizeOption === void 0 ? [10, 20, 50, 100] : _props$pageSizeOption,
+    pagination = props.pagination,
+    _props$loadingDelay = props.loadingDelay,
+    loadingDelay = _props$loadingDelay === void 0 ? 300 : _props$loadingDelay,
+    scroll = props.scroll,
+    prop = _objectWithoutProperties(props, _excluded);
+  var formTitle = form.title,
+    formExtra = form.extra,
+    formRight = form.right,
+    formItem = form.formItem,
+    items = form.items,
+    formReset = form.reset,
+    dataForm = form.dataForm,
+    formHandleValues = form.handleValues,
+    formOnResetBefore = form.onResetBefore,
+    otherFormProps = _objectWithoutProperties(form, _excluded2);
+  var formItems = formItem || items;
+  var _table$useStore = table.useStore(useShallow(function (state) {
+      return {
+        data: state.data,
+        page: state.page,
+        size: state.size,
+        sorter: state.sorter,
+        search: state.search,
+        ready: state.ready,
+        setState: state.setState
+      };
+    })),
+    data = _table$useStore.data,
+    page = _table$useStore.page,
+    size = _table$useStore.size,
+    sorter = _table$useStore.sorter,
+    search = _table$useStore.search,
+    ready = _table$useStore.ready,
+    setState = _table$useStore.setState;
+  var _useFetch = useFetch(request.url, {
+      method: request.method,
+      onBefore: request.onBefore,
+      json: ProTable.getQuery({
+        page: page,
+        size: size,
+        sorter: sorter,
+        search: search,
+        params: request.params
+      }),
+      ready: ready,
+      onFinally: function onFinally() {
+        setState({
+          ready: false
+        });
+      },
+      onSuccess: function onSuccess(data) {
+        setState({
+          data: data
+        });
+      },
+      loadingDelay: loadingDelay
+    }),
+    loading = _useFetch.loading;
+  var _useMemo = useMemo(function () {
+      return {
+        column: typeof columns === "function" ? columns(data) : columns,
+        dataSource: getDataSource(data, dataKey),
+        renderAlert: typeof alert === "function" ? alert(data) : alert,
+        total: getTotal(totalKey, data)
+      };
+    }, [columns, data, dataKey, totalKey]),
+    dataSource = _useMemo.dataSource,
+    total = _useMemo.total,
+    column = _useMemo.column,
+    renderAlert = _useMemo.renderAlert;
+  var onSearch = function onSearch() {
+    if (formItems) {
+      table.form.submit();
+    } else {
+      setState({
+        ready: true
+      });
+    }
+  };
+  var onReset = function onReset() {
+    setState({
+      size: 10,
+      sorter: {}
+    });
+    if (formItems) {
+      if ((formOnResetBefore === null || formOnResetBefore === void 0 ? void 0 : formOnResetBefore()) === false) return;
+      table.form.resetFields();
+      if (formReset === undefined || formReset === true) {
+        table.form.submit();
+      }
+    }
+  };
+  if (table) {
+    table.run = onSearch;
+    table.reset = function () {
+      if (formItems) {
+        onReset();
+      }
+    };
+  }
+  useEffect(function () {
+    if (manual) return;
+    if (formItems) {
+      table.form.submit();
+    } else {
+      setState({
+        ready: true
+      });
+    }
+  }, [table]);
+  var onFinish = function onFinish(values) {
+    if (formHandleValues) {
+      values = formHandleValues(values);
+    }
+    if (!values) return;
+    setState({
+      page: 1,
+      search: values,
+      ready: true
+    });
+  };
+  var tableChange = function tableChange(pagination, sorter) {
+    setState({
+      page: pagination.current,
+      size: pagination.pageSize,
+      sorter: sorter,
+      ready: true
+    });
+  };
+  var x = useX(column);
+  var y = scroll === null || scroll === void 0 ? void 0 : scroll.y;
+  var renderTable = function renderTable() {
+    return /*#__PURE__*/_jsx(Table, _objectSpread({
+      columns: column,
+      loading: loading,
+      scroll: {
+        x: x,
+        y: y
+      },
+      locale: locale,
+      onChange: function onChange(p, _, sorter) {
+        return tableChange(p, sorter);
+      },
+      pagination: {
+        current: page,
+        pageSize: size,
+        showQuickJumper: pagination ? pagination.showQuickJumper : true,
+        showSizeChanger: pagination ? pagination.showSizeChanger : true,
+        hideOnSinglePage: pagination ? pagination.hideOnSinglePage : false,
+        pageSizeOptions: pageSizeOptions,
+        total: total,
+        showTotal: function showTotal(total) {
+          return "\u5171 ".concat(total, " \u6761\u8BB0\u5F55");
+        }
+      },
+      dataSource: dataSource
+    }, prop));
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: (_classNames$root = classNames === null || classNames === void 0 ? void 0 : classNames.root) !== null && _classNames$root !== void 0 ? _classNames$root : defaultClassNames.root,
+    style: styles.root,
+    children: [!!formItems && /*#__PURE__*/_jsxs("div", {
+      className: (_classNames$form = classNames === null || classNames === void 0 ? void 0 : classNames.form) !== null && _classNames$form !== void 0 ? _classNames$form : defaultClassNames.form,
+      style: styles.form,
+      children: [/*#__PURE__*/_jsxs(Form, _objectSpread(_objectSpread({
+        form: table.form,
+        layout: "inline",
+        onFinish: onFinish
+      }, otherFormProps), {}, {
+        children: [formTitle && /*#__PURE__*/_jsx(Form.Item, {
+          children: formTitle
+        }), formItems, /*#__PURE__*/_jsx(Form.Item, {
+          children: /*#__PURE__*/_jsxs(Space, {
+            children: [/*#__PURE__*/_jsx(Button, {
+              type: "primary",
+              loading: loading,
+              htmlType: "submit",
+              children: "\u67E5\u8BE2"
+            }), /*#__PURE__*/_jsx(Button, {
+              onClick: onReset,
+              disabled: loading,
+              children: "\u91CD\u7F6E"
+            }), formExtra]
+          })
+        })]
+      })), formRight]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: (_classNames$table = classNames === null || classNames === void 0 ? void 0 : classNames.table) !== null && _classNames$table !== void 0 ? _classNames$table : defaultClassNames.table,
+      style: styles.table,
+      children: [toolbar && /*#__PURE__*/_jsx("div", {
+        style: styles.toolbar,
+        children: toolbar
+      }), renderAlert, !!dataForm ? /*#__PURE__*/_jsx(Form, _objectSpread(_objectSpread({}, dataForm), {}, {
+        children: renderTable()
+      })) : renderTable()]
+    })]
+  });
+};
+ProTable.useTable = useTable;
+ProTable.getQuery = function (options) {
+  var page = options.page,
+    size = options.size,
+    sorter = options.sorter,
+    search = options.search,
+    params = options.params;
+  return getQuery({
+    page: page,
+    size: size,
+    sorter: sorter,
+    search: search,
+    params: params
+  });
+};
+ProTable.formatDate = formatDate;
+ProTable.removeEmpty = removeEmpty;
+ProTable.pageSizeOptions = [10, 20, 50, 100];
+//自定义配置参数组合方式.  默认提供 page,size，orderField，isAsc，...urlParams,...search
+ProTable.config = function (options) {
+  if (!options || !isObject(options)) return;
+  if (options.getQuery) {
+    ProTable.getQuery = options.getQuery;
+  }
+  if (options.pageSizeOptions) {
+    ProTable.pageSizeOptions = options.pageSizeOptions;
+  }
+};
+export default ProTable;

package/es/components/TableUseFetch/style.css

@@ -0,0 +1,3 @@
+.search-form .ant-form-item {
+    margin-bottom: 20px!important;
+}

package/es/components/TableUseFetch/types.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="react" />
+import type { FormInstance, TableColumnType, TableProps, FormProps } from "antd";
+import type { HttpMethod } from "../../fetch";
+import type { UseBoundStore, StoreApi } from "zustand";
+import type { GetQueryProps } from "../../utils/table";
+type RecordType = Record<string, any>;
+interface SorterType {
+    field?: string;
+    order?: "ascend" | "descend";
+}
+export interface TableState<TData = any> {
+    page: number;
+    size: number;
+    sorter: SorterType;
+    data: TData;
+    search: RecordType | null | undefined;
+    params: any[] | Record<string, any> | null | undefined;
+    setState: (values: Partial<TableState>) => void;
+    ready: boolean;
+}
+type UseStoreType<TData> = UseBoundStore<StoreApi<TableState<TData>>>;
+export interface TableInstance<TData = any> {
+    useStore: UseStoreType<TData>;
+    run: () => void;
+    clear: () => void;
+    refresh: () => void;
+    reset: () => void;
+    sortOrder: (key: string) => any;
+    update: () => void;
+    form?: FormInstance;
+}
+interface FormOptions extends Omit<FormProps, "form" | "title"> {
+    title?: React.ReactNode;
+    /** @deprecated 此属性已废弃，请使用新的formItem属性代替 */
+    items?: React.ReactNode | React.ReactNode[];
+    formItem?: React.ReactNode | React.ReactNode[];
+    extra?: React.ReactNode;
+    right?: React.ReactNode;
+    handleValues?: (values: Record<string, any>) => any;
+    reset?: boolean;
+    onResetBefore?: () => void | boolean;
+    dataForm?: FormProps;
+}
+export interface ProTableProps<Tdata = any> extends Omit<TableProps<Tdata>, "columns"> {
+    classNames?: {
+        root?: string;
+        form?: string;
+        table?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        form?: React.CSSProperties;
+        table?: React.CSSProperties;
+        toolbar?: React.CSSProperties;
+    };
+    request?: {
+        url?: string;
+        method?: HttpMethod;
+        params?: RecordType;
+        onBefore?: () => any;
+        onSuccess?: (data: Tdata) => any;
+    };
+    table: TableInstance<Tdata> | null;
+    locale?: Record<string, any>;
+    dataKey?: string;
+    totalKey?: string;
+    manual?: boolean;
+    nostyle?: boolean;
+    columns: ((data: Tdata) => TableColumnType<unknown>[]) | TableColumnType<unknown>[];
+    form?: FormOptions;
+    alert?: React.ReactNode | ((data: Tdata) => React.ReactNode);
+    toolbar?: React.ReactNode;
+    pageSizeOptions?: number[];
+    pagination?: {
+        showQuickJumper?: boolean;
+        showSizeChanger?: boolean;
+        hideOnSinglePage?: boolean;
+    };
+    loadingDelay?: number;
+}
+export interface UseTableProps {
+    page?: number;
+    size?: number;
+    sorter?: SorterType;
+}
+export interface TableRef {
+    form: FormInstance;
+    useStore: UseStoreType<any>;
+    run: () => void;
+    clear: () => void;
+    refresh: () => void;
+    reset: () => void;
+    sortOrder: (key: string) => "ascend" | "descend" | null;
+    update: () => void;
+}
+export interface ProTableConfigOptions {
+    getQuery?: (data: GetQueryProps) => Record<string, unknown>;
+    pageSizeOptions?: number[];
+}
+export {};

package/es/components/TableUseFetch/types.js

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

package/es/components/TableUseFetch/useTable.d.ts

@@ -0,0 +1,3 @@
+import type { UseTableProps, TableRef } from "./types";
+declare const useTable: (options?: UseTableProps) => TableRef[];
+export default useTable;

package/es/components/TableUseFetch/useTable.js

@@ -0,0 +1,78 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Form } from "antd";
+import { useRef, useState } from "react";
+import { create } from "zustand";
+var useTable = function useTable() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    _ = _useState2[0],
+    _update = _useState2[1];
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var tableRef = useRef(null);
+  if (!tableRef.current) {
+    var useStore = create(function (set) {
+      var _options$page, _options$size, _options$page2, _options$size2;
+      return {
+        page: (_options$page = options.page) !== null && _options$page !== void 0 ? _options$page : 1,
+        size: (_options$size = options.size) !== null && _options$size !== void 0 ? _options$size : 10,
+        sorter: options.sorter || {},
+        search: {},
+        params: {
+          page: (_options$page2 = options.page) !== null && _options$page2 !== void 0 ? _options$page2 : 1,
+          size: (_options$size2 = options.size) !== null && _options$size2 !== void 0 ? _options$size2 : 10,
+          sorter: options.sorter || {},
+          form: {}
+        },
+        data: {},
+        ready: false,
+        setState: function setState() {
+          var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          set(values);
+        }
+      };
+    });
+    tableRef.current = {
+      form: form,
+      useStore: useStore,
+      run: function run() {},
+      clear: function clear() {
+        useStore.setState({
+          data: {}
+        });
+      },
+      refresh: function refresh() {
+        useStore.setState({
+          ready: true
+        });
+      },
+      reset: function reset() {},
+      sortOrder: function sortOrder(key) {
+        var sorter = useStore.getState().sorter;
+        if (sorter && sorter.field === key) {
+          return sorter.order;
+        }
+        return null;
+      },
+      update: function update() {
+        return _update(function (v) {
+          return v + 1;
+        });
+      }
+    };
+    useStore.subscribe(function (state, prevState) {
+      var _state$sorter, _prevState$sorter;
+      if (state.sorter !== prevState.sorter && ((_state$sorter = state.sorter) === null || _state$sorter === void 0 ? void 0 : _state$sorter.order) !== ((_prevState$sorter = prevState.sorter) === null || _prevState$sorter === void 0 ? void 0 : _prevState$sorter.order)) {
+        tableRef.current = _objectSpread({}, tableRef.current);
+        _update(function (v) {
+          return v + 1;
+        });
+      }
+    });
+  }
+  return [tableRef.current];
+};
+export default useTable;

package/es/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TableConfig } from "./TableConfig";
+export { default as Table } from "./Table";
+export { default as TableUseFetch } from "./TableUseFetch";

package/es/components/index.js

@@ -0,0 +1,3 @@
+export { default as TableConfig } from "./TableConfig";
+export { default as Table } from "./Table";
+export { default as TableUseFetch } from "./TableUseFetch";

package/es/fetch.d.ts

@@ -0,0 +1,137 @@
+export declare const isObject: (oj: unknown) => boolean;
+export declare const isFunction: (oj: unknown) => boolean;
+export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS" | "get" | "post" | "put" | "delete" | "patch" | "head" | "options" | undefined;
+export type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+export type JsonObject = {
+    [key: string]: JsonValue;
+};
+export type JsonArray = JsonValue[];
+export type RequestData = unknown;
+export interface HttpClientConfig {
+    /** 请求的基础 URL */
+    baseUrl?: string;
+    /** 流数据响应头类型关键字 */
+    blobContentTypes?: readonly string[];
+    /** 请求头配置 */
+    headers?: HeadersInit | (() => HeadersInit | Promise<HeadersInit>);
+    /** 响应数据状态码的 key，默认: 'code' */
+    codeKey?: string;
+    /** 响应数据的 data key，默认: 'data' */
+    dataKey?: string;
+    /** 响应消息的 key，默认: 'message' */
+    messageKey?: string;
+    /** 是否默认返回 data 层数据，默认: false */
+    returnData?: boolean;
+    /** 默认请求方法，默认: 'GET' */
+    defaultMethod?: HttpMethod;
+    /** 请求超时时间(ms)，默认: 30000 */
+    timeout?: number;
+    /** 状态码配置 */
+    codes?: {
+        /** 成功状态码列表 */
+        success?: readonly number[];
+        /** 需要登出的状态码列表 */
+        logout?: readonly number[];
+        /** 忽略错误的状态码列表 */
+        ignoreError?: readonly number[];
+    };
+    /** 错误处理回调 */
+    onError?: (error: HttpError) => void | Promise<void>;
+    /** 登出回调 */
+    onLogout?: (error: HttpError) => void | Promise<void>;
+    onSuccess?: (data: any) => void | Promise<void>;
+    /** 请求拦截器 */
+    requestInterceptor?: (url: string, options: RequestInit) => Promise<void> | void;
+    /** 响应拦截器 */
+    responseInterceptor?: <T>(response: HttpResponse<T>) => Promise<HttpResponse<T>> | HttpResponse<T>;
+}
+export interface RequestOptions extends Omit<RequestInit, "body" | "method"> {
+    /** 请求方法 */
+    method?: HttpMethod;
+    /** 请求体数据(对象会自动转为 JSON) */
+    json?: RequestData;
+    /** URL 查询参数 */
+    params?: Record<string, string | number | boolean | null | undefined>;
+    /** 是否忽略当前请求的错误，不触发 onError */
+    ignoreError?: boolean;
+    /** 是否返回 data 层数据 */
+    returnData?: boolean;
+    /** 请求超时时间(ms) */
+    timeout?: number;
+    /** 自定义错误回调(仅本次请求) */
+    onError?: (error: HttpError) => void;
+    /** 自定义登出回调(仅本次请求) */
+    onLogout?: (error: HttpError) => void;
+    /** 自定义成功回调(仅本次请求) */
+    onSuccess?: (data: any) => void;
+}
+export interface HttpResponse<T = any> {
+    [key: string]: any;
+    data?: T;
+}
+export interface BlobResponse {
+    data: Blob;
+    filename?: string;
+    response: Response;
+}
+export declare class HttpError extends Error {
+    code?: number;
+    response?: any;
+    statusCode?: number;
+    constructor(message: string, code?: number, response?: any, statusCode?: number);
+}
+export declare class HttpClient {
+    private configure;
+    constructor(configure?: HttpClientConfig);
+    /**
+     * 更新客户端配置
+     */
+    config(configure: HttpClientConfig): void;
+    get<T = any>(url: string, options?: Omit<RequestOptions, "method">): Promise<T>;
+    post<T = any>(url: string, options?: Omit<RequestOptions, "method">): Promise<T>;
+    put<T = any>(url: string, options?: Omit<RequestOptions, "method">): Promise<T>;
+    delete<T = any>(url: string, options?: Omit<RequestOptions, "method">): Promise<T>;
+    patch<T = any>(url: string, options?: Omit<RequestOptions, "method">): Promise<T>;
+    request<T = any>(url: string, options?: RequestOptions): Promise<T>;
+    /**
+     * 构建完整 URL
+     */
+    private buildUrl;
+    /**
+     * 添加查询参数
+     */
+    private appendParams;
+    /**
+     * 构建请求头
+     */
+    private buildHeaders;
+    /**
+     * 带超时的 fetch 请求
+     */
+    private fetchWithTimeout;
+    /**
+     * 处理响应数据
+     */
+    private handleResponse;
+    /**
+     * 从响应头提取文件名
+     */
+    private extractFilename;
+    /**
+     * 统一错误处理
+     */
+    private handleError;
+}
+/**
+ * 下载文件(用于 Blob 响应)
+ * @example
+ * const response = await http.get('/api/download');
+ * downloadfile(response);
+ */
+export declare function downloadfile(response: BlobResponse | {
+    data: Blob;
+    filename?: string;
+}): void;
+export declare function createHttpClient(config?: HttpClientConfig): HttpClient;
+export declare const rq: HttpClient;
+export default HttpClient;