Skip to content

Instantly share code, notes, and snippets.

@insin
Last active July 8, 2016 01:53
Show Gist options
  • Save insin/45b7f66e01628601c0cc6b79767b0e4f to your computer and use it in GitHub Desktop.
Save insin/45b7f66e01628601c0cc6b79767b0e4f to your computer and use it in GitHub Desktop.

Clone and install:

git clone https://gist.github.com/45b7f66e01628601c0cc6b79767b0e4f.git so-38236634
cd so-38236634
npm install

Start a hot reloading development server at http://localhost:3000:

npm start

Create a static production build in dist/:

npm run build

This gist uses nwb for React development tooling

var classNames = require('classnames')
var React = require('react')
var ReactDOM = require('react-dom')
var uuid = require('uuid')
var Widget = React.createClass({
render() {
var {widget} = this.props
var widgetClasses = classNames('widget', widget.width)
return <div className={widgetClasses}>
<header className="widget-header">
<h3>{widget.title}</h3>
<p>{widget.description}</p>
</header>
<ul>
<li>Lorem ipsum</li>
</ul>
<ul>
<li>Dolor sit</li>
</ul>
</div>
}
})
var WidgetsContainer = React.createClass({
render() {
return <div className="widgetsContainer">
{this.props.data.map(widget =>
<Widget key={widget.id} widget={widget}/>
)}
</div>
}
})
var Dashboard = React.createClass({
getInitialState() {
return {
data: []
}
},
handleWidgetConfig(widget) {
this.setState({
data: [
...this.state.data,
{id: uuid.v4(), ...widget},
]
})
},
render() {
return <div className="dashboard-content">
<CreateWidgetDropdown updateWidgetConfig={this.handleWidgetConfig} />
<WidgetsContainer data={this.state.data} />
</div>
}
})
var CreateWidgetDropdown = React.createClass({
createNewWidget(e) {
e.preventDefault()
var form = e.target
var width = form.elements.width.value
var title = form.elements.title.value
var description = form.elements.description.value
this.props.updateWidgetConfig({
width,
title,
description,
})
},
render() {
return <div className="page-dropdown">
<div className="page-dropdown-header">
<h2 className="wrapper">Add a Widget</h2>
</div>
<div id="page-dropdown-content">
<form className="page-dropdown-form" onSubmit={this.createNewWidget}>
<div className="choose-widget-type">
<h3>Choose a Widget Type</h3>
<div className="widget-type table">
<h4>Table</h4>
<div className="widget-type-icon">
<img src="" alt="" />
</div>
<ul className="widgetWidth">
<li>
<label>
1/3 Width
{' '}
<input name="width" type="radio" value="1/3 Width" defaultChecked/>
</label>
</li>
<li>
<label>
2/3 Width
{' '}
<input name="width" type="radio" value="2/3 Width" />
</label>
</li>
<li>
<label>
Full Width
{' '}
<input name="width" type="radio" value="Full Width" />
</label>
</li>
</ul>
</div>
<div className="create-widget-header">
<h3>Widget Header (Optional)</h3>
<label>
Widget Title (30 characters max)
{' '}
<input type="text" name="title" required />
</label>
<label>
Widget Description (50 characters max)
{' '}
<textarea name="description"></textarea>
</label>
</div>
<button type="submit">Add Widget</button>
<button type="reset">Cancel</button>
</div>
</form>
</div>
</div>
}
})
ReactDOM.render(<Dashboard />, document.getElementById('app'))
{
"dependencies": {
"classnames": "2.2.5",
"react": "15.2.0",
"react-dom": "15.2.0",
"uuid": "2.0.2"
},
"devDependencies": {
"nwb": "0.11.0"
},
"scripts": {
"build": "react build app.js",
"start": "react run app.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment