优化代码

.github/workflows/main.yml

@@ -105,8 +105,9 @@ jobs:
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
+      - name: tsc
+        run: npm run lint:tsc
       - name: coverage
         run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
 
-    needs: setup
+    needs: setup

examples/adjust-overflow.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable no-console, react/prop-types */
 import type { BuildInPlacements } from 'rc-trigger/lib/interface';
-import React from 'react';
+import React, { useState } from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
 
@@ -58,35 +57,24 @@ const addressOptions = [
   },
 ];
 
-class MyCascader extends React.Component<{ builtinPlacements?: BuildInPlacements }> {
-  state = {
-    inputValue: '',
-  };
+const MyCascader = ({ builtinPlacements }: { builtinPlacements?: BuildInPlacements }) => {
+  const [inputValue, setInputValue] = useState('');
 
-  onChange = (value, selectedOptions) => {
+  const onChange = (value, selectedOptions) => {
     console.log(value, selectedOptions);
-    this.setState({
-      inputValue: selectedOptions.map(o => o.label).join(', '),
-    });
+    setInputValue(selectedOptions.map(o => o.label).join(', '));
   };
 
-  render() {
-    const { builtinPlacements } = this.props;
-    return (
-      <Cascader
-        options={addressOptions}
-        builtinPlacements={builtinPlacements}
-        onChange={this.onChange}
-      >
-        <input
-          placeholder={builtinPlacements ? 'Will not adjust position' : 'Will adjust position'}
-          value={this.state.inputValue}
-          style={{ width: 170 }}
-        />
-      </Cascader>
-    );
-  }
-}
+  return (
+    <Cascader options={addressOptions} builtinPlacements={builtinPlacements} onChange={onChange}>
+      <input
+        placeholder={builtinPlacements ? 'Will not adjust position' : 'Will adjust position'}
+        value={inputValue}
+        style={{ width: 170 }}
+      />
+    </Cascader>
+  );
+};
 
 const placements = {
   bottomLeft: {

examples/animation.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable no-console */
-import React from 'react';
+import React, { useState } from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
 
@@ -56,25 +55,19 @@ const addressOptions = [
   },
 ];
 
-class Demo extends React.Component {
-  state = {
-    inputValue: '',
-  };
+const Demo = () => {
+  const [inputValue, setInputValue] = useState('');
 
-  onChange = (value, selectedOptions) => {
+  const onChange = (value, selectedOptions) => {
     console.log(value, selectedOptions);
-    this.setState({
-      inputValue: selectedOptions.map(o => o.label).join(', '),
-    });
+    setInputValue(selectedOptions.map(o => o.label).join(', '));
   };
 
-  render() {
-    return (
-      <Cascader options={addressOptions} onChange={this.onChange} animation="slide-up">
-        <input value={this.state.inputValue} readOnly />
-      </Cascader>
-    );
-  }
-}
+  return (
+    <Cascader options={addressOptions} onChange={onChange} animation="slide-up">
+      <input value={inputValue} readOnly />
+    </Cascader>
+  );
+};
 
 export default Demo;

examples/change-on-select.tsx

@@ -1,79 +1,79 @@
-/* eslint-disable no-console */
 import React from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
 
 const options = [
   {
-    label: "Women Clothing",
-    value: "Women Clothing",
+    label: 'Women Clothing',
+    value: 'Women Clothing',
     children: [
       {
-        label: "Women Tops, Blouses & Tee",
-        value: "Women Tops, Blouses & Tee",
+        label: 'Women Tops, Blouses & Tee',
+        value: 'Women Tops, Blouses & Tee',
         children: [
           {
-            label: "Women T-Shirts",
-            value: "Women T-Shirts"
+            label: 'Women T-Shirts',
+            value: 'Women T-Shirts',
           },
           {
-            label: "Women Tops",
-            value: "Women Tops"
+            label: 'Women Tops',
+            value: 'Women Tops',
           },
           {
-            label: "Women Tank Tops & Camis",
-            value: "Women Tank Tops & Camis"
+            label: 'Women Tank Tops & Camis',
+            value: 'Women Tank Tops & Camis',
           },
           {
-            label: "Women Blouses",
-            value: "Women Blouses"
-          }
-        ]
+            label: 'Women Blouses',
+            value: 'Women Blouses',
+          },
+        ],
       },
       {
-        label: "Women Suits",
-        value: "Women Suits",
+        label: 'Women Suits',
+        value: 'Women Suits',
         children: [
           {
-            label: "Women Suit Pants",
-            value: "Women Suit Pants"
+            label: 'Women Suit Pants',
+            value: 'Women Suit Pants',
           },
           {
-            label: "Women Suit Sets",
-            value: "Women Suit Sets"
+            label: 'Women Suit Sets',
+            value: 'Women Suit Sets',
           },
           {
-            label: "Women Blazers",
-            value: "Women Blazers"
-          }
-        ]
+            label: 'Women Blazers',
+            value: 'Women Blazers',
+          },
+        ],
       },
       {
-        label: "Women Co-ords",
-        value: "Women Co-ords",
+        label: 'Women Co-ords',
+        value: 'Women Co-ords',
         children: [
           {
-            label: "Two-piece Outfits",
-            value: "Two-piece Outfits"
-          }
-        ]
-      }
-    ]
-  }
+            label: 'Two-piece Outfits',
+            value: 'Two-piece Outfits',
+          },
+        ],
+      },
+    ],
+  },
 ];
 
 const onChange = (value, selectedOptions) => {
-      console.log(value, selectedOptions);
+  console.log(value, selectedOptions);
 };
