Merge pull request #109 from dbcls/fix/dataset-title-length

タイトル編集時にEnterで保存
dbcls · Jan 28, 2021 · 743391c · 743391c
2 parents 8945688 + a23bbd6
commit 743391c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/node/src/ts/components/DataSetList.tsx b/node/src/ts/components/DataSetList.tsx
@@ -53,31 +53,17 @@ export default class DataSetList extends React.Component<Props, {}> {
   }
 
   private renderDataSetList() {
-    const { didEdit, isLoading } = this.props
+    const { isLoading } = this.props
     if (isLoading) {
       return <Loading />
     }
-
-    let updateButton = null
-    if (didEdit) {
-      updateButton = (
-        <a
-          onClick={this.onClickUpdate}
-          href="/"
-          className="layout-datalist__titlesavebtn"
-        >
-          <FormattedMessage id="dataSetList.updateTitle" />
-        </a>
-      )
-    }
     return (
       <section className="layout-datalist">
         <table>
           <tbody>
             <tr>
               <th>
                 <FormattedMessage id="dataSetList.tableTitle" />
-                {updateButton}
               </th>
               <th>
                 <FormattedMessage id="dataSetList.tableUrl" />

diff --git a/node/src/ts/components/EditableDataSetList.tsx b/node/src/ts/components/EditableDataSetList.tsx
@@ -4,19 +4,20 @@ import { Link } from 'react-router-dom'
 import { FormattedMessage } from 'react-intl'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPen } from '@fortawesome/free-solid-svg-icons'
-
 import { Url } from '../constants'
 import {
   DataSet,
   EditedDataSet,
   EditDataSetAction,
+  UpdateAction,
 } from '../actions/data-set-list'
 import { OpenModalAction as OpenDeleteModalAction } from '../actions/data-set-delete'
 
 interface Props {
   dataSetList: DataSet[]
   actions: {
     editDataSet: (editedDataSet: EditedDataSet) => EditDataSetAction
+    update: () => UpdateAction
   }
   deleteModalActions: {
     openModal: (dataSet: DataSet) => OpenDeleteModalAction
@@ -31,6 +32,7 @@ export default class EditableDataSetList extends React.Component<Props, {}> {
 
     this.onClickDelete = this.onClickDelete.bind(this)
     this.onChangeTitle = this.onChangeTitle.bind(this)
+    this.onKeyPress = this.onKeyPress.bind(this)
   }
 
   private onClickDelete(
@@ -52,6 +54,15 @@ export default class EditableDataSetList extends React.Component<Props, {}> {
     }
   }
 
+  private onKeyPress(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      const { actions } = this.props
+      actions.update()
+      e.currentTarget.blur()
+    }
+  }
+
   render() {
     const { dataSetList } = this.props
     const urlPrefix = `${window.location.protocol}//${window.location.host}${Url.VISUALIZER_PREFIX}`
@@ -63,6 +74,7 @@ export default class EditableDataSetList extends React.Component<Props, {}> {
         <ContentEditable
           innerRef={this.titleEditableRefs[index]}
           onChange={() => this.onChangeTitle(d.id, index)}
+          onKeyPress={this.onKeyPress}
           html={`<span>${d.title}</span>`}
           tagName="td"
         />