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

more settings enabled

Browse Source
This commit is contained in:
Elisha Nuchi
2018-09-17 03:18:15 -04:00
parent 3e2d186956
commit ff3f14a4f1
24 changed files with 10798 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/.babelrc
+3
View File
@@ -0,0 +1,3 @@
{
"presets": ["react"]
}
src/client/.eslintrc.json
+19
View File
@@ -0,0 +1,19 @@
{
"root": true,
"parser": "babel-eslint",
"extends": ["plugin:react/recommended", "eslint:recommended", "google"],
"plugins": ["react"],
"env": {
"browser": true
},
"globals": {
"google": false,
"alert": false,
"css": true
},
"rules": {
"import/prefer-default-export": 0,
"no-console": 0,
"require-jsdoc" : 0
}
}
src/client/dialog-template.html
+11
View File
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<section id="index">
<!-- bundled js and css will get inlined here -->
</section>
</body>
</html>
src/index.jsx → src/client/index.jsx
+52 -38
View File
@@ -1,26 +1,27 @@
import React from "react";
import ReactDOM from "react-dom";
import React from 'react';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import css from "./styles.css";
import PropTypes from 'prop-types';
import './styles.css';
class FormInput extends React.Component {
constructor(props) {
super(props);
this.state = {text: ""};
this.state = {text: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({ text: e.target.value });
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: ""
this.props.newSheetFormHandler(e, this.state.text);
this.setState((prevState) => ({
text: '',
}));
}
@@ -29,21 +30,23 @@ class FormInput extends React.Component {
<div className="formBlock">
<span>Add a sheet: </span>
<form onSubmit={(e) => this.handleSubmit(e)}>
<input
onChange={this.handleChange}
value={this.state.text}
/>
<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);
}
@@ -51,43 +54,50 @@ class SheetEditor extends React.Component {
google.script.run
.withSuccessHandler((data) => this.setState({names: data}))
.withFailureHandler((error) => alert(error))
.getSheetsData()
.getSheetsData();
}
deleteButtonHandler(e, sheetIndex) {
return google.script.run
.withSuccessHandler((data) => this.setState({names: data}))
.withFailureHandler((error) => alert(error))
.deleteSheet(sheetIndex)
.deleteSheet(sheetIndex);
}
clickSheetNameHandler(e, sheetName) {
return google.script.run
.withSuccessHandler((data) => this.setState({names: data}))
.withFailureHandler((error) => alert(error))
.setActiveSheet(sheetName);
}
newSheetFormHandler(e, newSheetTitle) {
google.script.run
return google.script.run
.withSuccessHandler((data) => this.setState({names: data}))
.withFailureHandler((error) => alert(error))
.addSheet(newSheetTitle);
}
render() {
let names = this.state.names
let names = this.state.names;
return (
<div>
<FormInput newSheetFormHandler={this.newSheetFormHandler}/>
<span>Clicking on the X will delete the respective sheet. This cannot be undoed. It is recommended you use this sample tool on a new, empty Spreadsheet.</span>
<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}/>
)
})
: null
}
transitionLeaveTimeout={100}
>
{names.length ? names.map((name) => {
return <SheetButton
name={name}
deleteButtonHandler={this.deleteButtonHandler}
clickSheetNameHandler={this.clickSheetNameHandler}
key={name.sheetName}
/>;
})
: null}
</ReactCSSTransitionGroup>
</div>
);
@@ -102,19 +112,23 @@ class SheetButton extends React.Component {
return (
<div className="sheetLine">
<button
onClick={(e) => this.props.deleteButtonHandler(e,sheetIndex)}
>
X
onClick={(e) => this.props.deleteButtonHandler(e, sheetIndex)}
>X
</button>
<span className={"sheetNameText " + (isActiveSheet ? "active-sheet" : "")}>
{sheetName}
<span
onClick={(e) => this.props.clickSheetNameHandler(e, sheetName)}
className={'sheetNameText ' + (isActiveSheet ? 'active-sheet' : '')}
>{sheetName}
</span>
</div>
)
);
}
}
ReactDOM.render(
<SheetEditor />,
document.getElementById("index")
);
SheetButton.propTypes = {
name: PropTypes.object,
deleteButtonHandler: PropTypes.func,
clickSheetNameHandler: PropTypes.func,
};
ReactDOM.render(<SheetEditor />, document.getElementById('index'));
src/styles.css → src/client/styles.css
+1 -3
View File
@@ -45,8 +45,8 @@ button:focus {
font-weight: 700;
}
.sheetLine {
cursor: pointer;
line-height: 3;
height: 30px;
}
@@ -60,8 +60,6 @@ button:focus {
border-bottom: 3px solid #338236;
}
/*
ReactCSSTransitionGroup styling
*/
src/code.gs
-52
View File
@@ -1,52 +0,0 @@
// Use ES6/7 code
const onOpen = () => {
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;
src/dialog.html
-15
View File
@@ -1,15 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- remove/comment out these two script tags and uncomment the react imports from sidebar.html if you don't want to load react from a cdn -->
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> -->
<section id="index"></section>
</body>
</html>
src/server/.babelrc
+14
View File
@@ -0,0 +1,14 @@
{
"presets": [
["env", {
"modules": false
}]
],
"plugins": [
"transform-es3-property-literals",
"transform-es3-member-expression-literals",
"transform-class-properties",
"transform-object-rest-spread",
"transform-object-assign"
]
}
src/server/.eslintrc.json
+17
View File
@@ -0,0 +1,17 @@
{
"root": true,
"parser": "babel-eslint",
"extends": ["eslint:recommended", "google"],
"plugins": ["googleappsscript"],
"env": {
"googleappsscript/googleappsscript": true
},
"globals": {
"SpreadsheetApp": true,
"HtmlService": true,
"global": true
},
"rules": {
"import/prefer-default-export": 0
}
}
src/server/code.js
+9
View File
@@ -0,0 +1,9 @@
import * as publicFunctions from './sheets-utilities.js';
// Expose public functions
global.onOpen = publicFunctions.onOpen;
global.openDialog = publicFunctions.openDialog;
global.getSheetsData = publicFunctions.getSheetsData;
global.addSheet = publicFunctions.addSheet;
global.deleteSheet = publicFunctions.deleteSheet;
global.setActiveSheet = publicFunctions.setActiveSheet;
src/server/sheets-utilities.js
+56
View File
@@ -0,0 +1,56 @@
// Use ES6/7 code
const onOpen = () => {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Custom scripts')
.addItem('Edit sheets [sample React project]', 'openDialog')
.addToUi();
};
const openDialog = () => {
let html = HtmlService.createHtmlOutputFromFile('dialog')
.setWidth(400)
.setHeight(600);
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) => {
let sheets = getSheets();
SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
return getSheetsData();
};
const setActiveSheet = (sheetName) => {
SpreadsheetApp.getActive().getSheetByName(sheetName).activate();
return getSheetsData();
};
export {
onOpen,
openDialog,
getSheetsData,
addSheet,
deleteSheet,
setActiveSheet,
};