refactor(Search): convert to TypeScript, impove docs and tests

components/search/__docs__/adaptor/index.tsx

@@ -57,7 +57,7 @@ export default {
             },
         ],
     }),
-    adaptor: ({ shape, level, size, menu, label, width, style, ...others }) => {
+    adaptor: ({ shape, level, size, menu, label, width, style, ...others }: any) => {
         return (
             <Search
                 {...others}
@@ -71,7 +71,7 @@ export default {
             />
         );
     },
-    content: shape => ({
+    content: (shape: string) => ({
         options: [
             {
                 name: 'menu',
@@ -84,15 +84,15 @@ export default {
                 default: 'show',
             },
         ].filter(({ name }) => name !== 'buttonLabel' || shape === 'normal'),
-        transform: (props, { menu, buttonLabel }) => {
+        transform: (props: any, { menu, buttonLabel }: any) => {
             return {
                 ...props,
                 menu: menu === 'show',
                 label: buttonLabel === 'show',
             };
         },
     }),
-    demoOptions: demo => {
+    demoOptions: (demo: { node: { props: { level: string } } }) => {
         if (demo.node.props.level === 'dark') {
             return {
                 ...demo,

components/search/__docs__/demo/base/index.tsx

@@ -2,24 +2,26 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Search } from '@alifd/next';
 
-function onSearch(v) {
+function onSearch(v: string) {
     console.log(v);
 }
-const App = () => [
-    <p key="1">simple</p>,
-    <Search key="2" shape="simple" onSearch={onSearch} style={{ width: '400px' }} />,
-    <p key="3">default</p>,
-    <Search key="4" onSearch={onSearch} style={{ width: '400px' }} />,
-    <p key="5">custom text </p>,
-    <Search key="6" searchText="search" onSearch={onSearch} style={{ width: '400px' }} />,
-    <p key="7">custom text widthout icon</p>,
-    <Search
-        key="8"
-        hasIcon={false}
-        searchText={<span style={{ color: 'blue' }}>search</span>}
-        onSearch={onSearch}
-        style={{ width: '400px' }}
-    />,
-];
 
-ReactDOM.render(<App />, mountNode);
+ReactDOM.render(
+    <div>
+        <p key="1">simple</p>,
+        <Search key="2" shape="simple" onSearch={onSearch} style={{ width: '400px' }} />,
+        <p key="3">default</p>,
+        <Search key="4" onSearch={onSearch} style={{ width: '400px' }} />,
+        <p key="5">custom text </p>,
+        <Search key="6" searchText="search" onSearch={onSearch} style={{ width: '400px' }} />,
+        <p key="7">custom text widthout icon</p>,
+        <Search
+            key="8"
+            hasIcon={false}
+            searchText={<span style={{ color: 'blue' }}>search</span>}
+            onSearch={onSearch}
+            style={{ width: '400px' }}
+        />
+    </div>,
+    mountNode
+);

components/search/__docs__/demo/combobox/index.tsx

@@ -22,11 +22,11 @@ const dataSource = [
 ];
 
 class App extends React.Component {
-    onSearch(value, filterValue) {
+    onSearch(value: string, filterValue: string) {
         console.log('onSearch', value, filterValue);
     }
 
-    onChange(value, type, e) {
+    onChange(value: number | string, type: string, e: unknown) {
         console.log('onChange', value, type, e);
         this.setState({
             value: value,

components/search/__docs__/demo/custom/index.tsx

@@ -24,9 +24,13 @@ const menuData = [
         index: '4',
     },
 ];
-
-class App extends React.Component {
-    constructor(props) {
+interface AppState {
+    menuData: Array<{ label: string; value: string; index?: string }>;
+    value: string;
+    visible: boolean;
+}
+class App extends React.Component<unknown, AppState> {
+    constructor(props: unknown) {
         super(props);
         this.state = {
             visible: false,
@@ -65,30 +69,30 @@ class App extends React.Component {
         );
     }
 
-    onSearch(value) {
+    onSearch(value: string) {
         console.log(value);
     }
 
-    onChange(value) {
+    onChange(value: string) {
         this.setState({
             visible: value.length > 0,
             value: value,
         });
     }
 
-    onSelect(selectedKeys) {
+    onSelect(selectedKeys: Array<string>) {
         this.setState({
             visible: false,
             value: selectedKeys[0],
         });
     }
 
-    onDelete(index, e) {
+    onDelete(index: string | undefined, e: React.MouseEvent) {
         e.stopPropagation();
 
         const menuData = this.state.menuData;
 
-        const menuDataNew = [];
+        const menuDataNew: AppState['menuData'] = [];
 
         menuData.forEach(function (item) {
             if (item.index !== index) {

components/search/__docs__/demo/filter/index.tsx

@@ -2,8 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Search } from '@alifd/next';
 
-class App extends React.Component {
-    constructor(props) {
+interface AppState {
+    filter: Array<{ label: string; value: string }>;
+    value: string;
+}
+
+class App extends React.Component<unknown, AppState> {
+    constructor(props: unknown) {
         super(props);
         this.state = {
             filter: [
@@ -60,18 +65,18 @@ class App extends React.Component {
         };
     }
 
-    onSearch(value, filterValue) {
+    onSearch(value: string, filterValue: string) {
         console.log(value, filterValue);
     }
 
-    onChange(value) {
+    onChange(value: string) {
         this.setState({
             value: value,
         });
     }
 
     // value is filter value，obj is the search value
-    onFilterChange(value) {
+    onFilterChange(value: unknown) {
         console.log(value);
     }
 

components/search/__docs__/theme/index.tsx

@@ -9,10 +9,6 @@ import enUS from '../../../locale/en-us';
 import '../../style';
 import Search from '../../index';
 
-// import demo helper
-
-// import component
-
 const i18nMaps = {
     'en-us': {
         title: 'Search',
@@ -50,8 +46,14 @@ const demo = {
 const style = {
     width: 380,
 };
-
-class FunctionDemo extends React.Component {
+interface DemoProps {
+    i18n: { title: string; products: string; suppliers: string };
+}
+interface FieldValue {
+    hasMenu: { value: string };
+    buttonText: { value: string };
+}
+class FunctionDemo extends React.Component<DemoProps> {
     field = new Field(this, {
         values: {
             demo: demo,
@@ -61,7 +63,8 @@ class FunctionDemo extends React.Component {
     render() {
         const { i18n } = this.props;
         const { init, getValue } = this.field;
-        const hasMenu = getValue('demo').hasMenu.value === 'true';
+        const newValue: FieldValue = getValue('demo');
+        const hasMenu = newValue.hasMenu.value === 'true';
         const filter = hasMenu
             ? [
                   {
@@ -75,7 +78,7 @@ class FunctionDemo extends React.Component {
               ]
             : [];
 
-        const buttonText = getValue('demo').buttonText.value === 'true';
+        const buttonText = newValue.buttonText.value === 'true';
 
         const title = buttonText ? i18n.title : '';
 

components/search/__tests__/a11y-spec.tsx

@@ -1,54 +1,32 @@
 import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';
+import { testReact } from '../../util/__tests__/a11y/validate';
 import Search from '../Search';
 import '../style';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-/* eslint-disable no-undef, react/jsx-filename-extension */
-// TODO: fix `label` - <input> should have some form of label
 describe('Search A11y', () => {
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-        unmount();
-    });
-
     it('should not have any violations for secondary', async () => {
-        wrapper = await testReact(<Search type="secondary" />);
-        return wrapper;
+        await testReact(<Search type="secondary" />);
     });
 
     it('should not have any violations for number value', async () => {
-        wrapper = await testReact(<Search value={123} />);
-        return wrapper;
+        await testReact(<Search value={123} />);
     });
 
     it('should not have any violations for undefined value', async () => {
-        wrapper = await testReact(<Search value={undefined} />);
-        return wrapper;
+        await testReact(<Search value={undefined} />);
     });
 
     it('should not have any violations for simple shape', async () => {
-        wrapper = await testReact(<Search shape="simple" />);
-        return wrapper;
+        await testReact(<Search shape="simple" />);
     });
 
     it('should not have any violations for no icon', async () => {
-        wrapper = await testReact(<Search hasIcon={false} />);
-        return wrapper;
+        await testReact(<Search hasIcon={false} />);
     });
 
     it('should not have any violations for search text', async () => {
         const text = 'search';
         const SearchText = <span>{text}</span>;
-        wrapper = await testReact(<Search searchText={SearchText} />);
-        return wrapper;
+        await testReact(<Search searchText={SearchText} />);
     });
 });