apeman-react-spinner/lib/ap_spinner.jsx

apeman react package for spinner.

/**
 * apeman react package for spinner.
 * @class ApSpinner
 */

'use strict'

import React, {Component, PropTypes as types} from 'react'
import classnames from 'classnames'
import {shallowEqual} from 'asobj'

const SpinnerThemes = {
  a: [ 'fa', 'fa-spin', 'fa-spinner' ],
  b: [ 'fa', 'fa-spin', 'fa-circle-o-notch' ],
  c: [ 'fa', 'fa-spin', 'fa-refresh' ],
  d: [ 'fa', 'fa-spin', 'fa-gear' ],
  e: [ 'fa', 'fa-spin', 'fa-pulse' ]
}
const SpinnerSizes = [
  'medium',
  'xx-small',
  'x-small',
  'small',
  'large',
  'x-large',
  'xx-large',
  'smaller',
  'larger'
]

const DEFAULT_THEME = 'c'
const DEFAULT_SIZE = 'large'

/** @lends ApSpinner */
class ApSpinner extends Component {
  render () {
    const s = this
    let { props } = s
    let className = classnames('ap-spinner', props.className, {
      'ap-spinner-cover': !!props.cover,
      'ap-spinner-enabled': !!props.enabled
    })
    return (
      <div className={ className }
           style={ Object.assign({}, props.style) }>
        <span className={ classnames('ap-spinner-icon', SpinnerThemes[ props.theme ]) }
              style={ { fontSize: props.size } }
        >
        </span>
      </div>
    )
  }

  // --------------------
  // Lifecycle
  // --------------------

  shouldComponentUpdate (nextProps, nextState) {
    const s = this
    let { props, state } = s
    return !shallowEqual(props, nextProps) || shallowEqual(state, nextState)
  }

  componentDidMount () {
    const s = this
    s.setState({
      iconVisible: true
    })
  }

  componentWillUnmount () {
    const s = this
  }

  // --------------------
  // Custom
  // --------------------
}

Object.assign(ApSpinner, {
  // --------------------
  // Specs
  // --------------------
  propTypes: {
    /** Shows spin */
    enabled: types.bool,
    /** Theme of the spinner */
    theme: types.oneOf(
      Object.keys(SpinnerThemes)
    ),
    /** Size of spinner icon */
    size: types.oneOf(SpinnerSizes),
    /** show as cover */
    cover: types.bool
  },
  defaultProps: {
    enabled: false,
    theme: DEFAULT_THEME,
    size: DEFAULT_SIZE
  },
  DEFAULT_THEME
})

export default ApSpinner