<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tsdexter/pen/zNKEoO" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="cp-pen-styles"></style></head><body>
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js'></script>
<script >'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var layout = {
elements: [{
type: 'row',
elements: [{
type: 'col',
props: {
xsCols: 3,
smCols: 3,
mdCols: 3,
lgCols: 3
},
elements: [{
type: "textbox",
label: "Enter some shit",
value: "some shit"
}, {
type: "dropdown",
label: "Please choose a thing",
items: [{
label: 'not a thing',
value: '1',
selected: false
}, {
label: 'a thing',
value: '2',
selected: true
}]
}, {
type: 'yesNo',
label: "Do you like shit?",
value: "yes"
}]
}]
}]
};
var Row = function (_React$Component) {
_inherits(Row, _React$Component);
function Row(props) {
_classCallCheck(this, Row);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = { cols: props.cols };
_this.addCol = _this.addCol.bind(_this);
return _this;
}
Row.prototype.addCol = function addCol() {
this.setState(function (prevState, props) {
var els = prevState.cols.elements;
els.push({
type: 'col',
props: {
xsCols: 3,
smCols: 3,
mdCols: 3,
lgCols: 3
},
elements: []
});
return els;
});
};
Row.prototype.render = function render() {
var styles = {
// minHeight: 30,
// border: "2px dashed black",
// backgroundColor: "#ccc",
// margin: 5,
// padding: 15
};
return React.createElement(
'div',
{ className: 'row', style: styles },
this.state.cols.elements.map(function (col, i) {
return React.createElement(Col, { checks: col, xsCols: col.props.xsCols, smCols: col.props.smCols, mdCols: col.props.mdCols, lgCols: col.props.lgCols });
}),
React.createElement(
'div',
{ style: { clear: "both" } },
React.createElement(
'center',
null,
React.createElement(
'button',
{ className: 'addCol', onClick: this.addCol },
'Add column'
)
)
)
);
};
return Row;
}(React.Component);
var Col = function (_React$Component2) {
_inherits(Col, _React$Component2);
function Col(props) {
_classCallCheck(this, Col);
var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props));
var xsCols = 12 / props.xsCols;
var smCols = 12 / props.smCols;
var mdCols = 12 / props.mdCols;
var lgCols = 12 / props.lgCols;
_this2.state = {
checks: props.checks,
xsCols: xsCols,
smCols: smCols,
mdCols: mdCols,
lgCols: lgCols
};
_this2.narrower = _this2.narrower.bind(_this2);
_this2.wider = _this2.wider.bind(_this2);
_this2.addCheck = _this2.addCheck.bind(_this2);
return _this2;
}
Col.prototype.narrower = function narrower() {
this.setState(function (prevState, props) {
return {
xsCols: prevState.xsCols == 1 ? 1 : prevState.xsCols - 1,
smCols: prevState.smCols == 1 ? 1 : prevState.smCols - 1,
mdCols: prevState.mdCols == 1 ? 1 : prevState.mdCols - 1,
lgCols: prevState.lgCols == 1 ? 1 : prevState.lgCols - 1
};
});
};
Col.prototype.wider = function wider() {
this.setState(function (prevState, props) {
return {
xsCols: prevState.xsCols == 12 ? 12 : prevState.xsCols + 1,
smCols: prevState.smCols == 12 ? 12 : prevState.smCols + 1,
mdCols: prevState.mdCols == 12 ? 12 : prevState.mdCols + 1,
lgCols: prevState.lgCols == 12 ? 12 : prevState.lgCols + 1
};
});
};
Col.prototype.addCheck = function addCheck(e) {
e.preventDefault();
e.stopPropagation();
var checkType = e.target.value;
e.target.value = 'none';
this.setState(function (prevState, props) {
var checks = prevState.checks.elements;
if (checkType == 'textbox') {
checks.push({
type: "textbox"
});
} else if (checkType == 'dropdown') {
checks.push({
type: "dropdown",
items: [{ label: '', value: '', selected: false }]
});
} else if (checkType == 'yesNo') {
checks.push({
type: "yesNo",
items: [{ label: '', value: '' }]
});
}
return checks;
});
};
Col.prototype.render = function render() {
var _this3 = this;
var styles = {
// minHeight: 30,
// border: "2px dashed black",
// backgroundColor: "#eee",
// padding: 10,
// marginBottom: 15
};
var classes = 'col-xs-' + this.state.xsCols + ' col-sm-' + this.state.smCols + ' col-md-' + this.state.mdCols + ' col-lg-' + this.state.lgCols;
var checks = [];
this.state.checks.elements.map(function (check, i) {
if (check.type == 'textbox') {
checks.push(React.createElement(CheckTextBox, { config: check }));
} else if (check.type == 'dropdown') {
checks.push(React.createElement(CheckDropDown, { config: check }));
} else if (check.type == 'yesNo') {
checks.push(React.createElement(CheckYesNo, { config: check }));
}
});
return React.createElement(
'div',
{ className: classes },
React.createElement(
'div',
{ className: 'col', style: styles },
React.createElement(
'div',
{ className: 'colSizer' },
'Width: ',
React.createElement(
'button',
{
onClick: this.narrower },
'-'
),
React.createElement(
'button',
{
onClick: this.wider },
'+'
)
),
React.createElement(
'div',
{ className: 'checks' },
checks.map(function (check, i) {
return React.createElement(
'div',
{ className: 'checkWrapper' },
check
);
})
),
React.createElement(
'form',
{ className: 'addCheck form-inline', style: { border: "1px dashed black", textAlign: "center", padding: 5 } },
React.createElement(
'label',
{ className: 'mr-sm-2', 'for': 'inlineFormCustomSelect' },
'Add field'
),
' ',
React.createElement(
'select',
{ onChange: this.addCheck, className: 'custom-select mb-2 mr-sm-2 mb-sm-0', id: 'inlineFormCustomSelect', ref: function ref(input) {
return _this3.checkType = input;
} },
React.createElement(
'option',
{ value: 'none', selected: true },
'Choose...'
),
React.createElement(
'option',
{ value: 'textbox' },
'Textbox'
),
React.createElement(
'option',
{ value: 'dropdown' },
'Dropdown'
),
React.createElement(
'option',
{ value: 'yesNo' },
'Yes / No'
)
),
' '
)
)
);
};
return Col;
}(React.Component);
var CheckTextBox = function (_React$Component3) {
_inherits(CheckTextBox, _React$Component3);
function CheckTextBox(props) {
_classCallCheck(this, CheckTextBox);
var _this4 = _possibleConstructorReturn(this, _React$Component3.call(this, props));
_this4.state = { config: props.config, edit: false };
_this4.saveConfig = _this4.saveConfig.bind(_this4);
_this4.editCheck = _this4.editCheck.bind(_this4);
return _this4;
}
CheckTextBox.prototype.editCheck = function editCheck(e) {
e.preventDefault();
e.stopPropagation();
this.setState(function (prevState, props) {
return { edit: true };
});
};
CheckTextBox.prototype.saveConfig = function saveConfig(e) {
var _this5 = this;
e.preventDefault();
e.stopPropagation();
this.setState(function (prevState, props) {
return { config: {
type: 'textbox',
label: _this5.refs.label.value,
value: _this5.refs.defaultValue.value
}, edit: false };
});
};
CheckTextBox.prototype.render = function render() {
if (!this.state.config.label || this.state.edit) {
return React.createElement(
'form',
{ onSubmit: this.saveConfig },
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
'Please set a label'
),
React.createElement('input', { ref: 'label', className: 'form-control', type: 'text', placeholder: 'ie: Email address', value: this.state.config.label })
),
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
'Default value (optional)'
),
React.createElement('input', { ref: 'defaultValue', className: 'form-control', type: 'text', placeholder: 'ie: hi@me.com', value: this.state.config.value })
),
React.createElement(
'button',
{ type: 'submit', className: 'btn btn-sm btn-primary' },
'Save'
)
);
} else {
return React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
this.state.config.label
),
React.createElement(
'button',
{ className: 'btnEdit btn btn-xs btn-primary pull-right', onClick: this.editCheck },
'Edit'
),
React.createElement('input', { className: 'form-control', type: 'text', value: this.state.config.value })
);
}
};
return CheckTextBox;
}(React.Component);
var CheckDropDown = function (_React$Component4) {
_inherits(CheckDropDown, _React$Component4);
function CheckDropDown(props) {
_classCallCheck(this, CheckDropDown);
var _this6 = _possibleConstructorReturn(this, _React$Component4.call(this, props));
_this6.state = { config: props.config, edit: false };
_this6.saveConfig = _this6.saveConfig.bind(_this6);
_this6.editCheck = _this6.editCheck.bind(_this6);
return _this6;
}
CheckDropDown.prototype.editCheck = function editCheck(e) {
e.preventDefault();
e.stopPropagation();
this.setState(function (prevState, props) {
return { edit: true };
});
};
CheckDropDown.prototype.saveConfig = function saveConfig(e) {
var _this7 = this;
e.preventDefault();
e.stopPropagation();
this.setState(function (prevState, props) {
return { config: {
type: 'textbox',
label: _this7.refs.label.value,
items: [{
label: _this7.refs.defaultLabel.value,
value: _this7.refs.defaultValue.value,
selected: _this7.refs.defaultSelected.value
}]
}, edit: false };
});
};
CheckDropDown.prototype.render = function render() {
var options = [];
this.state.config.items.map(function (item, i) {
options.push(React.createElement(
'option',
{ selected: item.selected, value: item.value },
item.label
));
});
if (!this.state.config.label || this.state.edit) {
return React.createElement(
'form',
{ onSubmit: this.saveConfig },
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
'Please set a label'
),
React.createElement('input', { ref: 'label', className: 'form-control', type: 'text', placeholder: 'ie: Make a selection', value: this.state.config.label })
),
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
'Options'
),
this.state.config.items.map(function (item, i) {
return React.createElement(
'div',
null,
React.createElement('input', { ref: 'defaultLabel', className: 'form-control', type: 'text', placeholder: 'Option label', value: item.label }),
React.createElement('input', { ref: 'defaultValue', className: 'form-control', type: 'text', placeholder: 'Option value', value: item.value }),
'Pre-selected? ',
React.createElement('input', { ref: 'defaultSelected', type: 'checkbox', selected: item.selected })
);
})
),
React.createElement(
'button',
{ type: 'submit', className: 'btn btn-sm btn-primary' },
'Save'
)
);
} else {
return React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
this.state.config.label
),
React.createElement(
'button',
{ className: 'btnEdit btn btn-xs btn-primary pull-right', onClick: this.editCheck },
'Edit'
),
React.createElement(
'select',
{ className: 'form-control' },
options
)
);
}
};
return CheckDropDown;
}(React.Component);
var CheckYesNo = function (_React$Component5) {
_inherits(CheckYesNo, _React$Component5);
function CheckYesNo(props) {
_classCallCheck(this, CheckYesNo);
var _this8 = _possibleConstructorReturn(this, _React$Component5.call(this, props));
_this8.state = { config: props.config, edit: false };
_this8.saveConfig = _this8.saveConfig.bind(_this8);
_this8.editCheck = _this8.editCheck.bind(_this8);
_this8.setValue = _this8.setValue.bind(_this8);
return _this8;
}
CheckYesNo.prototype.setValue = function setValue(e) {
var val = "yes";
if (e.target.value == "no") {
val = "no";
}
this.setState(function (prevState, props) {
return { config: {
type: 'yesNo',
label: prevState.config.label,
value: val
}, edit: false };
});
this.refs.yesButton.className = "btn btn-default";
this.refs.noButton.className = "btn btn-default";
e.target.className = "btn btn-default btn-primary";
};
CheckYesNo.prototype.editCheck = function editCheck(e) {
e.preventDefault();
e.stopPropagation();
this.setState(function (prevState, props) {
return { edit: true };
});
};
CheckYesNo.prototype.saveConfig = function saveConfig(e) {
var _this9 = this;
e.preventDefault();
e.stopPropagation();
this.setState(function (prevState, props) {
return { config: {
type: 'yesNo',
label: _this9.refs.label.value,
value: _this9.refs.defaultValue.value
}, edit: false };
});
};
CheckYesNo.prototype.render = function render() {
if (!this.state.config.label || this.state.edit) {
return React.createElement(
'form',
{ onSubmit: this.saveConfig },
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
'Please set a label'
),
React.createElement('input', { ref: 'label', className: 'form-control', type: 'text', placeholder: 'ie: Do you like shit?', value: this.state.config.label })
),
React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
'Default value (optional)'
),
React.createElement(
'select',
{ ref: 'defaultValue', className: 'form-control', type: 'text', value: this.state.config.value },
React.createElement(
'option',
{ value: '' },
'None'
),
React.createElement(
'option',
{ value: 'yes' },
'Yes'
),
React.createElement(
'option',
{ value: 'no' },
'No'
)
)
),
React.createElement(
'button',
{ type: 'submit', className: 'btn btn-sm btn-primary' },
'Save'
)
);
} else {
var yesClass = "btn btn-default";
var noClass = "btn btn-default";
if (this.state.config.value == "yes") {
yesClass = "btn btn-default btn-primary";
}
if (this.state.config.value == "no") {
noClass = "btn btn-default btn-primary";
}
return React.createElement(
'div',
{ className: 'form-group' },
React.createElement(
'label',
null,
this.state.config.label
),
React.createElement(
'button',
{ className: 'btnEdit btn btn-xs btn-primary pull-right', onClick: this.editCheck },
'Edit'
),
React.createElement('br', null),
React.createElement(
'div',
{ className: 'btn-group', style: { clear: "both" }, role: 'group', 'aria-label': '...' },
React.createElement('input', { ref: 'hiddenValue', type: 'hidden', value: this.state.config.value }),
React.createElement(
'button',
{ ref: 'yesButton', value: 'yes', type: 'button', onClick: this.setValue, className: yesClass },
'Yes'
),
React.createElement(
'button',
{ ref: 'noButton', value: 'no', type: 'button', onClick: this.setValue, className: noClass },
'No'
)
)
);
}
};
return CheckYesNo;
}(React.Component);
var App = function (_React$Component6) {
_inherits(App, _React$Component6);
function App(props) {
_classCallCheck(this, App);
var _this10 = _possibleConstructorReturn(this, _React$Component6.call(this, props));
_this10.state = { layout: props.layout, view: props.view };
_this10.addRow = _this10.addRow.bind(_this10);
_this10.toggleView = _this10.toggleView.bind(_this10);
return _this10;
}
App.prototype.addRow = function addRow() {
this.setState(function (prevState, props) {
var els = prevState.layout.elements;
els.push({
type: 'row',
elements: []
});
return els;
});
};
App.prototype.toggleView = function toggleView() {
this.setState(function (prevState, props) {
var newView = "preview";
if (prevState.view == "preview") {
newView = "editor";
}
return { view: newView };
});
};
App.prototype.render = function render() {
var viewLabel = "Preview Form";
if (this.state.view == "preview") {
viewLabel = "Edit Form";
}
var styleTag = "";
if (this.state.view == "editor") {
styleTag = React.createElement(
'style',
null,
'.row ',
'{',
'min-height: 30px; border: 2px dashed black; background-color: #ccc; margin: 5px; padding: 15px;',
'}',
'.col ',
'{',
'min-height: 30px; border: 2px dashed black; background-color: #eee; padding: 10px; marginBottom: 15px;',
'}',
'.checkWrapper ',
'{',
'border: 1px dashed grey; margin-bottom:5px; margin-top:5px; padding:5px;',
'}'
);
} else if (this.state.view == "preview") {
styleTag = React.createElement(
'style',
null,
'.btnEdit, .colSizer, .addRow, .addCol, .addCheck ',
'{',
'display: none;',
'}',
'.row ',
'{',
'margin: 15px;',
'}'
);
}
return React.createElement(
'div',
null,
styleTag,
React.createElement(
'button',
{ onClick: this.toggleView, className: 'btn btn-default btn-primary', value: this.state.view },
viewLabel
),
this.state.layout.elements.map(function (row, i) {
return React.createElement(Row, { cols: row });
}),
React.createElement(
'div',
null,
React.createElement(
'center',
null,
React.createElement(
'button',
{ className: 'addRow', onClick: this.addRow },
'Add row'
)
)
)
);
};
return App;
}(React.Component);
ReactDOM.render(React.createElement(App, { layout: layout, view: 'preview' }), document.getElementById('root'));
//# sourceURL=pen.js
</script>
</body></html>
