👌 improve IconButton implementation

This commit is contained in:
ghalestrilo 2020-07-01 16:32:29 -03:00
parent 3143cc34c7
commit b4c1b86d4d
3 changed files with 21 additions and 15 deletions

View File

@ -11,14 +11,20 @@ width: 3rem;
}
`;
const IconButton = props => (<ButtonWrapper
iconBefore={props.element}
kind={Button.kinds.inline}
{...props}
/>);
const IconButton = (props) => {
const { icon, ...otherProps } = props;
const Icon = icon;
return (<ButtonWrapper
iconBefore={<Icon />}
kind={Button.kinds.inline}
focusable="false"
{...otherProps}
/>);
};
IconButton.propTypes = {
element: PropTypes.element.isRequired
icon: PropTypes.func.isRequired
};
export default IconButton;

View File

@ -20,9 +20,7 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports
import Editor from '../components/Editor';
import { ExitIcon } from '../../../common/icons';
import { PreferencesIcon, PlayIcon } from '../../../common/icons';
import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header';
@ -53,17 +51,19 @@ const IDEViewMobile = (props) => {
return (
<Screen>
<Header>
<IconButton to="/mobile" aria-label="Return to original editor">
<ExitIcon viewBox="0 0 16 16" />
</IconButton>
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
<div style={{ marginLeft: '1rem' }}>
<h2>{project.name}</h2>
<h3>{selectedFile.name}</h3>
</div>
<IconContainer>
<IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} />
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} />
<IconButton
onClick={() => setOverlay('preferences')}
icon={PreferencesIcon}
aria-label="Open preferences menu"
/>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</IconContainer>
</Header>

View File

@ -50,7 +50,7 @@ const MobileSketchView = (props) => {
return (
<Screen>
<Header>
<IconButton to="/mobile" element={<ExitIcon />} width={12} height={12} aria-label="Return to original editor" />
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
<div style={{ marginLeft: '1rem' }}>
<h2>{projectName}</h2>
<h3><br /></h3>