removed blueprint dependency

2017-06-22 17:04:06 +05:30 · 2017-06-22 17:04:06 +05:30 · acb91f9071
parent 78c746af3b
commit acb91f9071
7 changed files with 83 additions and 102 deletions
--- a/package.json
+++ b/package.json
@ -3,8 +3,6 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@blueprintjs/core": "^1.19.0",
-    "@blueprintjs/table": "^1.16.0",
    "@types/es6-shim": "^0.31.34",
    "@types/jest": "^19.2.4",
    "@types/lodash": "^4.14.66",
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
+import { App } from './App';

 it('renders without crashing', () => {
  const div = document.createElement('div');
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,24 +1,21 @@
 import * as React from 'react';
-import LexEditor from './LexComponents';
-// import { Table } from '@blueprintjs/table';
-// const logo = require('./logo.svg');
+import { LexEditor } from './LexComponents';
+import { Header, Icon, Segment } from 'semantic-ui-react';

-class App extends React.Component<{}, null> {
+export class App extends React.Component<{}, null> {
  render() {
    return (
      <div>
-        <nav className="pt-navbar pt-dark">
-          <div className="pt-navbar-group pt-align-left">
-            <button
-              className="pt-button pt-minimal pt-icon-large pt-icon-edit"
-            />
-            <div className="pt-navbar-heading">Freespeech Lexicon Editor</div>
-          </div>
-        </nav>
+        <Segment inverted={true} size="tiny" attached={true}>
+          <Header inverted={true} color="teal" size="mini">
+            <Icon name="edit" size="small" />
+            <Header.Content>
+              Freespeech Lexicon Editor
+            </Header.Content>
+          </Header>
+        </Segment>
        <LexEditor fileName="/new_es.xml" />
      </div>
    );
  }
 }
-
-export default App;
--- a/src/LexComponents.tsx
+++ b/src/LexComponents.tsx
@ -1,15 +1,15 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-// import {
-//   FocusStyleManager,
-// } from '@blueprintjs/core';
-import { Image,Input } from 'semantic-ui-react';
+import {
+  Image,
+  Input,
+  Dropdown,
+  Card,
+} from 'semantic-ui-react';
 import * as XML from 'xml2js';
 import { LexSingleInput } from './LexInputComponents';
 const { Flex, Box } = require('reflexbox');

-// FocusStyleManager.onlyShowFocusOnTabs();
-
 interface LexEditorProps {
  fileName: RequestInfo;
 }
@ -31,7 +31,7 @@ const fieldMetaMap = {
  'lang': { lens: '$.id', type: 'select' },
 };

-class LexEditor extends React.Component<LexEditorProps, any> {
+export class LexEditor extends React.Component<LexEditorProps, any> {
  lexData: any;
  allEntries: any;
  selectFields: any;
@ -99,46 +99,39 @@ class LexEditor extends React.Component<LexEditorProps, any> {

 class LexSearch extends React.Component<any, any> {
  searchType: String = 'label';
-  searchValue: String = '';
+  searchValue: String = 'just';
  public render() {
+    let dropOptions = _.keys(fieldMetaMap).map((k, i, c) => {
+      return { key: i, value: k, text: _.capitalize(k) };
+    });
    return (
-      <Flex p={1} align="center" className="pt-control-group">
-        <div
-          className="pt-select"
-          onChange={e => this.handleTypeChange(e)}
-        >
-          <select>
-            {_.keys(fieldMetaMap).map((k, i, c) => {
-              return <option key={i} value={k}> {_.capitalize(k)}</option>;
-            })}
-          </select>
-        </div>
-        <div className="pt-input-group" style={{ width: '120px' }}>
-          <span className="pt-icon pt-icon-search" />
+      <div>
+        <Dropdown
+          options={dropOptions}
+          onChange={(e, d) => this.handleChange(d, true)}
+          defaultValue={dropOptions[0].value}
+          compact={true}
+          selection={true}
+        />
        <Input
          type="text"
          placeholder="Search input"
          dir="auto"
-            onChange={e => this.handleLookup(e)}
+          onChange={(e, d) => this.handleChange(d, false)}
        />
      </div>
-      </Flex>
    );
  }

-  private handleLookup(e: any) {
-    this.searchValue = e.target.value;
-    this.props.handleOnSearch({
-      searchType: this.searchType
-      , searchValue: this.searchValue
-    });
+  private handleChange(e: any, t: boolean) {
+    if (t) {
+      this.searchType = e.value;
+    } else {
+      this.searchValue = e.value;
    }
-
-  private handleTypeChange(e: any) {
-    this.searchType = e.target.value;
    this.props.handleOnSearch({
-      searchType: this.searchType
-      , searchValue: this.searchValue
+      searchType: this.searchType,
+      searchValue: this.searchValue
    });
  }
 }
@ -146,15 +139,10 @@ class LexSearch extends React.Component<any, any> {
 function selectMode(props: any) {
  if (props.searchText === '') {
    return (
-      <div className="pt-non-ideal-state">
-        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
-          <span className="pt-icon pt-icon-folder-open" />
-        </div>
-        <h4 className="pt-non-ideal-state-title">Empty</h4>
-        <div className="pt-non-ideal-state-description">
+      <div>
+        <h4>Empty</h4>
        Type something in the searchbar.
      </div>
-      </div>
    );
  } else {
    let editEntries = props.matchedEntries.map((mObj: any) => {
@ -183,7 +171,7 @@ function selectMode(props: any) {

 function LexMatches(props: any) {
  return (
-    <Flex m={10} align="center" wrap={true}>
+    <Flex wrap={true}>
      {selectMode(props)}
    </Flex>
  );
@ -206,11 +194,11 @@ class LexEdit extends React.Component<any, any> {
          <LexSingleInput key={field} labelText={_.capitalize(field)}>
            <Input
              onChange={sh}
-              style={{ width: '110px' }}
              defaultValue={defaultText}
              placeholder={field}
              type="text"
              dir="auto"
+              style={{ width: '150px' }}
            />
          </LexSingleInput>
        );
@ -219,8 +207,7 @@ class LexEdit extends React.Component<any, any> {
          <LexSingleInput key={field} labelText={_.capitalize(field)}>
            <select
              onChange={sh}
-              style={{ width: '110px' }}
-              className="pt-select"
+              style={{ width: '150px' }}
              defaultValue={defaultText}
            >
              {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;
        return (
          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <Image src={imageSrc} size="small"/>
+            <Image src={imageSrc} size="tiny" bordered={true}/>
          </LexSingleInput>
        );
      } else {
@ -241,21 +228,19 @@ class LexEdit extends React.Component<any, any> {
      }
    });
    return (
-      <Box
-        wx={240}
-        mx={10}
-        my={20}
-        className="pt-card pt-elevation-2 pt-interactive"
-      >
-        <label className="pt-label">
+      <Box m={2}>
+        <Card raised={true}>
+          <Card.Content>
+            <Card.Header>
              GUID {_.get<any>(li, 'guid', '')}
-        </label>
-        <label className="pt-label">
-          Language: {_.get<any>(li, '$.id', '')}
-        </label>
-        <Box column={true} m={1}>
+            </Card.Header>
+            <Card.Meta>
+              language: {_.get<any>(li, '$.id', '')}
+            </Card.Meta>
+          </Card.Content>
+
          {lexFields}
-        </Box>
+        </Card>
      </Box>
    );
  }
@ -264,5 +249,3 @@ class LexEdit extends React.Component<any, any> {
    this.setState(event);
  }
 }
-
-export default LexEditor;
--- a/src/LexInputComponents.tsx
+++ b/src/LexInputComponents.tsx
@ -1,21 +1,25 @@
 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> {
  public render() {
    return (
-      <div className="pt-form-group pt-inline">
-        <Box w={2 / 5}>
-          <label
-            style={{ textAlign: 'right' }}
-            className="pt-label"
+      <div>
+        <Form>
+          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
+            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
+              <Label
+                pointing="right"
              >
                {this.props.labelText}
-          </label>
-        </Box>
-        <Box w={3 / 5}>
+              </Label>
+            </Form.Field>
+            <Form.Field as={Box} w={3 / 5} >
              {this.props.children}
-        </Box>
+            </Form.Field>
+          </Form.Group>
+        </Form>
      </div>
    );
  }
--- a/src/index.css
+++ b/src/index.css
@ -1,3 +1,2 @@
@import "~normalize.css/normalize.css";
-@import "~@blueprintjs/core/dist/blueprint.css";
@import "~semantic-ui-css/semantic.min.css";
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from './App';
+import { App } from './App';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';