yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-27 07:03:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(helper-plugin)!: remove stopPropagation (#19846)

Browse Source 
* chore(helper-plugin)!: remove stopPropagation

* chore(helper-plugin)!: remove onRowClick util
This commit is contained in:
Simone 2024-03-19 18:47:38 +01:00 committed by GitHub
parent c46976a9da
commit bef2911a46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 31 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/admin/admin/src/pages/Settings/pages/Roles/components/RoleRow.tsx
View File

@ -1,5 +1,4 @@
import { Box, Flex, IconButton, IconButtonProps, Td, Tr, Typography } from '@strapi/design-system';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import type { AdminRole } from '../../../../../hooks/useAdminRoles';
@ -34,12 +33,8 @@ const RoleRow = ({
<Tr
aria-rowindex={rowIndex}
key={id}
{...(canUpdate
? onRowClick({
// @ts-expect-error – the prop uses `HTMLButtonElement` but we just specify `HTMLElement`
fn: editObject.onClick,
})
: {})}
// @ts-expect-error – the prop uses `HTMLButtonElement` but we just specify `HTMLElement`
onClick={canUpdate ? editObject.onClick : undefined}
>
<Td maxWidth={`${130 / 16}rem`}>
<Typography ellipsis textColor="neutral800">
@ -55,7 +50,7 @@ const RoleRow = ({
<Typography textColor="neutral800">{usersCountText}</Typography>
</Td>
<Td>
<Flex justifyContent="flex-end" {...stopPropagation}>
<Flex justifyContent="flex-end" onClick={(e) => e.stopPropagation()}>
{icons.map((icon, i) =>
icon ? (
<Box key={icon.label} paddingLeft={i === 0 ? 0 : 1}>

20
packages/core/admin/ee/admin/src/pages/SettingsPage/pages/ReviewWorkflows/ListPage.tsx
View File

@ -15,7 +15,7 @@ import {
VisuallyHidden,
} from '@strapi/design-system';
import { Link, LinkButton } from '@strapi/design-system/v2';
import { onRowClick, useRBAC } from '@strapi/helper-plugin';
import { useRBAC } from '@strapi/helper-plugin';
import { Pencil, Plus, Trash } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { useNavigate } from 'react-router-dom';
@ -290,17 +290,15 @@ export const ReviewWorkflowsListView = () => {
<Tbody>
{workflows?.map((workflow) => (
<Tr
{...onRowClick({
fn(event) {
const el = event.target as HTMLElement;
// Abort row onClick event when the user click on the delete button
if (el.nodeName === 'BUTTON') {
return;
}
onClick={(event) => {
const el = event.target as HTMLElement;
// Abort row onClick event when the user click on the delete button
if (el.nodeName === 'BUTTON') {
return;
}
navigate(`/settings/review-workflows/${workflow.id}`);
},
})}
navigate(`/settings/review-workflows/${workflow.id}`);
}}
key={`workflow-${workflow.id}`}
>
<Td width={`${250 / 16}rem`}>

8
packages/core/content-type-builder/admin/src/components/ListRow.tsx
View File

@ -1,7 +1,6 @@
import { memo } from 'react';
import { Box, Flex, IconButton, Typography } from '@strapi/design-system';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { Lock, Pencil, Trash } from '@strapi/icons';
import get from 'lodash/get';
import { useIntl } from 'react-intl';
@ -103,10 +102,7 @@ export const ListRow = memo(
return (
<BoxWrapper
as="tr"
{...onRowClick({
fn: handleClick,
condition: isInDevelopmentMode && configurable && !isMorph,
})}
onClick={isInDevelopmentMode && configurable && !isMorph ? handleClick : undefined}
>
<td style={{ position: 'relative' }}>
{loopNumber !== 0 && <Curve color={isFromDynamicZone ? 'primary200' : 'neutral150'} />}
@ -141,7 +137,7 @@ export const ListRow = memo(
</td>
<td>
{isInDevelopmentMode ? (
<Flex justifyContent="flex-end" {...stopPropagation}>
<Flex justifyContent="flex-end" onClick={(e) => e.stopPropagation()}>
{configurable ? (
<Flex gap={1}>
{!isMorph && (

48
packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/ListView.test.tsx.snap
View File

@ -1215,7 +1215,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
<tbody>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -1267,9 +1266,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -1340,7 +1337,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -1395,9 +1391,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -1468,7 +1462,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -1522,9 +1515,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -1595,7 +1586,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -1649,9 +1639,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -1722,7 +1710,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -1774,9 +1761,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -1847,7 +1832,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -1901,9 +1885,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -1974,7 +1956,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2022,9 +2003,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -2095,7 +2074,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2153,9 +2131,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -2240,7 +2216,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
<tbody>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2311,9 +2286,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -2384,7 +2357,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2455,9 +2427,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -2528,7 +2498,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2599,9 +2568,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -2713,7 +2680,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2771,9 +2737,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -2858,7 +2822,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
<tbody>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -2929,9 +2892,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -3002,7 +2963,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -3073,9 +3033,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -3146,7 +3104,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -3217,9 +3174,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"
@ -3331,7 +3286,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</tr>
<tr
class="c25"
style="cursor: pointer;"
>
<td
style="position: relative;"
@ -3383,9 +3337,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</td>
<td>
<div
aria-hidden="true"
class="c20"
role="button"
>
<div
class="c32"

4
packages/core/helper-plugin/MIGRATION_GUIDE.md
View File

@ -729,6 +729,10 @@ If you feel like you need this util, please open an issue on the Strapi reposito
This util has been removed and not replaced, use the native CSS opacity property instead. If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
### stopPropagation
This util has been removed and not replaced. If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
### translatedErrors
This utils has been removed. You should import it from the `@strapi/strapi/admin` package:

1
packages/core/helper-plugin/src/index.ts
View File

@ -17,7 +17,6 @@ export * from './hooks/useRBAC';
export * from './utils/auth';
export * from './utils/hasPermissions';
export * from './utils/stopPropagation';
/* -------------------------------------------------------------------------------------------------
* Types

36
packages/core/helper-plugin/src/utils/stopPropagation.ts
View File

@ -1,36 +0,0 @@
import * as React from 'react';
/**
* @deprecated Use the onClick prop on the element you want to stop propagation on instead
*/
export const stopPropagation = {
onClick: (e: React.MouseEvent) => e.stopPropagation(),
role: 'button',
'aria-hidden': true,
};
type OnRowClickProps = {
fn: (e: React.MouseEvent) => void;
condition?: boolean;
};
/**
* @deprecated Set the onClick prop directly
*/
export const onRowClick = ({ fn, condition = true }: OnRowClickProps) => {
if (condition) {
return {
style: { cursor: 'pointer' },
onClick: fn,
};
}
};
/**
*
* @deprecated Set the onClick prop on the element you want to stop propagation on instead
*/
export const StopPropagation = () => {
// Use createElement to avoid making this file a TSX since it's in the utils folder
return React.createElement('div', stopPropagation);
};

39
packages/core/helper-plugin/src/utils/tests/stopPropagation.test.ts
View File

@ -1,39 +0,0 @@
import * as React from 'react';
import { render } from '@tests/utils';
import { stopPropagation, onRowClick, StopPropagation } from '../stopPropagation';
describe('stopPropagation', () => {
it('should stop propagation when clicked', () => {
const eventMock = { stopPropagation: jest.fn() };
stopPropagation.onClick(eventMock as unknown as React.MouseEvent);
expect(eventMock.stopPropagation).toHaveBeenCalledTimes(1);
});
describe('onRowClick', () => {
it('should return onClick property when condition is true', () => {
const onClickMock = jest.fn();
const props = { fn: onClickMock };
const result = onRowClick(props);
expect(result).toEqual({ style: { cursor: 'pointer' }, onClick: onClickMock });
});
it('should return undefined when condition is false', () => {
const onClickMock = jest.fn();
const props = { fn: onClickMock, condition: false };
const result = onRowClick(props);
expect(result).toBeUndefined();
});
});
describe('StopPropagation component', () => {
it('should render a div with stopPropagation properties', () => {
const { getByRole } = render(React.createElement(StopPropagation));
const divElement = getByRole('button', { hidden: true });
expect(divElement).toBeInTheDocument();
expect(divElement).toHaveAttribute('role', 'button');
expect(divElement).toHaveAttribute('aria-hidden', 'true');
});
});
});

10
packages/core/upload/admin/src/components/TableList/TableRows.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { BaseCheckbox, Flex, IconButton, Tbody, Td, Tr } from '@strapi/design-system';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { Eye, Pencil } from '@strapi/icons';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
@ -40,12 +39,7 @@ export const TableRows = ({
);
return (
<Tr
key={id}
{...onRowClick({
fn: () => handleRowClickFn(element, contentType, id, path),
})}
>
<Tr key={id} onClick={() => handleRowClickFn(element, contentType, id, path)}>
<Td onClick={(e) => e.stopPropagation()}>
<BaseCheckbox
aria-label={formatMessage(
@ -74,7 +68,7 @@ export const TableRows = ({
);
})}
<Td {...stopPropagation}>
<Td onClick={(e) => e.stopPropagation()}>
<Flex justifyContent="flex-end">
{contentType === 'folder' && (
<IconButton

9
packages/plugins/users-permissions/admin/src/pages/EmailTemplates/components/EmailTable.jsx
View File

@ -12,7 +12,6 @@ import {
Typography,
VisuallyHidden,
} from '@strapi/design-system';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { Check, Pencil, Refresh } from '@strapi/icons';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
@ -53,7 +52,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
</Tr>
</Thead>
<Tbody>
<Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
<Tr onClick={() => onEditClick('reset_password')}>
<Td>
<Icon>
<Refresh
@ -72,7 +71,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
})}
</Typography>
</Td>
<Td {...stopPropagation}>
<Td onClick={(e) => e.stopPropagation()}>
<IconButton
onClick={() => onEditClick('reset_password')}
label={formatMessage({
@ -84,7 +83,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
/>
</Td>
</Tr>
<Tr {...onRowClick({ fn: () => onEditClick('email_confirmation') })}>
<Tr onClick={() => onEditClick('email_confirmation')}>
<Td>
<Icon>
<Check
@ -103,7 +102,7 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
})}
</Typography>
</Td>
<Td {...stopPropagation}>
<Td onClick={(e) => e.stopPropagation()}>
<IconButton
onClick={() => onEditClick('email_confirmation')}
label={formatMessage({

8
packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.jsx
View File

@ -466,7 +466,6 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
<tr
aria-rowindex="2"
class="c15"
style="cursor: pointer;"
>
<td
aria-colindex="1"
@ -508,9 +507,8 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
</td>
<td
aria-colindex="3"
aria-hidden="true"
class="c17"
role="button"
role="gridcell"
>
<span>
<button
@ -548,7 +546,6 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
<tr
aria-rowindex="3"
class="c15"
style="cursor: pointer;"
>
<td
aria-colindex="1"
@ -588,9 +585,8 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
</td>
<td
aria-colindex="3"
aria-hidden="true"
class="c17"
role="button"
role="gridcell"
>
<span>
<button

9
packages/plugins/users-permissions/admin/src/pages/Providers/index.jsx
View File

@ -16,7 +16,7 @@ import {
VisuallyHidden,
useCollator,
} from '@strapi/design-system';
import { onRowClick, stopPropagation, useRBAC } from '@strapi/helper-plugin';
import { useRBAC } from '@strapi/helper-plugin';
import { Pencil } from '@strapi/icons';
import { Page, useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
import upperFirst from 'lodash/upperFirst';
@ -192,10 +192,7 @@ export const ProvidersPage = () => {
{providers.map((provider) => (
<Tr
key={provider.name}
{...onRowClick({
fn: () => handleClickEdit(provider),
condition: canUpdate,
})}
onClick={() => (canUpdate ? handleClickEdit(provider) : undefined)}
>
<Td width="45%">
<Typography fontWeight="semiBold" textColor="neutral800">
@ -218,7 +215,7 @@ export const ProvidersPage = () => {
})}
</Typography>
</Td>
<Td {...stopPropagation}>
<Td onClick={(e) => e.stopPropagation()}>
{canUpdate && (
<IconButton
onClick={() => handleClickEdit(provider)}

5
packages/plugins/users-permissions/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
import { Pencil, Trash } from '@strapi/icons';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
@ -51,7 +50,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
return (
<Tbody>
{sortedRoles?.map((role) => (
<Tr key={role.name} {...onRowClick({ fn: () => navigate(role.id.toString()) })}>
<Tr key={role.name} onClick={() => navigate(role.id.toString())}>
<Td width="20%">
<Typography>{role.name}</Typography>
</Td>
@ -70,7 +69,7 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
</Typography>
</Td>
<Td>
<Flex justifyContent="end" {...stopPropagation}>
<Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
{canUpdate ? (
<EditLink
to={role.id.toString()}