malar
/
fs-walle-react-ts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

removed blueprint dependency

master
Malar Kannan 2017-06-22 17:04:06 +05:30
parent 78c746af3b
commit acb91f9071
7 changed files with 83 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -3,8 +3,6 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@blueprintjs/core": "^1.19.0",
"@blueprintjs/table": "^1.16.0",
"@types/es6-shim": "^0.31.34", "@types/es6-shim": "^0.31.34",
"@types/jest": "^19.2.4", "@types/jest": "^19.2.4",
"@types/lodash": "^4.14.66", "@types/lodash": "^4.14.66",

2
src/App.test.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import App from './App'; import { App } from './App';
it('renders without crashing', () => { it('renders without crashing', () => {
const div = document.createElement('div'); const div = document.createElement('div');

25
src/App.tsx
View File

@ -1,24 +1,21 @@
import * as React from 'react'; import * as React from 'react';
import LexEditor from './LexComponents'; import { LexEditor } from './LexComponents';
// import { Table } from '@blueprintjs/table'; import { Header, Icon, Segment } from 'semantic-ui-react';
// const logo = require('./logo.svg');
class App extends React.Component<{}, null> { export class App extends React.Component<{}, null> {
render() { render() {
return ( return (
<div> <div>
<nav className="pt-navbar pt-dark"> <Segment inverted={true} size="tiny" attached={true}>
<div className="pt-navbar-group pt-align-left"> <Header inverted={true} color="teal" size="mini">
<button <Icon name="edit" size="small" />
className="pt-button pt-minimal pt-icon-large pt-icon-edit" <Header.Content>
/> Freespeech Lexicon Editor
<div className="pt-navbar-heading">Freespeech Lexicon Editor</div> </Header.Content>
</div> </Header>
</nav> </Segment>
<LexEditor fileName="/new_es.xml" /> <LexEditor fileName="/new_es.xml" />
</div> </div>
); );
} }
} }
export default App;

123
src/LexComponents.tsx
View File

@ -1,15 +1,15 @@
import * as React from 'react'; import * as React from 'react';
import * as _ from 'lodash'; import * as _ from 'lodash';
// import { import {
// FocusStyleManager, Image,
// } from '@blueprintjs/core'; Input,
import { Image,Input } from 'semantic-ui-react'; Dropdown,
Card,
} from 'semantic-ui-react';
import * as XML from 'xml2js'; import * as XML from 'xml2js';
import { LexSingleInput } from './LexInputComponents'; import { LexSingleInput } from './LexInputComponents';
const { Flex, Box } = require('reflexbox'); const { Flex, Box } = require('reflexbox');
// FocusStyleManager.onlyShowFocusOnTabs();
interface LexEditorProps { interface LexEditorProps {
fileName: RequestInfo; fileName: RequestInfo;
} }
@ -31,7 +31,7 @@ const fieldMetaMap = {
'lang': { lens: '$.id', type: 'select' }, 'lang': { lens: '$.id', type: 'select' },
}; };
class LexEditor extends React.Component<LexEditorProps, any> { export class LexEditor extends React.Component<LexEditorProps, any> {
lexData: any; lexData: any;
allEntries: any; allEntries: any;
selectFields: any; selectFields: any;
@ -99,46 +99,39 @@ class LexEditor extends React.Component<LexEditorProps, any> {
class LexSearch extends React.Component<any, any> { class LexSearch extends React.Component<any, any> {
searchType: String = 'label'; searchType: String = 'label';
searchValue: String = ''; searchValue: String = 'just';
public render() { public render() {
let dropOptions = _.keys(fieldMetaMap).map((k, i, c) => {
return { key: i, value: k, text: _.capitalize(k) };
});
return ( return (
<Flex p={1} align="center" className="pt-control-group"> <div>
<div <Dropdown
className="pt-select" options={dropOptions}
onChange={e => this.handleTypeChange(e)} onChange={(e, d) => this.handleChange(d, true)}
> defaultValue={dropOptions[0].value}
<select> compact={true}
{_.keys(fieldMetaMap).map((k, i, c) => { selection={true}
return <option key={i} value={k}> {_.capitalize(k)}</option>; />
})} <Input
</select> type="text"
</div> placeholder="Search input"
<div className="pt-input-group" style={{ width: '120px' }}> dir="auto"
<span className="pt-icon pt-icon-search" /> onChange={(e, d) => this.handleChange(d, false)}
<Input />
type="text" </div>
placeholder="Search input"
dir="auto"
onChange={e => this.handleLookup(e)}
/>
</div>
</Flex>
); );
} }
private handleLookup(e: any) { private handleChange(e: any, t: boolean) {
this.searchValue = e.target.value; if (t) {
this.searchType = e.value;
} else {
this.searchValue = e.value;
}
this.props.handleOnSearch({ this.props.handleOnSearch({
searchType: this.searchType searchType: this.searchType,
, searchValue: this.searchValue searchValue: this.searchValue
});
}
private handleTypeChange(e: any) {
this.searchType = e.target.value;
this.props.handleOnSearch({
searchType: this.searchType
, searchValue: this.searchValue
}); });
} }
} }
@ -146,14 +139,9 @@ class LexSearch extends React.Component<any, any> {
function selectMode(props: any) { function selectMode(props: any) {
if (props.searchText === '') { if (props.searchText === '') {
return ( return (
<div className="pt-non-ideal-state"> <div>
<div className="pt-non-ideal-state-visual pt-non-ideal-state-icon"> <h4>Empty</h4>
<span className="pt-icon pt-icon-folder-open" /> Type something in the searchbar.
</div>
<h4 className="pt-non-ideal-state-title">Empty</h4>
<div className="pt-non-ideal-state-description">
Type something in the searchbar.
</div>
</div> </div>
); );
} else { } else {
@ -183,7 +171,7 @@ function selectMode(props: any) {
function LexMatches(props: any) { function LexMatches(props: any) {
return ( return (
<Flex m={10} align="center" wrap={true}> <Flex wrap={true}>
{selectMode(props)} {selectMode(props)}
</Flex> </Flex>
); );
@ -206,11 +194,11 @@ class LexEdit extends React.Component<any, any> {
<LexSingleInput key={field} labelText={_.capitalize(field)}> <LexSingleInput key={field} labelText={_.capitalize(field)}>
<Input <Input
onChange={sh} onChange={sh}
style={{ width: '110px' }}
defaultValue={defaultText} defaultValue={defaultText}
placeholder={field} placeholder={field}
type="text" type="text"
dir="auto" dir="auto"
style={{ width: '150px' }}
/> />
</LexSingleInput> </LexSingleInput>
); );
@ -219,8 +207,7 @@ class LexEdit extends React.Component<any, any> {
<LexSingleInput key={field} labelText={_.capitalize(field)}> <LexSingleInput key={field} labelText={_.capitalize(field)}>
<select <select
onChange={sh} onChange={sh}
style={{ width: '110px' }} style={{ width: '150px' }}
className="pt-select"
defaultValue={defaultText} defaultValue={defaultText}
> >
{this.props.selectionMeta[field].map((k: any, i: any, c: any) => { {this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
@ -233,7 +220,7 @@ class LexEdit extends React.Component<any, any> {
let imageSrc = imageRoot + defaultText; let imageSrc = imageRoot + defaultText;
return ( return (
<LexSingleInput key={field} labelText={_.capitalize(field)}> <LexSingleInput key={field} labelText={_.capitalize(field)}>
<Image src={imageSrc} size="small"/> <Image src={imageSrc} size="tiny" bordered={true}/>
</LexSingleInput> </LexSingleInput>
); );
} else { } else {
@ -241,21 +228,19 @@ class LexEdit extends React.Component<any, any> {
} }
}); });
return ( return (
<Box <Box m={2}>
wx={240} <Card raised={true}>
mx={10} <Card.Content>
my={20} <Card.Header>
className="pt-card pt-elevation-2 pt-interactive" GUID {_.get<any>(li, 'guid', '')}
> </Card.Header>
<label className="pt-label"> <Card.Meta>
GUID {_.get<any>(li, 'guid', '')} language: {_.get<any>(li, '$.id', '')}
</label> </Card.Meta>
<label className="pt-label"> </Card.Content>
Language: {_.get<any>(li, '$.id', '')}
</label>
<Box column={true} m={1}>
{lexFields} {lexFields}
</Box> </Card>
</Box> </Box>
); );
} }
@ -264,5 +249,3 @@ class LexEdit extends React.Component<any, any> {
this.setState(event); this.setState(event);
} }
} }
export default LexEditor;

30
src/LexInputComponents.tsx
View File

@ -1,21 +1,25 @@
import * as React from 'react'; import * as React from 'react';
const { Box } = require('reflexbox'); import { Label, Form } from 'semantic-ui-react';
const { Flex, Box } = require('reflexbox');
export class LexSingleInput extends React.Component<any, any> { export class LexSingleInput extends React.Component<any, any> {
public render() { public render() {
return ( return (
<div className="pt-form-group pt-inline"> <div>
<Box w={2 / 5}> <Form>
<label <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
style={{ textAlign: 'right' }} <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
className="pt-label" <Label
> pointing="right"
{this.props.labelText} >
</label> {this.props.labelText}
</Box> </Label>
<Box w={3 / 5}> </Form.Field>
{this.props.children} <Form.Field as={Box} w={3 / 5} >
</Box> {this.props.children}
</Form.Field>
</Form.Group>
</Form>
</div> </div>
); );
} }

1
src/index.css
View File

@ -1,3 +1,2 @@
@import "~normalize.css/normalize.css"; @import "~normalize.css/normalize.css";
@import "~@blueprintjs/core/dist/blueprint.css";
@import "~semantic-ui-css/semantic.min.css"; @import "~semantic-ui-css/semantic.min.css";

2
src/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import App from './App'; import { App } from './App';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import './index.css'; import './index.css';