Wikia · vforge · Nov 19, 2018 · Aug 3, 2018 · Aug 3, 2018 · Aug 6, 2018
@@ -60,6 +60,9 @@ typings/
 # IDEA
 .idea/
 
+# Visual Studio
+.vscode/
+
 # Miscellaneous cache files
 .DS_Store
 

@@ -9,6 +9,7 @@ Wikia's reusable React parts.
 The following directories and files are auto-generated from the files in [source](./source) directory:
 
 * [components](./components)
+* [hocs](./hocs)
 * [docs](./docs)
 * [README.md](./README.md)
 * [package.json](./package.json)

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.a7471800.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.2e550e64.js"></script></body></html>
@@ -0,0 +1,2 @@
+
+Files in this directory are automatically re-generated. See the `source` directory in the root.
@@ -0,0 +1,198 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var PropTypes = _interopDefault(require('prop-types'));
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a 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);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+var DefaultFallback = function DefaultFallback() {
+  return React.createElement("span", null, "Error loading");
+};
+
+var DEFAULT_OPTIONS = {
+  FallbackComponent: DefaultFallback,
+  timeout: 10000
+};
+var TIMER_INTERVAL = 100;
+
+function withTimeoutFallback(Component, opts) {
+  var options = _objectSpread({}, DEFAULT_OPTIONS, opts);
+
+  var FallbackComponent = options.FallbackComponent;
+
+  var TimeoutComponent =
+  /*#__PURE__*/
+  function (_React$PureComponent) {
+    _inherits(TimeoutComponent, _React$PureComponent);
+
+    function TimeoutComponent(props) {
+      var _this;
+
+      _classCallCheck(this, TimeoutComponent);
+
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(TimeoutComponent).call(this, props));
+      _this.state = {
+        time: 0
+      };
+      return _this;
+    }
+
+    _createClass(TimeoutComponent, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this2 = this;
+
+        this.timerID = setInterval(function () {
+          return _this2.tick();
+        }, TIMER_INTERVAL);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        clearInterval(this.timerID);
+      }
+    }, {
+      key: "tick",
+      value: function tick() {
+        var time = this.state.time;
+
+        if (time > options.timeout) {
+          clearInterval(this.timerID);
+        } else {
+          this.setState(function (prevState) {
+            return {
+              time: prevState.time + TIMER_INTERVAL
+            };
+          });
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var time = this.state.time;
+        var children = this.props.children;
+
+        if (time > options.timeout) {
+          return React.createElement(FallbackComponent, this.props, children);
+        }
+
+        return React.createElement(Component, this.props);
+      }
+    }]);
+
+    return TimeoutComponent;
+  }(React.PureComponent);
+
+  TimeoutComponent.propTypes = {
+    children: PropTypes.node
+  };
+  TimeoutComponent.defaultProps = {
+    children: null
+  };
+  return TimeoutComponent;
+}
+
+module.exports = withTimeoutFallback;
@@ -10,6 +10,7 @@ export { default as ButtonGroup } from './ButtonGroup';
 export { default as Input } from './Input';
 export { default as Fieldset } from './Fieldset';
 export { default as Spinner } from './Spinner';
+export { default as Dropdown } from './Spinner';
 export { default as FloatingButton } from './FloatingButton';
 export { default as FloatingButtonGroup } from './FloatingButtonGroup';
 // Design System UI

@@ -3,6 +3,7 @@ module.exports = {
     styleguideDir: 'docs',
     sourceDirectories: [
         'components',
+        'hocs',
     ],
     externalDependencies: [
         'date-fns',

@@ -15,7 +15,12 @@ function resolve(...paths) {
 
 function getSections() {
     return schema.map(({
-        name, content, components, description, sections,
+        name,
+        content,
+        components,
+        description,
+        sections,
+        hocs,
     }) => {
         const section = {
             content,
@@ -30,6 +35,15 @@ function getSections() {
             );
         }
 
+        if (hocs) {
+            section.sections = hocs.map(
+                hocName => ({
+                    name: hocName,
+                    content: resolve('../hocs', hocName, 'README.md'),
+                })
+            );
+        }
+
         return section;
     });
 }

@@ -56,6 +56,12 @@
       "FandomContentWell"
     ]
   },
+  {
+    "name": "Higher Order Components (hocs)",
+    "hocs": [
+      "withTimeoutFallback"
+    ]
+  },
   {
     "name": "Other",
     "components": [

@@ -23,6 +23,13 @@
 10. Code will be merged to `master` only if there are no regressions and after a successful CR.
 11. When the code is merged to `master`, release new version of the styleguide with one of the release commands.
 
+
+### HOCS
+
+1. Higher order components (hoc) can be added by following the guide
+
+**Note**: The one difference will be to use `js static` in the readme to prevent rendering as styleguidist doesn't have access to the hoc
+
 ## Development server
 
 ```js static

@@ -0,0 +1,8 @@
+/**
+ * Import test - please put all the components here
+ * so Jest can verify that all the components are
+ * importable.
+ */
+
+// eslint-disable-next-line
+export { default as withTimeoutFallback } from './withTimeoutFallback';
@@ -0,0 +1,9 @@
+// we're checking here if we can import the index
+// eslint-disable-next-line no-unused-vars
+import hocs from './index';
+
+const foo = 'foo';
+
+test('importing index.js works', () => {
+    expect(foo).toEqual('foo');
+});
@@ -0,0 +1,23 @@
+Adds a component to display after a set time (accurate to the nearest 100ms)
+
+Defaults:
+
+```js static
+const Spinner = props => (<div> ...spinner </div>)
+const SpinnerWithTimeout = withTimeoutFallback(Spinner);
+
+// Usage
+<SpinnerWithTimeout />
+```
+
+Custom Fallback and Timeout:
+
+```js static
+const Spinner = props => (<div> ...spinner </div>)
+const Fallback = props => (<div> Error Loading </div>)
+const options = {timeout: 10000, FallbackComponent: Fallback};
+const SpinnerWithTimeout = withTimeoutFallback(Spinner, options);
+
+// Usage
+<SpinnerWithTimeout />
+```
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.a7471800.js"></script></body></html>
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.2e550e64.js"></script></body></html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		Files in this directory are automatically re-generated. See the `source` directory in the root.