feat(Boxer): implement Boxer component with autocomplete and server-side support
This commit is contained in:
159
src/Boxer/Boxer.store.tsx
Normal file
159
src/Boxer/Boxer.store.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { createSyncStore } from '@warkypublic/zustandsyncstore';
|
||||
import { produce } from 'immer';
|
||||
|
||||
import type { BoxerProps, BoxerStoreState } from './Boxer.types';
|
||||
|
||||
const { Provider: BoxerProvider, useStore: useBoxerStore } = createSyncStore<
|
||||
BoxerStoreState,
|
||||
BoxerProps
|
||||
>(
|
||||
(set, get) => ({
|
||||
boxerData: [],
|
||||
// Data Actions
|
||||
fetchData: async (search?: string, reset?: boolean) => {
|
||||
const state = get();
|
||||
|
||||
// Handle local data
|
||||
if (state.dataSource === 'local' || !state.onAPICall) {
|
||||
const localData = state.data ?? [];
|
||||
|
||||
if (!search) {
|
||||
set({ boxerData: localData, hasMore: false, total: localData.length });
|
||||
return;
|
||||
}
|
||||
|
||||
// Filter local data based on search
|
||||
const filtered = localData.filter((item) =>
|
||||
item.label.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
set({ boxerData: filtered, hasMore: false, total: filtered.length });
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle server-side data
|
||||
if (state.onAPICall) {
|
||||
try {
|
||||
set({ isFetching: true });
|
||||
|
||||
const currentPage = reset ? 0 : state.page;
|
||||
|
||||
const result = await state.onAPICall({
|
||||
page: currentPage,
|
||||
pageSize: state.pageSize,
|
||||
search,
|
||||
});
|
||||
|
||||
set(
|
||||
produce((draft: BoxerStoreState) => {
|
||||
if (reset) {
|
||||
draft.boxerData = result.data;
|
||||
draft.page = 0;
|
||||
} else {
|
||||
draft.boxerData = [...(draft.boxerData ?? []), ...result.data];
|
||||
}
|
||||
draft.total = result.total;
|
||||
draft.hasMore = draft.boxerData.length < result.total;
|
||||
draft.isFetching = false;
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Boxer fetchData error:', error);
|
||||
set({ isFetching: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
fetchMoreOnBottomReached: (target: HTMLDivElement) => {
|
||||
const state = get();
|
||||
|
||||
if (!state.hasMore || state.isFetching) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollPercentage =
|
||||
(target.scrollTop + target.clientHeight) / target.scrollHeight;
|
||||
|
||||
// Load more when scrolled past 80%
|
||||
if (scrollPercentage > 0.8) {
|
||||
state.loadMore();
|
||||
}
|
||||
},
|
||||
// State Management
|
||||
getState: (key) => {
|
||||
const current = get();
|
||||
return current?.[key];
|
||||
},
|
||||
hasMore: true,
|
||||
input: '',
|
||||
isFetching: false,
|
||||
loadMore: async () => {
|
||||
const state = get();
|
||||
|
||||
if (!state.hasMore || state.isFetching) {
|
||||
return;
|
||||
}
|
||||
|
||||
set(
|
||||
produce((draft: BoxerStoreState) => {
|
||||
draft.page = draft.page + 1;
|
||||
})
|
||||
);
|
||||
|
||||
await state.fetchData(state.search);
|
||||
},
|
||||
// Initial State
|
||||
opened: false,
|
||||
page: 0,
|
||||
|
||||
pageSize: 50,
|
||||
|
||||
search: '',
|
||||
|
||||
selectedOptionIndex: -1,
|
||||
|
||||
setInput: (input: string) => {
|
||||
set({ input });
|
||||
},
|
||||
|
||||
// Actions
|
||||
setOpened: (opened: boolean) => {
|
||||
set({ opened });
|
||||
},
|
||||
|
||||
setSearch: (search: string) => {
|
||||
set({ search });
|
||||
},
|
||||
|
||||
setSelectedOptionIndex: (index: number) => {
|
||||
set({ selectedOptionIndex: index });
|
||||
},
|
||||
|
||||
setState: (key, value) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state[key] = value;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
total: 0,
|
||||
}),
|
||||
({
|
||||
data = [],
|
||||
dataSource = 'local',
|
||||
pageSize = 50,
|
||||
...props
|
||||
}) => {
|
||||
return {
|
||||
...props,
|
||||
boxerData: data, // Initialize with local data if provided
|
||||
data,
|
||||
dataSource,
|
||||
hasMore: dataSource === 'server',
|
||||
pageSize,
|
||||
total: data.length,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export { BoxerProvider };
|
||||
export { useBoxerStore };
|
||||
345
src/Boxer/Boxer.tsx
Normal file
345
src/Boxer/Boxer.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
import { Combobox, ScrollArea, useVirtualizedCombobox } from '@mantine/core';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
import type { BoxerItem, BoxerProps, BoxerRef } from './Boxer.types';
|
||||
|
||||
import { BoxerProvider, useBoxerStore } from './Boxer.store';
|
||||
import BoxerTarget from './BoxerTarget';
|
||||
import useBoxerOptions from './hooks/useBoxerOptions';
|
||||
|
||||
const BoxerInner = () => {
|
||||
// Component Refs
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const valueRef = useRef<any>(null);
|
||||
const bufferRef = useRef<any>(null);
|
||||
|
||||
// Component store State
|
||||
const {
|
||||
boxerData,
|
||||
clearable,
|
||||
comboBoxProps,
|
||||
dropDownProps,
|
||||
error,
|
||||
fetchData,
|
||||
fetchMoreOnBottomReached,
|
||||
input,
|
||||
isFetching,
|
||||
label,
|
||||
mah,
|
||||
multiSelect,
|
||||
onBufferChange,
|
||||
onChange,
|
||||
opened,
|
||||
openOnClear,
|
||||
placeholder,
|
||||
scrollAreaProps,
|
||||
search,
|
||||
selectedOptionIndex,
|
||||
selectFirst,
|
||||
setInput,
|
||||
setOpened,
|
||||
setSearch,
|
||||
setSelectedOptionIndex,
|
||||
showAll,
|
||||
value,
|
||||
} = useBoxerStore((state) => ({
|
||||
boxerData: state.boxerData,
|
||||
clearable: state.clearable,
|
||||
comboBoxProps: state.comboBoxProps,
|
||||
dropDownProps: state.dropDownProps,
|
||||
error: state.error,
|
||||
fetchData: state.fetchData,
|
||||
fetchMoreOnBottomReached: state.fetchMoreOnBottomReached,
|
||||
input: state.input,
|
||||
isFetching: state.isFetching,
|
||||
label: state.label,
|
||||
mah: state.mah,
|
||||
multiSelect: state.multiSelect,
|
||||
onBufferChange: state.onBufferChange,
|
||||
onChange: state.onChange,
|
||||
opened: state.opened,
|
||||
openOnClear: state.openOnClear,
|
||||
placeholder: state.placeholder,
|
||||
scrollAreaProps: state.scrollAreaProps,
|
||||
search: state.search,
|
||||
selectedOptionIndex: state.selectedOptionIndex,
|
||||
selectFirst: state.selectFirst,
|
||||
setInput: state.setInput,
|
||||
setOpened: state.setOpened,
|
||||
setSearch: state.setSearch,
|
||||
setSelectedOptionIndex: state.setSelectedOptionIndex,
|
||||
showAll: state.showAll,
|
||||
value: state.value,
|
||||
}));
|
||||
|
||||
// Virtualization setup
|
||||
const count = boxerData.length;
|
||||
const virtualizer = useVirtualizer({
|
||||
count,
|
||||
estimateSize: () => 36,
|
||||
getScrollElement: () => parentRef.current,
|
||||
});
|
||||
const virtualItems = virtualizer.getVirtualItems();
|
||||
|
||||
// Component Callback Functions
|
||||
const onClear = () => {
|
||||
if (showAll && selectFirst) {
|
||||
onOptionSubmit(0);
|
||||
} else {
|
||||
if (multiSelect) {
|
||||
onChange?.([] as any);
|
||||
} else {
|
||||
onChange?.(null as any);
|
||||
}
|
||||
setSearch('');
|
||||
setInput('');
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
|
||||
if (openOnClear) {
|
||||
setOpened(true);
|
||||
}
|
||||
};
|
||||
|
||||
function onOptionSubmit(index: number) {
|
||||
const option = boxerData[index];
|
||||
|
||||
if (!option) return;
|
||||
|
||||
if (multiSelect) {
|
||||
// Handle multi-select
|
||||
const currentValues = Array.isArray(value) ? value : [];
|
||||
const isSelected = currentValues.includes(option.value);
|
||||
|
||||
const newValues = isSelected
|
||||
? currentValues.filter((v: any) => v !== option.value)
|
||||
: [...currentValues, option.value];
|
||||
|
||||
onChange?.(newValues);
|
||||
|
||||
// Update buffer for multi-select
|
||||
const newBuffer = boxerData.filter((item) => newValues.includes(item.value));
|
||||
onBufferChange?.(newBuffer);
|
||||
} else {
|
||||
// Handle single select
|
||||
onChange?.(option.value);
|
||||
setSearch('');
|
||||
setInput(option.label);
|
||||
valueRef.current = option.value;
|
||||
combobox.closeDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
// Component Hooks
|
||||
const combobox = useVirtualizedCombobox({
|
||||
getOptionId: (index) => boxerData[index]?.value ?? String(index),
|
||||
onDropdownClose: () => {
|
||||
setOpened(false);
|
||||
},
|
||||
onDropdownOpen: () => {
|
||||
if (!value || (multiSelect && (!Array.isArray(value) || value.length === 0))) {
|
||||
setSearch('');
|
||||
setInput('');
|
||||
}
|
||||
combobox.selectFirstOption();
|
||||
},
|
||||
onSelectedOptionSubmit: onOptionSubmit,
|
||||
opened,
|
||||
selectedOptionIndex,
|
||||
setSelectedOptionIndex: (index) => {
|
||||
setSelectedOptionIndex(index);
|
||||
if (index !== -1) {
|
||||
virtualizer.scrollToIndex(index);
|
||||
}
|
||||
},
|
||||
totalOptionsCount: boxerData.length,
|
||||
});
|
||||
|
||||
// Component variables
|
||||
const { options } = useBoxerOptions({
|
||||
boxerData,
|
||||
multiSelect,
|
||||
onOptionSubmit,
|
||||
value,
|
||||
});
|
||||
|
||||
// Component useEffects
|
||||
useEffect(() => {
|
||||
// Fetch initial data
|
||||
fetchData('', true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Handle search changes
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
if (search !== undefined) {
|
||||
fetchData(search, true);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [search]);
|
||||
|
||||
useEffect(() => {
|
||||
// Sync input with value
|
||||
if (multiSelect) {
|
||||
const labels = boxerData
|
||||
.filter((item) => Array.isArray(value) && value.includes(item.value))
|
||||
.map((item) => item.label)
|
||||
.join(', ');
|
||||
|
||||
if (input !== labels && search === '') {
|
||||
setInput(labels);
|
||||
}
|
||||
} else {
|
||||
const label = boxerData.find((item) => item.value === value)?.label;
|
||||
|
||||
if (
|
||||
(input !== label && (search ?? '') === '' && valueRef.current !== value) ||
|
||||
(!value && (search ?? '') === '')
|
||||
) {
|
||||
setSearch('');
|
||||
setInput(label ?? '');
|
||||
}
|
||||
}
|
||||
|
||||
// Handle buffer change
|
||||
if (multiSelect) {
|
||||
const buffer =
|
||||
boxerData.filter((item: BoxerItem) => Array.isArray(value) && value.includes(item.value)) ??
|
||||
[];
|
||||
|
||||
if (JSON.stringify(bufferRef.current) !== JSON.stringify(buffer)) {
|
||||
onBufferChange?.(buffer);
|
||||
bufferRef.current = buffer;
|
||||
}
|
||||
} else {
|
||||
const buffer = boxerData?.find((item: BoxerItem) => item.value === value) ?? null;
|
||||
|
||||
if (bufferRef.current?.value !== buffer?.value) {
|
||||
onBufferChange?.(buffer);
|
||||
bufferRef.current = buffer;
|
||||
}
|
||||
}
|
||||
}, [value, boxerData, input, search, multiSelect]);
|
||||
|
||||
useEffect(() => {
|
||||
// Select first option automatically
|
||||
if (selectFirst && (boxerData?.length ?? 0) > 0 && !multiSelect) {
|
||||
if (!value) {
|
||||
onOptionSubmit?.(0);
|
||||
}
|
||||
}
|
||||
}, [selectFirst, boxerData, multiSelect]);
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
{...comboBoxProps}
|
||||
resetSelectionOnOptionHover={false}
|
||||
store={combobox}
|
||||
withinPortal={true}
|
||||
>
|
||||
<Combobox.Target>
|
||||
<Combobox.EventsTarget>
|
||||
<BoxerTarget
|
||||
clearable={clearable}
|
||||
combobox={combobox}
|
||||
error={error}
|
||||
isFetching={isFetching}
|
||||
label={label}
|
||||
onBlur={() => {
|
||||
if (!value && !multiSelect) {
|
||||
setSearch('');
|
||||
setInput('');
|
||||
combobox.closeDropdown();
|
||||
setOpened(false);
|
||||
}
|
||||
}}
|
||||
onClear={onClear}
|
||||
onSearch={(event) => {
|
||||
setSearch(event.currentTarget.value);
|
||||
setInput(event.currentTarget.value);
|
||||
setOpened(true);
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
ref={inputRef}
|
||||
search={input}
|
||||
/>
|
||||
</Combobox.EventsTarget>
|
||||
</Combobox.Target>
|
||||
|
||||
<Combobox.Dropdown
|
||||
onKeyDown={() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.value = '';
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}}
|
||||
p={2}
|
||||
{...dropDownProps}
|
||||
>
|
||||
{opened && options.length > 0 ? (
|
||||
<Combobox.Options>
|
||||
<ScrollArea.Autosize
|
||||
{...scrollAreaProps}
|
||||
mah={mah ?? 200}
|
||||
viewportProps={{
|
||||
...scrollAreaProps?.viewportProps,
|
||||
onScroll: (event) => {
|
||||
fetchMoreOnBottomReached(event.currentTarget as HTMLDivElement);
|
||||
},
|
||||
style: { border: '1px solid gray', borderRadius: 4 },
|
||||
}}
|
||||
viewportRef={parentRef}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{virtualItems.map((virtualRow) => (
|
||||
<div
|
||||
data-index={virtualRow.index}
|
||||
key={virtualRow.key}
|
||||
ref={virtualizer.measureElement}
|
||||
>
|
||||
{options[virtualRow.index]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea.Autosize>
|
||||
</Combobox.Options>
|
||||
) : (
|
||||
<Combobox.Empty>Nothing found</Combobox.Empty>
|
||||
)}
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
);
|
||||
};
|
||||
|
||||
const Boxer = React.forwardRef<BoxerRef, BoxerProps>((props, ref) => {
|
||||
return (
|
||||
<BoxerProvider {...props}>
|
||||
<BoxerInner />
|
||||
</BoxerProvider>
|
||||
);
|
||||
});
|
||||
|
||||
Boxer.displayName = 'Boxer';
|
||||
|
||||
export { Boxer };
|
||||
export default Boxer;
|
||||
107
src/Boxer/Boxer.types.ts
Normal file
107
src/Boxer/Boxer.types.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import type { ComboboxProps, ScrollAreaAutosizeProps, TextInputProps } from '@mantine/core';
|
||||
import type { UseVirtualizerOptions } from '@tanstack/react-virtual';
|
||||
|
||||
export type BoxerDataSource =
|
||||
| 'local' // Local array data
|
||||
| 'server'; // Server-side with infinite loading
|
||||
|
||||
export type BoxerItem = {
|
||||
[key: string]: any;
|
||||
label: string;
|
||||
value: any;
|
||||
};
|
||||
|
||||
export interface BoxerProps {
|
||||
clearable?: boolean;
|
||||
// Component Props
|
||||
comboBoxProps?: Partial<ComboboxProps>;
|
||||
|
||||
// Data Configuration
|
||||
data?: Array<BoxerItem>;
|
||||
|
||||
dataSource?: BoxerDataSource;
|
||||
disabled?: boolean;
|
||||
dropDownProps?: React.ComponentPropsWithoutRef<'div'>;
|
||||
|
||||
error?: string;
|
||||
// Advanced
|
||||
id?: string;
|
||||
inputProps?: Partial<TextInputProps>;
|
||||
label?: string;
|
||||
leftSection?: React.ReactNode;
|
||||
mah?: number; // Max height for dropdown
|
||||
|
||||
// Component Configuration
|
||||
multiSelect?: boolean;
|
||||
name?: string;
|
||||
// API Configuration (for server-side)
|
||||
onAPICall?: (params: {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
search?: string;
|
||||
}) => Promise<{ data: Array<BoxerItem>; total: number }>;
|
||||
onBufferChange?: (buffer: Array<BoxerItem> | BoxerItem | null) => void;
|
||||
onChange?: (value: any | Array<any>) => void;
|
||||
|
||||
openOnClear?: boolean;
|
||||
|
||||
// UI Configuration
|
||||
placeholder?: string;
|
||||
// Styling
|
||||
rightSection?: React.ReactNode;
|
||||
scrollAreaProps?: Partial<ScrollAreaAutosizeProps>;
|
||||
searchable?: boolean;
|
||||
|
||||
selectFirst?: boolean;
|
||||
showAll?: boolean;
|
||||
|
||||
// Value Management
|
||||
value?: any | Array<any>;
|
||||
// Virtualization
|
||||
virtualizer?: Partial<UseVirtualizerOptions<HTMLDivElement, Element>>;
|
||||
}
|
||||
|
||||
export interface BoxerRef {
|
||||
clear: () => void;
|
||||
close: () => void;
|
||||
focus: () => void;
|
||||
getValue: () => any | Array<any>;
|
||||
open: () => void;
|
||||
setValue: (value: any | Array<any>) => void;
|
||||
}
|
||||
|
||||
export interface BoxerState {
|
||||
// Data State
|
||||
boxerData: Array<BoxerItem>;
|
||||
fetchData: (search?: string, reset?: boolean) => Promise<void>;
|
||||
fetchMoreOnBottomReached: (target: HTMLDivElement) => void;
|
||||
// State Management
|
||||
getState: <K extends keyof BoxerStoreState>(key: K) => BoxerStoreState[K];
|
||||
hasMore: boolean;
|
||||
|
||||
input: string;
|
||||
isFetching: boolean;
|
||||
// Data Actions
|
||||
loadMore: () => Promise<void>;
|
||||
// Internal State
|
||||
opened: boolean;
|
||||
page: number;
|
||||
|
||||
pageSize: number;
|
||||
search: string;
|
||||
selectedOptionIndex: number;
|
||||
setInput: (input: string) => void;
|
||||
|
||||
// Actions
|
||||
setOpened: (opened: boolean) => void;
|
||||
setSearch: (search: string) => void;
|
||||
setSelectedOptionIndex: (index: number) => void;
|
||||
|
||||
setState: <K extends keyof BoxerStoreState>(
|
||||
key: K,
|
||||
value: Partial<BoxerStoreState[K]>
|
||||
) => void;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export type BoxerStoreState = BoxerProps & BoxerState;
|
||||
73
src/Boxer/BoxerTarget.tsx
Normal file
73
src/Boxer/BoxerTarget.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import type { ComboboxStore } from '@mantine/core';
|
||||
|
||||
import { ActionIcon, Loader, TextInput } from '@mantine/core';
|
||||
import { IconX } from '@tabler/icons-react';
|
||||
import React, { forwardRef } from 'react';
|
||||
|
||||
interface BoxerTargetProps {
|
||||
clearable?: boolean;
|
||||
combobox: ComboboxStore;
|
||||
disabled?: boolean;
|
||||
error?: string;
|
||||
isFetching?: boolean;
|
||||
label?: string;
|
||||
leftSection?: React.ReactNode;
|
||||
onBlur: () => void;
|
||||
onClear: () => void;
|
||||
onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
placeholder?: string;
|
||||
search: string;
|
||||
}
|
||||
|
||||
const BoxerTarget = forwardRef<HTMLInputElement, BoxerTargetProps>((props, ref) => {
|
||||
const {
|
||||
clearable = true,
|
||||
combobox,
|
||||
disabled,
|
||||
error,
|
||||
isFetching,
|
||||
label,
|
||||
leftSection,
|
||||
onBlur,
|
||||
onClear,
|
||||
onSearch,
|
||||
placeholder,
|
||||
search,
|
||||
} = props;
|
||||
|
||||
const rightSection = isFetching ? (
|
||||
<Loader size="xs" />
|
||||
) : search && clearable ? (
|
||||
<ActionIcon
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClear();
|
||||
}}
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
>
|
||||
<IconX size={16} />
|
||||
</ActionIcon>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
label={label}
|
||||
leftSection={leftSection}
|
||||
onBlur={onBlur}
|
||||
onChange={onSearch}
|
||||
onClick={() => combobox.openDropdown()}
|
||||
onFocus={() => combobox.openDropdown()}
|
||||
placeholder={placeholder}
|
||||
ref={ref}
|
||||
rightSection={rightSection}
|
||||
value={search}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
BoxerTarget.displayName = 'BoxerTarget';
|
||||
|
||||
export default BoxerTarget;
|
||||
44
src/Boxer/hooks/useBoxerOptions.tsx
Normal file
44
src/Boxer/hooks/useBoxerOptions.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { Combobox, Checkbox } from '@mantine/core';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import type { BoxerItem } from '../Boxer.types';
|
||||
|
||||
interface UseBoxerOptionsProps {
|
||||
boxerData: Array<BoxerItem>;
|
||||
value?: any | Array<any>;
|
||||
multiSelect?: boolean;
|
||||
onOptionSubmit: (index: number) => void;
|
||||
}
|
||||
|
||||
const useBoxerOptions = (props: UseBoxerOptionsProps) => {
|
||||
const { boxerData, value, multiSelect, onOptionSubmit } = props;
|
||||
|
||||
const options = useMemo(() => {
|
||||
return boxerData.map((item, index) => {
|
||||
const isSelected = multiSelect
|
||||
? Array.isArray(value) && value.includes(item.value)
|
||||
: value === item.value;
|
||||
|
||||
return (
|
||||
<Combobox.Option
|
||||
key={`${item.value}-${index}`}
|
||||
value={String(index)}
|
||||
active={isSelected}
|
||||
>
|
||||
{multiSelect ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<Checkbox checked={isSelected} onChange={() => {}} tabIndex={-1} />
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
) : (
|
||||
item.label
|
||||
)}
|
||||
</Combobox.Option>
|
||||
);
|
||||
});
|
||||
}, [boxerData, value, multiSelect]);
|
||||
|
||||
return { options };
|
||||
};
|
||||
|
||||
export default useBoxerOptions;
|
||||
@@ -0,0 +1,10 @@
|
||||
export { Boxer, default } from './Boxer';
|
||||
export { BoxerProvider, useBoxerStore } from './Boxer.store';
|
||||
export type {
|
||||
BoxerDataSource,
|
||||
BoxerItem,
|
||||
BoxerProps,
|
||||
BoxerRef,
|
||||
BoxerState,
|
||||
BoxerStoreState,
|
||||
} from './Boxer.types';
|
||||
|
||||
217
src/Boxer/stories/Boxer.stories.tsx
Normal file
217
src/Boxer/stories/Boxer.stories.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import type { BoxerItem, BoxerProps } from '../Boxer.types';
|
||||
|
||||
import { Boxer } from '../Boxer';
|
||||
|
||||
const meta: Meta<typeof Boxer> = {
|
||||
component: Boxer,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
title: 'Components/Boxer',
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Boxer>;
|
||||
|
||||
// Sample data
|
||||
const sampleData: Array<BoxerItem> = [
|
||||
{ label: 'Apple', value: 'apple' },
|
||||
{ label: 'Banana', value: 'banana' },
|
||||
{ label: 'Cherry', value: 'cherry' },
|
||||
{ label: 'Date', value: 'date' },
|
||||
{ label: 'Elderberry', value: 'elderberry' },
|
||||
{ label: 'Fig', value: 'fig' },
|
||||
{ label: 'Grape', value: 'grape' },
|
||||
{ label: 'Honeydew', value: 'honeydew' },
|
||||
{ label: 'Kiwi', value: 'kiwi' },
|
||||
{ label: 'Lemon', value: 'lemon' },
|
||||
{ label: 'Mango', value: 'mango' },
|
||||
{ label: 'Nectarine', value: 'nectarine' },
|
||||
{ label: 'Orange', value: 'orange' },
|
||||
{ label: 'Papaya', value: 'papaya' },
|
||||
{ label: 'Quince', value: 'quince' },
|
||||
{ label: 'Raspberry', value: 'raspberry' },
|
||||
{ label: 'Strawberry', value: 'strawberry' },
|
||||
{ label: 'Tangerine', value: 'tangerine' },
|
||||
{ label: 'Ugli Fruit', value: 'ugli' },
|
||||
{ label: 'Watermelon', value: 'watermelon' },
|
||||
];
|
||||
|
||||
// Local Data Example
|
||||
export const LocalData: Story = {
|
||||
render: () => {
|
||||
const [value, setValue] = useState<null | string>(null);
|
||||
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Boxer
|
||||
clearable
|
||||
data={sampleData}
|
||||
dataSource="local"
|
||||
label="Favorite Fruit"
|
||||
onChange={setValue}
|
||||
placeholder="Select a fruit"
|
||||
searchable
|
||||
value={value}
|
||||
/>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<strong>Selected Value:</strong> {value ?? 'None'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Multi-Select Example
|
||||
export const MultiSelect: Story = {
|
||||
render: () => {
|
||||
const [value, setValue] = useState<Array<string>>([]);
|
||||
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Boxer
|
||||
clearable
|
||||
data={sampleData}
|
||||
dataSource="local"
|
||||
label="Favorite Fruits"
|
||||
multiSelect
|
||||
onChange={setValue}
|
||||
placeholder="Select fruits"
|
||||
searchable
|
||||
value={value}
|
||||
/>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<strong>Selected Values:</strong>{' '}
|
||||
{value.length > 0 ? value.join(', ') : 'None'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Server-Side Example (Simulated)
|
||||
export const ServerSide: Story = {
|
||||
render: () => {
|
||||
const [value, setValue] = useState<null | string>(null);
|
||||
|
||||
// Simulate server-side API call
|
||||
const handleAPICall = async (params: {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
search?: string;
|
||||
}): Promise<{ data: Array<BoxerItem>; total: number }> => {
|
||||
// Simulate network delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
|
||||
// Filter based on search
|
||||
let filteredData = [...sampleData];
|
||||
if (params.search) {
|
||||
filteredData = filteredData.filter((item) =>
|
||||
item.label.toLowerCase().includes(params.search!.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Paginate
|
||||
const start = params.page * params.pageSize;
|
||||
const end = start + params.pageSize;
|
||||
const paginatedData = filteredData.slice(start, end);
|
||||
|
||||
return {
|
||||
data: paginatedData,
|
||||
total: filteredData.length,
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Boxer
|
||||
clearable
|
||||
dataSource="server"
|
||||
label="Favorite Fruit (Server-side)"
|
||||
onAPICall={handleAPICall}
|
||||
onChange={setValue}
|
||||
pageSize={10}
|
||||
placeholder="Select a fruit (Server-side)"
|
||||
searchable
|
||||
value={value}
|
||||
/>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<strong>Selected Value:</strong> {value ?? 'None'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Select First Example
|
||||
export const SelectFirst: Story = {
|
||||
render: () => {
|
||||
const [value, setValue] = useState<null | string>(null);
|
||||
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Boxer
|
||||
clearable
|
||||
data={sampleData}
|
||||
dataSource="local"
|
||||
label="Auto-select First"
|
||||
onChange={setValue}
|
||||
placeholder="Select a fruit"
|
||||
searchable
|
||||
selectFirst
|
||||
value={value}
|
||||
/>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<strong>Selected Value:</strong> {value ?? 'None'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// With Error
|
||||
export const WithError: Story = {
|
||||
render: () => {
|
||||
const [value, setValue] = useState<null | string>(null);
|
||||
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Boxer
|
||||
clearable
|
||||
data={sampleData}
|
||||
dataSource="local"
|
||||
error="Please select a fruit"
|
||||
label="With Error"
|
||||
onChange={setValue}
|
||||
placeholder="Select a fruit"
|
||||
searchable
|
||||
value={value}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// Disabled
|
||||
export const Disabled: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Boxer
|
||||
data={sampleData}
|
||||
dataSource="local"
|
||||
disabled
|
||||
label="Disabled"
|
||||
onChange={() => {}}
|
||||
placeholder="Select a fruit"
|
||||
value="apple"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -1,3 +1,10 @@
|
||||
The plan and requirements:
|
||||
Auto complete lookup with server side lookup support and infinite loading.
|
||||
It must also have local array lookup and autocomplete.
|
||||
When a users starts typing, it must start autocomplete list.
|
||||
Exiting selected item must always be the first on the list and populated from the input in case the options does not exist anymore, it must not beak existing data.
|
||||
|
||||
|
||||
- [ ] Auto Complete
|
||||
- [ ] Multi Select
|
||||
- [ ] Virtualize
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from './Boxer';
|
||||
export * from './Former';
|
||||
export * from './FormerControllers';
|
||||
export * from './Gridler';
|
||||
|
||||
Reference in New Issue
Block a user