refactor: 优化 autocomplete 展示

ChocolateUI · Oct 18, 2021 · 0432678 · 0432678
1 parent 0c59f24
commit 0432678
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 99 deletions.
diff --git a/src/components/AutoComplete/auto-complete-doc.mdx b/src/components/AutoComplete/auto-complete-doc.mdx
@@ -1,5 +1,5 @@
 <!-- AutoComplete Doc -->
-## AutoDrop/AutoComplete
+## AutoComplete 自动完成
 
 自动完成搜索组件 `AutoComplete`，通过读取本地数据源，或者请求网络数据源，将搜索和远程数据结合
 
@@ -30,33 +30,4 @@ import dedent from 'ts-dedent';
 ### 具体参数
 <ArgsTable of={AutoComplete} />
 
-export const Template = (args) => <AutoComplete {...args} />
-
-### 组件展示
-
-##### 读取本地数据源
-
-<Story 
-  name="default" 
-  id="autodrop--config-search" 
->
-{Template.bind({})}
-</Story>
-
-##### 远程搜索
-
-<Story 
-  name="default" 
-  id="autodrop--remote-search" 
->
-{Template.bind({})}
-</Story>
-
-##### 自定义返回选项样式
-
-<Story 
-  name="default" 
-  id="autodrop--diy-options" 
->
-{Template.bind({})}
-</Story>
+export const Template = (args) => <AutoComplete {...args} />
diff --git a/src/components/AutoComplete/autoComplete.stories.tsx b/src/components/AutoComplete/autoComplete.stories.tsx
@@ -1,97 +1,153 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import AutoComplete, { AutoCompleteProps } from './autoComplete'
-import { DataSourceType } from './autoComplete'
-import { lakersWithNumber } from './dataConfig'
-import AutoCompleteDoc from './auto-complete-doc.mdx'
+import React from "react";
+import { Story, Meta } from "@storybook/react";
+import AutoComplete, { AutoCompleteProps } from "./autoComplete";
+import { DataSourceType } from "./autoComplete";
+import { lakersWithNumber } from "./dataConfig";
+import AutoCompleteDoc from "./auto-complete-doc.mdx";
+import Card from "../Card/card";
 interface GithubUserProps {
-    login: string;
-    url: string;
-    avatar_url: string;
+  login: string;
+  url: string;
+  avatar_url: string;
 }
 
 const handleAsyncFetch = (query: string) => {
-    return fetch(`https://api.github.com/search/users?q=${query}`)
-        .then(res => res.json())
-        .then(({ items }) => {
-            return items.length && items.map((item: any) => ({ value: item.login, ...item }))
-        })
-}
+  return fetch(`https://api.github.com/search/users?q=${query}`)
+    .then((res) => res.json())
+    .then(({ items }) => {
+      return (
+        items.length &&
+        items.map((item: any) => ({ value: item.login, ...item }))
+      );
+    });
+};
 
 const handleFetch = (query: string) => {
-    return lakersWithNumber.filter(player => player.value.includes(query) || player.zhValue.includes(query))
-}
+  return lakersWithNumber.filter(
+    (player) => player.value.includes(query) || player.zhValue.includes(query)
+  );
+};
 
 const renderOption = (item: DataSourceType) => {
-    const itemWithGithub = item as DataSourceType<GithubUserProps>
-    return (
-        <>
-            <span><img alt="avatar" style={{ width: 50, height: 50, borderRadius: '50%' }} src={itemWithGithub.avatar_url} /></span>
-            <span style={{ marginLeft: 20}}>姓名: {itemWithGithub.value}</span>
-        </>
-    )
-}
+  const itemWithGithub = item as DataSourceType<GithubUserProps>;
+  return (
+    <>
+      <span>
+        <img
+          alt="avatar"
+          style={{ width: 50, height: 50, borderRadius: "50%" }}
+          src={itemWithGithub.avatar_url}
+        />
+      </span>
+      <span style={{ marginLeft: 20 }}>姓名: {itemWithGithub.value}</span>
+    </>
+  );
+};
+
+const BaseAutoComplete = () => {
+  const commonCss = { width: 300, marginBottom: 20 };
+  const cardCss = { margin: "20px 20px 0 0" };
 
-const BaseAutoComplete = (props: AutoCompleteProps) => {
-  const { fetchSuggestions, renderOption, placeholder, size, width, disabled } = props;
   return (
-    <AutoComplete
-      fetchSuggestions={fetchSuggestions}
-      width={width}
-      size={size}
-      disabled={disabled}
-      renderOption={renderOption}
-      placeholder={placeholder}
-    />
-  )
-}
+    <div style={{ display: "flex", width: 1024, flexWrap: "wrap" }}>
+      <Card title="不同大小" style={cardCss} shadow>
+        <AutoComplete
+          fetchSuggestions={handleFetch}
+          style={commonCss}
+          size="sm"
+          placeholder="输入你最喜欢换的水果试试看"
+        />
+        <AutoComplete
+          fetchSuggestions={handleFetch}
+          style={commonCss}
+          size="lg"
+          placeholder="输入你最喜欢换的水果试试看"
+        />
+      </Card>
+      <Card title="远程搜索" style={cardCss} shadow>
+        <AutoComplete
+          fetchSuggestions={handleAsyncFetch}
+          style={commonCss}
+          size="sm"
+          placeholder="随便搜点什么吧"
+        />
+        <AutoComplete
+          fetchSuggestions={handleAsyncFetch}
+          style={commonCss}
+          size="lg"
+          placeholder="随便搜点什么吧"
+        />
+      </Card>
+      <Card title="不可用" style={cardCss} shadow>
+        <AutoComplete
+          fetchSuggestions={handleAsyncFetch}
+          style={commonCss}
+          disabled
+          size="sm"
+          placeholder="随便搜点什么吧"
+        />
+        <AutoComplete
+          fetchSuggestions={handleAsyncFetch}
+          style={commonCss}
+          disabled
+          size="lg"
+          placeholder="随便搜点什么吧"
+        />
+      </Card>
+      <Card title="自定义下拉选项" style={cardCss} shadow>
+      <AutoComplete
+          fetchSuggestions={handleAsyncFetch}
+          style={commonCss}
+          size="sm"
+          renderOption={renderOption}
+          placeholder="随便搜点什么吧"
+        />
+        <AutoComplete
+          fetchSuggestions={handleAsyncFetch}
+          style={commonCss}
+          size="lg"
+          renderOption={renderOption}
+          placeholder="随便搜点什么吧"
+        />
+      </Card>
+    </div>
+  );
+};
 
 export default {
   component: AutoComplete,
-  title: 'AutoComplete',
+  title: "AutoComplete 自动完成",
   parameters: {
     controls: {
-      include: ['disabled', 'size', 'placeholder', 'width']
+      include: ["disabled", "size", "placeholder", "width"],
     },
     docs: {
-      page: AutoCompleteDoc
-    }
+      page: AutoCompleteDoc,
+    },
   },
   argTypes: {
     width: {
-      control: { 
-        type: 'range', min: 100, max: 400, step: 1,
-      }
+      control: {
+        type: "range",
+        min: 100,
+        max: 400,
+        step: 1,
+      },
     },
-  }
+  },
 } as Meta;
 
 // _default
-const _default: Story<AutoCompleteProps> = (args) => <BaseAutoComplete {...args} />;
+const _default: Story<AutoCompleteProps> = (args) => (
+  <BaseAutoComplete {...args} />
+);
 
-export const ConfigSearch = _default.bind({});
+export const Primary = _default.bind({});
 
-ConfigSearch.args = {
+Primary.args = {
   fetchSuggestions: handleFetch,
   width: 300,
-  size: 'sm',
+  size: "sm",
   disabled: false,
-  placeholder: '输入你最喜欢换的水果试试看'
-}
-
-export const RemoteSearch= _default.bind({});
-
-RemoteSearch.args = {
-  ...ConfigSearch.args,
-  fetchSuggestions: handleAsyncFetch,
-  placeholder: '随便搜点什么吧'
-}
-
-export const DiyOptions = _default.bind({});
-
-DiyOptions.args = {
-  ...ConfigSearch.args,
-  fetchSuggestions: handleAsyncFetch,
-  placeholder: '随便搜点什么吧',
-  renderOption: renderOption,
-}
+  placeholder: "输入你最喜欢换的水果试试看",
+};