more settings enabled

2018-09-17 03:18:15 -04:00
parent 3e2d186956
commit ff3f14a4f1
24 changed files with 10798 additions and 420 deletions
@@ -0,0 +1,3 @@
+{
+  "presets": ["react"]
+}
@@ -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
+  }
+}
@@ -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>
@@ -0,0 +1,134 @@
+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';
+
+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'));
@@ -0,0 +1,91 @@
+@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 {
+	cursor: pointer;
+	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;
+}