chore: use eslint to format code (#1162)

content/basic/divider/index-en-US.md

@@ -24,37 +24,37 @@ import { Divider } from '@douyinfe/semi-ui';
 () => {
 
     return (
-    <div>
-        <h3>Horizontal Solid Line</h3>
-        <span>Semi Design is a design system.</span>
-        <Divider margin='12px'/>
-        <span>It defines a set of components.</span>
-
-        <h3 style={{"marginTop":"40px"}}>Horizontal Dashed Line</h3>
-        <span>Semi Design is a design system.</span>
-        <Divider dashed={true} margin='12px'/>
-        <span>It defines a set of components.</span>
-
-        <h3 style={{"marginTop":"40px"}}>Vertical Solid Line</h3>
-
         <div>
-            <span>Left</span>
-            <Divider layout="vertical" margin='12px'/>
-            <span>Middle</span>
-            <Divider layout="vertical" margin='12px'/>
-            <span>Right</span>
-        </div>
+            <h3>Horizontal Solid Line</h3>
+            <span>Semi Design is a design system.</span>
+            <Divider margin='12px'/>
+            <span>It defines a set of components.</span>
+
+            <h3 style={{ "marginTop":"40px" }}>Horizontal Dashed Line</h3>
+            <span>Semi Design is a design system.</span>
+            <Divider dashed={true} margin='12px'/>
+            <span>It defines a set of components.</span>
+
+            <h3 style={{ "marginTop":"40px" }}>Vertical Solid Line</h3>
+
+            <div>
+                <span>Left</span>
+                <Divider layout="vertical" margin='12px'/>
+                <span>Middle</span>
+                <Divider layout="vertical" margin='12px'/>
+                <span>Right</span>
+            </div>
+
+            <h3 style={{ "marginTop":"40px" }}>Vertical Dashed Line</h3>
+            <div>
+                <span>Left</span>
+                <Divider layout="vertical" dashed={true} margin='12px'/>
+                <span>Middle</span>
+                <Divider layout="vertical" dashed={true} margin='12px'/>
+                <span>Right</span>
+            </div>
 
-        <h3 style={{"marginTop":"40px"}}>Vertical Dashed Line</h3>
-        <div>
-            <span>Left</span>
-            <Divider layout="vertical" dashed={true} margin='12px'/>
-            <span>Middle</span>
-            <Divider layout="vertical" dashed={true} margin='12px'/>
-            <span>Right</span>
         </div>
-
-    </div>
     );
 };
 

content/basic/divider/index.md

@@ -30,12 +30,12 @@ import { Divider } from '@douyinfe/semi-ui';
             <Divider margin='12px'/>
             <span>它定义了一套中后台设计与前端基础组件。</span>
 
-            <h3 style={{"marginTop":"40px"}}>水平虚线</h3>
+            <h3 style={{ "marginTop":"40px" }}>水平虚线</h3>
             <span>Semi Design 是一个设计系统。</span>
             <Divider dashed={true} margin='12px'/>
             <span>它定义了一套中后台设计与前端基础组件。</span>
 
-            <h3 style={{"marginTop":"40px"}}>垂直实线</h3>
+            <h3 style={{ "marginTop":"40px" }}>垂直实线</h3>
 
             <div>
                 <span>左</span>
@@ -45,7 +45,7 @@ import { Divider } from '@douyinfe/semi-ui';
                 <span>右</span>
             </div>
 
-            <h3 style={{"marginTop":"40px"}}>垂直虚线</h3>
+            <h3 style={{ "marginTop":"40px" }}>垂直虚线</h3>
             <div>
                 <span>左</span>
                 <Divider layout="vertical" dashed={true} margin='12px'/>

content/basic/grid/index-en-US.md

@@ -290,7 +290,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
     <div className="grid">
-        <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
+        <Row gutter={{ xs:16, sm:16, md:16, lg:24, xl:24, xxl:24 }}>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
             <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>

content/basic/grid/index.md

@@ -290,7 +290,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 () => (
     <div className="grid">
-        <Row gutter={{xs:16,sm:16,md:16,lg:24,xl:24,xxl:24}}>
+        <Row gutter={{ xs:16, sm:16, md:16, lg:24, xl:24, xxl:24 }}>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>
             <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className="col-content">Col</div></Col>
             <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className="col-content">Col</div></Col>

content/basic/icon/index-en-US.md

@@ -66,7 +66,7 @@ import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusC
     const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
     const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
     let icons = types.map((type, i) => {
-        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>;
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key:size }))}</div>;
     });
     return icons;
 };
@@ -82,14 +82,14 @@ import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-ic
 
 () => (
     <div>
-        <div style={{color:'#E91E63'}} >
+        <div style={{ color:'#E91E63' }} >
             <IconLikeHeart size="extra-large"/>
             <IconFlag size="extra-large"/>
         </div>
         <br/>
         <div>
-            <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
-            <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+            <IconLock style={{ color:'#6A3AC7' }} size="extra-large" />
+            <IconUnlock style={{ color:'#9C27B0' }} size="extra-large"/>
         </div>
     </div>
 );

content/basic/icon/index.md

@@ -65,7 +65,7 @@ import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusC
     const types = [<IconSearch />, <IconHelpCircle />, <IconAlertCircle />, <IconMinusCircle />, <IconPlusCircle />, <IconPlus />, <IconRefresh />];
     const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
     let icons = types.map((type, i) => {
-        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, {size, key:size}))}</div>;
+        return <div key={i} style={{ marginBottom: 4 }}>{sizes.map(size => React.cloneElement(type, { size, key:size }))}</div>;
     });
     return icons;
 };
@@ -81,14 +81,14 @@ import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@douyinfe/semi-ic
 
 () => (
     <div>
-        <div style={{color:'#E91E63'}} >
+        <div style={{ color:'#E91E63' }} >
             <IconLikeHeart size="extra-large"/>
             <IconFlag size="extra-large"/>
         </div>
         <br/>
         <div>
-            <IconLock style={{color:'#6A3AC7'}} size="extra-large" />
-            <IconUnlock style={{color:'#9C27B0'}} size="extra-large"/>
+            <IconLock style={{ color:'#6A3AC7' }} size="extra-large" />
+            <IconUnlock style={{ color:'#9C27B0' }} size="extra-large"/>
         </div>
     </div>
 );

content/basic/layout/index-en-US.md

@@ -149,8 +149,8 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
 () => {
     const { Header, Footer, Content } = Layout;
     return (
-        <Layout style={{border: '1px solid var(--semi-color-border)'}}>
-            <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                 <div>
                     <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
                         <Nav.Header>
@@ -221,11 +221,11 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                         alignItems: 'center',
                     }}
                 >
-                    <IconBytedanceLogo size='large' style={{marginRight: '8px'}}/>
+                    <IconBytedanceLogo size='large' style={{ marginRight: '8px' }}/>
                     <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                 </span>
                 <span>
-                    <span style={{marginRight: '24px'}}>Customer Service</span>
+                    <span style={{ marginRight: '24px' }}>Customer Service</span>
                     <span>Feedback</span>
                 </span>
             </Footer>
@@ -244,12 +244,12 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
 () => {
     const { Header, Footer, Sider, Content } = Layout;
     return (
-        <Layout style={{border: '1px solid var(--semi-color-border)'}}>
-            <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                 <div >
                     <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
                         <Nav.Header>
-                            <IconSemiLogo style={{fontSize: 36}} />
+                            <IconSemiLogo style={{ fontSize: 36 }} />
                         </Nav.Header>
                         <span
                             style={{
@@ -262,7 +262,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                     color: 'var(--semi-color-text-0)',
                                     fontWeight: '600',
                                 }}>Semi Design</span>
-                            <span style={{marginRight: '24px'}}>Semi Theme</span>
+                            <span style={{ marginRight: '24px' }}>Semi Theme</span>
                             <span>Semi Blocks</span>
                         </span>
                         <Nav.Footer>
@@ -288,7 +288,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                 </div>
             </Header>
             <Layout >
-                <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+                <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                     <Nav
                         style={{ maxWidth: 220, height: '100%' }}
                         defaultSelectedKeys={['Home']}
@@ -348,7 +348,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                     <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                 </span>
                 <span>
-                    <span style={{marginRight: '24px'}}>Customer Service</span>
+                    <span style={{ marginRight: '24px' }}>Customer Service</span>
                     <span>Feedback</span>
                 </span>
             </Footer>
@@ -367,8 +367,8 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 () => {
     const { Header, Footer, Sider, Content } = Layout;
     return (
-        <Layout style={{border: '1px solid var(--semi-color-border)'}}>
-            <Sider style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+            <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                 <Nav
                     defaultSelectedKeys={['Home']}
                     style={{ maxWidth: 220, height: '100%' }}
@@ -388,7 +388,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                 />
             </Sider>
             <Layout>
-                <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
+                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                     <Nav
                         mode='horizontal'
                         footer={
@@ -459,7 +459,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                         <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                     </span>
                     <span>
-                        <span style={{marginRight: '24px'}}>Customer Service</span>
+                        <span style={{ marginRight: '24px' }}>Customer Service</span>
                         <span>Feedback</span>
                     </span>
                 </Footer>

content/basic/layout/index.md

@@ -147,7 +147,7 @@ import { Layout } from '@douyinfe/semi-ui';
 ```jsx live=true dir="column" hideInDSM
 import React from 'react';
 import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
-import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo,IconHome,IconLive,IconSetting } from '@douyinfe/semi-icons';
+import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@douyinfe/semi-icons';
 
 () => {
     const { Header, Footer, Content } = Layout;

content/basic/space/index-en-US.md

@@ -88,7 +88,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 () => (
     <Tabs type="line">
         <TabPane tab="tight" itemKey="1">
-            <Space spacing='tight' style={{marginTop:'15px'}}>
+            <Space spacing='tight' style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -96,7 +96,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="medium" itemKey="2">
-            <Space spacing='medium' style={{marginTop:'15px'}}>
+            <Space spacing='medium' style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -104,7 +104,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="loose" itemKey="3">
-            <Space spacing='loose' style={{marginTop:'15px'}}>
+            <Space spacing='loose' style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
@@ -112,7 +112,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="array" itemKey="4">
-            <Space spacing={[8,16]} wrap style={{marginTop:'15px'}}>
+            <Space spacing={[8, 16]} wrap style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>
                 <Button theme='solid' type='primary'>button</Button>

content/basic/space/index.md

@@ -86,7 +86,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
 () => (
     <Tabs type="line">
         <TabPane tab="tight" itemKey="1">
-            <Space spacing='tight' style={{marginTop:'15px'}}>
+            <Space spacing='tight' style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -94,7 +94,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="medium" itemKey="2">
-            <Space spacing='medium' style={{marginTop:'15px'}}>
+            <Space spacing='medium' style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -102,7 +102,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="loose" itemKey="3">
-            <Space spacing='loose' style={{marginTop:'15px'}}>
+            <Space spacing='loose' style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
@@ -110,7 +110,7 @@ import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
             </Space>
         </TabPane>
         <TabPane tab="array" itemKey="4">
-            <Space spacing={[8,16]} wrap style={{marginTop:'15px'}}>
+            <Space spacing={[8, 16]} wrap style={{ marginTop:'15px' }}>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>
                 <Button theme='solid' type='primary'>按钮</Button>

content/basic/typography/index-en-US.md

@@ -33,12 +33,12 @@ function Demo() {
     const { Title } = Typography;
     return (
         <div>
-            <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
-            <Title with={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
-            <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
-            <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
-            <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
-            <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
+            <Title style={{ margin: '8px 0' }} >h1. Semi Design</Title>
+            <Title with={2} style={{ margin: '8px 0' }} >h2. Semi Design</Title>
+            <Title heading={3} style={{ margin: '8px 0' }} >h3. Semi Design</Title>
+            <Title heading={4} style={{ margin: '8px 0' }} >h4. Semi Design</Title>
+            <Title heading={5} style={{ margin: '8px 0' }} >h5. Semi Design</Title>
+            <Title heading={6} style={{ margin: '8px 0' }} >h6. Semi Design</Title>
         </div>
     );
 }
@@ -188,11 +188,11 @@ function Demo() {
         <div>
             <Paragraph copyable>Click the right icon to copy text.</Paragraph>
             <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>Click to copy text.</Paragraph>
-            <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.'}) }}>Click the right icon to copy.</Paragraph>
+            <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.' }) }}>Click the right icon to copy.</Paragraph>
             <br/>
             <Text type="secondary">Paste here: </Text>
             <br/>
-            <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
+            <TextArea autosize style={{ width: 320, marginTop: 4 }} rows={3} />
         </div>
     );
 }
@@ -239,7 +239,7 @@ function Demo() {
                 {`Multi-line ellipsis: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
             </Paragraph>
             <br/>
-            <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
+            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}>
                 {`With Popover: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`}
             </Paragraph>
             <br/>

content/basic/typography/index.md

@@ -28,12 +28,12 @@ function Demo() {
     const { Title } = Typography;
     return (
         <div>
-            <Title  style={{margin: '8px 0'}} >h1. Semi Design</Title>
-            <Title heading={2} style={{margin: '8px 0'}} >h2. Semi Design</Title>
-            <Title heading={3} style={{margin: '8px 0'}} >h3. Semi Design</Title>
-            <Title heading={4} style={{margin: '8px 0'}} >h4. Semi Design</Title>
-            <Title heading={5} style={{margin: '8px 0'}} >h5. Semi Design</Title>
-            <Title heading={6} style={{margin: '8px 0'}} >h6. Semi Design</Title>
+            <Title style={{ margin: '8px 0' }} >h1. Semi Design</Title>
+            <Title heading={2} style={{ margin: '8px 0' }} >h2. Semi Design</Title>
+            <Title heading={3} style={{ margin: '8px 0' }} >h3. Semi Design</Title>
+            <Title heading={4} style={{ margin: '8px 0' }} >h4. Semi Design</Title>
+            <Title heading={5} style={{ margin: '8px 0' }} >h5. Semi Design</Title>
+            <Title heading={6} style={{ margin: '8px 0' }} >h6. Semi Design</Title>
         </div>
     );
 }
@@ -174,11 +174,11 @@ function Demo() {
         <div>
             <Paragraph copyable>点击右边的图标复制文本。</Paragraph>
             <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>点击复制文本。</Paragraph>
-            <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功'}) }}>点击右边的图标复制文本。</Paragraph>
+            <Paragraph copyable={{ onCopy: () => Toast.success({ content: '复制文本成功' }) }}>点击右边的图标复制文本。</Paragraph>
             <br/>
             <Text type="secondary">粘贴区域：</Text>
             <br/>
-            <TextArea autosize style={{width: 320, marginTop: 4}} rows={3} />
+            <TextArea autosize style={{ width: 320, marginTop: 4 }} rows={3} />
         </div>
     );
 }
@@ -226,7 +226,7 @@ function Demo() {
                 这是一个多行截断的例子：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
             </Paragraph>
             <br/>
-            <Paragraph ellipsis={{ rows: 3, showTooltip: {type: 'popover', opts: {style: {width: 300}}} }} style={{ width: 300 }}>
+            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}>
                 多行截断，展示 Popover：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
             </Paragraph>
             <br/>

content/feedback/banner/index-en-US.md

@@ -105,21 +105,21 @@ function Demo() {
     const { Text } = Typography;
   
     return (
-        <div style={{width: 640 }} className="components-banner-demo">
+        <div style={{ width: 640 }} className="components-banner-demo">
             <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             /><br/>
             <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             /><br/>
             <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             /><br/>
             <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>{`Don't know AppKey?`}</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>}
                 description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>}
             />
         </div>
@@ -151,7 +151,7 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
+    <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
         <Banner
             fullMode={false}
             title="Title"

content/feedback/banner/index.md

@@ -104,21 +104,21 @@ function Demo() {
     const { Text } = Typography;
   
     return (
-        <div style={{width: 640 }} className="components-banner-demo">
+        <div style={{ width: 640 }} className="components-banner-demo">
             <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             /><br/>
             <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             /><br/>
             <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             /><br/>
             <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null}
-                title={<div style={{fontWeight: 600, fontSize: '14px', lineHeight: '20px'}}>不知道 AppKey？</div>}
+                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>不知道 AppKey？</div>}
                 description={<div>你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。</div>}
             />
         </div>
@@ -150,7 +150,7 @@ import React from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
+    <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>
         <Banner
             fullMode={false}
             title="Title"

content/feedback/notification/index-en-US.md

@@ -58,15 +58,15 @@ import { Notification, Button, ButtonGroup } from '@douyinfe/semi-ui';
     return (
         <>
             <ButtonGroup>
-                <Button onClick={() => Notification.info({...opts, Position: 'top'})}>top</Button>
-                <Button onClick={() => Notification.info({...opts, position: 'topLeft'})}>topLeft</Button>
+                <Button onClick={() => Notification.info({ ...opts, Position: 'top' })}>top</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'topLeft' })}>topLeft</Button>
                 <Button onClick={() => Notification.info(opts)}>topRight</Button>
             </ButtonGroup>
             <br/><br/>
             <ButtonGroup>
-                <Button onClick={() => Notification.info({...opts, position: 'bottom'})}>bottom</Button>
-                <Button onClick={() => Notification.info({...opts, position: 'bottomRight'})}>bottomRight</Button>
-                <Button onClick={() => Notification.info({...opts, position: 'bottomLeft'})}>bottomLeft</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'bottom' })}>bottom</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'bottomRight' })}>bottomRight</Button>
+                <Button onClick={() => Notification.info({ ...opts, position: 'bottomLeft' })}>bottomLeft</Button>
             </ButtonGroup>
         </>
     );
