diff --git a/UNRELEASED.md b/UNRELEASED.md index 70eeb0ff0c0..70189a542b8 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -27,5 +27,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Migrated `ContextualSaveBar` to use hooks instead of `withAppProvider` ([#2091](https://github.com/Shopify/polaris-react/pull/2091)) - Migrated `RangeSlider`, `ScrollLock` and `TopBar.SearchField` to use hooks instead of withAppProvider ([#2083](https://github.com/Shopify/polaris-react/pull/2083)) +- Updated `ResourceItem` to no longer rely on withAppProvider ([#2094](https://github.com/Shopify/polaris-react/pull/2094)) ### Deprecations diff --git a/src/components/ResourceItem/ResourceItem.tsx b/src/components/ResourceItem/ResourceItem.tsx index c983a43c78f..e632d38cf3c 100644 --- a/src/components/ResourceItem/ResourceItem.tsx +++ b/src/components/ResourceItem/ResourceItem.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, {useContext} from 'react'; import {HorizontalDotsMinor} from '@shopify/polaris-icons'; import {createUniqueIDFactory} from '@shopify/javascript-utilities/other'; import isEqual from 'lodash/isEqual'; import {classNames} from '../../utilities/css'; +import {useI18n} from '../../utilities/i18n'; import {DisableableAction} from '../../types'; import {ActionList} from '../ActionList'; import {Popover} from '../Popover'; @@ -12,10 +13,6 @@ import {ThumbnailProps} from '../Thumbnail'; import {ButtonGroup} from '../ButtonGroup'; import {Checkbox} from '../Checkbox'; import {Button, buttonsFrom} from '../Button'; -import { - withAppProvider, - WithAppProviderProps, -} from '../../utilities/with-app-provider'; import { ResourceListContext, @@ -30,11 +27,7 @@ export type MediaSize = 'small' | 'medium' | 'large'; export type MediaType = 'avatar' | 'thumbnail'; -interface WithContextTypes { - context: IJ; -} - -export interface Props { +export interface BaseProps { /** Visually hidden text for screen readers used for item link*/ accessibilityLabel?: string; /** Individual item name used by various text labels */ @@ -61,18 +54,23 @@ export interface Props { children?: React.ReactNode; } -export interface PropsWithUrl extends Props { +export interface PropsWithUrl extends BaseProps { url: string; onClick?(id?: string): void; } -export interface PropsWithClick extends Props { +export interface PropsWithClick extends BaseProps { url?: string; onClick(id?: string): void; } export type ResourceItemProps = PropsWithUrl | PropsWithClick; +interface PropsFromWrapper { + context: React.ContextType; + i18n: ReturnType; +} + interface State { actionsMenuVisible: boolean; focused: boolean; @@ -80,13 +78,7 @@ interface State { selected: boolean; } -export type CombinedProps = - | PropsWithUrl & - WithAppProviderProps & - WithContextTypes> - | PropsWithClick & - WithAppProviderProps & - WithContextTypes>; +export type CombinedProps = PropsFromWrapper & (PropsWithUrl | PropsWithClick); const getUniqueCheckboxID = createUniqueIDFactory('ResourceListItemCheckbox'); const getUniqueOverlayID = createUniqueIDFactory('ResourceListItemOverlay'); @@ -143,10 +135,10 @@ class BaseResourceItem extends React.Component { ariaControls, ariaExpanded, persistActions = false, - polaris: {intl}, accessibilityLabel, name, context: {selectable, selectMode, loading}, + i18n, } = this.props; const {actionsMenuVisible, focused, focusedInner, selected} = this.state; @@ -162,7 +154,7 @@ class BaseResourceItem extends React.Component { if (selectable) { const checkboxAccessibilityLabel = - name || accessibilityLabel || intl.translate('Polaris.Common.checkbox'); + name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox'); handleMarkup = (
{ ); const disclosureAccessibilityLabel = name - ? intl.translate('Polaris.ResourceList.Item.actionsDropdownLabel', { + ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', { accessibilityLabel: name, }) - : intl.translate('Polaris.ResourceList.Item.actionsDropdown'); + : i18n.translate('Polaris.ResourceList.Item.actionsDropdown'); disclosureMarkup = (
@@ -434,14 +426,12 @@ function isSelected(id: string, selectedItems?: ResourceListSelectedItems) { ); } -function ResourceItem(props: CombinedProps) { +export function ResourceItem(props: ResourceItemProps) { return ( - - {(context) => } - + ); } - -// Use named export once withAppProvider is refactored away -// eslint-disable-next-line import/no-default-export -export default withAppProvider()(ResourceItem); diff --git a/src/components/ResourceItem/index.ts b/src/components/ResourceItem/index.ts index 7de3e4a5ea5..11733b92a91 100644 --- a/src/components/ResourceItem/index.ts +++ b/src/components/ResourceItem/index.ts @@ -1,3 +1 @@ -import ResourceItem, {ResourceItemProps} from './ResourceItem'; - -export {ResourceItem, ResourceItemProps}; +export {ResourceItem, ResourceItemProps} from './ResourceItem'; diff --git a/src/components/ResourceItem/tests/ResourceItem.test.tsx b/src/components/ResourceItem/tests/ResourceItem.test.tsx index 803d22818b3..b4cedc6c72f 100644 --- a/src/components/ResourceItem/tests/ResourceItem.test.tsx +++ b/src/components/ResourceItem/tests/ResourceItem.test.tsx @@ -13,7 +13,7 @@ import { Button, } from 'components'; import {ResourceListContext} from '../../../utilities/resource-list'; -import ResourceItem from '../ResourceItem'; +import {ResourceItem} from '../ResourceItem'; describe('', () => { let spy: jest.SpyInstance;