Permalink
Browse files

Allow ColorPicker to dispatch pre-built actions after selection

  • Loading branch information...
markerikson committed Jul 16, 2017
1 parent 8ad59aa commit 2bfcd6e329f47051cd9e1809addfa5cef6bc4048
@@ -8,9 +8,9 @@ import {
import {SketchPicker} from "react-color";
import {closeModal} from "features/modals/modalActions";
import {noop} from "common/utils/clientUtils";
import {colorSelected} from "./colorPickerActions";
const actions = {closeModal};
const actions = {closeModal, colorSelected};
export class ColorPickerDialog extends Component {
constructor(props) {
@@ -21,7 +21,7 @@ export class ColorPickerDialog extends Component {
}
onSelectClicked = () => {
this.props.colorSelected(this.state.color);
this.props.colorSelected(this.state.color, this.props.onColorPicked);
this.props.closeModal();
}
@@ -57,9 +57,8 @@ export class ColorPickerDialog extends Component {
}
ColorPickerDialog.defaultProps = {
color : "red",
colorSelected : noop
color : "red"
};
export default connect(null, actions)(ColorPickerDialog);
export default connect(null, actions)(ColorPickerDialog);
@@ -1,7 +1,27 @@
import _ from "lodash";
import {
openModal
} from "features/modals/modalActions";
export function showColorPicker(initialColor) {
return openModal("ColorPickerDialog", {color : initialColor});
export function showColorPicker(initialColor, onColorPickedAction) {
// Define props that we want to "pass" to the ColorPicker dialog,
// including the body of the action that should be dispatched when
// the dialog is actually used to select a color.
const colorPickerProps = {
color : initialColor,
onColorPicked : onColorPickedAction
};
return openModal("ColorPickerDialog", colorPickerProps);
}
export function colorSelected(color, actionToDispatch) {
return (dispatch) => {
if(actionToDispatch) {
const newAction = _.cloneDeep(actionToDispatch);
newAction.payload.color = color;
dispatch(newAction);
}
}
}

0 comments on commit 2bfcd6e

Please sign in to comment.