Skip to content

Commit

Permalink
feat(HotkeysPanel): add customization props to hotkeys panel and impr…
Browse files Browse the repository at this point in the history
…ove docs
  • Loading branch information
kseniyakuzina committed Sep 25, 2024
1 parent 7361b25 commit 0052991
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 25 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/[email protected] @gravity-ui/
- MobileLogo
- Footer
- MobileFooter
- [HotkeysPanel](/src/components/HotkeysPanel/README.md)

## CSS variables

Expand Down
1 change: 1 addition & 0 deletions src/components/HotkeysPanel/HotkeysPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ $block: '.#{variables.$ns}hotkeys-panel';
&__search {
padding: 0 var(--hotkeys-panel-horizontal-padding);
margin-bottom: 14px;
box-sizing: border-box;
}

&__list {
Expand Down
58 changes: 45 additions & 13 deletions src/components/HotkeysPanel/HotkeysPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,52 @@ const b = block('hotkeys-panel');
export type HotkeysPanelProps<T> = {
hotkeys: HotkeysGroup<T>[];
title?: ReactNode;
filterable?: boolean;
filterPlaceholder?: string;
emptyState?: ReactNode;
visible: boolean;
onClose?: () => void;
className?: string;
drawerItemClassName?: string;
filterClassName?: string;
titleClassName?: string;
itemContentClassName?: string;
listClassName?: string;
leftOffset?: number | string;
topOffset?: number | string;
preventScrollBody?: DrawerProps['preventScrollBody'];
} & Omit<ListProps<HotkeysListItem>, 'items' | 'emptyPlaceholder'>;
} & Omit<
ListProps<HotkeysListItem>,
| 'items'
| 'emptyPlaceholder'
| 'className'
| 'size'
| 'renderItem'
| 'filterable'
| 'autoFocus'
| 'filterPlaceholder'
| 'filterClassName'
| 'filter'
| 'filterItem'
| 'onFilterEnd'
| 'onFilterUpdate'
>;

export function HotkeysPanel<T = {}>({
visible,
onClose,
leftOffset,
topOffset,
className,
drawerItemClassName,
filterClassName,
titleClassName,
listClassName,
itemContentClassName,
preventScrollBody,
hotkeys,
itemClassName,
filterable = true,
filterPlaceholder,
title,
emptyState,
Expand All @@ -52,7 +79,10 @@ export function HotkeysPanel<T = {}>({

const renderItem = useCallback(
(item: HotkeysListItem) => (
<div className={b('item-content', {group: item.group})} key={item.title}>
<div
className={b('item-content', {group: item.group}, itemContentClassName)}
key={item.title}
>
{item.title}
{item.value && <Hotkey className={b('hotkey')} value={item.value} />}
</div>
Expand All @@ -62,17 +92,19 @@ export function HotkeysPanel<T = {}>({

const drawerItemContent = (
<React.Fragment>
<h2 className={b('title')}>{title}</h2>
<TextInput
value={filter}
onUpdate={setFilter}
placeholder={filterPlaceholder}
autoFocus
className={b('search')}
hasClear
/>
<h2 className={b('title', titleClassName)}>{title}</h2>
{filterable && (
<TextInput
value={filter}
onUpdate={setFilter}
placeholder={filterPlaceholder}
autoFocus
className={b('search', filterClassName)}
hasClear
/>
)}
<List<HotkeysListItem>
className={b('list')}
className={b('list', listClassName)}
virtualized={false}
filterable={false}
items={hotkeysList}
Expand All @@ -98,7 +130,7 @@ export function HotkeysPanel<T = {}>({
<DrawerItem
id="hotkeys"
visible={visible}
className={b('drawer-item')}
className={b('drawer-item', drawerItemClassName)}
content={drawerItemContent}
/>
</Drawer>
Expand Down
50 changes: 38 additions & 12 deletions src/components/HotkeysPanel/README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,46 @@
<!--GITHUB_BLOCK-->

## HotkeysPanel

A panel for hotkeys documentation
<!--/GITHUB_BLOCK-->

A navigation panel for hotkeys documentation.
The panel displays a set of hotkeys for your application with a description of their purpose.

```ts
import {HotkeysPanel} from '@gravity-ui/navigation';
```

### PropTypes

| Property | Type | Required | Default | Description |
| :---------------- | :-------------- | :------: | :------ | :------------------------------- |
| className | `String` | | | Drawer class |
| visible | `Boolean` | yes | | Whether drawer visible or not |
| onClose | `Function` | | | close drawer handler |
| leftOffset | `Number/String` | | 0 | drawer left offset |
| topOffset | `Number/String` | | 0 | drawer top offset |
| preventScrollBody | `Boolean` | | true | Disable body scroll when visible |
| hotkeys | `Array` | yes | | List of hotkey groups |

And all the `List` PropTypes, but not `items` (you can find them [here](https://github.com/gravity-ui/uikit/blob/main/src/components/List/README.md))
| Property | Type | Required | Default | Description |
| :------------------- | :-------------- | :------: | :------ | :---------------------------------------------- |
| hotkeys | `Array` | yes | | List of hotkey groups |
| title | `Array` | | | The panel title |
| visible | `Boolean` | yes | | Whether drawer visible or not |
| onClose | `Function` | | | Close drawer handler |
| filterable | `Boolean` | yes | | Whether show search input or not |
| filterPlaceholder | `String` | | | Search input placeholder |
| filterClassName | `String` | | | Search input class name |
| leftOffset | `Number/String` | | 0 | Drawer left offset |
| topOffset | `Number/String` | | 0 | Drawer top offset |
| preventScrollBody | `Boolean` | | true | Whether disable body scroll when visible or not |
| emptyState | `ReactNode` | | | No search results placeholder |
| className | `String` | | | Drawer class name |
| drawerItemClassName | `String` | | | Drawer item class name |
| titleClassName | `String` | | | Title class name |
| itemContentClassName | `String` | | | List item content class name |
| listClassName | `String` | | | List class name |

And all the `List` PropTypes, but not `items` and filter props (you can find them [here](https://github.com/gravity-ui/uikit/blob/main/src/components/List/README.md))

## CSS API

| Name | Description | Default |
| :----------------------------------- | :-------------------------------- | :-----: |
| `--hotkeys-panel-width` | The width of the panel | `400px` |
| `--hotkeys-panel-vertical-padding` | The panel top and bottom paddings | `18px` |
| `--hotkeys-panel-horizontal-padding` | The panel left and right paddings | `24px` |

### Usage

Expand Down

0 comments on commit 0052991

Please sign in to comment.