react_rails_modal 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 3e1bd4c454c4eb2bfc2570573bc5b970372830b2
+  data.tar.gz: 8c4b7ee94a683baeca1e42f1130e3ba07ca235e1
+SHA512:
+  metadata.gz: ca10df107a558282c82c0fb4631dd97401505cb1087f9b061df76fda9995e7a3919a983873c9f306f394434279a77384ef3908b93aa9680e68695d489853b548
+  data.tar.gz: 3527b9daa5460435fbb0591e761cc14791a2d4dac0349e66b682f2b8d8bad60243df55971e7d8cbbd012584f7f434dc8b0bfaee08fc2ef703949e5e4c6d355fd

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 kiyodori
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,197 @@
+# ReactRailsModal
+
+Accessible modal dialog component on react-rails.
+
+## Pre Installation
+
+Before using react_rails_modal, install `react-rails`.
+
+Add `react-rails` to your gemfile:
+
+```ruby
+gem 'react-rails'
+```
+
+And install:
+
+    $ bundle install
+
+Next, run the installation script:
+
+    $ rails g react:install
+
+## Installation
+
+Add `react_rails_modal` to your gemfile:
+
+```ruby
+gem 'react_rails_modal'
+```
+
+And install:
+
+    $ bundle install
+
+Next, run the installation script:
+
+    $ rails g react_rails_modal:install
+
+This will place the following in your `application.js`:
+
+```js
+//= require react_rails_modal
+```
+
+## Usage
+
+```xml
+<ModalConponent
+  isOpen={bool}
+  onCloseRequest={requestCloseFunction}
+  style={customStyle}
+>
+  <h1>Modal Component Content</h1>
+  <p>Text</p>
+</Modal>
+```
+
+## Examples
+### Use styles to style
+
+In app/controller/views/:
+
+```html
+<%= react_component('Hello') %>
+```
+
+Styles are passed as an object with 2 keys, 'overlay' and 'modal'.
+
+In app/assets/javascripts/components/:
+
+```jsx
+class Hello extends React.Component {
+  constructor(props) {
+    super(props);
+    this.closeModal = this.closeModal.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.state = { isModalOpen: false };
+  }
+
+  closeModal() {
+    this.setState({ isModalOpen: false });
+  }
+
+  openModal() {
+    this.setState({ isModalOpen: true });
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.openModal}>Open Modal</button>
+        <ModalComponent
+          isOpen={this.state.isModalOpen}
+          onCloseRequest={this.closeModal}
+          style={Hello.styles}
+        >
+          <h1>Hello world!</h1>
+          <button onClick={this.closeModal}>Close</button>
+        </ModalComponent>
+      </div>
+    );
+  }
+}
+
+Hello.styles = {
+  overlay: {
+    backgroundColor: 'rgba(0,0,0,0.75)',
+    bottom: '0',
+    height: '100%',
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    right: '0',
+    width: '100%',
+    zIndex: '1',
+  },
+  modal: {
+    background: '#fff',
+    left: '5%',
+    padding: '15px 30px',
+    position: 'relative',
+    top: '10%',
+    width: '80%',
+    zIndex: '2',
+  }
+}
+```
+
+### Use css classes to style
+
+If you want to use css classes, you can pass overlayClass and modalClass props to the Modal.
+
+```jsx
+class HelloTwo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.closeModal = this.closeModal.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.state = { isModalOpen: false };
+  }
+
+  closeModal() {
+    this.setState({ isModalOpen: false });
+  }
+
+  openModal() {
+    this.setState({ isModalOpen: true });
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.openModal}>Open Modal</button>
+        <ModalComponent
+          isOpen={this.state.isModalOpen}
+          onCloseRequest={this.closeModal}
+          overlayClass='overlayClass'
+          modalClass='modalClass'
+        >
+          <h1>Hello world!!</h1>
+          <button onClick={this.closeModal}>Close</button>
+        </ModalComponent>
+      </div>
+    );
+  }
+}
+```
+
+In app/assets/stylesheets/:
+
+```css
+.overlayClass {
+  background-color: rgba(0,0,0,0.7);
+  bottom: 0;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.modalClass {
+  background: #fff;
+  left: 5%;
+  padding: 15px;
+  position: fixed;
+  top: 10%;
+  width: 90%;
+  z-index: 2;
+}
+```
+
+## Development
+* Update React assets with `rake react_rails_modal:build`
+* Run tests with `rake spec`

data/lib/assets/javascripts/react_rails_modal.js

