Permalink
Browse files

Add an initial ColorPickerDialog

  • Loading branch information...
markerikson committed Jul 16, 2017
1 parent 9c6166e commit a035b81ba0d055862b434153588cf817aac3461c
@@ -0,0 +1,65 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {
Modal,
Button,
} from "semantic-ui-react";
import {SketchPicker} from "react-color";
import {closeModal} from "features/modals/modalActions";
import {noop} from "common/utils/clientUtils";
const actions = {closeModal};
export class ColorPickerDialog extends Component {
constructor(props) {
super();
this.state = {
color : props.color
}
}
onSelectClicked = () => {
this.props.colorSelected(this.state.color);
this.props.closeModal();
}
onSelectedColorChanged = (colorEvent) => {
this.setState({color : colorEvent.hex});
}
render() {
const {closeModal} = this.props;
return (
<Modal
closeIcon="close"
open={true}
onClose={closeModal}
size="small"
>
<Modal.Header>Select Color</Modal.Header>
<Modal.Content>
<SketchPicker
color={this.state.color}
onChangeComplete={this.onSelectedColorChanged}
/>
</Modal.Content>
<Modal.Actions>
<Button positive onClick={this.onSelectClicked}>Select</Button>
<Button secondary onClick={closeModal}>Cancel</Button>
</Modal.Actions>
</Modal>
)
}
}
ColorPickerDialog.defaultProps = {
color : "red",
colorSelected : noop
};
export default connect(null, actions)(ColorPickerDialog);
@@ -16,4 +16,6 @@ export function getValueFromEvent(e) {
}
return newValues;
}
}
export const noop = () => {};
@@ -2,9 +2,11 @@ import React, {Component} from "react";
import {connect} from "react-redux";
import TestModal from "./TestModal";
import ColorPickerDialog from "common/components/ColorPickerDialog";
const modalComponentLookupTable = {
TestModal
ColorPickerDialog,
TestModal,
};
const mapState = (state) => ({currentModals : state.modals});
@@ -13,7 +13,7 @@ const actions = {loadUnitData, openModal};
class Tools extends Component {
onOpenModalClicked = () => {
this.props.openModal("TestModal", {counter : 1});
this.props.openModal("ColorPickerDialog");
}
render() {

0 comments on commit a035b81

Please sign in to comment.