added hanler for status and btn archive and delete

src/component/Input/SelectStatus/SelectStatus.jsx

@@ -17,9 +17,9 @@ export const SelectStatus = props => {
         aria-haspopup='true'
         aria-expanded='false'
       >
-        {props.t('Input.SelectStatus.validated')}
+        {props.selectedStatus.label}
         <div className='selectStatus__dropdownbtn__icon'>
-          <i className='fa fa-check' />
+          <i className={`fa fa-${props.selectedStatus.faIcon}`} />
         </div>
       </button>
 
@@ -28,33 +28,20 @@ export const SelectStatus = props => {
 
         <div className='dropdown-divider' />
 
-        <button className='selectStatus__submenu__item current  dropdown-item' type='button'>
-          {props.t('Input.SelectStatus.ongoing')}
-          <div className='selectStatus__submenu__item__icon'>
-            <i className='fa fa-gears' />
-          </div>
-        </button>
-
-        <button className='selectStatus__submenu__item check dropdown-item' type='button'>
-          {props.t('Input.SelectStatus.validated')}
-          <div className='selectStatus__submenu__item__icon'>
-            <i className='fa fa-check' />
-          </div>
-        </button>
-
-        <button className='selectStatus__submenu__item invalid dropdown-item' type='button'>
-          {props.t('Input.SelectStatus.unvalidated')}
-          <div className='selectStatus__submenu__item__icon'>
-            <i className='fa fa-times' />
-          </div>
-        </button>
-
-        <button className='selectStatus__submenu__item ban dropdown-item' type='button'>
-          {props.t('Input.SelectStatus.obsolete')}
-          <div className='selectStatus__submenu__item__icon'>
-            <i className='fa fa-ban' />
-          </div>
-        </button>
+        {props.availableStatus.map(s =>
+          <button
+            className='selectStatus__submenu__item current dropdown-item'
+            type='button'
+            onClick={() => props.onChangeStatus(s.slug)}
+            key={`status_${s.slug}`}
+            style={{color: s.hexcolor}}
+          >
+            {s.label /* props.t('Input.SelectStatus.ongoing') */}
+            <div className='selectStatus__submenu__item__icon'>
+              <i className={`fa fa-${s.faIcon}`} />
+            </div>
+          </button>
+        )}
       </div>
     </div>
   )

src/component/OptionComponent/EditContent.jsx

@@ -1,18 +1,24 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-class EditContent extends Component {
-  render () {
-    return (
-      <div className='d-flex align-items-center'>
-        <div className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'>
-          <i className='fa fa-fw fa-archive' />
-        </div>
-        <div className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'>
-          <i className='fa fa-fw fa-trash' />
-        </div>
-      </div>
-    )
-  }
+const EditContent = props => {
+  return (
+    <div className='d-flex align-items-center'>
+      <button
+        type='button'
+        className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'
+        onClick={props.onClickArchiveBtn}
+      >
+        <i className='fa fa-fw fa-archive' />
+      </button>
+      <button
+        type='button'
+        className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'
+        onClick={props.onClickDeleteBtn}
+      >
+        <i className='fa fa-fw fa-trash' />
+      </button>
+    </div>
+  )
 }
 
 export default EditContent

src/component/OptionComponent/NewVersionBtn.jsx

@@ -1,17 +1,15 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-class NewVersionBtn extends Component {
-  render () {
-    return (
-      <div
-        className='wsContentGeneric__option__menu__addversion newversionbtn btn btn-outline-primary mr-auto'
-        onClick={this.props.onClickNewVersionBtn}
-      >
-        Nouvelle version
-        <i className='fa fa-plus-circle ml-3' />
-      </div>
-    )
-  }
+const NewVersionBtn = props => {
+  return (
+    <div
+      className='wsContentGeneric__option__menu__addversion newversionbtn btn btn-outline-primary mr-auto'
+      onClick={props.onClickNewVersionBtn}
+    >
+      Nouvelle version
+      <i className='fa fa-plus-circle ml-3' />
+    </div>
+  )
 }
 
 export default NewVersionBtn

src/component/OptionComponent/StatusContent.jsx

@@ -1,12 +0,0 @@
-import React, { Component } from 'react'
-import SelectStatus from '../Input/SelectStatus/SelectStatus.jsx'
-
-class StatusContent extends Component {
-  render () {
-    return (
-      <SelectStatus />
-    )
-  }
-}
-
-export default StatusContent

src/component/PopinFixed/PopinFixed.styl

@@ -66,7 +66,8 @@
       &__action
         margin 5px 10px 0 0
         font-size 18px
-        cursor pointer
+        background-color transparent
+        border none
         &:hover , &:focus
           color blue
   &__content

src/component/PopinFixed/PopinFixedOption.jsx

@@ -3,9 +3,9 @@ import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import { translate } from 'react-i18next'
 import i18n from '../../i18n.js'
-import StatusContent from '../OptionComponent/StatusContent.jsx'
 import NewVersionBtn from '../OptionComponent/NewVersionBtn.jsx'
 import EditContent from '../OptionComponent/EditContent.jsx'
+import SelectStatus from '../Input/SelectStatus/SelectStatus.jsx'
 
 const PopinFixedOption = props => {
   translate.setI18n(props.i18n ? props.i18n : i18n) // mandatory to allow Apps to overrides trad
@@ -16,9 +16,16 @@ const PopinFixedOption = props => {
 
         <NewVersionBtn onClickNewVersionBtn={props.onClickNewVersionBtn} />
 
-        <StatusContent />
+        <SelectStatus
+          selectedStatus={props.selectedStatus}
+          availableStatus={props.availableStatus}
+          onChangeStatus={props.onChangeStatus}
+        />
 
-        <EditContent />
+        <EditContent
+          onClickArchiveBtn={props.onClickArchive}
+          onClickDeleteBtn={props.onClickDelete}
+        />
 
       </div>
     </div>
@@ -28,11 +35,15 @@ const PopinFixedOption = props => {
 export default translate()(PopinFixedOption)
 
 PopinFixedOption.propTypes = {
+  selectedStatus: PropTypes.object,
+  availableStatus: PropTypes.array,
   i18n: PropTypes.object, // translate resource to overrides default one,
-  onClickNewVersionBtn: PropTypes.func
+  onClickNewVersionBtn: PropTypes.func,
+  onChangeStatus: PropTypes.func
 }
 
 PopinFixedOption.defaultProps = {
+  availableStatus: [],
   i18n: {},
   onClickNewVersionBtn: () => {}
 }

src/index.dev.js

@@ -22,21 +22,60 @@ ReactDOM.render(
     <PopinFixed customClass={`${'randomClass'}`}>
       <PopinFixedHeader
         customClass={`${'randomClass'}`}
-        icon={'fa fa-file-word-o'}
+        faIcon={'fa fa-file-word-o'}
         name={'test exemple'}
         onClickCloseBtn={() => {}}
       />
 
-      <PopinFixedOption customClass={`${'randomClass'}`} />
+      <PopinFixedOption
+        customClass={`${'randomClass'}`}
+        onClickNewVersionBtn={() => {}}
+        selectedStatus={{
+          label: 'Open',
+          slug: 'open',
+          faIcon: 'square-o',
+          hexcolor: '#3f52e3',
+          globalStatus: 'open'
+        }}
+        availableStatus={[{
+          label: 'Open',
+          slug: 'open',
+          faIcon: 'square-o',
+          hexcolor: '#3f52e3',
+          globalStatus: 'open'
+        }, {
+          label: 'Validated',
+          slug: 'closed-validated',
+          faIcon: 'check-square-o',
+          hexcolor: '#008000',
+          globalStatus: 'closed'
+        }, {
+          label: 'Cancelled',
+          slug: 'closed-unvalidated',
+          faIcon: 'close',
+          hexcolor: '#f63434',
+          globalStatus: 'closed'
+        }, {
+          label: 'Deprecated',
+          slug: 'closed-deprecated',
+          faIcon: 'warning',
+          hexcolor: '#ababab',
+          globalStatus: 'closed'
+        }]}
+        onChangeStatus={newStatus => console.log('newStatus', newStatus)}
+        onClickArchive={() => console.log('btn archive clicked')}
+        onClickDelete={() => console.log('btn delete clicked')}
+      />
 
       <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
         <div>
           <Delimiter />
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
           <BtnSwitch />
-          <TextAreaApp customClass={'randomClass'} text={'woot'} />
+          {/* <TextAreaApp customClass={'randomClass'} text={'woot'} /> */}
         </div>
 
+        {/*
         <Timeline
           customClass={`${'randomClass'}__contentpage`}
           loggedUser={{
@@ -46,6 +85,7 @@ ReactDOM.render(
           }}
           timelineData={TimelineDebugData}
         />
+        */}
       </PopinFixedContent>
     </PopinFixed>
   </div>