add initial support for tailwindcss (#134)
Add support for and demo using tailwindcss
This commit is contained in:
Pencho BELNEYSKI
@@ -0,0 +1,39 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const FormInput = ({ submitNewSheet }) => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const handleChange = (event) => setInputValue(event.target.value);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
if (inputValue.length === 0) return;
|
||||
|
||||
submitNewSheet(inputValue);
|
||||
setInputValue('');
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="flex w-full mx-auto items-center" onSubmit={handleSubmit}>
|
||||
<div className="grow pr-2 py-1">
|
||||
<input
|
||||
className="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 transition-colors duration-200 ease-in-out"
|
||||
onChange={handleChange}
|
||||
value={inputValue}
|
||||
placeholder="New sheet name"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded"
|
||||
type="submit"
|
||||
>Add Sheet</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormInput;
|
||||
|
||||
FormInput.propTypes = {
|
||||
submitNewSheet: PropTypes.func,
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const SheetButton = ({ sheetDetails, deleteSheet, setActiveSheet }) => {
|
||||
const { index, name, isActive } = sheetDetails;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`mt-5 py-3 w-1/2 justify-center border-b-2 title-font font-medium inline-flex leading-none ${
|
||||
isActive
|
||||
? ` bg-gray-100 border-indigo-500 text-indigo-500 tracking-wider rounded-t`
|
||||
: ` border-gray-200 hover:text-gray-900 tracking-wider`
|
||||
} flex flex-wrap space-x-2 p-2 items-end`}
|
||||
>
|
||||
<button
|
||||
className="bg-transparent hover focus:outline-none grow"
|
||||
onClick={() => setActiveSheet(name)}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
<button
|
||||
className="bg-transparent hover:text-red-500 sm"
|
||||
onClick={() => deleteSheet(index)}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="times"
|
||||
className="w-3 ml-3"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 352 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SheetButton;
|
||||
|
||||
SheetButton.propTypes = {
|
||||
sheetDetails: PropTypes.shape({
|
||||
index: PropTypes.number,
|
||||
name: PropTypes.string,
|
||||
isActive: PropTypes.bool,
|
||||
}),
|
||||
deleteSheet: PropTypes.func,
|
||||
setActiveSheet: PropTypes.func,
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
||||
import FormInput from './FormInput';
|
||||
import SheetButton from './SheetButton';
|
||||
|
||||
// This is a wrapper for google.script.run that lets us use promises.
|
||||
import { serverFunctions } from '../../utils/serverFunctions';
|
||||
|
||||
const SheetEditor = () => {
|
||||
const [names, setNames] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
// Call a server global function here and handle the response with .then() and .catch()
|
||||
serverFunctions.getSheetsData().then(setNames).catch(alert);
|
||||
}, []);
|
||||
|
||||
const deleteSheet = (sheetIndex) => {
|
||||
serverFunctions.deleteSheet(sheetIndex).then(setNames).catch(alert);
|
||||
};
|
||||
|
||||
const setActiveSheet = (sheetName) => {
|
||||
serverFunctions.setActiveSheet(sheetName).then(setNames).catch(alert);
|
||||
};
|
||||
|
||||
// You can also use async/await notation for server calls with our server wrapper.
|
||||
// (This does the same thing as .then().catch() in the above handlers.)
|
||||
const submitNewSheet = async (newSheetName) => {
|
||||
try {
|
||||
const response = await serverFunctions.addSheet(newSheetName);
|
||||
setNames(response);
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-alert
|
||||
alert(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<b>☀️ React demo! ☀️</b>
|
||||
</p>
|
||||
<p>
|
||||
This is a sample page that demonstrates a simple React app. Enter a name
|
||||
for a new sheet, hit enter and the new sheet will be created. Click the
|
||||
red × next to the sheet name to delete it.
|
||||
</p>
|
||||
<FormInput submitNewSheet={submitNewSheet} />
|
||||
<TransitionGroup className="sheet-list">
|
||||
{names.length > 0 &&
|
||||
names.map((name) => (
|
||||
<CSSTransition
|
||||
classNames="sheetNames"
|
||||
timeout={500}
|
||||
key={name.name}
|
||||
>
|
||||
<SheetButton
|
||||
sheetDetails={name}
|
||||
deleteSheet={deleteSheet}
|
||||
setActiveSheet={setActiveSheet}
|
||||
/>
|
||||
</CSSTransition>
|
||||
))}
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SheetEditor;
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<base target="_top" />
|
||||
<!-- Add any external scripts and stylesheets here -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<section id="index">
|
||||
<!-- bundled js and css will get inlined here during build -->
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import SheetEditor from './components/SheetEditor';
|
||||
import './styles.css';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<SheetEditor />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('index'));
|
||||
@@ -0,0 +1,33 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/*
|
||||
CSSTransitionGroup styling
|
||||
*/
|
||||
.sheetNames-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sheetNames-enter.sheetNames-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
|
||||
.sheetNames-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sheetNames-exit.sheetNames-exit-active {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
|
||||
.sheetNames-appear {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sheetNames-appear.sheetNames-appear-active {
|
||||
opacity: 1;
|
||||
transition: opacity 0.5ms ease-in;
|
||||
}
|
||||
Reference in New Issue
Block a user