jzazove
commented
7 months ago Thanks for sharing this. Are you wrapping the <IndexTable> in some other parent element in the modal?
Open muchisx opened 7 months ago
jzazove
commented
7 months ago Thanks for sharing this. Are you wrapping the <IndexTable> in some other parent element in the modal?
muchisx
commented
7 months ago Hi @jzazove
I'm wrapping it in a polaris <Card padding='0'>
here's my component that goes in the <Modal> as one of the children
function ConnectOccasionsModalContent() {
const { mode, setMode } = useSetIndexFiltersMode();
const [selected, setSelected] = useState(0);
const [searchInputValue, setSearchInputValue] = useState('');
const handleFiltersQueryChange = useCallback((value: string) => {
setSearchInputValue(value);
}, []);
const handleQueryValueRemove = useCallback(() => setSearchInputValue(''), [setSearchInputValue]);
const handleFiltersClearAll = useCallback(() => {
handleQueryValueRemove();
}, [handleQueryValueRemove]);
const resourceName = {
singular: 'occasion',
plural: 'occasions',
};
const occasions = [
{
id: '1020',
title: "Valentine's Day",
},
{
id: '1019',
title: 'Birthday',
},
{
id: '1018',
title: 'Wedding',
},
{
id: '1561',
title: 'Event',
},
{
id: '5132',
title: 'Anniversary',
},
{
id: '8135',
title: 'Graduation',
},
];
const { selectedResources, allResourcesSelected, handleSelectionChange } =
useIndexResourceState(occasions);
const rowMarkup = occasions.map(({ id, title }, index) => (
<IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index}>
<IndexTable.Cell>
<div className={styles.categoryContainer}>
<Text variant="bodyMd" fontWeight="bold" as="span">
{title}
</Text>
</div>
</IndexTable.Cell>
</IndexTable.Row>
));
return (
<Card padding="0">
<IndexFilters
queryValue={searchInputValue}
queryPlaceholder="Search occasion"
onQueryChange={handleFiltersQueryChange}
canCreateNewView={false}
onQueryClear={() => {
setSearchInputValue('');
}}
cancelAction={{
onAction: () => {},
disabled: false,
loading: false,
}}
tabs={[]}
selected={selected}
onSelect={setSelected}
filters={[]}
onClearAll={handleFiltersClearAll}
mode={mode}
setMode={setMode}
/>
<IndexTable
resourceName={resourceName}
itemCount={false ? 0 : occasions.length}
selectedItemsCount={allResourcesSelected ? 'All' : selectedResources.length}
onSelectionChange={handleSelectionChange}
headings={[{ title: 'Title' }]}
emptyState={
<div className={styles.categoriesEmptyStateContainer}>
<BlockStack align="center" inlineAlign="center" gap="400">
<BlockStack align="center" inlineAlign="center" gap="150">
<Text as="p" fontWeight="bold" alignment="center">
No occasions connected
</Text>
<Text as="p" alignment="center">
Select an occasion to connect with this category
</Text>
</BlockStack>
<Button variant="primary">Connect occasion</Button>
</BlockStack>
</div>
}
>
{rowMarkup}
</IndexTable>
</Card>
);
}Here's my Modal (btw as a side-note, how can extend the button Interface to allow for the variant prop in ts/eslint? or will that come as an update later?
<Modal open={openCreateCategoryModal} onHide={() => setOpenCreateCategoryModal(false)}>
<TitleBar title="Create new category">
{/* eslint-disable react/no-unknown-property */}
<button type="button" onClick={() => setOpenCreateCategoryModal(false)}>
Cancel
</button>
<button type="button" variant="primary" onClick={() => console.log('Category create')}>
Create category
</button>
{/* eslint-enable */}
</TitleBar>
<ModalContainer>
<CreateCategoryModalContent />
</ModalContainer>
</Modal>And then to give the entire context here's my ModalContainer
export default function ModalContainer(props: { children: React.ReactNode }) {
const { children } = props;
return <Box padding="400">{children}</Box>;
}
Describe the bug
Having and IndexTable from Polaris in a Modal (the newly released app-bridge-react v4) produces this runtime error in the console when the modal is opened.
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
No error should appear or an explanation on how to work with IndexTables inside the modal should be given
Contextual information
Packages and versions
List the relevant packages you’re using, and their versions. For example:
"@shopify/app-bridge-react": "^4.0.0","@shopify/polaris": "^12.0.0",Platform
Additional context
Building on the recent Remix template