feat(Responsive): add component

docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const BreakpointExampleBreakpoint = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile'>Mobile</Breakpoint>
+    <Breakpoint as={Segment} only='tablet'>Tablet</Breakpoint>
+    <Breakpoint as={Segment} only='computer'>Computer</Breakpoint>
+    <Breakpoint as={Segment} only='large screen'>Large Screen</Breakpoint>
+    <Breakpoint as={Segment} only='widescreen'>Widescreen</Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExampleBreakpoint

docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Breakpoint, Button, Menu } from 'semantic-ui-react'
+
+export default class BreakpointExampleContent extends Component {
+  state = { active: 'home' }
+
+  handleItemClick = (e, { name }) => this.setState({ active: name })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <Menu>
+        <Menu.Item active={active === 'home'} content='Home' name='home' onClick={this.handleItemClick} />
+        <Menu.Item active={active === 'messages'} content='Messages' name='messages' onClick={this.handleItemClick} />
+
+        <Menu.Menu position='right'>
+          <Menu.Item>
+            <Breakpoint
+              as={Button}
+              content='Switch to desktop version'
+              icon='desktop'
+              labelPosition='left'
+              only='mobile'
+            />
+            <Breakpoint
+              as={Button}
+              content='Switch to mobile version'
+              icon='mobile'
+              labelPosition='left'
+              only='computer tablet'
+            />
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+    )
+  }
+}

docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const BreakpointExampleMultiple = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile tablet'>Mobile & Tablet</Breakpoint>
+    <Breakpoint as={Segment} only='computer tablet'>Tablet & Computer</Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExampleMultiple

docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const BreakpointExampleNested = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile tablet'>
+      <Breakpoint only='mobile'>
+        <p>Mobile</p>
+      </Breakpoint>
+      <Breakpoint only='tablet'>
+        <p>Mobile</p>
+      </Breakpoint>
+    </Breakpoint>
+
+    <Breakpoint as={Segment} only='computer'>
+      <p>Computer</p>
+      <Breakpoint only='large screen'>
+        <p>Large Screen</p>
+      </Breakpoint>
+      <Breakpoint only='widescreen'>
+        <p>Widescreen</p>
+      </Breakpoint>
+    </Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExampleNested

docs/app/Examples/addons/Breakpoint/Types/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Message } from 'semantic-ui-react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreakpointTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Breakpoint'
+      description='A Breakpoint can appear only for a specific device or screen sizes.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleBreakpoint'
+    >
+      <Message info>
+        Instead of <code>Grid</code> visibility breakpoints, <code>Breakpoint</code> doesn't render invisible content.
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Multiple'
+      description='A Breakpoint can accept multiple sizes.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleMultiple'
+    />
+    <ComponentExample
+      title='Content'
+      description='A Breakpoint can contain a different content.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleContent'
+    />
+    <ComponentExample
+      title='Nested'
+      description='A Breakpoint can be nested.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleNested'
+    />
+  </ExampleSection>
+)
+
+export default BreakpointTypesExamples

docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const points = {
+  computer: 990,
+  largeScreen: 1300,
+  mobile: 300,
+  tablet: 800,
+  widescreen: 1900,
+}
+
+const BreakpointExamplePoints = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile' points={points}>Mobile</Breakpoint>
+    <Breakpoint as={Segment} only='tablet' points={points}>Tablet</Breakpoint>
+    <Breakpoint as={Segment} only='computer' points={points}>Computer</Breakpoint>
+    <Breakpoint as={Segment} only='large screen' points={points}>Large Screen</Breakpoint>
+    <Breakpoint as={Segment} only='widescreen' points={points}>Widescreen</Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExamplePoints

docs/app/Examples/addons/Breakpoint/Usage/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreakpointUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Points'
+      description='You can define your own points.'
+      examplePath='addons/Breakpoint/Usage/BreakpointExamplePoints'
+    />
+  </ExampleSection>
+)
+
+export default BreakpointUsageExamples

docs/app/Examples/addons/Breakpoint/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Types from './Types'
+import Usage from './Usage'
+
+const BreakpointExamples = () => (
+  <div>
+    <Types />
+    <Usage />
+  </div>
+)
+
+export default BreakpointExamples

index.d.ts

@@ -1,4 +1,10 @@
 // Addons
+export {
+  default as Breakpoint,
+  BreakpointPoints,
+  BreakpointProps,
+  BreakpointOnUpdateData
+} from './dist/commonjs/addons/Breakpoint';
 export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';

package.json

@@ -130,7 +130,7 @@
     "satisfied": "^1.1.0",
     "semantic-ui-css": "^2.2.11",
     "simulant": "^0.2.2",
