https://github.com/binocarlos/biro-material-ui

material-ui library for biro
https://github.com/binocarlos/biro-material-ui

Last synced: 11 days ago
JSON representation

material-ui library for biro

• Host: GitHub
• URL: https://github.com/binocarlos/biro-material-ui
• Owner: binocarlos
• License: mit
• Created: 2016-06-29T17:28:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-02T22:17:19.000Z (almost 8 years ago)
• Last Synced: 2024-10-29T21:02:51.887Z (21 days ago)
• Language: JavaScript
• Size: 55.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
biro-material-ui

================

[material-ui](https://github.com/callemall/material-ui) library for [biro](https://github.com/binocarlos/biro)

## install

Install the module to your project:

```

$ npm install biro-material-ui --save

```

## usage

It is assumed that you will be using the `material-ui` module in your project.

```javascript

import React, { Component, PropTypes } from 'react'

import ReactDOM from 'react-dom'

import { Provider, connect } from 'react-redux'

import { applyMiddleware, compose, createStore, combineReducers } from 'redux'

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

import Biro from 'biro'

import muiLibrary from 'biro-material-ui'

import muiLayout from 'biro-material-ui/layout'

const SCHEMA = [

  'firstname',   // this is turned into {type:'text',name:'firstname'}

  'surname',

  'email',

  {

    type:'text',

    name:'phone',

    validate:function(val = ''){

      return val.match(/^\+?[-\d\s]+$/) ? null : 'invalid phone number'

    }

  }

]

const FORM_UPDATE = 'FORM_UPDATE'

function formUpdateAction(data, meta){

  return {

    type:FORM_UPDATE,

    data:data,

    meta:meta

  }

}

const initialState = {

  data:{},

  meta:null

}

const reducer = combineReducers({

  form: function(state = initialState, action = {}) {

    switch (action.type) {

      case FORM_UPDATE:

        return Object.assign({}, state, {

          data:action.data,

          meta:action.meta

        })

      default:

        return state

    }

  }

})

const finalCreateStore = compose(

  applyMiddleware.apply(null, []),

  window.devToolsExtension && window.devToolsExtension()

)(createStore)

const store = finalCreateStore(reducer)

class MyForm extends Component {

  render() {

    return (

      

    )

  }

}

function mapStateToProps(state, ownProps) {

  return {

    data:state.form.data,

    meta:state.form.meta

  }

}

function mapDispatchToProps(dispatch, ownProps) {

  return {

    update:function(data, meta){

      dispatch(formUpdateAction(data, meta))

    }

  }

}

var FormContainer = connect(

  mapStateToProps,

  mapDispatchToProps

)(MyForm)

ReactDOM.render(  

  

    

       

    

  ,

  document.getElementById('mount')

)

```

## license

MIT