restructure and complete move to semantic-ui-react

This commit is contained in:
Adam Brown 2016-11-30 14:57:35 -05:00
parent dc96ac104c
commit 822a012129
12 changed files with 15292 additions and 402 deletions

View File

@ -1,12 +0,0 @@
{
"name": "dubdiff",
"version": "2.0.1",
"dependencies": {
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"bootstrap-sass-official": "~3.1.1",
"font-awesome": ">=4.1.0"
},
"devDependencies": {
}
}

15458
dist/browser-bundle.js vendored

File diff suppressed because one or more lines are too long

16
dist/index.html vendored
View File

@ -3,20 +3,8 @@
<title>Dubdiff 2</title> <title>Dubdiff 2</title>
</head> </head>
<body> <body>
<div class="table-container">
<div class="table-block footer-push">
<div id="root">If you see this then something is wrong.</div> <div id="root">If you see this then something is wrong.</div>
</div>
<div class="table-block">
<div class="container">
<footer id="footer" class="twelve columns">
<p><a href="http://adamarthurryan.com">Adam Brown</a> | This website is <a href="https://github.com/adamarthurryan/dubdiff-2">open source</a>.</p>
</footer>
</div>
</div>
</div>
<script src="browser-bundle.js"></script> <script src="browser-bundle.js"></script>
<link href="old-dubdiff.css" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</body> <link href="main.css" rel="stylesheet"> </body>
</html> </html>

View File

@ -22,7 +22,8 @@
"react-router": "^1.0.0", "react-router": "^1.0.0",
"redux": "^3.5.1", "redux": "^3.5.1",
"redux-router": "^1.0.0-beta5", "redux-router": "^1.0.0-beta5",
"reselect": "^2.5.1" "reselect": "^2.5.1",
"semantic-ui-react": "^0.61.6"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.3.26", "babel-core": "^6.3.26",

View File

@ -1,10 +1,13 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
import Header from './Header' import Header from './Header'
import Footer from './Footer'
import CompareControls from './CompareControls' import CompareControls from './CompareControls'
import Show from './Show' import Show from './Show'
@ -26,29 +29,32 @@ const mapDispatchToProps = dispatch => ({
class Compare extends React.Component { class Compare extends React.Component {
render() { render() {
console.log(this.props.safeInput)
return ( return (
<div> <div>
<Header/> <Header/>
<div className="container">
<form className="row"> <Segment basic padded>
<div className="col-md-2 col-sm-12"> <Grid stackable columns={2}>
<Grid.Column width="3">
<CompareControls/> <CompareControls/>
</div> </Grid.Column>
<div className="col-md-10 col-sm-12 content-well"> <Grid.Column width="13">
<Segment>
{ this.props.isShowDifference ? { this.props.isShowDifference ?
<div>{this.props.diff}</div>: <Show diff={this.props.diff} isMarkdownFormat={this.props.isMarkdownFormat}>{this.props.diff}</Show>:
<Show <Show
text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final} text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final}
isMarkdownFormat={this.props.isMarkdownFormat} isMarkdownFormat={this.props.isMarkdownFormat}
/> />
} }
</Segment>
</Grid.Column>
</Grid>
</Segment>
</div> <Footer/>
</form>
</div>
</div> </div>
) )
} }

View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Link} from 'react-router' import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
@ -38,19 +40,20 @@ class CompareControls extends React.Component {
render() { render() {
return ( return (
<div className="form-group"> <Segment.Group>
<div className="controls well btn-group col-lg-12"> <Segment >
<a type="submit" onClick={this.props.onShowOriginal} className={(this.props.isShowOriginal?'active ':'')+'btn btn-block btn-primary'}>Original</a> <Button fluid onClick={this.props.onShowOriginal} active={this.props.isShowOriginal}>Original</Button>
<a type="submit" onClick={this.props.onShowFinal} className={(this.props.isShowFinal?'active ':'')+'btn btn-block btn-primary'}>Final</a> <Button fluid onClick={this.props.onShowFinal} active={this.props.isShowFinal}>Final</Button>
<a type="submit" onClick={this.props.onShowDifference} className={(this.props.isShowDifference?'active ':'')+'btn btn-block btn-primary'}>Difference</a> <Button fluid onClick={this.props.onShowDifference} active={this.props.isShowDifference}>Difference</Button>
</div> </Segment>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}> <Segment >
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span> <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
&nbsp; As Markdown {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
</a> &nbsp;As Markdown
</div> </Button>
</div> </Segment>
</Segment.Group>
) )
} }
} }

View File

@ -1,16 +1,13 @@
import React from 'react' import React from 'react'
import {Segment, Header} from 'semantic-ui-react'
import {Link} from 'react-router' import {Link} from 'react-router'
const Header = (props) => ( const SiteHeader = (props) => (
<nav> <Segment basic padded textAlign="center" as="header" id='masthead'>
<header id="banner" className="hero-unit"> <Header><Link to="/">dubdiff</Link></Header>
<div className="container"> </Segment>
<h1><Link to="/">dubdiff</Link></h1>
<h3></h3>
</div>
</header>
</nav>
) )
export default Header export default SiteHeader

