fix issue #7: scroll all the way down the page when the "add task" bu…

…tton is used
gilesv · Sep 12, 2019 · 6b891a7 · 6b891a7
1 parent 9dfb678
commit 6b891a7
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
  "@types/react-redux": "^7.1.1",
  "@types/react-transition-group": "^4.2.2",
  "@types/redux": "^3.6.0",
+ "@types/uuid": "^3.4.5",
  "@typescript-eslint/eslint-plugin": "1.6.0",
  "@typescript-eslint/parser": "1.6.0",
  "babel-eslint": "10.0.1",

diff --git a/src/components/StoryDetails.tsx b/src/components/StoryDetails.tsx
@@ -24,12 +24,22 @@ class StoryDetails extends React.Component<Props> {
  constructor(props: Props) {
  super(props);
  this.editableNameElement = React.createRef()
+ this.footElement = React.createRef();
 
  this.updateAttribute = this.updateAttribute.bind(this);
+ this.scrollDown = this.scrollDown.bind(this);
  }
 
  public editableNameElement: RefObject<HTMLDivElement>;
 
+ public footElement: any;
+
+ public scrollDown() {
+ setTimeout(() => {
+ this.footElement.current.scrollIntoView({ behavior: "smooth" });
+ }, 200);
+ }
+
  public updateStoryName(e: ContentEditableEvent) {
  const name = e.target.value.trim() || "";
  const updated = { ...this.props.selectedStory, name };
@@ -88,11 +98,12 @@ class StoryDetails extends React.Component<Props> {
  </div>
 
  <div className="story-details__stories">
- <TaskList story={selectedStory} notify={notify} />
+ <TaskList story={selectedStory} notify={notify} scrollDown={this.scrollDown} />
  </div>
+
+ <div className="story-details__footer" ref={this.footElement}></div>
  </> : null
  }
-
  </div>
  );
  }

diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
@@ -17,7 +17,6 @@ export default class TaskItem extends React.Component<Props> {
  constructor(props: Props) {
  super(props);
 
- this.element = React.createRef();
  this.update = this.update.bind(this);
  this.updateEffort = this.updateEffort.bind(this);
  this.toggleBody = this.toggleBody.bind(this);
@@ -26,12 +25,6 @@ export default class TaskItem extends React.Component<Props> {
  this.toggleDialog = this.toggleDialog.bind(this);
  }
 
- public element: any;
-
- componentDidMount() {
- this.element.current.scrollIntoView({ behavior: "smooth" });
- }
-
  public state = {
  isBodyVisible: true,
  isDialogVisible: false,
@@ -67,7 +60,7 @@ export default class TaskItem extends React.Component<Props> {
  this.update('effort', value);
  }
  }
- 
+
  deleteItem() {
  this.toggleDialog();
 
@@ -91,7 +84,7 @@ export default class TaskItem extends React.Component<Props> {
  );
 
  return (
- <div className="task-item" ref={this.element}>
+ <div className="task-item">
  <AddTaskButton type="before" visible={index === 0} index={index} addTask={(index: number) => addTaskAtIndex(index)} />
 
  <div className="task-item__header" onClick={this.toggleBody}>
@@ -104,33 +97,33 @@ export default class TaskItem extends React.Component<Props> {
 
  <div className="task-item__title">{task.title}</div>
  </div>
- 
+
  <div className="task-item__header-right" onClick={this.handleOptionsClick}>
  <Popover content={optionsMenu} position={Position.BOTTOM_RIGHT} minimal={true}>
- <Button rightIcon="more" minimal={true}/>
+ <Button rightIcon="more" minimal={true} />
  </Popover>
  </div>
- </div>
-
- <Collapse isOpen={this.state.isBodyVisible}>
- <div className="task-item__body">
- <TaskForm task={task} update={this.update} updateEffort={this.updateEffort} showDates={false} />
  </div>
- </Collapse>
 
- <AddTaskButton type="after" visible={true} index={index} addTask={(index: number) => addTaskAtIndex(index)} />
-
- <Dialog isOpen={this.state.isDialogVisible} onClose={this.toggleDialog} title="Delete item">
- <div className={Classes.DIALOG_BODY}>
- Are you really sure to delete the following item: <b>{task.title}</b>? This cannot be undone.
- </div>
+ <Collapse isOpen={this.state.isBodyVisible}>
+ <div className="task-item__body">
+ <TaskForm task={task} update={this.update} updateEffort={this.updateEffort} showDates={false} />
+ </div>
+ </Collapse>
+
+ <AddTaskButton type="after" visible={true} index={index} addTask={(index: number) => addTaskAtIndex(index)} />
 
- <div className={`${Classes.DIALOG_FOOTER} task-item__dialog-footer`} >
- <Button intent="none" onClick={this.toggleDialog}>Cancel</Button>
- <Button intent="danger" onClick={this.deleteItem}>Delete</Button>
+ <Dialog isOpen={this.state.isDialogVisible} onClose={this.toggleDialog} title="Delete item">
+ <div className={Classes.DIALOG_BODY}>
+  Are you really sure to delete the following item: <b>{task.title}</b>? This cannot be undone.
  </div>
- </Dialog>
- </div>
+
+ <div className={`${Classes.DIALOG_FOOTER} task-item__dialog-footer`} >
+ <Button intent="none" onClick={this.toggleDialog}>Cancel</Button>
+ <Button intent="danger" onClick={this.deleteItem}>Delete</Button>
+ </div>
+ </Dialog>
+ </div >
  );
  }
 }

diff --git a/src/components/TaskList.tsx b/src/components/TaskList.tsx
@@ -12,6 +12,7 @@ interface Props {
  tasks: { [key: number]: Task },
  tasksIds: TaskId[],
  story: Story,
+ scrollDown: () => void,
  [key: string]: any
 }
 
@@ -27,6 +28,10 @@ class TaskList extends React.Component<Props> {
  public addTask(type = TaskType.TASK, index = -1) {
  const task = new Task(type);
  this.props.dispatch(addTask(task, this.props.story.id, index));
+
+ if (index < 0) {
+ this.props.scrollDown();
+ }
  }
 
  public updateTask(task: Task) {

diff --git a/yarn.lock b/yarn.lock
@@ -1441,8 +1441,8 @@
 
 "@types/uuid@^3.4.5":
  version "3.4.5"
- resolved "https://npm.apple.com/@types/uuid/-/uuid-3.4.5.tgz#d4dc10785b497a1474eae0ba7f0cb09c0ddfd6eb"
- integrity sha1-1NwQeFtJehR06uC6fwywnA3f1us=
+ resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.5.tgz#d4dc10785b497a1474eae0ba7f0cb09c0ddfd6eb"
+ integrity sha512-MNL15wC3EKyw1VLF+RoVO4hJJdk9t/Hlv3rt1OL65Qvuadm4BYo6g9ZJQqoq7X8NBFSsQXgAujWciovh2lpVjA==
  dependencies:
  "@types/node" "*"
 
@@ -10199,11 +10199,6 @@ uuid@^3.0.1, uuid@^3.3.2:
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
-uuid@^3.3.3:
- version "3.3.3"
- resolved "https://npm.apple.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
- integrity sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=
-
 validate-npm-package-license@^3.0.1:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"