add: C7N Button

blog/2022-09-14-TypeScript-Challenge/index.md

@@ -374,3 +374,30 @@ const todo: TodoPreview = {
 type MyOmit<T, K extends keyof T> = { [P in keyof T as P extends K ? never : P]: T[P] };
 ```
 </details>
+
+### 7. Readonly 2
+
+实现一个通用MyReadonly2<T, K>，它带有两种类型的参数T和K。 
+
+K指定应设置为只读的属性的子集。
+
+
+例如：
+
+```ts
+interface Todo {
+  title: string
+  description: string
+  completed: boolean
+}
+
+const todo: MyReadonly2<Todo, 'title' | 'description'> = {
+  title: "Hey",
+  description: "foobar",
+  completed: false,
+}
+
+todo.title = "Hello" // Error: cannot reassign a readonly property
+todo.description = "barFoo" // Error: cannot reassign a readonly property
+todo.completed = true // OK
+```

docs/8.c7n/8.2.Modal.md

@@ -4,32 +4,19 @@ sidebar_position: 8
 
 # 8.2. Modal
 
-<intro type="draft" />
+<intro type="draft" /> (此规则针对 aPaaS 项目)
 
-项目上经常会用到弹框操作，`C7N` 提供了 `Modal` 组件，用于快速创建弹框。但是 `Modal`
-组件并不是一个完整的弹框组件，它只是一个弹框的容器，具体的弹框内容需要自己实现。  
-实现弹框的 children 组件时，需要注意以下几点：
+受新的 Hzero 弹框规范规定影响，`ModalProvider` 的 `getContainer` 属性必须传入 `Hzero 标签容器的 Element`，否则弹框会被挂到 `body` 节点上。  
 
-1. 如果需要接收外部 `React Context`，配合 `ModalProvider` 使用。
-2. Hzero 平台弹框遮罩`不能覆盖菜单导航栏`。
+因此，为了完美实现 Tab 内弹框，aPaaS 项目在 apaas 包统一封装了 `LowcodeModalProvider` 组件。
 
-:::caution
+:::tip
 
-受新的 Hzero 弹框规范规定影响，`ModalProvider` 的 `getContainer` 属性必须传入 `Hzero 标签容器的 Element`，否则弹框会被挂到 `body` 节点上。
+`LowcodeModalProvider` 使用方式与普通的 `ModalProvider` 一致。
 
 :::
 
-
-
-
-再结合 aPaaS 项目中对于 Mobx Store 创建的规范，因此规定 `ModalProvider` 的 `getContainer` 的属性参数有两种情况：
-
-**情况一：**
-
-
-
-
-`C7N` 组件提供了 `useModal` 钩子(获取 Modal 实例， 配合 `ModalProvider` 使用时可以传递上下文)，对于打开一个普通弹框的操作，应当使用 `useModal` 返回的 `modal 实例`，调用该实例上的 `open` 方法。例：
+`C7N` 组件提供了 `useModal` 钩子(获取 Modal 实例， 配合 `ModalProvider` 使用时可以传递上下文)，对于打开一个包含 Context 数据传递的弹框的操作，应当使用 `useModal` 返回的 `modal 实例`，调用该实例上的 `open` 方法。例：
 
 ```tsx
 import { Button, Form, useModal } from 'choerodon-ui/pro';
@@ -41,14 +28,11 @@ const App = () => {
     // This will right
     modal.open({
       children: (
-        <Form />
+        <Form /> // Form will get context
       ),
     }), [modal]);
   return <Button onClick={handleOpenModal}>Open Modal</Button>
 }
 ```
 
-
-
-
 <maintainer authors={["hzm"]}/>

docs/8.c7n/8.3.Button.md

@@ -0,0 +1,32 @@
+---
+sidebar_position: 8
+---
+
+# 8.3. Button
+<intro type="must" />  
+
+对于包含`接口请求状态`的按钮，必须把 `loading` 状态传递给 `Button` 组件，以便于在请求过程中禁用按钮。
+
+设置 C7N 组件库的按钮的 `loading` 方式常见有以下两种：
+
+1. 通过 `Button` 组件的 `loading` 属性设置
+2. 通过 `Button` 组件的 `onClick` 属性设置，且 `onClick` 返回一个 `Promise` 对象。若 `Promise` 对象处于 `pending` 状态，则按钮就处于 `loading` 状态。 
+
+例：
+``` tsx
+function App() {
+  const handleClick = React.useCallback(() => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 2000);
+    });
+  }, []);
+
+  return (
+    <Button onClick={handleClick}>
+      Click Me
+    </Button>
+  );
+}
+```

src/theme/Root.tsx

@@ -8,6 +8,7 @@ import '../css/theme.less';
 // Default implementation, that you can customize
 export default function Root({children}) {
   const location = useLocation();
+
   const isShowDocFeedback = () => {
     return location.pathname.includes('apaas-front-doc/docs')
   }