@@ -92,16 +92,16 @@ import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
     return (
         <>
             <h5>Default Icon</h5>
-            <Button type='primary' onClick={()=>Notification.success(opts)} style={{margin: 4}}>
+            <Button type='primary' onClick={()=>Notification.success(opts)} style={{ margin: 4 }}>
                 Success
             </Button>
-            <Button onClick={() => Notification.info(opts)} style={{margin: 4}}>
+            <Button onClick={() => Notification.info(opts)} style={{ margin: 4 }}>
                 Info
             </Button>
-            <Button type="warning" onClick={()=>Notification.warning(opts)} style={{margin: 4}}>
+            <Button type="warning" onClick={()=>Notification.warning(opts)} style={{ margin: 4 }}>
                 Warning
             </Button>
-            <Button type="danger" onClick={()=>Notification.error(opts)} style={{margin: 4}}>
+            <Button type="danger" onClick={()=>Notification.error(opts)} style={{ margin: 4 }}>
                 Error
             </Button>
             <h5>Customized Icon</h5>
@@ -122,7 +122,7 @@ import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
             ></Button>
             <Button
                 icon={<IconVigoLogo />}
-                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} />  })}
+                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}
             ></Button>
         </>
     );
@@ -185,9 +185,9 @@ import { Notification, Button, Typography } from '@douyinfe/semi-ui';
         content: (
             <>
                 <div>Hi, Bytedance dance dance</div>
-                <div style={{marginTop: 8}}>
+                <div style={{ marginTop: 8 }}>
                     <Text link>More Info</Text>
-                    <Text link style={{marginLeft: 20}}>Show Later</Text>
+                    <Text link style={{ marginLeft: 20 }}>Show Later</Text>
                 </div>
             </>),
         duration: 3,

content/feedback/notification/index.md

@@ -123,7 +123,7 @@ import { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';
             ></Button>
             <Button
                 icon={<IconVigoLogo />}
-                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} />  })}
+                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}
             ></Button>
         </>
     );

content/input/button/index-en-US.md

