@quansitech/antd-admin 1.0.0 → 1.1.0

package/readme.md

@@ -1,128 +1,151 @@
-# Qs-antd-admin
-
-该项目作为qs-cmf的后台前端组件库，基于[ant-design-pro](https://procomponents.ant.design/components)
-
-## 安装
-
-```shell
-npm install @quansitech/antd-admin
-```
-
-## 使用参考
-
-### valueType列表
-
-参考 [ant-design-pro#valueType](https://procomponents.ant.design/components/schema#valuetype-%E5%88%97%E8%A1%A8)
-
-## 自定义组件
-
-对外暴露 [container](./lib/container.ts) 供外部调用
-
-```ts
-import container from "@quansitech/antd-admin/lib/container";
-
-container.register('[组件名]', () => import('[组件路径]'));
-```
-
-### 通用
-
-#### 通用Column Schema
-
-- 组件名前缀：``` Column. ```
-- 用途：表单项组件（非只读模式）、表格列编辑组件、表格搜索项组件
-- 示例：
-
-```tsx
-// [组件.tsx]
-import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/types";
-
-export default function (props: ColumnProps) {
-
-    return <>
-        组件内容
-    </>
-}
-
-// [app.tsx]
-import container from "@quansitech/antd-admin/lib/container";
-
-container.register('Column.组件名', () => import('[组件路径]'));
-```
-
-- 若要补充组件库，请把组件放``` compontents/Column/ ``` 目录下
-
-#### 只读Column Schema
-
-- 组件名前缀：``` Column.Readonly. ```
-- 用途：表单项组件（只读模式）、表格列组件
-- 示例：
-
-```tsx
-// [组件.tsx]
-import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/Readonly/types";
-
-export default function (props: ColumnProps) {
-
-    return <>
-        组件内容
-    </>
-}
-
-// [app.tsx]
-import container from "@quansitech/antd-admin/lib/container";
-
-container.register('Column.Readonly.组件名', () => import('[组件路径]'));
-```
-
-- 若要补充组件库，请把组件放``` compontents/Column/Readonly/ ``` 目录下
-
-### 表格Table
-
-#### 工具栏操作组件
-
-- 组件名前缀：``` Table.Column.Action. ```
-- 示例：
-
-```tsx
-// [组件.tsx]
-
-import {TableActionProps} from "@quansitech/antd-admin/compontents/Table/Action/types";
-
-export default function (props: TableActionProps) {
-    return <Button>{props.title}</Button>
-}
-
-// [app.tsx]
-
-import container from "@quansitech/antd-admin/lib/container";
-
-container.register('Table.Column.Action.组件名', () => import('[组件路径]'));
-
-```
-
-- 若要补充组件库，请把组件放``` compontents/Table/Action/ ``` 目录下
-
-#### 行操作组件
-
-- 组件名前缀：``` Table.Column.Option ```
-- 示例：
-
-```tsx
-// [组件.tsx]
-
-import {TableColumnOptionProps} from "@quansitech/antd-admin/compontents/Table/Column/Option/types";
-
-export default function (props: TableColumnOptionProps) {
-    <a onClick={onClick}>{props.title}</a>
-}
-
-// [app.tsx]
-
-import container from "@quansitech/antd-admin/lib/container";
-
-container.register('Table.Column.Option.组件名', () => import('[组件路径]'));
-
-```
-
-- 若要补充组件库，请把组件放``` compontents/Table/Column/Option/ ``` 目录下
-
+# Qs-antd-admin
+
+该项目作为qs-cmf的后台前端组件库，基于[ant-design-pro](https://procomponents.ant.design/components)
+
+## 安装
+
+```shell
+npm install @quansitech/antd-admin
+```
+
+## 使用参考
+
+### valueType列表
+
+参考 [ant-design-pro#valueType](https://procomponents.ant.design/components/schema#valuetype-%E5%88%97%E8%A1%A8)
+
+## 自定义组件
+
+对外暴露 [container](./lib/container.ts) 供外部调用
+
+```ts
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('[组件名]', () => import('[组件路径]'));
+```
+
+### 通用
+
+#### 通用Column Schema
+
+- 组件名前缀：``` Column. ```
+- 用途：表单项组件（非只读模式）、表格列编辑组件、表格搜索项组件
+- 示例：
+
+```tsx
+// [组件.tsx]
+import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/types";
+
+export default function (props: ColumnProps) {
+
+    return <>
+        组件内容
+    </>
+}
+
+// [app.tsx]
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Column.组件名', () => import('[组件路径]'));
+```
+
+- 若要补充组件库，请把组件放``` compontents/Column/ ``` 目录下
+
+#### 只读Column Schema
+
+- 组件名前缀：``` Column.Readonly. ```
+- 用途：表单项组件（只读模式）、表格列组件
+- 示例：
+
+```tsx
+// [组件.tsx]
+import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/Readonly/types";
+
+export default function (props: ColumnProps) {
+
+    return <>
+        组件内容
+    </>
+}
+
+// [app.tsx]
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Column.Readonly.组件名', () => import('[组件路径]'));
+```
+
+- 若要补充组件库，请把组件放``` compontents/Column/Readonly/ ``` 目录下
+
+### 表格Table
+
+#### 工具栏操作组件
+
+- 组件名前缀：``` Table.Column.Action. ```
+- 示例：
+
+```tsx
+// [组件.tsx]
+
+import {TableActionProps} from "@quansitech/antd-admin/compontents/Table/Action/types";
+
+export default function (props: TableActionProps) {
+    return <Button>{props.title}</Button>
+}
+
+// [app.tsx]
+
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Table.Column.Action.组件名', () => import('[组件路径]'));
+
+```
+
+- 若要补充组件库，请把组件放``` compontents/Table/Action/ ``` 目录下
+
+#### 行操作组件
+
+- 组件名前缀：``` Table.Column.Option ```
+- 示例：
+
+```tsx
+// [组件.tsx]
+
+import {TableColumnOptionProps} from "@quansitech/antd-admin/compontents/Column/Readonly/Action/types";
+
+export default function (props: TableColumnOptionProps) {
+    <a onClick={onClick}>{props.title}</a>
+}
+
+// [app.tsx]
+
+import container from "@quansitech/antd-admin/lib/container";
+
+container.register('Column.Readonly.Action.组件名', () => import('[组件路径]'));
+
+```
+
+- 若要补充组件库，请把组件放``` compontents/Column/Readonly/Action/ ``` 目录下
+
+## 更新日志
+
+### 1.1.0
+
+#### 1.增加composer包注册组件机制
+
+在包的composer.json中添加如下配置
+
+```json5
+{
+    // 省略其它配置
+    "extra": {
+        "qscmf": {
+            "antd-admin": {
+                "component": {
+                    "【container注册位置】": "【目标组件路径】",
+                    "Column.Extra": "resourses/js/Component/Extra.tsx"
+                }
+            }
+        }
+  }
+}
+```

package/components/Column/Readonly/Option.tsx

@@ -1,58 +0,0 @@
-import {Component, lazy, useEffect, useState} from "react";
-import {ReactComponentLike} from "prop-types";
-import container from "../../../lib/container";
-import {Flex} from "antd";
-import {ColumnReadonlyProps} from "./types";
-import {asyncFilter, handleRules} from "../../../lib/helpers";
-import {Rules} from "@rc-component/async-validator/lib/interface";
-import upperFirst from "lodash/upperFirst";
-
-type ComponentType = {
-    component: ReactComponentLike,
-    props: any,
-}
-
-export default ({options, record}: ColumnReadonlyProps & {
-    options?: {
-        type: string,
-        title: string,
-        showRules?: Rules,
-    }[],
-}) => {
-
-    const [Components, setComponents] = useState<ComponentType[]>([]);
-
-    useEffect(() => {
-        if (options) {
-            asyncFilter(options, async (Component) => {
-                if (!Component.showRules) {
-                    return true
-                }
-                return await handleRules(Component.showRules, record)
-            }).then((Components: { type: string }[]) => setComponents(Components.map(a => {
-                const c = `Table.Option.${upperFirst(a.type)}`
-                return {
-                    props: {
-                        ...a,
-                        record,
-                    },
-                    component: lazy(container.get(c)),
-                }
-            })))
-        }
-    }, []);
-
-
-    return <>
-        {
-            <Flex wrap={true}>
-                {
-                    Components.map(Component => {
-                        return <Component.component
-                            key={Component.props.title} {...Component.props}></Component.component>
-                    })
-                }
-            </Flex>
-        }
-    </>
-}