Merge pull request #9055 from strapi/refacto/remove-duplicate-components

Remove duplicate components from Upload plugin
This commit is contained in:
cyril lopez 2021-01-06 17:54:45 +01:00 committed by GitHub
commit e9c93530e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 52 additions and 190 deletions

View File

@ -1,12 +1,12 @@
import React from 'react';
import { isEmpty } from 'lodash';
import { PageFooter } from 'strapi-helper-plugin';
import { Flex, Padded } from '@buffetjs/core';
import { generatePageFromStart, generateStartFromPage } from '../../utils';
import Filters from '../Filters';
import Flex from '../Flex';
import List from '../List';
import ListEmpty from '../ListEmpty';
import Padded from '../Padded';
import SelectAll from '../SelectAll';
import SortPicker from '../SortPicker';
import useModalContext from '../../hooks/useModalContext';

View File

@ -1,10 +1,9 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Flex } from '@buffetjs/core';
import { getFileExtension, useGlobalContext } from 'strapi-helper-plugin';
import { formatBytes, getType, getTrad } from '../../utils';
import Flex from '../Flex';
import Text from '../Text';
import Border from '../CardBorder';
import CardImgWrapper from '../CardImgWrapper';
import CardPreview from '../CardPreview';
@ -66,26 +65,15 @@ const Card = ({
<Border color={hasError ? 'orange' : 'mediumBlue'} shown={checked || hasError} />
{children}
</CardImgWrapper>
{!withoutFileInfo ? (
{!withoutFileInfo && (
<>
<Flex>
<Title>{name}</Title>
<Tag label={getType(fileType)} />
</Flex>
{!withoutFileInfo && (
<FileInfos
extension={generatedExtension}
size={fileSize}
width={width}
height={height}
/>
)}
<FileInfos extension={generatedExtension} size={fileSize} width={width} height={height} />
</>
) : (
<Text lineHeight="13px" />
)}
{hasError && <ErrorMessage title={errorMessage}>{errorMessage}</ErrorMessage>}
</Wrapper>
);

View File

@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const ErrorMessage = styled(props => <Text {...props} color="orange" fontSize="md" ellipsis />)`
margin-top: 3px;

View File

@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const Title = styled(props => (
<Text {...props} fontSize="md" fontWeight="bold" color="black" ellipsis />

View File

@ -1,5 +1,5 @@
import styled from 'styled-components';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const Button = styled(Text)`
display: flex;

View File

@ -2,9 +2,10 @@ import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { useClickAwayListener } from '@buffetjs/hooks';
import { useGlobalContext } from 'strapi-helper-plugin';
import { Padded } from '@buffetjs/core';
import DoubleFile from '../../icons/DoubleFile';
import File from '../../icons/File';
import Padded from '../Padded';
import Button from './Button';
import Spacer from './Spacer';
import CardControl from '../CardControl';

View File

@ -2,8 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { themePropTypes } from 'strapi-helper-plugin';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const DropdownButton = styled(props => (
<Text

View File

@ -1,8 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import { themePropTypes } from 'strapi-helper-plugin';
import { Text } from '@buffetjs/core';
import Text from '../Text';
import formatDuration from './utils/formatDuration';
const Duration = styled(({ duration, ...rest }) => (

View File

@ -2,22 +2,23 @@ import React from 'react';
import PropTypes from 'prop-types';
import { dateFormats, dateToUtcTime } from 'strapi-helper-plugin';
import { get } from 'lodash';
import { useIntl } from 'react-intl';
import { Text, Flex } from '@buffetjs/core';
import { formatBytes } from '../../utils';
import { formatBytes, getTrad } from '../../utils';
import Flex from '../Flex';
import Text from '../Text';
import FileDetailsBoxWrapper from './FileDetailsBoxWrapper';
const FileDetailsBox = ({ file }) => {
const { formatMessage } = useIntl();
const fileSize = file.mime ? get(file, 'size', 0) : get(file, 'size', 0) / 1000;
const sections = [
{
key: 0,
rows: [
{ label: 'size', value: formatBytes(fileSize, 0) },
{ label: 'modal.file-details.size', value: formatBytes(fileSize, 0) },
{
label: 'date',
label: 'modal.file-details.date',
value: file.created_at ? dateToUtcTime(file.created_at).format(dateFormats.date) : '-',
},
],
@ -29,9 +30,12 @@ const FileDetailsBox = ({ file }) => {
{
key: 2,
rows: [
{ label: 'dimensions', value: file.width ? `${file.width}×${file.height}` : '-' },
{
label: 'extension',
label: 'modal.file-details.dimensions',
value: file.width ? `${file.width}×${file.height}` : '-',
},
{
label: 'modal.file-details.extension',
value: file.ext ? file.ext.replace('.', '') : '-',
textTransform: 'uppercase',
},
@ -44,9 +48,9 @@ const FileDetailsBox = ({ file }) => {
{sections.map(({ key, rows, type }) => {
if (type === 'spacer') {
return (
<Text as="section" key={key}>
<section key={key}>
<Text lineHeight="18px">&nbsp;</Text>
</Text>
</section>
);
}
@ -54,14 +58,14 @@ const FileDetailsBox = ({ file }) => {
<Flex justifyContent="space-between" key={key}>
{rows.map(rowItem => {
return (
<Text as="div" key={rowItem.label} style={{ width: '50%' }}>
<div key={rowItem.label} style={{ width: '50%' }}>
<Text color="grey" fontWeight="bold" textTransform="capitalize" lineHeight="18px">
{rowItem.label}
{formatMessage({ id: getTrad(rowItem.label) })}
</Text>
<Text color="grey" textTransform={rowItem.textTransform || ''} lineHeight="18px">
{rowItem.value}
</Text>
</Text>
</div>
);
})}
</Flex>

View File

@ -3,7 +3,7 @@ import { themePropTypes } from 'strapi-helper-plugin';
const FileDetailsBoxWrapper = styled.div`
width: 100%;
height: 119px;
min-height: 119px;
padding: 16px;
background-color: ${({ theme }) => theme.main.colors.lightGrey};
border-radius: ${({ theme }) => theme.main.sizes.borderRadius};

View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
const FormWrapper = styled.div`
margin-top: 22px;
margin-top: 19px;
`;
export default FormWrapper;

View File

@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const SizeBox = styled(props => <Text {...props} fontSize="md" color="white" as="div" />)`
position: absolute;

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { upperCase } from 'lodash';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const FileInfos = ({ extension, height, size, width }) => {
return (

View File

@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Padded } from '@buffetjs/core';
import FiltersList from '../FiltersList';
import FiltersPicker from '../FiltersPicker';
import Padded from '../Padded';
const Filters = ({ onChange, onClick, filters }) => {
return (

View File

@ -6,10 +6,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { InputNumber, Select } from '@buffetjs/core';
import Flex from '../../Flex';
import Padded from '../../Padded';
import { InputNumber, Select, Padded, Flex } from '@buffetjs/core';
function SizeInput({ onChange, value, ...rest }) {
const options = ['KB', 'MB', 'GB'];

View File

@ -1,25 +0,0 @@
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Flex = styled.div`
display: flex;
justify-content: ${({ justifyContent }) => justifyContent};
flex-direction: ${({ flexDirection }) => flexDirection};
align-items: ${({ alignItems }) => alignItems};
flex-wrap: ${({ flexWrap }) => flexWrap};
`;
Flex.defaultProps = {
justifyContent: 'normal',
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'normal',
};
Flex.propTypes = {
justifyContent: PropTypes.string,
flexDirection: PropTypes.string,
flexWrap: PropTypes.string,
};
export default Flex;

View File

@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
import { Flex } from '@buffetjs/core';
import CardPreview from '../CardPreview';
import Flex from '../Flex';
import Chevron from './Chevron';
const InputFilePreview = ({ file, onClick, isSlider }) => {

View File

@ -2,7 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const IntlText = ({ id, defaultMessage, values, ...textProps }) => (
<FormattedMessage id={id} defaultMessage={defaultMessage} values={values}>

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Flex from '../Flex';
import Padded from '../Padded';
import { Flex, Padded } from '@buffetjs/core';
import ModalSection from '../ModalSection';
import ModalTab from '../ModalTab';
import Hr from './Hr';

View File

@ -1,6 +1,6 @@
import styled from 'styled-components';
import Flex from '../../Flex';
import { Flex } from '@buffetjs/core';
const Wrapper = styled(Flex)`
width: 1.4rem;

View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text } from '@buffetjs/core';
import Text from '../../Text';
import Wrapper from './Wrapper';
const Count = ({ count, isActive }) => (

View File

@ -6,12 +6,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Flex, Padded } from '@buffetjs/core';
import { getTrad } from '../../utils';
import Wrapper from './Wrapper';
import Padded from '../Padded';
import IntlText from '../IntlText';
import Flex from '../Flex';
import Count from './Count';
const ModalTab = ({ isDisabled, label, to, isActive, onClick, count }) => {

View File

@ -1,28 +0,0 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
const Padded = styled.div`
padding-top: ${({ theme, size, top }) => top && (theme.main.sizes.paddings[size] || size)};
padding-right: ${({ theme, size, right }) => right && (theme.main.sizes.paddings[size] || size)};
padding-bottom: ${({ theme, size, bottom }) =>
bottom && (theme.main.sizes.paddings[size] || size)};
padding-left: ${({ theme, size, left }) => left && (theme.main.sizes.paddings[size] || size)};
`;
Padded.defaultProps = {
bottom: false,
left: false,
right: false,
top: false,
size: 'sm',
};
Padded.propTypes = {
bottom: PropTypes.bool,
left: PropTypes.bool,
right: PropTypes.bool,
top: PropTypes.bool,
size: PropTypes.string,
};
export default Padded;

View File

@ -2,10 +2,10 @@ import React, { useRef, useEffect } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import PropTypes from 'prop-types';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { Flex } from '@buffetjs/core';
import { getFileExtension } from 'strapi-helper-plugin';
import { formatBytes, getType, ItemTypes } from '../../utils';
import Flex from '../Flex';
import Border from '../CardBorder';
import CardImgWrapper from '../CardImgWrapper';
import CardPreview from '../CardPreview';

View File

@ -1,8 +1,8 @@
import React from 'react';
import { getTrad } from '../../utils';
import { Flex } from '@buffetjs/core';
import Flex from '../Flex';
import { getTrad } from '../../utils';
import IntlText from '../IntlText';
import ListTitle from '../UploadList/ListTitle';
import useModalContext from '../../hooks/useModalContext';

View File

@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import { themePropTypes } from 'strapi-helper-plugin';
import Text from '../Text';
import { Text } from '@buffetjs/core';
const Wrapper = styled(props => <Text as="ul" fontSize="md" {...props} />)`
margin-bottom: 0;

View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text } from '@buffetjs/core';
import Text from '../Text';
import Wrapper from './Wrapper';
const Tag = ({ label }) => {

View File

@ -1,38 +0,0 @@
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Text = styled.p`
margin: 0;
line-height: ${({ lineHeight }) => lineHeight};
color: ${({ theme, color }) => theme.main.colors[color] || color};
font-size: ${({ theme, fontSize }) => theme.main.sizes.fonts[fontSize]};
font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]};
text-transform: ${({ textTransform }) => textTransform};
${({ ellipsis }) =>
ellipsis &&
`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`}
`;
Text.defaultProps = {
color: 'greyDark',
ellipsis: false,
fontSize: 'md',
fontWeight: 'regular',
lineHeight: 'normal',
textTransform: 'none',
};
Text.propTypes = {
color: PropTypes.string,
ellipsis: PropTypes.bool,
fontSize: PropTypes.string,
fontWeight: PropTypes.string,
lineHeight: PropTypes.string,
textTransform: PropTypes.string,
};
export default Text;

View File

@ -1,11 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Padded } from '@buffetjs/core';
import { PageFooter, useQuery } from 'strapi-helper-plugin';
import { generatePageFromStart, generateStartFromPage } from '../../../utils';
import { useAppContext } from '../../../hooks';
import List from '../../../components/List';
import ListEmpty from '../../../components/ListEmpty';
import Padded from '../../../components/Padded';
const HomePageList = ({
areResultsEmptyWithSettings,

View File

@ -1,13 +1,13 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useDebounce } from '@buffetjs/hooks';
import { Padded } from '@buffetjs/core';
import { HeaderSearch, useGlobalContext, useQuery, LoadingIndicator } from 'strapi-helper-plugin';
import { useAppContext } from '../../../hooks';
import { getTrad, getFileModelTimestamps } from '../../../utils';
import ControlsWrapper from '../../../components/ControlsWrapper';
import Filters from '../../../components/Filters';
import Padded from '../../../components/Padded';
import SelectAll from '../../../components/SelectAll';
import SortPicker from '../../../components/SortPicker';

View File

@ -2,7 +2,7 @@ import React, { useCallback, useReducer, useRef, useState, useEffect } from 'rea
import { get, includes, toString, isEqual, intersectionWith } from 'lodash';
import { useHistory, useLocation } from 'react-router-dom';
import { Header } from '@buffetjs/custom';
import { Button } from '@buffetjs/core';
import { Button, Padded } from '@buffetjs/core';
import {
PopUpWarning,
useGlobalContext,
@ -14,7 +14,6 @@ import {
import { formatFileForEditing, getRequestUrl, getTrad, getFileModelTimestamps } from '../../utils';
import Container from '../../components/Container';
import HomePageContent from './HomePageContent';
import Padded from '../../components/Padded';
import { useAppContext } from '../../hooks';
import ModalStepper from '../ModalStepper';
import { generateStringFromParams, getHeaderLabel } from './utils';

View File

@ -1,11 +1,10 @@
import React, { useEffect, useReducer, useRef } from 'react';
import { Header, Inputs } from '@buffetjs/custom';
import { Text } from '@buffetjs/core';
import { isEqual } from 'lodash';
import { LoadingIndicatorPage, useGlobalContext, request } from 'strapi-helper-plugin';
import { getRequestUrl, getTrad } from '../../utils';
import Text from '../../components/Text';
// import Divider from './Divider';
import SectionTitleWrapper from './SectionTitleWrapper';
import Wrapper from './Wrapper';
import init from './init';

View File

@ -4554,11 +4554,6 @@ base64-js@^1.0.2, base64-js@^1.3.0:
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
base64url@3.x.x:
version "3.0.1"
resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
base@^0.11.1:
version "0.11.2"
resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@ -13467,11 +13462,6 @@ oauth-sign@^0.9.0, oauth-sign@~0.9.0:
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
oauth@0.9.x:
version "0.9.15"
resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"
integrity sha1-vR/vr2hslrdUda7VGWQS/2DPucE=
object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@ -14050,13 +14040,6 @@ pascalcase@^0.1.1:
resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
passport-google-oauth2@0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/passport-google-oauth2/-/passport-google-oauth2-0.2.0.tgz#fc9ea59e7091f02e24fd16d6be9257ea982ebbc3"
integrity sha512-62EdPtbfVdc55nIXi0p1WOa/fFMM8v/M8uQGnbcXA4OexZWCnfsEi3wo2buag+Is5oqpuHzOtI64JpHk0Xi5RQ==
dependencies:
passport-oauth2 "^1.1.2"
passport-local@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/passport-local/-/passport-local-1.0.0.tgz#1fe63268c92e75606626437e3b906662c15ba6ee"
@ -14064,17 +14047,6 @@ passport-local@1.0.0:
dependencies:
passport-strategy "1.x.x"
passport-oauth2@^1.1.2:
version "1.5.0"
resolved "https://registry.yarnpkg.com/passport-oauth2/-/passport-oauth2-1.5.0.tgz#64babbb54ac46a4dcab35e7f266ed5294e3c4108"
integrity sha512-kqBt6vR/5VlCK8iCx1/KpY42kQ+NEHZwsSyt4Y6STiNjU+wWICG1i8ucc1FapXDGO15C5O5VZz7+7vRzrDPXXQ==
dependencies:
base64url "3.x.x"
oauth "0.9.x"
passport-strategy "1.x.x"
uid2 "0.0.x"
utils-merge "1.x.x"
passport-strategy@1.x.x:
version "1.0.0"
resolved "https://registry.yarnpkg.com/passport-strategy/-/passport-strategy-1.0.0.tgz#b5539aa8fc225a3d1ad179476ddf236b440f52e4"
@ -18955,11 +18927,6 @@ uid-number@0.0.6:
resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
uid2@0.0.x:
version "0.0.3"
resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.3.tgz#483126e11774df2f71b8b639dcd799c376162b82"
integrity sha1-SDEm4Rd03y9xuLY53NeZw3YWK4I=
umask@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
@ -19293,7 +19260,7 @@ utila@^0.4.0, utila@~0.4:
resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
utils-merge@1.0.1, utils-merge@1.x.x:
utils-merge@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=