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

Chore: Remove styled overwrites

Browse Source
This commit is contained in:
Gustav Hansen 2023-05-08 12:15:44 +02:00
parent 81c9189bd7
commit b2e08defbb
2 changed files with 10 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.js
View File

@ -1,24 +1,18 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Flex } from '@strapi/design-system'; import { Box, Flex } from '@strapi/design-system';
import { PaginationContext } from './PaginationContext'; import { PaginationContext } from './PaginationContext';
const PaginationWrapper = styled.nav``;
const PaginationList = styled(Flex)`
& > * + * {
margin-left: ${({ theme }) => theme.spaces[1]};
}
`;
export const Pagination = ({ children, label, activePage, pageCount }) => { export const Pagination = ({ children, label, activePage, pageCount }) => {
const paginationValue = useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]); const paginationValue = useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);
return ( return (
<PaginationContext.Provider value={paginationValue}> <PaginationContext.Provider value={paginationValue}>
<PaginationWrapper aria-label={label}> <Box as="nav" aria-label={label}>
<PaginationList as="ul">{children}</PaginationList> <Flex as="ul" gap={1}>
</PaginationWrapper> {children}
</Flex>
</Box>
</PaginationContext.Provider> </PaginationContext.Provider>
); );
}; };

19
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
View File

@ -40,17 +40,6 @@ import PageSize from './PageSize';
import SearchAsset from './SearchAsset'; import SearchAsset from './SearchAsset';
import { isSelectable } from './utils/isSelectable'; import { isSelectable } from './utils/isSelectable';
const StartBlockActions = styled(Flex)`
& > * + * {
margin-left: ${({ theme }) => theme.spaces[2]};
}
margin-left: ${({ pullRight }) => (pullRight ? 'auto' : undefined)};
`;
const EndBlockActions = styled(StartBlockActions)`
flex-shrink: 0;
`;
const TypographyMaxWidth = styled(Typography)` const TypographyMaxWidth = styled(Typography)`
max-width: 100%; max-width: 100%;
`; `;
@ -131,7 +120,7 @@ export const BrowseStep = ({
<Box paddingBottom={4}> <Box paddingBottom={4}>
<Flex justifyContent="space-between" alignItems="flex-start"> <Flex justifyContent="space-between" alignItems="flex-start">
{(assetCount > 0 || folderCount > 0 || isFiltering) && ( {(assetCount > 0 || folderCount > 0 || isFiltering) && (
<StartBlockActions wrap="wrap"> <Flex gap={2} wrap="wrap">
{multiple && isGridView && ( {multiple && isGridView && (
<Flex <Flex
paddingLeft={2} paddingLeft={2}
@ -157,11 +146,11 @@ export const BrowseStep = ({
appliedFilters={queryObject?.filters?.$and} appliedFilters={queryObject?.filters?.$and}
onChangeFilters={onChangeFilters} onChangeFilters={onChangeFilters}
/> />
</StartBlockActions> </Flex>
)} )}
{(assetCount > 0 || folderCount > 0 || isSearching) && ( {(assetCount > 0 || folderCount > 0 || isSearching) && (
<EndBlockActions pullRight> <Flex marginLeft="auto" shrink={0}>
<ActionContainer paddingTop={1} paddingBottom={1}> <ActionContainer paddingTop={1} paddingBottom={1}>
<IconButton <IconButton
icon={isGridView ? <List /> : <Grid />} icon={isGridView ? <List /> : <Grid />}
@ -180,7 +169,7 @@ export const BrowseStep = ({
/> />
</ActionContainer> </ActionContainer>
<SearchAsset onChangeSearch={onChangeSearch} queryValue={queryObject._q || ''} /> <SearchAsset onChangeSearch={onChangeSearch} queryValue={queryObject._q || ''} />
</EndBlockActions> </Flex>
)} )}
</Flex> </Flex>
</Box> </Box>