-
 
-const Demo = () => <Cascader
-showSearch
-options={options}
-onChange={onChange}
-changeOnSelect
-expandTrigger="hover"
-loadData={() => console.log('loadData')}
-/>;
+const Demo = () => (
+  <Cascader
+    showSearch
+    options={options}
+    onChange={onChange}
+    changeOnSelect
+    expandTrigger="hover"
+    loadData={() => console.log('loadData')}
+  />
+);
 
 export default Demo;

examples/custom-arrow-icon.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable no-console */
-import React from 'react';
+import React, { useState } from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
 
@@ -81,39 +80,33 @@ const loadingPath =
   ' 7.9 4.1 11.4 1.3C854.5 760.8 912 649.1 912 523.9c0-' +
   '221.1-179.4-400.2-400.6-399.9z';
 
-class Demo extends React.Component {
-  state = {
-    inputValue: '',
-    dynamicInputValue: '',
-    options: [
-      {
-        label: '福建',
-        isLeaf: false,
-        value: 'fj',
-      },
-      {
-        label: '浙江',
-        isLeaf: false,
-        value: 'zj',
-      },
-    ],
-  };
+const Demo = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [dynamicInputValue, setDynamicInputValue] = useState('');
+  const [options, setOptions] = useState([
+    {
+      label: '福建',
+      isLeaf: false,
+      value: 'fj',
+    },
+    {
+      label: '浙江',
+      isLeaf: false,
+      value: 'zj',
+    },
+  ]);
 
-  onChange = (value, selectedOptions) => {
+  const onChange = (value, selectedOptions) => {
     console.log(value, selectedOptions);
-    this.setState({
-      inputValue: selectedOptions.map(o => o.label).join(', '),
-    });
+    setInputValue(selectedOptions.map(o => o.label).join(', '));
   };
 
-  onChangeDynamic = (value, selectedOptions) => {
+  const onChangeDynamic = (value, selectedOptions) => {
     console.log(value, selectedOptions);
-    this.setState({
-      dynamicInputValue: selectedOptions.map(o => o.label).join(', '),
-    });
+    setDynamicInputValue(selectedOptions.map(o => o.label).join(', '));
   };
 
-  expandIcon = (
+  const expandIcon = (
     <i>
       <svg
         viewBox="0 0 1024 1024"
@@ -130,7 +123,7 @@ class Demo extends React.Component {
     </i>
   );
 
-  loadingIcon = (
+  const loadingIcon = (
     <i
       style={{
         position: 'absolute',
@@ -153,7 +146,7 @@ class Demo extends React.Component {
     </i>
   );
 
-  loadData = selectedOptions => {
+  const loadData = selectedOptions => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
     // 动态加载下级数据
@@ -169,37 +162,32 @@ class Demo extends React.Component {
           value: 'dynamic2',
         },
       ];
-      this.setState({
-        // eslint-disable-next-line react/no-access-state-in-setstate
-        options: [...this.state.options],
-      });
+      setOptions([...options]);
     }, 1500);
   };
 
-  render() {
-    return (
-      <div style={{ padding: '2rem' }}>
-        <Cascader
-          style={{ marginBottom: '2rem' }}
-          options={addressOptions}
-          onChange={this.onChange}
-          expandIcon={this.expandIcon}
-        >
-          <input placeholder="please select address" value={this.state.inputValue} />
-        </Cascader>
-        <Cascader
-          options={this.state.options}
-          loadData={this.loadData}
-          onChange={this.onChangeDynamic}
-          expandIcon={this.expandIcon}
-          loadingIcon={this.loadingIcon}
-          changeOnSelect
-        >
-          <input value={this.state.dynamicInputValue} readOnly />
-        </Cascader>
-      </div>
-    );
-  }
-}
+  return (
+    <div style={{ padding: '2rem' }}>
+      <Cascader
+        style={{ marginBottom: '2rem' }}
+        options={addressOptions}
+        onChange={onChange}
+        expandIcon={expandIcon}
+      >
+        <input placeholder="please select address" value={inputValue} />
+      </Cascader>
+      <Cascader
+        options={options}
+        loadData={loadData}
+        onChange={onChangeDynamic}
+        expandIcon={expandIcon}
+        loadingIcon={loadingIcon}
+        changeOnSelect
+      >
+        <input value={dynamicInputValue} readOnly />
+      </Cascader>
+    </div>
+  );
+};
 
 export default Demo;