Merge pull request #349 from oceanbase/dengfuping-design

fix(design): Form hideRequiredMark should be priority over ConfigProvider form.requiredMark
oceanbase · Dec 8, 2023 · d39d93c · d39d93c
2 parents 4bfc063 + 7d63d7d
commit d39d93c
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 11 deletions.
diff --git a/packages/design/src/form/__tests__/__snapshots__/index.test.tsx.snap b/packages/design/src/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Drawer Form hideRequiredMark should be priority over ConfigProvider form.requiredMark 1`] = `
+<div
+  class="ant-app"
+>
+  <form
+    class="ant-form ant-form-horizontal ant-form-hide-required-mark"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class="ant-form-item-required"
+            for="name"
+            title="Name"
+          >
+            Name
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                aria-required="true"
+                class="ant-input"
+                id="name"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="address"
+            title="Address"
+          >
+            Address
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="address"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
 exports[`Drawer requiredMark could be changed 1`] = `
 <form
   class="ant-form ant-form-horizontal"

diff --git a/packages/design/src/form/__tests__/index.test.tsx b/packages/design/src/form/__tests__/index.test.tsx
@@ -58,4 +58,17 @@ describe('Drawer', () => {
     expect(container.querySelector('.ant-form-item-optional')).toBeFalsy();
     expect(asFragment().firstChild).toMatchSnapshot();
   });
+
+  it('Form hideRequiredMark should be priority over ConfigProvider form.requiredMark', () => {
+    const { container, asFragment } = render(
+      <ConfigProvider
+        form={{
+          requiredMark: true,
+        }}
+      >
+        <FormTest hideRequiredMark={true} />
+      </ConfigProvider>
+    );
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
 });
diff --git a/packages/design/src/form/demo/hideRequiredMark.tsx b/packages/design/src/form/demo/hideRequiredMark.tsx
@@ -0,0 +1,47 @@
+import { Button, ConfigProvider, Form, Input, message } from '@oceanbase/design';
+import React from 'react';
+
+const onFinish = (values: any) => {
+  message.success('Success');
+  console.log(values);
+};
+
+const onFinishFailed = (errorInfo: any) => {
+  message.error('Failed');
+  console.log(errorInfo);
+};
+
+const App: React.FC = () => (
+  <ConfigProvider
+    form={{
+      requiredMark: true,
+    }}
+  >
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 10 }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      hideRequiredMark={true}
+    >
+      <Form.Item
+        label="Username"
+        name="username"
+        rules={[{ required: true, message: 'Please input your username!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item label="Address" name="address">
+        <Input />
+      </Form.Item>
+      <Form.Item wrapperCol={{ offset: 6, span: 10 }}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/packages/design/src/form/demo/requiredMark-same-with-antd.tsx b/packages/design/src/form/demo/requiredMark-same-with-antd.tsx
@@ -0,0 +1,49 @@
+import { Button, ConfigProvider, Form, Input, message } from '@oceanbase/design';
+import React from 'react';
+
+const onFinish = (values: any) => {
+  message.success('Success');
+  console.log(values);
+};
+
+const onFinishFailed = (errorInfo: any) => {
+  message.error('Failed');
+  console.log(errorInfo);
+};
+
+const App: React.FC = () => (
+  <ConfigProvider
+    form={{
+      // global config
+      requiredMark: true,
+    }}
+  >
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 10 }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      // local config
+      // requiredMark={true}
+    >
+      <Form.Item
+        label="Username"
+        name="username"
+        rules={[{ required: true, message: 'Please input your username!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item label="Address" name="address">
+        <Input />
+      </Form.Item>
+      <Form.Item wrapperCol={{ offset: 6, span: 10 }}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/packages/design/src/form/index.md b/packages/design/src/form/index.md
@@ -14,6 +14,10 @@ nav:
 
 <code src="./demo/basic.tsx" title="基本" description="默认为可选样式"></code>
 
+<code src="./demo/requiredMark-same-with-antd.tsx" title="设置为必选样式" description="可以通过全局或局部设置 `requiredMark`，让必选样式和 `antd` 保持一致"></code>
+
+<code src="./demo/hideRequiredMark.tsx" title="hideRequiredMark" debug></code>
+
 <code src="./demo/form-item-tooltip.tsx" title="配置提示信息"></code>
 
 ## API

diff --git a/packages/design/src/form/index.tsx b/packages/design/src/form/index.tsx
@@ -20,15 +20,21 @@ type CompoundedComponent = React.FC<FormProps> & {
   create: typeof AntForm.create;
 };
 
-const Form: CompoundedComponent = props => {
+const Form: CompoundedComponent = ({ hideRequiredMark, ...restProps }) => {
   const { form: contextForm } = useContext(ConfigProvider.ConfigContext);
   return (
     // @ts-ignore to ignore children type error
     <AntForm
       requiredMark={
-        contextForm?.requiredMark !== undefined ? contextForm?.requiredMark : 'optional'
+        // could remove hideRequiredMark logic after https://github.com/ant-design/ant-design/pull/46299 is published
+        hideRequiredMark
+          ? false
+          : contextForm?.requiredMark !== undefined
+          ? contextForm?.requiredMark
+          : 'optional'
       }
-      {...props}
+      hideRequiredMark={hideRequiredMark}
+      {...restProps}
     />
   );
 };