apeman-react-style/lib/ap_style.jsx

apeman react package for style component.

/**
 * apeman react package for style component.
 * @class ApStyle
 */

'use strict'

import React, {PropTypes as types} from 'react'
import ReactDOMServer from 'react-dom/server'
import iftype from 'iftype'
import {EOL} from 'os'
import classnames from 'classnames'
import {
  SMALL_MEDIA_BREAKPOINT,
  MEDIUM_MEDIA_BREAKPOINT,
  LARGE_MEDIA_BREAKPOINT
} from './styling/style_constants'
import styleString from './styling/style_string'

/** @lends ApStyle */
const ApStyle = React.createClass({

  // --------------------
  // Specifications
  // --------------------
  statics: {
    stringifyStyle (style) {
      if (!style) {
        return ''
      }
      let isString = iftype.isString(style)
      return isString ? style : styleString(style)
    },
    stringifyMediaStyle (style, width) {
      if (!style) {
        return ''
      }
      return `@media (min-width: ${width}px) { ${ApStyle.stringifyStyle(style)} }`
    },
    styleContent (elm) {
      return ReactDOMServer.renderToStaticMarkup(elm)
        .replace(/<style.*?>/, '')
        .replace(/<\/style.*?>/, '')
    },
    DEFAULT_HIGHLIGHT_COLOR: '#38E',
    DEFAULT_BACKGROUND_COLOR: '#FFF',
    DEFAULT_DANGER_COLOR: '#B31818',
    NORMAL_COLOR: '#555',
    INFO_COLOR: '#0C843A',
    WARN_COLOR: '#9C9C19',
    ERROR_COLOR: '#B31818',
    CAPTION_COLOR: '#999',
    CAPTION_BORDER_COLOR: '#F0F0F0',
    COVER_BACKGROUND: 'rgba(255,255,255,0.8)',
    COVER_COLOR: '#CCC',
    CONTENT_PADDING: 4,
    CONTENT_WIDTH: 480,
    ROW_HEIGHT: 32,
    CONTAINER_WIDTH: 1024,

    SMALL_MEDIA_BREAKPOINT,
    MEDIUM_MEDIA_BREAKPOINT,
    LARGE_MEDIA_BREAKPOINT
  },
  propTypes: {
    data: types.oneOfType([
      types.string,
      types.objectOf(types.object)
    ]),
    smallMediaData: types.oneOfType([
      types.string,
      types.object
    ]),
    mediumMediaData: types.oneOfType([
      types.string,
      types.object
    ]),
    largeMediaData: types.oneOfType([
      types.string,
      types.object
    ]),
    type: types.string
  },
  getDefaultProps () {
    return {
      data: null,
      smallMediaData: null,
      mediumMediaData: null,
      largeMediaData: null,
      type: 'text/css'
    }
  },
  getInitialState () {
    return {}
  },
  render () {
    const s = this
    let { props } = s

    let styleString = s.getStyleString() || ''
    let childrenString = s.getChildrenString() || ''
    return (
      <style className={ classnames('ap-style', props.className) }
             id={ props.id || null }
             type={ props.type }
             dangerouslySetInnerHTML={ {__html: styleString + childrenString} }/>
    )
  },

  // --------------------
  // Specifications
  // --------------------
  getStyleString () {
    const s = this
    let { props } = s
    let { data, smallMediaData, mediumMediaData, largeMediaData } = props
    return [
      ApStyle.stringifyStyle(data),
      ApStyle.stringifyMediaStyle(smallMediaData, SMALL_MEDIA_BREAKPOINT),
      ApStyle.stringifyMediaStyle(mediumMediaData, MEDIUM_MEDIA_BREAKPOINT),
      ApStyle.stringifyMediaStyle(largeMediaData, LARGE_MEDIA_BREAKPOINT)
    ].filter(Boolean).join(EOL)
  },
  getChildrenString () {
    const s = this
    let { children } = s.props
    if (!children) {
      return null
    }
    return [].concat(children).map((child) => {
      return child
    }).join(EOL)
  }
})

export default ApStyle