View File

@ -2,10 +2,13 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Segment, Grid, Form} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
import Header from './Header' import Header from './Header'
import Footer from './Footer'
import MainControls from './MainControls' import MainControls from './MainControls'
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
@ -30,22 +33,37 @@ class Main extends React.Component {
return ( return (
<div> <div>
<Header/> <Header/>
<div className="container">
<form className="row"> <Segment basic padded>
<div className="col-md-2 col-sm-12"> <Grid stackable columns={3}>
<Grid.Column width="3">
<MainControls/> <MainControls/>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Original</label>
<textarea value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
<Grid.Column width="6">
<Form>
<Form.Field>
<label>Final</label>
<textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)}></textarea>
</Form.Field>
</Form>
</Grid.Column>
</Grid>
</Segment>
<Footer/>
</div> </div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docA">Original</label>
<textarea id="docA" value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)} className="form-control"></textarea>
</div>
<div className="col-lg-5 col-sm-12 form-group">
<label htmlFor="docB">Final</label>
<textarea id="docB" value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)} className="form-control"></textarea>
</div>
</form>
</div>
</div>
) )
} }
} }

View File

@ -2,6 +2,8 @@ import React from 'react'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {Link} from 'react-router' import {Link} from 'react-router'
import {Button, Icon, Segment} from 'semantic-ui-react'
import * as Actions from '../actions' import * as Actions from '../actions'
import * as Selectors from '../selectors' import * as Selectors from '../selectors'
@ -32,17 +34,18 @@ class MainControls extends React.Component {
render() { render() {
return ( return (
<div className="form-group"> <Segment.Group>
<div className="controls well col-lg-12"> <Segment >
<Link to="compare" className="btn btn-block btn-primary">Compare</Link> <Link to="compare"><Button fluid>Compare</Button></Link>
</div> </Segment>
<div className="controls well btn-group col-lg-12">
<a className={(this.props.isMarkdownFormat ? "active " : "")+"btn btn-block btn-primary"} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}> <Segment >
<span className={(this.props.isMarkdownFormat ? "glyphicon-ok " : "") + "glyphicon"}></span> <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
&nbsp; As Markdown {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
</a> &nbsp;As Markdown
</div> </Button>
</div> </Segment>
</Segment.Group>
) )
} }
} }

View File

@ -1,11 +1,32 @@
import React from 'react' import React from 'react'
const Show = (props) => (
<div> const Show = (props) => {
<pre> return <div>
{props.text} <pre style={{whiteSpace:'pre-wrap'}}>
{props.text ?
props.text:
props.diff ?
diffToPre(props.diff) :
null
}
</pre> </pre>
</div> </div>
) }
export default Show export default Show
function diffToPre(diff) {
return diff.map(part => (
part.added ? <span><ins>{part.value}</ins>{ifNotNewlineSpace(part.value)}</span> :
part.removed ? <span><del>{part.value}</del>{ifNotNewlineSpace(part.value)}</span> :
<span>{part.value}{ifNotNewlineSpace(part.value)}</span>
))
}
const ifNotNewlineSpace = str => {
console.log(str)
return !str.endsWith('\n') ? ' ' : ''
}

View File

@ -4,10 +4,11 @@ import { createSelector } from 'reselect'
import React from 'react' import React from 'react'
import * as JsDiff from 'diff'
import {Format, Show} from './reducers' import {Format, Show} from './reducers'
import * as Dubdiff from './util/dubdiff'
const input = (state) => state.input const input = (state) => state.input
const format = (state) => state.format const format = (state) => state.format
@ -44,14 +45,7 @@ export const isShowDifference= isShow(Show.DIFFERENCE)
export const diff = createSelector( export const diff = createSelector(
[format, input], [format, input],
(format, input) => { (format, input) => {
return Dubdiff.plaintextDiff(input.original, input.final)
let diff = JsDiff.diffLines(input.original.replace(/ /g, '###\n'), input.final.replace(/ /g, '###\n'))
console.log(diff, diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/###\n/g, ' ')})).map(part => (
part.added ? <ins>{part.value}</ins> :
part.removed ? <del>{part.value}</del> :
<span>{part.value}</span>
))
/* /*
let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' ')) let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' '))
return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => ( return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => (
@ -63,6 +57,8 @@ export const diff = createSelector(
} }
) )
/* /*
html diff html diff
--- ---

View File

@ -5,7 +5,8 @@ module.exports = {
filename: './dist/browser-bundle.js' filename: './dist/browser-bundle.js'
}, },
target: 'web', target: 'web',
devtool: 'eval-module-source-map', // devtool: 'eval-module-source-map',
module: { module: {
loaders: [ loaders: [
{ {
@ -13,7 +14,7 @@ module.exports = {
loader: 'babel-loader', loader: 'babel-loader',
query: { query: {
presets: ['es2015', 'react'], presets: ['es2015', 'react'],
compact: "false" compact: "true"
} }
}, },
] ]