r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

👌 subst left/right props with align prop on <Dropdown />

Browse source
This commit is contained in:
ghalestrilo 2020-07-30 14:36:34 -03:00
parent 8acd6ec189
commit 8225807368
2 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/components/Dropdown.jsx
View file

@ -16,6 +16,9 @@ const DropdownWrapper = styled.ul`
right: ${props => (props.right ? 0 : 'initial')}; right: ${props => (props.right ? 0 : 'initial')};
left: ${props => (props.left ? 0 : 'initial')}; left: ${props => (props.left ? 0 : 'initial')};
${props => (props.align === 'right' && 'right: 0;')}
${props => (props.align === 'left' && 'left: 0;')}
text-align: left; text-align: left;
width: ${remSize(180)}; width: ${remSize(180)};
@ -57,8 +60,8 @@ const DropdownWrapper = styled.ul`
// TODO: Add Icon to the left of the items in the menu // TODO: Add Icon to the left of the items in the menu
// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />; // const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
const Dropdown = ({ items, right, left }) => ( const Dropdown = ({ items, align }) => (
<DropdownWrapper right={right} left={left}> <DropdownWrapper align={align} >
{/* className="nav__items-left" */} {/* className="nav__items-left" */}
{items && items.map(({ title, icon, href }) => ( {items && items.map(({ title, icon, href }) => (
<li key={`nav-${title && title.toLowerCase()}`}> <li key={`nav-${title && title.toLowerCase()}`}>
@ -73,8 +76,7 @@ const Dropdown = ({ items, right, left }) => (
); );
Dropdown.propTypes = { Dropdown.propTypes = {
right: PropTypes.bool, align: PropTypes.oneOf(['left', 'right']),
left: PropTypes.bool,
items: PropTypes.arrayOf(PropTypes.shape({ items: PropTypes.arrayOf(PropTypes.shape({
action: PropTypes.func, action: PropTypes.func,
icon: PropTypes.func, icon: PropTypes.func,
@ -84,8 +86,7 @@ Dropdown.propTypes = {
Dropdown.defaultProps = { Dropdown.defaultProps = {
items: [], items: [],
right: false, align: null
left: false,
}; };
export default Dropdown; export default Dropdown;

8
client/modules/IDE/pages/MobileIDEView.jsx
View file

@ -57,7 +57,7 @@ const MobileIDEView = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
selectedFile, updateFileContent, files, selectedFile, updateFileContent, files,
closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, closeEditorOptions, showEditorOptions,
startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
} = props; } = props;
@ -65,7 +65,7 @@ const MobileIDEView = (props) => {
const [tmController, setTmController] = useState(null); // eslint-disable-line const [tmController, setTmController] = useState(null); // eslint-disable-line
const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown right items={headerNavOptions} />); const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown align="right" items={headerNavOptions} />);
return ( return (
<Screen fullscreen> <Screen fullscreen>
@ -213,10 +213,6 @@ MobileIDEView.propTypes = {
showEditorOptions: PropTypes.func.isRequired, showEditorOptions: PropTypes.func.isRequired,
showKeyboardShortcutModal: PropTypes.func.isRequired,
setUnsavedChanges: PropTypes.func.isRequired,
startRefreshSketch: PropTypes.func.isRequired, startRefreshSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,