Skip to content

Commit

Permalink
Merge branch 'main' into rndnm/CLOUDFRONT-16740/updChangelogDialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@Feverqwe
Feverqwe authored Oct 23, 2023
2 parents 8f5783d + 58d10ad commit fb5b9b8
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 14 deletions.
3 changes: 3 additions & 0 deletions src/components/FilePreview/FilePreviewAction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface FilePreviewActionProps {
icon: IconData;
title: string;
href?: string;
disabled?: boolean;
onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
extraProps?: ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
}
Expand All @@ -17,6 +18,7 @@ export function FilePreviewAction({
icon,
title,
href,
disabled,
onClick,
extraProps,
}: FilePreviewActionProps) {
Expand All @@ -27,6 +29,7 @@ export function FilePreviewAction({
view="raised"
pin="circle-circle"
href={href}
disabled={disabled}
size="s"
extraProps={{'aria-label': title, 'aria-describedby': id, ...extraProps}}
>
Expand Down
50 changes: 49 additions & 1 deletion src/components/FilePreview/__tests__/FilePreview.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useState} from 'react';

import {CircleExclamation} from '@gravity-ui/icons';
import {render, screen} from '@testing-library/react';
Expand Down Expand Up @@ -120,4 +120,52 @@ describe('FilePreview', () => {
expect(firstActionsClickHandler).toBeCalled();
expect(secondActionsClickHandler).toBeCalled();
});

test("Don't Call disabled action click handler", async () => {
const fileName = 'Some file name';
const fileType = 'image/png';

const mockFn = jest.fn();

const TestCase = () => {
const [disabled, setDisabled] = useState(false);
const [clicksCount, setClicksCount] = useState(0);

const actionsClickHandler = () => {
mockFn();
setClicksCount((prev) => prev + 1);

if (clicksCount === 4) {
setDisabled(true);
}
};

return (
<FilePreview
file={{name: fileName, type: fileType} as File}
actions={[
{
disabled,
icon: CircleExclamation,
title: 'some hint',
onClick: actionsClickHandler,
},
]}
/>
);
};

render(<TestCase />);

const actionButtons = screen.getAllByRole('button');

const user = userEvent.setup();
for (const actionButton of actionButtons) {
for (let i = 0; i < 10; i++) {
await user.click(actionButton);
}
}

expect(mockFn).toBeCalledTimes(5);
});
});
26 changes: 13 additions & 13 deletions src/components/Notifications/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,19 @@ For more code examples go to [Notifications.stories.tsx](https://github.com/grav

**Notifications** — renders notifications and actions on these notifications.

| Property | Type | Required | Default | Description |
| :-------------------------- | :-------------------- | :------: | :---------------- | :---------------------------------------------------------------------------------------- |
| `notifications` | `NotificationProps[]` | `true` | `false` | Touch device (mobile) mode |
| `title` | `ReactNode` | | `"Notifications"` | Notifications' title |
| `actions` | `ReactNode` | | | Notifications' actions (e.g. create new, mark all as read) |
| `areAllNotificationsLoaded` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications |
| `onLoadMoreNotifications` | `() => Promise` | | `noop` | Callback is called when the user scrolls to the end (so you can fetch more notifications) |
| `isLoading` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications |
| `errorContent` | `ReactNode` | | | Used for the Error state (the message under the «Error») |
| `errorImage` | `ReactNode` | | | Custom image for the Error state |
| `emptyContent` | `ReactNode` | | | Same as `errorContent`, but for the Empty state |
| `emptyImage` | `ReactNode` | | | Custom image for the Empty state |
| `swipeThreshold` | `number` | | 0.4 | A value from 0 to 1 — the more the harder it is to swipe |
| Property | Type | Required | Default | Description |
|:----------------------------|:----------------------|:--------:|:------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------|
| `notifications` | `NotificationProps[]` | `true` | | List of Notifications to display. [Notification' types](https://github.com/gravity-ui/components/blob/main/src/components/Notification/definitions.ts) |
| `title` | `ReactNode` | | `"Notifications"` | Notifications' title |
| `actions` | `ReactNode` | | | Notifications' actions (e.g. create new, mark all as read) |
| `areAllNotificationsLoaded` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications |
| `onLoadMoreNotifications` | `() => Promise` | | `noop` | Callback is called when the user scrolls to the end (so you can fetch more notifications) |
| `isLoading` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications |
| `errorContent` | `ReactNode` | | | Used for the Error state (the message under the «Error») |
| `errorImage` | `ReactNode` | | | Custom image for the Error state |
| `emptyContent` | `ReactNode` | | | Same as `errorContent`, but for the Empty state |
| `emptyImage` | `ReactNode` | | | Custom image for the Empty state |
| `swipeThreshold` | `number` | | 0.4 | A value from 0 to 1 — the more the harder it is to swipe |

**Notification** — renders a notification with actions (side/bottom/swipe).

Expand Down

0 comments on commit fb5b9b8

Please sign in to comment.