Skip to content

Commit

Permalink
Added Material UI theme (#142).
Browse files Browse the repository at this point in the history
  • Loading branch information
radekmie authored Feb 7, 2017
1 parent 93fb567 commit 456a292
Show file tree
Hide file tree
Showing 42 changed files with 1,509 additions and 31 deletions.
7 changes: 7 additions & 0 deletions API.md
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,11 @@ import DateField from 'uniforms-unstyled/DateField'; // Choose your theme packag
// bootstrap3
// bootstrap4
wrapClassName="a b c"

// Display time picker in ampm (12hr) format or 24hr format.
// Available in:
// material
timeFormat="ampm"
/>
```

Expand Down Expand Up @@ -653,6 +658,7 @@ import NumField from 'uniforms-unstyled/NumField'; // Choose your theme package.
// antd
// bootstrap3
// bootstrap4
// material
// semantic
showInlineError={true}
Expand Down Expand Up @@ -860,6 +866,7 @@ import TextField from 'uniforms-unstyled/TextField'; // Choose your theme packag
// antd
// bootstrap3
// bootstrap4
// material
// semantic
showInlineError={true}
Expand Down
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

# uniforms

In short: uniforms is a set of npm packages, which contains helpers and [React](https://facebook.github.io/react/) components - both unstyled and themed with [AntD](https://ant.design/), [Bootstrap3](http://getbootstrap.com/), [Bootstrap4](http://v4-alpha.getbootstrap.com/) and [Semantic UI](http://semantic-ui.com/) - to easily manage, validate and even generate fully featured forms from your schemas.
In short: uniforms is a set of npm packages, which contains helpers and [React](https://facebook.github.io/react/) components - both unstyled and themed with [AntD](https://ant.design/), [Bootstrap3](http://getbootstrap.com/), [Bootstrap4](http://v4-alpha.getbootstrap.com/), [Material UI](material-ui.com) and [Semantic UI](http://semantic-ui.com/) - to easily manage, validate and even generate fully featured forms from your schemas.

Demo: [uniforms.tools](https://uniforms.tools/).

Expand Down Expand Up @@ -108,6 +108,7 @@ $ meteor npm install graphql
$ meteor npm install --save react react-dom uniforms uniforms-antd
$ meteor npm install --save react react-dom uniforms uniforms-bootstrap3
$ meteor npm install --save react react-dom uniforms uniforms-bootstrap4
$ meteor npm install --save react react-dom uniforms uniforms-material
$ meteor npm install --save react react-dom uniforms uniforms-semantic
$ meteor npm install --save react react-dom uniforms uniforms-unstyled
```
Expand All @@ -119,6 +120,7 @@ $ meteor npm install --save react react-dom uniforms uniforms-unstyled
$ npm install --save react react-dom uniforms uniforms-antd
$ npm install --save react react-dom uniforms uniforms-bootstrap3
$ npm install --save react react-dom uniforms uniforms-bootstrap4
$ npm install --save react react-dom uniforms uniforms-material
$ npm install --save react react-dom uniforms uniforms-semantic
$ npm install --save react react-dom uniforms uniforms-unstyled
```
Expand Down
17 changes: 15 additions & 2 deletions demo/components/Application.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React from 'react';
import {Component} from 'react';
import React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import {Component} from 'react';
import {PropTypes} from 'react';

import {Meteor} from 'meteor/meteor';

import presets from '../lib/presets';
import schema from '../lib/schema';
Expand All @@ -18,6 +23,10 @@ class Application extends Component {
this.onChange = this.onChange.bind(this);
}

getChildContext () {
return {muiTheme: getMuiTheme(lightBaseTheme, {userAgent: Meteor.isServer ? false : undefined})};
}

onChange (key, value) {
if (key === 'preset') {
this.setState({props: {...this.state.props, schema: presets[value]}});
Expand Down Expand Up @@ -62,4 +71,8 @@ class Application extends Component {
}
}

Application.childContextTypes = {
muiTheme: PropTypes.object.isRequired
};

export default Application;
9 changes: 5 additions & 4 deletions demo/components/ApplicationPropsField.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ import ApplicationField from './ApplicationField';
const ApplicationProps = ({onChange, schema, theme, value}) => {
const link = styles[theme];

const isAntd = theme === 'antd';
const isBootstrap = theme === 'bootstrap3' || theme === 'bootstrap4';
const isMaterial = theme === 'material';
const isSemantic = theme === 'semantic';
const isAntd = theme === 'antd';

const AutoForm = themes[theme].AutoForm;
const BoolField = themes[theme].BoolField;
Expand All @@ -25,7 +26,7 @@ const ApplicationProps = ({onChange, schema, theme, value}) => {

<style>{`
textarea {
font-family: monospace;
font-family: monospace !important;
min-height: 20em !important;
}
`}</style>
Expand All @@ -36,8 +37,8 @@ const ApplicationProps = ({onChange, schema, theme, value}) => {
<BoolField name="disabled" />
<BoolField name="label" />
<BoolField name="placeholder" />
<BoolField name="showInlineError" disabled={!(isBootstrap || isSemantic || isAntd)} />
<LongTextField name="schema" />
<BoolField name="showInlineError" disabled={!(isAntd || isBootstrap || isMaterial || isSemantic)} />
<LongTextField name="schema" {...isMaterial && {fullWidth: true, rowsMax: 20}} />

<ErrorsField />
</AutoForm>
Expand Down
2 changes: 2 additions & 0 deletions demo/lib/themes.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import * as antd from 'uniforms-antd';
import * as bootstrap3 from 'uniforms-bootstrap3';
import * as bootstrap4 from 'uniforms-bootstrap4';
import * as material from 'uniforms-material';
import * as semantic from 'uniforms-semantic';
import * as unstyled from 'uniforms-unstyled';

const themes = {
antd,
bootstrap3,
bootstrap4,
material,
semantic,
unstyled
};
Expand Down
6 changes: 4 additions & 2 deletions demo/main.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'babel-polyfill';

import {mount} from 'react-mounter';
import tapEvent from 'react-tap-event-plugin';
import {mount} from 'react-mounter';

import {Meteor} from 'meteor/meteor';
import {DocHead} from 'meteor/kadira:dochead';
Expand All @@ -11,6 +11,8 @@ import Application from '/components/Application';
if (Meteor.isServer) {
FlowRouter.setPageCacheTimeout(100000);
FlowRouter.setDeferScriptLoading(true);
} else {
tapEvent();
}

FlowRouter.route('/', {
Expand Down
7 changes: 5 additions & 2 deletions demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,19 @@
"eslint-plugin-react": "6.9.0",
"eslint-plugin-vazco": "1.0.0",
"graphql": "0.9.1",
"material-ui": "0.16.7",
"meteor-node-stubs": "0.2.5",
"react": "15.4.1",
"react-dom": "15.4.1",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-mounter": "1.2.0",
"react-panelgroup": "1.0.2",
"react-tap-event-plugin": "2.0.1",
"simpl-schema": "0.1.0",
"uniforms": "file:../packages/uniforms",
"uniforms-antd": "file:../packages/uniforms-antd",
"uniforms-bootstrap3": "file:../packages/uniforms-bootstrap3",
"uniforms-bootstrap4": "file:../packages/uniforms-bootstrap4",
"uniforms-material": "file:../packages/uniforms-material",
"uniforms-semantic": "file:../packages/uniforms-semantic",
"uniforms-unstyled": "file:../packages/uniforms-unstyled"
},
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,5 @@
],
"sourceMap": false,
"instrument": false
},
"dependencies": {}
}
}
6 changes: 3 additions & 3 deletions packages/uniforms-antd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@
"jsdom": "9.10.0",
"mocha": "3.2.0",
"nyc": "10.1.2",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-dom": "15.4.1",
"react": "15.4.2",
"react-addons-test-utils": "15.4.2",
"react-dom": "15.4.2",
"rimraf": "2.5.4",
"sinon": "2.0.0-pre.5"
},
Expand Down
6 changes: 3 additions & 3 deletions packages/uniforms-bootstrap3/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@
"jsdom": "9.10.0",
"mocha": "3.2.0",
"nyc": "10.1.2",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-dom": "15.4.1",
"react": "15.4.2",
"react-addons-test-utils": "15.4.2",
"react-dom": "15.4.2",
"rimraf": "2.5.4",
"sinon": "2.0.0-pre.5"
},
Expand Down
6 changes: 3 additions & 3 deletions packages/uniforms-bootstrap4/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@
"jsdom": "9.10.0",
"mocha": "3.2.0",
"nyc": "10.1.2",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-dom": "15.4.1",
"react": "15.4.2",
"react-addons-test-utils": "15.4.2",
"react-dom": "15.4.2",
"rimraf": "2.5.4",
"sinon": "2.0.0-pre.5"
},
Expand Down
11 changes: 11 additions & 0 deletions packages/uniforms-material/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# uniforms-material

> Material UI components for `uniforms`.
## Install

```sh
$ npm install uniforms-material
```

For more in depth documentation see: [https://github.com/vazco/uniforms/](https://github.com/vazco/uniforms/).
109 changes: 109 additions & 0 deletions packages/uniforms-material/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
{
"name": "uniforms-material",
"version": "1.9.0",
"main": "index.js",
"jsnext:main": "src/index.js",
"description": "Material UI components for uniforms.",
"repository": "https://github.com/vazco/uniforms/tree/master/packages/uniforms-material",
"homepage": "https://github.com/vazco/uniforms/",
"license": "MIT",
"bugs": {
"url": "https://github.com/vazco/uniforms/issues"
},
"keyword": [
"form",
"forms",
"meteor",
"react",
"react-component",
"schema",
"validation"
],
"files": [
"*.js",
"src/"
],
"scripts": {
"build": "babel --out-dir . src",
"clean": "rimraf *.js coverage .nyc_output",
"cover": "cross-env NODE_ENV=cover nyc npm test",
"lint": "eslint src test",
"prepublish": "npm run build",
"pretest": "npm run lint",
"reset": "rimraf node_modules",
"test": "babel-node node_modules/.bin/_mocha --require test/index.js test --reporter list"
},
"devDependencies": {
"babel-cli": "6.22.2",
"babel-eslint": "7.1.1",
"babel-plugin-istanbul": "3.1.2",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-react-inline-elements": "6.22.0",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-es2015": "6.22.0",
"babel-preset-react": "6.22.0",
"babel-preset-stage-0": "6.22.0",
"babel-runtime": "6.22.0",
"chai": "4.0.0-canary.1",
"cross-env": "3.1.4",
"enzyme": "2.7.1",
"eslint": "3.15.0",
"eslint-config-vazco": "2.2.1",
"eslint-plugin-babel": "4.0.1",
"eslint-plugin-react": "6.9.0",
"eslint-plugin-vazco": "1.0.0",
"jsdom": "9.10.0",
"material-ui": "0.16.7",
"mocha": "3.2.0",
"nyc": "10.1.2",
"react": "15.4.2",
"react-addons-test-utils": "15.4.2",
"react-dom": "15.4.2",
"react-tap-event-plugin": "2.0.1",
"rimraf": "2.5.4",
"sinon": "2.0.0-pre.5"
},
"peerDependencies": {
"material-ui": "^0.16.7",
"react": "^15.0.0 || ^0.14.0",
"uniforms": "^1.9.0"
},
"babel": {
"plugins": [
"transform-object-assign",
"transform-react-inline-elements",
"transform-runtime"
],
"presets": [
"es2015",
"react",
"stage-0"
],
"env": {
"cover": {
"plugins": [
"istanbul"
]
}
}
},
"eslintConfig": {
"root": true,
"extends": [
"vazco"
]
},
"nyc": {
"reporter": [
"html"
],
"require": [
"babel-register"
],
"sourceMap": false,
"instrument": false
},
"dependencies": {
"babel-runtime": "^6.20.0"
}
}
39 changes: 39 additions & 0 deletions packages/uniforms-material/src/AutoField.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import connectField from 'uniforms/connectField';
import invariant from 'fbjs/lib/invariant';
import {createElement} from 'react';

import NumField from './NumField';
import BoolField from './BoolField';
import DateField from './DateField';
import ListField from './ListField';
import NestField from './NestField';
import TextField from './TextField';
import RadioField from './RadioField';
import SelectField from './SelectField';

const Auto = ({component, ...props}) => {
if (component === undefined) {
if (props.allowedValues) {
if (props.checkboxes && props.fieldType !== Array) {
component = RadioField;
} else {
component = SelectField;
}
} else {
switch (props.fieldType) {
case Date: component = DateField; break;
case Array: component = ListField; break;
case Number: component = NumField; break;
case Object: component = NestField; break;
case String: component = TextField; break;
case Boolean: component = BoolField; break;
}

invariant(component, 'Unsupported field type: %s', props.fieldType.toString());
}
}

return createElement(component, props);
};

export default connectField(Auto, {ensureValue: false, includeInChain: false, initialValue: false});
Loading

0 comments on commit 456a292

Please sign in to comment.