Skip to content

Commit

Permalink
Merge pull request #12 from kadirahq/refactor
Browse files Browse the repository at this point in the history 
Refactored
  • Loading branch information
@roonyh
roonyh committed Aug 30, 2016
2 parents 781c2f2 + 15cbdbf commit aa433e6
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 69 deletions.
88 changes: 57 additions & 31 deletions src/components/Panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,83 +39,109 @@ export default class Panel extends React.Component {
super(props);
this._handleChange = this.handleChange.bind(this);
this._setFields = this.setFields.bind(this);
this._checkUrlAndsetFields = this.checkUrlAndsetFields.bind(this);
this._reset = this.reset.bind(this);
this._setInitialFields = this.setInitialFields.bind(this);
this._indicateReady = this.indicateReady.bind(this);

this.state = { fields: {} };
this.api = this.props.api;
}

componentWillMount() {
const urlState = this.api.getQueryParam('knobs');

if (urlState && urlState.length > 0) {
this.initialFields = JSON.parse(urlState);
}

if (this.initialFields) {
this.props.channel.on('addon:knobs:helloFromStory', this._setInitialFields);
this.setState({ fields: this.initialFields });
} else {
this.props.channel.on('addon:knobs:helloFromStory', this._indicateReady);
}
this.props.channel.on('addon:knobs:setFields', this._checkUrlAndsetFields);
}

componentDidMount() {
this.stopOnStory = this.api.onStory(() => {
this.api.setQueryParams({ knobs: null });
});

this.props.channel.on('addon:knobs:setFields', this._setFields);
this.props.channel.emit('addon:knobs:helloFromPanel');
}

componentWillUnmount() {
this.props.channel.removeListener('addon:knobs:setFields', this._setFields);
this.props.channel.removeListener('addon:knobs:helloFromStory', this._indicateReady);
this.props.channel.removeListener('addon:knobs:helloFromStory', this._setInitialFields);
this.stopOnStory();
}

setInitialFields() {
this.props.channel.emit('addon:knobs:initialFields', this.initialFields);
this.props.channel.removeListener('addon:knobs:helloFromStory', this._setInitialFields);
this.props.channel.on('addon:knobs:helloFromStory', this._indicateReady);
}

setFields(_fields) {
const fields = _fields;
const queryParams = {};
for (const f in fields) {
if (fields.hasOwnProperty(f)) {
queryParams[`knob-${f}`] = fields[f].value;
if (fields[f].type === 'object') {
fields[f].value = beautify(tosource(fields[f].value));
}
}
}
this.api.setQueryParams(queryParams);
this.setState({ fields });
this.api.setQueryParams({ knobs: JSON.stringify(fields) });
}

indicateReady() {
this.props.channel.emit('addon:knobs:panelReady');
checkUrlAndsetFields(_fields) {
const fields = _fields;
for (const name in fields) {
if (fields.hasOwnProperty(name)) {
let urlValue = this.api.getQueryParam(`knob-${name}`);
if (urlValue !== undefined) {
// When saved in url the information of whether number or string or bool is lost
// so have to convert numbers and booleans back.
switch (fields[name].type) {
case 'boolean':
urlValue = (urlValue === 'true');
break;
case 'number':
urlValue = Number(urlValue);
break;
default:
}

fields[name].value = urlValue;
this.props.channel.emit('addon:knobs:knobChange', { name, value: urlValue });
}
}
}
this.props.channel.removeListener('addon:knobs:setFields', this._checkUrlAndsetFields);
this.props.channel.on('addon:knobs:setFields', this._setFields);
this.setFields(fields);
}

reset() {
this.props.channel.emit('addon:knobs:reset');
}

handleChange(change) {
const { name, value } = change;
const { name, value, type } = change;

const fields = this.state.fields;
const changedField = {};
changedField[name] = { ...fields[name], ...{ value } };
const newFields = { ...fields, ...changedField };
this.setState({ fields: newFields });
this.api.setQueryParams({ knobs: JSON.stringify(newFields) });

this.props.channel.emit('addon:knobs:knobChange', change);
let formatedValue = value;
switch (type) {
case 'object':
try {
formatedValue = eval(`(${value})`); // eslint-disable-line no-eval
} catch (e) {
return;
}
break;
case 'number':
try {
formatedValue = Number(value);
} catch (e) {
return;
}
break;
default:
formatedValue = value;
}

const queryParams = {};
queryParams[`knob-${name}`] = formatedValue;
this.api.setQueryParams(queryParams);

this.props.channel.emit('addon:knobs:knobChange', { name, value: formatedValue });
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions src/components/PropField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ export default class PropField extends React.Component {
}

onChange(e) {
this.props.onChange(this.props.name, e.target.value);
this.props.onChange(e.target.value);
}

onChangeBool(e) {
this.props.onChange(this.props.name, e.target.checked);
this.props.onChange(e.target.checked);
}

onChangeObj(value) {
this.props.onChange(this.props.name, value);
this.props.onChange(value);
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions src/components/PropForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export default class propForm extends React.Component {
this._onFieldChange = this.onFieldChange.bind(this);
}

onFieldChange(name, value) {
const change = { name, value };
onFieldChange(name, type, value) {
const change = { name, type, value };
this.props.onFieldChange(change);
}

Expand All @@ -43,7 +43,7 @@ export default class propForm extends React.Component {
name={field.name}
type={field.type}
value={field.value}
onChange={this._onFieldChange}
onChange={this._onFieldChange.bind(null, field.name, field.type)}
/>
))}
</form>
Expand Down
34 changes: 2 additions & 32 deletions src/components/Wrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,20 @@ export default class Wrap extends React.Component {
this._knobChanged = this.knobChanged.bind(this);
this._resetKnobs = this.resetKnobs.bind(this);
this._knobsAreReset = false;
this.gotHello = () => {
this.props.channel.emit('addon:knobs:helloFromStory');
};
this.setPanelFields = () => {
this.props.channel.emit('addon:knobs:setFields', this.props.store);
};
}

componentDidMount() {
this.props.channel.on('addon:knobs:initialFields', this._initialPropsReceived);
this.props.channel.on('addon:knobs:knobChange', this._knobChanged);
this.props.channel.on('addon:knobs:reset', this._resetKnobs);
this.props.channel.on('addon:knobs:helloFromPanel', this.gotHello);
this.props.channel.on('addon:knobs:panelReady', this.setPanelFields);
this.props.channel.emit('addon:knobs:helloFromStory');
this.setPanelFields();
}

componentWillUnmount() {
this.props.channel.removeListener('addon:knobs:initialFields', this._initialPropsReceived);
this.props.channel.removeListener('addon:knobs:knobChange', this._knobChanged);
this.props.channel.removeListener('addon:knobs:reset', this._resetKnobs);
this.props.channel.removeListener('addon:knobs:helloFromPanel', this.gotHello);
this.props.channel.removeListener('addon:knobs:panelReady', this.setPanelFields);
}

initialPropsReceived(initialProps) {
Expand All @@ -41,29 +32,8 @@ export default class Wrap extends React.Component {

knobChanged(change) {
const { name, value } = change;
const { type } = this.props.store[name];

let formatedValue = value;
switch (type) {
case 'object':
try {
formatedValue = eval(`(${value})`); // eslint-disable-line no-eval
} catch (e) {
return;
}
break;
case 'number':
try {
formatedValue = Number(value);
} catch (e) {
return;
}
break;
default:
formatedValue = value;
}

this.props.store[name].value = formatedValue;
this.props.store[name].value = value;
this.forceUpdate();
}

Expand Down

0 comments on commit aa433e6

Please sign in to comment.