瀏覽代碼

added react function to open/close editionmode

AlexiCauvin 7 年之前
父節點
當前提交
64e32a72c9

+ 10 - 1
src/component/Input/TextAreaApp/TextAreaApp.jsx 查看文件

6
 export const TextAreaApp = props =>
6
 export const TextAreaApp = props =>
7
   <form className={`${props.customClass} editionmode`}>
7
   <form className={`${props.customClass} editionmode`}>
8
     <textarea className={`${props.customClass}__text editionmode__text`} />
8
     <textarea className={`${props.customClass}__text editionmode__text`} />
9
-    <input type='submit' className={`${props.customClass}__submit editionmode__submit`} value='Valider' />
9
+    <div className={`${props.customClass}__button editionmode__button`}>
10
+      <button
11
+        type='button'
12
+        className={`${props.customClass}__cancel editionmode__button__cancel btn btn-outline-primary mr-3`}
13
+        onClick={props.onClickCancelBtn}
14
+      >
15
+        Annuler
16
+      </button>
17
+      <button type='submit' className={`${props.customClass}__submit editionmode__button__submit btn btn-outline-primary`}>Valider</button>
18
+    </div>
10
   </form>
19
   </form>
11
 
20
 
12
 export default TextAreaApp
21
 export default TextAreaApp

+ 10 - 11
src/component/Input/TextAreaApp/TextAreaApp.styl 查看文件

7
   display flex
7
   display flex
8
   flex-direction column
8
   flex-direction column
9
   align-items center
9
   align-items center
10
-  width auto
10
+  width 100%
11
   &__text
11
   &__text
12
     margin-bottom 25px
12
     margin-bottom 25px
13
     width 100%
13
     width 100%
14
     height 250px
14
     height 250px
15
-  &__submit
16
-    border 1px solid blue
17
-    box-shadow none
18
-    border-radius 10px
19
-    padding 8px 45px
20
-    background-color transparent
21
-    color blue
22
-    &:hover, &:focus
23
-      background-color blue
24
-      color off-white
15
+  &__button
16
+    display flex
17
+    justify-content flex-end
18
+    margin-top 15px
19
+    width 100%
20
+    &__cancel
21
+      cursor pointer
22
+    &__submit
23
+      cursor pointer

+ 48 - 21
src/component/PopinFixed/PopinFixedHeader.jsx 查看文件

2
 import classnames from 'classnames'
2
 import classnames from 'classnames'
3
 import PropTypes from 'prop-types'
3
 import PropTypes from 'prop-types'
4
 
4
 
