refact: moved to premade ui library
This commit is contained in:
Joshua Shoemaker
parent
76327fbc9e
commit
24d2c779cb
125
package-lock.json
generated
125
package-lock.json
generated
@ -1356,11 +1356,39 @@
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
|
||||
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
|
||||
},
|
||||
"@semantic-ui-react/event-stack": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.1.tgz",
|
||||
"integrity": "sha512-SA7VOu/tY3OkooR++mm9voeQrJpYXjJaMHO1aFCcSouS2xhqMR9Gnz0LEGLOR0h9ueWPBKaQzKIrx3FTTJZmUQ==",
|
||||
"requires": {
|
||||
"exenv": "^1.2.2",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"@sheerun/mutationobserver-shim": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
|
||||
"integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw=="
|
||||
},
|
||||
"@stardust-ui/react-component-event-listener": {
|
||||
"version": "0.38.0",
|
||||
"resolved": "https://registry.npmjs.org/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz",
|
||||
"integrity": "sha512-sIP/e0dyOrrlb8K7KWumfMxj/gAifswTBC4o68Aa+C/GA73ccRp/6W1VlHvF/dlOR4KLsA+5SKnhjH36xzPsWg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@stardust-ui/react-component-ref": {
|
||||
"version": "0.38.0",
|
||||
"resolved": "https://registry.npmjs.org/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz",
|
||||
"integrity": "sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.6.3"
|
||||
}
|
||||
},
|
||||
"@svgr/babel-plugin-add-jsx-attribute": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
|
||||
@ -3451,6 +3479,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||
@ -3863,6 +3896,15 @@
|
||||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"create-react-context": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
|
||||
"integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
|
||||
"requires": {
|
||||
"gud": "^1.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||
@ -5354,6 +5396,11 @@
|
||||
"strip-eof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
|
||||
},
|
||||
"exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
@ -6126,6 +6173,11 @@
|
||||
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
|
||||
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
|
||||
},
|
||||
"gud": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
|
||||
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
|
||||
},
|
||||
"gzip-size": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
|
||||
@ -7564,6 +7616,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
|
||||
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -7707,6 +7764,11 @@
|
||||
"object.assign": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"keyboard-key": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
|
||||
"integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
|
||||
},
|
||||
"killable": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
|
||||
@ -9131,6 +9193,11 @@
|
||||
"ts-pnp": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.26",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
|
||||
@ -10571,6 +10638,20 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-popper": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
|
||||
"integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"create-react-context": "^0.3.0",
|
||||
"deep-equal": "^1.1.1",
|
||||
"popper.js": "^1.14.4",
|
||||
"prop-types": "^15.6.1",
|
||||
"typed-styles": "^0.0.7",
|
||||
"warning": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
|
||||
@ -11217,6 +11298,32 @@
|
||||
"node-forge": "0.9.0"
|
||||
}
|
||||
},
|
||||
"semantic-ui-css": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz",
|
||||
"integrity": "sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==",
|
||||
"requires": {
|
||||
"jquery": "x.*"
|
||||
}
|
||||
},
|
||||
"semantic-ui-react": {
|
||||
"version": "0.88.2",
|
||||
"resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz",
|
||||
"integrity": "sha512-+02kN2z8PuA/cMdvDUsHhbJmBzxxgOXVHMFr9XK7zGb0wkW9A6OPQMFokWz7ozlVtKjN6r7zsb+Qvjk/qq1OWw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@semantic-ui-react/event-stack": "^3.1.0",
|
||||
"@stardust-ui/react-component-event-listener": "~0.38.0",
|
||||
"@stardust-ui/react-component-ref": "~0.38.0",
|
||||
"classnames": "^2.2.6",
|
||||
"keyboard-key": "^1.0.4",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.6",
|
||||
"react-popper": "^1.3.4",
|
||||
"shallowequal": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
@ -11406,6 +11513,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"shallowequal": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||
@ -12503,6 +12615,11 @@
|
||||
"mime-types": "~2.1.24"
|
||||
}
|
||||
},
|
||||
"typed-styles": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
|
||||
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
|
||||
},
|
||||
"typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
@ -12794,6 +12911,14 @@
|
||||
"makeerror": "1.0.x"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
"dmein": "^0.1.4",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.4.1"
|
||||
"react-scripts": "3.4.1",
|
||||
"semantic-ui-css": "^2.4.1",
|
||||
"semantic-ui-react": "^0.88.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
14
src/Collections/Tables.js
Normal file
14
src/Collections/Tables.js
Normal file
@ -0,0 +1,14 @@
|
||||
import { Table } from 'dmein'
|
||||
|
||||
let instance = null
|
||||
|
||||
class Tables {
|
||||
constructor () {
|
||||
if (!instance) instance = this
|
||||
|
||||
console.log(d)
|
||||
return instance
|
||||
}
|
||||
}
|
||||
|
||||
export default Tables
|
||||
11
src/Controllers/CreateTableController.js
Normal file
11
src/Controllers/CreateTableController.js
Normal file
@ -0,0 +1,11 @@
|
||||
import Tables from '../Collections/Tables'
|
||||
import FileAccess from '../Services/FileAccess'
|
||||
|
||||
class CreateTableController {
|
||||
constructor(props) {
|
||||
this.tables = new Tables()
|
||||
this.fileAccess = new FileAccess()
|
||||
}
|
||||
}
|
||||
|
||||
export default CreateTableController
|
||||
26
src/Services/FileAccess.js
Normal file
26
src/Services/FileAccess.js
Normal file
@ -0,0 +1,26 @@
|
||||
const valideTypes = [
|
||||
'application/json'
|
||||
]
|
||||
|
||||
class FileAccess {
|
||||
constructor (props) {
|
||||
this.reader = new FileReader()
|
||||
if (this.props) {
|
||||
if (props.file) this.setFile(props.file)
|
||||
}
|
||||
}
|
||||
|
||||
readFile = async () => {
|
||||
if (!this.file) return
|
||||
const data = await new Response(this.file).text()
|
||||
return JSON.parse(data)
|
||||
}
|
||||
|
||||
setFile = file => {
|
||||
if (this.validateFileType(file)) this.file = file
|
||||
}
|
||||
|
||||
validateFileType= file=> valideTypes.includes(file.type)
|
||||
}
|
||||
|
||||
export default FileAccess
|
||||
@ -1,17 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import './App.css'
|
||||
import Button from './Inputs/Button'
|
||||
import TextField from './Inputs/TextField'
|
||||
|
||||
class App extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div>
|
||||
<Button />
|
||||
<TextField id='QWERTY' label='TestLabel' onBlur={() => console.log('Yo')} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
@ -1,37 +0,0 @@
|
||||
.Button {
|
||||
background-color: rgb(65, 105, 225);
|
||||
border: 0;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
padding: 6px 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.Button:hover {
|
||||
background-color: rgb(85, 127, 255);
|
||||
}
|
||||
|
||||
.Button:active {
|
||||
background-color: rgb(14, 62, 207);
|
||||
}
|
||||
|
||||
.Button-outline {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.Button-outline:hover {
|
||||
background-color: rgba(200, 200, 200, .4);
|
||||
}
|
||||
|
||||
.Button-cancel {
|
||||
background-color: rgb(214, 52, 52);
|
||||
}
|
||||
|
||||
.Button-cancel:hover {
|
||||
background-color: rgb(233, 72, 72);
|
||||
}
|
||||
|
||||
.Button-cancel:active {
|
||||
background-color: rgb(201, 17, 17);
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import './Button.css'
|
||||
|
||||
class Button extends Component {
|
||||
|
||||
getButtonClasses = () => {
|
||||
const { style } = this.props
|
||||
let additionalClass = ''
|
||||
|
||||
if (style === 'cancel') additionalClass = 'Button-cancel'
|
||||
if (style === 'outline') additionalClass = 'Button-outline'
|
||||
|
||||
return `Button ${additionalClass}`
|
||||
}
|
||||
|
||||
render = () => {
|
||||
return (
|
||||
<button className={this.getButtonClasses()} onClick={this.props.onClick}>
|
||||
{ this.props.value || 'Submit' }
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Button
|
||||
@ -1,15 +0,0 @@
|
||||
.TextField input[type=text] {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid white;
|
||||
border-radius: 0px;
|
||||
color: white;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.TextField input[type=text]:focus {
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
.TextField label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import './TextField.css'
|
||||
|
||||
class TextField extends Component {
|
||||
render = () => {
|
||||
const { id, label, onBlur, inlineLabel } = this.props
|
||||
return (
|
||||
<div className='TextField'>
|
||||
{ label ? <label htmlFor={id}>{label}</label> : '' }
|
||||
{!inlineLabel ? <br /> : ''}
|
||||
<input type='text' id={this.props.id} onBlur={onBlur} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default TextField
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import App from './components/App'
|
||||
import App from './views/App'
|
||||
import * as serviceWorker from './serviceWorker'
|
||||
|
||||
ReactDOM.render(
|
||||
|
||||
@ -6,7 +6,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: white;
|
||||
background-color: rgb(10, 10, 10);
|
||||
background-color: rgb(39, 39, 39);
|
||||
}
|
||||
|
||||
code {
|
||||
16
src/views/App.js
Normal file
16
src/views/App.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react'
|
||||
import './App.css'
|
||||
import 'semantic-ui-css/semantic.min.css'
|
||||
import CreateTableForm from './CreateTable/CreateTableForm'
|
||||
|
||||
class App extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<div className='App'>
|
||||
<CreateTableForm />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
12
src/views/CreateTable/CreateTableForm.css
Normal file
12
src/views/CreateTable/CreateTableForm.css
Normal file
@ -0,0 +1,12 @@
|
||||
.CreateTableForm {
|
||||
width: 380px;
|
||||
padding: 40px;
|
||||
border-radius: 6px;
|
||||
border: solid rgb(240, 240, 240) 1px;
|
||||
}
|
||||
|
||||
.creatTableFormSubmitButtons {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
55
src/views/CreateTable/CreateTableForm.js
Normal file
55
src/views/CreateTable/CreateTableForm.js
Normal file
@ -0,0 +1,55 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Button, Input, Header } from 'semantic-ui-react'
|
||||
import './CreateTableForm.css'
|
||||
|
||||
import FileAccess from '../../Services/FileAccess'
|
||||
const fileAccess = new FileAccess()
|
||||
|
||||
|
||||
class CreateTableForm extends Component {
|
||||
constructor () {
|
||||
super()
|
||||
this.tableLabelInput = React.createRef()
|
||||
this.tableFileInput = React.createRef()
|
||||
}
|
||||
|
||||
handleSubmit = async e => {
|
||||
e.preventDefault()
|
||||
|
||||
fileAccess.setFile(this.tableFileInput.current.inputRef.current.files[0])
|
||||
const fileData = await fileAccess.readFile()
|
||||
console.log(fileData)
|
||||
}
|
||||
|
||||
render = () => {
|
||||
return (
|
||||
<div className='CreateTableForm'>
|
||||
<Header as='h3'>Create Table From File</Header>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<Input
|
||||
placeholder='Table Label'
|
||||
ref={this.tableLabelInput}
|
||||
icon='tags'
|
||||
style={{ width: '300px' }}
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<Input
|
||||
type='file'
|
||||
ref={this.tableFileInput}
|
||||
icon='file'
|
||||
style={{ width: '300px' }}
|
||||
/>
|
||||
|
||||
<div className='creatTableFormSubmitButtons'>
|
||||
<Button content='Confirm' primary />
|
||||
<Button content='Confirm' secondary />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default CreateTableForm
|
||||
1902
testData/testJson.json
Normal file
1902
testData/testJson.json
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user