# PreviewGallery Props (свойства) для компонента PreviewGallery: [{"name":"items","type":{"name":"(PreviewGalleryItemProps & Omit<SortableElementProps, \"index\">)[]"}},{"name":"interactionType","type":{"name":"enum","raw":"InteractionType","value":[{"value":"\"draggable\""},{"value":"\"selectable\""}]}},{"name":"maxHeight","type":{"name":"number"}},{"name":"actionIcon","type":{"name":"Element"}},{"name":"itemSize","type":{"name":"string"}},{"name":"onItemsSortEnd","type":{"name":"(({ oldIndex, newIndex }: SortableIndexProps) => void)"}},{"name":"onItemAction","type":{"name":"((id: string | number) => void)"}},{"name":"onItemClick","type":{"name":"((id: string | number) => void)"}},{"name":"axis","type":{"name":"enum","raw":"Axis","value":[{"value":"\"x\""},{"value":"\"y\""},{"value":"\"xy\""}]}},{"name":"lockAxis","type":{"name":"enum","raw":"Axis","value":[{"value":"\"x\""},{"value":"\"y\""},{"value":"\"xy\""}]}},{"name":"helperClass","type":{"name":"string"}},{"name":"transitionDuration","type":{"name":"number"}},{"name":"keyboardSortingTransitionDuration","type":{"name":"number"}},{"name":"keyCodes","type":{"name":"{ lift?: number[]; drop?: number[]; cancel?: number[] | undefined; up?: number[] | undefined; down?: number[] | undefined; } | undefined"}},{"name":"pressDelay","type":{"name":"number"}},{"name":"pressThreshold","type":{"name":"number"}},{"name":"distance","type":{"name":"number"}},{"name":"shouldCancelStart","type":{"name":"((event: SortEvent | SortEventWithTag) => boolean)"}},{"name":"updateBeforeSortStart","type":{"name":"SortStartHandler"}},{"name":"onSortStart","type":{"name":"SortStartHandler"}},{"name":"onSortMove","type":{"name":"SortMoveHandler"}},{"name":"onSortEnd","type":{"name":"SortEndHandler"}},{"name":"onSortOver","type":{"name":"SortOverHandler"}},{"name":"useDragHandle","type":{"name":"boolean"}},{"name":"useWindowAsScrollContainer","type":{"name":"boolean"}},{"name":"hideSortableGhost","type":{"name":"boolean"}},{"name":"lockToContainerEdges","type":{"name":"boolean"}},{"name":"lockOffset","type":{"name":"Offset | [Offset, Offset]"}},{"name":"getContainer","type":{"name":"ContainerGetter"}},{"name":"getHelperDimensions","type":{"name":"((sort: SortStart) => Dimensions)"}},{"name":"helperContainer","type":{"name":"HTMLElement | HelperContainerGetter"}},{"name":"disableAutoscroll","type":{"name":"boolean"}}] ## Использование
```tsx
import React, { useState, useCallback } from 'react';
import { IconTrashFilled } from '@salutejs/plasma-icons';
import { PreviewGallery, arrayItemRemoving, arrayItemSelecting } from '@salutejs/plasma-web';
export function App() {
const images = [
{
id: Math.random(),
image: 'https://plasma.sberdevices.ru/ui/images/320_320_1.jpg',
caption: '3:24',
tooltip: {
text: 'Высокое качество воспроизведения',
placement: 'top',
},
},
{ id: 2 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_2.jpg', isSelected: true },
{ id: 3 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_3.jpg', actionDisabled: true },
{ id: 4 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_4.jpg' },
];
const [items, setItems] = useState(images);
const onItemRemove = useCallback((id) => {
setItems((oldItems) => {
const newItems = arrayItemRemoving(oldItems, id);
if (newItems.length === 1) {
newItems[0].isSelected = true;
}
return newItems;
});
}, []);
const onItemClick = useCallback((id) => {
setItems((oldItems) => {
return arrayItemSelecting(oldItems, id);
});
}, []);
return (
<section style={{width: '23.75rem'}}>
<PreviewGallery
items={items}
onItemAction={onItemRemove}
actionIcon={<IconTrashFilled size="xs" color="inherit" />}
onItemClick={onItemClick}
/>
</section>
)
}
```
# PreviewGallery Props (свойства) для компонента PreviewGallery: [{"name":"items","type":{"name":"(PreviewGalleryItemProps & Omit<SortableElementProps, \"index\">)[]"}},{"name":"interactionType","type":{"name":"enum","raw":"InteractionType","value":[{"value":"\"draggable\""},{"value":"\"selectable\""}]}},{"name":"maxHeight","type":{"name":"number"}},{"name":"actionIcon","type":{"name":"Element"}},{"name":"itemSize","type":{"name":"string"}},{"name":"onItemsSortEnd","type":{"name":"(({ oldIndex, newIndex }: SortableIndexProps) => void)"}},{"name":"onItemAction","type":{"name":"((id: string | number) => void)"}},{"name":"onItemClick","type":{"name":"((id: string | number) => void)"}},{"name":"axis","type":{"name":"enum","raw":"Axis","value":[{"value":"\"x\""},{"value":"\"y\""},{"value":"\"xy\""}]}},{"name":"lockAxis","type":{"name":"enum","raw":"Axis","value":[{"value":"\"x\""},{"value":"\"y\""},{"value":"\"xy\""}]}},{"name":"helperClass","type":{"name":"string"}},{"name":"transitionDuration","type":{"name":"number"}},{"name":"keyboardSortingTransitionDuration","type":{"name":"number"}},{"name":"keyCodes","type":{"name":"{ lift?: number[]; drop?: number[]; cancel?: number[] | undefined; up?: number[] | undefined; down?: number[] | undefined; } | undefined"}},{"name":"pressDelay","type":{"name":"number"}},{"name":"pressThreshold","type":{"name":"number"}},{"name":"distance","type":{"name":"number"}},{"name":"shouldCancelStart","type":{"name":"((event: SortEvent | SortEventWithTag) => boolean)"}},{"name":"updateBeforeSortStart","type":{"name":"SortStartHandler"}},{"name":"onSortStart","type":{"name":"SortStartHandler"}},{"name":"onSortMove","type":{"name":"SortMoveHandler"}},{"name":"onSortEnd","type":{"name":"SortEndHandler"}},{"name":"onSortOver","type":{"name":"SortOverHandler"}},{"name":"useDragHandle","type":{"name":"boolean"}},{"name":"useWindowAsScrollContainer","type":{"name":"boolean"}},{"name":"hideSortableGhost","type":{"name":"boolean"}},{"name":"lockToContainerEdges","type":{"name":"boolean"}},{"name":"lockOffset","type":{"name":"Offset | [Offset, Offset]"}},{"name":"getContainer","type":{"name":"ContainerGetter"}},{"name":"getHelperDimensions","type":{"name":"((sort: SortStart) => Dimensions)"}},{"name":"helperContainer","type":{"name":"HTMLElement | HelperContainerGetter"}},{"name":"disableAutoscroll","type":{"name":"boolean"}}] ## Использование ```tsx
import React, { useState, useCallback } from 'react';
import { IconTrashFilled } from '@salutejs/plasma-icons';
import { PreviewGallery, arrayItemRemoving, arrayItemSelecting } from '@salutejs/plasma-web';
export function App() {
const images = [
{
id: Math.random(),
image: 'https://plasma.sberdevices.ru/ui/images/320_320_1.jpg',
caption: '3:24',
tooltip: {
text: 'Высокое качество воспроизведения',
placement: 'top',
},
},
{ id: 2 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_2.jpg', isSelected: true },
{ id: 3 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_3.jpg', actionDisabled: true },
{ id: 4 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_4.jpg' },
];
const [items, setItems] = useState(images);
const onItemRemove = useCallback((id) => {
setItems((oldItems) => {
const newItems = arrayItemRemoving(oldItems, id);
if (newItems.length === 1) {
newItems[0].isSelected = true;
}
return newItems;
});
}, []);
const onItemClick = useCallback((id) => {
setItems((oldItems) => {
return arrayItemSelecting(oldItems, id);
});
}, []);
return (
<section style={{width: '23.75rem'}}>
<PreviewGallery
items={items}
onItemAction={onItemRemove}
actionIcon={<IconTrashFilled size="xs" color="inherit" />}
onItemClick={onItemClick}
/>
</section>
)
}
```
Режим "Draggable".
```tsx
import React, { useState, useCallback } from 'react';
import { IconTrash } from '@salutejs/plasma-icons';
import { PreviewGallery, arrayItemRemoving, arrayItemSwapping } from '@salutejs/plasma-web';
export function App() {
const images = [
{
id: Math.random(),
image: 'https://plasma.sberdevices.ru/ui/images/320_320_1.jpg',
caption: '3:24',
tooltip: {
text: 'Высокое качество воспроизведения',
placement: 'top',
},
},
{ id: 2 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_2.jpg', isSelected: true },
{ id: 3 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_3.jpg', actionDisabled: true },
{ id: 4 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_4.jpg' },
];
const [items, setItems] = useState(images);
const onItemRemove = useCallback((id) => {
setItems((oldItems) => {
const newItems = arrayItemRemoving(oldItems, id);
if (newItems.length === 1) {
newItems[0].isSelected = true;
}
return newItems;
});
}, []);
const onItemsSortEnd = useCallback(({ oldIndex, newIndex }) => {
setItems((oldItems) => {
return arrayItemSwapping(oldItems, oldIndex, newIndex);
});
}, []);
return (
<section style={{width: '23.75rem'}}>
<PreviewGallery
interactionType="draggable"
items={items}
actionIcon={<IconTrash size="xs" color="inherit" />}
onItemAction={onItemRemove}
onItemsSortEnd={onItemsSortEnd}
/>
</section>
);
}
```