/**
* apeman react package for head component.
* @class ApHead
*/
'use strict'
import React, {PropTypes as types} from 'react'
import stringcase from 'stringcase'
/** @lends ApHead */
const ApHead = React.createClass({
// --------------------
// Specs
// --------------------
propTypes: {
/** CharSet */
charset: types.string,
/** Document Title */
title: types.string,
/** Favicon */
icon: types.string,
/** Meta data */
meta: types.oneOfType([
types.arrayOf(types.object),
types.object
]),
/** Micro data settings */
itemProps: types.oneOfType([
types.arrayOf(types.object),
types.object
]),
/** CSS file urls */
css: types.array,
/** JS file urls */
js: types.array,
/** Version string */
version: types.string,
/** Querystring key for version */
versionKey: types.string,
/** Global variables */
globals: types.object,
/** View port settings */
viewport: types.object
},
mixins: [],
statics: {
renderCharset (charset) {
if (!charset) {
return null
}
return (
)
},
renderTitle (title) {
if (!title) {
return null
}
return (
{title}
)
},
renderIcon (url, query) {
if (!url) {
return null
}
return (
)
},
renderMetaValues (values) {
if (!values) {
return null
}
return [].concat(values).map((values, i) =>
Object.keys(values).map((name, j) =>
)
).reduce((a, b) => [].concat(a, b), [])
},
renderItemProps (values) {
if (!values) {
return null
}
return [].concat(values).map((values, i) =>
Object.keys(values).map((name, j) =>
)
).reduce((a, b) => [].concat(a, b), [])
},
renderCss (urls, query) {
if (!urls) {
return null
}
return [].concat(urls).map((url, i) =>
)
},
renderJs (urls, query) {
if (!urls) {
return null
}
return [].concat(urls).map((url, i) =>
)
},
renderGlobals (values) {
let _stringify = (data) => data ? JSON.stringify(data || {}) : "null"
return Object.keys(values || {}).map((key, i) =>
)
},
renderViewPort (values) {
let content = Object.keys(values || {}).map((key) =>
[ stringcase.spinalcase(key), values[ key ] ].join('=')
).join(',')
return
},
_addQuery (url, query) {
let joiner = /\?/.test(url) ? '&' : '?'
return [ url, query ].join(joiner)
}
},
getInitialState () {
return {}
},
getDefaultProps () {
return {
version: 'unknown',
versionKey: 'v',
viewport: {
width: 'device-width',
initialScale: '1.0'
}
}
},
render () {
const s = this
let { props } = s
let query = [ props.versionKey, props.version ].join('=')
return (
{ ApHead.renderCharset(props.charset) }
{ ApHead.renderTitle(props.title) }
{ ApHead.renderMetaValues(props.meta) }
{ ApHead.renderItemProps(props.itemProps) }
{ ApHead.renderIcon(props.icon, query) }
{ ApHead.renderJs(props.js, query) }
{ ApHead.renderCss(props.css, query) }
{ ApHead.renderGlobals(props.globals) }
{ ApHead.renderViewPort(props.viewport) }
{ props.children }
)
}
})
export default ApHead