59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
|
import { JSX, Show } from 'solid-js'
|
|||
|
|
import styles from '../styles/Table.module.css'
|
|||
|
|
|
|||
|
|
export interface TableControlsProps {
|
|||
|
|
onRefresh?: () => void
|
|||
|
|
isLoading?: boolean
|
|||
|
|
children?: JSX.Element
|
|||
|
|
actions?: JSX.Element
|
|||
|
|
searchValue?: string
|
|||
|
|
onSearchChange?: (value: string) => void
|
|||
|
|
onSearch?: () => void
|
|||
|
|
searchPlaceholder?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Компонент для унифицированного управления таблицами
|
|||
|
|
* Содержит элементы управления сортировкой, фильтрацией и действиями
|
|||
|
|
*/
|
|||
|
|
const TableControls = (props: TableControlsProps) => {
|
|||
|
|
return (
|
|||
|
|
<div class={styles.tableControls}>
|
|||
|
|
<div class={styles.controlsContainer}>
|
|||
|
|
{/* Поиск и действия в одной строке */}
|
|||
|
|
<Show when={props.onSearchChange}>
|
|||
|
|
<div class={styles.searchContainer}>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder={props.searchPlaceholder}
|
|||
|
|
value={props.searchValue || ''}
|
|||
|
|
onInput={(e) => props.onSearchChange?.(e.currentTarget.value)}
|
|||
|
|
onKeyDown={(e) => {
|
|||
|
|
if (e.key === 'Enter' && props.onSearch) {
|
|||
|
|
props.onSearch()
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
class={styles.searchInput}
|
|||
|
|
/>
|
|||
|
|
<Show when={props.onSearch}>
|
|||
|
|
<button class={styles.searchButton} onClick={props.onSearch}>
|
|||
|
|
Поиск
|
|||
|
|
</button>
|
|||
|
|
</Show>
|
|||
|
|
</div>
|
|||
|
|
</Show>
|
|||
|
|
|
|||
|
|
{/* Действия справа от поиска */}
|
|||
|
|
<Show when={props.actions}>
|
|||
|
|
<div class={styles.controlsRight}>{props.actions}</div>
|
|||
|
|
</Show>
|
|||
|
|
|
|||
|
|
{/* Дополнительные элементы управления */}
|
|||
|
|
{props.children}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default TableControls
|