RubyGems - flux_on_rails - Versions diffs - 1.0.0 - Mend

flux_on_rails 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/password-input.react.js ADDED Viewed

@@ -0,0 +1,11 @@
+var PasswordInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="password" defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className}/>
+    );
+  }
+});
+module.exports = PasswordInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/radio-input.react.js ADDED Viewed

@@ -0,0 +1,10 @@
+var RadioInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="radio" className={data.className} />
+    );
+  }
+})
+module.exports = RadioInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/select-input.react.js ADDED Viewed

@@ -0,0 +1,17 @@
+var OptionForSelect = require('./options-for-select.react')
+var SelectInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    var options = [];
+    data.values.forEach(function(value) {
+      options.push(<OptionForSelect key={value.value} value={value.value} show={value.show}/>)
+    }.bind(this))
+    return (
+      <select ref={data.name} defaultValue={data.value} className={data.className} id={data.id}>
+        {options}
+      </select>
+    );
+  }
+});
+module.exports = SelectInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/submit-input.react.js ADDED Viewed

@@ -0,0 +1,11 @@
+var SubmitInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.value} type="submit" value={data.value} className={data.className} />
+    );
+  }
+});
+module.exports = SubmitInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/text-input.react.js ADDED Viewed

@@ -0,0 +1,11 @@
+var TextInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="text" defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className} />
+    );
+  }
+});
+module.exports = TextInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/textarea-input.react.js ADDED Viewed

@@ -0,0 +1,10 @@
+var TextareaInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <textarea ref={data.name} defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className} />
+    );
+  }
+});
+module.exports = TextareaInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/components/time-input.react.js ADDED Viewed

@@ -0,0 +1,11 @@
+var TimeInput = React.createClass({
+  render: function() {
+    var data = this.props.data;
+    return (
+      <input ref={data.name} type="time" defaultValue={data.defaultValue} placeholder={data.placeholder} className={data.className} />
+    );
+  }
+});
+module.exports = TimeInput;

data/lib/generators/flux_on_rails/templates/react-form-for-object/example/bower.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "name": "react-form-for example",
+  "authors": [
+    "Ed Shadi <edshadi@gmail.com>"
+  ],
+  "description": "React FormFor example useage",
+  "devDependencies": {
+    "react": "~0.12.2",
+    "react-form-for": "../src"
+  }
+}

data/lib/generators/flux_on_rails/templates/react-form-for-object/example/index.html ADDED Viewed

@@ -0,0 +1,6 @@
+<html>
+  <body></body>
+  <script type="text/javascript" src="./bower_components/react/react.js"></script>
+  <script type="text/javascript" src="../src/form-for.js"></script>
+  <script type="text/javascript" src="./js/app.js"></script>
+</html>

data/lib/generators/flux_on_rails/templates/react-form-for-object/example/js/app.js ADDED Viewed

@@ -0,0 +1,76 @@
+var TodoStore = {
+  all: function() {
+    return [{
+      id: 1, // this will be hidden field by default.
+      name: "Clean my room",
+      description: "My room needs some serious cleaning",
+      priority: 3,
+      createAt: "2014-10-09",
+      completed: false,
+      password: "sweet todo",
+      list: "Home",
+      email: "myemail@gmail.com",
+      color: "#fc5803",
+      due: new Date()
+    }]
+  },
+  new: function() {
+    return {
+      name: null,
+      description: null,
+      priority: null,
+      createAt: null,
+      completed: null,
+      password: null,
+      list: null,
+      email: null,
+      color: null,
+      due: new Date()
+    }
+  },
+  find: function(index) {
+    return this.all()[index];
+  }
+}
+var App = React.createClass({displayName: "App",
+  getInitialState: function() {
+    return {
+      errors: [],
+      alert: undefined
+    };
+  },
+  render: function() {
+    var formOptions = {
+      onSubmit: this.handleSubmit,
+      onCancel: this.handleCancel,
+      description: { type: 'textarea' },
+      createAt: { type: 'date' },
+      list: { type: 'select', values: [{value:"Home", show: "Home"}, {value:"Work", show: "Work"}] },
+      color: { type: 'color' },
+      due: { type: 'datetime' }
+    }
+    return(
+      React.createElement("div", null,
+        React.createElement("span", null, this.state.alert),
+        React.createElement(FormFor, {object: TodoStore.find(0), options: formOptions, errors: this.state.errors}),
+        React.createElement(FormFor, {object: TodoStore.new(), options: formOptions, errors: this.state.errors})
+      )
+    )
+  },
+  handleSubmit: function(data) {
+    // this is where you call an action, e.g. TodoActions.createTodo. For this example
+    // I will just simulate errors and success here.
+    if(data.name === "") return this.setState({errors: ["name can't be blank"]});
+    return this.setState({alert: "Success!", errors: []});
+  },
+  handleCancel: function() {
+    console.log('cancelling');
+  }
+});
+React.render(
+  React.createElement(App, null),
+  document.body
+);

