メインコンテンツまでスキップ

フィルター検索パネルブロック

FilterSearchPanelコンポーネントは、ReactとTypeScriptで構築された、完全にカスタマイズ可能でアクセシブルなフィルタリング機能付き検索インターフェースです。モダンなデザインパターン、フォームバリデーション、柔軟なカスタマイズオプションを備えた、完全な検索・フィルター体験を提供します。

🚀 インストール​

npm install @nodeblocks/frontend-filter-search-panel-block

📖 使用方法​

import {FilterSearchPanel} from '@nodeblocks/frontend-filter-search-panel-block';
ライブエディター
function BasicFilterSearchPanel() {
  const [filters, setFilters] = useState([
    { label: 'アクティブ', key: 'status-active', groupName: 'ステータス' },
    { label: 'ウェブ開発', key: 'category-web', groupName: 'カテゴリー' }
  ]);

  const handleRemoveFilter = (filter: FilterChip) => {
    setFilters(filters.filter(f => f.key !== filter.key));
  };

  const handleSearch = ({search}: {search: string}) => {
    console.log('検索が実行されました:', search);
    setFilters(prev => [...prev, {label: search, key: search, groupName: 'カスタム'}]);
  };

  return (
    <FilterSearchPanel
      filters={filters}
      onClickRemoveFilter={handleRemoveFilter}
      onClickFilterButton={() => console.log('フィルターボタンがクリックされました')}
      onSearch={handleSearch}
      searchPlaceholder="サービスを検索..."
      noFilterText="フィルターが適用されていません"
      filterLabel="フィルター設定">
      <FilterSearchPanel.SearchInput />
      <FilterSearchPanel.ActionGroup />
    </FilterSearchPanel>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
filtersFilterChip[][]表示する現在選択されているフィルターチップの配列
defaultSearchValuestringundefined検索入力フィールドのデフォルト値
onClickRemoveFilter(filter: FilterChip) => voidundefinedフィルターチップが削除されたときにトリガーされるコールバック関数
onClickFilterButton() => voidundefinedフィルターボタンがクリックされたときにトリガーされるコールバック関数
onSearchChange(event: HTMLInputElement) => voidundefined検索入力値が変更されたときにトリガーされるコールバック関数
onSearch(data: T) => voidundefined検索データでフォームが送信されたときにトリガーされるコールバック関数
searchPlaceholderstringundefined検索入力フィールドのプレースホルダーテキスト
noFilterTextstringundefinedフィルターが選択されていないときに表示されるテキスト
filterLabelstringundefinedフィルターボタンのラベルテキスト
classNamestringundefinedフォームコンテナのスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはHTML form 要素のすべてのプロパティを継承します。

サブコンポーネント​

FilterSearchPanelコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

FilterSearchPanel.SearchInput​

プロパティ型デフォルト説明
searchPlaceholderstringコンテキストから検索入力に表示されるプレースホルダーテキスト
onSearchChange(event: HTMLInputElement) => voidundefined入力値が変更されたときにトリガーされるコールバック関数
onSearch() => voidundefined検索が実行されたときにトリガーされるコールバック関数
defaultSearchValuestringundefined検索入力のデフォルト値
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはHTML div 要素のすべてのプロパティを継承します。

FilterSearchPanel.FilterButton​

プロパティ型デフォルト説明
filterLabelstringコンテキストからフィルターボタンに表示されるラベルテキスト
onClickFilterButton() => voidコンテキストからボタンがクリックされたときにトリガーされるコールバック関数
classNamestringundefinedスタイリング用の追加CSSクラス名
childrenReactNodeコンテキストからデフォルトレンダリングをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはHTML button 要素のすべてのプロパティを継承します。

FilterSearchPanel.SelectedFilterList​

プロパティ型デフォルト説明
filtersFilterChip[]コンテキストから表示するフィルターチップの配列
onClickRemoveFilter(filter: FilterChip) => voidコンテキストからフィルターが削除されたときにトリガーされるコールバック関数
noFilterTextstringコンテキストからフィルターが選択されていないときに表示されるテキスト
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはHTML div 要素のすべてのプロパティを継承します。

FilterSearchPanel.FilterBadge​

プロパティ型デフォルト説明
filterFilterChip必須ラベル、キー、グループ名を含むフィルターチップオブジェクト
onClickRemoveFilter(filter: FilterChip) => void必須フィルターが削除されたときにトリガーされるコールバック関数
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはHTML div 要素のすべてのプロパティを継承します。

FilterSearchPanel.ActionGroup​

プロパティ型デフォルト説明
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはHTML div 要素のすべてのプロパティを継承します。

🔧 TypeScript サポート​

包括的な型定義による完全なTypeScriptサポート:

import FilterSearchPanel from '@nodeblocks/frontend-filter-search-panel-block';

// フィルターチップの構造
interface FilterChip {
  label: string;
  key: string;
  groupName: string;
}

// デフォルトの検索フォームデータ構造
interface SearchFormData {
  search: string;
}

// カスタムフィールドで拡張
interface CustomSearchFormData extends SearchFormData {
  category?: string;
  status?: string;
  customField?: string;
}

const MyFilterSearchPanel = () => {
  const [selectedFilters, setSelectedFilters] = useState<FilterChip[]>([
    { label: 'アクティブ', key: 'status-active', groupName: 'ステータス' },
    { label: 'プレミアム', key: 'type-premium', groupName: 'タイプ' }
  ]);

  const handleSearch = (formData: CustomSearchFormData) => {
    console.log('検索が実行されました:', formData);
    // 検索送信の処理
  };

  const handleRemoveFilter = (filter: FilterChip) => {
    setSelectedFilters(prev => prev.filter(f => f.key !== filter.key));
  };

  const handleFilterButtonClick = () => {
    console.log('フィルターモーダルを開いています');
    // フィルターボタンクリックの処理
  };

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log('検索値が変更されました:', event.target.value);
    // 検索入力変更の処理
  };

  return (
    <FilterSearchPanel<CustomSearchFormData>
      filters={selectedFilters}
      onSearch={handleSearch}
      onClickRemoveFilter={handleRemoveFilter}
      onClickFilterButton={handleFilterButtonClick}
      onSearchChange={handleSearchChange}
      searchPlaceholder="サービスを検索..."
      noFilterText="フィルターが適用されていません"
      filterLabel="フィルターオプション">
      <FilterSearchPanel.SearchInput />
      <FilterSearchPanel.ActionGroup />
    </FilterSearchPanel>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。