Added prototype of basic value view.

devuxd · Oct 23, 2017 · 1bb10a5 · 1bb10a5
1 parent 68f2e16
commit 1bb10a5
Show file tree

Hide file tree

Showing 7 changed files with 3,935 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 .DS_Store?
 .idea/
 StrategyTracker/node_modules
+ValueView/node_modules
diff --git a/ValueView/ValueView.js b/ValueView/ValueView.js
@@ -0,0 +1,92 @@
+import React from 'react';
+
+class ValueView extends React.Component {
+
+	constructor() {
+
+		super();
+
+		this.state = {
+			value: "",
+			editing: false
+		};
+
+		this.renderValue = this.renderValue.bind(this);
+		this.edit = this.edit.bind(this);
+		this.save = this.save.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+		this.borderStyle = {border: '1px solid lightGray', padding: '1em', display: 'inline-block'};
+
+	}
+
+	render() {
+		return (
+			<div style={this.borderStyle}>
+				{
+					this.state.editing === true ?
+						<textarea autoFocus onBlur={this.save} value={this.state.value} onChange={this.handleChange}></textarea> :
+						<div style={{cursor: "pointer"}} onClick={this.edit}>
+							{ this.renderValue(this.state.value) }
+						</div>
+				}
+			</div>
+		);
+	}
+
+	// Renders a view appropriate for the string's content.
+	renderValue(value) {
+
+		value = value.trim();
+
+		if(value === '' || value === 'nothing') return this.renderNothing();
+		else if(value.split(',').length > 1) return this.renderList(value);
+		else if(value.match(/^https?:\/\/[a-zA-Z0-9_\-]+\.?[a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-??]+$/)) return this.renderLink(value);
+		else return value;
+
+	}
+
+	renderNothing() {
+
+		return (
+			<div style={{fontStyle: 'italic'}}>nothing</div>
+		);
+
+	}
+
+	renderList(value) {
+
+		return value.split(',').map((item, index) => {
+			return <span style={this.borderStyle} key={index}>{ this.renderValue(item.trim()) }</span>;
+		});
+
+	}
+
+	renderLink(value) {
+
+		return <a href={value}>{value}</a>;
+
+	}
+
+	edit() { 
+
+		// Set to edit. Expects text area to auto-focus itself.
+		this.setState({ editing: true });
+
+	}
+
+	save() {
+
+		// Return to rendering the view.		
+		this.setState({ editing: false }); 
+
+	}
+
+	handleChange(event) {
+
+	    this.setState({value: event.target.value});
+
+	}
+
+}
+
+export { ValueView };
diff --git a/ValueView/build.js b/ValueView/build.js
diff --git a/ValueView/demo.js b/ValueView/demo.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { ValueView } from './ValueView';
+
+import 'bootstrap';
+
+ReactDOM.render((
+	<ValueView/>
+), document.getElementById('value-view-demo'));
diff --git a/ValueView/index.html b/ValueView/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Value view demo</title>        
+
+		<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+
+		<!-- Latest compiled and minified CSS -->
+<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    </head>
+    <body>
+
+		<div class="container">
+			<div class="row">
+				<div class="col-sm">
+				    <h1>Value View Demo</h1>
+				    <p>This is a simple demo of the value view. The parsing is pretty basic at this point. If the string is "nothing" or a link, it'll be formatted appropriately. If it's a comma separated list of more than one item, it'll be formatted as a list. There's a lot more complexity we can add to this later as necessary, but I think we should identify usability issues as we go.</p>
+				    <p><em>Click on to edit, click out to save.</em></p>
+				</div>
+				<div class="col-sm">
+			        <div id="value-view-demo">
+						<!-- This element's contents will be replaced with your component. -->
+					</div>
+				</div>
+				<div class="col-sm"></div>
+			</div>
+		</div>	    
+
+		<!-- Load the JavaScript -->
+		<script src="build.js"></script>
+
+    </body>
+</html>