云社区 博客 博客详情
云社区 博客 博客详情

搜索组件SearchBar

云会议运营喵大人 发表于 2020-02-28 09:51:52 02-28 09:51
云会议运营喵大人 发表于 2020-02-28 09:51:52 2020/02/28
0
0

【摘要】 earchBar搜索框。SearchBar UI 提供与WeLink规范一致的视图。 组件提供了搜索框、搜索结果、搜索按钮的样式。参数说明名称类型默认值说明autocomplete'off'defaultValuestringdefault搜索框的值langobjectlanguage取消按钮显示字样, 例如:{ cancel: '取消' }onCancelfuncundefined取消on...

earchBar


搜索框。SearchBar UI 提供与WeLink规范一致的视图。 组件提供了搜索框、搜索结果、搜索按钮的样式。

参数说明

名称类型默认值说明
autocomplete
'off'

defaultValuestringdefault搜索框的值
langobjectlanguage取消按钮显示字样, 例如:{ cancel: '取消' }
onCancelfuncundefined取消
onChangefuncundefined搜索框的input的onChange事件
onClearfuncundefined清除按钮事件
onSubmitfuncundefined搜索按钮事件
placeholderstring'搜索'搜索框为空时显示的文字,默认为搜索
searchNamestring'q'搜索框input的name

import React from 'react';
import {
  // main component
  SearchBar,
  // for display data
  Panel,
  PanelHeader,
  PanelBody,
  PanelFooter,
  MediaBox,
  MediaBoxHeader,
  MediaBoxBody,
  MediaBoxTitle,
  MediaBoxDescription,
  Cell,
  CellBody,
  CellFooter
} from '@wecode/react-weui';
const sampleData = [
  'Aaren',
  'Bab',
  'Cacilia',
  'Dacey',
  'Eachelle',
  'Fae',
  'Gabbey',
  'Hadria',
  'Ianthe',
  'Jacenta',
  'Kacey',
  'La Verne',
  'Mab',
  'Nada',
  'Octavia',
  'Page',
  'Queenie',
  'Rachael',
  'Saba',
  'Tabatha',
  'Ula',
  'Val',
  'Wallie',
  'Xaviera',
  'Yalonda',
  'Zabrina'
];const appMsgIcon = (
  <img
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
    alt=""
  />
);const CellMore = () => (
  <Cell access link>
    <CellBody>More</CellBody>
    <CellFooter />
  </Cell>
);export default class SearchBarDemo extends React.Component {
  state = {
    searchText: '',
    results: []
  };  handleChange(text, e) {
    const keywords = [text];
    let results = sampleData.filter(/./.test.bind(new RegExp(keywords.join('|'), 'i')));    if (results.length > 3) results = results.slice(0, 3);
    this.setState({
      results,
      searchText: text
    });
  }  render() {
    const { searchText, results } = this.state;
    return (
      <section>
        <SearchBar
          onChange={this.handleChange.bind(this)}
          defaultValue={searchText}
          placeholder="Female Name Search"
          onSubmit={(text, e) => {
            console.log('~~~~~~~', text);
            e.preventDefault();
            document.activeElement.blur();
          }}
          lang={{
            cancel: 'Cancel'
          }}
        />        <Panel style={{ display: searchText ? null : 'none', marginTop: 0 }}>
          <PanelHeader>Female Name Search</PanelHeader>
          <PanelBody>
            {results.length > 0 ? (
              results.map((item, i) => (
                <MediaBox key={i} type="appmsg" href="javascript:void(0);">
                  <MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
                  <MediaBoxBody>
                    <MediaBoxTitle>{item}</MediaBoxTitle>
                    <MediaBoxDescription>You may like this name.</MediaBoxDescription>
                  </MediaBoxBody>
                </MediaBox>
              ))
            ) : (
              <MediaBox> Can not find any!</MediaBox>
            )}
          </PanelBody>
          <PanelFooter href="javascript:void(0);">
            <CellMore />
          </PanelFooter>
        </Panel>
      </section>
    );
  }
}

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消