Remove old components

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-12-10 18:36:43 +01:00
parent 698181eaab
commit 25ddf4604c
20 changed files with 85 additions and 470 deletions

View File

@ -23,12 +23,12 @@
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/runtime": "^7.9.2",
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.1",
"@buffetjs/custom": "3.3.2-next.1",
"@buffetjs/hooks": "3.3.2-next.1",
"@buffetjs/icons": "3.3.2-next.1",
"@buffetjs/styles": "3.3.2-next.1",
"@buffetjs/utils": "3.3.2-next.1",
"@casl/ability": "^4.1.5",
"@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.32",

View File

@ -1,12 +1,7 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
// You can see in the index.js file that I used the design system to do the UI integration but
// sometimes, we need to create some "temporary" custom style to fix the baseline alignment.
// -----
// TODO : remove this component. I think that this kind components should not exist in Strapi.
// I create it to temporary fix the baseline alignment until we have the design system.
// TODO remove compo when DS ready
const BaselineAlignment = styled.div`
padding-top: ${({ size, top }) => top && size};
padding-right: ${({ size, right }) => right && size};

View File

@ -50,12 +50,12 @@
"rollup-plugin-terser": "^4.0.4"
},
"dependencies": {
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.1",
"@buffetjs/custom": "3.3.2-next.1",
"@buffetjs/hooks": "3.3.2-next.1",
"@buffetjs/icons": "3.3.2-next.1",
"@buffetjs/styles": "3.3.2-next.1",
"@buffetjs/utils": "3.3.2-next.1",
"bootstrap": "^4.5.3",
"classnames": "^2.2.5",
"immutable": "^3.8.2",

View File

@ -1,26 +0,0 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import InputCheckbox from '../InputCheckbox';
import ItemDropdown from './ItemDropdownReset';
const DropdownItem = ({ name, onChange, value }) => {
const handleChange = () => {
onChange({ name, value });
};
return (
<ItemDropdown key={name} toggle={false} onClick={handleChange}>
<div>
<InputCheckbox onChange={handleChange} name={name} value={value} />
</div>
</ItemDropdown>
);
};
DropdownItem.propTypes = {
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.bool.isRequired,
};
export default memo(DropdownItem);

View File

@ -1,12 +0,0 @@
import { DropdownItem } from 'reactstrap';
import styled from 'styled-components';
const DropdownItemLink = styled(DropdownItem)`
border-bottom: 1px solid #f7f8f8;
padding: 0.3rem 1.5rem 0.8rem 1.5rem;
&:hover {
background-color: #fff;
}
`;
export default DropdownItemLink;

View File

@ -1,11 +0,0 @@
import styled from 'styled-components';
const DropdownWrapper = styled.div`
display: flex;
margin-bottom: 6px;
justify-content: flex-end;
font-family: Lato;
-webkit-font-smoothing: antialiased;
`;
export default DropdownWrapper;

View File

@ -1,31 +0,0 @@
import { DropdownItem } from 'reactstrap';
import styled from 'styled-components';
const ItemDropdown = styled(DropdownItem)`
padding: 0;
&:active,
:focus {
background-color: #f7f7f9 !important;
color: #333740;
font-weight: 500;
outline: 0;
}
&:hover {
cursor: pointer;
}
label {
width: 100%;
outline: none;
&:before {
top: 12px;
}
}
.form-check {
height: 36px;
line-height: 36px;
}
`;
export default ItemDropdown;

View File

@ -1,22 +0,0 @@
import styled from 'styled-components';
import ItemDropdown from './ItemDropdown';
const ItemDropdownReset = styled(ItemDropdown)`
margin-bottom: 6px;
padding: 0.8rem 1.5rem 0.2rem 1.5rem;
font-weight: 600;
font-size: 1.3rem;
&:hover {
background-color: #ffffff !important;
}
> div {
> span:last-child {
color: #007eff;
font-weight: 400;
cursor: pointer;
}
}
`;
export default ItemDropdownReset;

View File

@ -1,27 +0,0 @@
import styled from 'styled-components';
import { Link } from 'react-router-dom';
const LayoutWrapper = styled(Link)`
display: block;
width: 100%;
text-decoration: none;
color: #333740;
font-size: 13px;
svg {
margin-right: 10px;
vertical-align: middle;
}
&:hover {
text-decoration: none;
span {
color: #007eff;
}
svg {
g {
fill: #007eff;
}
}
}
`;
export default LayoutWrapper;

View File

@ -1,22 +0,0 @@
import styled from 'styled-components';
import { DropdownMenu } from 'reactstrap';
/* eslint-disable indent */
const MenuDropdown = styled(DropdownMenu)`
min-width: 230px;
padding-top: 9px;
padding-bottom: 5px !important;
border-top-right-radius: 0 !important;
border: 1px solid #e3e9f3;
box-shadow: 0px 2px 4px rgba(227, 233, 243, 0.5);
transform: translate3d(-178px, 28px, 0px) !important;
${({ isopen }) =>
isopen === 'true' &&
`
border-top-color: #aed4fb !important;
border-top-right-radius: 0;
`}
`;
export default MenuDropdown;

View File

@ -1,88 +0,0 @@
import { DropdownToggle } from 'reactstrap';
import styled from 'styled-components';
/* eslint-disable indent */
const Toggle = styled(DropdownToggle)`
height: 30px;
padding: 0 10px;
&:focus {
outline: 0;
}
&:active {
border-color: #aed4fb !important;
}
&:hover {
cursor: pointer;
}
${({ isopen }) => {
// Fix react warning
if (isopen === 'true') {
return `
background: #e6f0fb;
border: 1px solid #aed4fb !important;
border-radius: 2px;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 2px !important;
&:before {
content: '\f013';
font-family: FontAwesome;
color: #007eff;
}
&:after {
content: '\f0d7';
display: inline-block;
margin-top: -1px;
margin-left: 10px;
font-family: FontAwesome;
color: #007eff;
transform: rotateX(180deg);
transition: transform 0.3s ease-out;
}
&:hover,
:active,
:focus {
background: #e6f0fb;
border: 1px solid #aed4fb;
}
`;
}
return `
background: #ffffff !important;
border: 1px solid #e3e9f3;
border-radius: 2px !important;
font-size: 1.4rem;
&:before {
content: '\f013';
font-family: FontAwesome;
color: #323740;
}
&:after {
content: '\f0d7';
display: inline-block;
margin-top: -1px;
margin-left: 11px;
font-family: FontAwesome;
color: #323740;
transition: transform 0.3s ease-out;
}
&:hover,
:focus,
:active {
background: #ffffff !important;
border: 1px solid #e3e9f3;
}
`;
}}
`;
export default Toggle;

View File

@ -1,92 +0,0 @@
// TODO delete this file
import React, { memo, useCallback, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { ButtonDropdown } from 'reactstrap';
import { FormattedMessage } from 'react-intl';
import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import DropdownItemLink from './DropdownItemLink';
import DropdownWrapper from './DropdownWrapper';
import ItemDropdownReset from './ItemDropdownReset';
import LayoutWrapper from './LayoutWrapper';
import MenuDropdown from './MenuDropdown';
import Toggle from './Toggle';
import DropdownItem from './DropdownItem';
const DisplayedFieldsDropdown = ({ displayedHeaders, items, onChange, onClickReset, slug }) => {
const { emitEvent } = useGlobalContext();
const emitEventRef = useRef(emitEvent);
const [isOpen, setIsOpen] = useState(false);
const getCheckboxValue = checkboxName => {
return displayedHeaders.findIndex(({ name }) => name === checkboxName) !== -1;
};
const toggle = useCallback(
() =>
setIsOpen(prev => {
if (prev === false) {
emitEventRef.current('willChangeListFieldsSettings');
}
return !prev;
}),
[]
);
return (
<DropdownWrapper>
<ButtonDropdown isOpen={isOpen} toggle={toggle} direction="down">
{/* Fix React warning unrecognize prop */}
<Toggle isopen={isOpen.toString()} />
<MenuDropdown isopen={isOpen.toString()}>
<DropdownItemLink>
<LayoutWrapper
to={`${slug}/configurations/list`}
onClick={() => emitEvent('willEditListLayout')}
>
<LayoutIcon />
<FormattedMessage id="app.links.configure-view" />
</LayoutWrapper>
</DropdownItemLink>
<FormattedMessage id={`${pluginId}.containers.ListPage.displayedFields`}>
{msg => (
<ItemDropdownReset onClick={onClickReset}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<span>{msg}</span>
<FormattedMessage id={`${pluginId}.containers.Edit.reset`} />
</div>
</ItemDropdownReset>
)}
</FormattedMessage>
{items.map(headerName => {
return (
<DropdownItem
key={headerName}
name={headerName}
onChange={onChange}
value={getCheckboxValue(headerName)}
/>
);
})}
</MenuDropdown>
</ButtonDropdown>
</DropdownWrapper>
);
};
DisplayedFieldsDropdown.propTypes = {
displayedHeaders: PropTypes.array.isRequired,
items: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
onClickReset: PropTypes.func.isRequired,
slug: PropTypes.string.isRequired,
};
export default memo(DisplayedFieldsDropdown);

View File

@ -1,63 +0,0 @@
import styled from 'styled-components';
/* eslint-disable indent */
const Div = styled.div`
padding-left: 0;
font-size: 13px;
&:active,
:focus {
outline: 0 !important;
}
> div {
height: 27px;
margin: 0 !important;
padding-left: 15px;
line-height: 27px;
&:active,
:focus {
outline: 0 !important;
}
}
`;
const Label = styled.label`
margin: 0;
margin-left: 9px;
color: #333740 !important;
cursor: pointer;
> input {
display: none;
margin-right: 9px;
}
&:before {
content: '';
position: absolute;
left: 15px;
top: 7px;
width: 14px;
height: 14px;
border: 1px solid rgba(16, 22, 34, 0.15);
background-color: #fdfdfd;
border-radius: 3px;
}
${({ value }) =>
value &&
`
font-weight: 500;
&:after {
content: '\f00c';
position: absolute;
top: 1px;
left: 17px;
font-size: 10px;
font-family: 'FontAwesome';
font-weight: 100;
color: #1c5de7;
transition: all 0.2s;
}
`}
`;
export { Div, Label };

View File

@ -1,47 +0,0 @@
/**
*
* InputCheckbox
*/
// TODO delete this file
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Div, Label } from './components';
function InputCheckbox({ name, onChange, value }) {
return (
<Div
className="col-12"
onClick={e => {
e.stopPropagation();
}}
>
<div className="form-check">
<Label className="form-check-label" htmlFor={name} value={value}>
<input
className="form-check-input"
defaultChecked={value}
id={name}
name={name}
onChange={onChange}
type="checkbox"
/>
{name}
</Label>
</div>
</Div>
);
}
InputCheckbox.defaultProps = {
onChange: () => {},
value: false,
};
InputCheckbox.propTypes = {
name: PropTypes.string.isRequired,
onChange: PropTypes.func,
value: PropTypes.bool,
};
export default memo(InputCheckbox);

View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
const Wrapper = styled.li`
padding: 0 14px;
padding: 0 16px;
height: 36px;
display: flex;
flex-direction: column;