@@ -100,7 +100,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                            <li key={'' + idxTheme + idxType} style={{ margin:10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -133,7 +133,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                            <li key={'' + idxTheme + idxType} style={{ margin:10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -166,7 +166,7 @@ function ButtonDemo() {
                 <div key={idxTheme}>
                     <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>
                         {types.map((type, idxType) => (
-                            <li key={'' + idxTheme + idxType} style={{margin:10}}>
+                            <li key={'' + idxTheme + idxType} style={{ margin:10 }}>
                                 <Button
                                     theme={theme[0]}
                                     type={type[0]}
@@ -338,7 +338,7 @@ function ButtonDemo() {
             <hr/>
             <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>Save</Button>
             <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>Delete</Button>
-            <div style={{ width: 200, display: 'inline-block'}}>
+            <div style={{ width: 200, display: 'inline-block' }}>
                 <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>Revoke</Button>
             </div>
         </div>
@@ -447,36 +447,36 @@ function SplitButtonDemo(){
         { node: 'item', name: 'Delete', type: 'danger' },
     ];
 
-    const [btnVisible,setBtnVisible] = useState({
+    const [btnVisible, setBtnVisible] = useState({
         1:false,
         2:false,
         3:false
     });
 
-    const handleVisibleChange = (key,visible)=>{
-        newBtnVisible = {...btnVisible};
+    const handleVisibleChange = (key, visible)=>{
+        newBtnVisible = { ...btnVisible };
         newBtnVisible[key] = visible;
         setBtnVisible(newBtnVisible);
     };
 
     return (
         <div>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="Project operate button group">
+            <SplitButtonGroup style={{ marginRight:10 }} aria-label="Project operate button group">
                 <Button theme="solid" type="primary">SplitButton</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[1]?{ background:'var(--semi-color-primary-hover)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="Project operate button group">
+            <SplitButtonGroup style={{ marginRight:10 }} aria-label="Project operate button group">
                 <Button theme="light" type="primary">SplitButton</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[2]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup aria-label="Project operate button group">
-                <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:null} theme="borderless" type="primary">SplitButton</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
+                <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-0)' }:null} theme="borderless" type="primary">SplitButton</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>

content/input/button/index.md

@@ -298,7 +298,7 @@ function ButtonDemo() {
             <hr/>
             <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>保存</Button>
             <Button loading={delLoading} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>删除</Button>
-            <div style={{ width: 200, display: 'inline-block'}}>
+            <div style={{ width: 200, display: 'inline-block' }}>
                 <Button loading={repLoading} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>撤销</Button>
             </div>
         </div>
@@ -406,13 +406,13 @@ function SplitButtonDemo(){
         { node: 'item', name: '删除项目', type: 'danger' },
     ];
 
-    const [btnVisible,setBtnVisible] = useState({
+    const [btnVisible, setBtnVisible] = useState({
         1:false,
         2:false,
         3:false
     });
 
-    const handleVisibleChange = (key,visible)=>{
+    const handleVisibleChange = (key, visible)=>{
         newBtnVisible = { ...btnVisible };
         newBtnVisible[key] = visible;
         setBtnVisible(newBtnVisible);
@@ -422,20 +422,20 @@ function SplitButtonDemo(){
         <div>
             <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
                 <Button theme="solid" type="primary">分裂按钮</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1] ? { background:'var(--semi-color-primary-hover)',padding:'8px 4px' } : { padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[1] ? { background:'var(--semi-color-primary-hover)', padding:'8px 4px' } : { padding:'8px 4px' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="项目操作按钮组">
+            <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
                 <Button theme="light" type="primary">分裂按钮</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[2]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[2]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="light" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup aria-label="项目操作按钮组">
-                <Button style={btnVisible[3]?{background:'var(--semi-color-fill-0)'}:{}} theme="borderless" type="primary">分裂按钮</Button>
-                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[3]?{background:'var(--semi-color-fill-1)',padding:'8px 4px'}:{padding:'8px 4px'}}  theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-0)' }:{}} theme="borderless" type="primary">分裂按钮</Button>
+                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
+                    <Button style={btnVisible[3]?{ background:'var(--semi-color-fill-1)', padding:'8px 4px' }:{ padding:'8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>

content/input/cascader/index-en-US.md

@@ -126,7 +126,7 @@ import { Cascader } from '@douyinfe/semi-ui';
         }];
     return (
         <Cascader
-            defaultValue= {['impressionism','visualArts','Monet']}
+            defaultValue= {['impressionism', 'visualArts', 'Monet']}
             style={{ width: 400 }}
             treeData={treeData}
             placeholder="Please select"
@@ -221,11 +221,11 @@ class Demo extends React.Component {
     constructor() {
         super();
         this.state = {
-            value: ['impressionism','visualArts','Monet']
+            value: ['impressionism', 'visualArts', 'Monet']
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -653,7 +653,7 @@ import { Cascader, Tag, Typography } from '@douyinfe/semi-ui';
                 placeholder="Please select"
                 displayRender={(item, idx) => (
                     <Tag
-                        style={{marginRight: 4}}
+                        style={{ marginRight: 4 }}
                         color='white'
                         key={`${idx}-${item.data.label}`}
                     >
@@ -1013,7 +1013,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -1078,7 +1078,7 @@ import React, { useState } from 'react';
 import { Cascader } from '@douyinfe/semi-ui';
 
 () => {
-    const [value, setValue] = useState(['impressionism','visualArts']);
+    const [value, setValue] = useState(['impressionism', 'visualArts']);
     const onChange = value => {
         setValue(value);
     };
@@ -1146,7 +1146,7 @@ import React, { useState } from 'react';
 import { Cascader } from '@douyinfe/semi-ui';
 
 () => {
-    const [value, setValue] = useState(['impressionism','visualArts']);
+    const [value, setValue] = useState(['impressionism', 'visualArts']);
     const onChange = value => {
         setValue(value);
     };

content/input/cascader/index.md

@@ -231,7 +231,7 @@ import React from 'react';
 import { Cascader } from '@douyinfe/semi-ui';
 
 () => {
-    const [value, setValue] = useState(['zhejiang','ningbo','haishu']);
+    const [value, setValue] = useState(['zhejiang', 'ningbo', 'haishu']);
     const onChange = (val) => { setValue(val); };
     const treeData = [
         {
@@ -658,7 +658,7 @@ import { Cascader, Tag, Typography } from '@douyinfe/semi-ui';
                 placeholder="自定义回填时显示数据的格式"
                 displayRender={(item, idx) => (
                     <Tag
-                        style={{marginRight: 4}}
+                        style={{ marginRight: 4 }}
                         color='white'
                         key={`${idx}-${item.data.label}`}
                     >
@@ -994,7 +994,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [

content/input/checkbox/index-en-US.md

@@ -138,7 +138,7 @@ class App extends React.Component {
             { label: 'Aim for the highest', value: '1', extra: "Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing" },
             { label: 'Be grounded & courageous', value: '2', extra:"Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." },
             { label: 'Be open & humble', value: '3', extra: "Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas." },
-            { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused."}
+            { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused." }
         ];
         const optionsWithDisabled = [
             { label: 'Photography', value: 'Photography' },
@@ -295,7 +295,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 </Checkbox>
             </div>
             <CheckboxGroup
-                style={{marginTop:6}}
+                style={{ marginTop:6 }}
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
@@ -319,16 +319,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
-        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'3'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'3'} extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'4'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
     </CheckboxGroup>
@@ -346,16 +346,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo">
-        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'3'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'3'} extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
-        <Checkbox value={'4'} extra='Checkbox Description' style={{width:280}}>
+        <Checkbox value={'4'} extra='Checkbox Description' style={{ width:280 }}>
             Checkbox Title
         </Checkbox>
     </CheckboxGroup>

content/input/checkbox/index.md

@@ -120,7 +120,7 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
         { label: '追求极致', value: '1', extra: '不断提高要求，延迟满足感，在更大范围里找最优解' },
         { label: '务实敢为', value: '2', extra:'直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
         { label: '开放谦逊', value: '3', extra: '内心阳光，信任伙伴；乐于助人和求助，合作成大事;格局大，上个台阶想问题；对外敏锐谦虚，ego小，听得进意见' },
-        { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点'}
+        { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点' }
     ];
     const optionsWithDisabled = [
         { label: 'Photography', value: 'Photography' },
@@ -278,7 +278,7 @@ import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui';
                 </Checkbox>
             </div>
             <CheckboxGroup
-                style={{marginTop:6}}
+                style={{ marginTop:6 }}
                 options={plainOptions}
                 value={checkedList}
                 onChange={onChange}
@@ -301,16 +301,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
-        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
     </CheckboxGroup>
@@ -328,16 +328,16 @@ import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui';
 
 () => (
     <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="CheckboxGroup 示例">
-        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'1'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'2'} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'3'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
-        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Checkbox value={'4'} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Checkbox>
     </CheckboxGroup>

content/input/form/index-en-US.md

@@ -358,7 +358,7 @@ class BasicDemoWithInit extends React.Component {
                         <TagInput 
                             field="product"
                             label='Product（TagInput）'
-                            initValue={['abc','hotsoon']}
+                            initValue={['abc', 'hotsoon']}
                             style={style}
                         />
                     </Col>
@@ -1276,7 +1276,7 @@ class ArrayDemo extends React.Component {
         if (!effects) {
             effects = [];
         }
-        effects.push({ name: '', type: '', key: this.id++  });
+        effects.push({ name: '', type: '', key: this.id++ });
         this.formApi.setValue('effects', effects);
     }
     remove(key) {

content/input/form/index.md

@@ -359,7 +359,7 @@ class BasicDemoWithInit extends React.Component {
                             <TagInput 
                                 field="product"
                                 label='产品（TagInput）'
-                                initValue={['abc','ulikeCam']}
+                                initValue={['abc', 'ulikeCam']}
                                 placeholder='请输入产品'
                                 style={style}
                             />
@@ -722,7 +722,7 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
             </Section>
             <Section text={'考试时间'} >
                 <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width:272 }} label={{ text:'开始时间', required: true }}/>
-                <div  style={{ display:'flex' }}>
+                <div style={{ display:'flex' }}>
                     <Input field='time' label='考试时长' style={{ width: 176 }} initValue={'60'} addonAfter='分钟'/>
                     <Checkbox initValue={true} noLabel field='auto' style={{ paddingTop: 30, marginLeft: 12 }}>到时间自动交卷</Checkbox>
                 </div>
@@ -755,14 +755,14 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
             </Section>
             <Section text={'考试人员'}>
                 <div style={{ display: 'flex' }}>
-                    <Switch field='open'  label={{ text:'对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
+                    <Switch field='open' label={{ text:'对外开放', required: true }} checkedText='开' uncheckedText='关'></Switch>
                 </div>
                 <Select
                     field='users'
                     label={{ text:'考生', required: true }}
                     style={{ width: 560 }}
                     multiple
-                    initValue={['1','2','3', '4']}
+                    initValue={['1', '2', '3', '4']}
                 >
                     <Select.Option value='1'>曲晨一</Select.Option>
                     <Select.Option value='2'>夏可曼</Select.Option>
@@ -1416,10 +1416,10 @@ class PartValidAndResetDemo extends React.Component {
                             <div>
                                 <Form.Input field="a[1]" validate={this.validate} trigger="blur" />
                                 <Form.Input field="a[0]" validate={this.validate} trigger="blur" />
-                                <Form.Input field="b.name[0]" validate={this.validate} trigger="blur"  />
+                                <Form.Input field="b.name[0]" validate={this.validate} trigger="blur" />
                                 <Form.Input field="b.name[1]" validate={this.validate} trigger="blur" />
                                 <Form.Input field="b.type" validate={this.validate} trigger="blur" />
-                                <Form.Input field="c" validate={this.validate} trigger="blur"  />
+                                <Form.Input field="c" validate={this.validate} trigger="blur" />
                                 <Form.Input field="d" validate={this.validate} trigger="blur" />
                             </div>
                             <div>
@@ -1538,7 +1538,7 @@ class ArrayFieldDemo extends React.Component {
                     {({ add, arrayFields, addWithInitValue }) => (
                         <React.Fragment>
                             <Button onClick={add} icon={<IconPlusCircle />} theme='light'>新增空白行</Button>
-                            <Button  icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: '自定义贴纸', type: '2D' });}} style={{ marginLeft:8 }}>新增带有初始值的行</Button>
+                            <Button icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: '自定义贴纸', type: '2D' });}} style={{ marginLeft:8 }}>新增带有初始值的行</Button>
                             {
                                 arrayFields.map(({ field, key, remove }, i) => (
                                     <div key={key} style={{ width: 1000, display: 'flex' }}>

content/input/radio/index-en-US.md

@@ -262,13 +262,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='card' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-card">
-        <Radio value={1} extra='Radio description' style={{width:280}}>
+        <Radio value={1} extra='Radio description' style={{ width:280 }}>
             Radio Title
         </Radio>
-        <Radio value={2} disabled extra='Radio description' style={{width:280}}>
+        <Radio value={2} disabled extra='Radio description' style={{ width:280 }}>
             Radio Title
         </Radio>
-        <Radio value={3} extra='Radio description' style={{width:280}}>
+        <Radio value={3} extra='Radio description' style={{ width:280 }}>
             Radio Title
         </Radio>
     </RadioGroup>
@@ -288,13 +288,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='pureCard' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-pureCard">
-        <Radio value={1} extra='Radio description' style={{width:280}}>
+        <Radio value={1} extra='Radio description' style={{ width:280 }}>
             Radio Title
         </Radio>
-        <Radio value={2} disabled extra='Radio description' style={{width:280}}>
+        <Radio value={2} disabled extra='Radio description' style={{ width:280 }}>
             Radio Title
         </Radio>
-        <Radio value={3} extra='Radio description' style={{width:280}}>
+        <Radio value={3} extra='Radio description' style={{ width:280 }}>
             Radio Title
         </Radio>
     </RadioGroup>

content/input/radio/index.md

@@ -115,7 +115,7 @@ import React from 'react';
 import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => {
-    const [value,  setValue] = useState(1);
+    const [value, setValue] = useState(1);
     const onChange = (e) => {
         console.log('radio checked', e.target.value);
         setValue(e.target.value);
@@ -196,13 +196,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='card' defaultValue={2} direction='vertical' aria-label="单选组合示例" name="demo-radio-group-card">
-        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Radio>
-        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Radio>
-        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Radio>
     </RadioGroup>
@@ -220,13 +220,13 @@ import { RadioGroup, Radio } from '@douyinfe/semi-ui';
 
 () => (
     <RadioGroup type='pureCard' defaultValue={2} direction='vertical' aria-label="单选组合示例" name="demo-radio-group-pureCard">
-        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={1} disabled extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Radio>
-        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={2} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Radio>
-        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width:280}}>
+        <Radio value={3} extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{ width:280 }}>
             单选框标题
         </Radio>
     </RadioGroup>

content/input/rating/index.md

@@ -92,7 +92,7 @@ import React, { useState } from 'react';
 import { Rating } from '@douyinfe/semi-ui';
 
 () => {
-    const [value,  setValue] = useState(0);
+    const [value, setValue] = useState(0);
     const change = (val) => setValue(val);
     const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
     return (
@@ -119,10 +119,10 @@ import { IconLikeHeart } from '@douyinfe/semi-icons';
 
 () => (
     <div>
-        <Rating style={{color:'red'}} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
+        <Rating style={{ color:'red' }} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
         <br/>
         <br/>
-        <Rating style={{color:'red'}} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
+        <Rating style={{ color:'red' }} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
         <br/>
         <br/>
         <Rating character={'赞'} size={18} defaultValue={3}/>

content/input/select/index-en-US.md

@@ -747,7 +747,7 @@ import { Select, Avatar, Tag } from '@douyinfe/semi-ui';
             paddingBottom: 10
         };
         return (
-            <Select.Option value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+            <Select.Option value={item.name} style={optionStyle} showTick={true} {...item} key={item.email}>
                 <Avatar size="small" src={item.avatar} />
                 <div style={{ marginLeft: 8 }}>
                     <div style={{ fontSize: 14 }}>{item.name}</div>

content/input/select/index.md

@@ -90,14 +90,14 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => (
     <>
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc','ulikecam']}>
+        <Select multiple style={{ width: '320px' }} defaultValue={['abc', 'ulikecam']}>
             <Select.Option value='abc'>抖音</Select.Option>
             <Select.Option value='ulikecam'>轻颜相机</Select.Option>
             <Select.Option value='jianying'>剪映</Select.Option>
             <Select.Option value='xigua'>西瓜视频</Select.Option>
         </Select>
         <br/><br/>
-        <Select multiple style={{ width: '320px' }} defaultValue={['abc','ulikecam', 'jianying']} maxTagCount={2}>
+        <Select multiple style={{ width: '320px' }} defaultValue={['abc', 'ulikecam', 'jianying']} maxTagCount={2}>
             <Select.Option value='abc'>抖音</Select.Option>
             <Select.Option value='ulikecam'>轻颜相机</Select.Option>
             <Select.Option value='jianying'>剪映</Select.Option>
@@ -309,7 +309,7 @@ import { Select } from '@douyinfe/semi-ui';
             value: `rgba(var(--semi-${color}-4), 1)`,
             label: (
                 <span style={{ 
-                    color: `rgba(var(--semi-${color}-4), 1)`}}>
+                    color: `rgba(var(--semi-${color}-4), 1)` }}>
                     {`--semi-${color}-4`}
                 </span>
             )
@@ -547,7 +547,7 @@ import { Select, Button } from '@douyinfe/semi-ui';
     let [options, setOptions] = useState([1, 2, 3, 4]);
     function add() {
         let length = Math.ceil(Math.random() * 10);
-        let newOptions = Array.from({ length }, (v,i) => i+1);
+        let newOptions = Array.from({ length }, (v, i) => i+1);
         setOptions(newOptions);
     }
     return (
@@ -621,7 +621,7 @@ class Link extends React.Component {
                     ))}
                 </Select>
                 <Select
-                    style={{ width: '150px', margin: '10px'  }}
+                    style={{ width: '150px', margin: '10px' }}
                     value={city} onChange={this.cityChange}>
                     {citys.map(c => (
                         <Select.Option value={c} key={c}>{c}</Select.Option>
@@ -827,7 +827,7 @@ import { Select, Avatar, Tag } from '@douyinfe/semi-ui';
             paddingBottom: 10
         };
         return (
-            <Select.Option value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+            <Select.Option value={item.name} style={optionStyle} showTick={true} {...item} key={item.email}>
                 <Avatar size="small" src={item.avatar} />
                 <div style={{ marginLeft: 8 }}>
                     <div style={{ fontSize: 14 }}>{item.name}</div>

content/input/taginput/index-en-US.md

@@ -25,7 +25,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['Semi','Hotsoon','Pipixia']}
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']}
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -68,7 +68,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput 
         showClear 
-        defaultValue={['Semi','Hotsoon']} 
+        defaultValue={['Semi', 'Hotsoon']} 
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -86,7 +86,7 @@ import { TagInput } from '@douyinfe/semi-ui';
     <TagInput 
         disabled 
         showClear 
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         placeholder='Please enter...'
     />
 );
@@ -145,11 +145,11 @@ import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons';
     <>
         <TagInput prefix={<IconVigoLogo />} showClear/>
         <br/><br/>
-        <TagInput  prefix="Prefix" showClear/>
+        <TagInput prefix="Prefix" showClear/>
         <br/><br/>
         <TagInput suffix={<IconGift />}/>
         <br/><br/>
-        <TagInput  suffix="Suffix" showClear/>
+        <TagInput suffix="Suffix" showClear/>
     </>
 );
 ``` 
@@ -165,7 +165,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput
         allowDuplicates={false}
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -183,7 +183,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput
         addOnBlur={true}
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         placeholder='Please enter...'
         onChange={v => console.log(v)}
     />
@@ -238,7 +238,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         maxTagCount={2}
         showRestTagsPopover={true}
         restTagsPopoverProps={{ position: 'top' }}
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
     />
 );
 ```
@@ -294,7 +294,7 @@ class TagInputDemo extends React.Component {
         return (
             <TagInput
                 inputValue={this.state.value}
-                onInputChange={(v,e) => this.handleInputChange(v,e)}
+                onInputChange={(v, e) => this.handleInputChange(v, e)}
             />
         );
     }
@@ -309,14 +309,14 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput 
-        defaultValue={['Semi','Hotsoon','Pipixia']} 
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
         showClear 
         onFocus={e =>{console.log(`onFocus`);}} 
         onBlur={e=>{console.log(`onBlur`);}} 
         onChange={tag=>{console.log(`onChange ：${tag}`);}} 
         onAdd={tag=>{console.log(`onAdd ：${tag}`);}} 
-        onRemove={(v,i)=>{console.log(`onRemove ：${v}, index：${i}`);}} 
-        onInputChange={(input,e)=>{console.log(`onInputChange ：${input}`);}} 
+        onRemove={(v, i)=>{console.log(`onRemove ：${v}, index：${i}`);}} 
+        onInputChange={(input, e)=>{console.log(`onInputChange ：${input}`);}} 
     />
 );
 ```
@@ -343,7 +343,7 @@ class TagInputDemo extends React.Component {
     render() {
         return (
             <>
-                <TagInput defaultValue={['Semi','Hotsoon']} ref={this.ref} />
+                <TagInput defaultValue={['Semi', 'Hotsoon']} ref={this.ref} />
                 <Button style={{ marginTop: 10 }} onClick={this.handleTagInputFocus}>
                     focus
                 </Button>
@@ -373,10 +373,10 @@ class CustomRender extends React.Component {
             { "name": "quchenyi", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
             { "name": "wenjiamao", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
         ];
-        this.mapList = new Map(this.list.map( item => [item.name,item]));
+        this.mapList = new Map(this.list.map( item => [item.name, item]));
     }
 
-    renderTagItem(value,index) {
+    renderTagItem(value, index) {
         const data = this.mapList.get(value);
         return (
             <div 
@@ -401,7 +401,7 @@ class CustomRender extends React.Component {
             <TagInput 
                 value={value} 
                 onChange={value=>this.setState({ value })}
-                renderTagItem={(value,index)=>this.renderTagItem(value,index)}
+                renderTagItem={(value, index)=>this.renderTagItem(value, index)}
             />
         );
     }
@@ -422,7 +422,7 @@ import { TagInput } from '@douyinfe/semi-ui';
     <TagInput
         draggable
         allowDuplicates={false}
-        defaultValue={['Semi','Hotsoon','Pipixia']}
+        defaultValue={['Semi', 'Hotsoon', 'Pipixia']}
         placeholder='please enter...'
         onChange={v => console.log(v)}
     />

content/input/taginput/index.md

@@ -24,7 +24,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
@@ -67,7 +67,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 () => (
     <TagInput 
         showClear 
-        defaultValue={['抖音','火山']} 
+        defaultValue={['抖音', '火山']} 
         placeholder='请输入...'
         onChange={v => console.log(v)}
     />
@@ -84,7 +84,7 @@ import { TagInput } from '@douyinfe/semi-ui';
     <TagInput 
         disabled 
         showClear 
-        defaultValue={['抖音','火山','西瓜视频']} 
+        defaultValue={['抖音', '火山', '西瓜视频']} 
         placeholder='请输入...'
     />
 );
@@ -161,7 +161,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         addOnBlur={true}
         placeholder='请输入...'
         onChange={v => console.log(v)}
@@ -179,7 +179,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 
 () => (
     <TagInput
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         allowDuplicates={false}
         placeholder='请输入...'
         onChange={v => console.log(v)}
@@ -235,7 +235,7 @@ import { TagInput } from '@douyinfe/semi-ui';
         maxTagCount={2}
         showRestTagsPopover={true}
         restTagsPopoverProps={{ position: 'top' }}
-        defaultValue={['抖音','火山','西瓜视频']}
+        defaultValue={['抖音', '火山', '西瓜视频']}
         onChange={v => console.log(v)}
     />
 );
@@ -293,7 +293,7 @@ class TagInputDemo extends React.Component {
         return (
             <TagInput
                 inputValue={this.state.value}
-                onInputChange={(v,e) => this.handleInputChange(v,e)}
+                onInputChange={(v, e) => this.handleInputChange(v, e)}
             />
         );
     }
@@ -315,8 +315,8 @@ import { TagInput } from '@douyinfe/semi-ui';
         onBlur={e => {console.log(`onBlur`);}} 
         onChange={tag => {console.log(`onChange,当前标签数组：${tag}`);}} 
         onAdd={tag => {console.log(`onAdd，新增：${tag}`);}} 
-        onRemove={(v,i) => {console.log(`onRemove，移除：${v}, 序号：${i}`);}} 
-        onInputChange={(input,e) => {console.log(`onInputChange，当前输入内容：${input}`);}} 
+        onRemove={(v, i) => {console.log(`onRemove，移除：${v}, 序号：${i}`);}} 
+        onInputChange={(input, e) => {console.log(`onInputChange，当前输入内容：${input}`);}} 
     />
 );
 ```
@@ -343,7 +343,7 @@ class TagInputDemo extends React.Component {
     render() {
         return (
             <>
-                <TagInput defaultValue={['抖音','火山']} ref={this.ref} />
+                <TagInput defaultValue={['抖音', '火山']} ref={this.ref} />
                 <Button style={{ marginTop:10 }} onClick={this.handleTagInputFocus}>
                     点击按钮聚焦
                 </Button>
@@ -373,10 +373,10 @@ class CustomRender extends React.Component {
             { "name": "曲晨一", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" },
             { "name": "文嘉茂", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" },
         ];
-        this.mapList = new Map(this.list.map( item => [item.name,item]));
+        this.mapList = new Map(this.list.map( item => [item.name, item]));
     }
 
-    renderTagItem(value,index) {
+    renderTagItem(value, index) {
         const data = this.mapList.get(value);
         return (
             <div 
@@ -401,7 +401,7 @@ class CustomRender extends React.Component {
             <TagInput 
                 value={value} 
                 onChange={value => this.setState({ value })}
-                renderTagItem={(value,index) => this.renderTagItem(value,index)}
+                renderTagItem={(value, index) => this.renderTagItem(value, index)}
             />
         );
     }

content/input/timepicker/index.md

@@ -91,7 +91,7 @@ import { TimePicker, Button } from '@douyinfe/semi-ui';
 function Demo() {
     const [open, setOpen] = useState(false);
     const closePanel = () => setOpen(false);
-    const onOpenChange = (open) =>  {
+    const onOpenChange = (open) => {
         setOpen(open);
         console.log(open);
     };

content/input/treeselect/index-en-US.md

@@ -724,7 +724,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -938,7 +938,7 @@ class Demo extends React.Component {
             const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
             return rec(z + 1);
         }
-        return {gData, total: calcTotal(x, y, z)};
+        return { gData, total: calcTotal(x, y, z) };
     }
 
       

content/input/treeselect/index.md

@@ -682,7 +682,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -900,7 +900,7 @@ class Demo extends React.Component {
             const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
             return rec(z + 1);
         }
-        return {gData, total: calcTotal(x, y, z)};
+        return { gData, total: calcTotal(x, y, z) };
     }
 
       
@@ -1242,7 +1242,7 @@ function Demo() {
                 multiple
                 maxTagCount={2}
                 renderSelectedItem={(item, { index, onClose }) => {
-                    return  ({ 
+                    return ({ 
                         content: (
                             <Tag 
                                 key={index} 

content/input/upload/index-en-US.md

@@ -166,7 +166,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
         color: 'var(--semi-color-white)',
     };
     
-    const hoverMask =  (<div style={style}>
+    const hoverMask = (<div style={style}>
         <IconCamera />
     </div>);
 
@@ -507,7 +507,7 @@ import { IconUpload, IconDownload, IconEyeOpened, IconDelete } from '@douyinfe/s
         }
     ];
     const renderFileOperation = (fileItem) => (
-        <div style={{ display: 'flex',columnGap: 8, padding: '0 8px' }}>
+        <div style={{ display: 'flex', columnGap: 8, padding: '0 8px' }}>
             <Button icon={<IconEyeOpened></IconEyeOpened>} type="tertiary" theme="borderless" size="small"></Button>
             <Button icon={<IconDownload></IconDownload>} type="tertiary" theme="borderless" size="small"></Button>
             <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type="tertiary" theme="borderless" size="small"></Button>

content/input/upload/index.md

@@ -170,7 +170,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
         color: 'var(--semi-color-white)',
     };
     
-    const hoverMask =  (<div style={style}>
+    const hoverMask = (<div style={style}>
         <IconCamera />
     </div>);
 
@@ -511,16 +511,16 @@ import { IconUpload, IconDownload, IconEyeOpened } from '@douyinfe/semi-icons';
         }
     ];
     const renderFileOperation = (fileItem) => (
-        <div style={{display: 'flex',columnGap: 8, padding: '0 8px'}}>
+        <div style={{ display: 'flex', columnGap: 8, padding: '0 8px' }}>
             <Button icon={<IconEyeOpened></IconEyeOpened>} type="tertiary" theme="borderless" size="small"></Button>
             <Button icon={<IconDownload></IconDownload>} type="tertiary" theme="borderless" size="small"></Button>
             <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type="tertiary" theme="borderless" size="small"></Button>
         </div>
-    )
-    return <Upload action={action} defaultFileList={defaultFileList} itemStyle={{width: 300}} renderFileOperation={renderFileOperation}>
-            <Button icon={<IconUpload />} theme="light">点击上传</Button>
-        </Upload>
-    }
+    );
+    return <Upload action={action} defaultFileList={defaultFileList} itemStyle={{ width: 300 }} renderFileOperation={renderFileOperation}>
+        <Button icon={<IconUpload />} theme="light">点击上传</Button>
+    </Upload>;
+};
 ```
 
 ### 默认文件列表
@@ -726,7 +726,7 @@ import { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';
     const handlePreview = (file) => {
         const feature = "width=300,height=300";
         window.open(file.url, 'imagePreview', feature);
-    }
+    };
     return (
         <>
             <Upload
@@ -737,7 +737,7 @@ import { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';
                 multiple
                 defaultFileList={defaultFileList}
                 onPreviewClick={handlePreview}
-                renderPicPreviewIcon={()=><IconEyeOpened style={{color: 'var(--semi-color-white)', fontSize: 24 }} />}
+                renderPicPreviewIcon={()=><IconEyeOpened style={{ color: 'var(--semi-color-white)', fontSize: 24 }} />}
             >
                 <IconPlus size="extra-large" />
             </Upload>

content/navigation/anchor/index-en-US.md

@@ -63,7 +63,7 @@ import { Anchor } from '@douyinfe/semi-ui';
                 getContainer={getContainer}
                 offsetTop={100}
                 targetOffset={100} // v>=1.9
-                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3}} >
+                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                 <Anchor.Link href="#Basic_Usage" title="Fixed Anchor" />
                 <Anchor.Link href="#Integrated_Usage" title="Integrated Usage" />
                 <Anchor.Link href="#Size" title="Size" />

content/navigation/anchor/index.md

@@ -50,7 +50,7 @@ import { Anchor } from '@douyinfe/semi-ui';
 import React from 'react';
 import { Anchor } from '@douyinfe/semi-ui';
 
-() =>  {
+() => {
     const getContainer = () => {
         return document.querySelector('window');
     };
@@ -61,7 +61,7 @@ import { Anchor } from '@douyinfe/semi-ui';
                 getContainer={getContainer}
                 offsetTop={100}
                 targetOffset={100} // v>=1.9
-                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3}} >
+                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                 <Anchor.Link href="#基本示例" title="我是固定的 Anchor" />
                 <Anchor.Link href="#综合使用" title="综合使用" />
                 <Anchor.Link href="#尺寸" title="尺寸" />

content/navigation/breadcrumb/index-en-US.md

@@ -131,19 +131,19 @@ import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
             <br/>
             <Text size="small">No truncation</Text>
             <Breadcrumb
-                showTooltip={{width: 'auto'}}
+                showTooltip={{ width: 'auto' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">Ellipsis from middle of text</Text>
             <Breadcrumb
-                showTooltip={{ellipsisPos: 'middle'}}
+                showTooltip={{ ellipsisPos: 'middle' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">Customize tooltip</Text>
             <Breadcrumb
-                showTooltip={{opts: {position: 'topLeft'}}}
+                showTooltip={{ opts: { position: 'topLeft' } }}
                 routes={routes}
             />
         </>

content/navigation/breadcrumb/index.md

@@ -135,19 +135,19 @@ import { Breadcrumb, Typography } from '@douyinfe/semi-ui';
             <br/>
             <Text size="small">不截断</Text>
             <Breadcrumb
-                showTooltip={{width: 'auto'}}
+                showTooltip={{ width: 'auto' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">从标题中间开始省略</Text>
             <Breadcrumb
-                showTooltip={{ellipsisPos: 'middle'}}
+                showTooltip={{ ellipsisPos: 'middle' }}
                 routes={routes}
             />
             <br/>
             <Text size="small">自定义 Tooltip 参数</Text>
             <Breadcrumb
-                showTooltip={{opts: {position: 'topLeft'}}}
+                showTooltip={{ opts: { position: 'topLeft' } }}
                 routes={routes}
             />
         </>

content/navigation/navigation/index-en-US.md

@@ -340,7 +340,7 @@ class NavApp extends React.Component {
                                 </Dropdown.Menu>
                             }
                         >
-                            <Avatar size="small" color='light-blue' style={{margin: 4}}>BD</Avatar>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
                             <span>Bytedancer</span>
                         </Dropdown>
                     }
@@ -426,7 +426,7 @@ class NavApp extends React.Component {
                                 </Dropdown.Menu>
                             }
                         >
-                            <Avatar size="small" color='light-blue' style={{margin: 4}}>BD</Avatar>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
                             <span>Bytedancer</span>
                         </Dropdown>
                     </>
@@ -476,13 +476,13 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[
-                    {itemKey:'user', text:'User Management', icon: <IconUser /> },
-                    {itemKey:'union', text:'guild center', icon: <IconStar /> },
+                    { itemKey:'user', text:'User Management', icon: <IconUser /> },
+                    { itemKey:'union', text:'guild center', icon: <IconStar /> },
                     {
                         text:'Task platform',
                         icon: <IconSetting />,
                         itemKey:'job',
-                        items: ['task management','user task query'],
+                        items: ['task management', 'user task query'],
                     },
                 ]}
                 onSelect={key => console.log(key)}
@@ -521,7 +521,7 @@ class NavApp extends React.Component {
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[
-                    {itemKey:'user', text:'User Management', icon: <IconUser /> },
+                    { itemKey:'user', text:'User Management', icon: <IconUser /> },
                     {
                         text:'Task platform',
                         icon: <IconSetting />,
@@ -530,13 +530,13 @@ class NavApp extends React.Component {
                             text:'Task 1',
                             icon: <IconSetting />,
                             itemKey:'mission1',
-                            items: ['Task 2',{
+                            items: ['Task 2', {
                                 text:'Task 3 disassembly',
                                 icon: <IconSetting />,
                                 itemKey:'mission3',
-                                items: ['Subtask 1','Subtask 2'],
+                                items: ['Subtask 1', 'Subtask 2'],
                             }, ],
-                        },],
+                        }, ],
                     },
                 ]}
                 onSelect={key => console.log(key)}

content/navigation/steps/index.md

@@ -67,7 +67,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{ display:'flex',justifyContent:'center' }}>
+    <div style={{ display:'flex', justifyContent:'center' }}>
         <Steps type="nav" current={1} style={{ margin:'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
@@ -101,7 +101,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{ display:'flex',justifyContent:'center' }}>
+    <div style={{ display:'flex', justifyContent:'center' }}>
         <Steps type="nav" size="small" current={1} style={{ margin:'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />

content/navigation/tree/index-en-US.md

@@ -454,8 +454,8 @@ import { Tree } from '@douyinfe/semi-ui';
         <Tree
             treeDataSimpleJson={json}
             multiple
-            onChange={e => console.log('All selected values: ',e)}
-            onSelect={e => console.log('Current item: ',e)}
+            onChange={e => console.log('All selected values: ', e)}
+            onSelect={e => console.log('Current item: ', e)}
             style={style}
         />
 
@@ -1095,7 +1095,7 @@ class Demo extends React.Component {
     constructor() {
         super();
         this.state = {
-            expandedKeys: ['0','0-0']
+            expandedKeys: ['0', '0-0']
         };
     }
     onExpand(value) {

content/navigation/tree/index.md

@@ -1117,7 +1117,7 @@ class Demo extends React.Component {
     constructor() {
         super();
         this.state = {
-            expandedKeys: ['0','0-0']
+            expandedKeys: ['0', '0-0']
         };
     }
     onExpand(value) {

content/other/configprovider/index-en-US.md

@@ -82,17 +82,17 @@ import en_GB from '@douyinfe/semi-ui/locale/source/en_GB';
 function Demo(props = {}) {
     const { Option } = Select;
     const [direction, setDirection] = useState();
-    const flexStyle = {display: 'flex', marginBottom: 32, flexWrap: 'wrap'};
-    const titleStyle = {margin: '50px 0 16px 0'};
-    const rowStyle = {margin: '16px 10px'};
+    const flexStyle = { display: 'flex', marginBottom: 32, flexWrap: 'wrap' };
+    const titleStyle = { margin: '50px 0 16px 0' };
+    const rowStyle = { margin: '16px 10px' };
     const badgeStyle = {
         width: '42px',
         height: '42px',
         borderRadius: '4px',
         display: 'inline-block',
     };
-    const tagStyle = {marginRight: 8, marginBottom: 8};
-    const buttonStyle = {...tagStyle};
+    const tagStyle = { marginRight: 8, marginBottom: 8 };
+    const buttonStyle = { ...tagStyle };
     const opts = {
         title: 'Hi,Bytedance',
         content: 'ies dance dance dance',
@@ -174,30 +174,30 @@ function Demo(props = {}) {
                         <br/><br/>
                         <Input prefix="Prefix" showClear></Input>
                         <br/><br/>
-                        <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
+                        <Input suffix={<Typography.Text strong type='secondary' style={{ margin: '0 8px' }}>Suffix</Typography.Text>} showClear></Input>
                         <br/><br/>
                         <TextArea placeholder="Input something" maxCount={100} />
                         <br/><br/>
                         <div style={flexStyle}>
-                            <Switch style={{marginRight: 8}} defaultChecked={true}></Switch>
-                            <Switch style={{marginRight: 8}}></Switch>
-                            <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
+                            <Switch style={{ marginRight: 8 }} defaultChecked={true}></Switch>
+                            <Switch style={{ marginRight: 8 }}></Switch>
+                            <Switch disabled defaultChecked={true} style={{ marginRight: 8 }}></Switch>
                         </div>
                         <div style={flexStyle}>
-                            <Checkbox style={{marginRight: 8}} defaultChecked>Checkbox</Checkbox>
-                            <Checkbox style={{marginRight: 8}} disabled defaultChecked>Disabled Checkbox</Checkbox>
-                            <Checkbox style={{marginRight: 8}} disabled>Disabled Checkbox</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} defaultChecked>Checkbox</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} disabled defaultChecked>Disabled Checkbox</Checkbox>
+                            <Checkbox style={{ marginRight: 8 }} disabled>Disabled Checkbox</Checkbox>
                         </div>
-                        <div style={{...flexStyle, marginBottom: 0}}>
-                            <Radio style={{marginRight: 8}} defaultChecked>Radio</Radio>
-                            <Radio style={{marginRight: 8}} disabled defaultChecked>Disabled Radio</Radio>
-                            <Radio style={{marginRight: 8}} disabled>Disabled Radio</Radio>
+                        <div style={{ ...flexStyle, marginBottom: 0 }}>
+                            <Radio style={{ marginRight: 8 }} defaultChecked>Radio</Radio>
+                            <Radio style={{ marginRight: 8 }} disabled defaultChecked>Disabled Radio</Radio>
+                            <Radio style={{ marginRight: 8 }} disabled>Disabled Radio</Radio>
                         </div>
                     </Col>
                     <Col span={12}>
-                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
+                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{ width: '100%' }}/>
                         <br/><br/>
-                        <TimePicker style={{width: '100%'}} />
+                        <TimePicker style={{ width: '100%' }} />
                         <br/><br/>
                         <Select style={{ width: '100%' }} placeholder="Select-single">
                             <Option value='abc'>Semi</Option>
@@ -313,12 +313,12 @@ function Demo(props = {}) {
                         <Tag color='white' style={tagStyle}> white tag </Tag>
                     </div>
                     <br/>
-                    <div style={{display: 'flex', alignItems: 'center'}}>
-                        <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>
                         <Tooltip content={'hi semi-design'}>
-                            <Tag style={{marginRight: 8}}>I am Tooltip</Tag>
+                            <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
                         </Tooltip>
-                        <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
+                        <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />
                     </div>
                     <br/>
                     <Timeline>

content/other/configprovider/index.md

@@ -177,14 +177,14 @@ function Demo(props = {}) {
                         <br/><br/>
                         <Input prefix="Prefix" showClear></Input>
                         <br/><br/>
-                        <Input suffix={<Typography.Text strong type='secondary' style={{margin: '0 8px'}}>Suffix</Typography.Text>} showClear></Input>
+                        <Input suffix={<Typography.Text strong type='secondary' style={{ margin: '0 8px' }}>Suffix</Typography.Text>} showClear></Input>
                         <br/><br/>
                         <TextArea placeholder="文本框" maxCount={100} />
                         <br/><br/>
                         <div style={flexStyle}>
                             <Switch style={{ marginRight: 8 }} defaultChecked={true}></Switch>
                             <Switch style={{ marginRight: 8 }}></Switch>
-                            <Switch disabled defaultChecked={true} style={{marginRight: 8}}></Switch>
+                            <Switch disabled defaultChecked={true} style={{ marginRight: 8 }}></Switch>
                         </div>
                         <div style={flexStyle}>
                             <Checkbox style={{ marginRight: 8 }} defaultChecked>多选框</Checkbox>
@@ -198,7 +198,7 @@ function Demo(props = {}) {
                         </div>
                     </Col>
                     <Col span={12}>
-                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{width: '100%'}}/>
+                        <DatePicker onChange={(date, dateString) => console.log(dateString)} style={{ width: '100%' }}/>
                         <br/><br/>
                         <TimePicker style={{ width: '100%' }} />
                         <br/><br/>
@@ -316,12 +316,12 @@ function Demo(props = {}) {
                         <Tag color='white' style={tagStyle}> white tag </Tag>
                     </div>
                     <br/>
-                    <div style={{display: 'flex', alignItems: 'center'}}>
-                        <Popover content={'hi semi-design'} style={{padding: 8}}><Tag style={{marginRight: 8}}>I am Popover</Tag></Popover>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>
                         <Tooltip content={'hi semi-design'}>
                             <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
                         </Tooltip>
-                        <Rating defaultValue={3} size='small' style={{marginRight: 8}} />
+                        <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />
                     </div>
                     <br/>
                     <Timeline>
@@ -348,7 +348,7 @@ function Demo(props = {}) {
                         style={buttonStyle}
                         ghost={false}
                         icon={<IconVigoLogo />}
-                        onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{color: 'pink'}} /> })}
+                        onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}
                     />
                     <br/>
                     <Button type='primary' onClick={() => Modal.success(opts)} style={buttonStyle}>成功信息的弹窗</Button>

content/other/locale/index-en-US.md

@@ -83,10 +83,10 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <LocaleProvider locale={en_GB}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
                 <LocaleProvider locale={ja_JP}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
             </>
         );
@@ -243,10 +243,10 @@ class I18nDemo extends React.Component {
                         />
                     </div>
                     <h5>DatePicker</h5>
-                    <DatePicker style={{ ...style, width: 250}} />
-                    <DatePicker style={{ ...style, width: 300}} type='dateTime' />
-                    <DatePicker style={{ ...style, width: 300}} type='dateRange' />
-                    <DatePicker style={{ ...style, width: 450}} type='dateTimeRange' />
+                    <DatePicker style={{ ...style, width: 250 }} />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateTime' />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateRange' />
+                    <DatePicker style={{ ...style, width: 450 }} type='dateTimeRange' />
                     <h5>TimePicker</h5>
                     <TimePicker style={style} />
                     <TimePicker use12Hours style={style} /><br/><br/>
@@ -267,7 +267,7 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 20 }}>
-                    <Select onChange={this.onLanguageChange} insetLabel='Switch Language' style={{width: 250}} defaultValue='en_GB'>
+                    <Select onChange={this.onLanguageChange} insetLabel='Switch Language' style={{ width: 250 }} defaultValue='en_GB'>
                         <Select.Option value='zh_CN'>Chinese</Select.Option>
                         <Select.Option value='en_GB'>English</Select.Option>
                         <Select.Option value='ja_JP'>Japanese</Select.Option>

content/other/locale/index.md

@@ -82,10 +82,10 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <LocaleProvider locale={en_GB}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
                 <LocaleProvider locale={ja_JP}>
-                    <Pagination total={100} showTotal showSizeChanger style={{margin: 20}} />
+                    <Pagination total={100} showTotal showSizeChanger style={{ margin: 20 }} />
                 </LocaleProvider>
             </>
         );
@@ -247,10 +247,10 @@ class I18nDemo extends React.Component {
                         />
                     </div>
                     <h5>DatePicker</h5>
-                    <DatePicker style={{ ...style, width: 250}} />
-                    <DatePicker style={{ ...style, width: 300}} type='dateTime' />
-                    <DatePicker style={{ ...style, width: 300}} type='dateRange' />
-                    <DatePicker style={{ ...style, width: 450}} type='dateTimeRange' />
+                    <DatePicker style={{ ...style, width: 250 }} />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateTime' />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateRange' />
+                    <DatePicker style={{ ...style, width: 450 }} type='dateTimeRange' />
                     <h5>TimePicker</h5>
                     <TimePicker style={style} />
                     <TimePicker use12Hours style={style} /><br/><br/>
@@ -277,7 +277,7 @@ class I18nDemo extends React.Component {
         return (
             <>
                 <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 20 }}>
-                    <Select onChange={this.onLanguageChange} insetLabel='切换语言' style={{width: 250}} defaultValue='zh_CN'>
+                    <Select onChange={this.onLanguageChange} insetLabel='切换语言' style={{ width: 250 }} defaultValue='zh_CN'>
                         <Select.Option value='zh_CN'>简体中文</Select.Option>
                         <Select.Option value='en_GB'>英语（英）</Select.Option>
                         <Select.Option value='ja_JP'>日语</Select.Option>

content/show/avatar/index-en-US.md

@@ -248,7 +248,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
             <AvatarGroup overlapFrom={'end'}>
                 <Avatar color="red" alt='Lisa LeBlanc'>LL</Avatar>
                 <Avatar alt='Caroline Xiao'>CX</Avatar>
-                <Avatar color="amber"  alt='Rafal Matin'>RM</Avatar>
+                <Avatar color="amber" alt='Rafal Matin'>RM</Avatar>
                 <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>
                 <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>
             </AvatarGroup>

content/show/avatar/index.md

@@ -247,7 +247,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
             <AvatarGroup overlapFrom={'end'}>
                 <Avatar color="red" alt='Lisa LeBlanc'>LL</Avatar>
                 <Avatar alt='Caroline Xiao'>CX</Avatar>
-                <Avatar color="amber"  alt='Rafal Matin'>RM</Avatar>
+                <Avatar color="amber" alt='Rafal Matin'>RM</Avatar>
                 <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>
                 <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>
             </AvatarGroup>

content/show/badge/index-en-US.md

@@ -43,7 +43,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
             <br/>
             <br/>
-            <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
+            <Badge count={<IconLock style={{ color:'var(--semi-color-primary)' }}/>}>
                 <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
             </Badge>
             <br/>
@@ -152,7 +152,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} theme='solid' >
                     <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
@@ -179,7 +179,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
                     <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                 </Badge>
             </div>
-            <div style={{padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)'}}>
+            <div style={{ padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                 <Badge dot theme='inverted' >
                     <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                 </Badge>
@@ -205,7 +205,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} type='primary' >
                     <Avatar color='violet' shape='square' style={style}>MR</Avatar>
@@ -223,7 +223,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
             <br/>
             <div style={bgStyle}>
-                <Badge count={5}  type='warning' >
+                <Badge count={5} type='warning' >
                     <Avatar color='red' shape='square' style={style}>JL</Avatar>
                 </Badge>
             </div>
@@ -265,7 +265,7 @@ import { Badge } from '@douyinfe/semi-ui';
         <br/>
         <span><Badge dot type='tertiary' /> info</span>
         <br/>
-        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)'}} /> success</span>
+        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)' }} /> success</span>
         <br/>
         <span><Badge dot type='warning' /> warning</span>
         <br/>

content/show/badge/index.md

@@ -41,7 +41,7 @@ import { IconLock } from '@douyinfe/semi-icons';
             </Badge>
             <br/>
             <br/>
-            <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
+            <Badge count={<IconLock style={{ color:'var(--semi-color-primary)' }}/>}>
                 <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
             </Badge>
             <br/>
@@ -150,7 +150,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} theme='solid' >
                     <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
@@ -177,7 +177,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
                     <Avatar color='lime' shape='square' style={style}>HW</Avatar>
                 </Badge>
             </div>
-            <div style={{padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)'}}>
+            <div style={{ padding: '8px', borderRadius:'4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                 <Badge dot theme='inverted' >
                     <Avatar color='lime' shape='square' style={style}>XM</Avatar>
                 </Badge>
@@ -203,7 +203,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
         borderRadius: '4px',
     };
     return (
-        <div style={{display: 'flex'}}>
+        <div style={{ display: 'flex' }}>
             <div style={bgStyle}>
                 <Badge count={5} type='primary' >
                     <Avatar color='violet' shape='square' style={style}>MR</Avatar>
@@ -221,7 +221,7 @@ import { Badge, Avatar } from '@douyinfe/semi-ui';
             </div>
             <br/>
             <div style={bgStyle}>
-                <Badge count={5}  type='warning' >
+                <Badge count={5} type='warning' >
                     <Avatar color='red' shape='square' style={style}>JL</Avatar>
                 </Badge>
             </div>

content/show/calendar/index-en-US.md

@@ -252,9 +252,9 @@ import { Calendar } from '@douyinfe/semi-ui';
         if (dateString === new Date(2019, 6, 23).toString()) {
             return (
                 <>
-                    <div style={{...dailyEventStyle, top: '500px', height: 50}}>Eating 🍰</div>
-                    <div style={{...dailyEventStyle, top: '0', height: 400}}>Sleeping 😪</div>
-                    <div style={{...dailyEventStyle, top: '700px', height: 100}}>Playstation 🎮</div>
+                    <div style={{ ...dailyEventStyle, top: '500px', height: 50 }}>Eating 🍰</div>
+                    <div style={{ ...dailyEventStyle, top: '0', height: 400 }}>Sleeping 😪</div>
+                    <div style={{ ...dailyEventStyle, top: '700px', height: 100 }}>Playstation 🎮</div>
                 </>
             );
         } else {

content/show/card/index-en-US.md

@@ -88,7 +88,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </>
@@ -199,7 +199,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
             <br/>
@@ -231,7 +231,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </div>
@@ -352,7 +352,7 @@ function Demo() {
                 padding: 20
             }}
         >
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={8}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -369,7 +369,7 @@ function Demo() {
                     </Card>
                 </Col>
             </Row>
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={16}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -443,7 +443,7 @@ function Demo() {
                     <Meta 
                         title={
                             <Skeleton
-                                style={{width:80}}
+                                style={{ width:80 }}
                                 placeholder={<Title />}
                                 loading={loading}
                             >
@@ -454,7 +454,7 @@ function Demo() {
                         } 
                         description={
                             <Skeleton 
-                                style={{width:150, marginTop: 12}} 
+                                style={{ width:150, marginTop: 12 }} 
                                 placeholder={<Paragraph rows={1} />} 
                                 loading={loading}
                             >
@@ -475,14 +475,14 @@ function Demo() {
                     />
                 }
                 headerExtraContent={
-                    <Skeleton style={{width: 50}} placeholder={<Paragraph rows={1} />} loading={loading}>
+                    <Skeleton style={{ width: 50 }} placeholder={<Paragraph rows={1} />} loading={loading}>
                         <Typography.Text link>
                             More
                         </Typography.Text>
                     </Skeleton>
                 }
                 cover={ 
-                    <Skeleton style={{maxWidth: '100%', height: 260}} placeholder={<Image />} loading={loading}>
+                    <Skeleton style={{ maxWidth: '100%', height: 260 }} placeholder={<Image />} loading={loading}>
                         <img 
                             alt="example" 
                             src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
@@ -593,7 +593,7 @@ function Demo() {
             <br />
             <CardGroup spacing={spacing}>
                 {
-                    new Array(8).fill(null).map((v,idx)=>(
+                    new Array(8).fill(null).map((v, idx)=>(
                         <Card 
                             key={idx}
                             shadows='hover'
@@ -631,7 +631,7 @@ function Demo() {
     return (
         <CardGroup type='grid'>
             {
-                new Array(7).fill(null).map((v,idx)=>(
+                new Array(7).fill(null).map((v, idx)=>(
                     <Card 
                         key={idx}
                         shadows='hover'

content/show/card/index.md

@@ -88,7 +88,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </>
@@ -199,7 +199,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
             <br/>
@@ -231,7 +231,7 @@ function Demo() {
                         </article>
                     }
                 >
-                    <IconInfoCircle style={{color:'var(--semi-color-primary)'}}/>
+                    <IconInfoCircle style={{ color:'var(--semi-color-primary)' }}/>
                 </Popover>
             </Card>
         </div>
@@ -352,7 +352,7 @@ function Demo() {
                 padding: 20
             }}
         >
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={8}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -369,7 +369,7 @@ function Demo() {
                     </Card>
                 </Col>
             </Row>
-            <Row gutter={[16,16]}>
+            <Row gutter={[16, 16]}>
                 <Col span={16}>
                     <Card title='Card Title' bordered={false} >
                         Card Content
@@ -593,7 +593,7 @@ function Demo() {
             <br />
             <CardGroup spacing={spacing}>
                 {
-                    new Array(8).fill(null).map((v,idx)=>(
+                    new Array(8).fill(null).map((v, idx)=>(
                         <Card 
                             key={idx}
                             shadows='hover'
@@ -631,7 +631,7 @@ function Demo() {
     return (
         <CardGroup type='grid'>
             {
-                new Array(7).fill(null).map((v,idx)=>(
+                new Array(7).fill(null).map((v, idx)=>(
                     <Card 
                         key={idx}
                         shadows='hover'

content/show/collapsible/index-en-US.md

@@ -30,7 +30,7 @@ import React, { useState } from 'react';
 import { Collapsible, Button } from '@douyinfe/semi-ui';
 
 () => {
-    const [isOpen ,setOpen] = useState();
+    const [isOpen, setOpen] = useState();
     const toggle = () => {
         setOpen(!isOpen);
     };
@@ -201,14 +201,14 @@ import Collapsible from './index';
 
 ()=>{
     const collapseId = 'myCollapsible';
-    const [visible,setVisible]=useState(false);
+    const [visible, setVisible]=useState(false);
     return <>
         <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>
         <Collapsible isOpen={visible} id={collapseId}>
             <div>hide content</div>
         </Collapsible>
-    </>
-}
+    </>;
+};
 
 ```
 

content/show/collapsible/index.md

@@ -29,7 +29,7 @@ import React, { useState } from 'react';
 import { Collapsible, Button } from '@douyinfe/semi-ui';
 
 () => {
-    const [isOpen ,setOpen] = useState();
+    const [isOpen, setOpen] = useState();
     const toggle = () => {
         setOpen(!isOpen);
     };
@@ -231,14 +231,14 @@ import Collapsible from './index';
 
 ()=>{
     const collapseId = 'myCollapsible';
-    const [visible,setVisible]=useState(false);
+    const [visible, setVisible]=useState(false);
     return <>
         <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>    
         <Collapsible isOpen={visible} id={collapseId}>
             <div>hide content</div>
         </Collapsible>
-    </>
-}
+    </>;
+};
 
 ```
 

content/show/empty/index-en-US.md

@@ -30,8 +30,8 @@ import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinf
 
 () => (
     <Empty
-        image={<IllustrationConstruction style={{width: 150, height: 150}} />}
-        darkModeImage={<IllustrationConstructionDark style={{width: 150, height: 150}} />}
+        image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
+        darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
         title={'Function under construction'}
         description="The current function is not yet open, so stay tuned."
     />
@@ -49,8 +49,8 @@ import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi
 
 () => (
     <Empty
-        image={<IllustrationNoContent style={{width: 150, height: 150}} />}
-        darkModeImage={<IllustrationNoContentDark style={{width: 150, height: 150}} />}
+        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
+        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
         title="Empty status header"
         description="Start creating your first dashboard!"
     >
@@ -97,8 +97,8 @@ import { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-ill
 () => (
     <Empty
         title={'Created successfully'}
-        image={<IllustrationSuccess style={{width: 150, height: 150}} />}
-        darkModeImage={<IllustrationSuccessDark style={{width: 150, height: 150}} />}
+        image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}
+        darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}
         layout="horizontal"
         description="This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long. This is a very long description text. This layout is recommended when the text is too long."
         style={{ width: 800, margin: '0 auto' }}

content/show/empty/index.md

@@ -29,8 +29,8 @@ import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinf
 
 () => (
     <Empty
-        image={<IllustrationConstruction style={{width: 150, height: 150}} />}
-        darkModeImage={<IllustrationConstructionDark style={{width: 150, height: 150}} />}
+        image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
+        darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
         title={'功能建设中'}
         description="当前功能暂未开放，敬请期待。"
     />
@@ -48,8 +48,8 @@ import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi
 
 () => (
     <Empty
-        image={<IllustrationNoContent style={{width: 150, height: 150}} />}
-        darkModeImage={<IllustrationNoContentDark style={{width: 150, height: 150}} />}
+        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
+        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
         title="空状态标题"
         description="开始创建你的第一个仪表盘吧！"
     >
@@ -96,8 +96,8 @@ import { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-ill
 () => (
     <Empty
         title={'创建成功'}
-        image={<IllustrationSuccess style={{width: 150, height: 150}} />}
-        darkModeImage={<IllustrationSuccessDark style={{width: 150, height: 150}} />}
+        image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}
+        darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}
         layout="horizontal"
         description="这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。"
         style={{ width: 800, margin: '0 auto' }}

content/show/image/index-en-US.md

@@ -57,7 +57,7 @@ import { Image } from '@douyinfe/semi-ui';
             height={200}
             src="https://load-error.jpeg"
             fallback={<IconUploadError style={{ fontSize: 50 }} />}
-            />
+        />
     </div>
 );
 ```
@@ -108,7 +108,7 @@ import { Image } from '@douyinfe/semi-ui';
 
 () => {
      return ( 
-          <Image
+         <Image
              width={300}
              height={200}
              src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract-small.jpeg'}

content/show/list/index-en-US.md

@@ -1098,8 +1098,8 @@ import { IconSearch } from '@douyinfe/semi-icons';
                 />
             </div>
         </div>
-    )
-}
+    );
+};
 ```
 
 ### Add delete item
@@ -1133,7 +1133,7 @@ import { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';
         if (item) {
             newList = list.filter(i => item !== i);
         } else {
-            newList = list.concat(data.slice(list.length, list.length + 1))
+            newList = list.concat(data.slice(list.length, list.length + 1));
         }
         setList(newList);
     };
@@ -1154,8 +1154,8 @@ import { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';
                         </div>
                     }
                 />
-                <div style={{ margin: 4, fontSize: 14  }} onClick={() => updateList()}>
-                    <Button theme='borderless'  icon={<IconPlusCircle />}  style={{ marginRight: 4, color: 'var(--semi-color-info)' }}>
+                <div style={{ margin: 4, fontSize: 14 }} onClick={() => updateList()}>
+                    <Button theme='borderless' icon={<IconPlusCircle />} style={{ marginRight: 4, color: 'var(--semi-color-info)' }}>
                     </Button>
                     Add book
                 </div>

content/show/list/index.md

@@ -1159,7 +1159,7 @@ import { IconMinusCircle, IconPlusCircle } from '@douyinfe/semi-icons';
                         </div>
                     }
                 />
-                <div style={{ margin: 4, fontSize: 14  }} onClick={() => updateList()}>
+                <div style={{ margin: 4, fontSize: 14 }} onClick={() => updateList()}>
                     <Button theme='borderless' icon={<IconPlusCircle />} style={{ marginRight: 4, color: 'var(--semi-color-info)' }}>
                     </Button>
                     新增书籍

content/show/modal/index-en-US.md

@@ -25,7 +25,7 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -84,7 +84,7 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -137,7 +137,7 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -189,7 +189,7 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -218,8 +218,8 @@ class modalDemo extends React.Component {
                     visible={this.state.visible}
                     onOk={this.handleOk}
                     onCancel={this.handleCancel}
-                    okButtonProps={{size: 'small', type: 'warning'}}
-                    cancelButtonProps={{size: 'small', disabled: true}}
+                    okButtonProps={{ size: 'small', type: 'warning' }}
+                    cancelButtonProps={{ size: 'small', disabled: true }}
                 >
                     <p>This is a modal with customized button props.</p>
                     <p>More content...</p>
@@ -241,7 +241,7 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -296,7 +296,7 @@ import { Modal, Button } from '@douyinfe/semi-ui';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -326,10 +326,10 @@ class modalDemo extends React.Component {
                     onOk={this.handleOk}
                     onCancel={this.handleCancel}
                     centered
-                    bodyStyle={{overflow: 'auto', height: 200}}
+                    bodyStyle={{ overflow: 'auto', height: 200 }}
                 >
-                    <p style={{lineHeight: 1.8}}>Semi Design is a design system developed and maintained by IES Front-end Team and UED Team</p>
-                    <p style={{lineHeight: 1.8}}>Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience with a user-centric, content-first, and human-friendly design system.
+                    <p style={{ lineHeight: 1.8 }}>Semi Design is a design system developed and maintained by IES Front-end Team and UED Team</p>
+                    <p style={{ lineHeight: 1.8 }}>Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience with a user-centric, content-first, and human-friendly design system.
                     </p>
                     <ul>
                         <li><p>Content-first</p></li>
@@ -356,7 +356,7 @@ import { IconVigoLogo, IconSemiLogo } from '@douyinfe/semi-icons';
 class modalDemo extends React.Component {
     constructor() {
         super();
-        this.state = {visible: false};
+        this.state = { visible: false };
         this.showDialog = this.showDialog.bind(this);
         this.handleOk = this.handleOk.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
@@ -379,17 +379,17 @@ class modalDemo extends React.Component {
     render() {
         const data = [
             {
-                icon: <IconSemiLogo style={{fontSize: 48}} />,
+                icon: <IconSemiLogo style={{ fontSize: 48 }} />,
                 title: 'Boost new feature adoption with Integration',
                 content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
             },
             {
-                icon: <IconVigoLogo style={{fontSize: 48}} />,
+                icon: <IconVigoLogo style={{ fontSize: 48 }} />,
                 title: 'Introducing Dark Mode',
                 content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
             },
             {
-                icon: <IconSemiLogo style={{fontSize: 48}} />,
+                icon: <IconSemiLogo style={{ fontSize: 48 }} />,
                 title: 'New List Component',
                 content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team'
             },
@@ -399,7 +399,7 @@ class modalDemo extends React.Component {
             margin: '4px 50px',
         };
         const footer = (
-            <div style={{textAlign: 'center'}}>
+            <div style={{ textAlign: 'center' }}>
                 <Button type="primary" theme="solid" onClick={this.handleOk} style={btnStyle}>
                     Continue
                 </Button>
@@ -418,7 +418,7 @@ class modalDemo extends React.Component {
                     onCancel={this.handleCancel}
                     footer={footer}
                 >
-                    <h3 style={{textAlign: 'center', fontSize: 24, margin: 40}}>Semi Design New Features</h3>
+                    <h3 style={{ textAlign: 'center', fontSize: 24, margin: 40 }}>Semi Design New Features</h3>
                     <List
                         dataSource={data}
                         split={false}
@@ -427,8 +427,8 @@ class modalDemo extends React.Component {
                                 header={item.icon}
                                 main={
                                     <div>
-                                        <h6 style={{margin: 0, fontSize: 16}}>{item.title}</h6>
-                                        <p style={{marginTop: 4, color: 'var(--semi-color-text-1)'}}>{item.content}</p>
+                                        <h6 style={{ margin: 0, fontSize: 16 }}>{item.title}</h6>
+                                        <p style={{ marginTop: 4, color: 'var(--semi-color-text-1)' }}>{item.content}</p>
                                     </div>
                                 }
                             />)
@@ -483,7 +483,7 @@ import { IconSend } from '@douyinfe/semi-icons';
 
 ModalComponent = function(props) {
     function success() {
-        Modal.success({ 'title': 'This is a success message', 'content': 'bla bla bla...'});
+        Modal.success({ 'title': 'This is a success message', 'content': 'bla bla bla...' });
     }
 
     function info() {

content/show/timeline/index-en-US.md

@@ -63,7 +63,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
         <Timeline.Item time='2019-07-14 10:35'>Default Style</Timeline.Item>
         <Timeline.Item time='2019-06-13 16:17' dot={(<IconAlertTriangle />)} type='warning'>Customized Icon</Timeline.Item>
         <Timeline.Item time='2019-05-14 18:34' color='pink'>Customized Color</Timeline.Item>
-        <Timeline.Item time='2019-04-10 12:20'><span style={{fontSize: '18px'}}>Customized Node Style</span></Timeline.Item>
+        <Timeline.Item time='2019-04-10 12:20'><span style={{ fontSize: '18px' }}>Customized Node Style</span></Timeline.Item>
     </Timeline>
 );
 ```
@@ -156,7 +156,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
             {
                 time:'2019-06-13 16:17',
                 extra:'Extra Information',
-                content:<span style={{fontSize: '18px'}}>Second Node Content</span>,
+                content:<span style={{ fontSize: '18px' }}>Second Node Content</span>,
                 color:'pink',
             },
             {

packages/semi-animation-react/_story/simple/index.jsx

@@ -53,14 +53,14 @@ export default class SimpleAnimation extends React.Component {
                 {({ value }) => {
                     const ratio = value / 50;
                     // hsl(48, 16%, 57%) => hsl(71, 100%, 87%)
-                    const start = `hsl(${(71 - 48) * ratio + 48}, ${(100 - 16) * ratio + 16}%, ${(87 - 57) * ratio
-                        + 57}%)`;
+                    const start = `hsl(${(71 - 48) * ratio + 48}, ${(100 - 16) * ratio + 16}%, ${(87 - 57) * ratio +
+                        57}%)`;
                     const stop = `${value}%`;
                     const end = `hsl(${value * 5 + 50}, 90%, 60%)`;
                     // hsl(170, 40%, 60%) => hsl(198, 63%, 38%)
                     // const color = `hsl(${value * 6 + 40}, 90%, 60%)`;
-                    const color = `hsl(${(198 - 170) * ratio + 170}, ${(63 - 40) * ratio + 40}%, ${(38 - 60) * ratio
-                        + 60}%)`;
+                    const color = `hsl(${(198 - 170) * ratio + 170}, ${(63 - 40) * ratio + 40}%, ${(38 - 60) * ratio +
+                        60}%)`;
                     const scale = 0.1 * ratio + 0.3;
                     const rotation = 45 * ratio + 'deg';
                     const coords = [value, value];

packages/semi-animation-react/src/StyledTransition.tsx

@@ -25,7 +25,7 @@ export interface StyledTransitionProps extends StyledAnimationProps {
 
 export interface StyledTransitionState {
     state: string | boolean;
-    lastChildren:  React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
+    lastChildren: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
     currentChildren: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
 }
 

packages/semi-animation/README.md

@@ -181,11 +181,11 @@ animation.on('frame', currentState => {
 });
 
 // The callbacks such as start and pause are the same as the frame above, and the parameters are also the same.
-animation.on('start', currentState => { /* ... */ })
-animation.on('pause', currentState => { /* ... */ })
-animation.on('resume', currentState => { /* ... */ })
-animation.on('rest', currentState => { /* ... */ })
-animation.on('stop', currentState => { /* ... */ })
+animation.on('start', currentState => { /* ... */ });
+animation.on('pause', currentState => { /* ... */ });
+animation.on('resume', currentState => { /* ... */ });
+animation.on('rest', currentState => { /* ... */ });
+animation.on('stop', currentState => { /* ... */ });
 ```
 
 ## Licence

packages/semi-foundation/datePicker/inputFoundation.ts

@@ -190,7 +190,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         const { valuePath, insetInputValue, format } = options;
         const { type, defaultPickerValue, dateFnsLocale } = this._adapter.getProps();
         const insetInputValueWithTime = cloneDeep(insetInputValue);
-        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue, format, dateFnsLocale  });
+        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue, format, dateFnsLocale });
 
         if (type.includes('Time')) {
             let timeStr = '';

packages/semi-foundation/rating/foundation.ts

@@ -126,7 +126,7 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
         let tempValue: number;
         let newValue: number;
         if (key === 'ArrowRight' || key === 'ArrowUp') {
-            tempValue = value + (reverse ?  - step : step);
+            tempValue = value + (reverse ? - step : step);
         } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
             tempValue = value + (reverse ? step : - step);
         }

packages/semi-foundation/tabs/foundation.ts

@@ -116,12 +116,12 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
         const isVertical = tabPosition === 'left';
 
         if (isVertical) {
-            if (event.key ===  "ArrowUp" || event.key ===  "ArrowDown") {
+            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
                 this.switchTabOnArrowPress(event, tabs);
                 this.handlePrevent(event);
             }
         } else {
-            if (event.key ===  "ArrowLeft" || event.key === "ArrowRight") {
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                 this.switchTabOnArrowPress(event, tabs);
                 this.handlePrevent(event);
             }
@@ -158,7 +158,7 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
                     tabs[index+ direction[event.key]].focus({ preventScroll });
                 } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
                     tabs[tabs.length - 1].focus({ preventScroll }); // focus last tab
-                } else if (event.key ===  "ArrowRight" || event.key == "ArrowDown") {
+                } else if (event.key === "ArrowRight" || event.key == "ArrowDown") {
                     tabs[0].focus({ preventScroll }); // focus first tab
                 }
             }

packages/semi-foundation/utils/getMotionObjFromProps.ts

@@ -27,7 +27,7 @@ export interface MergeMotionProps {
  * @param { props: Object } 
  * @returns { motion: Object }
  */
-export default function getMotionObjFromProps(props: MergeMotionProps)  {
+export default function getMotionObjFromProps(props: MergeMotionProps) {
     if (typeof props !== 'object' || props === null) {
         throw new TypeError(`props should be object type, got ${typeof props}`);
     }

packages/semi-icons/scripts/compileDist.js

@@ -4,7 +4,7 @@ const getWebpackConfig = require('../webpack.config');
 function compile() {
     return new Promise((resolve, reject) => {
         console.log('compile jsx start');
-        const config = getWebpackConfig({minimize: false});
+        const config = getWebpackConfig({ minimize: false });
         webpack(config, (err, stats) => {
             if (err) {
                 console.error(err);
@@ -30,7 +30,7 @@ function compile() {
 function compileMin() {
     return new Promise((resolve, reject) => {
         console.log('compile jsx with minimize start');
-        const config = getWebpackConfig({minimize: true});
+        const config = getWebpackConfig({ minimize: true });
         webpack(config, (err, stats) => {
             if (err) {
                 console.error(err);

packages/semi-scss-compile/README.md

@@ -27,7 +27,7 @@ semi-build-scss -f "path/to/foundation" -t "path/to/theme" -i "path/to/'@douyinf
 
 ```js
 
-const {compile} = require('@douyinfe/semi-scss-compile');
+const { compile } = require('@douyinfe/semi-scss-compile');
 const path = require('path');
 
 function resolve(dir) {
@@ -42,7 +42,7 @@ compile({
     iconPath: resolve('node_modules/@douyinfe/semi-icons'),
     outputPath:resolve('semi-ui/dist/css/semi.min.css'),
     isMin:true
-})
+});
 
 compile({
     foundationPath:resolve('semi-foundation/'),
@@ -50,18 +50,18 @@ compile({
     iconPath: resolve('node_modules/@douyinfe/semi-icons'),
     outputPath:resolve('semi-ui/dist/css/semi.css'),
     isMin:false
-})
+});
 ```
 
 ### Advanced API
 
 ```js
-const {generateScssMap, writeFile, compilerFromScssMap} = require('@douyinfe/semi-scss-compile');
+const { generateScssMap, writeFile, compilerFromScssMap } = require('@douyinfe/semi-scss-compile');
 const fs = require('fs-extra');
 
 const isMin = false;
-const scssMap = generateScssMap("path/to/foundation", "path/to/theme","path/to/'@douyinfe/semi-icons'");
-const tempDir = writeFile(scssMap)
+const scssMap = generateScssMap("path/to/foundation", "path/to/theme", "path/to/'@douyinfe/semi-icons'");
+const tempDir = writeFile(scssMap);
 const result = compilerFromScssMap(path.join(tempDir, 'index.scss'), isMin);
 fs.outputFileSync(outputPath, result.css);
 

packages/semi-scss-compile/src/utils/generateSCSSMap.ts

@@ -38,7 +38,7 @@ const generateComponentsScssMap = (foundationPath: string, iconPath?: string) =>
 
 
 const generateThemeScssMap = (themePath: string) => {
-    const fileList = ['_font.scss', '_palette.scss', 'global.scss','animation.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
+    const fileList = ['_font.scss', '_palette.scss', 'global.scss', 'animation.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
     const themeScssMap: { [key in typeof fileList[number]]?: string } = {};
     for (const fileName of fileList) {
         const scssAbsolutePath = path.join(themePath, 'scss', fileName);

packages/semi-ui/README.md

@@ -19,10 +19,10 @@ import ReactDOM from 'react-dom';
 import { Button, Switch } from '@douyinfe/semi-ui';
 
 const App = () => (
-  <>
-    <Button type="primary">primary button</Button>
-    <Switch size='large' />
-  </>
+    <>
+        <Button type="primary">primary button</Button>
+        <Switch size='large' />
+    </>
 );
 
 ReactDOM.render(<App />, document.querySelector('#app'));

packages/semi-ui/_test_/utils/table/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Table, Tag, Tooltip} from '../../../index';
+import { Table, Tag, Tooltip } from '../../../index';
 
-const {Column} = Table;
+const { Column } = Table;
 
 function getRandomNumber(end = 100, start = 0) {
     const number = Math.ceil(Math.random() * (end - start)) + start;
@@ -26,18 +26,18 @@ function getData(total = 25) {
 
 function getGroupData() {
     const data = [
-        {city: 'Beijing', job: 'FE', department: 'IES'},
-        {city: 'Beijing', job: 'BE', department: 'IES'},
-        {city: 'Shanghai', job: 'Android', department: 'IES'},
-        {city: 'Tokyo', job: 'Android', department: 'IES'},
-        {city: 'Shanghai', job: 'IOS', department: 'EE'},
-        {city: 'LA', job: 'SE', department: 'EE'},
-        {city: 'Beijing', job: 'Android', department: 'EE'},
-        {city: 'Tokyo', job: 'IOS', department: 'EE'},
-        {city: 'Tokyo', job: 'SE', department: 'DATA'},
-        {city: 'Shanghai', job: 'BE', department: 'DATA'},
-        {city: 'LA', job: 'Android', department: 'DATA'},
-        {city: 'LA', job: 'IOS', department: 'DATA'},
+        { city: 'Beijing', job: 'FE', department: 'IES' },
+        { city: 'Beijing', job: 'BE', department: 'IES' },
+        { city: 'Shanghai', job: 'Android', department: 'IES' },
+        { city: 'Tokyo', job: 'Android', department: 'IES' },
+        { city: 'Shanghai', job: 'IOS', department: 'EE' },
+        { city: 'LA', job: 'SE', department: 'EE' },
+        { city: 'Beijing', job: 'Android', department: 'EE' },
+        { city: 'Tokyo', job: 'IOS', department: 'EE' },
+        { city: 'Tokyo', job: 'SE', department: 'DATA' },
+        { city: 'Shanghai', job: 'BE', department: 'DATA' },
+        { city: 'LA', job: 'Android', department: 'DATA' },
+        { city: 'LA', job: 'IOS', department: 'DATA' },
     ];
     return data;
 }
@@ -97,18 +97,18 @@ function getJSXColumns() {
 
 function getGroupColumns() {
     const columns = [
-        {dataIndex: 'city', title: 'City', width: 400, sorter: (a, b) => (a.city > b.city ? 1 : -1)},
+        { dataIndex: 'city', title: 'City', width: 400, sorter: (a, b) => (a.city > b.city ? 1 : -1) },
         {
             dataIndex: 'job',
             title: 'Job',
             width: 200,
             filters: [
-                {text: 'IOS', value: 'IOS'},
-                {text: 'Android', value: 'Android'},
+                { text: 'IOS', value: 'IOS' },
+                { text: 'Android', value: 'Android' },
             ],
             onFilter: (value, record) => record.job && record.job.indexOf(value) === 0,
         },
-        {dataIndex: 'department', title: 'Department'},
+        { dataIndex: 'department', title: 'Department' },
     ];
     return columns;
 }

packages/semi-ui/avatar/_story/Demo.tsx

@@ -16,7 +16,7 @@ const Demo = () => {
                 </AvatarGroup>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/badge/_story/Demo.tsx

@@ -10,7 +10,7 @@ const Demo = () => {
                 <div>132456</div>
             </Badge>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/breadcrumb/_story/Demo.tsx

@@ -18,7 +18,7 @@ const Demo = () => {
                 <Breadcrumb.Item icon="home"></Breadcrumb.Item>
             </Breadcrumb>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/button/Button.tsx

@@ -15,7 +15,7 @@ export type Size = 'default' | 'small' | 'large';
 export type Theme = 'solid' | 'borderless' | 'light';
 export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,'type'>{
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>{
     id?: string;
     block?: boolean;
     circle?: boolean;

packages/semi-ui/cascader/_story/Demo.tsx

@@ -57,7 +57,7 @@ const Demo = () => {
                 placeholder="可搜索的选择即改变"
             />
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/checkbox/_story/Demo.tsx

@@ -12,7 +12,7 @@ const Demo = () => {
 
     return (
         <div>
-            <Checkbox extra='绑定了回调' autoFocus onChange={ ()  => { alert('change') }}>
+            <Checkbox extra='绑定了回调' autoFocus onChange={ () => { alert('change'); }}>
                 autoFocus
             </Checkbox>
             <Checkbox extra='默认选中你' disabled defaultChecked>
@@ -21,7 +21,7 @@ const Demo = () => {
             <hr/>
             <CheckboxGroup options={ checkboxGroupOpiton } defaultValue={ ['Running', 'Movies'] } />
         </div>
-    )
-} 
+    );
+}; 
 
 export default Demo;

packages/semi-ui/checkbox/checkboxInner.tsx

@@ -92,7 +92,7 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
             <IconCheckboxIndeterminate />
         ) : null;
 
-        const inputProps: React.InputHTMLAttributes<HTMLInputElement>  = {
+        const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
             type: "checkbox",
             'aria-label': this.props['aria-label'],
             'aria-disabled': disabled,

packages/semi-ui/checkbox/context.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
+import { BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
 type CheckboxContextType = {
     checkboxGroup?: {
         onChange: (evt: BasicCheckboxEvent) => void;

packages/semi-ui/collapse/_story/Demo.tsx

@@ -4,7 +4,7 @@ import Collapse from '../index';
 const Demo = () => {
     return (
         <div>
-            <Collapse accordion defaultActiveKey="byte" onChange={ (val: any) => { console.log(val) } }>
+            <Collapse accordion defaultActiveKey="byte" onChange={ (val: any) => { console.log(val); } }>
                 <Collapse.Panel itemKey="semi">
                     <p>
                         semi-ui
@@ -22,7 +22,7 @@ const Demo = () => {
                 </Collapse.Panel>
             </Collapse>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/collapsible/_story/Demo.tsx

@@ -38,4 +38,4 @@ class Demo extends React.Component {
     }
 }
 
-export default Demo
+export default Demo;

packages/semi-ui/configProvider/_story/GetPopupContainer/index.jsx

@@ -22,10 +22,10 @@ const useCreatePortalInBody = () => {
         document.querySelector('.test').appendChild(wrapper);
         return () => {
             document.querySelector('.test').appendChild(wrapper);
-        }
-    }, [])
+        };
+    }, []);
     return (children => wrapperRef.current && createPortal(children, wrapperRef.current));
-}
+};
 
 const DialogComponent = props => {
     const [visible, setVisible] = useState(false);
@@ -50,7 +50,7 @@ const DialogComponent = props => {
 
 const UseModalDemo = () => {
     const [modal, contextHolder] = Modal.useModal();
-    const config = { 'title': 'This is a success message', 'content': `${ind}` }
+    const config = { 'title': 'This is a success message', 'content': `${ind}` };
     return (
         <ConfigProvider
             getPopupContainer={() => document.getElementById("modal-container")}
@@ -94,7 +94,7 @@ const UseModalDemo = () => {
 
 const UseNotiDemo = () => {
     const [noti, holder] = Notification.useNotification();
-    const config = { 'title': 'This is a success message', position: 'bottomLeft', 'content': `${ind}` }
+    const config = { 'title': 'This is a success message', position: 'bottomLeft', 'content': `${ind}` };
     return (
         <div>
             <div id="noti-container" >{holder}</div>
@@ -103,9 +103,9 @@ const UseNotiDemo = () => {
                     let id = noti.success(config);
                     ind++;
                     setTimeout(() => {
-                        console.log('closing')
-                        noti.close(id)
-                    }, 3000)
+                        console.log('closing');
+                        noti.close(id);
+                    }, 3000);
                 }}
             >
                 useNotification demo - left
@@ -120,13 +120,13 @@ const UseNotiDemo = () => {
             </Button>
         </div>
     );
-}
+};
 
 const UseToastDemo = () => {
     const [toast, holder] = Toast.useToast();
     const createBodyPortal = useCreatePortalInBody();
 
-    const config = { 'content': <ReachableContext.Consumer>{name => `ReachableContext: ${name}-${ind}`}</ReachableContext.Consumer>, duration: 0 }
+    const config = { 'content': <ReachableContext.Consumer>{name => `ReachableContext: ${name}-${ind}`}</ReachableContext.Consumer>, duration: 0 };
     return (
         <ReachableContext.Provider value="Light">
             <div>
@@ -134,11 +134,11 @@ const UseToastDemo = () => {
                 <Button
                     onClick={() => {
                         let id = toast.success(config);
-                        ind++
+                        ind++;
                         setTimeout(() => {
-                            console.log('closing')
-                            toast.close(id)
-                        }, 3000)
+                            console.log('closing');
+                            toast.close(id);
+                        }, 3000);
                     }}
                 >
                     useToast demo
@@ -151,7 +151,7 @@ const UseToastDemo = () => {
             </div>
         </ReachableContext.Provider>
     );
-}
+};
 
 
 

packages/semi-ui/datePicker/_story/AutoSwitchDate/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DatePicker  } from '../../../index';
+import { DatePicker } from '../../../index';
 
 export default function Demo() {
     return (

packages/semi-ui/datePicker/_story/Cycled/index.jsx

@@ -5,7 +5,7 @@ export default function Demo() {
     return (
         <div>
             <div>时分秒选择不无限滚动</div>
-            <DatePicker type="dateTime" timePickerOpts={{ scrollItemProps: { cycled: false }}} />
+            <DatePicker type="dateTime" timePickerOpts={{ scrollItemProps: { cycled: false } }} />
         </div>
     );
 }

packages/semi-ui/datePicker/datePicker.tsx

@@ -609,7 +609,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             onRangeBlur: this.handleRangeInputBlur,
             onRangeClear: this.handleRangeInputClear,
             onRangeEndTabPress: this.handleRangeEndTabPress,
-            rangeInputStartRef: insetInput ? null :  this.rangeInputStartRef,
+            rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
             rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
         };
 

packages/semi-ui/datePicker/navigation.tsx

@@ -80,7 +80,7 @@ export default class Navigation extends PureComponent<NavigationProps> {
         const btnNoHorizontalPadding = true;
         const buttonSize = density === 'compact' ? 'small' : 'default';
         const isLeftPanel = panelType === strings.PANEL_TYPE_LEFT;
-        const isRightPanel =  panelType === strings.PANEL_TYPE_RIGHT;
+        const isRightPanel = panelType === strings.PANEL_TYPE_RIGHT;
 
         // syncSwitchMonth and the current panel is the left
         const hiddenLeftPanelRightButtons = shouldBimonthSwitch && isLeftPanel;

packages/semi-ui/datePicker/quickControl.tsx

@@ -38,7 +38,7 @@ class QuickControl extends PureComponent<QuickControlProps> {
         const { presets, onPresetClick, type, presetPosition, insetInput } = this.props;
         const isTypeRange = type === 'dateRange' || type === 'dateTimeRange';
         const isPanelTopAndBottom = presetPosition === 'top' || presetPosition === 'bottom';
-        const isMonth =  type === 'month';
+        const isMonth = type === 'month';
         const isTopAndBottomRange = isPanelTopAndBottom && isTypeRange;
         const isTopAndBottomMonth = isPanelTopAndBottom && isMonth;
 

packages/semi-ui/descriptions/_story/Demo.tsx

@@ -24,13 +24,13 @@ const Demo = () => {
             key: 'hobby',
             value: 'sleep'
         }
-    ]
+    ];
     return (
         <div>
             <Description data={data} size="large" row />
             <Description data={data} size="large" />
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/empty/_story/Demo.tsx

@@ -4,7 +4,7 @@ import Empty from '../index';
 const Demo = () => {
     return (
         <Empty description={'功能建设中'} />
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/form/_story/DynamicField/nestArrayField.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useLayoutEffect, Component } from 'react';
 import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar } from '../../../index';
-import { Select as BasicSelect } from '../../../index';
-import { format } from 'date-fns';
-import {
+import { Button, Modal, TreeSelect, Row, Col, Avatar, Select as BasicSelect,
     Form,
     useFormState,
     useFormApi,
@@ -17,6 +14,7 @@ import {
     Collapse,
     Icon,
 } from '../../../index';
+import { format } from 'date-fns';
 import { ComponentUsingFormState } from '../Hook/hookDemo';
 const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
 
@@ -48,7 +46,7 @@ class NestArrayField extends React.Component {
                 { name: Math.random().toString().slice(0, 3), items: [ { itemName: Math.random(), type: '0-1' } ] },
                 // { name: Math.random(), items: [ { itemName: Math.random(), type: '0-1' } ] },
             ]
-        }
+        };
         this.formApi.setValues(newData, { isOverride: true });
     }
 
@@ -71,7 +69,7 @@ class NestArrayField extends React.Component {
                                     <Button onClick={() => addWithInitValue({ name: 1 })} type='primary'>Add level-1</Button>
                                     <Button onClick={this.change}>改变</Button>
                                     {
-                                        arrayFields.map(({ field, key, remove}, i) => (
+                                        arrayFields.map(({ field, key, remove }, i) => (
                                             <div key={key} style={{ width: 1000 }}>
                                                 <Input
                                                     field={`${field}[name]`}
@@ -85,10 +83,10 @@ class NestArrayField extends React.Component {
                                                             <Button onClick={() => addWithInitValue({ itemName: '2-1' })} type='primary'>add via api</Button>
                                                             <Button onClick={add} type='primary'>add via props.initvalues</Button>
                                                             {
-                                                                arrayFields.map(({ field, key, remove}, i) => (
+                                                                arrayFields.map(({ field, key, remove }, i) => (
                                                                     <div key={key}>
                                                                         <Input
-                                                                            style={{ width: 150}}
+                                                                            style={{ width: 150 }}
                                                                             field={`${field}.itemName`}
                                                                             label={`${field}.itemName`}
                                                                             initValue='2d'
@@ -126,12 +124,12 @@ class Child extends React.Component {
         super(props);
         this.state = {
             ts: format(new Date(), 'yyyy-MM-dd HH:mm:ss')
-        }
+        };
     }
     render() {
         return <div>
             {this.state.ts}
-        </div>
+        </div>;
     }
 }
 
@@ -152,7 +150,7 @@ class Parent extends React.Component {
                 </div>
             ))}
             <Button onClick={this.click}>change</Button>
-        </div>
+        </div>;
     }
 }
 

packages/semi-ui/form/_story/FormApi/setValuesDemo.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useLayoutEffect } from 'react';
 import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, TextArea } from '../../../index';
-import { Select as BasicSelect } from '../../../index';
-import {
+import { Button, Modal, TreeSelect, Row, Col, Avatar, TextArea, Select as BasicSelect,
     Form,
     useFormState,
     useFormApi,
@@ -80,8 +78,8 @@ class SetValuesWithArrayField extends React.Component {
     change() {
         let length = Math.floor(Math.random() * 100);
         let newEffect = Array.from({ length }, (v, i) => {
-            return { name: Math.random(), type: Math.random() }
-        })
+            return { name: Math.random(), type: Math.random() };
+        });
         this.formApi.setValues({ name: 'nike', notExist: '12', effects: newEffect }, { isOverride: true });
     }
 
@@ -105,13 +103,13 @@ class SetValuesWithArrayField extends React.Component {
                                                 <Form.Input
                                                     field={`${field}[name]`}
                                                     label={`名称：（${field}.name）`}
-                                                    style={{width: 200, marginRight: 16}}
+                                                    style={{ width: 200, marginRight: 16 }}
                                                 >
                                                 </Form.Input>
                                                 <Form.Input
                                                     field={`${field}[type]`}
                                                     label={`类型：（${field}.type）`}
-                                                    style={{width: 90}}
+                                                    style={{ width: 90 }}
                                                 >
                                                 </Form.Input>
                                                 <Button type='danger' onClick={remove} style={{ margin: 16 }}>remove</Button>
@@ -130,4 +128,4 @@ class SetValuesWithArrayField extends React.Component {
         );
     }
 }
-export { SetValuesDemo, SetValuesWithArrayField }
+export { SetValuesDemo, SetValuesWithArrayField };

packages/semi-ui/form/_story/Hook/hookDemo.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useLayoutEffect, Component } from 'react';
 import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar } from '../../../index';
-import { Select as BasicSelect } from '../../../index';
-import {
+import { Button, Modal, TreeSelect, Row, Col, Avatar, Select as BasicSelect,
     Form,
     useFormState,
     useFormApi,
@@ -105,7 +103,7 @@ const ComponentUsingFormState = () => {
     const formState = useFormState();
     return (
         <pre>
-            <code style={{wordBreak:'break-all', width: 600, whiteSpace: 'normal'}}>{JSON.stringify(formState)}</code>
+            <code style={{ wordBreak:'break-all', width: 600, whiteSpace: 'normal' }}>{JSON.stringify(formState)}</code>
             {/* <code style={{wordBreak:'break-all', width: 600, whiteSpace: 'normal'}}>{CustomStringify(formState)}</code> */}
         </pre>
     );
@@ -192,4 +190,4 @@ const WithFormApiDemo = () => {
     );
 };
 
-export { UseFormApiDemo, UseFormStateDemo, UseFieldApiDemo,  UseFieldStateDemo, WithFormStateDemo, WithFormApiDemo, ComponentUsingFormState, CustomStringify }
+export { UseFormApiDemo, UseFormStateDemo, UseFieldApiDemo, UseFieldStateDemo, WithFormStateDemo, WithFormApiDemo, ComponentUsingFormState, CustomStringify };

packages/semi-ui/form/_story/Layout/modalFormDemo.jsx

@@ -91,4 +91,4 @@ class ModalFormDemo extends React.Component {
     }
 }
 
-export { ModalFormDemo }
+export { ModalFormDemo };

packages/semi-ui/gulpfile.js

@@ -66,7 +66,7 @@ gulp.task('compileScss', function compileScss() {
                 const animationStr = `@import "${rootPath}/packages/semi-theme-default/scss/animation.scss";\n`;
                 const animationBuffer = Buffer.from(animationStr);
                 const scssBuffer = Buffer.from(scssVarStr);
-                const buffers = [scssBuffer,animationBuffer];
+                const buffers = [scssBuffer, animationBuffer];
                 if (/_base\/base\.scss/.test(chunk.path)) {
                     buffers.push(Buffer.from(cssVarStr));
                 }

packages/semi-ui/input/inputGroup.tsx

@@ -97,7 +97,7 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
             inner = (Array.isArray(children) ? children : [children]).map((item, index) => {
                 if (item) {
                     const { onBlur: itemOnBlur, onFocus: itemOnFocus, disabled: itemDisabled } = (item as any).props;
-                    const onBlur = isFunction(itemOnBlur) && get(itemOnBlur, 'name') !== 'noop'  ? itemOnBlur : groupOnBlur;
+                    const onBlur = isFunction(itemOnBlur) && get(itemOnBlur, 'name') !== 'noop' ? itemOnBlur : groupOnBlur;
                     const onFocus = isFunction(itemOnFocus) && get(itemOnFocus, 'name') !== 'noop' ? itemOnFocus : groupOnFocus;
                     const disabled = typeof itemDisabled === 'boolean' ? itemDisabled : groupDisabled;
                     return React.cloneElement(item as any, { key: index, ...rest, size, onBlur, onFocus, disabled });