mirror of
https://github.com/strapi/strapi.git
synced 2025-11-10 07:10:11 +00:00
Remove old components
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette
parent
42534d3007
commit
e0aa76e435
@ -1,33 +0,0 @@
|
|||||||
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.
|
|
||||||
|
|
||||||
const BaselineAlignment = styled.div`
|
|
||||||
padding-top: ${({ size, top }) => top && size};
|
|
||||||
padding-right: ${({ size, right }) => right && size};
|
|
||||||
padding-bottom: ${({ size, bottom }) => bottom && size};
|
|
||||||
padding-left: ${({ size, left }) => left && size};
|
|
||||||
`;
|
|
||||||
|
|
||||||
BaselineAlignment.defaultProps = {
|
|
||||||
bottom: false,
|
|
||||||
left: false,
|
|
||||||
right: false,
|
|
||||||
size: '0',
|
|
||||||
top: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
BaselineAlignment.propTypes = {
|
|
||||||
bottom: PropTypes.bool,
|
|
||||||
left: PropTypes.bool,
|
|
||||||
right: PropTypes.bool,
|
|
||||||
size: PropTypes.string,
|
|
||||||
top: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BaselineAlignment;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const Bloc = styled.div`
|
|
||||||
background: ${({ theme }) => theme.main.colors.white};
|
|
||||||
border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
|
|
||||||
box-shadow: 0 2px 4px #e3e9f3;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default Bloc;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
import { Container } from 'reactstrap';
|
|
||||||
|
|
||||||
const ContainerFluid = styled(Container)`
|
|
||||||
padding: ${({ padding }) => padding};
|
|
||||||
`;
|
|
||||||
|
|
||||||
ContainerFluid.defaultProps = {
|
|
||||||
fluid: true,
|
|
||||||
padding: '18px 30px 60px 30px !important',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContainerFluid;
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Flex, Padded, Text } from '@buffetjs/core';
|
|
||||||
import { BaselineAlignment, LoadingIndicator, Row } from '@strapi/helper-plugin';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Bloc from '../Bloc';
|
|
||||||
|
|
||||||
const FormBloc = ({ children, actions, isLoading, title, subtitle }) => (
|
|
||||||
<Bloc>
|
|
||||||
<BaselineAlignment top size={title ? '18px' : '22px'} />
|
|
||||||
<Padded left right size="sm">
|
|
||||||
{isLoading ? (
|
|
||||||
<>
|
|
||||||
<LoadingIndicator />
|
|
||||||
<BaselineAlignment bottom size="22px" />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{title && (
|
|
||||||
<>
|
|
||||||
<Padded left right size="xs">
|
|
||||||
<Flex justifyContent="space-between">
|
|
||||||
<Padded left right size="sm">
|
|
||||||
<Text fontSize="lg" fontWeight="bold">
|
|
||||||
{title}
|
|
||||||
</Text>
|
|
||||||
{subtitle && (
|
|
||||||
<Text color="grey" lineHeight="1.8rem">
|
|
||||||
{subtitle}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Padded>
|
|
||||||
{actions}
|
|
||||||
</Flex>
|
|
||||||
</Padded>
|
|
||||||
<BaselineAlignment top size="18px" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Row>{children}</Row>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Padded>
|
|
||||||
</Bloc>
|
|
||||||
);
|
|
||||||
|
|
||||||
FormBloc.defaultProps = {
|
|
||||||
actions: null,
|
|
||||||
isLoading: false,
|
|
||||||
subtitle: null,
|
|
||||||
title: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
FormBloc.propTypes = {
|
|
||||||
actions: PropTypes.any,
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
isLoading: PropTypes.bool,
|
|
||||||
subtitle: PropTypes.string,
|
|
||||||
title: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FormBloc;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
import { Button as Base } from '@buffetjs/core';
|
|
||||||
|
|
||||||
const Button = styled(Base)`
|
|
||||||
width: 100%;
|
|
||||||
text-transform: ${({ textTransform }) => textTransform};
|
|
||||||
`;
|
|
||||||
|
|
||||||
Button.defaultProps = {
|
|
||||||
color: 'primary',
|
|
||||||
type: 'button',
|
|
||||||
textTransform: 'none',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Button;
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* Header
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const Header = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: ${props => props.theme.main.sizes.header.height};
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1040;
|
|
||||||
left: ${props => props.theme.main.sizes.leftMenu.width};
|
|
||||||
|
|
||||||
box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
|
|
||||||
background-color: ${props => props.theme.main.colors.white};
|
|
||||||
|
|
||||||
line-height: ${props => props.theme.main.sizes.header.height};
|
|
||||||
`;
|
|
||||||
|
|
||||||
Header.defaultProps = {
|
|
||||||
theme: {
|
|
||||||
main: {
|
|
||||||
colors: {},
|
|
||||||
sizes: {
|
|
||||||
header: {},
|
|
||||||
leftMenu: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
Header.propTypes = {
|
|
||||||
theme: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
import { HeaderSearch as Base } from '@strapi/helper-plugin';
|
|
||||||
|
|
||||||
const HeaderSearch = styled(Base)`
|
|
||||||
left: 32rem;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default HeaderSearch;
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import upperFirst from 'lodash/upperFirst';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { useQuery } from '@strapi/helper-plugin';
|
|
||||||
import StyledHeaderSearch from './HeaderSearch';
|
|
||||||
|
|
||||||
const HeaderSearch = ({ label, queryParameter }) => {
|
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const query = useQuery();
|
|
||||||
const searchValue = query.get(queryParameter) || '';
|
|
||||||
const [value, setValue] = useState(searchValue);
|
|
||||||
const { push } = useHistory();
|
|
||||||
const displayedLabel =
|
|
||||||
typeof label === 'object'
|
|
||||||
? formatMessage({ ...label, defaultMessage: label.defaultMessage || label.id })
|
|
||||||
: label;
|
|
||||||
const capitalizedLabel = upperFirst(displayedLabel);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (searchValue === '') {
|
|
||||||
// Synchronise the search
|
|
||||||
handleClear();
|
|
||||||
}
|
|
||||||
}, [searchValue]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handler = setTimeout(() => {
|
|
||||||
let currentSearch = query;
|
|
||||||
|
|
||||||
if (value) {
|
|
||||||
// Create a new search in order to remove the filters
|
|
||||||
currentSearch = new URLSearchParams('');
|
|
||||||
|
|
||||||
// Keep the previous params sort, pageSize, page
|
|
||||||
const pageSize = query.get('pageSize');
|
|
||||||
const page = query.get('page');
|
|
||||||
const sort = query.get('sort');
|
|
||||||
|
|
||||||
if (page) {
|
|
||||||
currentSearch.set('page', page);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pageSize) {
|
|
||||||
currentSearch.set('pageSize', pageSize);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sort) {
|
|
||||||
currentSearch.set('sort', sort);
|
|
||||||
}
|
|
||||||
|
|
||||||
currentSearch.set(queryParameter, encodeURIComponent(value));
|
|
||||||
} else {
|
|
||||||
currentSearch.delete(queryParameter);
|
|
||||||
}
|
|
||||||
|
|
||||||
push({ search: currentSearch.toString() });
|
|
||||||
}, 300);
|
|
||||||
|
|
||||||
return () => clearTimeout(handler);
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [value]);
|
|
||||||
|
|
||||||
const handleChange = ({ target: { value } }) => {
|
|
||||||
setValue(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClear = () => {
|
|
||||||
setValue('');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledHeaderSearch
|
|
||||||
label={capitalizedLabel}
|
|
||||||
name={queryParameter}
|
|
||||||
value={value}
|
|
||||||
onChange={handleChange}
|
|
||||||
onClear={handleClear}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
HeaderSearch.defaultProps = {
|
|
||||||
queryParameter: '_q',
|
|
||||||
};
|
|
||||||
|
|
||||||
HeaderSearch.propTypes = {
|
|
||||||
label: PropTypes.oneOfType([
|
|
||||||
PropTypes.string,
|
|
||||||
PropTypes.shape({
|
|
||||||
id: PropTypes.string.isRequired,
|
|
||||||
defaultMessage: PropTypes.string,
|
|
||||||
}),
|
|
||||||
]).isRequired,
|
|
||||||
queryParameter: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HeaderSearch;
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
import React, { useMemo } from 'react';
|
|
||||||
import { translatedErrors } from '@strapi/helper-plugin';
|
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Inputs } from '@buffetjs/custom';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const IntlInput = ({ label: labelId, defaultMessage, error, ...rest }) => {
|
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const label = formatMessage({ id: labelId, defaultMessage: defaultMessage || labelId });
|
|
||||||
const translatedError = error ? formatMessage(error) : null;
|
|
||||||
const formattedErrors = useMemo(() => {
|
|
||||||
return Object.keys(translatedErrors).reduce((acc, current) => {
|
|
||||||
acc[current] = formatMessage({ id: translatedErrors[current] });
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Inputs {...rest} label={label} error={translatedError} translatedErrors={formattedErrors} />
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
IntlInput.defaultProps = {
|
|
||||||
defaultMessage: null,
|
|
||||||
error: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
IntlInput.propTypes = {
|
|
||||||
defaultMessage: PropTypes.string,
|
|
||||||
error: PropTypes.shape({
|
|
||||||
id: PropTypes.string,
|
|
||||||
}),
|
|
||||||
label: PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default IntlInput;
|
|
||||||
@ -1,147 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
height: 6rem;
|
|
||||||
line-height: 5.8rem;
|
|
||||||
z-index: 999;
|
|
||||||
> button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 30px;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #333740;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: right;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s ease-out;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: #333740;
|
|
||||||
background-color: #fafafb !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> i,
|
|
||||||
> svg {
|
|
||||||
margin-left: 10px;
|
|
||||||
transition: transform 0.3s ease-out;
|
|
||||||
|
|
||||||
&[alt='true'] {
|
|
||||||
transform: rotateX(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.localeDropdownContent {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
span {
|
|
||||||
color: #333740;
|
|
||||||
font-size: 13px;
|
|
||||||
font-family: Lato;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.5;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.localeDropdownMenu {
|
|
||||||
min-width: 90px !important;
|
|
||||||
max-height: 162px !important;
|
|
||||||
overflow: auto !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1.8rem;
|
|
||||||
border: none !important;
|
|
||||||
border-top-left-radius: 0 !important;
|
|
||||||
border-top-right-radius: 0 !important;
|
|
||||||
box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -3px;
|
|
||||||
left: -1px;
|
|
||||||
width: calc(100% + 1px);
|
|
||||||
height: 3px;
|
|
||||||
box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
|
|
||||||
}
|
|
||||||
|
|
||||||
> button {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0px 15px;
|
|
||||||
line-height: 40px;
|
|
||||||
color: #f75b1d;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.5;
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: #fafafb !important;
|
|
||||||
border-radius: 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> button:first-child {
|
|
||||||
line-height: 50px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
color: #333740;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> button:not(:first-child) {
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
> i,
|
|
||||||
> svg {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.localeDropdownMenuNotLogged {
|
|
||||||
background: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: 1px solid #e3e9f3 !important;
|
|
||||||
border-top: 0px !important;
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding-left: 17px;
|
|
||||||
&:hover {
|
|
||||||
background-color: #f7f8f8 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.localeToggleItem {
|
|
||||||
img {
|
|
||||||
max-height: 13.37px;
|
|
||||||
margin-left: 9px;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: #fafafb !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.localeToggleItemActive {
|
|
||||||
color: #333740 !important;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default Wrapper;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const NavTopRightWrapper = styled.div`
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
z-index: 1050;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default NavTopRightWrapper;
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
import React, { useMemo } from 'react';
|
|
||||||
import { Header as PluginHeader } from '@buffetjs/custom';
|
|
||||||
import { isEqual } from 'lodash';
|
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const Header = ({
|
|
||||||
content,
|
|
||||||
initialData,
|
|
||||||
isLoading,
|
|
||||||
label,
|
|
||||||
modifiedData,
|
|
||||||
onCancel,
|
|
||||||
showHeaderButtonLoader,
|
|
||||||
}) => {
|
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const areButtonsDisabled = useMemo(() => {
|
|
||||||
return isEqual(modifiedData, initialData);
|
|
||||||
}, [initialData, modifiedData]);
|
|
||||||
|
|
||||||
/* eslint-disable indent */
|
|
||||||
const headerProps = {
|
|
||||||
actions: isLoading
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
{
|
|
||||||
onClick: onCancel,
|
|
||||||
disabled: areButtonsDisabled,
|
|
||||||
color: 'cancel',
|
|
||||||
label: formatMessage({
|
|
||||||
id: 'app.components.Button.reset',
|
|
||||||
}),
|
|
||||||
type: 'button',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
disabled: areButtonsDisabled,
|
|
||||||
color: 'success',
|
|
||||||
label: formatMessage({
|
|
||||||
id: 'app.components.Button.save',
|
|
||||||
}),
|
|
||||||
type: 'submit',
|
|
||||||
isLoading: showHeaderButtonLoader,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: {
|
|
||||||
label,
|
|
||||||
},
|
|
||||||
content,
|
|
||||||
};
|
|
||||||
/* eslint-enable indent */
|
|
||||||
|
|
||||||
return <PluginHeader {...headerProps} isLoading={isLoading} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
Header.defaultProps = {
|
|
||||||
content: null,
|
|
||||||
label: '',
|
|
||||||
showHeaderButtonLoader: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
Header.propTypes = {
|
|
||||||
content: PropTypes.string,
|
|
||||||
initialData: PropTypes.object.isRequired,
|
|
||||||
isLoading: PropTypes.bool.isRequired,
|
|
||||||
label: PropTypes.string,
|
|
||||||
modifiedData: PropTypes.object.isRequired,
|
|
||||||
onCancel: PropTypes.func.isRequired,
|
|
||||||
showHeaderButtonLoader: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
/* eslint-disable import/prefer-default-export */
|
|
||||||
export { default as Header } from './Header';
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import SettingsHeaderSearchContext from '../../contexts/SettingsHeaderSearchContext';
|
|
||||||
|
|
||||||
const SettingsHeaderSearchContextProvider = ({ children, ...rest }) => {
|
|
||||||
return (
|
|
||||||
<SettingsHeaderSearchContext.Provider value={rest.value}>
|
|
||||||
{children}
|
|
||||||
</SettingsHeaderSearchContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SettingsHeaderSearchContextProvider.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SettingsHeaderSearchContextProvider;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Col } from 'reactstrap';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import IntlInput from '../IntlInput';
|
|
||||||
|
|
||||||
// TODO: remove this component
|
|
||||||
const SizedInput = ({ size, ...rest }) => {
|
|
||||||
return (
|
|
||||||
<Col {...size}>
|
|
||||||
<IntlInput {...rest} />
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SizedInput.defaultProps = {
|
|
||||||
size: {
|
|
||||||
xs: '6',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
SizedInput.propTypes = {
|
|
||||||
size: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SizedInput;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { createContext } from 'react';
|
|
||||||
|
|
||||||
const SettingsHeaderSearchContext = createContext({});
|
|
||||||
|
|
||||||
export default SettingsHeaderSearchContext;
|
|
||||||
@ -5,7 +5,6 @@ export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFrom
|
|||||||
export { default as useFetchRole } from './useFetchRole';
|
export { default as useFetchRole } from './useFetchRole';
|
||||||
export { default as useMenu } from './useMenu';
|
export { default as useMenu } from './useMenu';
|
||||||
export { default as useRolesList } from './useRolesList';
|
export { default as useRolesList } from './useRolesList';
|
||||||
export { default as useSettingsHeaderSearchContext } from './useSettingsHeaderSearchContext';
|
|
||||||
export { default as useSettingsMenu } from './useSettingsMenu';
|
export { default as useSettingsMenu } from './useSettingsMenu';
|
||||||
export { default as useSettingsForm } from './useSettingsForm';
|
export { default as useSettingsForm } from './useSettingsForm';
|
||||||
export { default as usePermissionsDataManager } from './usePermissionsDataManager';
|
export { default as usePermissionsDataManager } from './usePermissionsDataManager';
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import SettingsHeaderSearchContext from '../../contexts/SettingsHeaderSearchContext';
|
|
||||||
|
|
||||||
const useSettingsHeaderSearchContext = () => useContext(SettingsHeaderSearchContext);
|
|
||||||
|
|
||||||
export default useSettingsHeaderSearchContext;
|
|
||||||
@ -28,9 +28,9 @@ const MarketplacePage = lazy(() =>
|
|||||||
);
|
);
|
||||||
const NotFoundPage = lazy(() => import('../NotFoundPage'));
|
const NotFoundPage = lazy(() => import('../NotFoundPage'));
|
||||||
|
|
||||||
// const ProfilePage = lazy(() =>
|
const ProfilePage = lazy(() =>
|
||||||
// import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
|
import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
|
||||||
// );
|
);
|
||||||
const SettingsPage = lazy(() =>
|
const SettingsPage = lazy(() =>
|
||||||
import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
|
import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
|
||||||
);
|
);
|
||||||
@ -84,8 +84,9 @@ const Admin = () => {
|
|||||||
<Suspense fallback={<LoadingIndicatorPage />}>
|
<Suspense fallback={<LoadingIndicatorPage />}>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/" component={HomePage} exact />
|
<Route path="/" component={HomePage} exact />
|
||||||
|
<Route path="/me" component={ProfilePage} exact />
|
||||||
{/* TODO */}
|
{/* TODO */}
|
||||||
{/* <Route path="/me" component={ProfilePage} exact />
|
{/* <
|
||||||
<Route path="/content-manager" component={CM} />
|
<Route path="/content-manager" component={CM} />
|
||||||
|
|
||||||
<Route path="/plugins/content-type-builder" component={CTB} />
|
<Route path="/plugins/content-type-builder" component={CTB} />
|
||||||
|
|||||||
@ -1,10 +1,5 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import ContainerFluid from '../../components/ContainerFluid';
|
|
||||||
|
|
||||||
const Wrapper = styled(ContainerFluid)`
|
const Wrapper = styled.div``;
|
||||||
> div:first-child {
|
|
||||||
margin-bottom: 11px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default Wrapper;
|
export default Wrapper;
|
||||||
|
|||||||
@ -1,159 +1,160 @@
|
|||||||
import React, { useMemo } from 'react';
|
// import React, { useMemo } from 'react';
|
||||||
import { BaselineAlignment, auth, Select, Option } from '@strapi/helper-plugin';
|
// import { BaselineAlignment, auth, Select, Option } from '@strapi/helper-plugin';
|
||||||
import { Padded, Text } from '@buffetjs/core';
|
// import { Padded, Text } from '@buffetjs/core';
|
||||||
import { Col } from 'reactstrap';
|
// import { Col } from 'reactstrap';
|
||||||
import { get } from 'lodash';
|
// import { get } from 'lodash';
|
||||||
import { useIntl } from 'react-intl';
|
// import { useIntl } from 'react-intl';
|
||||||
import ContainerFluid from '../../components/ContainerFluid';
|
// import ContainerFluid from '../../components/ContainerFluid';
|
||||||
import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
|
// import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
|
||||||
import PageTitle from '../../components/PageTitle';
|
// import PageTitle from '../../components/PageTitle';
|
||||||
import SizedInput from '../../components/SizedInput';
|
// import SizedInput from '../../components/SizedInput';
|
||||||
import { Header } from '../../components/Settings';
|
// import FormBloc from '../../components/FormBloc';
|
||||||
import FormBloc from '../../components/FormBloc';
|
// import { useSettingsForm } from '../../hooks';
|
||||||
import { useSettingsForm } from '../../hooks';
|
// import ProfilePageLabel from './components';
|
||||||
import ProfilePageLabel from './components';
|
// import { form, schema } from './utils';
|
||||||
import { form, schema } from './utils';
|
|
||||||
|
|
||||||
const ProfilePage = () => {
|
// const ProfilePage = () => {
|
||||||
const { changeLocale, localeNames } = useLocalesProvider();
|
// const { changeLocale, localeNames } = useLocalesProvider();
|
||||||
const { formatMessage } = useIntl();
|
// const { formatMessage } = useIntl();
|
||||||
|
|
||||||
const onSubmitSuccessCb = data => {
|
// const onSubmitSuccessCb = data => {
|
||||||
changeLocale(data.preferedLanguage);
|
// changeLocale(data.preferedLanguage);
|
||||||
auth.setUserInfo(data);
|
// auth.setUserInfo(data);
|
||||||
};
|
// };
|
||||||
|
|
||||||
const [
|
// const [
|
||||||
{ formErrors, initialData, isLoading, modifiedData, showHeaderLoader, showHeaderButtonLoader },
|
// { formErrors, initialData, isLoading, modifiedData, showHeaderLoader, showHeaderButtonLoader },
|
||||||
// eslint-disable-next-line no-unused-vars
|
// // eslint-disable-next-line no-unused-vars
|
||||||
_,
|
// _,
|
||||||
{ handleCancel, handleChange, handleSubmit, setField },
|
// { handleCancel, handleChange, handleSubmit, setField },
|
||||||
] = useSettingsForm('/admin/users/me', schema, onSubmitSuccessCb, [
|
// ] = useSettingsForm('/admin/users/me', schema, onSubmitSuccessCb, [
|
||||||
'email',
|
// 'email',
|
||||||
'firstname',
|
// 'firstname',
|
||||||
'lastname',
|
// 'lastname',
|
||||||
'username',
|
// 'username',
|
||||||
'preferedLanguage',
|
// 'preferedLanguage',
|
||||||
]);
|
// ]);
|
||||||
|
|
||||||
const headerLabel = useMemo(() => {
|
// const headerLabel = useMemo(() => {
|
||||||
const userInfos = auth.getUserInfo();
|
// const userInfos = auth.getUserInfo();
|
||||||
|
|
||||||
if (modifiedData) {
|
// if (modifiedData) {
|
||||||
return modifiedData.username || `${modifiedData.firstname} ${modifiedData.lastname}`;
|
// return modifiedData.username || `${modifiedData.firstname} ${modifiedData.lastname}`;
|
||||||
}
|
// }
|
||||||
|
|
||||||
return userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
|
// return userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
|
||||||
}, [modifiedData]);
|
// }, [modifiedData]);
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<>
|
// <>
|
||||||
<PageTitle title="User profile" />
|
// <PageTitle title="User profile" />
|
||||||
<form onSubmit={handleSubmit}>
|
// <form onSubmit={handleSubmit}>
|
||||||
<ContainerFluid padding="18px 30px 0 30px">
|
// <ContainerFluid padding="18px 30px 0 30px">
|
||||||
<Header
|
// <Header
|
||||||
isLoading={showHeaderLoader}
|
// isLoading={showHeaderLoader}
|
||||||
initialData={initialData}
|
// initialData={initialData}
|
||||||
label={headerLabel}
|
// label={headerLabel}
|
||||||
modifiedData={modifiedData}
|
// modifiedData={modifiedData}
|
||||||
onCancel={handleCancel}
|
// onCancel={handleCancel}
|
||||||
showHeaderButtonLoader={showHeaderButtonLoader}
|
// showHeaderButtonLoader={showHeaderButtonLoader}
|
||||||
/>
|
// />
|
||||||
<BaselineAlignment top size="3px" />
|
// <BaselineAlignment top size="3px" />
|
||||||
{/* Experience block */}
|
// {/* Experience block */}
|
||||||
<FormBloc
|
// <FormBloc
|
||||||
isLoading={isLoading}
|
// isLoading={isLoading}
|
||||||
title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
|
// title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
|
||||||
>
|
// >
|
||||||
{Object.keys(form).map(key => (
|
// {Object.keys(form).map(key => (
|
||||||
<SizedInput
|
// <SizedInput
|
||||||
{...form[key]}
|
// {...form[key]}
|
||||||
key={key}
|
// key={key}
|
||||||
error={formErrors[key]}
|
// error={formErrors[key]}
|
||||||
name={key}
|
// name={key}
|
||||||
onChange={handleChange}
|
// onChange={handleChange}
|
||||||
value={get(modifiedData, key, '')}
|
// value={get(modifiedData, key, '')}
|
||||||
/>
|
// />
|
||||||
))}
|
// ))}
|
||||||
</FormBloc>
|
// </FormBloc>
|
||||||
<BaselineAlignment top size="2px" />
|
// <BaselineAlignment top size="2px" />
|
||||||
|
|
||||||
{/* Password block */}
|
// {/* Password block */}
|
||||||
{!isLoading && (
|
// {!isLoading && (
|
||||||
<>
|
// <>
|
||||||
<Padded top size="md">
|
// <Padded top size="md">
|
||||||
<FormBloc
|
// <FormBloc
|
||||||
title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
|
// title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
|
||||||
>
|
// >
|
||||||
<SizedInput
|
// <SizedInput
|
||||||
label="Auth.form.password.label"
|
// label="Auth.form.password.label"
|
||||||
type="password"
|
// type="password"
|
||||||
autoComplete="new-password"
|
// autoComplete="new-password"
|
||||||
validations={{}}
|
// validations={{}}
|
||||||
error={formErrors.password}
|
// error={formErrors.password}
|
||||||
name="password"
|
// name="password"
|
||||||
onChange={handleChange}
|
// onChange={handleChange}
|
||||||
value={get(modifiedData, 'password', '')}
|
// value={get(modifiedData, 'password', '')}
|
||||||
/>
|
// />
|
||||||
|
|
||||||
<SizedInput
|
// <SizedInput
|
||||||
label="Auth.form.confirmPassword.label"
|
// label="Auth.form.confirmPassword.label"
|
||||||
type="password"
|
// type="password"
|
||||||
validations={{}}
|
// validations={{}}
|
||||||
error={formErrors.confirmPassword}
|
// error={formErrors.confirmPassword}
|
||||||
name="confirmPassword"
|
// name="confirmPassword"
|
||||||
onChange={handleChange}
|
// onChange={handleChange}
|
||||||
value={get(modifiedData, 'confirmPassword', '')}
|
// value={get(modifiedData, 'confirmPassword', '')}
|
||||||
/>
|
// />
|
||||||
</FormBloc>
|
// </FormBloc>
|
||||||
</Padded>
|
// </Padded>
|
||||||
|
|
||||||
<BaselineAlignment top size="13px" />
|
// <BaselineAlignment top size="13px" />
|
||||||
|
|
||||||
{/* Interface block */}
|
// {/* Interface block */}
|
||||||
<Padded top size="smd">
|
// <Padded top size="smd">
|
||||||
<FormBloc
|
// <FormBloc
|
||||||
title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
|
// title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
|
||||||
>
|
// >
|
||||||
<ProfilePageLabel htmlFor="">
|
// <ProfilePageLabel htmlFor="">
|
||||||
{formatMessage({
|
// {formatMessage({
|
||||||
id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
// id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||||
})}
|
// })}
|
||||||
</ProfilePageLabel>
|
// </ProfilePageLabel>
|
||||||
<Col xs="6">
|
// <Col xs="6">
|
||||||
<Select
|
// <Select
|
||||||
aria-labelledby="interface-language"
|
// aria-labelledby="interface-language"
|
||||||
selectedValue={get(modifiedData, 'preferedLanguage')}
|
// selectedValue={get(modifiedData, 'preferedLanguage')}
|
||||||
onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
|
// onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
|
||||||
>
|
// >
|
||||||
{Object.keys(localeNames).map(language => {
|
// {Object.keys(localeNames).map(language => {
|
||||||
const langName = localeNames[language];
|
// const langName = localeNames[language];
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<Option value={language} key={language}>
|
// <Option value={language} key={language}>
|
||||||
{langName}
|
// {langName}
|
||||||
</Option>
|
// </Option>
|
||||||
);
|
// );
|
||||||
})}
|
// })}
|
||||||
</Select>
|
// </Select>
|
||||||
|
|
||||||
<Padded size="sm" top bottom>
|
// <Padded size="sm" top bottom>
|
||||||
<Text color="grey">
|
// <Text color="grey">
|
||||||
{formatMessage({
|
// {formatMessage({
|
||||||
id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
// id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||||
})}
|
// })}
|
||||||
</Text>
|
// </Text>
|
||||||
</Padded>
|
// </Padded>
|
||||||
</Col>
|
// </Col>
|
||||||
</FormBloc>
|
// </FormBloc>
|
||||||
</Padded>
|
// </Padded>
|
||||||
</>
|
// </>
|
||||||
)}
|
// )}
|
||||||
</ContainerFluid>
|
// </ContainerFluid>
|
||||||
</form>
|
// </form>
|
||||||
<BaselineAlignment bottom size="80px" />
|
// <BaselineAlignment bottom size="80px" />
|
||||||
</>
|
// </>
|
||||||
);
|
// );
|
||||||
};
|
// };
|
||||||
|
|
||||||
export default ProfilePage;
|
// export default ProfilePage;
|
||||||
|
|
||||||
|
export default () => 'TODO profile page';
|
||||||
|
|||||||
@ -9,14 +9,12 @@
|
|||||||
// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
|
// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
|
||||||
// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
|
// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
|
||||||
|
|
||||||
import React, { memo, useMemo, useState } from 'react';
|
import React, { memo, useMemo } from 'react';
|
||||||
import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
|
import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
|
||||||
import { Switch, Redirect, Route, useParams } from 'react-router-dom';
|
import { Switch, Redirect, Route, useParams } from 'react-router-dom';
|
||||||
import { Layout } from '@strapi/parts/Layout';
|
import { Layout } from '@strapi/parts/Layout';
|
||||||
import { useIntl } from 'react-intl';
|
import { useIntl } from 'react-intl';
|
||||||
import HeaderSearch from '../../components/HeaderSearch';
|
|
||||||
import PageTitle from '../../components/PageTitle';
|
import PageTitle from '../../components/PageTitle';
|
||||||
import SettingsSearchHeaderProvider from '../../components/SettingsHeaderSearchContextProvider';
|
|
||||||
import { useSettingsMenu } from '../../hooks';
|
import { useSettingsMenu } from '../../hooks';
|
||||||
import { createRoute, makeUniqueRoutes } from '../../utils';
|
import { createRoute, makeUniqueRoutes } from '../../utils';
|
||||||
import ApplicationInfosPage from '../ApplicationInfosPage';
|
import ApplicationInfosPage from '../ApplicationInfosPage';
|
||||||
@ -27,9 +25,6 @@ function SettingsPage() {
|
|||||||
const { settingId } = useParams();
|
const { settingId } = useParams();
|
||||||
const { settings } = useStrapiApp();
|
const { settings } = useStrapiApp();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
// TODO
|
|
||||||
const [headerSearchState, setShowHeaderSearchState] = useState({ show: false, label: '' });
|
|
||||||
|
|
||||||
const { isLoading, menu } = useSettingsMenu();
|
const { isLoading, menu } = useSettingsMenu();
|
||||||
|
|
||||||
// Creates the admin routes
|
// Creates the admin routes
|
||||||
@ -41,18 +36,6 @@ function SettingsPage() {
|
|||||||
|
|
||||||
const pluginsRoutes = createSectionsRoutes(settings);
|
const pluginsRoutes = createSectionsRoutes(settings);
|
||||||
|
|
||||||
const toggleHeaderSearch = label =>
|
|
||||||
setShowHeaderSearchState(prev => {
|
|
||||||
if (prev.show) {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
label: '',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return { label, show: true };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Since the useSettingsMenu hook can make API calls in order to check the links permissions
|
// Since the useSettingsMenu hook can make API calls in order to check the links permissions
|
||||||
// We need to add a loading state to prevent redirecting the user while permissions are being checked
|
// We need to add a loading state to prevent redirecting the user while permissions are being checked
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
@ -69,19 +52,15 @@ function SettingsPage() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>
|
<Layout sideNav={<SettingsNav menu={menu} />}>
|
||||||
<Layout sideNav={<SettingsNav menu={menu} />}>
|
<PageTitle title={settingTitle} />
|
||||||
<PageTitle title={settingTitle} />
|
|
||||||
|
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
|
<Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
|
||||||
{adminRoutes}
|
{adminRoutes}
|
||||||
{pluginsRoutes}
|
{pluginsRoutes}
|
||||||
</Switch>
|
</Switch>
|
||||||
|
</Layout>
|
||||||
{headerSearchState.show && <HeaderSearch label={headerSearchState.label} />}
|
|
||||||
</Layout>
|
|
||||||
</SettingsSearchHeaderProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user