"babel-core": "^5.4.7",
"babel-eslint": "^3.1.9",
"babel-loader": "^5.1.2",
+ "css-loader": "^0.15.6",
"eslint-plugin-react": "^2.3.0",
"expect": "^1.8.0",
"gulp": "^3.9.0",
"mocha": "^2.2.5",
"react-hot-loader": "^1.2.7",
"sinon": "^1.15.4",
+ "style-loader": "^0.12.3",
"webpack": "^1.9.6",
"webpack-dev-server": "^1.8.2"
},
--- /dev/null
+body {
+ font-family: 'Courier New';
+}
+
+.hextrapolate-input {
+ flex-grow: 5;
+ font-family: monaco;
+ font-size: 12px;
+}
+
+.hextrapolate-label {
+ display: flex;
+ padding: 8px;
+}
+
+.hextrapolate-label-text {
+ flex-basis: 0;
+ flex-grow: 1;
+ font-size: 12px;
+ padding-right: 12px;
+ text-align: right;
+}
import React from 'react';
import Field from './Field.react';
+import Label from './Label.react';
+
+require('./App.css');
export default class App extends React.Component {
constructor(props) {
render() {
return (
- <div>
+ <div className="hextrapolate">
<h1>Hextrapolate</h1>
- <label>
- Hexadecimal
+ <Label text="Hexadecimal">
<Field
base={16}
onValueChange={this._onValueChange}
value={this.state.value}
/>
- </label>
- <label>
- Decimal
+ </Label>
+ <Label text="Decimal">
<Field
onValueChange={this._onValueChange}
value={this.state.value}
/>
- </label>
- <label>
- Octal
+ </Label>
+ <Label text="Octal">
<Field
base={8}
onValueChange={this._onValueChange}
value={this.state.value}
/>
- </label>
- <label>
- Binary
+ </Label>
+ <Label text="Binary">
<Field
base={2}
onValueChange={this._onValueChange}
value={this.state.value}
/>
- </label>
+ </Label>
</div>
);
}
render() {
return (
<input
+ className="hextrapolate-input"
onChange={this._onChange}
type="text"
value={fromValue(this.props.value, this.props.base)}
--- /dev/null
+/**
+ * Copyright 2015-present Greg Hurrell. All rights reserved.
+ * Licensed under the terms of the MIT license.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+
+export default class Label extends React.Component {
+ static propTypes = {
+ text: React.PropTypes.string.required,
+ };
+
+ render() {
+ return (
+ <label className="hextrapolate-label">
+ <span className="hextrapolate-label-text">
+ {this.props.text}
+ </span>
+ {this.props.children}
+ </label>
+ );
+ }
+}
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
- }]
+ }, {
+ test: /\.css$/, loader: 'style-loader!css-loader',
+ }],
}
};