forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PLT-6739 Convert theme color pickers to use react-color (mattermost#108)
* Add color input component * Add ColorChooser component Add component for choosing color in custom_theme_chooser.jsx * Use custom chooser isntead of bootstrap color picker * Configure enzyme to work with react 15 After updating enzyme to 3(commit: mattermost@561b93b) Need to add Adapter for enzyme(http:https://airbnb.io/enzyme/docs/guides/migration-from-2-to-3.html) * Add snapshot tests for ColorInput component * Add test for ColorChooser component * Fix test for ColorChooser * Update dependencies for enzyme-adapter-react-15
- Loading branch information
Showing
11 changed files
with
462 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See License.txt for license information. | ||
|
|
||
| import React from 'react'; | ||
| import ReactDom from 'react-dom'; | ||
| import PropTypes from 'prop-types'; | ||
| import {ChromePicker} from 'react-color'; | ||
|
|
||
| class ColorInput extends React.Component { | ||
| static propTypes = { | ||
|
|
||
| /* | ||
| * Selected color | ||
| */ | ||
| color: PropTypes.string.isRequired, | ||
|
|
||
| /* | ||
| * Function called when color changed. Takes hex format of color Ex: #ffeec0 | ||
| */ | ||
| onChange: PropTypes.func | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| idOpened: false | ||
| }; | ||
| } | ||
|
|
||
| componentDidUpdate(prevProps, prevState) { | ||
| const {isOpened: prevIsOpened} = prevState; | ||
| const {isOpened} = this.state; | ||
|
|
||
| if (isOpened !== prevIsOpened) { | ||
| if (isOpened) { | ||
| document.addEventListener('click', this.checkClick); | ||
| } else { | ||
| document.removeEventListener('click', this.checkClick); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| checkClick = (e) => { | ||
| const colorPickerDOMNode = ReactDom.findDOMNode(this.colorPicker); | ||
| if (!colorPickerDOMNode.contains(e.target)) { | ||
| this.setState({isOpened: false}); | ||
| } | ||
| }; | ||
|
|
||
| togglePicker = () => { | ||
| this.setState({isOpened: !this.state.isOpened}); | ||
| }; | ||
|
|
||
| handleChange = (newColorData) => { | ||
| const {hex} = newColorData; | ||
| const {onChange: handleChange} = this.props; | ||
|
|
||
| if (handleChange) { | ||
| handleChange(hex); | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const {color} = this.props; | ||
| const {isOpened} = this.state; | ||
|
|
||
| return ( | ||
| <div className='color-input input-group'> | ||
| <input | ||
| className='form-control' | ||
| type='text' | ||
| value={color} | ||
| style={{ | ||
| background: '#fff' | ||
| }} | ||
| readOnly={true} | ||
| /> | ||
| <span | ||
| className='input-group-addon' | ||
| onClick={this.togglePicker} | ||
| > | ||
| <i | ||
| className='color-icon' | ||
| style={{ | ||
| backgroundColor: color | ||
| }} | ||
| /> | ||
| </span> | ||
| {isOpened && ( | ||
| <div | ||
| ref={(item) => { | ||
| this.colorPicker = item; | ||
| }} | ||
| className='color-popover' | ||
| > | ||
| <ChromePicker | ||
| color={color} | ||
| onChange={this.handleChange} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ColorInput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See License.txt for license information. | ||
|
|
||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import ColorInput from 'components/color_input'; | ||
|
|
||
| class ColorChooser extends React.Component { | ||
| static propTypes = { | ||
|
|
||
| /* | ||
| * The id of setting that we will change | ||
| */ | ||
| id: PropTypes.string.isRequired, | ||
|
|
||
| /* | ||
| * The label of setting that we will choose | ||
| */ | ||
| label: PropTypes.string.isRequired, | ||
|
|
||
| /* | ||
| * Selected color | ||
| */ | ||
| color: PropTypes.string.isRequired, | ||
|
|
||
| /* | ||
| * Function called when color changed takes 2 arguments: Id of changing setting and new color | ||
| */ | ||
| onChange: PropTypes.func | ||
| } | ||
|
|
||
| handleChange = (newColor) => { | ||
| const {id, onChange: handleChange} = this.props; | ||
| if (handleChange) { | ||
| handleChange(id, newColor); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const {label, color} = this.props; | ||
| return ( | ||
| <div> | ||
| <label className='custom-label'>{label}</label> | ||
| <ColorInput | ||
| color={color} | ||
| onChange={this.handleChange} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ColorChooser; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| @charset 'UTF-8'; | ||
|
|
||
| .color-input { | ||
| position: relative; | ||
| } | ||
|
|
||
| .color-icon { | ||
| display: inline-block; | ||
| width: 16px; | ||
| height: 16px; | ||
| } | ||
|
|
||
| .color-popover { | ||
| position: absolute; | ||
| top: 100%; | ||
| right: 0; | ||
| padding-top: 8px; | ||
| z-index: 12; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,3 +23,4 @@ | |
| @import 'tutorial'; | ||
| @import 'videos'; | ||
| @import 'webrtc'; | ||
| @import 'color-input'; | ||
Oops, something went wrong.