style(Sidebar): update typings and propTypes usage (Semantic-Org#1296)

Author: layershifter

src/modules/Sidebar/Sidebar.js

@@ -3,37 +3,25 @@ import React, { PropTypes } from 'react'
 
 import {
   AutoControlledComponent as Component,
-  META,
   customPropTypes,
   getUnhandledProps,
   getElementType,
+  META,
   useKeyOnly,
 } from '../../lib'
 import SidebarPushable from './SidebarPushable'
 import SidebarPusher from './SidebarPusher'
 
-const _meta = {
-  name: 'Sidebar',
-  type: META.TYPES.MODULE,
-  props: {
-    animation: ['overlay', 'push', 'scale down', 'uncover', 'slide out', 'slide along'],
-    direction: ['top', 'right', 'bottom', 'left'],
-    width: ['very thin', 'thin', 'wide', 'very wide'],
-  },
-}
-
 /**
  * A sidebar hides additional content beside a page.
  */
 class Sidebar extends Component {
-  static _meta = _meta
-
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
     /** Animation style. */
-    animation: PropTypes.oneOf(Sidebar._meta.props.animation),
+    animation: PropTypes.oneOf(['overlay', 'push', 'scale down', 'uncover', 'slide out', 'slide along']),
 
     /** Primary content. */
     children: PropTypes.node,
@@ -44,20 +32,16 @@ class Sidebar extends Component {
     /** Initial value of visible. */
     defaultVisible: PropTypes.bool,
 
-    /** Direction the sidebar should appear on */
-    direction: PropTypes.oneOf(Sidebar._meta.props.direction),
+    /** Direction the sidebar should appear on. */
+    direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 
     /** Controls whether or not the sidebar is visible on the page. */
     visible: PropTypes.bool,
 
-    /** Sidebar width */
-    width: PropTypes.oneOf(Sidebar._meta.props.width),
+    /** Sidebar width. */
+    width: PropTypes.oneOf(['very thin', 'thin', 'wide', 'very wide']),
   }
 
-  static Pushable = SidebarPushable
-
-  static Pusher = SidebarPusher
-
   static defaultProps = {
     direction: 'left',
   }
@@ -66,6 +50,15 @@ class Sidebar extends Component {
     'visible',
   ]
 
+  static _meta = {
+    name: 'Sidebar',
+    type: META.TYPES.MODULE,
+  }
+
+  static Pushable = SidebarPushable
+
+  static Pusher = SidebarPusher
+
   state = {}
 
   startAnimating = (duration = 500) => {
@@ -83,17 +76,24 @@ class Sidebar extends Component {
   }
 
   render() {
+    const {
+      animation,
+      className,
+      children,
+      direction,
+      visible,
+      width,
+    } = this.props
     const { animating } = this.state
-    const { animation, className, children, direction, visible, width } = this.props
 
     const classes = cx(
       'ui',
-      'sidebar',
-      useKeyOnly(animating, 'animating'),
+      animation,
       direction,
       width,
-      animation,
+      useKeyOnly(animating, 'animating'),
       useKeyOnly(visible, 'visible'),
+      'sidebar',
       className
     )
 

src/modules/Sidebar/SidebarPushable.js

@@ -12,15 +12,8 @@ import {
  * A pushable sub-component for Sidebar.
  */
 function SidebarPushable(props) {
-  const {
-    className,
-    children,
-  } = props
-
-  const classes = cx(
-    'pushable',
-    className,
-  )
+  const { className, children } = props
+  const classes = cx('pushable', className)
   const rest = getUnhandledProps(SidebarPushable, props)
   const ElementType = getElementType(SidebarPushable, props)
 

src/modules/Sidebar/SidebarPusher.js

@@ -2,22 +2,18 @@ import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
-  useKeyOnly,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
+  useKeyOnly,
 } from '../../lib'
 
 /**
  * A pushable sub-component for Sidebar.
  */
 function SidebarPusher(props) {
-  const {
-    className,
-    dimmed,
-    children,
-  } = props
+  const { className, dimmed, children } = props
 
   const classes = cx(
     'pusher',

src/modules/Sidebar/index.d.ts

@@ -1,20 +1,43 @@
 import * as React from 'react';
 
-interface SidebarPushableProps {
+interface SidebarProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** Animation style. */
+  animation?: 'overlay' | 'push' | 'scale down' | 'uncover' | 'slide out' | 'slide along';
+
   /** Primary content. */
   children?: React.ReactNode;
 
   /** Additional classes. */
   className?: string;
 
+  /** Initial value of visible. */
+  defaultVisible?: boolean;
+
+  /** Direction the sidebar should appear on. */
+  direction?: 'top' | 'right' | 'bottom' | 'left';
+
+  /** Controls whether or not the sidebar is visible on the page. */
+  visible?: boolean;
+
+  /** Sidebar width */
+  width?: 'very thin' | 'thin' | 'wide' | 'very wide';
 }
 
-export const SidebarPushable: React.ComponentClass<SidebarPushableProps>;
+interface SidebarComponent extends React.ComponentClass<SidebarProps> {
+  Pushable: typeof SidebarPushable;
+  Pusher: typeof SidebarPusher;
+}
+
+export const Sidebar: SidebarComponent;
+
+interface SidebarPushableProps {
+  [key: string]: any;
 
-interface SidebarPusherProps {
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -23,16 +46,12 @@ interface SidebarPusherProps {
 
   /** Additional classes. */
   className?: string;
-
-  /** Controls whether or not the dim is displayed. */
-  dimmed?: boolean;
 }
 
-export const SidebarPusher: React.ComponentClass<SidebarPusherProps>;
+export const SidebarPushable: React.StatelessComponent<SidebarPushableProps>;
 
-interface SidebarProps {
-  /** Animation style. */
-  animation?: 'overlay' | 'push' | 'scale down' | 'uncover' | 'slide out' | 'slide along';
+interface SidebarPusherProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -43,22 +62,8 @@ interface SidebarProps {
   /** Additional classes. */
   className?: string;
 
-  /** Initial value of visible. */
-  defaultVisible?: boolean;
-
-  /** Direction the sidebar should appear on */
-  direction?: 'top' | 'right' | 'bottom' | 'left';
-
-  /** Controls whether or not the sidebar is visible on the page. */
-  visible?: boolean;
-
-  /** Sidebar width */
-  width?: 'very thin' | 'thin' | 'wide' | 'very wide';
-}
-
-interface SidebarClass extends React.ComponentClass<SidebarProps> {
-  Pushable: typeof SidebarPushable;
-  Pusher: typeof SidebarPusher;
+  /** Controls whether or not the dim is displayed. */
+  dimmed?: boolean;
 }
 
-export const Sidebar: SidebarClass;
+export const SidebarPusher: React.StatelessComponent<SidebarPusherProps>;

test/specs/modules/Sidebar/Sidebar-test.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import _ from 'lodash'
 
 import Sidebar from 'src/modules/Sidebar/Sidebar'
 import * as common from 'test/specs/commonTests'
@@ -14,21 +13,11 @@ describe('Sidebar', () => {
   common.propValueOnlyToClassName(Sidebar, 'animation', [
     'overlay', 'push', 'scale down', 'uncover', 'slide out', 'slide along',
   ])
+  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'])
   common.propValueOnlyToClassName(Sidebar, 'width', ['very thin', 'thin', 'wide', 'very wide'])
 
   it('renders a <div /> element', () => {
     shallow(<Sidebar />)
       .should.have.tagName('div')
   })
-
-  it('renders children of the sidebar', () => {
-    const wrapper = mount(<Sidebar><span /></Sidebar>)
-    wrapper.children().at(0).should.have.tagName('span')
-  })
-
-  it('adds direction value to className', () => {
-    _.each(_.get(Sidebar, '_meta.props.direction'), propValue => {
-      shallow(<Sidebar direction={propValue} />).should.have.className(propValue)
-    })
-  })
 })