Merge remote-tracking branch 'origin/master' into error-boundary

vforge · vforge · commit 71d5a2451136 · 2019-03-20T13:24:15.000-07:00
diff --git a/config/config.js b/config/config.js
@@ -20,6 +20,7 @@ module.exports = {
         'date-fns',
         // we ony use one function from date-fns
         'date-fns/distance_in_words_strict',
+        'deepmerge',
         'prop-types',
         'react',
         'react-dom',
diff --git a/config/styleguide.config.json b/config/styleguide.config.json
@@ -57,6 +57,7 @@
       "FloatingButton",
       "FloatingButtonGroup",
       "GlobalNavigation",
+      "HideComponent",
       "Icon",
       "IconSprite",
       "Input",
@@ -76,6 +77,7 @@
     "name": "Higher Order Components",
     "directory": "hocs",
     "items": [
+      "withHideComponent",
       "withTimeoutFallback",
       "withErrorBoundary",
       "withDisabledSSR"
diff --git a/docs/build/1.768c9348.js b/docs/build/1.768c9348.js
diff --git a/docs/build/bundle.8d1f97e4.js b/docs/build/bundle.8d1f97e4.js
diff --git a/docs/index.html b/docs/index.html
@@ -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-common</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.b6b93daa.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-common</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.8d1f97e4.js"></script></body></html>
diff --git a/source/components/HideComponent/README.md b/source/components/HideComponent/README.md
@@ -0,0 +1,10 @@
+Hide:
+```js
+<HideComponent hide>Default</HideComponent>
+```
+
+Display
+```js
+<HideComponent>Default</HideComponent>
+```
+
diff --git a/source/components/HideComponent/__snapshots__/index.spec.js.snap b/source/components/HideComponent/__snapshots__/index.spec.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hide component tree 1`] = `
+<HideComponent
+  hide={true}
+/>
+`;
+
+exports[`Show component tree 1`] = `
+<HideComponent
+  hide={false}
+>
+  <div>
+     test 
+  </div>
+</HideComponent>
+`;
diff --git a/source/components/HideComponent/index.js b/source/components/HideComponent/index.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+const HideComponent = ({ hide, children }) => {
+    if (hide === true) {
+        return false;
+    }
+
+    return children;
+};
+
+HideComponent.propTypes = {
+    hide: PropTypes.bool,
+};
+
+HideComponent.defaultProps = {
+    hide: false,
+};
+
+export default HideComponent;
diff --git a/source/components/HideComponent/index.spec.js b/source/components/HideComponent/index.spec.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import HideComponent from './index';
+
+test('Hide component tree', () => {
+    const component = mount(
+        <HideComponent hide>
+            <div> test </div>
+        </HideComponent>,
+    );
+    expect(component).toMatchSnapshot();
+});
+
+test('Show component tree', () => {
+    const component = mount(
+        <HideComponent>
+            <div> test </div>
+        </HideComponent>,
+    );
+    expect(component).toMatchSnapshot();
+});
diff --git a/source/components/index.js b/source/components/index.js
@@ -29,6 +29,7 @@ export { default as List } from './List';
 export { default as Avatar } from './Avatar';
 export { default as AvatarStack } from './AvatarStack';
 export { default as ExpandableText } from './ExpandableText';
+export { default as HideComponent } from './HideComponent';
 export { default as Switch } from './Switch';
 export { default as Timeago } from './Timeago';
 export { default as SimpleLocalNavigation } from './SimpleLocalNavigation';
diff --git a/source/hocs/index.js b/source/hocs/index.js
@@ -6,4 +6,5 @@
 
 export { default as withTimeoutFallback } from './withTimeoutFallback';
 export { default as withErrorBoundary } from './withErrorBoundary';
+export { default as withHideComponent } from './withHideComponent';
 export { default as withDisabledSSR } from './withDisabledSSR';
diff --git a/source/hocs/withHideComponent/README.md b/source/hocs/withHideComponent/README.md
@@ -0,0 +1,14 @@
+Adds a `hide` prop logic to newly created component
+
+## Usage
+
+```js static
+import withHideComponent from '@react-common/hocs/withHideComponent';
+
+const Comp = props => (<div> test </div>)
+const ComponentWithIsHidden = withTimeoutFallback(Spinner);
+
+// Usage
+<ComponentWithIsHidden hide/> // ComponentWithIsHidden will be hidden
+<ComponentWithIsHidden /> // ComponentWithIsHidden will be visible
+```
diff --git a/source/hocs/withHideComponent/__snapshots__/index.spec.js.snap b/source/hocs/withHideComponent/__snapshots__/index.spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Display component 1`] = `
+<HideComponentView
+  hide={false}
+>
+  <WithHideProp>
+    <div>
+       Alt Fallback 
+    </div>
+  </WithHideProp>
+</HideComponentView>
+`;
+
+exports[`Hide component 1`] = `
+<HideComponentView
+  hide={true}
+/>
+`;
diff --git a/source/hocs/withHideComponent/index.js b/source/hocs/withHideComponent/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function withHideComponent(component) {
+    function HideComponentView(props) {
+        const { hide, ...rest } = props;
+        if (hide) {
+            return false;
+        }
+
+        const Component = component;
+        return (
+            <Component
+                {...rest}
+            />
+        );
+    }
+
+    HideComponentView.propTypes = {
+        hide: PropTypes.bool,
+    };
+
+    HideComponentView.defaultProps = {
+        hide: false,
+    };
+
+    return HideComponentView;
+}
+
+export default withHideComponent;
diff --git a/source/hocs/withHideComponent/index.spec.js b/source/hocs/withHideComponent/index.spec.js
@@ -0,0 +1,23 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import withHideComponent from './index';
+
+const WithHideProp = () => (<div> Alt Fallback </div>);
+const ComponentWithHideHoC = withHideComponent(WithHideProp);
+
+test('Hide component', () => {
+    const component = mount(
+        <ComponentWithHideHoC hide />,
+    );
+
+    expect(component).toMatchSnapshot();
+});
+
+test('Display component', () => {
+    const component = mount(
+        <ComponentWithHideHoC />,
+    );
+
+    expect(component).toMatchSnapshot();
+});

Original file line number	Diff line number	Diff line change
`@@ -1 +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-common</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.b6b93daa.js"></script></body></html>`
	`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-common</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.8d1f97e4.js"></script></body></html>`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,10 @@ @@
 +Hide:
 +```js
 +<HideComponent hide>Default</HideComponent>
 +```
++
 +Display
 +```js
 +<HideComponent>Default</HideComponent>
 +```
++