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
|