2015-08-15 06:40:11 +08:00
|
|
|
React = require 'react'
|
|
|
|
_ = require 'underscore'
|
|
|
|
{RetinaImg, Flexbox} = require 'nylas-component-kit'
|
|
|
|
|
|
|
|
class PreferencesHeader extends React.Component
|
|
|
|
@displayName: 'PreferencesHeader'
|
|
|
|
|
|
|
|
@propTypes:
|
|
|
|
tabs: React.PropTypes.array.isRequired
|
|
|
|
changeActiveTab: React.PropTypes.func.isRequired
|
|
|
|
activeTab: React.PropTypes.object
|
|
|
|
|
|
|
|
render: =>
|
2015-10-22 07:48:57 +08:00
|
|
|
if process.platform is "win32"
|
2015-10-22 11:39:05 +08:00
|
|
|
imgMode = RetinaImg.Mode.ContentIsMask
|
2015-10-22 07:48:57 +08:00
|
|
|
else
|
2015-10-22 11:39:05 +08:00
|
|
|
imgMode = RetinaImg.Mode.ContentPreserve
|
2015-10-30 05:20:41 +08:00
|
|
|
|
2015-08-15 07:24:53 +08:00
|
|
|
<div className="preference-header">
|
2015-10-30 05:20:41 +08:00
|
|
|
{ @props.tabs.map (sectionConfig) =>
|
2015-08-15 06:40:11 +08:00
|
|
|
classname = "preference-header-item"
|
2015-10-30 05:20:41 +08:00
|
|
|
classname += " active" if sectionConfig is @props.activeTab
|
2015-08-15 06:40:11 +08:00
|
|
|
|
2015-10-30 05:20:41 +08:00
|
|
|
<div className={classname} onClick={ => @props.changeActiveTab(sectionConfig) } key={sectionConfig.sectionId}>
|
2015-08-15 06:40:11 +08:00
|
|
|
<div className="phi-container">
|
|
|
|
<div className="icon">
|
2015-10-30 05:20:41 +08:00
|
|
|
<RetinaImg mode={imgMode} {...sectionConfig.nameOrUrl()} />
|
2015-08-15 06:40:11 +08:00
|
|
|
</div>
|
|
|
|
<div className="name">
|
2015-10-30 05:20:41 +08:00
|
|
|
{sectionConfig.displayName}
|
2015-08-15 06:40:11 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
2015-08-15 07:24:53 +08:00
|
|
|
</div>
|
2015-08-15 06:40:11 +08:00
|
|
|
|
|
|
|
|
|
|
|
module.exports = PreferencesHeader
|