Merge branch 'johnnyslots-modularizing-components'
This commit is contained in:
Elisha Nuchi
+1
-1
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"rootDir": "dist",
|
||||
"scriptId":"...paste scriptId here..."
|
||||
"scriptId": "...paste scriptId here..."
|
||||
}
|
||||
Vendored
+110
-110
@@ -50,7 +50,7 @@
|
||||
return __webpack_require__.d(getter, "a", getter), getter;
|
||||
}, __webpack_require__.o = function(object, property) {
|
||||
return Object.prototype.hasOwnProperty.call(object, property);
|
||||
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 10);
|
||||
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 36);
|
||||
}([ function(module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
module.exports = __webpack_require__(11);
|
||||
@@ -167,106 +167,19 @@
|
||||
appear: _propTypes2["default"].string,
|
||||
appearActive: _propTypes2["default"].string
|
||||
}) ]);
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
var content = __webpack_require__(32);
|
||||
"string" == typeof content && (content = [ [ module.i, content, "" ] ]);
|
||||
var options = {
|
||||
hmr: !0,
|
||||
transform: void 0
|
||||
};
|
||||
options.insertInto = undefined;
|
||||
__webpack_require__(34)(content, options);
|
||||
content.locals && (module.exports = content.locals);
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
module.exports = __webpack_require__(19);
|
||||
}, function(module, __webpack_exports__, __webpack_require__) {
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0), react__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__), react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2), react_dom__WEBPACK_IMPORTED_MODULE_1___default = __webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__), react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9), react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2___default = __webpack_require__.n(react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2__), prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1), prop_types__WEBPACK_IMPORTED_MODULE_3___default = __webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
|
||||
__webpack_require__(32);
|
||||
class FormInput extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
text: ""
|
||||
}, this.handleChange = this.handleChange.bind(this), this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
handleChange(e) {
|
||||
this.setState({
|
||||
text: e.target.value
|
||||
});
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault(), this.state.text.length && (this.props.newSheetFormHandler(e, this.state.text),
|
||||
this.setState(prevState => ({
|
||||
text: ""
|
||||
})));
|
||||
}
|
||||
render() {
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "formBlock"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, "Add a sheet: "), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("form", {
|
||||
onSubmit: e => this.handleSubmit(e)
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", {
|
||||
onChange: this.handleChange,
|
||||
value: this.state.text
|
||||
})));
|
||||
}
|
||||
}
|
||||
FormInput.propTypes = {
|
||||
newSheetFormHandler: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func
|
||||
};
|
||||
class SheetButton extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
|
||||
render() {
|
||||
let sheetIndex = this.props.name.sheetIndex, sheetName = this.props.name.text, isActiveSheet = this.props.name.isActive;
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "sheetLine"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", {
|
||||
onClick: e => this.props.deleteButtonHandler(e, sheetIndex)
|
||||
}, "X"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
|
||||
onClick: e => this.props.clickSheetNameHandler(e, sheetName),
|
||||
className: "sheetNameText " + (isActiveSheet ? "active-sheet" : "")
|
||||
}, sheetName));
|
||||
}
|
||||
}
|
||||
SheetButton.propTypes = {
|
||||
name: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.object,
|
||||
deleteButtonHandler: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func,
|
||||
clickSheetNameHandler: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func
|
||||
}, react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(class extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
names: []
|
||||
}, this.deleteButtonHandler = this.deleteButtonHandler.bind(this), this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this),
|
||||
this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).getSheetsData();
|
||||
}
|
||||
deleteButtonHandler(e, sheetIndex) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).deleteSheet(sheetIndex);
|
||||
}
|
||||
clickSheetNameHandler(e, sheetName) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).setActiveSheet(sheetName);
|
||||
}
|
||||
newSheetFormHandler(e, newSheetTitle) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).addSheet(newSheetTitle);
|
||||
}
|
||||
render() {
|
||||
let names = this.state.names;
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(FormInput, {
|
||||
newSheetFormHandler: this.newSheetFormHandler
|
||||
}), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2___default.a, {
|
||||
transitionName: "sheetNames",
|
||||
transitionAppear: !0,
|
||||
transitionEnterTimeout: 100,
|
||||
transitionLeaveTimeout: 100
|
||||
}, names.length ? names.map(name => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SheetButton, {
|
||||
name: name,
|
||||
deleteButtonHandler: this.deleteButtonHandler,
|
||||
clickSheetNameHandler: this.clickSheetNameHandler,
|
||||
key: name.sheetName
|
||||
})) : null));
|
||||
}
|
||||
}, null), document.getElementById("index"));
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
var k = __webpack_require__(3), n = __webpack_require__(4), p = __webpack_require__(5), q = __webpack_require__(6), r = "function" == typeof Symbol && Symbol["for"], t = r ? Symbol["for"]("react.element") : 60103, u = r ? Symbol["for"]("react.portal") : 60106, v = r ? Symbol["for"]("react.fragment") : 60107, w = r ? Symbol["for"]("react.strict_mode") : 60108, x = r ? Symbol["for"]("react.profiler") : 60114, y = r ? Symbol["for"]("react.provider") : 60109, z = r ? Symbol["for"]("react.context") : 60110, A = r ? Symbol["for"]("react.async_mode") : 60111, B = r ? Symbol["for"]("react.forward_ref") : 60112;
|
||||
@@ -4911,17 +4824,7 @@
|
||||
duration: transitionDuration
|
||||
};
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
var content = __webpack_require__(33);
|
||||
"string" == typeof content && (content = [ [ module.i, content, "" ] ]);
|
||||
var options = {
|
||||
hmr: !0,
|
||||
transform: void 0
|
||||
};
|
||||
options.insertInto = undefined;
|
||||
__webpack_require__(35)(content, options);
|
||||
content.locals && (module.exports = content.locals);
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
(exports = module.exports = __webpack_require__(34)(!1)).push([ module.i, "@import url(https://fonts.googleapis.com/css?family=Lora|Mukta);", "" ]),
|
||||
(exports = module.exports = __webpack_require__(33)(!1)).push([ module.i, "@import url(https://fonts.googleapis.com/css?family=Lora|Mukta);", "" ]),
|
||||
exports.push([ module.i, "input {\n width: 130px;\n margin-left: 8px;\n}\n\nbutton {\n\t-webkit-transition-duration: 0.4s; /* Safari */\n\tbackground-color: #f44336;\n\tborder: 1px solid #f44336;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-family: 'Mukta', sans-serif;\n\tfont-size: 11px;\n\theight: 20px;\n\tline-height: 15px;\n\tmargin-left: 3px;\n\tmargin-right: 11px;\n\tpadding: 3px;\n\ttext-transform: uppercase;\n\ttransition-duration: 0.6s;\n\tvertical-align: middle;\n\twidth: 20px;\n}\n\nbutton:hover {\n background-color: white;\n color: black;\n}\n\nbutton:active {\n\tbackground-color: #fafafa;\n\ttransform: translateY(1px);\n\ttransition-duration: 0.3s;\n}\n\nbutton:focus {\n\toutline: none;\n}\n\n.formBlock {\n display: -webkit-box;\n font-family: 'Lora', serif;\n font-weight: 700;\n}\n\n.sheetLine {\n\tcursor: pointer;\n\tline-height: 3;\n\theight: 30px;\n}\n\n.sheetNameText {\n\tfont-size: 14px;\n\tfont-family: 'Lora', serif;\n}\n\n.sheetNameText.active-sheet {\n\tborder-bottom: 3px solid #338236;\n}\n\n/*\nReactCSSTransitionGroup styling\n */\n.sheetNames-enter {\n opacity: 0.01;\n}\n\n.sheetNames-enter.sheetNames-enter-active {\n opacity: 1;\n transition: opacity 800ms ease-in;\n}\n\n.sheetNames-leave {\n opacity: 1;\n}\n\n.sheetNames-leave.sheetNames-leave-active {\n opacity: 0.01;\n transition: opacity 100ms ease-in;\n}\n\n.sheetNames-appear {\n opacity: 0.01;\n}\n\n.sheetNames-appear.sheetNames-appear-active {\n opacity: 1;\n transition: opacity .5s ease-in;\n}", "" ]);
|
||||
}, function(module, exports) {
|
||||
module.exports = function(useSourceMap) {
|
||||
@@ -4977,7 +4880,7 @@
|
||||
}
|
||||
return memo[target];
|
||||
};
|
||||
}(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(36);
|
||||
}(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(35);
|
||||
function addStylesToDom(styles, options) {
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i], domStyle = stylesInDom[item.id];
|
||||
@@ -5131,5 +5034,102 @@
|
||||
"url(" + JSON.stringify(newUrl) + ")");
|
||||
});
|
||||
};
|
||||
}, function(module, __webpack_exports__, __webpack_require__) {
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
var react = __webpack_require__(0), react_default = __webpack_require__.n(react), react_dom = __webpack_require__(2), react_dom_default = __webpack_require__.n(react_dom), react_addons_css_transition_group = __webpack_require__(10), react_addons_css_transition_group_default = __webpack_require__.n(react_addons_css_transition_group), prop_types = __webpack_require__(1), prop_types_default = __webpack_require__.n(prop_types);
|
||||
__webpack_require__(9);
|
||||
class form_input_FormInput extends react_default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
text: ""
|
||||
}, this.handleChange = this.handleChange.bind(this), this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
handleChange(e) {
|
||||
this.setState({
|
||||
text: e.target.value
|
||||
});
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault(), this.state.text.length && (this.props.newSheetFormHandler(e, this.state.text),
|
||||
this.setState({
|
||||
text: ""
|
||||
}));
|
||||
}
|
||||
render() {
|
||||
return react_default.a.createElement("div", {
|
||||
className: "formBlock"
|
||||
}, react_default.a.createElement("span", null, "Add a sheet: "), react_default.a.createElement("form", {
|
||||
onSubmit: e => this.handleSubmit(e)
|
||||
}, react_default.a.createElement("input", {
|
||||
onChange: this.handleChange,
|
||||
value: this.state.text
|
||||
})));
|
||||
}
|
||||
}
|
||||
form_input_FormInput.propTypes = {
|
||||
newSheetFormHandler: prop_types_default.a.func
|
||||
};
|
||||
const SheetButton = props => {
|
||||
let sheetIndex = props.name.sheetIndex, sheetName = props.name.text, isActiveSheet = props.name.isActive;
|
||||
return react_default.a.createElement("div", {
|
||||
className: "sheetLine"
|
||||
}, react_default.a.createElement("button", {
|
||||
onClick: e => props.deleteButtonHandler(e, sheetIndex)
|
||||
}, "X"), react_default.a.createElement("span", {
|
||||
onClick: e => props.clickSheetNameHandler(e, sheetName),
|
||||
className: "sheetNameText " + (isActiveSheet ? "active-sheet" : "")
|
||||
}, sheetName));
|
||||
};
|
||||
var sheet_button = SheetButton;
|
||||
SheetButton.propTypes = {
|
||||
name: prop_types_default.a.object,
|
||||
deleteButtonHandler: prop_types_default.a.func,
|
||||
clickSheetNameHandler: prop_types_default.a.func
|
||||
};
|
||||
react_dom_default.a.render(react_default.a.createElement(class extends react_default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
names: []
|
||||
}, this.deleteButtonHandler = this.deleteButtonHandler.bind(this), this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this),
|
||||
this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).getSheetsData();
|
||||
}
|
||||
deleteButtonHandler(e, sheetIndex) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).deleteSheet(sheetIndex);
|
||||
}
|
||||
clickSheetNameHandler(e, sheetName) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).setActiveSheet(sheetName);
|
||||
}
|
||||
newSheetFormHandler(e, newSheetTitle) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).addSheet(newSheetTitle);
|
||||
}
|
||||
render() {
|
||||
let names = this.state.names;
|
||||
return react_default.a.createElement("div", null, react_default.a.createElement(form_input_FormInput, {
|
||||
newSheetFormHandler: this.newSheetFormHandler
|
||||
}), react_default.a.createElement(react_addons_css_transition_group_default.a, {
|
||||
transitionName: "sheetNames",
|
||||
transitionAppear: !0,
|
||||
transitionEnterTimeout: 100,
|
||||
transitionLeaveTimeout: 100
|
||||
}, names.length ? names.map(name => react_default.a.createElement(sheet_button, {
|
||||
name: name,
|
||||
deleteButtonHandler: this.deleteButtonHandler,
|
||||
clickSheetNameHandler: this.clickSheetNameHandler,
|
||||
key: name.sheetName
|
||||
})) : null));
|
||||
}
|
||||
}, null), document.getElementById("index"));
|
||||
} ]);</script></body>
|
||||
</html>
|
||||
Vendored
+110
-110
@@ -41,7 +41,7 @@
|
||||
return __webpack_require__.d(getter, "a", getter), getter;
|
||||
}, __webpack_require__.o = function(object, property) {
|
||||
return Object.prototype.hasOwnProperty.call(object, property);
|
||||
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 10);
|
||||
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 36);
|
||||
}([ function(module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
module.exports = __webpack_require__(11);
|
||||
@@ -158,106 +158,19 @@
|
||||
appear: _propTypes2["default"].string,
|
||||
appearActive: _propTypes2["default"].string
|
||||
}) ]);
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
var content = __webpack_require__(32);
|
||||
"string" == typeof content && (content = [ [ module.i, content, "" ] ]);
|
||||
var options = {
|
||||
hmr: !0,
|
||||
transform: void 0
|
||||
};
|
||||
options.insertInto = undefined;
|
||||
__webpack_require__(34)(content, options);
|
||||
content.locals && (module.exports = content.locals);
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
module.exports = __webpack_require__(19);
|
||||
}, function(module, __webpack_exports__, __webpack_require__) {
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0), react__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__), react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2), react_dom__WEBPACK_IMPORTED_MODULE_1___default = __webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__), react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9), react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2___default = __webpack_require__.n(react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2__), prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1), prop_types__WEBPACK_IMPORTED_MODULE_3___default = __webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
|
||||
__webpack_require__(32);
|
||||
class FormInput extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
text: ""
|
||||
}, this.handleChange = this.handleChange.bind(this), this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
handleChange(e) {
|
||||
this.setState({
|
||||
text: e.target.value
|
||||
});
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault(), this.state.text.length && (this.props.newSheetFormHandler(e, this.state.text),
|
||||
this.setState(prevState => ({
|
||||
text: ""
|
||||
})));
|
||||
}
|
||||
render() {
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "formBlock"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, "Add a sheet: "), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("form", {
|
||||
onSubmit: e => this.handleSubmit(e)
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", {
|
||||
onChange: this.handleChange,
|
||||
value: this.state.text
|
||||
})));
|
||||
}
|
||||
}
|
||||
FormInput.propTypes = {
|
||||
newSheetFormHandler: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func
|
||||
};
|
||||
class SheetButton extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
|
||||
render() {
|
||||
let sheetIndex = this.props.name.sheetIndex, sheetName = this.props.name.text, isActiveSheet = this.props.name.isActive;
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
|
||||
className: "sheetLine"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", {
|
||||
onClick: e => this.props.deleteButtonHandler(e, sheetIndex)
|
||||
}, "X"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
|
||||
onClick: e => this.props.clickSheetNameHandler(e, sheetName),
|
||||
className: "sheetNameText " + (isActiveSheet ? "active-sheet" : "")
|
||||
}, sheetName));
|
||||
}
|
||||
}
|
||||
SheetButton.propTypes = {
|
||||
name: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.object,
|
||||
deleteButtonHandler: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func,
|
||||
clickSheetNameHandler: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.func
|
||||
}, react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(class extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
names: []
|
||||
}, this.deleteButtonHandler = this.deleteButtonHandler.bind(this), this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this),
|
||||
this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).getSheetsData();
|
||||
}
|
||||
deleteButtonHandler(e, sheetIndex) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).deleteSheet(sheetIndex);
|
||||
}
|
||||
clickSheetNameHandler(e, sheetName) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).setActiveSheet(sheetName);
|
||||
}
|
||||
newSheetFormHandler(e, newSheetTitle) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).addSheet(newSheetTitle);
|
||||
}
|
||||
render() {
|
||||
let names = this.state.names;
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(FormInput, {
|
||||
newSheetFormHandler: this.newSheetFormHandler
|
||||
}), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_addons_css_transition_group__WEBPACK_IMPORTED_MODULE_2___default.a, {
|
||||
transitionName: "sheetNames",
|
||||
transitionAppear: !0,
|
||||
transitionEnterTimeout: 100,
|
||||
transitionLeaveTimeout: 100
|
||||
}, names.length ? names.map(name => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(SheetButton, {
|
||||
name: name,
|
||||
deleteButtonHandler: this.deleteButtonHandler,
|
||||
clickSheetNameHandler: this.clickSheetNameHandler,
|
||||
key: name.sheetName
|
||||
})) : null));
|
||||
}
|
||||
}, null), document.getElementById("index"));
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
"use strict";
|
||||
var k = __webpack_require__(3), n = __webpack_require__(4), p = __webpack_require__(5), q = __webpack_require__(6), r = "function" == typeof Symbol && Symbol["for"], t = r ? Symbol["for"]("react.element") : 60103, u = r ? Symbol["for"]("react.portal") : 60106, v = r ? Symbol["for"]("react.fragment") : 60107, w = r ? Symbol["for"]("react.strict_mode") : 60108, x = r ? Symbol["for"]("react.profiler") : 60114, y = r ? Symbol["for"]("react.provider") : 60109, z = r ? Symbol["for"]("react.context") : 60110, A = r ? Symbol["for"]("react.async_mode") : 60111, B = r ? Symbol["for"]("react.forward_ref") : 60112;
|
||||
@@ -4902,17 +4815,7 @@
|
||||
duration: transitionDuration
|
||||
};
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
var content = __webpack_require__(33);
|
||||
"string" == typeof content && (content = [ [ module.i, content, "" ] ]);
|
||||
var options = {
|
||||
hmr: !0,
|
||||
transform: void 0
|
||||
};
|
||||
options.insertInto = undefined;
|
||||
__webpack_require__(35)(content, options);
|
||||
content.locals && (module.exports = content.locals);
|
||||
}, function(module, exports, __webpack_require__) {
|
||||
(exports = module.exports = __webpack_require__(34)(!1)).push([ module.i, "@import url(https://fonts.googleapis.com/css?family=Lora|Mukta);", "" ]),
|
||||
(exports = module.exports = __webpack_require__(33)(!1)).push([ module.i, "@import url(https://fonts.googleapis.com/css?family=Lora|Mukta);", "" ]),
|
||||
exports.push([ module.i, "input {\n width: 130px;\n margin-left: 8px;\n}\n\nbutton {\n\t-webkit-transition-duration: 0.4s; /* Safari */\n\tbackground-color: #f44336;\n\tborder: 1px solid #f44336;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-family: 'Mukta', sans-serif;\n\tfont-size: 11px;\n\theight: 20px;\n\tline-height: 15px;\n\tmargin-left: 3px;\n\tmargin-right: 11px;\n\tpadding: 3px;\n\ttext-transform: uppercase;\n\ttransition-duration: 0.6s;\n\tvertical-align: middle;\n\twidth: 20px;\n}\n\nbutton:hover {\n background-color: white;\n color: black;\n}\n\nbutton:active {\n\tbackground-color: #fafafa;\n\ttransform: translateY(1px);\n\ttransition-duration: 0.3s;\n}\n\nbutton:focus {\n\toutline: none;\n}\n\n.formBlock {\n display: -webkit-box;\n font-family: 'Lora', serif;\n font-weight: 700;\n}\n\n.sheetLine {\n\tcursor: pointer;\n\tline-height: 3;\n\theight: 30px;\n}\n\n.sheetNameText {\n\tfont-size: 14px;\n\tfont-family: 'Lora', serif;\n}\n\n.sheetNameText.active-sheet {\n\tborder-bottom: 3px solid #338236;\n}\n\n/*\nReactCSSTransitionGroup styling\n */\n.sheetNames-enter {\n opacity: 0.01;\n}\n\n.sheetNames-enter.sheetNames-enter-active {\n opacity: 1;\n transition: opacity 800ms ease-in;\n}\n\n.sheetNames-leave {\n opacity: 1;\n}\n\n.sheetNames-leave.sheetNames-leave-active {\n opacity: 0.01;\n transition: opacity 100ms ease-in;\n}\n\n.sheetNames-appear {\n opacity: 0.01;\n}\n\n.sheetNames-appear.sheetNames-appear-active {\n opacity: 1;\n transition: opacity .5s ease-in;\n}", "" ]);
|
||||
}, function(module, exports) {
|
||||
module.exports = function(useSourceMap) {
|
||||
@@ -4968,7 +4871,7 @@
|
||||
}
|
||||
return memo[target];
|
||||
};
|
||||
}(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(36);
|
||||
}(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(35);
|
||||
function addStylesToDom(styles, options) {
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i], domStyle = stylesInDom[item.id];
|
||||
@@ -5122,4 +5025,101 @@
|
||||
"url(" + JSON.stringify(newUrl) + ")");
|
||||
});
|
||||
};
|
||||
}, function(module, __webpack_exports__, __webpack_require__) {
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
var react = __webpack_require__(0), react_default = __webpack_require__.n(react), react_dom = __webpack_require__(2), react_dom_default = __webpack_require__.n(react_dom), react_addons_css_transition_group = __webpack_require__(10), react_addons_css_transition_group_default = __webpack_require__.n(react_addons_css_transition_group), prop_types = __webpack_require__(1), prop_types_default = __webpack_require__.n(prop_types);
|
||||
__webpack_require__(9);
|
||||
class form_input_FormInput extends react_default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
text: ""
|
||||
}, this.handleChange = this.handleChange.bind(this), this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
handleChange(e) {
|
||||
this.setState({
|
||||
text: e.target.value
|
||||
});
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault(), this.state.text.length && (this.props.newSheetFormHandler(e, this.state.text),
|
||||
this.setState({
|
||||
text: ""
|
||||
}));
|
||||
}
|
||||
render() {
|
||||
return react_default.a.createElement("div", {
|
||||
className: "formBlock"
|
||||
}, react_default.a.createElement("span", null, "Add a sheet: "), react_default.a.createElement("form", {
|
||||
onSubmit: e => this.handleSubmit(e)
|
||||
}, react_default.a.createElement("input", {
|
||||
onChange: this.handleChange,
|
||||
value: this.state.text
|
||||
})));
|
||||
}
|
||||
}
|
||||
form_input_FormInput.propTypes = {
|
||||
newSheetFormHandler: prop_types_default.a.func
|
||||
};
|
||||
const SheetButton = props => {
|
||||
let sheetIndex = props.name.sheetIndex, sheetName = props.name.text, isActiveSheet = props.name.isActive;
|
||||
return react_default.a.createElement("div", {
|
||||
className: "sheetLine"
|
||||
}, react_default.a.createElement("button", {
|
||||
onClick: e => props.deleteButtonHandler(e, sheetIndex)
|
||||
}, "X"), react_default.a.createElement("span", {
|
||||
onClick: e => props.clickSheetNameHandler(e, sheetName),
|
||||
className: "sheetNameText " + (isActiveSheet ? "active-sheet" : "")
|
||||
}, sheetName));
|
||||
};
|
||||
var sheet_button = SheetButton;
|
||||
SheetButton.propTypes = {
|
||||
name: prop_types_default.a.object,
|
||||
deleteButtonHandler: prop_types_default.a.func,
|
||||
clickSheetNameHandler: prop_types_default.a.func
|
||||
};
|
||||
react_dom_default.a.render(react_default.a.createElement(class extends react_default.a.Component {
|
||||
constructor(props) {
|
||||
super(props), this.state = {
|
||||
names: []
|
||||
}, this.deleteButtonHandler = this.deleteButtonHandler.bind(this), this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this),
|
||||
this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).getSheetsData();
|
||||
}
|
||||
deleteButtonHandler(e, sheetIndex) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).deleteSheet(sheetIndex);
|
||||
}
|
||||
clickSheetNameHandler(e, sheetName) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).setActiveSheet(sheetName);
|
||||
}
|
||||
newSheetFormHandler(e, newSheetTitle) {
|
||||
return google.script.run.withSuccessHandler(data => this.setState({
|
||||
names: data
|
||||
})).withFailureHandler(error => alert(error)).addSheet(newSheetTitle);
|
||||
}
|
||||
render() {
|
||||
let names = this.state.names;
|
||||
return react_default.a.createElement("div", null, react_default.a.createElement(form_input_FormInput, {
|
||||
newSheetFormHandler: this.newSheetFormHandler
|
||||
}), react_default.a.createElement(react_addons_css_transition_group_default.a, {
|
||||
transitionName: "sheetNames",
|
||||
transitionAppear: !0,
|
||||
transitionEnterTimeout: 100,
|
||||
transitionLeaveTimeout: 100
|
||||
}, names.length ? names.map(name => react_default.a.createElement(sheet_button, {
|
||||
name: name,
|
||||
deleteButtonHandler: this.deleteButtonHandler,
|
||||
clickSheetNameHandler: this.clickSheetNameHandler,
|
||||
key: name.sheetName
|
||||
})) : null));
|
||||
}
|
||||
}, null), document.getElementById("index"));
|
||||
} ]);
|
||||
Generated
+1697
-1697
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -19,7 +19,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@google/clasp": "^1.5.0",
|
||||
"@google/clasp": "^1.5.3",
|
||||
"@types/google-apps-script": "0.0.26",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import '../styles.css';
|
||||
|
||||
export default class FormInput extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {text: ''};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({text: e.target.value});
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (this.state.text.length) {
|
||||
this.props.newSheetFormHandler(e, this.state.text);
|
||||
this.setState({text: ''});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="formBlock">
|
||||
<span>Add a sheet: </span>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
<input onChange={this.handleChange} value={this.state.text} />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FormInput.propTypes = {
|
||||
newSheetFormHandler: PropTypes.func,
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import '../styles.css';
|
||||
|
||||
const SheetButton = (props) => {
|
||||
let sheetIndex = props.name.sheetIndex;
|
||||
let sheetName = props.name.text;
|
||||
let isActiveSheet = props.name.isActive;
|
||||
return (
|
||||
<div className="sheetLine">
|
||||
<button
|
||||
onClick={(e) => props.deleteButtonHandler(e, sheetIndex)}
|
||||
>X
|
||||
</button>
|
||||
<span
|
||||
onClick={(e) => props.clickSheetNameHandler(e, sheetName)}
|
||||
className={'sheetNameText ' + (isActiveSheet ? 'active-sheet' : '')}
|
||||
>{sheetName}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SheetButton;
|
||||
|
||||
SheetButton.propTypes = {
|
||||
name: PropTypes.object,
|
||||
deleteButtonHandler: PropTypes.func,
|
||||
clickSheetNameHandler: PropTypes.func,
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import FormInput from './form-input';
|
||||
import SheetButton from './sheet-button';
|
||||
|
||||
export default class SheetEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {names: []};
|
||||
this.deleteButtonHandler = this.deleteButtonHandler.bind(this);
|
||||
this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this);
|
||||
this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.getSheetsData();
|
||||
}
|
||||
|
||||
deleteButtonHandler(e, sheetIndex) {
|
||||
return google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.deleteSheet(sheetIndex);
|
||||
}
|
||||
|
||||
clickSheetNameHandler(e, sheetName) {
|
||||
return google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.setActiveSheet(sheetName);
|
||||
}
|
||||
|
||||
newSheetFormHandler(e, newSheetTitle) {
|
||||
return google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.addSheet(newSheetTitle);
|
||||
}
|
||||
|
||||
render() {
|
||||
let names = this.state.names;
|
||||
return (
|
||||
<div>
|
||||
<FormInput newSheetFormHandler={this.newSheetFormHandler} />
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="sheetNames"
|
||||
transitionAppear={true}
|
||||
transitionEnterTimeout={100}
|
||||
transitionLeaveTimeout={100}
|
||||
>
|
||||
{names.length ? names.map((name) => {
|
||||
return <SheetButton
|
||||
name={name}
|
||||
deleteButtonHandler={this.deleteButtonHandler}
|
||||
clickSheetNameHandler={this.clickSheetNameHandler}
|
||||
key={name.sheetName}
|
||||
/>;
|
||||
})
|
||||
: null}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
+5
-131
@@ -1,134 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import PropTypes from 'prop-types';
|
||||
import './styles.css';
|
||||
import SheetEditor from './components/sheet-editor';
|
||||
|
||||
class FormInput extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {text: ''};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({text: e.target.value});
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!this.state.text.length) return;
|
||||
this.props.newSheetFormHandler(e, this.state.text);
|
||||
this.setState((prevState) => ({
|
||||
text: '',
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="formBlock">
|
||||
<span>Add a sheet: </span>
|
||||
<form onSubmit={(e) => this.handleSubmit(e)}>
|
||||
<input onChange={this.handleChange} value={this.state.text} />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FormInput.propTypes = {
|
||||
newSheetFormHandler: PropTypes.func,
|
||||
};
|
||||
|
||||
class SheetEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {names: []};
|
||||
this.deleteButtonHandler = this.deleteButtonHandler.bind(this);
|
||||
this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this);
|
||||
this.newSheetFormHandler = this.newSheetFormHandler.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.getSheetsData();
|
||||
}
|
||||
|
||||
deleteButtonHandler(e, sheetIndex) {
|
||||
return google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.deleteSheet(sheetIndex);
|
||||
}
|
||||
|
||||
clickSheetNameHandler(e, sheetName) {
|
||||
return google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.setActiveSheet(sheetName);
|
||||
}
|
||||
|
||||
newSheetFormHandler(e, newSheetTitle) {
|
||||
return google.script.run
|
||||
.withSuccessHandler((data) => this.setState({names: data}))
|
||||
.withFailureHandler((error) => alert(error))
|
||||
.addSheet(newSheetTitle);
|
||||
}
|
||||
|
||||
render() {
|
||||
let names = this.state.names;
|
||||
return (
|
||||
<div>
|
||||
<FormInput newSheetFormHandler={this.newSheetFormHandler} />
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName="sheetNames"
|
||||
transitionAppear={true}
|
||||
transitionEnterTimeout={100}
|
||||
transitionLeaveTimeout={100}
|
||||
>
|
||||
{names.length ? names.map((name) => {
|
||||
return <SheetButton
|
||||
name={name}
|
||||
deleteButtonHandler={this.deleteButtonHandler}
|
||||
clickSheetNameHandler={this.clickSheetNameHandler}
|
||||
key={name.sheetName}
|
||||
/>;
|
||||
})
|
||||
: null}
|
||||
</ReactCSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SheetButton extends React.Component {
|
||||
render() {
|
||||
let sheetIndex = this.props.name.sheetIndex;
|
||||
let sheetName = this.props.name.text;
|
||||
let isActiveSheet = this.props.name.isActive;
|
||||
return (
|
||||
<div className="sheetLine">
|
||||
<button
|
||||
onClick={(e) => this.props.deleteButtonHandler(e, sheetIndex)}
|
||||
>X
|
||||
</button>
|
||||
<span
|
||||
onClick={(e) => this.props.clickSheetNameHandler(e, sheetName)}
|
||||
className={'sheetNameText ' + (isActiveSheet ? 'active-sheet' : '')}
|
||||
>{sheetName}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SheetButton.propTypes = {
|
||||
name: PropTypes.object,
|
||||
deleteButtonHandler: PropTypes.func,
|
||||
clickSheetNameHandler: PropTypes.func,
|
||||
};
|
||||
|
||||
ReactDOM.render(<SheetEditor />, document.getElementById('index'));
|
||||
ReactDOM.render(
|
||||
<SheetEditor />,
|
||||
document.getElementById('index')
|
||||
);
|
||||
|
||||
+4
-1
@@ -66,7 +66,10 @@ const clientConfig = Object.assign({}, sharedConfigSettings, {
|
||||
name: "CLIENT",
|
||||
entry: "./src/client/index.jsx",
|
||||
output: {
|
||||
path: path.resolve(__dirname, destination),
|
||||
path: path.resolve(__dirname, destination)
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx', '.json']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
||||
Reference in New Issue
Block a user