yuand 1.0.0

package/README.md

@@ -0,0 +1,23 @@
+# yu-component
+
+[![NPM version](https://img.shields.io/npm/v/yu-component.svg?style=flat)](https://npmjs.org/package/yu-component)
+[![NPM downloads](http://img.shields.io/npm/dm/yu-component.svg?style=flat)](https://npmjs.org/package/yu-component)
+
+## Install
+
+```bash
+$ npm install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options 
+
+TODO
+
+## LICENSE
+
+MIT

package/es/components/Table/index.d.ts

@@ -0,0 +1,12 @@
+import type { ProTableProps, ProTableConfigOptions } from "./types";
+import "./style.css";
+declare const ProTable: {
+    <T extends Record<string, any>>(props: ProTableProps<T>): import("react/jsx-runtime").JSX.Element;
+    useTable: (options?: import("./types").UseTableProps) => import("./types").TableInstance<any>[];
+    getQuery: ({ page, size, sorter, search, params, }: import("../../utils/table").GetQueryProps) => Record<string, unknown>;
+    formatDate: (key: string, data: Record<string, any>, format?: string) => Record<string, any>;
+    removeEmpty: (data: Record<string, any>) => Record<string, any>;
+    pageSizeOptions: number[];
+    config(options: ProTableConfigOptions): void;
+};
+export default ProTable;

package/es/components/Table/index.js

@@ -0,0 +1,326 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["request", "classNames", "styles", "table", "locale", "dataKey", "totalKey", "manual", "nostyle", "columns", "form", "alert", "toolbar", "pageSizeOptions", "pagination", "scroll", "useData"],
+  _excluded2 = ["title", "extra", "right", "formItem", "layout", "items", "reset", "dataForm", "handleValues", "onResetBefore"];
+import { rq } from "../../fetch";
+import { I18nContext, t } from "../TableConfig";
+import { useShallow } from "zustand/react/shallow";
+import { useQueryClient, useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useContext } from "react";
+import { Table, Form, Button, Space } from "antd";
+import { isObject } from "../../utils/util";
+import { getDataSource, getQuery, getTotal, formatDate, removeEmpty } from "../../utils/table";
+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 DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+var ProTable = function ProTable(props) {
+  var _scroll$x, _classNames$root, _classNames$form, _classNames$table;
+  var _props$request = props.request,
+    request = _props$request === void 0 ? {} : _props$request,
+    _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,
+    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,
+    pageSizeOptions = props.pageSizeOptions,
+    pagination = props.pagination,
+    scroll = props.scroll,
+    useData = props.useData,
+    prop = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(I18nContext),
+    lang = _useContext.lang;
+  var formTitle = form.title,
+    formExtra = form.extra,
+    formRight = form.right,
+    formItem = form.formItem,
+    _form$layout = form.layout,
+    layout = _form$layout === void 0 ? "inline" : _form$layout,
+    items = form.items,
+    formReset = form.reset,
+    dataForm = form.dataForm,
+    formHandleValues = form.handleValues,
+    formOnResetBefore = form.onResetBefore,
+    otherFormProps = _objectWithoutProperties(form, _excluded2);
+  var forceKey = useRef(0);
+  var formItems = formItem || items;
+  var queryClient = useQueryClient();
+  var _table$useStore = table.useStore(useShallow(function (state) {
+      return {
+        page: state.page,
+        size: state.size,
+        sorter: state.sorter,
+        search: state.search,
+        ready: state.ready,
+        setState: state.setState
+      };
+    })),
+    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 queryKey = useMemo(function () {
+    return [request.url, ProTable.getQuery({
+      page: page,
+      size: size,
+      sorter: sorter,
+      search: search,
+      params: request.params
+    }), forceKey.current];
+  }, [request, page, size, sorter, search]);
+  var _useQuery = useQuery({
+      queryKey: queryKey,
+      queryFn: function () {
+        var _queryFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+          var _request$onBefore, _request$method;
+          var queryKey, _ref2, _ref3, url, json, lowerMethod;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                queryKey = _ref.queryKey;
+                if (request.url) {
+                  _context.next = 3;
+                  break;
+                }
+                return _context.abrupt("return", Promise.resolve({}));
+              case 3:
+                (_request$onBefore = request.onBefore) === null || _request$onBefore === void 0 || _request$onBefore.call(request);
+                _ref2 = queryKey, _ref3 = _slicedToArray(_ref2, 2), url = _ref3[0], json = _ref3[1];
+                lowerMethod = (_request$method = request.method) === null || _request$method === void 0 ? void 0 : _request$method.toLocaleUpperCase();
+                return _context.abrupt("return", rq.request(url, {
+                  method: lowerMethod,
+                  json: json,
+                  onSuccess: request.onSuccess
+                }));
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function queryFn(_x) {
+          return _queryFn.apply(this, arguments);
+        }
+        return queryFn;
+      }(),
+      enabled: ready
+    }),
+    _useQuery$data = _useQuery.data,
+    data = _useQuery$data === void 0 ? {} : _useQuery$data,
+    isLoading = _useQuery.isLoading,
+    refetch = _useQuery.refetch;
+  useEffect(function () {
+    if (useData) {
+      setState({
+        data: data
+      });
+    }
+  }, [data]);
+  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: (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || ProTable.pageSizeOptions[0],
+      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();
+      }
+    }
+  };
+  useEffect(function () {
+    if (table) {
+      table.run = onSearch;
+      table.queryKey = queryKey;
+      table.clear = function () {
+        return queryClient.setQueryData(queryKey, {});
+      };
+      table.refresh = refetch;
+      table.reset = function () {
+        if (formItems) {
+          onReset();
+        }
+      };
+    }
+  }, [table, queryKey]);
+  useEffect(function () {
+    if (manual) return;
+    if (formItems) {
+      table.form.submit();
+    } else {
+      setState({
+        ready: true
+      });
+    }
+  }, []);
+  useEffect(function () {
+    return function () {
+      table.resetStore();
+    };
+  }, [table]);
+  var onFinish = useCallback(function (values) {
+    if (formHandleValues) {
+      values = formHandleValues(values);
+    }
+    if (!values) return;
+    //更新 queryKey, userquery force refetch
+    forceKey.current += 1;
+    setState({
+      page: 1,
+      search: values,
+      ready: true
+    });
+  }, []);
+  var tableChange = useCallback(function (pagination, sorter) {
+    setState({
+      page: pagination.current,
+      size: pagination.pageSize,
+      sorter: sorter,
+      ready: true
+    });
+  }, []);
+  var x = (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$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: isLoading,
+      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 || ProTable.pageSizeOptions,
+        total: total,
+        showTotal: function showTotal(total) {
+          return "".concat(t("共", lang), " ").concat(total, " ").concat(t("条记录", lang));
+        }
+      },
+      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: layout,
+        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: isLoading,
+              htmlType: "submit",
+              children: t("搜索", lang)
+            }), /*#__PURE__*/_jsx(Button, {
+              onClick: onReset,
+              disabled: isLoading,
+              children: t("重置", lang)
+            }), 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 = getQuery;
+ProTable.formatDate = formatDate;
+ProTable.removeEmpty = removeEmpty;
+ProTable.pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
+
+//自定义配置参数组合方式.  默认提供 page,size，orderField，isAsc，...params,...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/Table/style.css

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

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

@@ -0,0 +1,101 @@
+/// <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>;
+    queryKey: any[];
+    run: () => void;
+    clear: () => void;
+    refresh: () => void;
+    reset: () => void;
+    sortOrder: (key: string) => any;
+    update: () => void;
+    resetStore: () => void;
+    form?: FormInstance;
+}
+interface FormOptions extends Omit<FormProps, "form" | "title" | "children"> {
+    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;
+    };
+    /** API 请求配置 */
+    request: {
+        /** 请求地址方法 */
+        url?: string;
+        method?: HttpMethod;
+        /** 请求参数 */
+        params?: Record<string, any>;
+        onBefore?: () => any;
+        onSuccess?: (data: any) => any;
+    };
+    url: string;
+    table: TableInstance<Tdata> | null;
+    locale?: Record<string, any>;
+    dataKey?: string;
+    totalKey?: string;
+    manual?: boolean;
+    nostyle?: boolean;
+    params?: RecordType;
+    columns: ((data: Tdata) => TableColumnType<unknown>[]) | TableColumnType<unknown>[];
+    form?: FormOptions;
+    alert?: React.ReactNode | ((data: Tdata) => React.ReactNode);
+    toolbar?: React.ReactNode;
+    pageSizeOptions?: number[];
+    onBefore?: () => void;
+    onSuccess?: (data: Tdata) => any;
+    pagination?: {
+        showQuickJumper?: boolean;
+        showSizeChanger?: boolean;
+        hideOnSinglePage?: boolean;
+    };
+    loadingDelay?: number;
+    method?: HttpMethod;
+    useData?: boolean;
+}
+export interface UseTableProps {
+    page?: number;
+    size?: number;
+    sorter?: SorterType;
+}
+export interface ProTableConfigOptions {
+    getQuery?: (data: GetQueryProps) => Record<string, unknown>;
+    pageSizeOptions?: number[];
+}
+export {};

package/es/components/Table/types.js

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

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

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

package/es/components/Table/useTable.js

@@ -0,0 +1,76 @@
+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 _options$page, _options$size, _options$sorter;
+    var initState = {
+      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 = options.sorter) !== null && _options$sorter !== void 0 ? _options$sorter : {},
+      search: {},
+      params: {},
+      data: {},
+      ready: false
+    };
+    var useStore = create(function (set) {
+      return _objectSpread(_objectSpread({}, initState), {}, {
+        setState: function setState() {
+          var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          set(values);
+        }
+      });
+    });
+    tableRef.current = {
+      form: form,
+      useStore: useStore,
+      queryKey: [],
+      run: function run() {},
+      clear: function clear() {},
+      refresh: function refresh() {},
+      reset: function reset() {},
+      sortOrder: function sortOrder(key) {
+        var sorter = useStore.getState().sorter;
+        if (sorter && sorter.field === key) {
+          return sorter.order;
+        }
+        return null;
+      },
+      resetStore: function resetStore() {
+        useStore.getState().setState(initState);
+      },
+      update: function update() {
+        return _update(function (v) {
+          return v + 1;
+        });
+      }
+    };
+    useStore.subscribe(function (state, prevState) {
+      var _state$sorter, _prevState$sorter, _state$sorter2, _prevState$sorter2;
+      // 只在排序真正变化时才触发更新
+      var sorterChanged = state.sorter !== prevState.sorter;
+      var orderChanged = ((_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);
+      var fieldChanged = ((_state$sorter2 = state.sorter) === null || _state$sorter2 === void 0 ? void 0 : _state$sorter2.field) !== ((_prevState$sorter2 = prevState.sorter) === null || _prevState$sorter2 === void 0 ? void 0 : _prevState$sorter2.field);
+      if (sorterChanged && (orderChanged || fieldChanged)) {
+        // 创建新的引用以触发使用 tableRef.current 的组件更新
+        tableRef.current = _objectSpread({}, tableRef.current);
+        _update(function (v) {
+          return v + 1;
+        });
+      }
+    });
+  }
+  return [tableRef.current];
+};
+export default useTable;

package/es/components/TableConfig/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface Props {
+    children: React.ReactNode;
+    lang?: Record<string, string>;
+}
+export declare const I18nContext: import("react").Context<{
+    lang?: Record<string, any>;
+}>;
+export declare const t: (key: string, i18n: Record<string, any>) => any;
+export default function TableConfig({ children, lang }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/TableConfig/index.js

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+import zhCN from "../../../lang/zh_CN.json";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var I18nContext = /*#__PURE__*/createContext({});
+export var t = function t(key, i18n) {
+  if (!i18n) return key;
+  return i18n[key] || key;
+};
+export default function TableConfig(_ref) {
+  var children = _ref.children,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? zhCN : _ref$lang;
+  return /*#__PURE__*/_jsx(I18nContext.Provider, {
+    value: {
+      lang: lang
+    },
+    children: children
+  });
+}

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

@@ -0,0 +1,12 @@
+import type { ProTableProps, ProTableConfigOptions } from "./types";
+import "./style.css";
+declare const ProTable: {
+    <T extends Record<string, any>>(props: ProTableProps<T>): import("react/jsx-runtime").JSX.Element;
+    useTable: (options?: import("./types").UseTableProps) => import("./types").TableRef[];
+    getQuery(options: any): Record<string, unknown>;
+    formatDate: (key: string, data: Record<string, any>, format?: string) => Record<string, any>;
+    removeEmpty: (data: Record<string, any>) => Record<string, any>;
+    pageSizeOptions: number[];
+    config(options: ProTableConfigOptions): void;
+};
+export default ProTable;