Skip to content

Commit

Permalink
allow passing initialValues as wizard prop alternatively
Browse files Browse the repository at this point in the history
  • Loading branch information
smanousopoulos committed Oct 13, 2017
1 parent 922992f commit dd65796
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 26 deletions.
4 changes: 1 addition & 3 deletions example/src/examples/wizard4.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function WizardExample4 (props) {
initialActive='colors'
initialValues={{
fork: 'colors',
colors: ['blue'],
colors: ['red', 'green'],
confirm: '',
}}
{...props}
Expand All @@ -68,7 +68,6 @@ export function WizardExample4 (props) {
if (!value)
throw 'You must select one';
}}
initialValue='colors'
next={value => value === 'finish' ? 'confirm' : 'colors'}
/>
<SelectColors
Expand All @@ -82,7 +81,6 @@ export function WizardExample4 (props) {
id='confirm'
title='Confirmation'
description='Please confirm'
initialValue=''
/>
</Wizard>
);
Expand Down
51 changes: 31 additions & 20 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,17 @@ var createWizard = function createWizard() {
}, {
key: '_getInitialValues',
value: function _getInitialValues() {
var _this2 = this;

return this.wizardItems.reduce(function (p, c) {
var d = _extends({}, p);
d[c.props.id] = c.props.initialValue;
var initialValue = c.props.initialValue != null ? c.props.initialValue : _this2.props.initialValues && _this2.props.initialValues[c.props.id];

if (initialValue == null) {
throw new Error('Wizard: No initialValue set for ' + c.props.id + '.' + 'You can either provide initialValue as step prop or all initialValues as Wizard Component prop');
}

d[c.props.id] = initialValue;
return d;
}, {});
}
Expand Down Expand Up @@ -164,18 +172,18 @@ var createWizard = function createWizard() {
}, {
key: '_getSteps',
value: function _getSteps() {
var _this2 = this;
var _this3 = this;

var path = this._getPath(this.wizardItems[0].props.id, 'complete', this.state.values);
return path.map(function (id, idx) {
return {
id: id,
index: idx,
title: _this2._getWizardItem(id).props.title,
cleared: _this2.state.cleared.find(function (it) {
title: _this3._getWizardItem(id).props.title,
cleared: _this3.state.cleared.find(function (it) {
return it === id;
}) ? true : false,
active: _this2._isActive(id)
active: _this3._isActive(id)
};
});
}
Expand Down Expand Up @@ -275,17 +283,17 @@ var createWizard = function createWizard() {
}, {
key: '_validate',
value: function _validate(id, value) {
var _this3 = this;
var _this4 = this;

var item = this._getWizardItem(id);
var validate = item.props.validate;

return Promise.resolve().then(function () {
return validate(value);
}).then(function () {
_this3._setValidationClear(id);return value;
_this4._setValidationClear(id);return value;
}).catch(function (err) {
_this3._setValidationFail(id, err);throw err;
_this4._setValidationFail(id, err);throw err;
});
}
}, {
Expand All @@ -298,7 +306,7 @@ var createWizard = function createWizard() {
}, {
key: '_onNextClicked',
value: function _onNextClicked() {
var _this4 = this;
var _this5 = this;

var promiseOnNext = this.props.promiseOnNext;

Expand All @@ -311,8 +319,8 @@ var createWizard = function createWizard() {
var value = this.state.values[id];

return this._validate(id, value).then(function (value) {
_this4._pushCleared(id);
_this4._setActiveById(next(value));
_this5._pushCleared(id);
_this5._setActiveById(next(value));
return value;
}, function (err) {
if (promiseOnNext) {
Expand Down Expand Up @@ -353,7 +361,7 @@ var createWizard = function createWizard() {
}, {
key: 'render',
value: function render() {
var _this5 = this;
var _this6 = this;

var _state = this.state,
cleared = _state.cleared,
Expand All @@ -372,13 +380,13 @@ var createWizard = function createWizard() {

var value = values[id];
var error = errors[id];
var Child = _react2.default.Children.toArray(_this5.props.children).find(function (c, cidx) {
var Child = _react2.default.Children.toArray(_this6.props.children).find(function (c, cidx) {
return cidx === idx;
});
return _react2.default.createElement(Component.type, _extends({
key: id,
completed: completed,
isActive: _this5._isActive(id),
isActive: _this6._isActive(id),
isLast: next(value) === 'complete',
hasNext: next(value) !== 'complete' && next(value) != null,
hasPrevious: cleared.length > 0,
Expand All @@ -388,7 +396,7 @@ var createWizard = function createWizard() {
return s.active;
}),
steps: steps
}, _this5.props.childrenProps, Component.props, Child.props));
}, _this6.props.childrenProps, Component.props, Child.props));
})
);
}
Expand All @@ -402,13 +410,16 @@ var createWizard = function createWizard() {
Wizard.defaultProps = {
promiseOnNext: false,
validateLive: false,
childrenProps: {}
childrenProps: {},
initialValues: {}
};

Wizard.propTypes = {
onComplete: _react2.default.PropTypes.func, //onComplete callback function to execute
promiseOnNext: _react2.default.PropTypes.bool, //option to return promise in onNextClicked function
validateLive: _react2.default.PropTypes.bool, //option to validate on user-input, otherwise only on next
initialActive: _react2.default.PropTypes.string, // pass step id to start from step other than first.
initialValues: _react2.default.PropTypes.object, // alternative way to pass initialValues for children
childrenProps: _react2.default.PropTypes.object, //pass extra properties to all children
children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.element), _react2.default.PropTypes.object]).isRequired
};
Expand Down Expand Up @@ -440,10 +451,10 @@ var createWizardItem = function createWizardItem(WizardItemInner, WizardItemWrap
function WizardItem(props) {
_classCallCheck(this, WizardItem);

var _this6 = _possibleConstructorReturn(this, (WizardItem.__proto__ || Object.getPrototypeOf(WizardItem)).call(this, props));
var _this7 = _possibleConstructorReturn(this, (WizardItem.__proto__ || Object.getPrototypeOf(WizardItem)).call(this, props));

_this6.renderWizardItem = renderWizardItem.bind(_this6);
return _this6;
_this7.renderWizardItem = renderWizardItem.bind(_this7);
return _this7;
}

_createClass(WizardItem, [{
Expand Down Expand Up @@ -479,7 +490,7 @@ var createWizardItem = function createWizardItem(WizardItemInner, WizardItemWrap
id: _react2.default.PropTypes.string.isRequired, // id is required
title: _react2.default.PropTypes.string,
description: _react2.default.PropTypes.string,
initialValue: _react2.default.PropTypes.any.isRequired, //initialValue required to define return value expected type
initialValue: _react2.default.PropTypes.any, //initialValue defines return value expected type
validate: _react2.default.PropTypes.func, // ex. value => !value ? throw 'Error' : null
next: _react2.default.PropTypes.func // ex. value => value == 1 ? 'id1' : 'id2'
};
Expand Down
18 changes: 15 additions & 3 deletions src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,16 @@ const createWizard = (WizardItemWrapper=null) => {
_getInitialValues() {
return this.wizardItems.reduce((p, c) => {
const d = {...p};
d[c.props.id] = c.props.initialValue;
const initialValue = c.props.initialValue != null ?
c.props.initialValue
: (this.props.initialValues && this.props.initialValues[c.props.id]);

if (initialValue == null) {
throw new Error(`Wizard: No initialValue set for ${c.props.id}.` +
`You can either provide initialValue as step prop or all initialValues as Wizard Component prop`);
}

d[c.props.id] = initialValue;
return d;
}, {});
}
Expand Down Expand Up @@ -302,13 +311,16 @@ const createWizard = (WizardItemWrapper=null) => {
Wizard.defaultProps = {
promiseOnNext: false,
validateLive: false,
childrenProps: {}
childrenProps: {},
initialValues: {},
};

Wizard.propTypes = {
onComplete: React.PropTypes.func, //onComplete callback function to execute
promiseOnNext: React.PropTypes.bool, //option to return promise in onNextClicked function
validateLive: React.PropTypes.bool, //option to validate on user-input, otherwise only on next
initialActive: React.PropTypes.string, // pass step id to start from step other than first.
initialValues: React.PropTypes.object, // alternative way to pass initialValues for children
childrenProps: React.PropTypes.object, //pass extra properties to all children
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
Expand Down Expand Up @@ -376,7 +388,7 @@ const createWizardItem = (WizardItemInner, WizardItemWrapper) => {
id: React.PropTypes.string.isRequired, // id is required
title: React.PropTypes.string,
description: React.PropTypes.string,
initialValue: React.PropTypes.any.isRequired, //initialValue required to define return value expected type
initialValue: React.PropTypes.any, //initialValue defines return value expected type
validate: React.PropTypes.func, // ex. value => !value ? throw 'Error' : null
next: React.PropTypes.func, // ex. value => value == 1 ? 'id1' : 'id2'
};
Expand Down

0 comments on commit dd65796

Please sign in to comment.