chore: auto format code

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

@@ -30,12 +30,12 @@ import { Divider } from '@douyinfe/semi-ui';
             <Divider margin='12px'/>
             <span>It defines a set of components.</span>
 
-            <h3 style={{ "marginTop":"40px" }}>Horizontal Dashed Line</h3>
+            <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>
+            <h3 style={{ "marginTop": "40px" }}>Vertical Solid Line</h3>
 
             <div>
                 <span>Left</span>
@@ -45,7 +45,7 @@ import { Divider } from '@douyinfe/semi-ui';
                 <span>Right</span>
             </div>
 
-            <h3 style={{ "marginTop":"40px" }}>Vertical Dashed Line</h3>
+            <h3 style={{ "marginTop": "40px" }}>Vertical Dashed Line</h3>
             <div>
                 <span>Left</span>
                 <Divider layout="vertical" dashed={true} margin='12px'/>

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

@@ -164,7 +164,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconBell size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -172,7 +172,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconHelpCircle size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -270,7 +270,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconBell size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -278,7 +278,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
                                 theme="borderless"
                                 icon = {<IconHelpCircle size="large"/>}
                                 style={{
-                                    color:'var(--semi-color-text-2)',
+                                    color: 'var(--semi-color-text-2)',
                                     marginRight: '12px',
                                 }}
                             />
@@ -397,7 +397,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                                     theme="borderless"
                                     icon = {<IconBell size="large" />}
                                     style={{
-                                        color:'var(--semi-color-text-2)',
+                                        color: 'var(--semi-color-text-2)',
                                         marginRight: '12px',
                                     }}
                                 />
@@ -405,7 +405,7 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
                                     theme="borderless"
                                     icon = {<IconHelpCircle size="large" />}
                                     style={{
-                                        color:'var(--semi-color-text-2)',
+                                        color: 'var(--semi-color-text-2)',
                                         marginRight: '12px',
                                     }}
                                 />

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

@@ -41,13 +41,13 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
 
 () => {
     const divStyle = {
-        width:80,
-        height:100,
-        lineHight:100,
+        width: 80,
+        height: 100,
+        lineHight: 100,
         display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
-        border:'1px solid var(--semi-color-border)',
+        justifyContent: 'center',
+        border: '1px solid var(--semi-color-border)',
         borderRadius: 3
     };
     return (
@@ -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

@@ -39,13 +39,13 @@ import { Space, Button, Tag } from '@douyinfe/semi-ui';
 
 () => {
     const divStyle = {
-        width:80,
-        height:100,
-        lineHight:100,
+        width: 80,
+        height: 100,
+        lineHight: 100,
         display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
-        border:'1px solid var(--semi-color-border)',
+        justifyContent: 'center',
+        border: '1px solid var(--semi-color-border)',
         borderRadius: 3
     };
     return (
@@ -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

@@ -218,7 +218,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'This is a supercalifragilisticexpialidocious tooltip' }
                     }
                 }}
@@ -266,7 +266,7 @@ function Demo() {
         <div>
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation' }
                     }
                 }}
@@ -277,7 +277,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' }
                     }
                 }}
@@ -288,7 +288,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } }
                     }
                 }}

content/basic/typography/index.md

@@ -204,7 +204,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '这是自定义要展示的内容' }
                     }
                 }}
@@ -253,7 +253,7 @@ function Demo() {
         <div>
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation' }
                     }
                 }}
@@ -264,7 +264,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{ 
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation', className: 'components-typography-demo' }
                     }
                 }}
