chore: add prettier ignore and format demo (#27270)

.prettierignore

@@ -1,4 +1,8 @@
+**/*.png
 **/*.svg
+CODEOWNERS
+.dockerignore
+Dockerfile.ui-test
 package.json
 .umi
 .umi-production
@@ -17,6 +21,8 @@ yarn-error.log
 *.snap
 components/*/*.js
 components/*/*.jsx
+components/*/*.md
+docs/**/*.md
 .gitignore
 .npmignore
 .prettierignore

SECURITY.md

@@ -2,8 +2,7 @@
 
 ## Supported Versions
 
-Use this section to tell people about which versions of your project are
+Use this section to tell people about which versions of your project are currently being supported with security updates.
-currently being supported with security updates.
 
 | Version | Supported          |
 | ------- | ------------------ |
@@ -14,6 +13,4 @@ currently being supported with security updates.
 
 Use this section to tell people how to report a vulnerability.
 
-Tell them where to go, how often they can expect to get an update on a
+Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.
-reported vulnerability, what to expect if the vulnerability is accepted or
-declined, etc.

components/calendar/demo/customize-header.md

@@ -57,9 +57,7 @@ ReactDOM.render(
         }
         return (
           <div style={{ padding: 8 }}>
-            <Typography.Title level={4}>
+            <Typography.Title level={4}>Custom header</Typography.Title>
-              Custom header
-            </Typography.Title>
             <Row gutter={8}>
               <Col>
                 <Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>

components/cascader/demo/custom-dropdown.md

@@ -62,11 +62,7 @@ function dropdownRender(menus) {
 }
 
 ReactDOM.render(
-  <Cascader
+  <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />,
-    options={options}
-    dropdownRender={dropdownRender}
-    placeholder="Please select"
-  />,
   mountNode,
 );
 ```

components/comment/demo/list.md

@@ -30,16 +30,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip
+      <Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        title={moment()
+        <span>{moment().subtract(1, 'days').fromNow()}</span>
-          .subtract(1, 'days')
-          .format('YYYY-MM-DD HH:mm:ss')}
-      >
-        <span>
-          {moment()
-            .subtract(1, 'days')
-            .fromNow()}
-        </span>
       </Tooltip>
     ),
   },
@@ -55,16 +47,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip
+      <Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        title={moment()
+        <span>{moment().subtract(2, 'days').fromNow()}</span>
-          .subtract(2, 'days')
-          .format('YYYY-MM-DD HH:mm:ss')}
-      >
-        <span>
-          {moment()
-            .subtract(2, 'days')
-            .fromNow()}
-        </span>
       </Tooltip>
     ),
   },

components/form/demo/control-hooks.md

@@ -35,14 +35,14 @@ const Demo = () => {
 
   const onGenderChange = value => {
     switch (value) {
-      case "male":
+      case 'male':
-        form.setFieldsValue({ note: "Hi, man!" });
+        form.setFieldsValue({ note: 'Hi, man!' });
         return;
-      case "female":
+      case 'female':
-        form.setFieldsValue({ note: "Hi, lady!" });
+        form.setFieldsValue({ note: 'Hi, lady!' });
         return;
-      case "other":
+      case 'other':
-        form.setFieldsValue({ note: "Hi there!" });
+        form.setFieldsValue({ note: 'Hi there!' });
         return;
     }
   };

components/form/demo/register.md

@@ -251,7 +251,10 @@ const RegistrationForm = () => {
         name="agreement"
         valuePropName="checked"
         rules={[
-          { validator:(_, value) => value ? Promise.resolve() : Promise.reject('Should accept agreement') },
+          {
+            validator: (_, value) =>
+              value ? Promise.resolve() : Promise.reject('Should accept agreement'),
+          },
         ]}
         {...tailFormItemLayout}
       >

components/list/demo/grid-test.md

@@ -33,7 +33,7 @@ const data = [
   {
     title: 'Title 5',
   },
-    {
+  {
     title: 'Title 6',
   },
 ];
@@ -57,11 +57,7 @@ ReactDOM.render(
         </>
       )}
     />
-    <List
+    <List grid={{ gutter: 16, column: 4 }} dataSource={data} renderItem={() => <ListItem />} />
-      grid={{ gutter: 16, column: 4 }}
-      dataSource={data}
-      renderItem={() => <ListItem />}
-    />
     <List
       grid={{ gutter: 16, column: 4 }}
       dataSource={data}

components/modal/demo/modal-render.md

@@ -46,9 +46,7 @@ class App extends React.Component {
   render() {
     return (
       <>
-        <Button onClick={this.showModal}>
+        <Button onClick={this.showModal}>Open Draggable Modal</Button>
-          Open Draggable Modal
-        </Button>
         <Modal
           title={
             <div

components/modal/demo/width.md

@@ -38,7 +38,7 @@ const App = () => {
       </Modal>
     </>
   );
-}
+};
 
 ReactDOM.render(<App />, mountNode);
 ```

components/radio/demo/badge.md

@@ -20,15 +20,12 @@ import { Radio, Badge } from 'antd';
 ReactDOM.render(
   <Radio.Group buttonStyle="solid">
     <Badge count={1}>
-      <Radio.Button value={1}>
+      <Radio.Button value={1}>Click Me</Radio.Button>
-        Click Me
-      </Radio.Button>
     </Badge>
     <Badge count={2}>
-      <Radio.Button value={2}>
+      <Radio.Button value={2}>Not Me</Radio.Button>
-        Not Me
-      </Radio.Button>
     </Badge>
-  </Radio.Group>
+  </Radio.Group>,
-, mountNode);
+  mountNode,
+);
 ```

components/time-picker/demo/basic.md

@@ -22,10 +22,7 @@ function onChange(time, timeString) {
 }
 
 ReactDOM.render(
-  <TimePicker
+  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
-    onChange={onChange}
-    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
-  />,
   mountNode,
 );
 ```

components/time-picker/demo/disabled.md

@@ -17,11 +17,5 @@ A disabled state of the `TimePicker`.
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-ReactDOM.render(
+ReactDOM.render(<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, mountNode);
-  <TimePicker
-    defaultValue={moment('12:08:23', 'HH:mm:ss')}
-    disabled
-  />,
-  mountNode,
-);
 ```

components/time-picker/demo/hide-column.md

@@ -19,11 +19,5 @@ import moment from 'moment';
 
 const format = 'HH:mm';
 
-ReactDOM.render(
+ReactDOM.render(<TimePicker defaultValue={moment('12:08', format)} format={format} />, mountNode);
-  <TimePicker
-    defaultValue={moment('12:08', format)}
-    format={format}
-  />,
-  mountNode,
-);
 ```

components/time-picker/demo/value.md

@@ -25,7 +25,7 @@ const Demo = () => {
   };
 
   return <TimePicker value={value} onChange={onChange} />;
-}
+};
 
 ReactDOM.render(<Demo />, mountNode);
 ```

components/tree-select/demo/async.md

@@ -27,9 +27,7 @@ class Demo extends React.Component {
   };
 
   genTreeNode = (parentId, isLeaf = false) => {
-    const random = Math.random()
+    const random = Math.random().toString(36).substring(2, 6);
-      .toString(36)
-      .substring(2, 6);
     return {
       id: random,
       pId: parentId,

components/tree/demo/draggable.md

@@ -71,7 +71,7 @@ class Demo extends React.Component {
           return callback(data[i], i, data);
         }
         if (data[i].children) {
-           loop(data[i].children, key, callback);
+          loop(data[i].children, key, callback);
         }
       }
     };

components/tree/demo/line.md

@@ -70,7 +70,7 @@ const treeData = [
           { title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> },
         ],
       },
-    ]
+    ],
   },
 ];