first version

sbayd · Dec 11, 2017 · 280691f · 280691f
1 parent cdb17a0
commit 280691f
Show file tree

Hide file tree

Showing 11 changed files with 7,144 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["react", "env"]
+}
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,6 @@ typings/
 # dotenv environment variables file
 .env
 
+dist/
+.cache/
+
diff --git a/README.md b/README.md
@@ -1,2 +1,25 @@
 # React-UI-Blocker
 A Body Blocker with Cool Animations for React Apps
+
+It is simple to use
+First
+`import UIBlocker from 'react-ui-blocker';`
+
+And use it with one of these themes,
+
+`
+ <UIBlocker
+ theme="cubeGrid" // default
+ isVisible={true}
+ message="Loading.. or your custom message"
+ />
+`
+
+Props
+=====
+
+| Name | Type | Default | Available Values |
+|----------- |--------- |------------ |-------------------------------------------------------------- |
+| theme | String | cubeGrid | cubeGrid, rect, cube, bounce, dot, foldingCube, fadingCircle |
+| isVisible | Boolean | false | true / false |
+| message | String | Loading... | Any string |
diff --git a/build/index.js b/build/index.js
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>React UI Blocker</title>
+</head>
+<body>
+ <div id="react-root"> </div>
+ <script type="text/javascript" src="./index.js"></script>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import UIBlocker from '../src/index';
+
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isVisible: false,
+ loadingType: 'cubeGrid'
+ };
+ this.handleShowLoading = this.handleShowLoading.bind(this);
+ }
+
+ renderDropDown() {
+ return (<select onChange={(e) => this.setState({ loadingType: e.target.value }) }>
+ <option>cubeGrid</option>
+ <option>rect</option>
+ <option>cube</option>
+ <option>bounce</option>
+ <option>circle</option>
+ <option>dot</option>
+ <option>foldingCube</option>
+ <option>fadingCircle</option>
+ </select>)
+ }
+
+ handleShowLoading(e) {
+ clearTimeout(this.timeout);
+ this.setState({ isVisible: true });
+ this.timeout = setTimeout(() => this.setState({ isVisible: false }), 3000);
+ }
+
+ render() {
+ const { isVisible, loadingType } = this.state;
+ return (<div>
+ <label>Loading Type</label> 
+ {this.renderDropDown()}
+ <button onClick={this.handleShowLoading}>Show Loading</button>
+ <UIBlocker
+ theme={loadingType}
+ isVisible={isVisible}
+ message="Loading.. or your custom message"
+ />
+ </div>);
+ }
+}
+
+const reactRoot = document.getElementById('react-root');
+ReactDOM.render(<App />, reactRoot);
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "react-ui-blocker",
+ "version": "1.0.0",
+ "description": "Simpe UI Blocker for React Apps",
+ "main": "build/index.js",
+ "repository": "https://github.com/sbayd/React-UI-Blocker.git",
+ "author": "Berkay Aydin <[email protected]>",
+ "license": "MIT",
+ "private": false,
+ "scripts": {
+ "start": "parcel example/index.html",
+ "productionForExamples": "parcel build example/index.html -d dist/ --no-minify",
+ "production": "parcel build src/index.js -d build/ --no-minify"
+ },
+ "dependencies": {
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0"
+ },
+ "devDependencies": {
+ "babel-preset-env": "^1.6.1",
+ "babel-preset-react": "^6.24.1",
+ "eslint": "^4.13.0",
+ "eslint-plugin-react": "^7.5.1",
+ "mocha": "^4.0.1",
+ "parcel-bundler": "^1.1.0",
+ "postcss-modules": "^1.1.0"
+ }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LoadingTypes from './loadingTypes';
+import minimizedStyles from './styles';
+
+export default class UIBlocker extends React.Component {
+
+ get stylesClassName() {
+ return 'react_ui_blocker_styles';
+ }
+
+ get styleContainer() {
+ const stylesClassName = this.stylesClassName;
+ const headContainer = this.getHeadContainer();
+ if (headContainer && headContainer.getElementsByClassName) {
+ const [ found ] = headContainer.getElementsByClassName(stylesClassName);
+ if (found) { return found; }
+ const container = document.createElement('style');
+ container.type = 'text/css';
+ container.className = stylesClassName;
+ headContainer.appendChild(container);
+ return container;
+ }
+ }
+
+ getHeadContainer() {
+ if (global && global.document && global.document.head) {
+ return global.document.head;
+ } else if (window && window.document && window.document.head) {
+ return window.document.head;
+ } else if (document && document.querySelector) {
+ return document.querySelector('head');
+ }
+ }
+
+ componentWillMount() {
+ const { styleContainer } = this;
+ if (styleContainer) {
+ styleContainer.innerHTML = minimizedStyles;
+ }
+ }
+
+ shouldComponentUpdate(nextProps) {
+ const { theme, message, isVisible } = nextProps;
+ if (theme !== this.props.theme || message !== this.props.message || isVisible !== this.props.isVisible) {
+ return true;
+ }
+ return false;
+ }
+
+ renderContent(theme) {
+ const structureString = LoadingTypes[theme] || loadingTypes['cubeGrid'];
+ const [ wrapperClass, childClasses ] = structureString.split('|>');
+ const childeren = childClasses.split('|').map((childName, childIndex) => {
+ return (<div className={childName} key={childName} />);
+ });
+ return (<div className={wrapperClass} >{childeren}</div>);
+ }
+
+ render() {
+ const { theme, message, isVisible } = this.props;
+ const content = this.renderContent(theme);
+ return (
+ <div id="holdon-overlay" style = {{ display: isVisible ? 'block' : 'none' }}>
+ <div id="holdon-content-overlay">
+ <div id="holdon-content">{content}</div>
+ <div id="holdon-message">{message}</div>
+ </div>
+ </div>
+ );
+ }
+}
+
+UIBlocker.defaultProps = {
+ isVisible: false,
+ message: 'Loading..',
+ theme: 'cubeGrid'
+};
+
+UIBlocker.propTypes = {
+ theme: PropTypes.string.isRequired,
+ message: PropTypes.string,
+ isVisible: PropTypes.bool.isRequired
+};
diff --git a/src/loadingTypes.js b/src/loadingTypes.js
@@ -0,0 +1,13 @@
+export const loadingTypes = {
+ dot: 'sk-dot|>sk-dot1|sk-dot2',
+ rect: 'sk-rect|>rect1|rect2|rect3|rect4|rect5',
+ cube: 'sk-cube|>sk-cube1|sk-cube2',
+ bounce: 'sk-bounce|>bounce1|bounce2|bounce3',
+ circle: 'sk-circle|>sk-circle1 sk-child|sk-circle2 sk-child|sk-circle3 sk-child|sk-circle4 sk-child|sk-circle5 sk-child|sk-circle6 sk-child|sk-circle7 sk-child|sk-circle8 sk-child|sk-circle9 sk-child|sk-circle10 sk-child|sk-circle11 sk-child|sk-circle12 sk-child',
+ cubeGrid: 'sk-cube-grid|>sk-cube-child sk-cube-grid1|sk-cube-child sk-cube-grid2|sk-cube-child sk-cube-grid3|sk-cube-child sk-cube-grid4|sk-cube-child sk-cube-grid5|sk-cube-child sk-cube-grid6|sk-cube-child sk-cube-grid7|sk-cube-child sk-cube-grid8|sk-cube-child sk-cube-grid9',
+ foldingCube: 'sk-folding-cube|>sk-cubechild1 sk-cube-parent|sk-cubechild2 sk-cube-parent|sk-cubechild3 sk-cube-parent',
+ fadingCircle: 'sk-fading-circle|>sk-fading-circle1 sk-circle-child|sk-fading-circle2 sk-circle-child|sk-fading-circle3 sk-circle-child|sk-fading-circle4 sk-circle-child|sk-fading-circle5 sk-circle-child|sk-fading-circle6 sk-circle-child\sk-fading-circle7 sk-circle-child|sk-fading-circle8 sk-circle-child|sk-fading-circle9 sk-circle-child|sk-fading-circle10 sk-circle-child|sk-fading-circle11 sk-circle-child|sk-fading-circle12 sk-circle-child'
+};
+
+
+export default loadingTypes;