-    "sinon": "^2.1.0",
+    "sinon": "^2.3.8",
     "sinon-chai": "^2.11.0",
     "ta-scripts": "^2.5.2",
     "through2": "^2.0.2",

src/addons/Breakpoint/Breakpoint.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { GridOnlyProp } from '../../collections/Grid/GridColumn';
+
+export interface BreakpointProps {
+  [key: string]: any;
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** A row can appear only for a specific device, or screen sizes. */
+  only: GridOnlyProp;
+
+  /**
+   * Called on update.
+   *
+   * @param {SyntheticEvent} event - The React SyntheticEvent object
+   * @param {object} data - All props and the event value.
+   */
+  onUpdate?: BreakpointOnUpdateData;
+
+  /** Breakpoints definition. */
+  points?: BreakpointPoints;
+}
+
+export interface BreakpointPoints {
+  computer: number;
+  largeScreen: number;
+  mobile: number;
+  tablet: number;
+  widescreen: number;
+}
+
+export interface BreakpointOnUpdateData extends BreakpointProps {
+  number: string;
+}
+
+declare const Breakpoint: React.ComponentClass<BreakpointProps>;
+
+export default Breakpoint;

src/addons/Breakpoint/Breakpoint.js

@@ -0,0 +1,149 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+  SUI,
+} from '../../lib'
+
+/**
+ * A Breakpoint can control visibility of content.
+ */
+export default class Breakpoint extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** A row can appear only for a specific device, or screen sizes. */
+    only: customPropTypes.onlyProp(SUI.VISIBILITY).isRequired,
+
+    /**
+     * Called on update.
+     *
+     * @param {SyntheticEvent} event - The React SyntheticEvent object
+     * @param {object} data - All props and the event value.
+     */
+    onUpdate: PropTypes.func,
+
+    /** Breakpoints definition. */
+    points: PropTypes.shape({
+      computer: PropTypes.number.isRequired,
+      largeScreen: PropTypes.number.isRequired,
+      mobile: PropTypes.number.isRequired,
+      tablet: PropTypes.number.isRequired,
+      widescreen: PropTypes.number.isRequired,
+    }),
+  }
+
+  static defaultProps = {
+    points: {
+      computer: 992,
+      largeScreen: 1200,
+      mobile: 320,
+      tablet: 768,
+      widescreen: 1920,
+    },
+  }
+
+  static _meta = {
+    name: 'Breakpoint',
+    type: META.TYPES.ADDON,
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.state = { width: window.innerWidth }
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleUpdate)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleUpdate)
+  }
+
+  // ----------------------------------------
+  // Breakpoint matchers
+  // ----------------------------------------
+
+  isComputer = () => {
+    const { points: { computer } } = this.props
+    const { width } = this.state
+
+    return width >= computer
+  }
+
+  isLargeScreen = () => {
+    const { points: { largeScreen, widescreen } } = this.props
+    const { width } = this.state
+
+    return width >= largeScreen && width < widescreen
+  }
+
+  isMobile = () => {
+    const { points: { mobile, tablet } } = this.props
+    const { width } = this.state
+
+    return width >= mobile && width < tablet
+  }
+
+  isTablet = () => {
+    const { points: { computer, tablet } } = this.props
+    const { width } = this.state
+
+    return width >= tablet && width < computer
+  }
+
+  isWidescreen = () => {
+    const { points: { widescreen } } = this.props
+    const { width } = this.state
+
+    return width >= widescreen
+  }
+
+  // ----------------------------------------
+  // Helpers
+  // ----------------------------------------
+
+  isVisible = () => {
+    const { only = '' } = this.props
+    const points = only.replace('large screen', 'largeScreen').split(' ')
+
+    return _.some(points, point => _.invoke(this, `is${_.upperFirst(point)}`))
+  }
+
+  // ----------------------------------------
+  // Event handlers
+  // ----------------------------------------
+
+  handleUpdate = e => {
+    requestAnimationFrame(() => {
+      const width = window.innerWidth
+
+      this.setState({ width })
+      _.invoke(this.props, 'onUpdate', e, { ...this.props, width })
+    })
+  }
+
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
+
+  render() {
+    const { children } = this.props
+
+    const ElementType = getElementType(Breakpoint, this.props)
+    const rest = getUnhandledProps(Breakpoint, this.props)
+
+    if (this.isVisible()) return <ElementType {...rest}>{children}</ElementType>
+    return null
+  }
+}

src/addons/Breakpoint/index.d.ts

@@ -0,0 +1 @@
+export { default, BreakpointPoints, BreakpointProps, BreakpointOnUpdateData } from './Breakpoint';