View File

@ -4,8 +4,6 @@ import Field from '../Field';
import Wrapper from './Wrapper';
const Fields = ({ displayedHeaders, items, onChange }) => {
console.log({ displayedHeaders, items });
const getInputValue = useCallback(
headerName => displayedHeaders.findIndex(({ name }) => name === headerName) !== -1,
[displayedHeaders]

View File

@ -4,13 +4,6 @@ const Wrapper = styled.div`
display: flex;
margin-bottom: 6px;
justify-content: flex-end;
/* TODO: temporary until update in buffet.js */
> div {
> div {
left: auto;
right: 0 !important;
}
}
`;
export default Wrapper;

View File

@ -12,6 +12,7 @@ const FieldPicker = ({ displayedHeaders, items, onChange, onClickReset, slug })
return (
<Wrapper>
<Picker
position="right"
renderButtonContent={isOpen => (
<Flex>
<div>

View File

@ -24,7 +24,6 @@ import {
getRequestUrl,
getTrad,
} from '../../utils';
// import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
import Container from '../../components/Container';
import CustomTable from '../../components/CustomTable';
import FilterPicker from '../../components/FilterPicker';

View File

@ -1060,6 +1060,30 @@
react-with-direction "^1.3.1"
reactstrap "^8.5.1"
"@buffetjs/core@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.3.2-next.1.tgz#ec1e6ce9d90ec9ecf0d0c7279adcec76ee1dfe07"
integrity sha512-qZ2lx0ihopa60a95ikpQaKy5OCK04SYQvSmmRDSs319yU/t9S6/UqX7MqiORraY/ghTXrM95OeJawtPuo7LtzQ==
dependencies:
"@buffetjs/hooks" "3.3.2-next.1"
"@buffetjs/icons" "3.3.2-next.1"
"@buffetjs/styles" "3.3.2-next.1"
"@buffetjs/utils" "3.3.2-next.1"
"@fortawesome/fontawesome-svg-core" "^1.2.25"
"@fortawesome/free-regular-svg-icons" "^5.11.2"
"@fortawesome/free-solid-svg-icons" "^5.11.2"
"@fortawesome/react-fontawesome" "^0.1.4"
invariant "^2.2.4"
lodash "4.17.19"
moment "^2.24.0"
prop-types "^15.7.2"
rc-input-number "^4.5.0"
react-dates "^21.5.1"
react-moment-proptypes "^1.7.0"
react-router-dom "^5.2.0"
react-with-direction "^1.3.1"
reactstrap "^8.5.1"
"@buffetjs/custom@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.1-next.2.tgz#9c8291ee24222e305c16824d14d78a36e68e38a6"
@ -1073,11 +1097,29 @@
prop-types "^15.5.10"
react-moment-proptypes "^1.7.0"
"@buffetjs/custom@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.2-next.1.tgz#f2484826323dcc63717ea993c9975a6a3519d6e1"
integrity sha512-osBfXQSjq3LLuVP6EfcnB5pa4DofpOKSraxDOPY0qdVH4DaGTiQpfZ9fhWl3yPe8gBx6qi/zAmHO7Ucl3e9T/Q==
dependencies:
"@buffetjs/core" "3.3.2-next.1"
"@buffetjs/styles" "3.3.2-next.1"
"@buffetjs/utils" "3.3.2-next.1"
lodash "4.17.19"
moment "^2.24.0"
prop-types "^15.5.10"
react-moment-proptypes "^1.7.0"
"@buffetjs/hooks@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.1-next.2.tgz#32db4c2d4c61ed2de3a01569a6cb204d67ef2766"
integrity sha512-C5vNPTmDlriJwXARYuR9UuvCMq9/2f7y9kNzKmDLeCjEtpmvVP6gzvwQnmG+SjvN7eyDyFKOx0HBAu+dj7dfbg==
"@buffetjs/hooks@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.2-next.1.tgz#d1ab0ac653b8ad026c082b76da42a5368e93e80b"
integrity sha512-B69PTWiqfyYup8UTHPy1THc0KwSUyujewwKZFhXNfbKYj4KiBQ5P1aXrPvYp81cG17Eu5uyGywBjxDaPrskP9Q==
"@buffetjs/icons@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.1-next.2.tgz#f7d0c51a7463db8571b70ba96121944866fa3137"
@ -1085,6 +1127,13 @@
dependencies:
prop-types "^15.5.10"
"@buffetjs/icons@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.2-next.1.tgz#b8efce9a4dfb90a816df2a3633d0158b930d2fe1"
integrity sha512-h3GdAmK9zpbj0e97tosYVTMyShvlaVDKMfzhzeDf+lG3E63LneAuNmY0gAF3r9nraOTN4MaVNykVcIz443+KXw==
dependencies:
prop-types "^15.5.10"
"@buffetjs/styles@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.1-next.2.tgz#7165ae1f2f2c66d56b3fbc228e4a5517a974e878"
@ -1098,6 +1147,19 @@
prop-types "^15.7.2"
react-dates "^21.1.0"
"@buffetjs/styles@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.2-next.1.tgz#c3461f62a5df610d17fd68bdb9487c15f3a4c607"
integrity sha512-6BT/0AiV41otyIWN4gdYnYZeMmVwiLhKXJgl863IoE0JXGJoUV1fBurT57v0JqiOfi4hxcM+gygh423p0hcdDw==
dependencies:
"@fortawesome/fontawesome-free" "^5.12.0"
"@fortawesome/fontawesome-svg-core" "^1.2.22"
"@fortawesome/free-regular-svg-icons" "^5.10.2"
"@fortawesome/free-solid-svg-icons" "^5.10.2"
"@fortawesome/react-fontawesome" "^0.1.4"
prop-types "^15.7.2"
react-dates "^21.1.0"
"@buffetjs/utils@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.1-next.2.tgz#da72b8d4e47df60b5debc5e066380745d5908ff0"
@ -1106,6 +1168,14 @@
lodash "4.17.19"
yup "^0.27.0"
"@buffetjs/utils@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.2-next.1.tgz#67ca29993ef0b68ea65bec7a9c11f8a9c9b49137"
integrity sha512-D6JvC5j7nWFCeIHLH7hbZmiVXgALai/wvlOXFXNL6/QhGBd4703lSIV9hY16cV9vWbIgi5zXyaPwYWvnHceiAw==
dependencies:
lodash "4.17.19"
yup "^0.27.0"
"@casl/ability@^4.1.5":
version "4.1.6"
resolved "https://registry.yarnpkg.com/@casl/ability/-/ability-4.1.6.tgz#89f263903adfc9316cedff329ad615564662448a"