Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Packages upgrade (bootstrap 4) #12

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Packages upgrade (bootstrap 4) #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
71c4027
devDependencies lint-staged
noud Sep 4, 2020
51b65dc
packages upgrade
noud Sep 4, 2020
94f0db5
packages bootstrap 4
noud Sep 5, 2020
b640ac8
removed leftover comment
noud Sep 5, 2020
422b4b4
col-md
noud Sep 5, 2020
3ab308f
closable ColumnModal if empty fields
noud Sep 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 36 additions & 24 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,34 +33,46 @@
]
},
"dependencies": {
"classnames": "^2.2.5",
"immutability-helper": "^2.7.0",
"classnames": "^2.2.6",
"immutability-helper": "^3.1.1",
"jsplumb": "2.2.10",
"lodash": "^4.17.10",
"react": "^16.4.0",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.2.0",
"react-redux": "^5.0.7",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
"lodash": "^4.17.20",
"normalize.css": "^8.0.1",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0 ",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"react-redux": "^7.2.1",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"reselect": "^3.0.1"
"reselect": "^4.0.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^20.0.3",
"cross-env": "^5.1.6",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.2",
"flow-bin": "^0.73.0",
"husky": "^0.14.3",
"jest": "^20.0.3",
"lint-staged": "^7.1.3"
"babel-eslint": "^10.1.0",
"bootstrap": "^4.5.2",
"cross-env": "^7.0.2",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"flow-bin": "^0.133.0",
"html5-boilerplate": "^8.0.0",
"husky": "^4.2.5",
"lint-staged": "^10.3.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
3 changes: 3 additions & 0 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Schema from './components/Schema';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'normalize.css/normalize.css';
import 'html5-boilerplate/dist/css/main.css';
import './styles/bootstrap.css';
import './styles/main.css';

Expand Down
12 changes: 6 additions & 6 deletions src/components/ExportDatabase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
* @flow
*/
import React, { Component } from 'react';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import { OverlayTrigger } from 'react-bootstrap';
import { Tooltip } from 'react-bootstrap';
import type { ColumnType, RelationType, TableType, UiType } from '../utils/flowtypes';

const exportTooltip = (
Expand Down Expand Up @@ -60,7 +60,7 @@ class ExportDatabase extends Component<Props> {
}

return (
<li>
<li class="list-inline-item">
<form
className='form-inline'
method='POST'
Expand All @@ -73,7 +73,7 @@ class ExportDatabase extends Component<Props> {
<OverlayTrigger
placement='bottom'
overlay={ packageMode ? exportTooltip : exportJsonTooltip }
delayShow={ 300 }
delay={{ show: 300 }}
rootClose
>
<button
Expand All @@ -84,8 +84,8 @@ class ExportDatabase extends Component<Props> {
</button>
</OverlayTrigger>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className='hidden' ref={ (download) => { this.download = download; } }>
Export Schema
<a className='d-none' ref={ (download) => { this.download = download; } }>
Eport Schema
</a>
</li>
);
Expand Down
16 changes: 8 additions & 8 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
* @flow
*/
import React, { Component } from 'react';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import { OverlayTrigger } from 'react-bootstrap';
import { Tooltip } from 'react-bootstrap';
import ExportDatabase from '../containers/ExportDatabase';
import ImportDatabase from './ImportDatabase';

Expand Down Expand Up @@ -75,11 +75,11 @@ class Header extends Component<Props> {
</div>
<div className='menu col-xs-2 col-sm-4 text-right'>
<ul className='list-inline'>
<li>
<li class="list-inline-item">
<OverlayTrigger
placement='bottom'
overlay={ tableTooltip }
delayShow={ 300 }
delay={{ show: 300 }}
rootClose
>
<button
Expand All @@ -89,11 +89,11 @@ class Header extends Component<Props> {
</button>
</OverlayTrigger>
</li>
<li>
<li class="list-inline-item">
<OverlayTrigger
placement='bottom'
overlay={ trashTooltip }
delayShow={ 300 }
delay={{ show: 300 }}
rootClose
>
<button
Expand All @@ -108,11 +108,11 @@ class Header extends Component<Props> {

<ImportDatabase />

<li>
<li class="list-inline-item">
<OverlayTrigger
placement='bottom'
overlay={ forkTooltip }
delayShow={ 300 }
delay={{ show: 300 }}
rootClose
>
<a href='https://github.com/Agontuk/schema-designer'>
Expand Down
8 changes: 4 additions & 4 deletions src/components/ImportDatabase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*/
// $FlowFixMe
import React, { Component, SyntheticEvent } from 'react';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import { OverlayTrigger } from 'react-bootstrap';
import { Tooltip } from 'react-bootstrap';

const importTooltip = (
<Tooltip id='import-tooltip'><strong>Import Schema</strong></Tooltip>
Expand Down Expand Up @@ -57,11 +57,11 @@ class ImportDatabase extends Component<{}> {

render() {
return (
<li>
<li class="list-inline-item">
<OverlayTrigger
placement='bottom'
overlay={ importTooltip }
delayShow={ 300 }
delay={{ show: 300 }}
rootClose
>
<button className='fa fa-upload' onClick={ this.openFileSelectionWindow }></button>
Expand Down
66 changes: 36 additions & 30 deletions src/components/Modals/ColumnModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @flow
*/
import React, { Component } from 'react';
import Modal from 'react-bootstrap/lib/Modal';
import { Modal } from 'react-bootstrap';
import classnames from 'classnames';
import findIndex from 'lodash/findIndex';
import ForeignKeyForm from './ForeignKeyForm';
Expand Down Expand Up @@ -174,6 +174,12 @@ class ColumnModal extends Component<Props, State> {
this.setState({ foreignKeyEnabled: event.target.checked });
}

toggleColumnModal = () => {
const { toggleColumnModal } = this.props;

toggleColumnModal();
}

render() {
console.log('ColumnModal rendering'); // eslint-disable-line no-console
const {
Expand All @@ -182,33 +188,32 @@ class ColumnModal extends Component<Props, State> {
editMode,
showColumnModal,
tables,
toggleColumnModal
} = this.props;
const { columnType, duplicateName, foreignKeyEnabled, isUnsigned } = this.state;

return (
<Modal
className='wider-modal'
show={ showColumnModal }
onHide={ toggleColumnModal }
onHide={ this.toggleColumnModal }
>
<Modal.Header>
<button type='button' className='close' onClick={ toggleColumnModal }>
<span>&times;</span>
</button>
<Modal.Title>
<Modal.Title>
{ editMode ? 'Update Column' : 'Add Column' }
</Modal.Title>
<button type='button' className='close' onClick={ this.toggleColumnModal }>
<span>&times;</span>
</button>
</Modal.Header>

<Modal.Body>
<form
className='form-horizontal'
ref={ (form) => { this.form = form; } }
onSubmit={ this.handleSubmit }
>
<div className={ classnames('form-group', { 'has-error': duplicateName }) }>
<label className='col-xs-3 control-label' htmlFor='name'>Name:</label>
<div className='col-xs-9'>
<div className={ classnames('form-group row', { 'has-error': duplicateName }) }>
<label className='col-md-3 col-form-label text-right' htmlFor='name'>Name:</label>
<div className='col-md-9'>
<input
type='text'
id='name'
Expand All @@ -220,14 +225,14 @@ class ColumnModal extends Component<Props, State> {
</div>

{ duplicateName &&
<span className='col-xs-offset-3 col-xs-9 help-block'>
<span className='col-md-offset-3 col-md-9 help-block'>
Duplicate column name
</span>
}
</div>
<div className='form-group'>
<label className='col-xs-3 control-label' htmlFor='type'>Type:</label>
<div className='col-xs-9'>
<div className='form-group row'>
<label className='col-md-3 col-form-label text-right' htmlFor='type'>Type:</label>
<div className='col-md-9'>
<select
className='form-control'
id='type'
Expand Down Expand Up @@ -264,9 +269,9 @@ class ColumnModal extends Component<Props, State> {
</select>
</div>
</div>
<div className='form-group'>
<label className='col-xs-3 control-label' htmlFor='length'>Length:</label>
<div className='col-xs-9'>
<div className='form-group row'>
<label className='col-md-3 col-form-label text-right' htmlFor='length'>Length:</label>
<div className='col-md-9'>
<input
type='text'
id='length'
Expand All @@ -279,11 +284,11 @@ class ColumnModal extends Component<Props, State> {
/>
</div>
</div>
<div className='form-group'>
<label className='col-xs-3 control-label' htmlFor='defVal'>
<div className='form-group row'>
<label className='col-md-3 col-form-label text-right'>
Default Value:
</label>
<div className='col-xs-9'>
<div className='col-md-9'>
<input
type='text'
id='defVal'
Expand All @@ -293,9 +298,9 @@ class ColumnModal extends Component<Props, State> {
/>
</div>
</div>
<div className='form-group'>
<label className='col-xs-3 control-label' htmlFor='comment'>Comment:</label>
<div className='col-xs-9'>
<div className='form-group row'>
<label className='col-md-3 col-form-label text-right' htmlFor='comment'>Comment:</label>
<div className='col-md-9'>
<input
type='text'
id='comment'
Expand All @@ -305,9 +310,9 @@ class ColumnModal extends Component<Props, State> {
/>
</div>
</div>
<div className='form-group'>
<strong className='col-xs-3 control-label'>Misc:</strong>
<div className='col-xs-9'>
<div className='form-group row'>
<strong className='col-md-3 col-form-label text-right'>Misc:</strong>
<div className='col-md-9'>
<label className='checkbox-inline' htmlFor='autoInc'>
<input
type='checkbox'
Expand Down Expand Up @@ -350,7 +355,8 @@ class ColumnModal extends Component<Props, State> {
/> Unsigned
</label>
</div>
<div className='col-xs-9 col-xs-offset-3'>
<div className='col-md-3'/>
<div className='col-md-9 col-md-offset-3'>
<label
className={ classnames('checkbox-inline', { disabled: !isUnsigned }) }
htmlFor='foreign'
Expand Down Expand Up @@ -393,7 +399,7 @@ class ColumnModal extends Component<Props, State> {
<button
type='button'
className='btn btn-default'
onClick={ toggleColumnModal }
onClick={ this.toggleColumnModal }
>Cancel
</button>
</Modal.Footer>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modals/DbModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @flow
*/
import React, { Component } from 'react';
import Modal from 'react-bootstrap/lib/Modal';
import { Modal } from 'react-bootstrap';

type Props = {
name: string,
Expand Down
12 changes: 6 additions & 6 deletions src/components/Modals/ForeignKeyForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@ class ForeignKeyForm extends PureComponent<Props, State> {
const { currentForeignTableId } = this.state;

return (
<div className='form-group'>
<strong className='col-xs-3 control-label'>Foreign Key:</strong>
<span className='col-xs-2 control-label'>References:</span>
<div className='col-xs-3'>
<div className='form-group row'>
<strong className='col-md-3 col-form-label text-right'>Foreign Key:</strong>
<span className='col-md-2 col-form-label text-right'>References:</span>
<div className='col-md-3'>
<select
className='form-control'
defaultValue={ data.references.id }
Expand All @@ -129,8 +129,8 @@ class ForeignKeyForm extends PureComponent<Props, State> {
}
</select>
</div>
<span className='col-xs-1 control-label'>On:</span>
<div className='col-xs-3'>
<span className='col-md-1 col-form-label text-right'>On:</span>
<div className='col-md-3'>
<select
className='form-control'
defaultValue={ data.on.id }
Expand Down
Loading