@aientry/ui

v0.2.0

Published

7 months ago

Aientry's reusable React UI component library.

0High
0Medium
0Low

kevinbrother2

react components ui-library tailwindcss shadcn

ui component

how to use

/* app/globals.css */
@import '@aientry/ui/globals';

@layer theme {
  [data-app='my-app'] {
    /* optional overrides */
  }
}

确保在布局根节点上添加 data-ait-theme="default"（或你自定义的主题名）来启用主题变量：

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-ait-theme="default">
      <body data-app="my-app">{children}</body>
    </html>
  )
}

扩展 useDataTable

在 src/components/data-table/use-data-table.ts 添加 dataService 属性

需要实现分页、排序、筛选等功能自动调用接口，方便使用者直接传入接口即可
可以通过 hooks 的 useRequest 来简化实现

type IParams = Record<string, any>;

interface IList<T> {
  total: number
  list: T[]
}

type IListService<R> = (args: IParams) => Promise<IList<R>>;

{
  const { data, loading, error, refresh,... } = useDataTable<TData, TValue>({
    // ...
    // data? : TData[]; // 可选
    dataService: UserService.getUserList; // 可选
    // 或者
    dataService: async (params: IParams) => {
      if (!props.id) return { list: [], total: 0 };
      const data = await UserService.getUserList(params);
      return data;
    }
  })
}

结合 src/components/data-table/data-table-hooks.tsx 能方便的使用，无需再手动处理分页、过滤等数据可以新增一个新的 story 文件来演示，dataService 的使用方式

useTable

结合 src/components/data-table/data-table-hooks.tsx、src/components/data-table/use-data-table.ts 实现一个 useTable 的hooks 组件，封装常用的表格功能


  <DataTableHooks
    // ...
    dataService={async (params: IParams) => {
      if (!props.id) return { list: [], total: 0 };
      const data = await UserService.getUserList(props.id, params);
      forEach(data.list, (item, index) => {
        (item as any).index = index;
      });
      return data as IList<User>;
    }}
  />

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ui component

how to use

扩展 useDataTable

useTable