{
+ SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
+ .createMenu('Dialog')
+ .addItem('Add sheets', 'openDialog')
+ .addToUi();
+}
+
+const openDialog = () => {
+ var html = HtmlService.createHtmlOutputFromFile('dialog');
+ SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
+ .showModalDialog(html, 'Sheet Editor');
+}
+
+const getSheets = () => SpreadsheetApp
+ .getActive()
+ .getSheets();
+
+const getActiveSheetName = () => SpreadsheetApp
+ .getActive()
+ .getSheetName();
+
+const getSheetsData = () => {
+ let activeSheetName = getActiveSheetName();
+ return getSheets()
+ .map((sheet,index) => {
+ let sheetName = sheet.getName();
+ return {
+ text: sheetName,
+ sheetIndex: index,
+ isActive: sheetName === activeSheetName
+ }
+ });
+}
+
+const addSheet = (sheetTitle) => {
+ SpreadsheetApp.getActive().insertSheet(sheetTitle);
+ return getSheetsData();
+}
+
+const deleteSheet = (sheetIndex) => {
+ var sheets = getSheets();
+ SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
+ return getSheetsData();
+}
+
+//Must expose public functions
+global.onOpen = onOpen;
+global.openDialog = openDialog;
+global.getSheetsData = getSheetsData;
+global.addSheet = addSheet;
+global.deleteSheet = deleteSheet;
\ No newline at end of file
diff --git a/src/dialog.html b/src/dialog.html
new file mode 100644
index 0000000..a3e0153
--- /dev/null
+++ b/src/dialog.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 0000000..1500458
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,121 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+import css from "./styles.css";
+
+
+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 (
+
+ Add a sheet:
+
+
+ );
+ }
+}
+
+class SheetEditor extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {names: []};
+ this.deleteButtonHandler = this.deleteButtonHandler.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)
+ }
+
+ newSheetFormHandler(e, newSheetTitle) {
+ google.script.run
+ .withSuccessHandler((data) => this.setState({names: data}))
+ .withFailureHandler((error) => alert(error))
+ .addSheet(newSheetTitle);
+ }
+
+ render() {
+ let names = this.state.names
+ return (
+
+
+
+ {
+ names.length ?
+ names.map((name) => {
+ return (
+
+ )
+ })
+ : null
+ }
+
+
+ );
+ }
+}
+
+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 (
+
+
+
+ {sheetName}
+
+
+ )
+ }
+}
+
+ReactDOM.render(
+ ,
+ document.getElementById("index")
+);
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..44a4479
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,93 @@
+@import url('https://fonts.googleapis.com/css?family=Lora|Mukta');
+
+input {
+ width: 130px;
+ margin-left: 8px;
+}
+
+button {
+ -webkit-transition-duration: 0.4s; /* Safari */
+ background-color: #f44336;
+ border: 1px solid #f44336;
+ color: white;
+ display: inline-block;
+ font-family: 'Mukta', sans-serif;
+ font-size: 11px;
+ height: 20px;
+ line-height: 15px;
+ margin-left: 3px;
+ margin-right: 11px;
+ padding: 3px;
+ text-transform: uppercase;
+ transition-duration: 0.6s;
+ vertical-align: middle;
+ width: 20px;
+}
+
+button:hover {
+ background-color: white;
+ color: black;
+}
+
+button:active {
+ background-color: #fafafa;
+ transform: translateY(1px);
+ transition-duration: 0.3s;
+}
+
+button:focus {
+ outline: none;
+}
+
+.formBlock {
+ display: -webkit-box;
+ font-family: 'Lora', serif;
+ font-weight: 700;
+}
+
+
+.sheetLine {
+ line-height: 3;
+ height: 30px;
+}
+
+.sheetNameText {
+ font-size: 14px;
+ font-family: 'Lora', serif;
+}
+
+.sheetNameText.active-sheet {
+ border-bottom: 3px solid #338236;
+}
+
+
+
+/*
+ReactCSSTransitionGroup styling
+ */
+.sheetNames-enter {
+ opacity: 0.01;
+}
+
+.sheetNames-enter.sheetNames-enter-active {
+ opacity: 1;
+ transition: opacity 800ms ease-in;
+}
+
+.sheetNames-leave {
+ opacity: 1;
+}
+
+.sheetNames-leave.sheetNames-leave-active {
+ opacity: 0.01;
+ transition: opacity 100ms ease-in;
+}
+
+.sheetNames-appear {
+ opacity: 0.01;
+}
+
+.sheetNames-appear.sheetNames-appear-active {
+ opacity: 1;
+ transition: opacity .5s ease-in;
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100755
index 0000000..2ae81dc
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,103 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const GasPlugin = require('gas-webpack-plugin');
+// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+
+const destination = 'dist';
+
+const htmlPlugin = new HtmlWebpackPlugin({
+ template: "./src/dialog.html",
+ filename: "./dialog.html",
+ inlineSource: '.(js|css)$' // embed all javascript and css inline
+});
+
+const htmlWebpackInlineSourcePlugin = new HtmlWebpackInlineSourcePlugin();
+
+const config = {
+ optimization: {
+ // Set to true to minimize code (e.g. for production).
+ minimize: true
+ },
+ module: {},
+};
+
+const appsscriptConfig = {
+ name: "appsscript copy json",
+ entry: "./appsscript.json",
+ plugins: [
+ new CleanWebpackPlugin([destination]),
+ new CopyWebpackPlugin([
+ {
+ from: './appsscript.json'
+ // to: path.resolve(__dirname, destination)
+ }
+ ])
+ ]
+};
+
+const clientConfig = Object.assign({}, config, {
+ name: "CLIENT",
+ entry: "./src/index.jsx",
+ output: {
+ path: path.resolve(__dirname, destination),
+ },
+ module: {
+ rules: [
+ {
+ test: /\.jsx$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader"
+ }
+ },
+ {
+ test: /\.css$/,
+ use: [ 'style-loader', 'css-loader' ]
+ }
+ ],
+ },
+ plugins: [
+ htmlPlugin,
+ new HtmlWebpackInlineSourcePlugin()
+ ]
+});
+
+const serverConfig = Object.assign({}, config, {
+ name: "SERVER",
+ entry: "./src/code.gs",
+ output: {
+ filename: 'code.gs',
+ path: path.resolve(__dirname, destination),
+ },
+ module: {
+ rules: [
+ {
+ test: /\.gs$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader"
+ }
+ },
+ ],
+ },
+ optimization: {
+ //don't minimize .gs server code
+ minimize: false
+ },
+ plugins: [
+ new GasPlugin()
+ ]
+});
+
+
+// Return Array of Configurations
+module.exports = [
+ // initialConfig,
+ appsscriptConfig,
+ clientConfig,
+ serverConfig,
+];
\ No newline at end of file