@@ -275,7 +275,7 @@ function Demo() {
             <br />
             <Text 
                 ellipsis={{
-                    showTooltip:{
+                    showTooltip: {
                         opts: { content: '架构|Semi-inf|graph.cheet.relation', style: { wordBreak: 'break-all' } }
                     }
                 }}

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

@@ -68,7 +68,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -105,7 +105,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>

content/feedback/toast/index.md

@@ -69,7 +69,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -106,7 +106,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>

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]}
@@ -198,8 +198,8 @@ import { Button } from '@douyinfe/semi-ui';
 function ButtonDemo() {
     return (
         <div>
-            <Button size='large' style={{ marginRight:8 }}>large</Button>
-            <Button size='default' style={{ marginRight:8 }}>default</Button>
+            <Button size='large' style={{ marginRight: 8 }}>large</Button>
+            <Button size='default' style={{ marginRight: 8 }}>default</Button>
             <Button size='small'>small</Button>
         </div>
     );
@@ -448,9 +448,9 @@ function SplitButtonDemo(){
     ];
 
     const [btnVisible, setBtnVisible] = useState({
-        1:false,
-        2:false,
-        3:false
+        1: false,
+        2: false,
+        3: false
     });
 
     const handleVisibleChange = (key, visible)=>{
@@ -461,22 +461,22 @@ function SplitButtonDemo(){
 
     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>
+                    <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>
+                    <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>
+                <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-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown size="small" />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>

content/input/button/index.md

@@ -158,8 +158,8 @@ import { Button } from '@douyinfe/semi-ui';
 function ButtonDemo() {
     return (
         <div>
-            <Button size='large' style={{ marginRight:8 }}>大尺寸</Button>
-            <Button size='default' style={{ marginRight:8 }}>默认尺寸</Button>
+            <Button size='large' style={{ marginRight: 8 }}>大尺寸</Button>
+            <Button size='default' style={{ marginRight: 8 }}>默认尺寸</Button>
             <Button size='small'>小尺寸</Button>
         </div>
     );
@@ -407,9 +407,9 @@ function SplitButtonDemo(){
     ];
 
     const [btnVisible, setBtnVisible] = useState({
-        1:false,
-        2:false,
-        3:false
+        1: false,
+        2: false,
+        3: false
     });
 
     const handleVisibleChange = (key, visible)=>{
@@ -420,22 +420,22 @@ function SplitButtonDemo(){
 
     return (
         <div>
-            <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
+            <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>
+                    <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>
+                    <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>
+                <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-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme="borderless" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
         </div>

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

@@ -136,7 +136,7 @@ class App extends React.Component {
         const plainOptions = ['semi', 'vigo', 'helo'];
         const options = [
             { 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 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." }
         ];
@@ -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

@@ -118,7 +118,7 @@ import { CheckboxGroup } from '@douyinfe/semi-ui';
     const plainOptions = ['抖音', '火山', '皮皮虾'];
     const options = [
         { label: '追求极致', value: '1', extra: '不断提高要求，延迟满足感，在更大范围里找最优解' },
-        { label: '务实敢为', value: '2', extra:'直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
+        { label: '务实敢为', value: '2', extra: '直接体验，深入事实；不自嗨，注重效果；能突破有担当，打破定式；尝试多种可能，快速迭代' },
         { label: '开放谦逊', value: '3', extra: '内心阳光，信任伙伴；乐于助人和求助，合作成大事;格局大，上个台阶想问题；对外敏锐谦虚，ego小，听得进意见' },
         { label: '坦诚清晰', value: '4', extra: '敢当面表达真实想法；能承认错误，不装不爱面子；实事求是，暴露问题，反对“向上管理”；准确、简洁、直接，有条理有重点' }
     ];
@@ -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

@@ -70,19 +70,19 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
 () => (
     <Form layout='horizontal'>
-        <Form.Input field='username' label='UserName' style={{ width:80 }}/>
+        <Form.Input field='username' label='UserName' style={{ width: 80 }}/>
         <Form.Input
             field='password'
             label={{ 
                 text: 'Password',
                 extra: <Tooltip content='More info xxx'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
             }}
-            style={{ width:176 }}
+            style={{ width: 176 }}
         />
         <Form.Select
             field="role"
             label={{ text: 'Role', optional: true }}
-            style={{ width:176 }}
+            style={{ width: 176 }}
             optionList={[
                 { label: 'Admin', value: 'admin' },
                 { label: 'User', value: 'user' },
@@ -107,7 +107,7 @@ import { Form } from '@douyinfe/semi-ui';
 () => (
     <Form render={({ formState, formApi, values }) => (
         <>
-            <Form.Select field="role" label='Role' style={{ width:120 }}>
+            <Form.Select field="role" label='Role' style={{ width: 120 }}>
                 <Form.Select.Option value="admin">Admin</Form.Select.Option>
                 <Form.Select.Option value="user">User</Form.Select.Option>
                 <Form.Select.Option value="guest">Guest</Form.Select.Option>
@@ -134,7 +134,7 @@ import { Form } from '@douyinfe/semi-ui';
         {
             ({ formState, values, formApi }) => (
                 <>
-                    <Form.Select field="role" label='Role' style={{ width:120 }}>
+                    <Form.Select field="role" label='Role' style={{ width: 120 }}>
                         <Form.Select.Option value="admin">Admin</Form.Select.Option>
                         <Form.Select.Option value="user">User</Form.Select.Option>
                         <Form.Select.Option value="guest">Guest</Form.Select.Option>
@@ -444,7 +444,7 @@ import { Form, Button, Toast } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -851,7 +851,7 @@ class ModalFormDemo extends React.Component {
                                 <Form.Select
                                     field='region'
                                     label="Country/Region"
-                                    style={{ width:120 }}
+                                    style={{ width: 120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -879,7 +879,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="Area"
                                     placeholder='Choose Area'
-                                    style={{ width:120 }}
+                                    style={{ width: 120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}

content/input/form/index.md

@@ -75,16 +75,16 @@ import { IconHelpCircle } from '@douyinfe/semi-icons';
 
     return (
         <Form layout='horizontal' onValueChange={values=>console.log(values)}>
-            <Form.Input field='UserName' label='用户名' style={{ width:80 }}/>
+            <Form.Input field='UserName' label='用户名' style={{ width: 80 }}/>
             <Form.Input
                 field='Password'
                 label={{ 
                     text: '密码',
                     extra: <Tooltip content='详情'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> 
                 }}
-                style={{ width:176 }}
+                style={{ width: 176 }}
             />
-            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width:176 }}>
+            <Form.Select field="Role" label={{ text: '角色', optional: true }} style={{ width: 176 }}>
                 <Option value="admin">管理员</Option>
                 <Option value="user">普通用户</Option>
                 <Option value="guest">访客</Option>
@@ -144,13 +144,13 @@ import { Form } from '@douyinfe/semi-ui';
             {
                 ({ formState, values, formApi }) => (
                     <>
-                        <Form.Select field="Role" label='角色' style={{ width:176 }}>
+                        <Form.Select field="Role" label='角色' style={{ width: 176 }}>
                             <Form.Select.Option value="admin">管理员</Form.Select.Option>
                             <Form.Select.Option value="user">普通用户</Form.Select.Option>
                             <Form.Select.Option value="guest">访客</Form.Select.Option>
                         </Form.Select>
-                        <Form.Input field='UserName' label='用户名' style={{ width:80 }} />
-                        <Form.Input field='Password' label='密码' style={{ width:176 }}/>
+                        <Form.Input field='UserName' label='用户名' style={{ width: 80 }} />
+                        <Form.Input field='Password' label='密码' style={{ width: 176 }}/>
                         <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>
                     </>
                 )
@@ -171,9 +171,9 @@ import { Form } from '@douyinfe/semi-ui';
 () => {
     const fields = ({ formState, formApi, values }) => (
         <>
-            <Form.Input field='Role' style={{ width:176 }}/>
-            <Form.Input field='UserName' style={{ width:80 }}/>
-            <Form.Input field='Password' style={{ width:176 }}/>
+            <Form.Input field='Role' style={{ width: 176 }}/>
+            <Form.Input field='UserName' style={{ width: 80 }}/>
+            <Form.Input field='Password' style={{ width: 176 }}/>
             <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>
         </>
     );
@@ -218,7 +218,7 @@ class BasicDemoWithInit extends React.Component {
                         size: '222KB',
                         percent: 50,
                         preview: true,
-                        fileInstance:  new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
+                        fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),
                         url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'
                     },
                     {
@@ -228,7 +228,7 @@ class BasicDemoWithInit extends React.Component {
                         size: '222KB',
                         percent: 50,
                         preview: true,
-                        fileInstance:  new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
+                        fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),
                         url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'
                     }
                 ]
@@ -514,7 +514,7 @@ import { Form, Toast, Button } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -710,19 +710,19 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
 () => {
     const { Section, Input, DatePicker, TimePicker, Select, Switch, InputNumber, Checkbox, CheckboxGroup, RadioGroup, Radio } = Form;
     return (
-        <Form style={{ width:560 }}>
+        <Form style={{ width: 560 }}>
             <Section text={'基本信息'}>
                 <Input field='name' label='考试名称' initValue='TCS任务平台使用' style={{ width: 560 }}/>
             </Section>
             <Section text={'合格标准'} >
-                <div style={{ display:'flex' }}>
-                    <InputNumber field='pass' initValue={60} style={{ width:80 }} label={{ text:'及格正确率', required: true }}/>
-                    <InputNumber field='number' initValue={10} style={{ width:80 }} label={{ text:'合格人数', required: true }}/>
+                <div style={{ display: 'flex' }}>
+                    <InputNumber field='pass' initValue={60} style={{ width: 80 }} label={{ text: '及格正确率', required: true }}/>
+                    <InputNumber field='number' initValue={10} style={{ width: 80 }} label={{ text: '合格人数', required: true }}/>
                 </div>
             </Section>
             <Section text={'考试时间'} >
-                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width:272 }} label={{ text:'开始时间', required: true }}/>
-                <div style={{ display:'flex' }}>
+                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width: 272 }} label={{ text: '开始时间', required: true }}/>
+                <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>
@@ -746,7 +746,7 @@ import { Form, Button, Space } from '@douyinfe/semi-ui';
                 >
                     <Radio value="always">自动放出</Radio>
                     <Radio value="user">
-                        <div style={{ display:'inline-block' }}>
+                        <div style={{ display: 'inline-block' }}>
                             自定义放出时间
                             <Form.DatePicker type='dateTimeRange' noLabel field='customTime' style={{ width: 464, display: 'inline-block' }}/>
                         </div>
@@ -755,11 +755,11 @@ 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 }}
+                    label={{ text: '考生', required: true }}
                     style={{ width: 560 }}
                     multiple
                     initValue={['1', '2', '3', '4']}
@@ -1093,7 +1093,7 @@ class ModalFormDemo extends React.Component {
                                     field='region'
                                     label="国家/地区"
                                     placeholder='请选择'
-                                    style={{ width:'100%' }}
+                                    style={{ width: '100%' }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1121,7 +1121,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="投放区域"
                                     placeholder='请选择'
-                                    style={{ width:'100%' }}
+                                    style={{ width: '100%' }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -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' }}>
@@ -1857,7 +1857,7 @@ const MyComponent = (props) => {
     };
     return (
         <div className='customField'>
-            <Input insetLabel='名称' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight:12 }} />
+            <Input insetLabel='名称' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight: 12 }} />
             <Select
                 insetLabel='角色'
                 value={role}
@@ -1883,7 +1883,7 @@ class WithFieldDemo2 extends React.Component {
     render() {
         return (
             <Form>
-                <CustomField field='baseInfo' label={{ text:'基本信息', required: true }} />
+                <CustomField field='baseInfo' label={{ text: '基本信息', required: true }} />
                 <ComponentUsingFormState />
             </Form>
         );

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

@@ -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

@@ -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

@@ -1172,7 +1172,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: 'Semi', otherKey:0 },
+        { value: 'abc', label: 'Semi', otherKey: 0 },
         { value: 'capcut', label: 'Capcut', disabled: true, otherKey: 1 },
         { value: 'cam', label: 'UlikeCam', otherKey: 2 },
         { value: 'buzz', label: 'Buzz', otherKey: 3 },

content/input/select/index.md

@@ -64,7 +64,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     const list = [
-        { value: 'abc', label: '抖音', otherKey:0 },
+        { value: 'abc', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },
@@ -1003,7 +1003,7 @@ import { Select } from '@douyinfe/semi-ui';
                 multiple={true}
                 filter={true}
                 placeholder='With renderCreateItem'
-                renderCreateItem={input => <div style={{ padding:10 }}>Create Item：{input}</div>}
+                renderCreateItem={input => <div style={{ padding: 10 }}>Create Item：{input}</div>}
                 onChange={v => console.log(v)}
                 defaultActiveFirstOption
             >
@@ -1227,7 +1227,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
     };
 
     const optionList = [
-        { value: 'abc', label: '抖音', otherKey:0 },
+        { value: 'abc', label: '抖音', otherKey: 0 },
         { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
         { value: 'jianying', label: '剪映', otherKey: 2 },
         { value: 'toutiao', label: '今日头条', otherKey: 3 },

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

@@ -365,13 +365,13 @@ class CustomRender extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value : ['xiakeman']
+            value: ['xiakeman']
         };
         this.list = [
-            { "name": "xiakeman", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
-            { "name": "shenyue", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
-            { "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" },
+            { "name": "xiakeman", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+            { "name": "shenyue", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+            { "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]));
     }

content/input/taginput/index.md

@@ -344,7 +344,7 @@ class TagInputDemo extends React.Component {
         return (
             <>
                 <TagInput defaultValue={['抖音', '火山']} ref={this.ref} />
-                <Button style={{ marginTop:10 }} onClick={this.handleTagInputFocus}>
+                <Button style={{ marginTop: 10 }} onClick={this.handleTagInputFocus}>
                     点击按钮聚焦
                 </Button>
             </>
@@ -365,13 +365,13 @@ class CustomRender extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value : ['夏可漫']
+            value: ['夏可漫']
         };
         this.list = [
-            { "name": "夏可漫", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
-            { "name": "申悦", "avatar":  "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
-            { "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" },
+            { "name": "夏可漫", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+            { "name": "申悦", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+            { "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]));
     }

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

@@ -476,19 +476,19 @@ 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',
+                        text: 'Task platform',
                         icon: <IconSetting />,
-                        itemKey:'job',
+                        itemKey: 'job',
                         items: ['task management', 'user task query'],
                     },
                 ]}
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text:'Live broadcast operation background'
+                    text: 'Live broadcast operation background'
                 }}
                 footer={{
                     collapseButton: true,
@@ -521,19 +521,19 @@ 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',
+                        text: 'Task platform',
                         icon: <IconSetting />,
-                        itemKey:'job',
+                        itemKey: 'job',
                         items: ['Task Management', {
-                            text:'Task 1',
+                            text: 'Task 1',
                             icon: <IconSetting />,
-                            itemKey:'mission1',
+                            itemKey: 'mission1',
                             items: ['Task 2', {
-                                text:'Task 3 disassembly',
+                                text: 'Task 3 disassembly',
                                 icon: <IconSetting />,
-                                itemKey:'mission3',
+                                itemKey: 'mission3',
                                 items: ['Subtask 1', 'Subtask 2'],
                             }, ],
                         }, ],
@@ -542,7 +542,7 @@ class NavApp extends React.Component {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text:'Live broadcast operation background'
+                    text: 'Live broadcast operation background'
                 }}
                 footer={{
                     collapseButton: true,

content/navigation/steps/index.md

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

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

@@ -499,9 +499,9 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                { tab: 'Doc', itemKey:'1', text:'Doc', closable:true },
-                { tab: 'Quick Start', itemKey:'2', text:'Quick Start', closable:true },
-                { tab: 'Help', itemKey:'3', text:'Help' },
+                { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true },
+                { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true },
+                { tab: 'Help', itemKey: '3', text: 'Help' },
             ]
         };
     }
@@ -509,7 +509,7 @@ class App extends React.Component {
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({ tabList:newTabList });
+        this.setState({ tabList: newTabList });
     }
     render() {
         return (

content/navigation/tabs/index.md

@@ -523,9 +523,9 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                { tab: '文档', itemKey:'1', text:'文档', closable:true },
-                { tab: '快速起步', itemKey:'2', text:'快速起步', closable:true },
-                { tab: '帮助', itemKey:'3', text:'帮助' },
+                { tab: '文档', itemKey: '1', text: '文档', closable: true },
+                { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
+                { tab: '帮助', itemKey: '3', text: '帮助' },
             ]
         };
     }
@@ -533,7 +533,7 @@ class App extends React.Component {
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({ tabList:newTabList });
+        this.setState({ tabList: newTabList });
     }
     render() {
         return (

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/>
@@ -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>

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/>
@@ -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>

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>
@@ -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}
                             >
@@ -587,7 +587,7 @@ function Demo() {
                 defaultValue={12}
                 max={40}
                 min={10}
-                style={{ width:360 }}
+                style={{ width: 360 }}
                 onChange={v=> setSpacing(v)}
             />
             <br />
@@ -599,7 +599,7 @@ function Demo() {
                             shadows='hover'
                             title='Card title'
                             headerLine={false}
-                            style={{ width:260 }}
+                            style={{ width: 260 }}
                             headerExtraContent={
                                 <Text link>
                                     More
@@ -637,7 +637,7 @@ function Demo() {
                         shadows='hover'
                         title='Card title'
                         headerLine={false}
-                        style={{ width:260 }}
+                        style={{ width: 260 }}
                         headerExtraContent={
                             <Text link>
                                 More

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>
@@ -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}
                             >
@@ -587,7 +587,7 @@ function Demo() {
                 defaultValue={12}
                 max={40}
                 min={10}
-                style={{ width:360 }}
+                style={{ width: 360 }}
                 onChange={v=> setSpacing(v)}
             />
             <br />
@@ -599,7 +599,7 @@ function Demo() {
                             shadows='hover'
                             title='Card title'
                             headerLine={false}
-                            style={{ width:260 }}
+                            style={{ width: 260 }}
                             headerExtraContent={
                                 <Text link>
                                     More
@@ -637,7 +637,7 @@ function Demo() {
                         shadows='hover'
                         title='Card title'
                         headerLine={false}
-                        style={{ width:260 }}
+                        style={{ width: 260 }}
                         headerExtraContent={
                             <Text link>
                                 More

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

@@ -44,7 +44,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />   
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />   
         );
     };
 
@@ -112,7 +112,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -196,7 +196,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -294,7 +294,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -381,7 +381,7 @@ class CarouselDemo extends React.Component {
     
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 
@@ -459,7 +459,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -528,7 +528,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -596,7 +596,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 

content/show/carousel/index.md

@@ -43,7 +43,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />   
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />   
         );
     };
 
@@ -111,7 +111,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -195,7 +195,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -293,7 +293,7 @@ import { Carousel, RadioGroup, Radio, Space, Typography } from '@douyinfe/semi-u
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -380,7 +380,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 
@@ -458,7 +458,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -527,7 +527,7 @@ import { Carousel, Typography, Space } from '@douyinfe/semi-ui';
 
     const renderLogo = () => {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }}/>
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }}/>
         );
     };
 
@@ -595,7 +595,7 @@ class CarouselDemo extends React.Component {
 
     renderLogo() {
         return (
-            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width:87, height:31 }} />
+            <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg' alt='semi_logo' style={{ width: 87, height: 31 }} />
         );
     };
 

content/show/tag/index.md

@@ -164,7 +164,7 @@ import { Tag, Button } from '@douyinfe/semi-ui';
     return (
         <div>
             <Button onClick={toggleVisible}>{visible ? 'Hide Tag': 'Show Tag'}</Button>
-            <div style={{ marginTop:10 }}>
+            <div style={{ marginTop: 10 }}>
                 <Tag visible={visible}>Invisible tag </Tag>
             </div>
         </div>

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

@@ -148,29 +148,29 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
         mode='alternate' 
         dataSource={[
             {
-                time:'2019-07-14 10:35',
-                extra:'Extra Information',
-                content:'First Node Content',
-                type:'ongoing',
+                time: '2019-07-14 10:35',
+                extra: 'Extra Information',
+                content: 'First Node Content',
+                type: 'ongoing',
             },
             {
-                time:'2019-06-13 16:17',
-                extra:'Extra Information',
-                content:<span style={{ fontSize: '18px' }}>Second Node Content</span>,
-                color:'pink',
+                time: '2019-06-13 16:17',
+                extra: 'Extra Information',
+                content: <span style={{ fontSize: '18px' }}>Second Node Content</span>,
+                color: 'pink',
             },
             {
-                time:'2019-05-14 18:34',
-                extra:'Extra Information',
-                dot:<IconAlertTriangle />,
-                content:'Third Node Content',
-                type:'warning',
+                time: '2019-05-14 18:34',
+                extra: 'Extra Information',
+                dot: <IconAlertTriangle />,
+                content: 'Third Node Content',
+                type: 'warning',
             },
             {
-                time:'2019-05-09 09:12',
-                extra:'Extra Information',
-                content:'Forth Node Content',
-                type:'success',
+                time: '2019-05-09 09:12',
+                extra: 'Extra Information',
+                content: 'Forth Node Content',
+                type: 'success',
             }    
         ]} 
     />

packages/semi-foundation/progress/generates.ts

@@ -217,9 +217,9 @@ const REG_S = {
 // From src/components/palette.js
 const SEMI_DESIGN_TOKENS = {
     // No sequence
-    ALONG:["black", "white"],
+    ALONG: ["black", "white"],
     // Sequence: 0-9
-    SEQUENCE:[
+    SEQUENCE: [
         "amber",
         "blue",
         "cyan",

packages/semi-foundation/tabs/constants.ts

@@ -18,10 +18,10 @@ const cssClasses = {
     TABS_PANE_ACTIVE: `${BASE_CLASS_PREFIX}-tabs-pane-active`,
     TABS_PANE_MOTION_OVERLAY: `${BASE_CLASS_PREFIX}-tabs-pane-motion-overlay`,
     TABS_PANE_ANIMATING: `${BASE_CLASS_PREFIX}-tabs-pane-animating`,
-    "TABS_PANE_ANIMATE_LEFT_SHOW":`${BASE_CLASS_PREFIX}-tabs-pane-animate-leftShow`,
-    "TABS_PANE_ANIMATE_RIGHT_SHOW":`${BASE_CLASS_PREFIX}-tabs-pane-animate-rightShow`,
-    "TABS_PANE_ANIMATE_TOP_SHOW":`${BASE_CLASS_PREFIX}-tabs-pane-animate-topShow`,
-    "TABS_PANE_ANIMATE_BOTTOM_SHOW":`${BASE_CLASS_PREFIX}-tabs-pane-animate-bottomShow`,
+    "TABS_PANE_ANIMATE_LEFT_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-leftShow`,
+    "TABS_PANE_ANIMATE_RIGHT_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-rightShow`,
+    "TABS_PANE_ANIMATE_TOP_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-topShow`,
+    "TABS_PANE_ANIMATE_BOTTOM_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-bottomShow`,
 };
 
 const numbers = {

packages/semi-scss-compile/README.md

@@ -37,19 +37,19 @@ function resolve(dir) {
 //eg
 
 compile({
-    foundationPath:resolve('semi-foundation/'),
-    themePath:resolve('semi-theme-default/'),
+    foundationPath: resolve('semi-foundation/'),
+    themePath: resolve('semi-theme-default/'),
     iconPath: resolve('node_modules/@douyinfe/semi-icons'),
-    outputPath:resolve('semi-ui/dist/css/semi.min.css'),
-    isMin:true
+    outputPath: resolve('semi-ui/dist/css/semi.min.css'),
+    isMin: true
 });
 
 compile({
-    foundationPath:resolve('semi-foundation/'),
-    themePath:resolve('semi-theme-default/'),
+    foundationPath: resolve('semi-foundation/'),
+    themePath: resolve('semi-theme-default/'),
     iconPath: resolve('node_modules/@douyinfe/semi-icons'),
-    outputPath:resolve('semi-ui/dist/css/semi.css'),
-    isMin:false
+    outputPath: resolve('semi-ui/dist/css/semi.css'),
+    isMin: false
 });
 ```
 

packages/semi-ui/avatar/index.tsx

@@ -184,7 +184,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             const props = {
                 role: 'img',
                 'aria-label': finalAlt,
-                className:  cls(`${prefixCls}-label`,
+                className: cls(`${prefixCls}-label`,
                     {
                         [`${prefixCls}-no-focus-visible`]: clickable,
                     }

packages/semi-ui/carousel/index.tsx

@@ -23,7 +23,7 @@ export interface CarouselState {
 class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     static propTypes = {
         activeIndex: PropTypes.number,
-        animation:PropTypes.oneOf(strings.ANIMATION_MAP),
+        animation: PropTypes.oneOf(strings.ANIMATION_MAP),
         arrowProps: PropTypes.object, 
         autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
         className: PropTypes.string,
@@ -199,8 +199,8 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
                             [`${cssClasses.CAROUSEL_CONTENT}-item-current`]: isCurrent,
                             [`${cssClasses.CAROUSEL_CONTENT}-item`]: true,
                             [`${cssClasses.CAROUSEL_CONTENT}-item-active`]: isCurrent,
-                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-in`]:animation === 'slide' && !isInit && isCurrent,
-                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]:animation === 'slide' && !isInit && index === preIndex,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-in`]: animation === 'slide' && !isInit && isCurrent,
+                            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]: animation === 'slide' && !isInit && index === preIndex,
                         })
                     });
                 })}

packages/semi-ui/cascader/index.tsx

@@ -171,7 +171,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         leafOnly: PropTypes.bool,
         enableLeafClick: PropTypes.bool,
         preventScroll: PropTypes.bool,
-        position:PropTypes.string
+        position: PropTypes.string
     };
 
     static defaultProps = {

packages/semi-ui/checkbox/checkboxInner.tsx

@@ -83,7 +83,7 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         const inner = classnames({
             [`${prefix}-inner-display`]: true,
             [`${prefix}-focus`]: focusInner,
-            [`${prefix}-focus-border`]:  focusInner && !checked,
+            [`${prefix}-focus-border`]: focusInner && !checked,
         });
 
         const icon = checked ? (
@@ -98,7 +98,7 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
             'aria-disabled': disabled,
             'aria-checked': checked,
             'aria-labelledby': addonId,
-            'aria-describedby':extraId || this.props['aria-describedby'],
+            'aria-describedby': extraId || this.props['aria-describedby'],
             'aria-invalid': this.props['aria-invalid'],
             'aria-errormessage': this.props['aria-errormessage'],
             'aria-required': this.props['aria-required'],

packages/semi-ui/form/_story/FormSubmit/index.tsx

@@ -18,12 +18,12 @@ const App = () => {
 
     return (
         <Form onSubmit={() => { console.log('submit');} }>
-            <Form.Select field="Role" label='角色' style={{ width:176 }}>
+            <Form.Select field="Role" label='角色' style={{ width: 176 }}>
                 <Option value="admin">管理员</Option>
                 <Option value="user">普通用户</Option>
                 <Option value="guest">访客</Option>
             </Form.Select>
-            <Form.Input field='UserName' label='用户名' style={{ width:80 }} onKeyDown={e => {
+            <Form.Input field='UserName' label='用户名' style={{ width: 80 }} onKeyDown={e => {
                 if (e.key === 'Enter') {
                     e.preventDefault();
                 }
@@ -34,7 +34,7 @@ const App = () => {
                     text: '密码',
                     extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
                 }}
-                style={{ width:176 }}
+                style={{ width: 176 }}
             />
             <Button>提交</Button>
         </Form>

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

@@ -103,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>
     );

packages/semi-ui/gulpfile.js

@@ -82,7 +82,7 @@ gulp.task('compileScss', function compileScss() {
                     const semiUIPath = path.join(rootPath, 'packages/semi-foundation');
                     realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
                 }
-                done({ file:realUrl });
+                done({ file: realUrl });
             },
             charset: false
         }).on('error', sass.logError))

packages/semi-ui/image/previewFooter.tsx

@@ -214,7 +214,7 @@ export default class Footer extends BaseComponent<FooterProps> {
             onClick={!disableDownload ? onDownload : undefined}
             className={cls(`${footerPrefixCls}-gap`,
                 {
-                    [`${footerPrefixCls}-disabled`] : disableDownload,
+                    [`${footerPrefixCls}-disabled`]: disableDownload,
                 },
             )}
         />;

packages/semi-ui/image/previewInner.tsx

@@ -42,10 +42,10 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         closeOnEsc: PropTypes.bool,
         prevTip: PropTypes.string,
         nextTip: PropTypes.string,
-        zoomInTip:PropTypes.string,
+        zoomInTip: PropTypes.string,
         zoomOutTip: PropTypes.string,
         downloadTip: PropTypes.string,
-        adaptiveTip:PropTypes.string,
+        adaptiveTip: PropTypes.string,
         originTip: PropTypes.string,
         lazyLoad: PropTypes.bool,
         preLoad: PropTypes.bool,

packages/semi-ui/locale/source/fr.ts

@@ -157,14 +157,14 @@ const local: Locale = {
         preview: 'Aperçu',
         loading: 'Chargement',
         loadError: 'Échec du chargement',
-        prevTip : 'Précédent',
-        nextTip : 'Suivant',
-        zoomInTip : 'Zoom avant',
-        zoomOutTip : 'Zoom arrière',
-        rotateTip : 'Rotation',
-        downloadTip : 'Télécharger',
-        adaptiveTip : 'Adapter à la page',
-        originTip : 'Taille d\'origine',
+        prevTip: 'Précédent',
+        nextTip: 'Suivant',
+        zoomInTip: 'Zoom avant',
+        zoomOutTip: 'Zoom arrière',
+        rotateTip: 'Rotation',
+        downloadTip: 'Télécharger',
+        adaptiveTip: 'Adapter à la page',
+        originTip: 'Taille d\'origine',
     },
 };
 

packages/semi-ui/modal/Modal.tsx

@@ -121,7 +121,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         this.state = {
             displayNone: !props.visible,
             isFullScreen: props.fullScreen,
-            shouldRender:this.props.visible || (this.props.keepDOM && !this.props.lazyRender)
+            shouldRender: this.props.visible || (this.props.keepDOM && !this.props.lazyRender)
         };
         this.foundation = new ModalFoundation(this.adapter);
         this.modalRef = React.createRef();
@@ -169,7 +169,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                     this.setState({ isFullScreen });
                 }
             },
-            setShouldRender:(shouldRender)=>{
+            setShouldRender: (shouldRender)=>{
                 if (shouldRender!==this.state.shouldRender){
                     this.setState({ shouldRender });
                 }
@@ -397,7 +397,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                                 }}
                             >
                                 {
-                                    ({ animationClassName:maskAnimationClassName, animationEventsNeedBind:maskAnimationEventsNeedBind })=>{
+                                    ({ animationClassName: maskAnimationClassName, animationEventsNeedBind: maskAnimationEventsNeedBind })=>{
                                         return this.state.shouldRender ? <ModalContent
                                             {...restProps}
                                             contentExtraProps={animationEventsNeedBind}

packages/semi-ui/navigation/SubNav.tsx

@@ -9,7 +9,7 @@ import '@douyinfe/semi-foundation/navigation/navigation.scss';
 
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
 import SubNavFoundation, { SubNavAdapter } from '@douyinfe/semi-foundation/navigation/subNavFoundation';
-import {strings, numbers, cssClasses} from '@douyinfe/semi-foundation/navigation/constants';
+import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
 import { IconChevronDown, IconChevronUp, IconChevronRight } from '@douyinfe/semi-icons';
 
 import NavItem from './Item';
@@ -17,7 +17,7 @@ import Dropdown, { DropdownProps } from '../dropdown';
 import NavContext, { NavContextType } from './nav-context';
 
 import { times, get } from 'lodash';
-import Collapsible from "../collapsible"
+import Collapsible from "../collapsible";
 import CSSAnimation from "../_cssAnimation";
 
 export interface ToggleIcon {
@@ -195,9 +195,9 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
 
         const iconElem = React.isValidElement(icon) ? (withTransition ? (
             <CSSAnimation animationState={isOpen?"enter":"leave"} startClassName={`${cssClasses.PREFIX}-icon-rotate-${isOpen?"0":"180"}`}>
-                {({animationClassName})=>{
+                {({ animationClassName })=>{
                     // @ts-ignore
-                    return React.cloneElement(icon, { size: iconSize,className:animationClassName })
+                    return React.cloneElement(icon, { size: iconSize, className: animationClassName });
                 }}
             </CSSAnimation>
             // @ts-ignore
@@ -293,7 +293,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
                     {children}
                 </ul>: null
             }
-        </Collapsible>
+        </Collapsible>;
 
 
         const finalDom = isHorizontal ? null : subNavMotion ? (

packages/semi-ui/navigation/_story/MountUnmount/index.jsx

@@ -5,7 +5,7 @@ import { IconUser, IconStar, IconUserGroup, IconEdit, IconApps, IconSetting } fr
 function AppNav({ shouldRender = true }) {
     const [selectedKeys, setSelectedKeys] = useState([]);
     const navItems = [
-        { itemKey: 'user', text: '用户管理', icon:  <IconUser /> },
+        { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
         { itemKey: 'union', text: '公会中心', icon: <IconStar /> },
         {
             itemKey: 'union-management',

packages/semi-ui/notification/index.tsx

@@ -1,14 +1,14 @@
-import React, {CSSProperties} from 'react';
+import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext, {ContextValue} from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import NotificationListFoundation, {
     ConfigProps, NotificationListAdapter,
     NotificationListProps,
     NotificationListState
 } from '@douyinfe/semi-foundation/notification/notificationListFoundation';
-import {cssClasses, strings} from '@douyinfe/semi-foundation/notification/constants';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/notification/constants';
 import Notice from './notice';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/notification/notification.scss';
@@ -90,7 +90,7 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
                 this.noticeStorage = [...notices];
                 this.removeItemStorage = [...removedItems];
                 // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
-                this.setState({notices, removedItems});
+                this.setState({ notices, removedItems });
             },
             getNotices: () => this.noticeStorage,
         };
@@ -99,7 +99,7 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
     static addNotice(notice: NoticeProps) {
         const id = getUuid('notification');
         if (!ref) {
-            const {getPopupContainer} = notice;
+            const { getPopupContainer } = notice;
             const div = document.createElement('div');
             if (!this.wrapperId) {
                 this.wrapperId = getUuid('notification-wrapper').slice(0, 32);
@@ -113,11 +113,11 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
             } else {
                 document.body.appendChild(div);
             }
-            ReactDOM.render(React.createElement(NotificationList, {ref: instance => (ref = instance)}), div, () => {
-                ref.add({...notice, id});
+            ReactDOM.render(React.createElement(NotificationList, { ref: instance => (ref = instance) }), div, () => {
+                ref.add({ ...notice, id });
             });
         } else {
-            ref.add({...notice, id});
+            ref.add({ ...notice, id });
         }
         return id;
     }
@@ -131,23 +131,23 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
     }
 
     static info(opts: NoticeProps) {
-        return this.addNotice({...defaultConfig, ...opts, type: 'info'});
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'info' });
     }
 
     static success(opts: NoticeProps) {
-        return this.addNotice({...defaultConfig, ...opts, type: 'success'});
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'success' });
     }
 
     static error(opts: NoticeProps) {
-        return this.addNotice({...defaultConfig, ...opts, type: 'error'});
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'error' });
     }
 
     static warning(opts: NoticeProps) {
-        return this.addNotice({...defaultConfig, ...opts, type: 'warning'});
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'warning' });
     }
 
     static open(opts: NoticeProps) {
-        return this.addNotice({...defaultConfig, ...opts, type: 'default'});
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'default' });
     }
 
     static close(id: string) {
@@ -204,24 +204,24 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
                 // @ts-ignore
                 <div placement={position} key={position} className={className} style={style}>
                     {notices.map((notice, index) => {
-                            const isRemoved = removedItems.find(removedItem => removedItem.id === notice.id) !== undefined;
-                            return <CSSAnimation key={notice.id}
-                                                 animationState={isRemoved ? "leave" : "enter"}
-                                                 startClassName={`${cssClasses.NOTICE}-animation-${isRemoved ? "hide" : "show"}_${position}`}>
-                                {({animationClassName, animationEventsNeedBind, isAnimating}) => {
-                                    return isRemoved && !isAnimating ? null : <Notice
-                                        {...notice}
-                                        className={cls({
-                                            [notice.className]: Boolean(notice.className),
-                                            [animationClassName]: true,
-                                        })}
-                                        {...animationEventsNeedBind}
-                                        style={{...notice.style}}
-                                        close={this.remove}
-                                    />
-                                }}
-                            </CSSAnimation>
-                        }
+                        const isRemoved = removedItems.find(removedItem => removedItem.id === notice.id) !== undefined;
+                        return <CSSAnimation key={notice.id}
+                            animationState={isRemoved ? "leave" : "enter"}
+                            startClassName={`${cssClasses.NOTICE}-animation-${isRemoved ? "hide" : "show"}_${position}`}>
+                            {({ animationClassName, animationEventsNeedBind, isAnimating }) => {
+                                return isRemoved && !isAnimating ? null : <Notice
+                                    {...notice}
+                                    className={cls({
+                                        [notice.className]: Boolean(notice.className),
+                                        [animationClassName]: true,
+                                    })}
+                                    {...animationEventsNeedBind}
+                                    style={{ ...notice.style }}
+                                    close={this.remove}
+                                />;
+                            }}
+                        </CSSAnimation>;
+                    }
                     )}
                 </div>
             );
@@ -241,8 +241,8 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
     }
 
     render() {
-        let {notices} = this.state;
-        const {removedItems} = this.state;
+        let { notices } = this.state;
+        const { removedItems } = this.state;
         notices = Array.from(new Set([...notices, ...removedItems]));
         const noticesInPosition: NoticesInPosition = {
             top: [],

packages/semi-ui/popconfirm/_story/TitlePopconfirm/index.jsx

@@ -10,7 +10,7 @@ const typeMap = {
     default: {
         okType: 'primary',
         cancelType: 'primary',
-        icon:  <IconAlertTriangle />,
+        icon: <IconAlertTriangle />,
     },
     warning: {
         okType: 'warning',

packages/semi-ui/radio/radioInner.tsx

@@ -120,7 +120,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
 
         const inner = classnames({
             [`${prefix}-focus`]: focusInner,
-            [`${prefix}-focus-border`]:  focusInner && !checked,
+            [`${prefix}-focus-border`]: focusInner && !checked,
             [`${prefix}-inner-display`]: !isButtonRadio,
         });
 

packages/semi-ui/rating/item.tsx

@@ -182,7 +182,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
         const firstStarProps = {
             ref: this.saveFirstStar as any,
-            role:"radio",
+            role: "radio",
             'aria-checked': value === index + 0.5,
             'aria-posinset': 2 * index + 1,
             'aria-setsize': AriaSetSize,
@@ -195,7 +195,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
             onFocus: (e) => {
                 this.onFocus(e, 'first');
             },
-            onBlur:(e) => {
+            onBlur: (e) => {
                 this.onBlur(e, 'first');
             },
         };
@@ -203,7 +203,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         const secondStarTabIndex = !disabled && ((value === index + 1) || (isEmpty && value === 0)) ? 0 : -1;
         const secondStarProps = {
             ref: this.saveSecondStar as any,
-            role:"radio",
+            role: "radio",
             'aria-checked': isEmpty ? value === 0 : value === index + 1,
             'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
             'aria-setsize': AriaSetSize, 
@@ -216,7 +216,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
             onFocus: (e) => {
                 this.onFocus(e, 'second');
             },
-            onBlur:(e) => {
+            onBlur: (e) => {
                 this.onBlur(e, 'second');
             },
         };

packages/semi-ui/spin/index.tsx

@@ -101,7 +101,7 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
                 <SpinIcon />
             )}
             {tip ? <div x-semi-prop="tip">{tip}</div> : null}
-        </div>:null
+        </div>:null;
     }
 
     render() {

packages/semi-ui/table/CustomExpandIcon.tsx

@@ -59,10 +59,10 @@ export default function CustomExpandIcon(props: CustomExpandIconProps) {
     if (motion) {
         const originIcon = icon;
         icon = <CSSAnimation animationState={expanded?"enter":"leave"} startClassName={`${cssClasses.PREFIX}-expandedIcon-${expanded?'show':"hide"}`}>
-            {({animationClassName})=>{
-                return React.cloneElement(originIcon,{className:(originIcon.props.className||"")+" "+animationClassName})
+            {({ animationClassName })=>{
+                return React.cloneElement(originIcon, { className: (originIcon.props.className||"")+" "+animationClassName });
             }}
-        </CSSAnimation>
+        </CSSAnimation>;
     }
 
     return (

packages/semi-ui/table/_story/VirtualTableOnCell/index.jsx

@@ -35,7 +35,7 @@ export default class VirtualizedFixedDemo extends React.Component {
                 dataIndex: 'address',
                 onCell: (record, index) => {
                     return {
-                        style:{ color:'red' },
+                        style: { color: 'red' },
                         className: 'test-red'
                     };
                 }

packages/semi-ui/toast/index.tsx

@@ -224,14 +224,14 @@ const createBaseToast = () => class ToastList extends BaseComponent<ToastListPro
                     const isRemoved = removedItems.find(removedItem=>removedItem.id===item.id) !== undefined;
                     return <CSSAnimation key={item.id} motion={item.motion} animationState={isRemoved?"leave":"enter"} startClassName={isRemoved?`${cssClasses.PREFIX}-animation-hide`:`${cssClasses.PREFIX}-animation-show`}>
                         {
-                            ({animationClassName,animationEventsNeedBind,isAnimating})=>{
-                                return  (isRemoved && !isAnimating) ? null : <Toast {...item} className={cls({
-                                    [item.className]:Boolean(item.className),
-                                    [animationClassName]:true
-                                })} {...animationEventsNeedBind} style={{ ...item.style }} close={id => this.remove(id)} ref={refFn} />
+                            ({ animationClassName, animationEventsNeedBind, isAnimating })=>{
+                                return (isRemoved && !isAnimating) ? null : <Toast {...item} className={cls({
+                                    [item.className]: Boolean(item.className),
+                                    [animationClassName]: true
+                                })} {...animationEventsNeedBind} style={{ ...item.style }} close={id => this.remove(id)} ref={refFn} />;
                             }
                         }
-                    </CSSAnimation>
+                    </CSSAnimation>;
                 }
                 )}
             </React.Fragment>

packages/semi-ui/webpack.config.js

@@ -73,9 +73,9 @@ module.exports = function ({ minimize }) {
             alias: {
                 "@douyinfe/semi-foundation": path.resolve(__dirname, "../semi-foundation"),
                 "@douyinfe/semi-icons": path.resolve(__dirname, "../semi-icons"),
-                "@douyinfe/semi-illustrations":path.resolve(__dirname, "../semi-illustrations"),
-                "@douyinfe/semi-animation":path.resolve(__dirname, "../semi-animation"),
-                "@douyinfe/semi-animation-react":path.resolve(__dirname, "../semi-animation-react")
+                "@douyinfe/semi-illustrations": path.resolve(__dirname, "../semi-illustrations"),
+                "@douyinfe/semi-animation": path.resolve(__dirname, "../semi-animation"),
+                "@douyinfe/semi-animation-react": path.resolve(__dirname, "../semi-animation-react")
             },
         },
         externals: {