Search component

[noronaoki]

概要

任意の文字列にマッチする情報結果を表示する検索窓コンポーネント。
検索コマンド機能や正規表現といった高度な機能はひとまず置いておいて、基本的な機能を搭載したものとする。
大きな目的としては、どんなページにいてもあらゆる情報を検索して表示することができる利便性を提供すること。
検索パフォーマンスなどのバックエンド側部分には関知せず愚直に結果だけを返す役割。

デザイン

XDのプロトタイプは別途共有する

利用する既存コンポーネント

• Modal
• Pager
• TextField
• ClickAwayListener
  • 領域外クリックで閉じるようにするため
• Tab（これはまだ未実装なので別途実装が必要）
  • 件数バッジはBadgeコンポーネントで実現する

仕様

• 検索アイコン等をクリックしたらこのコンポーネントが起動する
  • 起動直後に自動的に上部のTextFiledにfocusが当たるとすぐにタイピングできて便利
• 部分一致
• インクリメンタルサーチ
• 実装者の任意の件数でページングする
• 実装者の任意のカテゴリでタブ表示にする
  • 全て、ユニット、サイズなど
  • タブの設置は必須で、デフォルトは「全て」
• タブにはそれぞれの検索結果数をBadgeで表示する
• マッチした文字列をBoldにする
• このコンポーネントには下記の状態を保持する
  • Empty state
    • 検索窓に何も打ち込まれていない時、主に初期状態を指す
    • Body部分には検索ワードを入力するよう促すテキストを表示する
  • No results
    • 検索ワードにマッチするものが無かった時を指す
    • その旨が伝わるテキストを表示する