hatchyt
Version:
Hatch your next idea.
306 lines (273 loc) • 12.6 kB
JavaScript
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }
// Automatically bind all handlers to the component.
function autoBind(context) {
for (var _len = arguments.length, handlers = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
handlers[_key - 1] = arguments[_key];
}
if (handlers.length === 0) {
var proto = Object.getPrototypeOf(context);
handlers = Object.getOwnPropertyNames(proto).filter(function (x) {
return x.startsWith('handle');
}).map(function (x) {
return context[x];
}); // map all properties begining with handle to their function
}
handlers.forEach(function (h) {
return context[h.name] = h.bind(context);
});
}
var configMenu = (function (_React$Component) {
_inherits(configMenu, _React$Component);
function configMenu(props) {
_classCallCheck(this, configMenu);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(configMenu).call(this, props));
autoBind(_this);
var loadedItems = props.choices || JSON.parse(localStorage.getItem('items') || []);
var loadedTemplates = props.templates || [];
_this.state = { items: loadedItems, templates: loadedTemplates, enabled: false };
return _this;
}
_createClass(configMenu, [{
key: 'render',
value: function render() {
var _this2 = this;
var vendors = this.state.items.map(function (obj, index) {
return React.createElement(CheckItem, { id: _this2.props.id + obj.id,
deleteHandler: _this2.handleRemove.bind(_this2, index),
clickHandler: _this2.handleClick.bind(_this2, index),
key: index,
isInline: obj.inline,
isChecked: obj.checked,
isCustom: obj.custom,
text: obj.name
});
});
var templates = this.state.templates.map(function (obj, index) {
return React.createElement(CheckItem, { id: _this2.props.id + obj.id,
key: 't_' + index,
text: obj.name,
clickHandler: _this2.handleTemplateClick.bind(_this2, index),
isChecked: obj.checked
});
});
var classes = classNames({
checked: this.props.isChecked
});
return React.createElement(
'div',
{ className: "thingList " + (this.state.enabled ? "" : "closed") },
React.createElement(
'div',
{ className: 'config-menu btn small', onClick: this.handleToggle },
React.createElement('span', { className: "icon " + (this.state.enabled ? "icon-triangle-down" : "closed icon-triangle-right") }),
this.props.title
),
React.createElement(
'table',
{ className: 'someThings' },
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
React.createElement(
'span',
{ onClick: this.handleSwap },
'<->'
)
),
React.createElement(
'th',
{ className: 'hidden' },
'Inline'
)
)
),
React.createElement(
'tbody',
{ className: classNames({ vendor: true, hidden: this.state.showTemplates }) },
vendors,
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement('input', { onKeyDown: this.handleCustom, type: 'text', placeholder: 'http://custom.uri' })
)
)
),
React.createElement(
'tbody',
{ className: classNames({ templates: true, hidden: !this.state.showTemplates }) },
templates
)
),
React.createElement('input', { id: "config-menu-" + this.props.id, name: this.props.id, type: 'hidden', value: JSON.stringify(this.state.items) }),
React.createElement('input', { id: "config-templates-" + this.props.id, name: this.props.id, type: 'hidden', value: JSON.stringify(this.state.templates) })
);
}
}, {
key: 'handleRemove',
value: function handleRemove(id, evnt) {
var confirmed = confirm('Are you sure you want to delete this script?');
if (confirmed) {
var items = this.state.items;
items.splice(id, 1);
this.save({ items: items });
}
}
}, {
key: 'handleCustom',
value: function handleCustom(evnt) {
if (evnt.keyCode !== 13) return true;
var items = this.state.items;
items.push({ id: items.length, name: evnt.target.value, custom: true, checked: true });
this.save({ items: items });
evnt.target.value = '';
}
}, {
key: 'handleToggle',
value: function handleToggle(evnt) {
this.setState({ enabled: !this.state.enabled });
}
}, {
key: 'handleSwap',
value: function handleSwap(evnt) {
this.setState({ showTemplates: !this.state.showTemplates });
}
}, {
key: 'handleTemplateClick',
value: function handleTemplateClick(index, evnt) {
this.handleClick(index, evnt, 'templates');
}
}, {
key: 'handleClick',
value: function handleClick(index, evnt, key) {
var items = this.state[key] || this.state.items;
var item = items[index];
if (evnt.target.classList.contains('inline')) {
item.inline = !item.inline;
if (item.inline) {
item.checked = true;
}
} else {
// toggle item selection
item.checked = !item.checked;
// check for user-input
if (item.input && item.checked) {
item.value = prompt(item.input, item.value || "");
if (!item.value) item.checked = false;
}
if (item.dependencies && item.checked) {
item.dependencies.forEach(function (x) {
return items[x].checked = true;
});
} else if (!item.checked) {
item.inline = false;
// check all other items for dependcey
items.forEach(function (x) {
if (x.dependencies && x.dependencies.indexOf(item.id) > -1) {
x.checked = false;
x.inline = false;
}
});
}
}
// update object with dynamic name (items/templates)
var u = {};
if (!key) {
key = 'items';
}
u[key] = items;
this.save(u);
}
}, {
key: 'save',
value: function save(update) {
this.setState(update);
var stringifiedItems = JSON.stringify(this.state.items);
localStorage.setItem('items', stringifiedItems);
}
}]);
return configMenu;
})(React.Component);
exports.default = configMenu;
configMenu.defaultProps = {
items: [],
title: "A list of things!",
enabled: false,
inline: false,
showTemplates: false
};
configMenu.propTypes = {
'items': React.PropTypes.array,
'enabled': React.PropTypes.bool.isRequired,
'inline': React.PropTypes.bool.isRequired,
'input': React.PropTypes.string,
'value': React.PropTypes.string,
'showTemplates': React.PropTypes.bool.isRequired
};
var CheckItem = (function (_React$Component2) {
_inherits(CheckItem, _React$Component2);
function CheckItem() {
_classCallCheck(this, CheckItem);
return _possibleConstructorReturn(this, Object.getPrototypeOf(CheckItem).apply(this, arguments));
}
_createClass(CheckItem, [{
key: 'render',
value: function render() {
var classes = classNames({
checked: this.props.isChecked
});
return React.createElement(
'tr',
{ className: classes },
React.createElement(
'td',
null,
React.createElement('input', { type: 'checkbox', onChange: this.props.clickHandler, checked: this.props.isChecked, id: this.props.id }),
React.createElement(
'label',
{ htmlFor: this.props.id },
this.props.text
)
),
React.createElement(
'td',
{ className: 'text-center hidden' },
React.createElement('input', { type: 'checkbox', onChange: this.props.clickHandler, className: 'inline', id: 'inline_' + this.props.id, checked: this.props.isInline }),
React.createElement(Trasher, { id: this.props.id, deleteHandler: this.props.deleteHandler, active: this.props.isCustom })
)
);
}
}]);
return CheckItem;
})(React.Component);
var Trasher = (function (_React$Component3) {
_inherits(Trasher, _React$Component3);
function Trasher() {
_classCallCheck(this, Trasher);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Trasher).apply(this, arguments));
}
_createClass(Trasher, [{
key: 'render',
value: function render() {
if (!this.props.active) return React.createElement('div', { className: 'spacer' });
return React.createElement('span', { onClick: this.props.deleteHandler, className: 'icon-trashcan' });
}
}]);
return Trasher;
})(React.Component);
//# sourceMappingURL=configMenu.js.map