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

✨ make sidebar close on file click

Browse source
This commit is contained in:
ghalestrilo 2020-08-07 18:48:39 -03:00
parent faaa6d2edb
commit df5ac3fb4c
4 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/mobile/Explorer.jsx
View file

@ -7,7 +7,7 @@ import ConnectedFileNode from '../../modules/IDE/components/FileNode';
const Explorer = ({ id, canEdit, onPressClose }) => ( const Explorer = ({ id, canEdit, onPressClose }) => (
<Sidebar title="Files" onPressClose={onPressClose}> <Sidebar title="Files" onPressClose={onPressClose}>
<ConnectedFileNode id={id} canEdit={canEdit} onClickFile={onPressClose} /> <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
</Sidebar> </Sidebar>
); );

2
client/components/mobile/Sidebar.jsx
View file

@ -20,8 +20,6 @@ const SidebarWrapper = styled.div`
box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10); box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
`; `;
// onClick={() => alert('haha')}
const Sidebar = ({ title, onPressClose, children }) => ( const Sidebar = ({ title, onPressClose, children }) => (
<SidebarWrapper> <SidebarWrapper>
{title && {title &&

2
client/components/useAsModal.jsx
View file

@ -15,8 +15,6 @@ const BackgroundOverlay = styled.div`
export default (Element, hasOverlay = false) => { export default (Element, hasOverlay = false) => {
const [visible, toggle, setRef] = useModalBehavior(); const [visible, toggle, setRef] = useModalBehavior();
// const Comp = styled(() => Element).attrs({ onPressClose: toggle });
const wrapper = () => (visible && const wrapper = () => (visible &&
<div> <div>
{hasOverlay && <BackgroundOverlay />} {hasOverlay && <BackgroundOverlay />}

15
client/modules/IDE/components/FileNode.jsx
View file

@ -108,10 +108,15 @@ export class FileNode extends React.Component {
handleFileClick = (event) => { handleFileClick = (event) => {
event.stopPropagation(); event.stopPropagation();
const { isDeleting } = this.state; const { isDeleting } = this.state;
const { id, setSelectedFile, name } = this.props; const {
id, setSelectedFile, name, onClickFile
} = this.props;
if (name !== 'root' && !isDeleting) { if (name !== 'root' && !isDeleting) {
setSelectedFile(id); setSelectedFile(id);
} }
// debugger; // eslint-disable-line
if (onClickFile) { onClickFile(); }
} }
handleFileNameChange = (event) => { handleFileNameChange = (event) => {
@ -214,7 +219,7 @@ export class FileNode extends React.Component {
renderChild = childId => ( renderChild = childId => (
<li key={childId}> <li key={childId}>
<ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} /> <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} onClickFile={this.props.onClickFile} />
</li> </li>
) )
@ -233,7 +238,7 @@ export class FileNode extends React.Component {
const isRoot = this.props.name === 'root'; const isRoot = this.props.name === 'root';
return ( return (
<div className={itemClass}> <div className={itemClass} >
{ !isRoot && { !isRoot &&
<div className="file-item__content" onContextMenu={this.toggleFileOptions}> <div className="file-item__content" onContextMenu={this.toggleFileOptions}>
<span className="file-item__spacer"></span> <span className="file-item__spacer"></span>
@ -382,10 +387,12 @@ FileNode.propTypes = {
hideFolderChildren: PropTypes.func.isRequired, hideFolderChildren: PropTypes.func.isRequired,
canEdit: PropTypes.bool.isRequired, canEdit: PropTypes.bool.isRequired,
openUploadFileModal: PropTypes.func.isRequired, openUploadFileModal: PropTypes.func.isRequired,
authenticated: PropTypes.bool.isRequired authenticated: PropTypes.bool.isRequired,
onClickFile: PropTypes.func
}; };
FileNode.defaultProps = { FileNode.defaultProps = {
onClickFile: null,
parentId: '0', parentId: '0',
isSelectedFile: false, isSelectedFile: false,
isFolderClosed: false, isFolderClosed: false,