Fix useModalForm Example v2 (refinedev#620)

landofcoder · Jun 16, 2021 · 8cc06e3 · 8cc06e3
1 parent 79c0ab3
commit 8cc06e3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/documentation/docs/guides-and-concepts/hooks/useModalForm.md b/documentation/docs/guides-and-concepts/hooks/useModalForm.md
@@ -251,9 +251,9 @@ Don't forget to pass the record id to `show` to fetch the record data. This is n
 
 ## Live Codesandbox Example
 
-<iframe src="https://codesandbox.io/embed/refine-use-modal-form-example-qz7no?autoresize=1&fontsize=14&module=%2Fsrc%2Fpages%2Fposts%2Flist.tsx&theme=dark&view=preview"
+ <iframe src="https://codesandbox.io/embed/refine-use-modal-form-example-qbi4m?autoresize=1&fontsize=14&module=%2Fsrc%2Fpages%2Fposts%2Flist.tsx&theme=dark&view=preview"
   style={{width: "100%", height:"80vh", border: "0px", borderRadius: "8px", overflow:"hidden"}}
   title="refine-use-modal-form-example"
   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe>
+ ></iframe>
diff --git a/examples/useModalForm/src/interfaces/index.d.ts b/examples/useModalForm/src/interfaces/index.d.ts
@@ -1,4 +1,5 @@
 export interface IPost {
  id: string;
  title: string;
+ status: "published" | "draft" | "rejected";
 }
diff --git a/examples/useModalForm/src/pages/posts/list.tsx b/examples/useModalForm/src/pages/posts/list.tsx
@@ -102,17 +102,6 @@ export const PostList: React.FC<IResourceComponentsProps> = () => {
  }}
  >
  <Form {...createFormProps} layout="vertical">
- <Form.Item
- label="Title"
- name="title"
- rules={[
- {
- required: true,
- },
- ]}
- >
- <Input />
- </Form.Item>
  <Form.Item
  label="Status"
  name="status"
@@ -139,6 +128,17 @@ export const PostList: React.FC<IResourceComponentsProps> = () => {
  ]}
  />
  </Form.Item>
+ <Form.Item
+ label="Title"
+ name="title"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <Input />
+ </Form.Item>
  </Form>
  </Create>
  </Modal>
@@ -155,17 +155,6 @@ export const PostList: React.FC<IResourceComponentsProps> = () => {
  }}
  >
  <Form {...editFormProps} layout="vertical">
- <Form.Item
- label="Title"
- name="title"
- rules={[
- {
- required: true,
- },
- ]}
- >
- <Input />
- </Form.Item>
  <Form.Item
  label="Status"
  name="status"
@@ -192,6 +181,17 @@ export const PostList: React.FC<IResourceComponentsProps> = () => {
  ]}
  />
  </Form.Item>
+ <Form.Item
+ label="Title"
+ name="title"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <Input />
+ </Form.Item>
  </Form>
  </Edit>
  </Modal>
@@ -210,6 +210,9 @@ export const PostList: React.FC<IResourceComponentsProps> = () => {
  <Title level={5}>Id</Title>
  <Text>{record?.id}</Text>
 
+ <Title level={5}>Status</Title>
+ <Text>{record?.status}</Text>
+
  <Title level={5}>Title</Title>
  <Text>{record?.title}</Text>
  </Show>