gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: convert function expressions to declarations (#4926)

Browse Source
This commit is contained in:
Vladislav Shkodin
2021-02-08 20:01:21 +02:00
committed by GitHub
parent c0236536dd
commit 141a2eba56
241 changed files with 3444 additions and 2933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/netlify-cms-ui-default/src/AuthenticationPage.js
View File

@ -30,20 +30,20 @@ const NetlifyCreditIcon = styled(Icon)`
bottom: 10px;
`;
const CustomLogoIcon = ({ url }) => {
function CustomLogoIcon({ url }) {
return (
<CustomIconWrapper>
<img src={url} alt="Logo" />
</CustomIconWrapper>
);
};
}
const renderPageLogo = logoUrl => {
function renderPageLogo(logoUrl) {
if (logoUrl) {
return <CustomLogoIcon url={logoUrl} />;
}
return <NetlifyLogoIcon size="300px" type="netlify-cms" />;
};
}
const LoginButton = styled.button`
${buttons.button};
@ -61,7 +61,7 @@ const LoginButton = styled.button`
position: relative;
`;
const AuthenticationPage = ({
function AuthenticationPage({
onLogin,
loginDisabled,
loginErrorMessage,
@ -70,7 +70,7 @@ const AuthenticationPage = ({
logoUrl,
siteUrl,
t,
}) => {
}) {
return (
<StyledAuthenticationPage>
{renderPageLogo(logoUrl)}
@ -85,7 +85,7 @@ const AuthenticationPage = ({
{logoUrl ? <NetlifyCreditIcon size="100px" type="netlify-cms" /> : null}
</StyledAuthenticationPage>
);
};
}
AuthenticationPage.propTypes = {
onLogin: PropTypes.func,

98
packages/netlify-cms-ui-default/src/Dropdown.js
View File

@ -48,26 +48,28 @@ const DropdownList = styled.ul`
`};
`;
const StyledMenuItem = ({ isActive, isCheckedItem = false, ...props }) => (
<MenuItem
css={css`
${components.dropdownItem};
&:focus,
&:active,
&:not(:focus),
&:not(:active) {
background-color: ${isActive ? colors.activeBackground : 'inherit'};
color: ${isActive ? colors.active : 'inherit'};
${isCheckedItem ? 'display: flex; justify-content: start' : ''};
}
&:hover {
color: ${colors.active};
background-color: ${colors.activeBackground};
}
`}
{...props}
/>
);
function StyledMenuItem({ isActive, isCheckedItem = false, ...props }) {
return (
<MenuItem
css={css`
${components.dropdownItem};
&:focus,
&:active,
&:not(:focus),
&:not(:active) {
background-color: ${isActive ? colors.activeBackground : 'inherit'};
color: ${isActive ? colors.active : 'inherit'};
${isCheckedItem ? 'display: flex; justify-content: start' : ''};
}
&:hover {
color: ${colors.active};
background-color: ${colors.activeBackground};
}
`}
{...props}
/>
);
}
const MenuItemIconContainer = styled.div`
flex: 1 0 32px;
@ -76,7 +78,7 @@ const MenuItemIconContainer = styled.div`
top: ${props => (props.iconSmall ? '0' : '2px')};
`;
const Dropdown = ({
function Dropdown({
closeOnSelection = true,
renderButton,
dropdownWidth = 'auto',
@ -84,7 +86,7 @@ const Dropdown = ({
dropdownTopOverlap = '0',
className,
children,
}) => {
}) {
return (
<StyledWrapper
closeOnSelection={closeOnSelection}
@ -99,7 +101,7 @@ const Dropdown = ({
</Menu>
</StyledWrapper>
);
};
}
Dropdown.propTypes = {
renderButton: PropTypes.func.isRequired,
@ -110,16 +112,18 @@ Dropdown.propTypes = {
children: PropTypes.node,
};
const DropdownItem = ({ label, icon, iconDirection, iconSmall, isActive, onClick, className }) => (
<StyledMenuItem value={onClick} isActive={isActive} className={className}>
<span>{label}</span>
{icon ? (
<MenuItemIconContainer iconSmall={iconSmall}>
<Icon type={icon} direction={iconDirection} size={iconSmall ? 'xsmall' : 'small'} />
</MenuItemIconContainer>
) : null}
</StyledMenuItem>
);
function DropdownItem({ label, icon, iconDirection, iconSmall, isActive, onClick, className }) {
return (
<StyledMenuItem value={onClick} isActive={isActive} className={className}>
<span>{label}</span>
{icon ? (
<MenuItemIconContainer iconSmall={iconSmall}>
<Icon type={icon} direction={iconDirection} size={iconSmall ? 'xsmall' : 'small'} />
</MenuItemIconContainer>
) : null}
</StyledMenuItem>
);
}
DropdownItem.propTypes = {
label: PropTypes.string,
@ -129,26 +133,28 @@ DropdownItem.propTypes = {
className: PropTypes.string,
};
const StyledDropdownCheckbox = ({ checked, id }) => (
<input
readOnly
type="checkbox"
css={css`
margin-right: 10px;
`}
checked={checked}
id={id}
/>
);
function StyledDropdownCheckbox({ checked, id }) {
return (
<input
readOnly
type="checkbox"
css={css`
margin-right: 10px;
`}
checked={checked}
id={id}
/>
);
}
const DropdownCheckedItem = ({ label, id, checked, onClick }) => {
function DropdownCheckedItem({ label, id, checked, onClick }) {
return (
<StyledMenuItem isCheckedItem={true} isActive={checked} onClick={onClick}>
<StyledDropdownCheckbox checked={checked} id={id} />
<span htmlFor={id}>{label}</span>
</StyledMenuItem>
);
};
}
DropdownCheckedItem.propTypes = {
label: PropTypes.string.isRequired,

4
packages/netlify-cms-ui-default/src/FieldLabel.js
View File

@ -16,11 +16,11 @@ const stateColors = {
},
};
const getStateColors = ({ isActive, hasErrors }) => {
function getStateColors({ isActive, hasErrors }) {
if (hasErrors) return stateColors.error;
if (isActive) return stateColors.active;
return stateColors.default;
};
}
const FieldLabel = styled.label`
${text.fieldLabel};

8
packages/netlify-cms-ui-default/src/Icon.js
View File

@ -35,14 +35,14 @@ const IconWrapper = styled.span`
* Returned value is a string of shape `${degrees}deg`, for use in a CSS
* transform.
*/
const getRotation = (iconDirection, newDirection) => {
function getRotation(iconDirection, newDirection) {
if (!iconDirection || !newDirection) {
return '0deg';
}
const rotations = { right: 90, down: 180, left: 270, up: 360 };
const degrees = rotations[newDirection] - rotations[iconDirection];
return `${degrees}deg`;
};
}
const sizes = {
xsmall: '12px',
@ -51,7 +51,7 @@ const sizes = {
large: '32px',
};
const Icon = ({ type, direction, size = 'medium', className }) => {
function Icon({ type, direction, size = 'medium', className }) {
const IconSvg = icons[type].image;
return (
@ -63,7 +63,7 @@ const Icon = ({ type, direction, size = 'medium', className }) => {
<IconSvg />
</IconWrapper>
);
};
}
Icon.propTypes = {
type: PropTypes.string.isRequired,

24
packages/netlify-cms-ui-default/src/IconButton.js
View File

@ -22,16 +22,18 @@ const ButtonRound = styled.button`
padding: 0;
`;
const IconButton = ({ size, isActive, type, onClick, className, title }) => (
<ButtonRound
size={size}
isActive={isActive}
className={className}
onClick={onClick}
title={title}
>
<Icon type={type} size={size} />
</ButtonRound>
);
function IconButton({ size, isActive, type, onClick, className, title }) {
return (
<ButtonRound
size={size}
isActive={isActive}
className={className}
onClick={onClick}
title={title}
>
<Icon type={type} size={size} />
</ButtonRound>
);
}
export default IconButton;

36
packages/netlify-cms-ui-default/src/ListItemTopBar.js
View File

@ -34,30 +34,32 @@ const DragIconContainer = styled(TopBarButtonSpan)`
cursor: move;
`;
const DragHandle = ({ dragHandleHOC }) => {
function DragHandle({ dragHandleHOC }) {
const Handle = dragHandleHOC(() => (
<DragIconContainer>
<Icon type="drag-handle" size="small" />
</DragIconContainer>
));
return <Handle />;
};
}
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<TopBar className={className}>
{onCollapseToggle ? (
<TopBarButton onClick={onCollapseToggle}>
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
</TopBarButton>
) : null}
{dragHandleHOC ? <DragHandle dragHandleHOC={dragHandleHOC} /> : null}
{onRemove ? (
<TopBarButton onClick={onRemove}>
<Icon type="close" size="small" />
</TopBarButton>
) : null}
</TopBar>
);
function ListItemTopBar({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) {
return (
<TopBar className={className}>
{onCollapseToggle ? (
<TopBarButton onClick={onCollapseToggle}>
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
</TopBarButton>
) : null}
{dragHandleHOC ? <DragHandle dragHandleHOC={dragHandleHOC} /> : null}
{onRemove ? (
<TopBarButton onClick={onRemove}>
<Icon type="close" size="small" />
</TopBarButton>
) : null}
</TopBar>
);
}
ListItemTopBar.propTypes = {
className: PropTypes.string,

44
packages/netlify-cms-ui-default/src/Toggle.js
View File

@ -44,7 +44,7 @@ const ToggleBackground = styled.span`
background-color: ${colors.active};
`;
const Toggle = ({
function Toggle({
id,
active,
onChange,
@ -54,26 +54,28 @@ const Toggle = ({
Container = ToggleContainer,
Background = ToggleBackground,
Handle = ToggleHandle,
}) => (
<ReactToggled on={active} onToggle={onChange}>
{({ on, getTogglerProps }) => (
<Container
id={id}
onFocus={onFocus}
onBlur={onBlur}
className={className}
{...getTogglerProps({
role: 'switch',
'aria-checked': on.toString(),
'aria-expanded': null,
})}
>
<Background isActive={on} />
<Handle isActive={on} />
</Container>
)}
</ReactToggled>
);
}) {
return (
<ReactToggled on={active} onToggle={onChange}>
{({ on, getTogglerProps }) => (
<Container
id={id}
onFocus={onFocus}
onBlur={onBlur}
className={className}
{...getTogglerProps({
role: 'switch',
'aria-checked': on.toString(),
'aria-expanded': null,
})}
>
<Background isActive={on} />
<Handle isActive={on} />
</Container>
)}
</ReactToggled>
);
}
Toggle.propTypes = {
id: PropTypes.string,

148
packages/netlify-cms-ui-default/src/styles.js
View File

@ -414,93 +414,95 @@ const zIndex = {
zIndex99999: 99999,
};
const GlobalStyles = () => (
<Global
styles={css`
*,
*:before,
*:after {
box-sizing: border-box;
}
function GlobalStyles() {
return (
<Global
styles={css`
*,
*:before,
*:after {
box-sizing: border-box;
}
:focus {
outline: -webkit-focus-ring-color auto ${lengths.borderRadius};
}
:focus {
outline: -webkit-focus-ring-color auto ${lengths.borderRadius};
}
/**
/**
* Don't show outlines if the user is utilizing mouse rather than keyboard.
*/
[data-whatintent='mouse'] *:focus {
outline: none;
}
[data-whatintent='mouse'] *:focus {
outline: none;
}
input {
border: 0;
}
input {
border: 0;
}
body {
font-family: ${fonts.primary};
font-weight: normal;
background-color: ${colors.background};
color: ${colors.text};
margin: 0;
}
body {
font-family: ${fonts.primary};
font-weight: normal;
background-color: ${colors.background};
color: ${colors.text};
margin: 0;
}
ul,
ol {
padding-left: 0;
}
ul,
ol {
padding-left: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-family: ${fonts.primary};
color: ${colors.textLead};
font-size: 15px;
line-height: 1.5;
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-family: ${fonts.primary};
color: ${colors.textLead};
font-size: 15px;
line-height: 1.5;
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
h1 {
font-size: 24px;
letter-spacing: 0.4px;
color: ${colors.textLead};
}
h1 {
font-size: 24px;
letter-spacing: 0.4px;
color: ${colors.textLead};
}
a,
button {
font-size: 14px;
font-weight: 500;
}
a,
button {
font-size: 14px;
font-weight: 500;
}
a {
color: ${colors.text};
text-decoration: none;
}
a {
color: ${colors.text};
text-decoration: none;
}
img {
max-width: 100%;
}
img {
max-width: 100%;
}
textarea {
resize: none;
}
`}
/>
);
textarea {
resize: none;
}
`}
/>
);
}
export {
fonts,