Merge pull request #3 from csvenke/feature/switch-component

feature/switch component

Author: csvenke

src/components/Switch/Switch.test.tsx

@@ -0,0 +1,94 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import Switch from './Switch';
+
+const createElement = (value, values, withDefault = true) => (
+  <Switch value={value}>
+    {values.map((item, index) => (
+      <Switch.Case key={item} value={item}>
+        <div>{`case ${index}`}</div>
+      </Switch.Case>
+    ))}
+    {withDefault ? (
+      <Switch.Default>
+        <div>default</div>
+      </Switch.Default>
+    ) : null}
+  </Switch>
+);
+
+const getResult = index => `<div>case ${index}</div>`;
+
+describe('without default case', () => {
+  test('should return content from first case', () => {
+    const wrapper = shallow(createElement(0, [0, 1, 2], false));
+    expect(wrapper.html()).toEqual(getResult(0));
+  });
+
+  test('should return content from second case', () => {
+    const wrapper = shallow(createElement(1, [0, 1, 2], false));
+    expect(wrapper.html()).toEqual(getResult(1));
+  });
+
+  test('should return content from third case', () => {
+    const wrapper = shallow(createElement(2, [0, 1, 2], false));
+    expect(wrapper.html()).toEqual(getResult(2));
+  });
+
+  test('should return null', () => {
+    const wrapper = shallow(createElement(3, [0, 1, 2], false));
+    expect(wrapper.html()).toEqual(null);
+  });
+});
+
+describe('with default case', () => {
+  test('should return content from first case', () => {
+    const wrapper = shallow(createElement(0, [0, 1, 2]));
+    expect(wrapper.html()).toEqual(getResult(0));
+  });
+
+  test('should return content from second case', () => {
+    const wrapper = shallow(createElement(1, [0, 1, 2]));
+    expect(wrapper.html()).toEqual(getResult(1));
+  });
+
+  test('should return content from third case', () => {
+    const wrapper = shallow(createElement(2, [0, 1, 2]));
+    expect(wrapper.html()).toEqual(getResult(2));
+  });
+
+  test('should return null', () => {
+    const wrapper = shallow(createElement(3, [0, 1, 2]));
+    expect(wrapper.html()).toEqual('<div>default</div>');
+  });
+});
+
+describe('input tests', () => {
+  test('should return content when value is number', () => {
+    const wrapper = shallow(createElement(3, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]));
+    expect(wrapper.html()).toEqual(getResult(3));
+  });
+
+  test('should return content when value is string', () => {
+    const wrapper = shallow(createElement('salsa', [0, 1, 2, 3, 'salsa', 5, 6, 7, 8]));
+    expect(wrapper.html()).toEqual(getResult(4));
+  });
+
+  test('should return content when value is boolean (true)', () => {
+    const wrapper = shallow(createElement(true, [0, 1, 2, 3, 4, 5, true, 7, 8, 9]));
+    expect(wrapper.html()).toEqual(getResult(6));
+  });
+
+  test('should return content when value is boolean (false)', () => {
+    const wrapper = shallow(createElement(false, [0, 1, 2, 3, 4, 5, false, 7, 8, 9]));
+    expect(wrapper.html()).toEqual(getResult(6));
+  });
+});
+
+describe('misc tests', () => {
+  test('should return content from first occurence when multiple matches', () => {
+    const wrapper = shallow(createElement(true, [0, 1, 2, true, 4, 5, true, 7, 8, 9]));
+    expect(wrapper.html()).toEqual(getResult(3));
+  });
+});

src/components/Switch/Switch.tsx

@@ -1,13 +1,67 @@
+import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
+import SwitchCase, { ISwitchCaseProps } from './SwitchCase';
+import SwitchDefault from './SwitchDefault';
+
 export interface ISwitchProps {
-  value: string | boolean | number;
+  /** Conditional statement. */
+  value: any;
+
+  /** Primary content. */
   children: React.ReactNode;
 }
 
+/**
+ * Returns primary content of first case that matches, returns default if no match and null if no default.
+ *
+ * @example
+ *
+ * <Switch value={3}>
+ *  <Switch.Case value={1}>
+ *    <div>Render me!</div>
+ *  </Switch.Case>
+ *  <Switch.Case value={2}>
+ *    <div>No, render me!</div>
+ *  </Switch.Case>
+ *  <Switch.Default>
+ *    <div>No, render me!</div>
+ *  </Switch.Default>
+ * </Switch>
+ */
 class Switch extends React.Component<ISwitchProps> {
+  public static propTypes = {
+    children: PropTypes.node.isRequired,
+    value: PropTypes.any.isRequired,
+  };
+
+  public static Case = SwitchCase;
+
+  public static Default = SwitchDefault;
+
   public render() {
-    return null;
+    const switchValue = this.props.value;
+    let match;
+    let child;
+
+    React.Children.forEach(
+      this.props.children,
+      (element: React.ReactElement<ISwitchCaseProps>) => {
+        if (match === undefined && React.isValidElement(element)) {
+          const caseValue = element.props.value;
+          child = element;
+          match = caseValue === switchValue || undefined;
+        }
+      },
+    );
+
+    // No match found, return default if it exists.
+    if (!match && !child.props.value) {
+      return React.cloneElement(child);
+    }
+
+    // Return case if its a match.
+    return match ? React.cloneElement(child) : null;
   }
 }
 

src/components/Switch/SwitchCase.tsx

@@ -0,0 +1,37 @@
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+
+import { isEmptyChildren } from '../../utils';
+
+export interface ISwitchCaseProps {
+  /** Conditional statement. */
+  value: any;
+
+  /** Shorthand for primary content. */
+  render?: () => React.ReactNode;
+
+  /** Primary content. */
+  children?: React.ReactNode;
+}
+
+const SwitchCase: React.SFC<ISwitchCaseProps> = ({ value, render, children }) => {
+  if (value !== undefined) {
+    if (children && !isEmptyChildren(children)) {
+      return React.Children.only(children);
+    }
+
+    if (render) {
+      return <React.Fragment>{render()}</React.Fragment>;
+    }
+  }
+
+  return null;
+};
+
+SwitchCase.propTypes = {
+  children: PropTypes.node,
+  render: PropTypes.func,
+  value: PropTypes.any.isRequired,
+};
+
+export default SwitchCase;

src/components/Switch/SwitchDefault.tsx

@@ -0,0 +1,28 @@
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+
+import SwitchCase from './SwitchCase';
+
+export interface ISwitchDefaultProps {
+  /** Shorthand for primary content. */
+  render?: () => React.ReactNode;
+
+  /** Primary content. */
+  children?: React.ReactNode;
+}
+
+const SwitchDefault: React.SFC<ISwitchDefaultProps> = ({ render, children }) => {
+  const value = '__switch_case_value_override__';
+  return (
+    <SwitchCase value={value} render={render}>
+      {children}
+    </SwitchCase>
+  );
+};
+
+SwitchDefault.propTypes = {
+  children: PropTypes.node,
+  render: PropTypes.func,
+};
+
+export default SwitchDefault;

src/index.ts

@@ -1,2 +1,3 @@
 export { default as Map } from './components/Map';
 export { default as Show } from './components/Show';
+export { default as Switch } from './components/Switch';