'use strict'; var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _reactBootstrap = require('react-bootstrap'); var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); var _lodash = require('lodash.template'); var _lodash2 = _interopRequireDefault(_lodash); var _lodash3 = require('lodash.set'); var _lodash4 = _interopRequireDefault(_lodash3); var _lodash5 = require('lodash.get'); var _lodash6 = _interopRequireDefault(_lodash5); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var c = 'key-value'; var KeyValue = _react2.default.createClass({ displayName: 'KeyValue', propTypes: { rows: _react.PropTypes.arrayOf(_react.PropTypes.shape({ keyItem: _react.PropTypes.string, valueItem: _react.PropTypes.string })), onChange: _react.PropTypes.func, customAddButtonRenderer: _react.PropTypes.func, keyInputPlaceholder: _react.PropTypes.string, valueInputPlaceholder: _react.PropTypes.string, hideLabels: _react.PropTypes.bool }, getDefaultProps: function getDefaultProps() { return { rows: [], onChange: function onChange() {}, keyInputPlaceholder: '', valueInputPlaceholder: '', hideLabels: false }; }, getInitialState: function getInitialState() { return { rows: [].concat((0, _toConsumableArray3.default)(this.props.rows)) }; }, handleAddNew: function handleAddNew() { var _this = this; this.setState({ rows: [].concat((0, _toConsumableArray3.default)(this.state.rows), [{ keyItem: '', valueItem: '' }]) }, function () { _this.props.onChange([].concat((0, _toConsumableArray3.default)(_this.state.rows))); }); }, handleKeyItemChange: function handleKeyItemChange(index, value) { var _this2 = this; this.setState({ rows: this.state.rows.map(function (row, i) { if (index !== i) { return row; } return (0, _extends3.default)({}, row, { keyItem: value }); }) }, function () { _this2.props.onChange([].concat((0, _toConsumableArray3.default)(_this2.state.rows))); }); }, handleValueItemChange: function handleValueItemChange(index, value) { var _this3 = this; this.setState({ rows: this.state.rows.map(function (row, i) { if (index !== i) { return row; } return (0, _extends3.default)({}, row, { valueItem: value }); }) }, function () { _this3.props.onChange([].concat((0, _toConsumableArray3.default)(_this3.state.rows))); }); }, handleRemove: function handleRemove(index) { var _this4 = this; this.setState({ rows: this.state.rows.filter(function (row, i) { return i !== index; }) }, function () { _this4.props.onChange([].concat((0, _toConsumableArray3.default)(_this4.state.rows))); }); }, renderLabelText: function renderLabelText(text) { if (this.props.hideLabels === true) { return null; } return _react2.default.createElement( 'span', null, text ); }, renderKeyItem: function renderKeyItem(index, value) { var _this5 = this; return _react2.default.createElement( 'label', null, this.renderLabelText('Key:'), _react2.default.createElement('input', { type: 'text', value: value, placeholder: this.props.keyInputPlaceholder, onChange: function onChange(e) { return _this5.handleKeyItemChange(index, e.currentTarget.value); } }) ); }, renderValueItem: function renderValueItem(index, value) { var _this6 = this; return _react2.default.createElement( 'label', null, this.renderLabelText('Value:'), _react2.default.createElement('input', { type: 'text', value: value, placeholder: this.props.valueInputPlaceholder, onChange: function onChange(e) { return _this6.handleValueItemChange(index, e.currentTarget.value); } }) ); }, renderRows: function renderRows() { var _this7 = this; return this.state.rows.map(function (row, i) { return _react2.default.createElement( 'div', { key: 'key-value-row-' + i, className: c + '-row' }, _react2.default.createElement( 'div', { className: c + '-row-key-item' }, _this7.renderKeyItem(i, row.keyItem) ), _react2.default.createElement( 'div', { className: c + '-row-value-item' }, _this7.renderValueItem(i, row.valueItem) ), _react2.default.createElement( 'div', { className: c + '-row-remove' }, _react2.default.createElement( 'button', { onClick: function onClick() { return _this7.handleRemove(i); } }, '-' ) ) ); }); }, renderAddButton: function renderAddButton() { if (typeof this.props.customAddButtonRenderer === 'function') { return this.props.customAddButtonRenderer(this.handleAddNew); } return _react2.default.createElement( 'button', { onClick: this.handleAddNew }, 'Add new' ); }, render: function render() { return _react2.default.createElement( 'div', { className: c }, _react2.default.createElement( 'div', { className: c + '-rows' }, this.renderRows() ), _react2.default.createElement( 'div', { className: c + '-add-new' }, this.renderAddButton() ) ); } }); var slides = [{ src: '
{{firstbox.label}}
{{secondbox.label}}

{{thirdbox.label}}
{{fourthbox.label}}
{{fifthbox.label}}
{{sixthbox.label}}
{{firstbox.description}}

{{secondbox.description}}

{{thirdbox.description}}

{{fourthbox.description}}
{{fifthbox.description}}
{{sixthbox.description}}
', type: 'toc' }, { src: '', type: 'introduction' }, { src: '', type: 'social overview' }, { src: '', type: 'technical seo' }]; var App = function (_React$Component) { (0, _inherits3.default)(App, _React$Component); function App(props) { (0, _classCallCheck3.default)(this, App); var _this8 = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).call(this, props)); _this8.state = { slides: [{ id: 'f38c', type: 'toc', active: true, options: {} }] }; return _this8; } (0, _createClass3.default)(App, [{ key: 'getVariables', value: function getVariables(src) { return src.match(/{{([\s\S]+?)}}/g).map(function (k) { return k.replace(/[^.a-z0-9_\-]/gi, ''); }); } }, { key: 'getSlideSrc', value: function getSlideSrc(type) { return slides.find(function (s) { return s.type === type; }).src; } }, { key: 'getActiveSlide', value: function getActiveSlide() { return this.state.slides.find(function (slide) { return slide.active; }); } }, { key: 'handleOnChange', value: function handleOnChange(id, data) { var options = data.reduce(function (grp, item) { (0, _lodash4.default)(grp, item.keyItem, item.valueItem); return grp; }, {}); this.setState({ slides: this.state.slides.map(function (slide) { if (slide.id === id) { return (0, _extends3.default)({}, slide, { options: options }); } return slide; }) }); } }, { key: 'handleSetActive', value: function handleSetActive(slide) { this.setState({ slides: slides.map(function (s) { return (0, _extends3.default)({}, slide, { active: slide.id === s.id }); }) }); } }, { key: 'renderEditor', value: function renderEditor() { var _this9 = this; var active = this.getActiveSlide(); var src = this.getSlideSrc(active.type); var rows = this.getVariables(src).map(function (k) { return { keyItem: k }; }); var addButton = function addButton(handleAddNew) { return null; }; return _react2.default.createElement( 'div', null, _react2.default.createElement( 'label', null, 'Type: ', _react2.default.createElement( 'b', null, active.type ) ), _react2.default.createElement(KeyValue, { rows: rows, customAddButtonRenderer: addButton, onChange: function onChange(d) { return _this9.handleOnChange(active.id, d); } }) ); } }, { key: 'renderSlides', value: function renderSlides() { var _this10 = this; return this.state.slides.map(function (slide) { return _this10.renderSlide(slide); }); } }, { key: 'renderSlide', value: function renderSlide(slide) { var src = this.getSlideSrc(slide.type); var variables = this.getVariables(src); var options = (0, _extends3.default)({}, slide.options || {}); variables.forEach(function (variable) { if (!(0, _lodash6.default)(options, variable)) { (0, _lodash4.default)(options, variable, variable); } }); var content = this.renderSlideContent(src, options); var borderColor = slide.active ? 'red' : 'black'; return _react2.default.createElement( _reactBootstrap.Row, { key: slide.id, onClick: this.handleSetActive.bind(this, slide) }, _react2.default.createElement( _reactBootstrap.Grid, { md: 12, style: { height: '400px', width: '640px', border: 'solid 1px ' + borderColor } }, _react2.default.createElement('div', { dangerouslySetInnerHTML: { __html: content } }) ) ); } }, { key: 'renderSlideContent', value: function renderSlideContent(text, options) { console.log('render', options); return (0, _lodash2.default)(text, { interpolate: /{{([\s\S]+?)}}/g })(options); } }, { key: 'render', value: function render() { var _React$createElement; var types = slides.map(function (slide) { return slide.type; }); var items = types.map(function (type) { return _react2.default.createElement( _reactBootstrap.MenuItem, { eventKey: type }, type ); }); return _react2.default.createElement( _reactBootstrap.Grid, null, _react2.default.createElement( _reactBootstrap.Row, null, _react2.default.createElement( _reactBootstrap.Col, { md: 3, className: 'editors' }, this.renderEditor() ), _react2.default.createElement( _reactBootstrap.Col, { md: 9, className: 'previews' }, this.renderSlides() ) ), _react2.default.createElement( _reactBootstrap.Row, null, _react2.default.createElement( _reactBootstrap.Col, null, _react2.default.createElement( _reactBootstrap.DropdownButton, (_React$createElement = { title: 'Add new' }, (0, _defineProperty3.default)(_React$createElement, 'title', 'Add new'), (0, _defineProperty3.default)(_React$createElement, 'key', 'addnew'), (0, _defineProperty3.default)(_React$createElement, 'id', 'addnew'), _React$createElement), items ) ) ) ); } }]); return App; }(_react2.default.Component); ; _reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('container'));