refactor: convert function expressions to declarations (#4926)
This commit is contained in:
committed by
GitHub
parent
c0236536dd
commit
141a2eba56
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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};
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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,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,
|
||||
|
@ -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,
|
||||
|
Reference in New Issue
Block a user