demo: update CP demo (#40358)

components/config-provider/demo/direction.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import {
   DownloadOutlined,
   LeftOutlined,
@@ -24,15 +23,18 @@ import {
   Rate,
   Row,
   Select,
+  Space,
   Steps,
   Switch,
   Tree,
   TreeSelect,
 } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
+import React, { useState } from 'react';
 
 const InputGroup = Input.Group;
 const ButtonGroup = Button.Group;
+
 const { Option } = Select;
 const { TreeNode } = Tree;
 const { Search } = Input;
@@ -87,6 +89,7 @@ const cascaderOptions = [
     ],
   },
 ];
+
 type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 
 const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
@@ -113,7 +116,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
 
   // ==== Cascader ====
   const cascaderFilter = (inputValue: string, path: { label: string }[]) =>
-    path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+    path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
 
   const onCascaderChange = (value: any) => {
     console.log(value);
@@ -136,24 +139,18 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
   };
 
   // ==== End Modal ====
-
   const onStepsChange = (newCurrentStep: number) => {
     console.log('onChange:', newCurrentStep);
     setCurrentStep(newCurrentStep);
   };
 
   // ==== Badge ====
-
   const increaseBadge = () => {
     setBadgeCount(badgeCount + 1);
   };
 
   const declineBadge = () => {
-    let newBadgeCount = badgeCount - 1;
-    if (newBadgeCount < 0) {
-      newBadgeCount = 0;
-    }
-    setBadgeCount(newBadgeCount);
+    setBadgeCount((prev) => (prev - 1 < 0 ? 0 : prev - 1));
   };
 
   const onChangeBadge = (checked: boolean) => {
@@ -173,7 +170,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
             placeholder="یک مورد انتخاب کنید"
             popupPlacement={popupPlacement}
           />
-          &nbsp;&nbsp;&nbsp;&nbsp; With search:
+          &nbsp;&nbsp;&nbsp;&nbsp;With search:&nbsp;&nbsp;
           <Cascader
             suffixIcon={<SmileOutlined />}
             options={cascaderOptions}
@@ -197,7 +194,6 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
         </Col>
         <Col span={12}>
           <Divider orientation="left">Radio Group example</Divider>
-
           <Radio.Group defaultValue="c" buttonStyle="solid">
             <Radio.Button value="a">تهران</Radio.Button>
             <Radio.Button value="b" disabled>
@@ -301,159 +297,148 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
           <Row>
             <Col span={12}>
               <Divider orientation="left">Select example</Divider>
-              <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
-                <Option value="jack">Jack</Option>
-                <Option value="مورچه">مورچه</Option>
-                <Option value="disabled" disabled>
-                  Disabled
-                </Option>
-                <Option value="Yiminghe">yiminghe</Option>
-              </Select>
-              <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
-                <Option value="مورچه">مورچه</Option>
-              </Select>
-              <Select defaultValue="مورچه" style={{ width: 120 }} loading>
-                <Option value="مورچه">مورچه</Option>
-              </Select>
-              <Select
-                showSearch
-                style={{ width: 200 }}
-                placeholder="Select a person"
-                optionFilterProp="children"
-                filterOption={(input, option) =>
-                  option?.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                }
-              >
-                <Option value="jack">Jack</Option>
-                <Option value="سعید">سعید</Option>
-                <Option value="tom">Tom</Option>
-              </Select>
+              <Space wrap>
+                <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
+                  <Option value="jack">Jack</Option>
+                  <Option value="مورچه">مورچه</Option>
+                  <Option value="disabled" disabled>
+                    Disabled
+                  </Option>
+                  <Option value="Yiminghe">yiminghe</Option>
+                </Select>
+                <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
+                  <Option value="مورچه">مورچه</Option>
+                </Select>
+                <Select defaultValue="مورچه" style={{ width: 120 }} loading>
+                  <Option value="مورچه">مورچه</Option>
+                </Select>
+                <Select
+                  showSearch
+                  style={{ width: 200 }}
+                  placeholder="Select a person"
+                  optionFilterProp="children"
+                  filterOption={(input, option) =>
+                    option?.props.children.toLowerCase().includes(input.toLowerCase())
+                  }
+                >
+                  <Option value="jack">Jack</Option>
+                  <Option value="سعید">سعید</Option>
+                  <Option value="tom">Tom</Option>
+                </Select>
+              </Space>
             </Col>
             <Col span={12}>
               <Divider orientation="left">TreeSelect example</Divider>
-              <div>
-                <TreeSelect
-                  showSearch
-                  style={{ width: '100%' }}
-                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                  placeholder="Please select"
-                  allowClear
-                  treeDefaultExpandAll
-                >
-                  <TreeNode title="parent 1" key="0-1">
-                    <TreeNode title="parent 1-0" key="0-1-1">
-                      <TreeNode title="my leaf" key="random" />
-                      <TreeNode title="your leaf" key="random1" />
-                    </TreeNode>
-                    <TreeNode title="parent 1-1" key="random2">
-                      <TreeNode title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
-                    </TreeNode>
+              <TreeSelect
+                showSearch
+                style={{ width: '100%' }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder="Please select"
+                allowClear
+                treeDefaultExpandAll
+              >
+                <TreeNode title="parent 1" key="0-1">
+                  <TreeNode title="parent 1-0" key="0-1-1">
+                    <TreeNode title="my leaf" key="random" />
+                    <TreeNode title="your leaf" key="random1" />
                   </TreeNode>
-                </TreeSelect>
-              </div>
+                  <TreeNode title="parent 1-1" key="random2">
+                    <TreeNode title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
+                  </TreeNode>
+                </TreeNode>
+              </TreeSelect>
             </Col>
           </Row>
           <br />
           <Row>
             <Col span={24}>
               <Divider orientation="left">Modal example</Divider>
-              <div>
-                <Button type="primary" onClick={showModal}>
-                  Open Modal
-                </Button>
-                <Modal title="پنچره ساده" open={modalOpen} onOk={handleOk} onCancel={handleCancel}>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                  <p>نگاشته‌های خود را اینجا قراردهید</p>
-                </Modal>
-              </div>
+              <Button type="primary" onClick={showModal}>
+                Open Modal
+              </Button>
+              <Modal title="پنچره ساده" open={modalOpen} onOk={handleOk} onCancel={handleCancel}>
+                <p>نگاشته‌های خود را اینجا قراردهید</p>
+                <p>نگاشته‌های خود را اینجا قراردهید</p>
+                <p>نگاشته‌های خود را اینجا قراردهید</p>
+              </Modal>
             </Col>
           </Row>
           <br />
           <Row>
             <Col span={24}>
               <Divider orientation="left">Steps example</Divider>
-              <div>
-                <Steps
-                  progressDot
-                  current={currentStep}
-                  items={[
-                    {
-                      title: 'Finished',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'In Progress',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'Waiting',
-                      description: 'This is a description.',
-                    },
-                  ]}
-                />
-                <br />
-                <Steps
-                  current={currentStep}
-                  onChange={onStepsChange}
-                  items={[
-                    {
-                      title: 'Step 1',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'Step 2',
-                      description: 'This is a description.',
-                    },
-                    {
-                      title: 'Step 3',
-                      description: 'This is a description.',
-                    },
-                  ]}
-                />
-              </div>
+              <Steps
+                progressDot
+                current={currentStep}
+                items={[
+                  {
+                    title: 'Finished',
+                    description: 'This is a description.',
+                  },
+                  {
+                    title: 'In Progress',
+                    description: 'This is a description.',
+                  },
+                  {
+                    title: 'Waiting',
+                    description: 'This is a description.',
+                  },
+                ]}
+              />
+              <br />
+              <Steps
+                current={currentStep}
+                onChange={onStepsChange}
+                items={[
+                  {
+                    title: 'Step 1',
+                    description: 'This is a description.',
+                  },
+                  {
+                    title: 'Step 2',
+                    description: 'This is a description.',
+                  },
+                  {
+                    title: 'Step 3',
+                    description: 'This is a description.',
+                  },
+                ]}
+              />
             </Col>
           </Row>
           <br />
           <Row>
             <Col span={12}>
               <Divider orientation="left">Rate example</Divider>
-              <div>
-                <Rate defaultValue={2.5} />
-                <br />
-                <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
-                supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
-                implement rtl support.
-              </div>
+              <Rate defaultValue={2.5} />
+              <br />
+              <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
+              supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
+              implement rtl support.
             </Col>
             <Col span={12}>
               <Divider orientation="left">Badge example</Divider>
-              <div>
-                <div>
-                  <Badge count={badgeCount}>
-                    <a href="#" className="head-example" />
-                  </Badge>
-                  <ButtonGroup>
-                    <Button onClick={declineBadge}>
-                      <MinusOutlined />
-                    </Button>
-                    <Button onClick={increaseBadge}>
-                      <PlusOutlined />
-                    </Button>
-                  </ButtonGroup>
-                </div>
-                <div style={{ marginTop: 10 }}>
-                  <Badge dot={showBadge}>
-                    <a href="#" className="head-example" />
-                  </Badge>
-                  <Switch onChange={onChangeBadge} checked={showBadge} />
-                </div>
+              <Badge count={badgeCount}>
+                <a href="#" className="head-example" />
+              </Badge>
+              <ButtonGroup>
+                <Button onClick={declineBadge}>
+                  <MinusOutlined />
+                </Button>
+                <Button onClick={increaseBadge}>
+                  <PlusOutlined />
+                </Button>
+              </ButtonGroup>
+              <div style={{ marginTop: 12 }}>
+                <Badge dot={showBadge}>
+                  <a href="#" className="head-example" />
+                </Badge>
+                <Switch onChange={onChangeBadge} checked={showBadge} />
               </div>
             </Col>
           </Row>
         </Col>
       </Row>
-
       <br />
       <br />
       <Row>
@@ -524,7 +509,7 @@ const App: React.FC = () => {
   return (
     <>
       <div style={{ marginBottom: 16 }}>
-        <span style={{ marginRight: 16 }}>Change direction of components: </span>
+        <span style={{ marginRight: 16 }}>Change direction of components:</span>
         <Radio.Group defaultValue="ltr" onChange={changeDirection}>
           <Radio.Button key="ltr" value="ltr">
             LTR