Make columns itself scrollable, fix action creation when moving card, little refactoring
Maksim Eltyshev
6 years ago
parent
c5b44598f9
commit
746e2fe790
@ -1,26 +1,29 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import HeaderContainer from '../containers/HeaderContainer';
|
||||
import ProjectsContainer from '../containers/ProjectsContainer';
|
||||
import ModalTypes from '../constants/ModalTypes';
|
||||
import FixedWrapperContainer from '../containers/FixedWrapperContainer';
|
||||
import StaticWrapperContainer from '../containers/StaticWrapperContainer';
|
||||
import UsersModalContainer from '../containers/UsersModalContainer';
|
||||
import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
|
||||
import AddProjectModalContainer from '../containers/AddProjectModalContainer';
|
||||
|
||||
const App = ({ isUsersModalOpened, isUserSettingsModalOpened, isAddProjectModalOpened }) => (
|
||||
const App = ({ currentModal }) => (
|
||||
<>
|
||||
<HeaderContainer />
|
||||
<ProjectsContainer />
|
||||
{isUsersModalOpened && <UsersModalContainer />}
|
||||
{isUserSettingsModalOpened && <UserSettingsModalContainer />}
|
||||
{isAddProjectModalOpened && <AddProjectModalContainer />}
|
||||
<FixedWrapperContainer />
|
||||
<StaticWrapperContainer />
|
||||
{currentModal === ModalTypes.USERS && <UsersModalContainer />}
|
||||
{currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
|
||||
{currentModal === ModalTypes.ADD_PROJECT && <AddProjectModalContainer />}
|
||||
</>
|
||||
);
|
||||
|
||||
App.propTypes = {
|
||||
isUsersModalOpened: PropTypes.bool.isRequired,
|
||||
isUserSettingsModalOpened: PropTypes.bool.isRequired,
|
||||
isAddProjectModalOpened: PropTypes.bool.isRequired,
|
||||
currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
|
||||
};
|
||||
|
||||
App.defaultProps = {
|
||||
currentModal: undefined,
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import HeaderContainer from '../../containers/HeaderContainer';
|
||||
import ProjectContainer from '../../containers/ProjectContainer';
|
||||
|
||||
import styles from './FixedWrapper.module.css';
|
||||
|
||||
const FixedWrapper = ({ projectId }) => (
|
||||
<div className={styles.wrapper}>
|
||||
<HeaderContainer />
|
||||
{projectId && <ProjectContainer />}
|
||||
</div>
|
||||
);
|
||||
|
||||
FixedWrapper.propTypes = {
|
||||
projectId: PropTypes.string,
|
||||
};
|
||||
|
||||
FixedWrapper.defaultProps = {
|
||||
projectId: undefined,
|
||||
};
|
||||
|
||||
export default FixedWrapper;
|
||||
@ -0,0 +1,5 @@
|
||||
.wrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import FixedWrapper from './FixedWrapper';
|
||||
|
||||
export default FixedWrapper;
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import ProjectContainer from '../containers/ProjectContainer';
|
||||
|
||||
const ProjectWrapper = React.memo(({ isProjectNotFound, isBoardNotFound, isCardNotFound }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
if (isCardNotFound) {
|
||||
return (
|
||||
<h1>
|
||||
{t('common.cardNotFound', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
if (isBoardNotFound) {
|
||||
return (
|
||||
<h1>
|
||||
{t('common.boardNotFound', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
if (isProjectNotFound) {
|
||||
return (
|
||||
<h1>
|
||||
{t('common.projectNotFound', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
return <ProjectContainer />;
|
||||
});
|
||||
|
||||
ProjectWrapper.propTypes = {
|
||||
isProjectNotFound: PropTypes.bool.isRequired,
|
||||
isBoardNotFound: PropTypes.bool.isRequired,
|
||||
isCardNotFound: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default ProjectWrapper;
|
||||
@ -0,0 +1,106 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
import { Icon } from 'semantic-ui-react';
|
||||
|
||||
import ProjectsContainer from '../../containers/ProjectsContainer';
|
||||
import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
|
||||
|
||||
import styles from './StaticWrapper.module.css';
|
||||
|
||||
const StaticWrapper = ({ cardId, boardId, projectId }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflowX = 'auto'; // TODO: only for board
|
||||
}, []);
|
||||
|
||||
if (projectId === undefined) {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<ProjectsContainer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (cardId === null) {
|
||||
return (
|
||||
<div className={classNames(styles.root, styles.flex)}>
|
||||
<div className={styles.message}>
|
||||
<h1>
|
||||
{t('common.cardNotFound', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (boardId === null) {
|
||||
return (
|
||||
<div className={classNames(styles.root, styles.flex)}>
|
||||
<div className={styles.message}>
|
||||
<h1>
|
||||
{t('common.boardNotFound', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (projectId === null) {
|
||||
return (
|
||||
<div className={classNames(styles.root, styles.flex)}>
|
||||
<div className={styles.message}>
|
||||
<h1>
|
||||
{t('common.projectNotFound', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (boardId === undefined) {
|
||||
return (
|
||||
<div className={classNames(styles.board, styles.flex)}>
|
||||
<div className={styles.message}>
|
||||
<Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
|
||||
<h1 className={styles.messageTitle}>
|
||||
{t('common.openBoard', {
|
||||
context: 'title',
|
||||
})}
|
||||
</h1>
|
||||
<div className={styles.messageContent}>
|
||||
<Trans i18nKey="common.createNewOneOrSelectExistingOne" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.board, styles.flex)}>
|
||||
<BoardWrapperContainer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
StaticWrapper.propTypes = {
|
||||
cardId: PropTypes.string,
|
||||
boardId: PropTypes.string,
|
||||
projectId: PropTypes.string,
|
||||
};
|
||||
|
||||
StaticWrapper.defaultProps = {
|
||||
cardId: undefined,
|
||||
boardId: undefined,
|
||||
projectId: undefined,
|
||||
};
|
||||
|
||||
export default StaticWrapper;
|
||||
@ -0,0 +1,38 @@
|
||||
.board {
|
||||
margin-top: 168px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.message {
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.messageIcon {
|
||||
margin-top: -84px;
|
||||
}
|
||||
|
||||
.messageTitle {
|
||||
font-size: 32px;
|
||||
margin: 24px 0 8px;
|
||||
}
|
||||
|
||||
.messageContent {
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
margin: 4px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.root {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import StaticWrapper from './StaticWrapper';
|
||||
|
||||
export default StaticWrapper;
|
||||
@ -0,0 +1,14 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { pathSelector } from '../selectors';
|
||||
import FixedWrapper from '../components/FixedWrapper';
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const { projectId } = pathSelector(state);
|
||||
|
||||
return {
|
||||
projectId,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(FixedWrapper);
|
||||
@ -1,16 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { pathSelector } from '../selectors';
|
||||
import ProjectWrapper from '../components/ProjectWrapper';
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const { cardId, boardId, projectId } = pathSelector(state);
|
||||
|
||||
return {
|
||||
isProjectNotFound: projectId === null,
|
||||
isBoardNotFound: boardId === null,
|
||||
isCardNotFound: cardId === null,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(ProjectWrapper);
|
||||
@ -0,0 +1,16 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { pathSelector } from '../selectors';
|
||||
import StaticWrapper from '../components/StaticWrapper';
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const { cardId, boardId, projectId } = pathSelector(state);
|
||||
|
||||
return {
|
||||
cardId,
|
||||
boardId,
|
||||
projectId,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(StaticWrapper);
|
||||
@ -1,62 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const DragScroller = React.memo(({ children, ...props }) => {
|
||||
const wrapper = useRef(null);
|
||||
const prevPosition = useRef(null);
|
||||
|
||||
const handleMouseDown = useCallback(
|
||||
(event) => {
|
||||
if (event.target !== wrapper.current && !event.target.dataset.dragScroller) {
|
||||
return;
|
||||
}
|
||||
|
||||
prevPosition.current = event.clientX;
|
||||
},
|
||||
[wrapper],
|
||||
);
|
||||
|
||||
const handleWindowMouseMove = useCallback(
|
||||
(event) => {
|
||||
if (!prevPosition.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const position = event.clientX;
|
||||
|
||||
wrapper.current.scrollLeft -= -prevPosition.current + position;
|
||||
prevPosition.current = position;
|
||||
},
|
||||
[wrapper, prevPosition],
|
||||
);
|
||||
|
||||
const handleWindowMouseUp = useCallback(() => {
|
||||
prevPosition.current = null;
|
||||
}, [prevPosition]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('mouseup', handleWindowMouseUp);
|
||||
window.addEventListener('mousemove', handleWindowMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mouseup', handleWindowMouseUp);
|
||||
window.removeEventListener('mousemove', handleWindowMouseMove);
|
||||
};
|
||||
}, [handleWindowMouseUp, handleWindowMouseMove]);
|
||||
|
||||
return (
|
||||
/* eslint-disable jsx-a11y/no-static-element-interactions, react/jsx-props-no-spreading */
|
||||
<div {...props} ref={wrapper} onMouseDown={handleMouseDown}>
|
||||
{/* eslint-enable jsx-a11y/no-static-element-interactions, react/jsx-props-no-spreading */}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
DragScroller.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default DragScroller;
|
||||
@ -1,3 +0,0 @@
|
||||
import DragScroller from './DragScroller';
|
||||
|
||||
export default DragScroller;
|
||||
Loading…
Reference in New Issue