5
-const PopinFixedHeader = props => {
6
-  return (
7
-    <div className={classnames('wsContentGeneric__header', `${props.customClass}__header`)}>
8
-      <div className={classnames('wsContentGeneric__header__icon', `${props.customClass}__header__icon`)}>
9
-        <i className={props.icon} />
10
-      </div>
5
+class PopinFixedHeader extends React.Component {
6
+  constructor (props) {
7
+    super(props)
8
+    this.state = {
9
+      editTitle: false
10
+    }
11
+  }
11
 
12
 
12
-      <div className={classnames('wsContentGeneric__header__title mr-auto', `${props.customClass}__header__title`)}>
13
-        {props.name}
14
-      </div>
13
+  handleClickChangeTitleBtn = () => this.setState(prevState => ({
14
+    editTitle: !prevState.editTitle
15
+  }))
15
 
16
 
16
-      <div className={classnames('wsContentGeneric__header__edittitle', `${props.customClass}__header__changetitle`)}>
17
-        <i className='fa fa-pencil' />
18
-      </div>
17
+  render () {
18
+    const { customClass, icon, name, onChangeTitle, onClickCloseBtn } = this.props
19
+
20
+    return (
21
+      <div className={classnames('wsContentGeneric__header', `${customClass}__header`)}>
22
+        <div className={classnames('wsContentGeneric__header__icon', `${customClass}__header__icon`)}>
23
+          <i className={icon} />
24
+        </div>
25
+
26
+        <div className={classnames('wsContentGeneric__header__title mr-auto', `${customClass}__header__title`)}>
27
+          {this.state.editTitle === false &&
28
+            <div>
29
+              {name}
30
+            </div>
31
+          }
32
+          {this.state.editTitle === true &&
33
+            <input onChange={onChangeTitle} />
34
+          }
35
+        </div>
36
+
37
+        <div
38
+          className={classnames('wsContentGeneric__header__edittitle', `${customClass}__header__changetitle`)}
39
+          onClick={this.handleClickChangeTitleBtn}
40
+        >
41
+          <i className='fa fa-pencil' />
42
+        </div>
19
 
43
 
20
-      <div
21
-        className={classnames('wsContentGeneric__header__close', `${props.customClass}__header__close`)}
22
-        onClick={props.onClickCloseBtn}
23
-      >
24
-        <i className='fa fa-times' />
44
+        <div
45
+          className={classnames('wsContentGeneric__header__close', `${customClass}__header__close`)}
46
+          onClick={onClickCloseBtn}
47
+        >
48
+          <i className='fa fa-times' />
49
+        </div>
25
       </div>
50
       </div>
26
-    </div>
27
-  )
51
+    )
52
+  }
28
 }
53
 }
29
 
54
 
30
 export default PopinFixedHeader
55
 export default PopinFixedHeader
33
   icon: PropTypes.string.isRequired,
58
   icon: PropTypes.string.isRequired,
34
   onClickCloseBtn: PropTypes.func.isRequired,
59
   onClickCloseBtn: PropTypes.func.isRequired,
35
   customClass: PropTypes.string,
60
   customClass: PropTypes.string,
36
-  name: PropTypes.string
61
+  name: PropTypes.string,
62
+  onChangeTitle: PropTypes.func
37
 }
63
 }
38
 
64
 
39
 PopinFixedHeader.defaultProps = {
65
 PopinFixedHeader.defaultProps = {
40
   customClass: '',
66
   customClass: '',
41
-  name: ''
67
+  name: '',
68
+  onChangeTitle: () => {}
42
 }
69
 }

+ 11 - 2
src/component/PopinFixed/PopinFixedOption.jsx 查看文件

11
   return (
11
   return (
12
     <div className={classnames('wsContentGeneric__option', `${props.customClass}__option`)}>
12
     <div className={classnames('wsContentGeneric__option', `${props.customClass}__option`)}>
13
       <div className={classnames('wsContentGeneric__option__menu', `${props.customClass}__option__menu`)}>
13
       <div className={classnames('wsContentGeneric__option__menu', `${props.customClass}__option__menu`)}>
14
-        <div className='wsContentGeneric__option__menu__addversion btn btn-outline-primary mr-auto'>
14
+        <div
15
+          className='wsContentGeneric__option__menu__addversion btn btn-outline-primary mr-auto'
16
+          onClick={props.onClickNewVersion}
17
+        >
15
           {props.t('PopinFixedOption.new_version')}
18
           {props.t('PopinFixedOption.new_version')}
16
           <i className='fa fa-plus-circle ml-3' />
19
           <i className='fa fa-plus-circle ml-3' />
17
         </div>
20
         </div>
32
 export default translate()(PopinFixedOption)
35
 export default translate()(PopinFixedOption)
33
 
36
 
34
 PopinFixedOption.propTypes = {
37
 PopinFixedOption.propTypes = {
35
-  i18n: PropTypes.object // translate resource to overrides default one
38
+  i18n: PropTypes.object, // translate resource to overrides default one,
39
+  onClickNewVersionBtn: PropTypes.func
40
+}
41
+
42
+PopinFixedOption.defaultProps = {
43
+  i18n: {},
44
+  onClickNewVersionBtn: () => {}
36
 }
45
 }