public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +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)

24
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
? 'folderList-item--active'
: 'folderList-item'
}
style={{borderColor: folder.color}}
key={folder.key} key={folder.key}
onClick={(e) => this.handleFolderClick(e, folder)} isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
> handleButtonClick={(e) => this.handleFolderClick(e, folder)}
{folder.name} folderName={folder.name}
</button> folderColor={folder.color}
) isFolded={false}
}) />
))
return ( return (
<div styleName='root'> <div styleName='root'>
<div styleName='header'> <div styleName='header'>