Update examples.

eBay · Mar 16, 2024 · 5ca720c · 5ca720c
1 parent 1966467
commit 5ca720c
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 21 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -4,9 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nice Form - meta based form rendering helper</title>
+    <title>Nice Form - meta based form rendering</title>
   </head>
   <body>
-    <div id="root"></div>
+    redirecting to examples...
+    <script>
+      document.location = './antd';
+    </script>
   </body>
 </html>
diff --git a/packages/examples-antd/src/App.css b/packages/examples-antd/src/App.css
@@ -66,6 +66,16 @@
   line-height: 40px;
 }
 
+.app .lib-switch {
+  font-size: 14px;
+  display: block;
+  padding: 5px;
+  width: 90%;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  background-color: transparent;
+}
+
 .app .example-container {
   padding: 40px;
   height: 100vh;

diff --git a/packages/examples-antd/src/App.tsx b/packages/examples-antd/src/App.tsx
@@ -171,7 +171,14 @@ function App() {
     <div className="app">
       <div className="sider">
         <h1>
-          <span className="header-name">Ant.Design</span>
+          <select
+            className="lib-switch"
+            value="antd"
+            onChange={(e) => (document.location = `./${e.target.value}`)}
+          >
+            <option value="antd">Ant.Design</option>
+            <option value="formik">Formik + MUI</option>
+          </select>
           <span className="example-title">Examples</span>
         </h1>
         <ul>

diff --git a/packages/examples-antd/src/examples/ViewEdit.tsx b/packages/examples-antd/src/examples/ViewEdit.tsx
@@ -32,38 +32,30 @@ export default () => {
   const getMeta = () => {
     const meta: AntdNiceFormMeta = {
       columns: 2,
-      disabled: pending,
-      viewMode: viewMode,
-      initialValues: personalInfo,
       fields: [
+        { key: 'firstName', label: ' Name', required: true },
+        { key: 'lastName', label: 'Last Name', required: true },
         {
-          key: 'name.first',
-          name: ['name', 'first'],
-          label: 'First Name',
-          required: true,
-          tooltip: 'hahahah',
+          key: 'gender',
+          label: 'Gender',
+          widget: 'radio-group',
+          options: ['Male', 'Female'],
         },
-        { key: 'name.last', label: 'Last Name', required: true },
-        { key: 'gender', label: 'Gender', widget: 'radio-group', options: ['Male', 'Female'] },
         {
           key: 'dateOfBirth',
           label: 'Date of Birth',
           widget: 'date-picker',
-          viewWidget: DateView,
+          fullWidth: true,
         },
-        { key: 'email', label: 'Email' },
-        { key: 'phone', label: 'Phone' },
-        { key: 'address', label: 'Address', colSpan: 2, clear: 'left' },
-        { key: 'city', label: 'City' },
-        { key: 'zipCode', label: 'Zip Code' },
+        { key: 'address', label: 'Address', colSpan: 2 },
       ],
     };
     return meta;
   };
 
   return (
     <div>
-      <Form layout="horizontal" form={form} onFinish={handleFinish} style={{ width: '800px' }}>
+      <Form layout="horizontal" form={form} onFinish={handleFinish} style={{ width: '600px' }}>
         <h1 style={{ height: '40px', fontSize: '16px', marginTop: '50px', color: '#888' }}>
           Personal Infomation
           {viewMode && (

diff --git a/packages/examples-formik/src/App.css b/packages/examples-formik/src/App.css
@@ -66,6 +66,16 @@
   color: #f90;
 }
 
+.app .lib-switch {
+  font-size: 14px;
+  display: block;
+  padding: 5px;
+  width: 90%;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  background-color: transparent;
+}
+
 .app .sider .social {
   padding-left: 28px;
   margin-top: 20px;

diff --git a/packages/examples-formik/src/App.tsx b/packages/examples-formik/src/App.tsx
@@ -165,7 +165,14 @@ function App() {
     <div className="app">
       <div className="sider">
         <h1>
-          <span className="header-name">Formik + MUI</span>
+          <select
+            className="lib-switch"
+            value="formik"
+            onChange={(e) => (document.location = `./${e.target.value}`)}
+          >
+            <option value="antd">Ant.Design</option>
+            <option value="formik">Formik + MUI</option>
+          </select>
           <span className="example-title">Examples</span>
         </h1>
         <ul>