public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 10:16:26 +00:00
Code Issues Releases Wiki Activity

refactor: replace storage item component with common component

Browse Source
This commit is contained in:
sota1235
2016-12-30 19:13:38 +09:00
parent d65464401c
commit b18b1171e7
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
browser/components/StorageItem.js
View File

@@ -4,6 +4,7 @@
import React, { PropTypes } from 'react' import React, { PropTypes } from 'react'
import styles from './StorageItem.styl' import styles from './StorageItem.styl'
import CSSModules from 'browser/lib/CSSModules' import CSSModules from 'browser/lib/CSSModules'
import { isNumber } from 'lodash'
/** /**
* @param {boolean} isActive * @param {boolean} isActive
@@ -33,7 +34,7 @@ const StorageItem = ({
> >
{isFolded ? folderName.substring(0, 1) : folderName} {isFolded ? folderName.substring(0, 1) : folderName}
</span> </span>
{!isFolded && {(!isFolded && isNumber(noteCount)) &&
<span styleName='folderList-item-noteCount'>{noteCount}</span> <span styleName='folderList-item-noteCount'>{noteCount}</span>
} }
{isFolded && {isFolded &&
@@ -51,7 +52,7 @@ StorageItem.propTypes = {
folderName: PropTypes.string.isRequired, folderName: PropTypes.string.isRequired,
folderColor: PropTypes.string, folderColor: PropTypes.string,
isFolded: PropTypes.bool.isRequired, isFolded: PropTypes.bool.isRequired,
noteCount: PropTypes.number.isRequired, noteCount: PropTypes.number,
} }
export default CSSModules(StorageItem, styles) export default CSSModules(StorageItem, styles)

26
browser/finder/StorageSection.js
View File

@@ -1,6 +1,7 @@
import React, { PropTypes } from 'react' import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules' import CSSModules from 'browser/lib/CSSModules'
import styles from './StorageSection.styl' import styles from './StorageSection.styl'
import StorageItem from 'browser/components/StorageItem'
class StorageSection extends React.Component { class StorageSection extends React.Component {
constructor (props) { constructor (props) {
@@ -30,20 +31,17 @@ class StorageSection extends React.Component {
render () { render () {
let { storage, filter } = this.props let { storage, filter } = this.props
let folderList = storage.folders let folderList = storage.folders
.map((folder) => { .map(folder => (
return ( <StorageItem
<button styleName={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key key={folder.key}
? 'folderList-item--active' isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
: 'folderList-item' handleButtonClick={(e) => this.handleFolderClick(e, folder)}
} folderName={folder.name}
style={{borderColor: folder.color}} folderColor={folder.color}
key={folder.key} isFolded={false}
onClick={(e) => this.handleFolderClick(e, folder)} />
> ))
{folder.name}
</button>
)
})
return ( return (
<div styleName='root'> <div styleName='root'>
<div styleName='header'> <div styleName='header'>