data/lib/generators/flux_on_rails/templates/react-form-for-object/example/react/app.jsx ADDED Viewed

@@ -0,0 +1,76 @@
+var TodoStore = {
+  all: function() {
+    return [{
+      id: 1, // this will be hidden field by default.
+      name: "Clean my room",
+      description: "My room needs some serious cleaning",
+      priority: 3,
+      createAt: "2014-10-09",
+      completed: false,
+      password: "sweet todo",
+      list: "Home",
+      email: "myemail@gmail.com",
+      color: "#fc5803",
+      due: new Date()
+    }]
+  },
+  new: function() {
+    return {
+      name: null,
+      description: null,
+      priority: null,
+      createAt: null,
+      completed: null,
+      password: null,
+      list: null,
+      email: null,
+      color: null,
+      due: new Date()
+    }
+  },
+  find: function(index) {
+    return this.all()[index];
+  }
+}
+var App = React.createClass({
+  getInitialState: function() {
+    return {
+      errors: [],
+      alert: undefined
+    };
+  },
+  render: function() {
+    var formOptions = {
+      onSubmit: this.handleSubmit,
+      onCancel: this.handleCancel,
+      description: { type: 'textarea' },
+      createAt: { type: 'date' },
+      list: { type: 'select', values: [{value:"Home", show: "Home"}, {value:"Work", show: "Work"}] },
+      color: { type: 'color' },
+      due: { type: 'datetime' }
+    }
+    return(
+      <div>
+        <span>{this.state.alert}</span>
+        <FormFor object={TodoStore.find(0)} options={formOptions} errors={this.state.errors} />
+        <FormFor object={TodoStore.new()} options={formOptions} errors={this.state.errors} />
+      </div>
+    )
+  },
+  handleSubmit: function(data) {
+    // this is where you call an action, e.g. TodoActions.createTodo. For this example
+    // I will just simulate errors and success here.
+    if(data.name === "") return this.setState({errors: ["name can't be blank"]});
+    return this.setState({alert: "Success!", errors: []});
+  },
+  handleCancel: function() {
+    console.log('cancelling');
+  }
+});
+React.render(
+  <App />,
+  document.body
+);

data/lib/generators/flux_on_rails/templates/react-form-for-object/gulpfile.js ADDED Viewed

@@ -0,0 +1,39 @@
+/* gulpfile.js */
+// Load some modules which are installed through NPM.
+var gulp = require('gulp');
+var browserify = require('browserify');  // Bundles JS.
+var del = require('del');  // Deletes files.
+var reactify = require('reactify');  // Transforms React JSX to JS.
+var source = require('vinyl-source-stream');
+// Define some paths.
+var paths = {
+  app_js: ['./components/form-for.react.js'],
+  js: ['./components/*.js'],
+};
+// An example of a dependency task, it will be run before the css/js tasks.
+// Dependency tasks should call the callback to tell the parent task that
+// they're done.
+gulp.task('clean', function(done) {
+  del(['build'], done);
+});
+// Our JS task. It will Browserify our code and compile React JSX files.
+gulp.task('js', ['clean'], function() {
+  // Browserify/bundle the JS.
+  browserify(paths.app_js)
+    .transform(reactify)
+    .bundle()
+    .pipe(source('form-for.js'))
+    .pipe(gulp.dest('./src/'));
+});
+// Rerun tasks whenever a file changes.
+gulp.task('watch', function() {
+  gulp.watch(paths.js, ['js']);
+});
+// The default task (called when we run `gulp` from cli)
+gulp.task('default', ['watch', 'js']);