@@ -0,0 +1,147 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+	var ModalComponent = function (_React$Component) {
+	  _inherits(ModalComponent, _React$Component);
+
+	  function ModalComponent(props) {
+	    _classCallCheck(this, ModalComponent);
+
+	    var _this = _possibleConstructorReturn(this, (ModalComponent.__proto__ || Object.getPrototypeOf(ModalComponent)).call(this, props));
+
+	    _this.state = { isOpen: _this.props.isOpen };
+	    return _this;
+	  }
+
+	  _createClass(ModalComponent, [{
+	    key: 'componentWillReceiveProps',
+	    value: function componentWillReceiveProps(nextProps) {
+	      this.setState({ isOpen: nextProps.isOpen });
+	    }
+	  }, {
+	    key: 'render',
+	    value: function render() {
+	      if (!this.state.isOpen) {
+	        return null;
+	      }
+
+	      var overlay = this.props.style && this.props.style.overlay ? this.props.style.overlay : ModalComponent.defaultStyles.overlay;
+	      var overlayClass = this.props.overlayClass ? {} : overlay;
+	      var modal = this.props.style && this.props.style.modal ? this.props.style.modal : ModalComponent.defaultStyles.modal;
+	      var modalClass = this.props.modalClass ? {} : modal;
+
+	      return React.createElement(
+	        'div',
+	        null,
+	        React.createElement(
+	          'div',
+	          { style: overlayClass, onClick: this.props.onCloseRequest, className: this.props.overlayClass },
+	          React.createElement(
+	            'div',
+	            { style: modalClass, className: this.props.modalClass },
+	            this.props.children
+	          )
+	        )
+	      );
+	    }
+	  }]);
+
+	  return ModalComponent;
+	}(React.Component);
+
+	ModalComponent.propTypes = {
+	  isOpen: React.PropTypes.bool.isRequired,
+	  onCloseRequest: React.PropTypes.func,
+	  style: React.PropTypes.objectOf(React.PropTypes.object),
+	  overlayClassName: React.PropTypes.string,
+	  modalClassName: React.PropTypes.string
+	};
+
+	ModalComponent.defaultStyles = {
+	  overlay: {
+	    backgroundColor: 'rgba(0,0,0,0.75)',
+	    height: '100%',
+	    left: 0,
+	    position: 'fixed',
+	    top: 0,
+	    width: '100%',
+	    zIndex: 1
+	  },
+	  modal: {
+	    background: '#fff',
+	    borderRadius: '5px',
+	    boxShadow: '0 0 10 #000',
+	    display: 'table',
+	    left: '5%',
+	    maxHeight: '80%',
+	    maxWidth: '80%',
+	    overflowY: 'scroll',
+	    padding: '20px 50px',
+	    position: 'fixed',
+	    top: '10%',
+	    width: '80%',
+	    zIndex: 2
+	  }
+	};
+
+	exports.default = window.ModalComponent = ModalComponent;
+
+/***/ }
+/******/ ]);

data/lib/generators/react_rails_modal/install_generator.rb

@@ -0,0 +1,39 @@
+module ReactRailsModal
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      desc 'Install react_rails_modal'
+
+      def inject_react_rails_modal
+        require_react_rails_modal = "//= require react_rails_modal\n"
+
+        if manifest.exist?
+          manifest_contents = File.read(manifest)
+          puts manifest_contents.match(/\/\/=\s+require\s+turbolinks\s+\n/)
+          puts manifest_contents.match(/\/\/=\s+require_tree[^\n]*/)
+
+          if match = manifest_contents.match(/\/\/=\s+require_tree[^\n]*/)
+            inject_into_file manifest, require_react_rails_modal, { before: match[0] }
+          else
+            append_file manifest, require_react_rails_modal
+            inject_react_rails
+          end
+        else
+          create_file manifest, require_react_rails_modal
+          inject_react_rails
+        end
+      end
+
+      private
+
+      def manifest
+        Pathname.new(destination_root).join('app/assets/javascripts', 'application.js')
+      end
+
+      def inject_react_rails
+        inject_into_file manifest, "//= require react\n", {before: "//= require react_rails_modal\n"}
+        inject_into_file manifest, "//= require components\n", {after: "//= require react\n"}
+        inject_into_file manifest, "//= require react_ujs\n", {after: "//= require react\n"}
+      end
+    end
+  end
+end

data/lib/react_rails_modal/asset_variant.rb

@@ -0,0 +1,12 @@
+module ReactRailsModal
+  # This class add react_rails_modal path to the sprockets environment.
+  class AssetVariant
+    GEM_ROOT = Pathname.new('../../../').expand_path(__FILE__)
+
+    attr_reader :react_rails_modal_directory
+
+    def initialize
+      @react_rails_modal_directory = GEM_ROOT.join('lib/assets/javascripts/').to_s
+    end
+  end
+end

data/lib/react_rails_modal/railtie.rb

@@ -0,0 +1,12 @@
+require 'rails'
+
+module ReactRailsModal
+  class Railtie < ::Rails::Railtie
+    config.react_rails_modal = ActiveSupport::OrderedOptions.new
+
+    initializer 'react_rails_modal.set_variant' do |app|
+      asset_variant = ReactRailsModal::AssetVariant.new
+      app.config.assets.paths << asset_variant.react_rails_modal_directory if app.config.respond_to?(:assets)
+    end
+  end
+end

data/lib/react_rails_modal/version.rb

@@ -0,0 +1,3 @@
+module ReactRailsModal
+  VERSION = '0.1.0'
+end

data/lib/react_rails_modal.rb

@@ -0,0 +1,3 @@
+require 'react_rails_modal/version'
+require 'react_rails_modal/asset_variant'
+require 'react_rails_modal/railtie'

metadata

@@ -0,0 +1,108 @@
+--- !ruby/object:Gem::Specification
+name: react_rails_modal
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- kiyodori
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-12-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.13'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.13'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: react-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.7.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.7.0
+description: React_rails_modal creates modal dialog easily on react-rails
+email:
+- kiyodori@yahoo.co.jp
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- lib/assets/javascripts/react_rails_modal.js
+- lib/generators/react_rails_modal/install_generator.rb
+- lib/react_rails_modal.rb
+- lib/react_rails_modal/asset_variant.rb
+- lib/react_rails_modal/railtie.rb
+- lib/react_rails_modal/version.rb
+homepage: https://github.com/kiyodori/react_rails_modal
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.2
+signing_key: 
+specification_version: 4
+summary: Accessible modal dialog component on react-rails
+test_files: []