Browse Source

added react function to open/close editionmode

AlexiCauvin 6 years ago
parent
commit
348924c7c7
2 changed files with 33 additions and 8 deletions
  1. 10 3
      src/component/PageHtml.jsx
  2. 23 5
      src/container/PageHtml.jsx

+ 10 - 3
src/component/PageHtml.jsx View File

1
 import React from 'react'
1
 import React from 'react'
2
 import { TextAreaApp } from 'tracim_lib'
2
 import { TextAreaApp } from 'tracim_lib'
3
+import { MODE } from '../helper.js'
3
 
4
 
4
 const PageHtml = props => {
5
 const PageHtml = props => {
5
   return (
6
   return (
6
     <div className='wsContentPageHtml__contentpage__textnote'>
7
     <div className='wsContentPageHtml__contentpage__textnote'>
7
-      <div className='wsContentPageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
8
-      <div className='wsContentPageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
8
+      {props.mode === MODE.VIEW &&
9
+        <div>
10
+          <div className='wsContentPageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
11
+          <div className='wsContentPageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
12
+        </div>
13
+      }
9
 
14
 
10
-      <TextAreaApp customClass={'wsContentPageHtml'} />
15
+      {props.mode === MODE.EDIT &&
16
+        <TextAreaApp customClass={'wsContentPageHtml'} onClickCancelBtn={props.onClickCloseNewVersion}/>
17
+      }
11
     </div>
18
     </div>
12
   )
19
   )
13
 }
20
 }

+ 23 - 5
src/container/PageHtml.jsx View File

9
   Timeline
9
   Timeline
10
 } from 'tracim_lib'
10
 } from 'tracim_lib'
11
 import { timelineDebugData } from '../timelineDebugData.js'
11
 import { timelineDebugData } from '../timelineDebugData.js'
12
-import { FETCH_CONFIG } from '../helper.js'
12
+import { FETCH_CONFIG, MODE } from '../helper.js'
13
 import i18n from '../i18n.js'
13
 import i18n from '../i18n.js'
14
 
14
 
15
 const debug = {
15
 const debug = {
22
     componentLeft: 'PageHtml',
22
     componentLeft: 'PageHtml',
23
     componentRight: 'Timeline',
23
     componentRight: 'Timeline',
24
     customClass: 'wsContentPageHtml',
24
     customClass: 'wsContentPageHtml',
25
-    icon: 'fa fa-file-word-o',
26
-    color: '#65c7f2',
25
+    icon: 'fa fa-file-text-o',
26
+    color: '#fdfdfd',
27
     domContainer: 'appContainer',
27
     domContainer: 'appContainer',
28
     apiUrl: 'http://localhost:3001'
28
     apiUrl: 'http://localhost:3001'
29
   },
29
   },
60
       config: props.data ? props.data.config : debug.config,
60
       config: props.data ? props.data.config : debug.config,
61
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
61
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
62
       content: props.data ? props.data.content : debug.content,
62
       content: props.data ? props.data.content : debug.content,
63
-      timeline: props.data ? [] : debug.timeline
63
+      timeline: props.data ? [] : debug.timeline,
64
+      mode: MODE.VIEW
64
     }
65
     }
65
 
66
 
66
     document.addEventListener('appCustomEvent', this.customEventReducer)
67
     document.addEventListener('appCustomEvent', this.customEventReducer)
105
     this.setState({ isVisible: false })
106
     this.setState({ isVisible: false })
106
   }
107
   }
107
 
108
 
109
+  handleChangeTitle = e => console.log('new title : ', e.target.value)
110
+
111
+  handleClickNewVersion = () => {
112
+    this.setState({ mode: MODE.EDIT })
113
+  }
114
+
115
+  handleCloseNewVersion = () => {
116
+    this.setState({ mode: MODE.VIEW })
117
+  }
118
+
108
   render () {
119
   render () {
109
     const { isVisible, loggedUser, content, timeline, config } = this.state
120
     const { isVisible, loggedUser, content, timeline, config } = this.state
110
 
121
 
117
           icon={config.icon}
128
           icon={config.icon}
118
           name={content.title}
129
           name={content.title}
119
           onClickCloseBtn={this.handleClickBtnCloseApp}
130
           onClickCloseBtn={this.handleClickBtnCloseApp}
131
+          onChangeTitle={this.handleChangeTitle}
120
         />
132
         />
121
 
133
 
122
-        <PopinFixedOption customClass={`${config.customClass}`} i18n={i18n} />
134
+        <PopinFixedOption
135
+          customClass={`${config.customClass}`}
136
+          onClickNewVersion={this.handleClickNewVersion}
137
+          i18n={i18n}
138
+        />
123
 
139
 
124
         <PopinFixedContent customClass={`${config.customClass}__contentpage`}>
140
         <PopinFixedContent customClass={`${config.customClass}__contentpage`}>
125
           <PageHtmlComponent
141
           <PageHtmlComponent
142
+            mode={this.state.mode}
143
+            onClickCloseNewVersion={this.handleCloseNewVersion}
126
             version={content.version}
144
             version={content.version}
127
             text={content.text}
145
             text={content.text}
128
             key={'PageHtml'}
146
             key={'PageHtml'}