data/lib/generators/flux_on_rails/templates/react-form-for-object/package.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "name": "react-form-for",
+  "description": "A starter project for AngularJS working with ExpressJS",
+  "repository": "https://github.com/edshadi/react-form-for",
+  "devDependencies": {
+    "browserify": "~6.3.2",
+    "reactify": "~0.15.2",
+    "vinyl-source-stream": "~1.0.0",
+    "del": "~0.1.3",
+    "gulp": "~3.8.10"
+  }
+}

data/lib/generators/flux_on_rails/templates/react-form-for-object/src/bower.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "react-form-for-object",
+  "version": "1.0.0",
+  "authors": [
+    "Ed Shadi <edshadi@gmail.com>"
+  ],
+  "description": "Rails inspired form builder that makes building forms in React a breeze.",
+  "main": "src/form-for.js",
+  "keywords": [
+    "react",
+    "addon",
+    "form",
+    "rails",
+    "flux"
+  ],
+  "license": "MIT",
+  "private": false,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "app/bower_components",
+    "test",
+    "tests",
+    "node_modules"
+  ]
+}

data/lib/generators/flux_on_rails/templates/react-form-for-object/src/form-for.js ADDED Viewed

@@ -0,0 +1,362 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var Input = require('./input.react');
+var FormErrors = require('./form-errors.react');
+module.exports = FormFor = React.createClass({displayName: 'FormFor',
+  render: function() {
+    if(Object.keys(this.props.object).length === 0) return(React.createElement("div", null));
+    return (
+      React.createElement("form", {onSubmit: this.handleSubmit, className: "form-for"},
+        React.createElement(FormErrors, {errors: this.props.errors}),
+        this.inputs(),
+        React.createElement("input", {type: "submit", value: this.submitText(), className: "btn btn-default"}),
+      this.renderCancelButton()
+      )
+    );
+  },
+  inputs: function() {
+    var object = this.props.object;
+    var inputs = [];
+    Object.keys(object).forEach(function(key, i) {
+      var value = object[key];
+      var dataForInput = {value: value, name: key}
+      var options = this.options()[key] || {};
+      inputs.push(React.createElement(Input, {key: key, ref: key, data: dataForInput, options: options}));
+    }.bind(this));
+    return inputs;
+  },
+  options: function() {
+    return this.props.options || {};
+  },
+  submitText: function() {
+    var submit = this.options().submit;
+    if(submit && submit.value) return submit.value
+    submit = this.props.object.id ? 'Update' : 'Create';
+    if(this.options().objectName) submit = submit + ' ' + this.options().objectName;
+    return submit;
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    var submitHandler = this.options().onSubmit
+    if(submitHandler) {
+      var data = {};
+      Object.keys(this.refs).forEach(function(ref) {
+        var value = this.getInputValue(ref);
+        data[ref] = value;
+      }.bind(this));
+      submitHandler(data, {clearInputs: this.clearInputs});
+    } else {
+      console.log("You must pass an onSubmit function in your options.");
+    }
+  },
+  renderCancelButton: function() {
+    if(!this.options().onCancel) return;
+    return(React.createElement("input", {type: "button", value: "Cancel", onClick: this.handleCancel}));
+  },
+  handleCancel: function() {
+    this.clearInputs();
+    this.options().onCancel();
+  },
+  getInputValue: function(ref) {
+    // find the ref component
+    // find the refs of the found component
+    // find the input ref from the found component
+    // get the getDOMNode and the value
+    if(this.refs[ref] && this.refs[ref].refs && this.refs[ref].refs.input && this.refs[ref].refs.input.getDOMNode) {
+      var input = this.refs[ref].refs.input.getDOMNode();
+      if(input.type === "checkbox") return input.checked;
+      return input.value;
+    }
+  },
+  // Utility function to clear inputs.
+  clearInputs: function() {
+    Object.keys(this.refs).forEach(function(ref) {
+      if(this.refs[ref] && this.refs[ref].refs && this.refs[ref].refs.input && this.refs[ref].refs.input.getDOMNode) {
+        this.refs[ref].refs.input.getDOMNode().value = "";
+      }
+    }.bind(this));
+  }
+});
+},{"./form-errors.react":7,"./input.react":9}],2:[function(require,module,exports){
+var CheckboxInput = React.createClass({displayName: 'CheckboxInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "checkbox", defaultChecked: data.defaultChecked, className: data.className, value: data.value})
+    );
+  }
+});
+module.exports = CheckboxInput;
+},{}],3:[function(require,module,exports){
+var ColorInput = React.createClass({displayName: 'ColorInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, name: data.name, type: "color", defaultValue: data.defaultValue, className: data.className})
+    );
+  }
+});
+module.exports = ColorInput;
+},{}],4:[function(require,module,exports){
+var DateInput = React.createClass({displayName: 'DateInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "date", defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = DateInput;
+},{}],5:[function(require,module,exports){
+var DatetimeInput = React.createClass({displayName: 'DatetimeInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "datetime-local", defaultValue: data.defaultValue, className: data.className})
+    );
+  }
+});
+module.exports = DatetimeInput;
+},{}],6:[function(require,module,exports){
+var EmailInput = React.createClass({displayName: 'EmailInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "email", defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = EmailInput;
+},{}],7:[function(require,module,exports){
+var FormErrors = React.createClass({displayName: 'FormErrors',
+  render: function() {
+    var errors = [];
+    this.props.errors.forEach(function(err) {
+      errors.push(React.createElement("li", null, err))
+    })
+    return (
+      React.createElement("ul", {className: "form-errors"}, errors)
+    );
+  }
+});
+module.exports = FormErrors;
+},{}],8:[function(require,module,exports){
+var HiddenInput = React.createClass({displayName: 'HiddenInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "hidden", value: data.value, className: data.className})
+    );
+  }
+});
+module.exports = HiddenInput;
+},{}],9:[function(require,module,exports){
+var TextInput = require('./text-input.react');
+var CheckboxInput = require('./checkbox-input.react');
+var NumberInput = require('./number-input.react');
+var HiddenInput = require('./hidden-input.react');
+var SelectInput = require('./select-input.react');
+var PasswordInput = require('./password-input.react');
+var TextareaInput = require('./textarea-input.react');
+var DateInput = require('./date-input.react');
+var ColorInput = require('./color-input.react');
+var DatetimeInput = require('./datetime-input.react');
+var EmailInput = require('./email-input.react');
+var TimeInput = require('./time-input.react');
+var Input = React.createClass({displayName: 'Input',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("div", null,
+        React.createElement("div", {className: "form-group"},
+          this.input()
+        )
+      )
+    );
+  },
+  input: function() {
+    var data = this.props.data;
+    switch(this.type()) {
+      case 'boolean':
+        return(React.createElement("span", null, React.createElement(CheckboxInput, {ref: "input", data: {name: data.name, defaultChecked: data.value, className: this.props.options.className, value: data.value}}), React.createElement("span", null, this.placeholder())))
+        break;
+      case 'number':
+        return(React.createElement(NumberInput, {ref: "input", data: {name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+        break;
+      case 'color':
+        return(React.createElement(ColorInput, {ref: "input", data: {name: data.name, defaultValue: data.value, className: this.props.options.className}}))
+        break;
+      case 'email':
+        return(React.createElement(EmailInput, {ref: "input", data: {name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+        break;
+      case 'date':
+        return(React.createElement(DateInput, {ref: "input", data: {name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+        break;
+      case 'datetime':
+        return(React.createElement(DatetimeInput, {ref: "input", data: {name: data.name, defaultValue: data.value, className: this.props.options.className}}))
+        break;
+      case 'time':
+        return(React.createElement(TimeInput, {ref: "input", data: {name: data.name, defaultValue: data.value, className: this.props.options.className}}))
+        break;
+      case 'hidden':
+        return(React.createElement(HiddenInput, {ref: "input", data: {name: data.name, value: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+        break;
+      case 'select':
+        return(React.createElement(SelectInput, {ref: "input", data: {name: data.name, value: data.value, values: this.props.options.values , className: this.props.options.className}}))
+        break;
+      case 'password':
+        return(React.createElement(PasswordInput, {ref: "input", data: {name: data.name, defaultChecked: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+        break;
+      case 'textarea':
+        return(React.createElement(TextareaInput, {ref: "input", data: {name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+        break;
+      default:
+        return(React.createElement(TextInput, {ref: "input", data: {name: data.name, defaultValue: data.value, placeholder: this.placeholder(), className: this.props.options.className}}))
+    }
+  },
+  type: function() {
+    var type = typeof(this.props.data.value);
+    if(this.props.options.type) type = this.props.options.type;
+    if(this.isId()) type = 'hidden';
+    if(this.isPassword()) type = 'password';
+    if(this.isEmail()) type = 'email';
+    return type;
+  },
+  isId: function() {
+    if(this.props.data.name === 'id') return true;
+    return false;
+  },
+  isPassword: function() {
+    if(this.props.data.name === 'password' || this.props.data.name === 'password_confirmation') return true;
+    return false;
+  },
+  isEmail: function() {
+    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if(this.props.data.name === 'email' || re.test(this.props.data.value)) return true;
+    return false;
+  },
+  placeholder: function() {
+    var name = this.props.options.placeholder || this.props.data.name;
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+});
+module.exports = Input;
+},{"./checkbox-input.react":2,"./color-input.react":3,"./date-input.react":4,"./datetime-input.react":5,"./email-input.react":6,"./hidden-input.react":8,"./number-input.react":10,"./password-input.react":12,"./select-input.react":13,"./text-input.react":14,"./textarea-input.react":15,"./time-input.react":16}],10:[function(require,module,exports){
+var NumberInput = React.createClass({displayName: 'NumberInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "number", defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = NumberInput;
+},{}],11:[function(require,module,exports){
+var OptionForSelect = React.createClass({displayName: 'OptionForSelect',
+  render: function() {
+    return (
+      React.createElement("option", {value: this.props.value}, this.props.show)
+    );
+  }
+});
+module.exports = OptionForSelect;
+},{}],12:[function(require,module,exports){
+var PasswordInput = React.createClass({displayName: 'PasswordInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "password", defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = PasswordInput;
+},{}],13:[function(require,module,exports){
+var OptionForSelect = require('./options-for-select.react')
+var SelectInput = React.createClass({displayName: 'SelectInput',
+  render: function() {
+    var data = this.props.data;
+    var options = [];
+    data.values.forEach(function(value) {
+      options.push(React.createElement(OptionForSelect, {key: value.value, value: value.value, show: value.show}))
+    }.bind(this))
+    return (
+      React.createElement("select", {ref: data.name, defaultValue: data.value, className: data.className, id: data.id},
+        options
+      )
+    );
+  }
+});
+module.exports = SelectInput;
+},{"./options-for-select.react":11}],14:[function(require,module,exports){
+var TextInput = React.createClass({displayName: 'TextInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "text", defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = TextInput;
+},{}],15:[function(require,module,exports){
+var TextareaInput = React.createClass({displayName: 'TextareaInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("textarea", {ref: data.name, defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = TextareaInput;
+},{}],16:[function(require,module,exports){
+var TimeInput = React.createClass({displayName: 'TimeInput',
+  render: function() {
+    var data = this.props.data;
+    return (
+      React.createElement("input", {ref: data.name, type: "time", defaultValue: data.defaultValue, placeholder: data.placeholder, className: data.className})
+    );
+  }
+});
+module.exports = TimeInput;
+},{}]},{},[1]);