48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import 'core-js/fn/promise'
|
|
|
|
import React from 'react'
|
|
import { render } from 'react-dom'
|
|
import { connect, Provider } from 'react-redux'
|
|
import { createStore } from 'redux'
|
|
import reducers from './reducers'
|
|
import { changeThemeColour } from './actions'
|
|
import Layout from './containers/Layout'
|
|
import { SliderPicker } from 'react-color'
|
|
|
|
let store = createStore(reducers)
|
|
|
|
@connect(
|
|
state => ({ couleur: state.themeColours.colour }),
|
|
dispatch => ({
|
|
changeColour: colour => dispatch(changeThemeColour(colour))
|
|
})
|
|
)
|
|
class MyComponent extends React.Component {
|
|
changeColour = ({ hex }) => this.props.changeColour(hex)
|
|
render() {
|
|
return (
|
|
<div>
|
|
<p className="indication">
|
|
Visualisez sur cette page l'apparence du module pour différentes
|
|
couleurs principales.
|
|
</p>
|
|
<SliderPicker
|
|
color={this.props.couleur}
|
|
onChangeComplete={this.changeColour}
|
|
/>
|
|
<p className="indication">
|
|
La couleur sélectionnée, à déclarer comme attribut "data-couleur" du
|
|
script sur votre page est : <b>{this.props.couleur}</b>
|
|
</p>
|
|
<Layout />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
render(
|
|
<Provider store={store}>
|
|
<MyComponent />
|
|
</Provider>,
|
|
document.querySelector('#coulorChooser')
|
|
)
|