player/gas-react-sheets
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #16 from enuchi/use-react-hooks

Browse Source 
Use react hooks, remove main.js, convert server methods to promises
This commit is contained in:
Elisha Nuchi
2019-07-14 13:39:21 -04:00
committed by GitHub
parent 3c21a29c3b a7243067ae
commit 2faa13fd28
12 changed files with 2730 additions and 12633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/code.js
Vendored
+3 -3
View File
@@ -100,9 +100,9 @@ function setActiveSheet() {
"use strict"; "use strict";
__webpack_require__.r(__webpack_exports__), function(global) { __webpack_require__.r(__webpack_exports__), function(global) {
var _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); var _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
global.onOpen = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["d"], global.openDialog = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["e"], global.onOpen = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.d, global.openDialog = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.e,
global.getSheetsData = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["c"], global.addSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["a"], global.getSheetsData = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.c, global.addSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.a,
global.deleteSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["b"], global.setActiveSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["f"]; global.deleteSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.b, global.setActiveSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.f;
}.call(this, __webpack_require__(2)); }.call(this, __webpack_require__(2));
}, function(module, exports) { }, function(module, exports) {
var g; var g;
dist/dialog.html
Vendored
+87 -119
View File
@@ -50,12 +50,18 @@
return __webpack_require__.d(getter, "a", getter), getter; return __webpack_require__.d(getter, "a", getter), getter;
}, __webpack_require__.o = function(object, property) { }, __webpack_require__.o = function(object, property) {
return Object.prototype.hasOwnProperty.call(object, property); return Object.prototype.hasOwnProperty.call(object, property);
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 30); }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 31);
}([ function(module, exports, __webpack_require__) { }([ function(module, exports, __webpack_require__) {
"use strict"; "use strict";
module.exports = __webpack_require__(8); module.exports = __webpack_require__(9);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(14)(); module.exports = __webpack_require__(15)();
}, function(module, exports) {
module.exports = function(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
};
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
!function checkDCE() { !function checkDCE() {
@@ -64,7 +70,7 @@
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
}(), module.exports = __webpack_require__(9); }(), module.exports = __webpack_require__(10);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
var getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty, propIsEnumerable = Object.prototype.propertyIsEnumerable; var getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty, propIsEnumerable = Object.prototype.propertyIsEnumerable;
@@ -99,10 +105,9 @@
}; };
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { exports.__esModule = !0, exports["default"] = void 0;
value: !0 var _default = !("undefined" == typeof window || !window.document || !window.document.createElement);
}), exports["default"] = !("undefined" == typeof window || !window.document || !window.document.createElement), exports["default"] = _default, module.exports = exports["default"];
module.exports = exports["default"];
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
exports.__esModule = !0, exports.nameShape = undefined, exports.transitionTimeout = function(transitionType) { exports.__esModule = !0, exports.nameShape = undefined, exports.transitionTimeout = function(transitionType) {
@@ -135,21 +140,21 @@
appearActive: _propTypes2["default"].string appearActive: _propTypes2["default"].string
}) ]); }) ]);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
var content = __webpack_require__(26); var content = __webpack_require__(27);
"string" == typeof content && (content = [ [ module.i, content, "" ] ]); "string" == typeof content && (content = [ [ module.i, content, "" ] ]);
var options = { var options = {
hmr: !0, hmr: !0,
transform: void 0 transform: void 0
}; };
options.insertInto = undefined; options.insertInto = undefined;
__webpack_require__(28)(content, options); __webpack_require__(29)(content, options);
content.locals && (module.exports = content.locals); content.locals && (module.exports = content.locals);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
module.exports = __webpack_require__(13); module.exports = __webpack_require__(14);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
var k = __webpack_require__(3), n = "function" == typeof Symbol && Symbol["for"], p = n ? Symbol["for"]("react.element") : 60103, q = n ? Symbol["for"]("react.portal") : 60106, r = n ? Symbol["for"]("react.fragment") : 60107, t = n ? Symbol["for"]("react.strict_mode") : 60108, u = n ? Symbol["for"]("react.profiler") : 60114, v = n ? Symbol["for"]("react.provider") : 60109, w = n ? Symbol["for"]("react.context") : 60110, x = n ? Symbol["for"]("react.concurrent_mode") : 60111, y = n ? Symbol["for"]("react.forward_ref") : 60112, z = n ? Symbol["for"]("react.suspense") : 60113, aa = n ? Symbol["for"]("react.memo") : 60115, ba = n ? Symbol["for"]("react.lazy") : 60116, A = "function" == typeof Symbol && Symbol.iterator; var k = __webpack_require__(4), n = "function" == typeof Symbol && Symbol["for"], p = n ? Symbol["for"]("react.element") : 60103, q = n ? Symbol["for"]("react.portal") : 60106, r = n ? Symbol["for"]("react.fragment") : 60107, t = n ? Symbol["for"]("react.strict_mode") : 60108, u = n ? Symbol["for"]("react.profiler") : 60114, v = n ? Symbol["for"]("react.provider") : 60109, w = n ? Symbol["for"]("react.context") : 60110, x = n ? Symbol["for"]("react.concurrent_mode") : 60111, y = n ? Symbol["for"]("react.forward_ref") : 60112, z = n ? Symbol["for"]("react.suspense") : 60113, aa = n ? Symbol["for"]("react.memo") : 60115, ba = n ? Symbol["for"]("react.lazy") : 60116, A = "function" == typeof Symbol && Symbol.iterator;
function B(a) { function B(a) {
for (var b = arguments.length - 1, d = "https://reactjs.org/docs/error-decoder.html?invariant=" + a, c = 0; c < b; c++) d += "&args[]=" + encodeURIComponent(arguments[c + 1]); for (var b = arguments.length - 1, d = "https://reactjs.org/docs/error-decoder.html?invariant=" + a, c = 0; c < b; c++) d += "&args[]=" + encodeURIComponent(arguments[c + 1]);
!function(a, b, d, c, e, g, h, f) { !function(a, b, d, c, e, g, h, f) {
@@ -443,7 +448,7 @@
module.exports = Z["default"] || Z; module.exports = Z["default"] || Z;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
var aa = __webpack_require__(0), n = __webpack_require__(3), r = __webpack_require__(10); var aa = __webpack_require__(0), n = __webpack_require__(4), r = __webpack_require__(11);
function x(a) { function x(a) {
for (var b = arguments.length - 1, c = "https://reactjs.org/docs/error-decoder.html?invariant=" + a, d = 0; d < b; d++) c += "&args[]=" + encodeURIComponent(arguments[d + 1]); for (var b = arguments.length - 1, c = "https://reactjs.org/docs/error-decoder.html?invariant=" + a, d = 0; d < b; d++) c += "&args[]=" + encodeURIComponent(arguments[d + 1]);
!function(a, b, c, d, e, f, g, h) { !function(a, b, c, d, e, f, g, h) {
@@ -4845,7 +4850,7 @@
module.exports = Xi["default"] || Xi; module.exports = Xi["default"] || Xi;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
module.exports = __webpack_require__(11); module.exports = __webpack_require__(12);
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
(function(global) { (function(global) {
@@ -5109,7 +5114,7 @@
}, exports.unstable_pauseExecution = function() {}, exports.unstable_getFirstCallbackNode = function() { }, exports.unstable_pauseExecution = function() {}, exports.unstable_getFirstCallbackNode = function() {
return d; return d;
}; };
}).call(this, __webpack_require__(12)); }).call(this, __webpack_require__(13));
}, function(module, exports) { }, function(module, exports) {
var g; var g;
g = function() { g = function() {
@@ -5130,7 +5135,7 @@
for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]); for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
} }
return target; return target;
}, _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _TransitionGroup2 = _interopRequireDefault(__webpack_require__(16)), _CSSTransitionGroupChild2 = _interopRequireDefault(__webpack_require__(20)), _PropTypes = __webpack_require__(5); }, _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _TransitionGroup2 = _interopRequireDefault(__webpack_require__(17)), _CSSTransitionGroupChild2 = _interopRequireDefault(__webpack_require__(21)), _PropTypes = __webpack_require__(6);
function _interopRequireDefault(obj) { function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { return obj && obj.__esModule ? obj : {
"default": obj "default": obj
@@ -5187,7 +5192,7 @@
}, exports["default"] = CSSTransitionGroup, module.exports = exports["default"]; }, exports["default"] = CSSTransitionGroup, module.exports = exports["default"];
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
var ReactPropTypesSecret = __webpack_require__(15); var ReactPropTypesSecret = __webpack_require__(16);
function emptyFunction() {} function emptyFunction() {}
function emptyFunctionWithReset() {} function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction, module.exports = function() { emptyFunctionWithReset.resetWarningCache = emptyFunction, module.exports = function() {
@@ -5237,8 +5242,8 @@
for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]); for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
} }
return target; return target;
}, _chainFunction2 = _interopRequireDefault(__webpack_require__(17)), _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _ChildMapping = (_interopRequireDefault(__webpack_require__(18)), }, _chainFunction2 = _interopRequireDefault(__webpack_require__(18)), _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _ChildMapping = (_interopRequireDefault(__webpack_require__(19)),
__webpack_require__(19)); __webpack_require__(20));
function _interopRequireDefault(obj) { function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { return obj && obj.__esModule ? obj : {
"default": obj "default": obj
@@ -5399,7 +5404,7 @@
for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]); for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
} }
return target; return target;
}, _addClass2 = _interopRequireDefault(__webpack_require__(21)), _removeClass2 = _interopRequireDefault(__webpack_require__(23)), _requestAnimationFrame2 = _interopRequireDefault(__webpack_require__(24)), _properties = __webpack_require__(25), _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _reactDom = __webpack_require__(2), _PropTypes = __webpack_require__(5); }, _addClass2 = _interopRequireDefault(__webpack_require__(22)), _removeClass2 = _interopRequireDefault(__webpack_require__(24)), _requestAnimationFrame2 = _interopRequireDefault(__webpack_require__(25)), _properties = __webpack_require__(26), _react2 = _interopRequireDefault(__webpack_require__(0)), _propTypes2 = _interopRequireDefault(__webpack_require__(1)), _reactDom = __webpack_require__(3), _PropTypes = __webpack_require__(6);
function _interopRequireDefault(obj) { function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { return obj && obj.__esModule ? obj : {
"default": obj "default": obj
@@ -5489,20 +5494,15 @@
exports["default"] = CSSTransitionGroupChild, module.exports = exports["default"]; exports["default"] = CSSTransitionGroupChild, module.exports = exports["default"];
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { var _interopRequireDefault = __webpack_require__(2);
value: !0 exports.__esModule = !0, exports["default"] = function(element, className) {
}), exports["default"] = function(element, className) { element.classList ? element.classList.add(className) : (0, _hasClass["default"])(element, className) || ("string" == typeof element.className ? element.className = element.className + " " + className : element.setAttribute("class", (element.className && element.className.baseVal || "") + " " + className));
element.classList ? element.classList.add(className) : (0, _hasClass2["default"])(element, className) || ("string" == typeof element.className ? element.className = element.className + " " + className : element.setAttribute("class", (element.className && element.className.baseVal || "") + " " + className));
};
var obj, _hasClass = __webpack_require__(22), _hasClass2 = (obj = _hasClass) && obj.__esModule ? obj : {
"default": obj
}; };
var _hasClass = _interopRequireDefault(__webpack_require__(23));
module.exports = exports["default"]; module.exports = exports["default"];
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { exports.__esModule = !0, exports["default"] = function(element, className) {
value: !0
}), exports["default"] = function(element, className) {
return element.classList ? !!className && element.classList.contains(className) : -1 !== (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " "); return element.classList ? !!className && element.classList.contains(className) : -1 !== (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ");
}, module.exports = exports["default"]; }, module.exports = exports["default"];
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
@@ -5515,19 +5515,15 @@
}; };
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { var _interopRequireDefault = __webpack_require__(2);
value: !0 exports.__esModule = !0, exports["default"] = void 0;
});
var obj, _inDOM = __webpack_require__(4);
var compatRaf, cancel = "clearTimeout", raf = function(fn) { var compatRaf, cancel = "clearTimeout", raf = function(fn) {
var curr = new Date().getTime(), ms = Math.max(0, 16 - (curr - prev)), req = setTimeout(fn, ms); var curr = new Date().getTime(), ms = Math.max(0, 16 - (curr - prev)), req = setTimeout(fn, ms);
return prev = curr, req; return prev = curr, req;
}, getKey = function(vendor, k) { }, getKey = function(vendor, k) {
return vendor + (vendor ? k[0].toUpperCase() + k.substr(1) : k) + "AnimationFrame"; return vendor + (vendor ? k[0].toUpperCase() + k.substr(1) : k) + "AnimationFrame";
}; };
((obj = _inDOM) && obj.__esModule ? obj : { _interopRequireDefault(__webpack_require__(5))["default"] && [ "", "webkit", "moz", "o", "ms" ].some(function(vendor) {
"default": obj
})["default"] && [ "", "webkit", "moz", "o", "ms" ].some(function(vendor) {
var rafKey = getKey(vendor, "request"); var rafKey = getKey(vendor, "request");
if (rafKey in window) return cancel = getKey(vendor, "cancel"), raf = function(cb) { if (rafKey in window) return cancel = getKey(vendor, "cancel"), raf = function(cb) {
return window[rafKey](cb); return window[rafKey](cb);
@@ -5538,19 +5534,22 @@
return raf(cb); return raf(cb);
}).cancel = function(id) { }).cancel = function(id) {
window[cancel] && "function" == typeof window[cancel] && window[cancel](id); window[cancel] && "function" == typeof window[cancel] && window[cancel](id);
}, exports["default"] = compatRaf, module.exports = exports["default"]; };
var _default = compatRaf;
exports["default"] = _default, module.exports = exports["default"];
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { var _interopRequireDefault = __webpack_require__(2);
value: !0 exports.__esModule = !0, exports["default"] = exports.animationEnd = exports.animationDelay = exports.animationTiming = exports.animationDuration = exports.animationName = exports.transitionEnd = exports.transitionDuration = exports.transitionDelay = exports.transitionTiming = exports.transitionProperty = exports.transform = void 0;
}), exports.animationEnd = exports.animationDelay = exports.animationTiming = exports.animationDuration = exports.animationName = exports.transitionEnd = exports.transitionDuration = exports.transitionDelay = exports.transitionTiming = exports.transitionProperty = exports.transform = undefined; var prefix, transitionEnd, animationEnd, transitionProperty, transitionDuration, transitionTiming, transitionDelay, animationName, animationDuration, animationTiming, animationDelay, _inDOM = _interopRequireDefault(__webpack_require__(5)), transform = "transform";
var obj, _inDOM = __webpack_require__(4); if (exports.transform = transform, exports.animationEnd = animationEnd, exports.transitionEnd = transitionEnd,
var transform = "transform", prefix = void 0, transitionEnd = void 0, animationEnd = void 0, transitionProperty = void 0, transitionDuration = void 0, transitionTiming = void 0, transitionDelay = void 0, animationName = void 0, animationDuration = void 0, animationTiming = void 0, animationDelay = void 0; exports.transitionDelay = transitionDelay, exports.transitionTiming = transitionTiming,
if (((obj = _inDOM) && obj.__esModule ? obj : { exports.transitionDuration = transitionDuration, exports.transitionProperty = transitionProperty,
"default": obj exports.animationDelay = animationDelay, exports.animationTiming = animationTiming,
})["default"]) { exports.animationDuration = animationDuration, exports.animationName = animationName,
_inDOM["default"]) {
var _getTransitionPropert = function() { var _getTransitionPropert = function() {
for (var style = document.createElement("div").style, vendorMap = { for (var transitionEnd, animationEnd, style = document.createElement("div").style, vendorMap = {
O: function(e) { O: function(e) {
return "o" + e.toLowerCase(); return "o" + e.toLowerCase();
}, },
@@ -5563,7 +5562,7 @@
ms: function(e) { ms: function(e) {
return "MS" + e; return "MS" + e;
} }
}, vendors = Object.keys(vendorMap), transitionEnd = void 0, animationEnd = void 0, prefix = "", i = 0; i < vendors.length; i++) { }, vendors = Object.keys(vendorMap), prefix = "", i = 0; i < vendors.length; i++) {
var vendor = vendors[i]; var vendor = vendors[i];
if (vendor + "TransitionProperty" in style) { if (vendor + "TransitionProperty" in style) {
prefix = "-" + vendor.toLowerCase(), transitionEnd = vendorMap[vendor]("TransitionEnd"), prefix = "-" + vendor.toLowerCase(), transitionEnd = vendorMap[vendor]("TransitionEnd"),
@@ -5587,12 +5586,7 @@
exports.animationName = animationName = prefix + "-animation-name", exports.animationDuration = animationDuration = prefix + "-animation-duration", exports.animationName = animationName = prefix + "-animation-name", exports.animationDuration = animationDuration = prefix + "-animation-duration",
exports.animationTiming = animationTiming = prefix + "-animation-delay", exports.animationDelay = animationDelay = prefix + "-animation-timing-function"; exports.animationTiming = animationTiming = prefix + "-animation-delay", exports.animationDelay = animationDelay = prefix + "-animation-timing-function";
} }
exports.transform = transform, exports.transitionProperty = transitionProperty, var _default = {
exports.transitionTiming = transitionTiming, exports.transitionDelay = transitionDelay,
exports.transitionDuration = transitionDuration, exports.transitionEnd = transitionEnd,
exports.animationName = animationName, exports.animationDuration = animationDuration,
exports.animationTiming = animationTiming, exports.animationDelay = animationDelay,
exports.animationEnd = animationEnd, exports["default"] = {
transform: transform, transform: transform,
end: transitionEnd, end: transitionEnd,
property: transitionProperty, property: transitionProperty,
@@ -5600,8 +5594,9 @@
delay: transitionDelay, delay: transitionDelay,
duration: transitionDuration duration: transitionDuration
}; };
exports["default"] = _default;
}, function(module, exports, __webpack_require__) { }, function(module, exports, __webpack_require__) {
(exports = module.exports = __webpack_require__(27)(!1)).push([ module.i, "@import url(https://fonts.googleapis.com/css?family=Lora|Mukta);", "" ]), (exports = module.exports = __webpack_require__(28)(!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}", "" ]); 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) { }, function(module, exports) {
module.exports = function(useSourceMap) { module.exports = function(useSourceMap) {
@@ -5657,7 +5652,7 @@
} }
return memo[target]; return memo[target];
}; };
}(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(29); }(), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(30);
function addStylesToDom(styles, options) { function addStylesToDom(styles, options) {
for (var i = 0; i < styles.length; i++) { for (var i = 0; i < styles.length; i++) {
var item = styles[i], domStyle = stylesInDom[item.id]; var item = styles[i], domStyle = stylesInDom[item.id];
@@ -5814,49 +5809,35 @@
}, function(module, __webpack_exports__, __webpack_require__) { }, function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
__webpack_require__.r(__webpack_exports__); __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__(7), 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); var react = __webpack_require__(0), react_default = __webpack_require__.n(react), react_dom = __webpack_require__(3), react_dom_default = __webpack_require__.n(react_dom), react_addons_css_transition_group = __webpack_require__(8), 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__(6); __webpack_require__(7);
class form_input_FormInput extends react_default.a.Component { function FormInput(props) {
constructor(props) { const [text, setText] = Object(react.useState)("");
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", { return react_default.a.createElement("div", {
className: "formBlock" className: "formBlock"
}, react_default.a.createElement("span", null, "Add a sheet: "), react_default.a.createElement("form", { }, react_default.a.createElement("span", null, "Add a sheet: "), react_default.a.createElement("form", {
onSubmit: e => this.handleSubmit(e) onSubmit: event => {
event.preventDefault(), 0 !== text.length && (props.newSheetFormHandler(event, text),
setText(""));
}
}, react_default.a.createElement("input", { }, react_default.a.createElement("input", {
onChange: this.handleChange, onChange: event => setText(event.target.value),
value: this.state.text value: text
}))); })));
} }
} FormInput.propTypes = {
form_input_FormInput.propTypes = {
newSheetFormHandler: prop_types_default.a.func newSheetFormHandler: prop_types_default.a.func
}; };
const SheetButton = props => { const SheetButton = props => {
let sheetIndex = props.name.sheetIndex, sheetName = props.name.text, isActiveSheet = props.name.isActive; const {name: name, deleteButtonHandler: deleteButtonHandler, clickSheetNameHandler: clickSheetNameHandler} = props, {sheetIndex: sheetIndex, text: text, isActive: isActive} = name;
return react_default.a.createElement("div", { return react_default.a.createElement("div", {
className: "sheetLine" className: "sheetLine"
}, react_default.a.createElement("button", { }, react_default.a.createElement("button", {
onClick: e => props.deleteButtonHandler(e, sheetIndex) onClick: e => deleteButtonHandler(e, sheetIndex)
}, "X"), react_default.a.createElement("span", { }, "X"), react_default.a.createElement("span", {
onClick: e => props.clickSheetNameHandler(e, sheetName), onClick: e => clickSheetNameHandler(e, text),
className: "sheetNameText " + (isActiveSheet ? "active-sheet" : "") className: "sheetNameText " + (isActive ? "active-sheet" : "")
}, sheetName)); }, text));
}; };
var sheet_button = SheetButton; var sheet_button = SheetButton;
SheetButton.propTypes = { SheetButton.propTypes = {
@@ -5864,37 +5845,25 @@
deleteButtonHandler: prop_types_default.a.func, deleteButtonHandler: prop_types_default.a.func,
clickSheetNameHandler: 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 { const ignoredMethods = [ "withFailureHandler", "withLogger", "withSuccessHandler", "withUserObject" ], serverMethods = {};
constructor(props) { for (const method in google.script.run) ignoredMethods.includes(method) || (serverMethods[method] = ((...args) => new Promise((resolve, reject) => {
super(props), this.state = { google.script.run.withSuccessHandler(resolve).withFailureHandler(reject)[method](...args);
names: [] })));
}, this.deleteButtonHandler = this.deleteButtonHandler.bind(this), this.clickSheetNameHandler = this.clickSheetNameHandler.bind(this), var server = serverMethods;
this.newSheetFormHandler = this.newSheetFormHandler.bind(this); react_dom_default.a.render(react_default.a.createElement(function() {
const {getSheetsData: getSheetsData, addSheet: addSheet, deleteSheet: deleteSheet, setActiveSheet: setActiveSheet} = server, [names, setNames] = Object(react.useState)([]);
Object(react.useEffect)(() => {
getSheetsData().then(setNames)["catch"](alert);
}, []);
const deleteButtonHandler = (e, sheetIndex) => {
deleteSheet(sheetIndex).then(setNames)["catch"](alert);
}, clickSheetNameHandler = (e, sheetName) => {
setActiveSheet(sheetName).then(setNames)["catch"](alert);
};
return react_default.a.createElement("div", null, react_default.a.createElement(FormInput, {
newSheetFormHandler: (e, newSheetTitle) => {
addSheet(newSheetTitle).then(setNames)["catch"](alert);
} }
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, { }), react_default.a.createElement(react_addons_css_transition_group_default.a, {
transitionName: "sheetNames", transitionName: "sheetNames",
transitionAppear: !0, transitionAppear: !0,
@@ -5902,11 +5871,10 @@
transitionLeaveTimeout: 100 transitionLeaveTimeout: 100
}, names.length ? names.map(name => react_default.a.createElement(sheet_button, { }, names.length ? names.map(name => react_default.a.createElement(sheet_button, {
name: name, name: name,
deleteButtonHandler: this.deleteButtonHandler, deleteButtonHandler: deleteButtonHandler,
clickSheetNameHandler: this.clickSheetNameHandler, clickSheetNameHandler: clickSheetNameHandler,
key: name.sheetName key: name.sheetName
})) : null)); })) : null));
}
}, null), document.getElementById("index")); }, null), document.getElementById("index"));
} ]);</script></body> } ]);</script></body>
</html> </html>
dist/main.js
Vendored
-5902
View File
File diff suppressed because it is too large Load Diff
package-lock.json
Generated
+5577 -9570
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -4
View File
@@ -21,7 +21,9 @@
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.4.4", "@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5", "@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
"@babel/plugin-transform-object-assign": "^7.2.0",
"@babel/polyfill": "^7.4.4", "@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5", "@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
@@ -30,11 +32,8 @@
"babel-eslint": "^10.0.2", "babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0", "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0", "babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"clean-webpack-plugin": "^0.1.19", "clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.6.0", "copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1", "css-loader": "^1.0.1",
@@ -67,6 +66,7 @@
"tern-googleappsscript": "^1.0.2", "tern-googleappsscript": "^1.0.2",
"uglifyjs-webpack-plugin": "^1.2.7", "uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.33.0", "webpack": "^4.33.0",
"webpack-clean": "^1.2.3",
"webpack-cli": "^3.3.3" "webpack-cli": "^3.3.3"
} }
} }
src/client/.babelrc
+7 -2
View File
@@ -1,4 +1,9 @@
{ {
"presets": ["@babel/react"], "presets": [
"plugins": ["@babel/plugin-proposal-class-properties"] "@babel/react"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties"
]
} }
src/client/components/form-input.jsx
+13 -22
View File
@@ -1,38 +1,29 @@
import React from 'react'; import React, {useState} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import '../styles.css'; import '../styles.css';
export default class FormInput extends React.Component { export default function FormInput(props) {
constructor(props) { const [text, setText] = useState('');
super(props);
this.state = {text: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) { const handleChange = (event) => setText(event.target.value);
this.setState({text: e.target.value});
}
handleSubmit(e) { const handleSubmit = (event) => {
e.preventDefault(); event.preventDefault();
if (this.state.text.length) { if (text.length === 0) return;
this.props.newSheetFormHandler(e, this.state.text);
this.setState({text: ''}); props.newSheetFormHandler(event, text);
} setText('');
} };
render() {
return ( return (
<div className="formBlock"> <div className="formBlock">
<span>Add a sheet: </span> <span>Add a sheet: </span>
<form onSubmit={(e) => this.handleSubmit(e)}> <form onSubmit={handleSubmit}>
<input onChange={this.handleChange} value={this.state.text} /> <input onChange={handleChange} value={text} />
</form> </form>
</div> </div>
); );
} }
}
FormInput.propTypes = { FormInput.propTypes = {
newSheetFormHandler: PropTypes.func, newSheetFormHandler: PropTypes.func,
src/client/components/sheet-button.jsx
+8 -7
View File
@@ -3,19 +3,20 @@ import PropTypes from 'prop-types';
import '../styles.css'; import '../styles.css';
const SheetButton = (props) => { const SheetButton = (props) => {
let sheetIndex = props.name.sheetIndex; const {name, deleteButtonHandler, clickSheetNameHandler} = props;
let sheetName = props.name.text;
let isActiveSheet = props.name.isActive; const {sheetIndex, text, isActive} = name;
return ( return (
<div className="sheetLine"> <div className="sheetLine">
<button <button
onClick={(e) => props.deleteButtonHandler(e, sheetIndex)} onClick={(e) => deleteButtonHandler(e, sheetIndex)}
>X >X
</button> </button>
<span <span
onClick={(e) => props.clickSheetNameHandler(e, sheetName)} onClick={(e) => clickSheetNameHandler(e, text)}
className={'sheetNameText ' + (isActiveSheet ? 'active-sheet' : '')} className={'sheetNameText ' + (isActive ? 'active-sheet' : '')}
>{sheetName} >{text}
</span> </span>
</div> </div>
); );
src/client/components/sheet-editor.jsx
+32 -39
View File
@@ -1,50 +1,42 @@
import React from 'react'; import React, {useState, useEffect} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import FormInput from './form-input'; import FormInput from './form-input';
import SheetButton from './sheet-button'; import SheetButton from './sheet-button';
export default class SheetEditor extends React.Component { import server from '../server';
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() { export default function SheetEditor() {
google.script.run const {getSheetsData, addSheet, deleteSheet, setActiveSheet} = server;
.withSuccessHandler((data) => this.setState({names: data}))
.withFailureHandler((error) => alert(error))
.getSheetsData();
}
deleteButtonHandler(e, sheetIndex) { const [names, setNames] = useState([]);
return google.script.run
.withSuccessHandler((data) => this.setState({names: data}))
.withFailureHandler((error) => alert(error))
.deleteSheet(sheetIndex);
}
clickSheetNameHandler(e, sheetName) { useEffect(() => {
return google.script.run getSheetsData()
.withSuccessHandler((data) => this.setState({names: data})) .then(setNames)
.withFailureHandler((error) => alert(error)) .catch(alert);
.setActiveSheet(sheetName); }, []);
}
newSheetFormHandler(e, newSheetTitle) { const deleteButtonHandler = (e, sheetIndex) => {
return google.script.run deleteSheet(sheetIndex)
.withSuccessHandler((data) => this.setState({names: data})) .then(setNames)
.withFailureHandler((error) => alert(error)) .catch(alert);
.addSheet(newSheetTitle); };
}
const clickSheetNameHandler = (e, sheetName) => {
setActiveSheet(sheetName)
.then(setNames)
.catch(alert);
};
const newSheetFormHandler = (e, newSheetTitle) => {
addSheet(newSheetTitle)
.then(setNames)
.catch(alert);
};
render() {
let names = this.state.names;
return ( return (
<div> <div>
<FormInput newSheetFormHandler={this.newSheetFormHandler} /> <FormInput newSheetFormHandler={newSheetFormHandler} />
<ReactCSSTransitionGroup <ReactCSSTransitionGroup
transitionName="sheetNames" transitionName="sheetNames"
transitionAppear={true} transitionAppear={true}
@@ -54,8 +46,8 @@ export default class SheetEditor extends React.Component {
{names.length ? names.map((name) => { {names.length ? names.map((name) => {
return <SheetButton return <SheetButton
name={name} name={name}
deleteButtonHandler={this.deleteButtonHandler} deleteButtonHandler={deleteButtonHandler}
clickSheetNameHandler={this.clickSheetNameHandler} clickSheetNameHandler={clickSheetNameHandler}
key={name.sheetName} key={name.sheetName}
/>; />;
}) })
@@ -64,4 +56,5 @@ export default class SheetEditor extends React.Component {
</div> </div>
); );
} }
}
src/client/server.js
+29
View File
@@ -0,0 +1,29 @@
/*
Convert google script server calls to more
familiar js/promise-based functions.
*/
const serverMethods = {};
// skip the reserved methods
const ignoredMethods = [
'withFailureHandler',
'withLogger',
'withSuccessHandler',
'withUserObject',
];
for (const method in google.script.run) {
if (!ignoredMethods.includes(method)) {
serverMethods[method] = (...args) => {
return new Promise((resolve, reject) => {
google.script.run
.withSuccessHandler(resolve)
.withFailureHandler(reject)[method](...args);
});
};
}
}
export default serverMethods;
src/server/.babelrc
+3 -3
View File
@@ -7,8 +7,8 @@
"plugins": [ "plugins": [
"transform-es3-property-literals", "transform-es3-property-literals",
"transform-es3-member-expression-literals", "transform-es3-member-expression-literals",
"transform-class-properties", "@babel/plugin-proposal-class-properties",
"transform-object-rest-spread", "@babel/plugin-proposal-object-rest-spread",
"transform-object-assign" "@babel/plugin-transform-object-assign"
] ]
} }
webpack.config.js
+7 -2
View File
@@ -3,6 +3,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin');
const GasPlugin = require('gas-webpack-plugin'); const GasPlugin = require('gas-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const WebpackCleanPlugin = require('webpack-clean');
const HtmlWebpackPlugin = require("html-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
@@ -22,6 +23,7 @@ const sharedConfigSettings = {
minimizer: [ minimizer: [
new UglifyJSPlugin({ new UglifyJSPlugin({
uglifyOptions: { uglifyOptions: {
warnings: false,
ie8: true, ie8: true,
mangle: false, mangle: false,
compress: { compress: {
@@ -66,7 +68,7 @@ const clientConfig = Object.assign({}, sharedConfigSettings, {
name: "CLIENT", name: "CLIENT",
entry: "./src/client/index.jsx", entry: "./src/client/index.jsx",
output: { output: {
path: path.resolve(__dirname, destination) path: path.resolve(__dirname, destination),
}, },
resolve: { resolve: {
extensions: ['.js', '.jsx', '.json'] extensions: ['.js', '.jsx', '.json']
@@ -89,7 +91,10 @@ const clientConfig = Object.assign({}, sharedConfigSettings, {
}, },
plugins: [ plugins: [
htmlPlugin, htmlPlugin,
new HtmlWebpackInlineSourcePlugin() new HtmlWebpackInlineSourcePlugin(),
new WebpackCleanPlugin([
destination + '/' + 'main.js',
])
] ]
}); });