ingred-ui 25.7.0 → 25.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AdvancedFilter/AdvancedFilter.d.ts +26 -0
- package/dist/components/AdvancedFilter/AdvancedFilter.stories.d.ts +6 -0
- package/dist/components/AdvancedFilter/AdvancedFilterConfigPanel.d.ts +27 -0
- package/dist/components/AdvancedFilter/AdvancedFilterTrigger.d.ts +20 -0
- package/dist/components/AdvancedFilter/__tests__/AdvancedFilter.test.d.ts +1 -0
- package/dist/components/AdvancedFilter/__tests__/AdvancedFilterConfigPanel.test.d.ts +1 -0
- package/dist/components/AdvancedFilter/__tests__/configPanelHelpers.test.d.ts +1 -0
- package/dist/components/AdvancedFilter/__tests__/helpers.test.d.ts +1 -0
- package/dist/components/AdvancedFilter/__tests__/operators.test.d.ts +1 -0
- package/dist/components/AdvancedFilter/__tests__/values.test.d.ts +1 -0
- package/dist/components/AdvancedFilter/constants.d.ts +30 -0
- package/dist/components/AdvancedFilter/hooks/useAdvancedFilterState.d.ts +42 -0
- package/dist/components/AdvancedFilter/hooks/useConfigPanelKeyboard.d.ts +31 -0
- package/dist/components/AdvancedFilter/hooks/useConfigPanelPosition.d.ts +44 -0
- package/dist/components/AdvancedFilter/hooks/useConfigPanelState.d.ts +52 -0
- package/dist/components/AdvancedFilter/hooks/useConfigPanelValidation.d.ts +42 -0
- package/dist/components/AdvancedFilter/hooks/useFilterMenuPosition.d.ts +21 -0
- package/dist/components/AdvancedFilter/index.d.ts +35 -0
- package/dist/components/AdvancedFilter/internal/CheckboxValueInput.d.ts +32 -0
- package/dist/components/AdvancedFilter/internal/ConfigPanelValueInput.d.ts +65 -0
- package/dist/components/AdvancedFilter/internal/DateRangeInput.d.ts +31 -0
- package/dist/components/AdvancedFilter/internal/RadioValueInput.d.ts +32 -0
- package/dist/components/AdvancedFilter/internal/TextValueInput.d.ts +42 -0
- package/dist/components/AdvancedFilter/styled.d.ts +92 -0
- package/dist/components/AdvancedFilter/types.d.ts +129 -0
- package/dist/components/AdvancedFilter/utils/configPanelHelpers.d.ts +68 -0
- package/dist/components/AdvancedFilter/utils/helpers.d.ts +110 -0
- package/dist/components/AdvancedFilter/utils/operators.d.ts +87 -0
- package/dist/components/AdvancedFilter/utils/positionCalculator.d.ts +49 -0
- package/dist/components/AdvancedFilter/utils/validation.d.ts +88 -0
- package/dist/components/AdvancedFilter/utils/values.d.ts +54 -0
- package/dist/components/Calendar/CalendarRange/utils.d.ts +1 -1
- package/dist/components/Calendar/internal/YearMonths/styled.d.ts +3 -3
- package/dist/components/Calendar/styled.d.ts +4 -4
- package/dist/components/DateField/constants.d.ts +1 -1
- package/dist/components/FullSizeConfirmModal/FullSizeConfirmModal.stories.d.ts +12 -12
- package/dist/components/Input/styled.d.ts +4 -1
- package/dist/components/MultipleFilter/MultipleFilter.d.ts +22 -0
- package/dist/components/MultipleFilter/index.d.ts +11 -0
- package/dist/components/Select2/styled.d.ts +1 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/components/Tag/Tag.stories.d.ts +6 -47
- package/dist/components/Tag/styled.d.ts +1 -0
- package/dist/components/Tag/types.d.ts +4 -0
- package/dist/components/index.d.ts +5 -0
- package/dist/index.es.js +1591 -1450
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1605 -1464
- package/dist/index.js.map +1 -1
- package/dist/styles/depth.d.ts +1 -0
- package/dist/utils/dateParser.d.ts +32 -0
- package/dist/utils/filterTypes.d.ts +13 -0
- package/dist/utils/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AdvancedFilter - 高度なフィルタリング機能を提供するコンポーネント
|
|
3
|
+
*
|
|
4
|
+
* このコンポーネントは、複数の条件を組み合わせた高度なフィルタリング機能を提供します。
|
|
5
|
+
* ユーザーは複数のフィルターを追加・編集・削除でき、各フィルターは異なるオペレーターと値を設定できます。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <AdvancedFilter
|
|
10
|
+
* types={[
|
|
11
|
+
* { type: "status", label: "ステータス" },
|
|
12
|
+
* { type: "priority", label: "優先度" }
|
|
13
|
+
* ]}
|
|
14
|
+
* filterConfigs={{
|
|
15
|
+
* status: {
|
|
16
|
+
* operators: [{ value: "equals", label: "が次に一致する" }],
|
|
17
|
+
* inputType: "checkbox",
|
|
18
|
+
* options: [{ value: "active", label: "アクティブ" }]
|
|
19
|
+
* }
|
|
20
|
+
* }}
|
|
21
|
+
* />
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
import React from "react";
|
|
25
|
+
import { AdvancedFilterProps } from "./types";
|
|
26
|
+
export declare const AdvancedFilter: React.FC<AdvancedFilterProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AdvancedFilterConfigPanel - フィルター設定パネルコンポーネント
|
|
3
|
+
*
|
|
4
|
+
* このコンポーネントは、個別のフィルターの設定を行うためのパネルです。
|
|
5
|
+
* オペレーターの選択、値の入力(テキスト・日付・チェックボックス)を提供し、
|
|
6
|
+
* Floating UIを使用して適切な位置に表示されます。
|
|
7
|
+
*
|
|
8
|
+
* リファクタリングにより、以下のカスタムフックに責務を分離:
|
|
9
|
+
* - useConfigPanelState: 状態管理
|
|
10
|
+
* - useConfigPanelValidation: バリデーション
|
|
11
|
+
* - useConfigPanelPosition: ポジショニング
|
|
12
|
+
* - useConfigPanelKeyboard: キーボード操作
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <AdvancedFilterConfigPanel
|
|
17
|
+
* filterType="status"
|
|
18
|
+
* isOpen={true}
|
|
19
|
+
* onApply={handleApply}
|
|
20
|
+
* onCancel={handleCancel}
|
|
21
|
+
* filterConfig={statusConfig}
|
|
22
|
+
* />
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
import React from "react";
|
|
26
|
+
import { AdvancedFilterConfigPanelProps } from "./types";
|
|
27
|
+
export declare const AdvancedFilterConfigPanel: React.FC<AdvancedFilterConfigPanelProps>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AdvancedFilterTrigger - AdvancedFilterのトリガー部分を担当するコンポーネント
|
|
3
|
+
*
|
|
4
|
+
* このコンポーネントは、フィルターの追加ボタンと適用済みフィルターのタグ表示を担当します。
|
|
5
|
+
* タグのクリックで編集、×ボタンで削除、オールクリアボタンで全削除が可能です。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <AdvancedFilterTrigger
|
|
10
|
+
* placeholder="フィルターを追加"
|
|
11
|
+
* appliedFilters={filters}
|
|
12
|
+
* onEditFilter={handleEdit}
|
|
13
|
+
* onRemoveFilter={handleRemove}
|
|
14
|
+
* onClearAll={handleClearAll}
|
|
15
|
+
* />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
import React from "react";
|
|
19
|
+
import { AdvancedFilterTriggerProps } from "./types";
|
|
20
|
+
export declare const AdvancedFilterTrigger: React.ForwardRefExoticComponent<AdvancedFilterTriggerProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AdvancedFilterコンポーネントの定数定義
|
|
3
|
+
*
|
|
4
|
+
* マジックナンバーや固定値を一元管理し、
|
|
5
|
+
* 保守性と可読性を向上させる。
|
|
6
|
+
*/
|
|
7
|
+
export declare const ADVANCED_FILTER_CONSTANTS: {
|
|
8
|
+
readonly MENU_WIDTH: 160;
|
|
9
|
+
readonly CONFIG_PANEL_WIDTH: 264;
|
|
10
|
+
readonly DEFAULT_MENU_POSITION: 24;
|
|
11
|
+
readonly TAG_SPACING: 8;
|
|
12
|
+
readonly TAG_OFFSET_MULTIPLE: 40;
|
|
13
|
+
readonly ESTIMATED_TAG_WIDTH: 120;
|
|
14
|
+
readonly ICON_AREA_WIDTH: 24;
|
|
15
|
+
readonly CLEAR_BUTTON_WIDTH: 16;
|
|
16
|
+
readonly FALLBACK_POSITION_X: 80;
|
|
17
|
+
readonly FALLBACK_POSITION_Y: 148;
|
|
18
|
+
readonly CONFIG_PANEL_HEADER_HEIGHT: 60;
|
|
19
|
+
readonly CONFIG_PANEL_BUTTON_HEIGHT: 50;
|
|
20
|
+
readonly CONFIG_PANEL_PADDING: 16;
|
|
21
|
+
readonly CONFIG_PANEL_MIN_CONTENT_HEIGHT: 200;
|
|
22
|
+
readonly TRANSITION_DURATION: 200;
|
|
23
|
+
readonly MIN_VALUE_LENGTH: 1;
|
|
24
|
+
};
|
|
25
|
+
export declare const ADVANCED_FILTER_SELECTORS: {
|
|
26
|
+
readonly TAG_ELEMENT: "[data-tag]";
|
|
27
|
+
readonly MENU_ELEMENT: "[role=\"menu\"]";
|
|
28
|
+
readonly TRIGGER_ELEMENT: "[data-advanced-filter-trigger=\"true\"]";
|
|
29
|
+
readonly BUTTON_ELEMENT: "[role=\"button\"]";
|
|
30
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AdvancedFilterの状態管理カスタムフック
|
|
3
|
+
*
|
|
4
|
+
* フィルター関連の状態とその更新ロジックを一元管理し、
|
|
5
|
+
* メインコンポーネントの複雑性を軽減する。
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
import { AppliedFilter, FilterType, FilterConfig } from "../types";
|
|
9
|
+
export type UseAdvancedFilterStateProps = {
|
|
10
|
+
types: FilterType[];
|
|
11
|
+
onFiltersChange?: (filters: AppliedFilter[]) => void;
|
|
12
|
+
};
|
|
13
|
+
export type UseAdvancedFilterStateReturn = {
|
|
14
|
+
selectedType: string | null;
|
|
15
|
+
isConfigPanelOpen: boolean;
|
|
16
|
+
appliedFilters: AppliedFilter[];
|
|
17
|
+
editingFilter: AppliedFilter | null;
|
|
18
|
+
isMenuOpen: boolean;
|
|
19
|
+
menuPosition: number;
|
|
20
|
+
savedMenuCoordinates: {
|
|
21
|
+
x: number;
|
|
22
|
+
y: number;
|
|
23
|
+
} | null;
|
|
24
|
+
triggerRef: React.RefObject<HTMLDivElement>;
|
|
25
|
+
setSelectedType: (type: string | null) => void;
|
|
26
|
+
setIsConfigPanelOpen: (open: boolean) => void;
|
|
27
|
+
setAppliedFilters: React.Dispatch<React.SetStateAction<AppliedFilter[]>>;
|
|
28
|
+
setEditingFilter: (filter: AppliedFilter | null) => void;
|
|
29
|
+
setIsMenuOpen: (open: boolean) => void;
|
|
30
|
+
setMenuPosition: (position: number) => void;
|
|
31
|
+
setSavedMenuCoordinates: (coordinates: {
|
|
32
|
+
x: number;
|
|
33
|
+
y: number;
|
|
34
|
+
} | null) => void;
|
|
35
|
+
handleTypeSelect: (type: string) => void;
|
|
36
|
+
handleConfigApply: (config: FilterConfig) => void;
|
|
37
|
+
handleRemoveFilter: (filterId: string) => void;
|
|
38
|
+
handleClearAll: () => void;
|
|
39
|
+
handleConfigCancel: () => void;
|
|
40
|
+
handleEditFilter: (filter: AppliedFilter) => void;
|
|
41
|
+
};
|
|
42
|
+
export declare const useAdvancedFilterState: ({ types, onFiltersChange, }: UseAdvancedFilterStateProps) => UseAdvancedFilterStateReturn;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useConfigPanelKeyboard - ConfigPanelのキーボード操作専用カスタムフック
|
|
3
|
+
*
|
|
4
|
+
* このフックは、ConfigPanelでのキーボード操作ロジックを集約します。
|
|
5
|
+
* - ESCキーでキャンセル
|
|
6
|
+
* - Enterキーで適用(IME変換確定時のEnterキーは除外)
|
|
7
|
+
* - ConfigPanel内の要素のみでEnterキーを有効化
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* const { handleKeyDown } = useConfigPanelKeyboard({
|
|
12
|
+
* isOpen,
|
|
13
|
+
* canApply,
|
|
14
|
+
* handleApply,
|
|
15
|
+
* onCancel,
|
|
16
|
+
* floatingRef,
|
|
17
|
+
* });
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
/// <reference types="react" />
|
|
21
|
+
export type UseConfigPanelKeyboardProps = {
|
|
22
|
+
isOpen: boolean;
|
|
23
|
+
canApply: () => boolean;
|
|
24
|
+
handleApply: () => void;
|
|
25
|
+
onCancel: () => void;
|
|
26
|
+
floatingRef: React.MutableRefObject<HTMLElement | null>;
|
|
27
|
+
};
|
|
28
|
+
export type UseConfigPanelKeyboardReturn = {
|
|
29
|
+
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
30
|
+
};
|
|
31
|
+
export declare const useConfigPanelKeyboard: ({ isOpen, canApply, handleApply, onCancel, floatingRef, }: UseConfigPanelKeyboardProps) => UseConfigPanelKeyboardReturn;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useConfigPanelPosition - ConfigPanelのポジショニング専用カスタムフック
|
|
3
|
+
*
|
|
4
|
+
* このフックは、Floating UIを使用したポジショニングロジックを集約します。
|
|
5
|
+
* - 保存座標での仮想参照要素の作成
|
|
6
|
+
* - はみ出し防止(shift, size middleware)
|
|
7
|
+
* - Content領域の最大高さの動的計算
|
|
8
|
+
* - ContextMenu2と同じ方式の領域外クリック処理
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const {
|
|
13
|
+
* refs,
|
|
14
|
+
* floatingStyles,
|
|
15
|
+
* getFloatingProps,
|
|
16
|
+
* isPositioned,
|
|
17
|
+
* contentMaxHeight,
|
|
18
|
+
* } = useConfigPanelPosition({ isOpen, savedCoordinates, onCancel });
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
/// <reference types="react" />
|
|
22
|
+
import { FloatingContext } from "@floating-ui/react";
|
|
23
|
+
export type MenuCoordinates = {
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
};
|
|
27
|
+
export type UseConfigPanelPositionProps = {
|
|
28
|
+
isOpen: boolean;
|
|
29
|
+
savedCoordinates?: MenuCoordinates | null;
|
|
30
|
+
onCancel: () => void;
|
|
31
|
+
};
|
|
32
|
+
export type UseConfigPanelPositionReturn = {
|
|
33
|
+
refs: {
|
|
34
|
+
setReference: (node: any) => void;
|
|
35
|
+
setFloating: (node: HTMLElement | null) => void;
|
|
36
|
+
floating: React.MutableRefObject<HTMLElement | null>;
|
|
37
|
+
};
|
|
38
|
+
floatingStyles: React.CSSProperties;
|
|
39
|
+
getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
|
|
40
|
+
isPositioned: boolean;
|
|
41
|
+
contentMaxHeight: number;
|
|
42
|
+
context: FloatingContext;
|
|
43
|
+
};
|
|
44
|
+
export declare const useConfigPanelPosition: ({ isOpen, savedCoordinates, onCancel, }: UseConfigPanelPositionProps) => UseConfigPanelPositionReturn;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useConfigPanelState - ConfigPanelの状態管理を集約するカスタムフック
|
|
3
|
+
*
|
|
4
|
+
* このフックは、AdvancedFilterConfigPanelで使用される9個のstateを
|
|
5
|
+
* 1つのカスタムフックにまとめ、関連する状態更新関数も提供します。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const {
|
|
10
|
+
* operator, setOperator,
|
|
11
|
+
* value, setValue,
|
|
12
|
+
* selectedValues, setSelectedValues,
|
|
13
|
+
* selectedRadioValue, setSelectedRadioValue,
|
|
14
|
+
* validationError, setValidationError,
|
|
15
|
+
* startDate, setStartDate,
|
|
16
|
+
* endDate, setEndDate,
|
|
17
|
+
* handleValueChange,
|
|
18
|
+
* handleValueToggle,
|
|
19
|
+
* handleRadioChange,
|
|
20
|
+
* handleStartDateChange,
|
|
21
|
+
* handleEndDateChange,
|
|
22
|
+
* } = useConfigPanelState(filterConfig, editingFilter, isRangeOperator);
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
/// <reference types="react" />
|
|
26
|
+
import { FilterTypeConfig } from "../types";
|
|
27
|
+
export type EditingFilter = {
|
|
28
|
+
operator: string;
|
|
29
|
+
values: (string | boolean)[];
|
|
30
|
+
};
|
|
31
|
+
export type UseConfigPanelStateReturn = {
|
|
32
|
+
operator: string;
|
|
33
|
+
value: string;
|
|
34
|
+
selectedValues: (string | boolean)[];
|
|
35
|
+
selectedRadioValue: string | boolean;
|
|
36
|
+
validationError: string;
|
|
37
|
+
startDate: string;
|
|
38
|
+
endDate: string;
|
|
39
|
+
setOperator: (operator: string) => void;
|
|
40
|
+
setValue: (value: string) => void;
|
|
41
|
+
setSelectedValues: React.Dispatch<React.SetStateAction<(string | boolean)[]>>;
|
|
42
|
+
setSelectedRadioValue: (value: string | boolean) => void;
|
|
43
|
+
setValidationError: (error: string) => void;
|
|
44
|
+
setStartDate: (date: string) => void;
|
|
45
|
+
setEndDate: (date: string) => void;
|
|
46
|
+
handleValueChange: (newValue: string) => void;
|
|
47
|
+
handleValueToggle: (value: string | boolean, checked: boolean) => void;
|
|
48
|
+
handleRadioChange: (value: string | boolean) => void;
|
|
49
|
+
handleStartDateChange: (dateString: string) => void;
|
|
50
|
+
handleEndDateChange: (dateString: string) => void;
|
|
51
|
+
};
|
|
52
|
+
export declare const useConfigPanelState: (filterConfig?: FilterTypeConfig, editingFilter?: EditingFilter, isRangeOperator?: ((operator: string) => boolean) | undefined) => UseConfigPanelStateReturn;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useConfigPanelValidation - ConfigPanelのバリデーション専用カスタムフック
|
|
3
|
+
*
|
|
4
|
+
* このフックは、純粋関数(validation.ts)のラッパーとして機能します。
|
|
5
|
+
* validateInput(完全なバリデーション)とcanApply(必須入力チェックのみ)を提供します。
|
|
6
|
+
*
|
|
7
|
+
* バリデーションロジック自体は純粋関数として utils/validation.ts に実装されており、
|
|
8
|
+
* このカスタムフックはそれらをメモ化して提供します。
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const { validateInput, canApply } = useConfigPanelValidation({
|
|
13
|
+
* filterConfig,
|
|
14
|
+
* operator,
|
|
15
|
+
* selectedValues,
|
|
16
|
+
* selectedRadioValue,
|
|
17
|
+
* startDate,
|
|
18
|
+
* endDate,
|
|
19
|
+
* value,
|
|
20
|
+
* isRangeOperator,
|
|
21
|
+
* });
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
import { FilterTypeConfig } from "../types";
|
|
25
|
+
export type UseConfigPanelValidationProps = {
|
|
26
|
+
filterConfig?: FilterTypeConfig;
|
|
27
|
+
operator: string;
|
|
28
|
+
selectedValues: (string | boolean)[];
|
|
29
|
+
selectedRadioValue: string | boolean;
|
|
30
|
+
startDate: string;
|
|
31
|
+
endDate: string;
|
|
32
|
+
value: string;
|
|
33
|
+
isRangeOperator: (operator: string) => boolean;
|
|
34
|
+
};
|
|
35
|
+
export type UseConfigPanelValidationReturn = {
|
|
36
|
+
validateInput: () => {
|
|
37
|
+
isValid: boolean;
|
|
38
|
+
errorMessage: string;
|
|
39
|
+
};
|
|
40
|
+
canApply: () => boolean;
|
|
41
|
+
};
|
|
42
|
+
export declare const useConfigPanelValidation: ({ filterConfig, operator, selectedValues, selectedRadioValue, startDate, endDate, value, isRangeOperator, }: UseConfigPanelValidationProps) => UseConfigPanelValidationReturn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* フィルターメニュー位置計算カスタムフック
|
|
3
|
+
*
|
|
4
|
+
* メニューとConfigPanelの位置計算ロジックを管理し、
|
|
5
|
+
* 複雑な座標計算を抽象化する。
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
import { AppliedFilter } from "../types";
|
|
9
|
+
export type UseFilterMenuPositionProps = {
|
|
10
|
+
setMenuPosition: (position: number) => void;
|
|
11
|
+
setSavedMenuCoordinates: (coordinates: {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
} | null) => void;
|
|
15
|
+
triggerRef: React.RefObject<HTMLDivElement>;
|
|
16
|
+
appliedFilters: AppliedFilter[];
|
|
17
|
+
};
|
|
18
|
+
export type UseFilterMenuPositionReturn = {
|
|
19
|
+
handleMenuOpen: () => void;
|
|
20
|
+
};
|
|
21
|
+
export declare const useFilterMenuPosition: ({ setMenuPosition, }: UseFilterMenuPositionProps) => UseFilterMenuPositionReturn;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AdvancedFilterコンポーネントのエクスポート
|
|
3
|
+
*
|
|
4
|
+
* このファイルは、AdvancedFilterコンポーネントのパブリックAPIを提供します。
|
|
5
|
+
*
|
|
6
|
+
* エクスポート内容:
|
|
7
|
+
* - メインコンポーネント: AdvancedFilter, AdvancedFilterTrigger, AdvancedFilterConfigPanel
|
|
8
|
+
* - カスタムフック: useAdvancedFilterState, useFilterMenuPosition
|
|
9
|
+
* - オペレーターユーティリティ: プリセット定数、組み立て・カスタマイズ関数、フィルタリング関数
|
|
10
|
+
* - 値ユーティリティ: 値の作成・結合・変換・ソート関数
|
|
11
|
+
* - 型定義: コンポーネントProps、フィルター設定、ユーティリティ型
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* import { AdvancedFilter, FilterType, TEXT_OPERATORS } from './AdvancedFilter';
|
|
16
|
+
*
|
|
17
|
+
* <AdvancedFilter
|
|
18
|
+
* types={filterTypes}
|
|
19
|
+
* filterConfigs={filterConfigs}
|
|
20
|
+
* onFiltersChange={handleFiltersChange}
|
|
21
|
+
* />
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export { AdvancedFilter } from "./AdvancedFilter";
|
|
25
|
+
export { AdvancedFilterTrigger } from "./AdvancedFilterTrigger";
|
|
26
|
+
export { AdvancedFilterConfigPanel } from "./AdvancedFilterConfigPanel";
|
|
27
|
+
export { useAdvancedFilterState } from "./hooks/useAdvancedFilterState";
|
|
28
|
+
export { useFilterMenuPosition } from "./hooks/useFilterMenuPosition";
|
|
29
|
+
export { TEXT_OPERATORS, NUMBER_OPERATORS, DATE_OPERATORS, SELECTION_OPERATORS, PRESET_OPERATORS, getPresetOperators, createOperator, combineOperators, overrideOperatorLabels, changeOperatorLabel, getPresetOperatorsWithLabels, selectOperators, selectOperatorsByIndex, applyOperatorToValue, applyFilter, applyMultipleFilters, } from "./utils/operators";
|
|
30
|
+
export { createValue, combineValues, overrideValueLabels, changeValueLabel, selectValues, selectValuesByIndex, getValueStrings, getValueLabels, getLabelsForValues, mergeValues, sortValues, } from "./utils/values";
|
|
31
|
+
export type { ValueDefinition } from "./utils/values";
|
|
32
|
+
export { isRangeOperator, isCustomOperator, isValidFilterConfig, isValidFilterType, generateTagText, generateTagTitle, getTagBoldText, getAvailableTypes, getFilterTypeLabel, } from "./utils/helpers";
|
|
33
|
+
export { FilterPositionCalculator } from "./utils/positionCalculator";
|
|
34
|
+
export { ADVANCED_FILTER_CONSTANTS } from "./constants";
|
|
35
|
+
export type { AdvancedFilterProps, FilterType, FilterTypeConfig, FilterConfig, AppliedFilter, OperatorDefinition, AdvancedFilterSize, AdvancedFilterVariant, FilterOperator, FilterInputType, FilterPresetType, } from "./types";
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CheckboxValueInput - チェックボックス入力コンポーネント
|
|
3
|
+
*
|
|
4
|
+
* フィルター設定パネルでチェックボックス形式の値選択を提供します。
|
|
5
|
+
* 複数選択が可能で、各オプションの選択状態を管理します。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <CheckboxValueInput
|
|
10
|
+
* options={[
|
|
11
|
+
* { value: "active", label: "アクティブ" },
|
|
12
|
+
* { value: "inactive", label: "非アクティブ" },
|
|
13
|
+
* ]}
|
|
14
|
+
* selectedValues={["active"]}
|
|
15
|
+
* onValueToggle={(value, checked) => console.log(value, checked)}
|
|
16
|
+
* />
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
import React from "react";
|
|
20
|
+
import { ValueDefinition } from "../types";
|
|
21
|
+
export type CheckboxValueInputProps = {
|
|
22
|
+
/** 選択可能なオプションの配列 */
|
|
23
|
+
options: ValueDefinition[];
|
|
24
|
+
/** 現在選択されている値の配列 */
|
|
25
|
+
selectedValues: (string | boolean)[];
|
|
26
|
+
/** チェックボックスの状態が変更されたときのコールバック */
|
|
27
|
+
onValueToggle: (value: string | boolean, checked: boolean) => void;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* チェックボックス形式の値入力コンポーネント
|
|
31
|
+
*/
|
|
32
|
+
export declare const CheckboxValueInput: React.FC<CheckboxValueInputProps>;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ConfigPanelValueInput - 値入力統合コンポーネント
|
|
3
|
+
*
|
|
4
|
+
* フィルター設定パネルの値入力部分を統合管理します。
|
|
5
|
+
* inputTypeに応じて適切な入力コンポーネント(CheckboxValueInput, RadioValueInput,
|
|
6
|
+
* DateRangeInput, TextValueInput)をレンダリングします。
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <ConfigPanelValueInput
|
|
11
|
+
* filterConfig={filterConfig}
|
|
12
|
+
* operator="equals"
|
|
13
|
+
* value="検索値"
|
|
14
|
+
* selectedValues={[]}
|
|
15
|
+
* selectedRadioValue=""
|
|
16
|
+
* startDate=""
|
|
17
|
+
* endDate=""
|
|
18
|
+
* onValueChange={handleValueChange}
|
|
19
|
+
* onValueToggle={handleValueToggle}
|
|
20
|
+
* onRadioChange={handleRadioChange}
|
|
21
|
+
* onStartDateChange={handleStartDateChange}
|
|
22
|
+
* onEndDateChange={handleEndDateChange}
|
|
23
|
+
* onKeyDown={handleKeyDown}
|
|
24
|
+
* isRangeOperator={isRangeOperator}
|
|
25
|
+
* />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
import React from "react";
|
|
29
|
+
import { FilterTypeConfig } from "../types";
|
|
30
|
+
export type ConfigPanelValueInputProps = {
|
|
31
|
+
/** フィルタータイプの設定 */
|
|
32
|
+
filterConfig?: FilterTypeConfig;
|
|
33
|
+
/** 選択中のオペレーター */
|
|
34
|
+
operator: string;
|
|
35
|
+
/** テキスト入力値 */
|
|
36
|
+
value: string;
|
|
37
|
+
/** チェックボックスで選択された値の配列 */
|
|
38
|
+
selectedValues: (string | boolean)[];
|
|
39
|
+
/** ラジオボタンで選択された値 */
|
|
40
|
+
selectedRadioValue: string | boolean;
|
|
41
|
+
/** 日付範囲の開始日 */
|
|
42
|
+
startDate: string;
|
|
43
|
+
/** 日付範囲の終了日 */
|
|
44
|
+
endDate: string;
|
|
45
|
+
/** テキスト入力値が変更されたときのコールバック */
|
|
46
|
+
onValueChange: (value: string) => void;
|
|
47
|
+
/** チェックボックスの値がトグルされたときのコールバック */
|
|
48
|
+
onValueToggle: (value: string | boolean, checked: boolean) => void;
|
|
49
|
+
/** ラジオボタンの値が変更されたときのコールバック */
|
|
50
|
+
onRadioChange: (value: string | boolean) => void;
|
|
51
|
+
/** 開始日が変更されたときのコールバック */
|
|
52
|
+
onStartDateChange: (dateString: string) => void;
|
|
53
|
+
/** 終了日が変更されたときのコールバック */
|
|
54
|
+
onEndDateChange: (dateString: string) => void;
|
|
55
|
+
/** キーボードイベントのハンドラー */
|
|
56
|
+
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
57
|
+
/** 範囲指定オペレーターかどうかを判定する関数 */
|
|
58
|
+
isRangeOperator: (operator: string) => boolean;
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* 値入力統合コンポーネント
|
|
62
|
+
*
|
|
63
|
+
* フィルター設定に応じて適切な入力コンポーネントを選択してレンダリングします。
|
|
64
|
+
*/
|
|
65
|
+
export declare const ConfigPanelValueInput: React.FC<ConfigPanelValueInputProps>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DateRangeInput - 日付範囲入力コンポーネント
|
|
3
|
+
*
|
|
4
|
+
* フィルター設定パネルで日付範囲の選択を提供します。
|
|
5
|
+
* 開始日と終了日の2つのDatePickerを持ちます。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <DateRangeInput
|
|
10
|
+
* startDate="2024-01-01"
|
|
11
|
+
* endDate="2024-12-31"
|
|
12
|
+
* onStartDateChange={(dateString) => setStartDate(dateString)}
|
|
13
|
+
* onEndDateChange={(dateString) => setEndDate(dateString)}
|
|
14
|
+
* />
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
import React from "react";
|
|
18
|
+
export type DateRangeInputProps = {
|
|
19
|
+
/** 開始日の値 (ISO形式: YYYY-MM-DD) */
|
|
20
|
+
startDate: string;
|
|
21
|
+
/** 終了日の値 (ISO形式: YYYY-MM-DD) */
|
|
22
|
+
endDate: string;
|
|
23
|
+
/** 開始日が変更されたときのコールバック */
|
|
24
|
+
onStartDateChange: (dateString: string) => void;
|
|
25
|
+
/** 終了日が変更されたときのコールバック */
|
|
26
|
+
onEndDateChange: (dateString: string) => void;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* 日付範囲入力コンポーネント
|
|
30
|
+
*/
|
|
31
|
+
export declare const DateRangeInput: React.FC<DateRangeInputProps>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RadioValueInput - ラジオボタン入力コンポーネント
|
|
3
|
+
*
|
|
4
|
+
* フィルター設定パネルでラジオボタン形式の値選択を提供します。
|
|
5
|
+
* 単一選択のみ可能で、1つのオプションのみが選択状態になります。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <RadioValueInput
|
|
10
|
+
* options={[
|
|
11
|
+
* { value: true, label: "有効" },
|
|
12
|
+
* { value: false, label: "無効" },
|
|
13
|
+
* ]}
|
|
14
|
+
* selectedRadioValue={true}
|
|
15
|
+
* onRadioChange={(value) => console.log(value)}
|
|
16
|
+
* />
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
import React from "react";
|
|
20
|
+
import { ValueDefinition } from "../types";
|
|
21
|
+
export type RadioValueInputProps = {
|
|
22
|
+
/** 選択可能なオプションの配列 */
|
|
23
|
+
options: ValueDefinition[];
|
|
24
|
+
/** 現在選択されている値 */
|
|
25
|
+
selectedRadioValue: string | boolean;
|
|
26
|
+
/** ラジオボタンの選択が変更されたときのコールバック */
|
|
27
|
+
onRadioChange: (value: string | boolean) => void;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* ラジオボタン形式の値入力コンポーネント
|
|
31
|
+
*/
|
|
32
|
+
export declare const RadioValueInput: React.FC<RadioValueInputProps>;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TextValueInput - テキスト/日付入力コンポーネント
|
|
3
|
+
*
|
|
4
|
+
* フィルター設定パネルでテキストまたは単一日付の入力を提供します。
|
|
5
|
+
* inputTypeに応じて適切なInput要素とコンテナをレンダリングします。
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* // テキスト入力
|
|
10
|
+
* <TextValueInput
|
|
11
|
+
* inputType="text"
|
|
12
|
+
* value="検索ワード"
|
|
13
|
+
* placeholder="検索..."
|
|
14
|
+
* onValueChange={(value) => setValue(value)}
|
|
15
|
+
* onKeyDown={handleKeyDown}
|
|
16
|
+
* />
|
|
17
|
+
*
|
|
18
|
+
* // 日付入力
|
|
19
|
+
* <TextValueInput
|
|
20
|
+
* inputType="date"
|
|
21
|
+
* value="2024-01-01"
|
|
22
|
+
* onValueChange={(value) => setValue(value)}
|
|
23
|
+
* />
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
import React from "react";
|
|
27
|
+
export type TextValueInputProps = {
|
|
28
|
+
/** 入力タイプ (text または date) */
|
|
29
|
+
inputType: "text" | "date";
|
|
30
|
+
/** 入力値 */
|
|
31
|
+
value: string;
|
|
32
|
+
/** プレースホルダーテキスト */
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
/** 値が変更されたときのコールバック */
|
|
35
|
+
onValueChange: (value: string) => void;
|
|
36
|
+
/** キーボードイベントのハンドラー(テキスト入力時のみ使用) */
|
|
37
|
+
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* テキスト/日付入力コンポーネント
|
|
41
|
+
*/
|
|
42
|
+
export declare const TextValueInput: React.FC<TextValueInputProps>;
|