mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
extracted folder list and item to separate components
This commit is contained in:
Matus Benko
276
browser/main/modals/PreferencesModal/FolderItem.js
Normal file
276
browser/main/modals/PreferencesModal/FolderItem.js
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
import React, { PropTypes } from 'react'
|
||||||
|
import CSSModules from 'browser/lib/CSSModules'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import styles from './FolderItem.styl'
|
||||||
|
import dataApi from 'browser/main/lib/dataApi'
|
||||||
|
import store from 'browser/main/store'
|
||||||
|
import { SketchPicker } from 'react-color'
|
||||||
|
|
||||||
|
class FolderItem extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
status: 'IDLE',
|
||||||
|
folder: {
|
||||||
|
showColumnPicker: false,
|
||||||
|
colorPickerPos: { left: 0, top: 0 },
|
||||||
|
color: props.color,
|
||||||
|
name: props.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleEditChange (e) {
|
||||||
|
let { folder } = this.state
|
||||||
|
|
||||||
|
folder.name = this.refs.nameInput.value
|
||||||
|
this.setState({
|
||||||
|
folder
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleConfirmButtonClick (e) {
|
||||||
|
this.confirm()
|
||||||
|
}
|
||||||
|
|
||||||
|
confirm () {
|
||||||
|
let { storage, folder } = this.props
|
||||||
|
dataApi
|
||||||
|
.updateFolder(storage.key, folder.key, {
|
||||||
|
color: this.state.folder.color,
|
||||||
|
name: this.state.folder.name
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
store.dispatch({
|
||||||
|
type: 'UPDATE_FOLDER',
|
||||||
|
storage: data.storage
|
||||||
|
})
|
||||||
|
this.setState({
|
||||||
|
status: 'IDLE'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleColorButtonClick (e) {
|
||||||
|
const folder = Object.assign({}, this.state.folder, { showColumnPicker: true, colorPickerPos: { left: 0, top: 0 } })
|
||||||
|
this.setState({ folder }, function () {
|
||||||
|
// After the color picker has been painted, re-calculate its position
|
||||||
|
// by comparing its dimensions to the host dimensions.
|
||||||
|
const { hostBoundingBox } = this.props
|
||||||
|
const colorPickerNode = ReactDOM.findDOMNode(this.refs.colorPicker)
|
||||||
|
const colorPickerBox = colorPickerNode.getBoundingClientRect()
|
||||||
|
const offsetTop = hostBoundingBox.bottom - colorPickerBox.bottom
|
||||||
|
const folder = Object.assign({}, this.state.folder, {
|
||||||
|
colorPickerPos: {
|
||||||
|
left: 25,
|
||||||
|
top: offsetTop < 0 ? offsetTop - 5 : 0 // subtract 5px for aestetics
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.setState({ folder })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleColorChange (color) {
|
||||||
|
const folder = Object.assign({}, this.state.folder, { color: color.hex })
|
||||||
|
this.setState({ folder })
|
||||||
|
}
|
||||||
|
|
||||||
|
handleColorPickerClose (event) {
|
||||||
|
const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
|
||||||
|
this.setState({ folder })
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCancelButtonClick (e) {
|
||||||
|
this.setState({
|
||||||
|
status: 'IDLE'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleFolderItemBlur (e) {
|
||||||
|
let el = e.relatedTarget
|
||||||
|
while (el != null) {
|
||||||
|
if (el === this.refs.root) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
el = el.parentNode
|
||||||
|
}
|
||||||
|
this.confirm()
|
||||||
|
}
|
||||||
|
|
||||||
|
renderEdit (e) {
|
||||||
|
const popover = { position: 'absolute', zIndex: 2 }
|
||||||
|
const cover = {
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
const pickerStyle = Object.assign({}, {
|
||||||
|
position: 'absolute'
|
||||||
|
}, this.state.folder.colorPickerPos)
|
||||||
|
return (
|
||||||
|
<div styleName='folderItem'
|
||||||
|
onBlur={(e) => this.handleFolderItemBlur(e)}
|
||||||
|
tabIndex='-1'
|
||||||
|
ref='root'
|
||||||
|
>
|
||||||
|
<div styleName='folderItem-left'>
|
||||||
|
<button styleName='folderItem-left-colorButton' style={{color: this.state.folder.color}}
|
||||||
|
onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
|
||||||
|
>
|
||||||
|
{this.state.folder.showColumnPicker
|
||||||
|
? <div style={popover}>
|
||||||
|
<div style={cover}
|
||||||
|
onClick={() => this.handleColorPickerClose()}
|
||||||
|
/>
|
||||||
|
<div style={pickerStyle}>
|
||||||
|
<SketchPicker
|
||||||
|
ref='colorPicker'
|
||||||
|
color={this.state.folder.color}
|
||||||
|
onChange={(color) => this.handleColorChange(color)}
|
||||||
|
onChangeComplete={(color) => this.handleColorChange(color)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
<i className='fa fa-square' />
|
||||||
|
</button>
|
||||||
|
<input styleName='folderItem-left-nameInput'
|
||||||
|
value={this.state.folder.name}
|
||||||
|
ref='nameInput'
|
||||||
|
onChange={(e) => this.handleEditChange(e)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div styleName='folderItem-right'>
|
||||||
|
<button styleName='folderItem-right-confirmButton'
|
||||||
|
onClick={(e) => this.handleConfirmButtonClick(e)}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
<button styleName='folderItem-right-button'
|
||||||
|
onClick={(e) => this.handleCancelButtonClick(e)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDeleteConfirmButtonClick (e) {
|
||||||
|
let { storage, folder } = this.props
|
||||||
|
dataApi
|
||||||
|
.deleteFolder(storage.key, folder.key)
|
||||||
|
.then((data) => {
|
||||||
|
store.dispatch({
|
||||||
|
type: 'DELETE_FOLDER',
|
||||||
|
storage: data.storage,
|
||||||
|
folderKey: data.folderKey
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
renderDelete () {
|
||||||
|
return (
|
||||||
|
<div styleName='folderItem'>
|
||||||
|
<div styleName='folderItem-left'>
|
||||||
|
Are you sure to <span styleName='folderItem-left-danger'>delete</span> this folder?
|
||||||
|
</div>
|
||||||
|
<div styleName='folderItem-right'>
|
||||||
|
<button styleName='folderItem-right-dangerButton'
|
||||||
|
onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
<button styleName='folderItem-right-button'
|
||||||
|
onClick={(e) => this.handleCancelButtonClick(e)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
handleEditButtonClick (e) {
|
||||||
|
let { folder: propsFolder } = this.props
|
||||||
|
let { folder: stateFolder } = this.state
|
||||||
|
const folder = Object.assign({}, stateFolder, propsFolder)
|
||||||
|
this.setState({
|
||||||
|
status: 'EDIT',
|
||||||
|
folder
|
||||||
|
}, () => {
|
||||||
|
this.refs.nameInput.select()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDeleteButtonClick (e) {
|
||||||
|
this.setState({
|
||||||
|
status: 'DELETE'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
renderIdle () {
|
||||||
|
let { folder } = this.props
|
||||||
|
return (
|
||||||
|
<div styleName='folderItem'
|
||||||
|
onDoubleClick={(e) => this.handleEditButtonClick(e)}
|
||||||
|
>
|
||||||
|
<div styleName='folderItem-left'
|
||||||
|
style={{borderColor: folder.color}}
|
||||||
|
>
|
||||||
|
<span styleName='folderItem-left-name'>{folder.name}</span>
|
||||||
|
<span styleName='folderItem-left-key'>({folder.key})</span>
|
||||||
|
</div>
|
||||||
|
<div styleName='folderItem-right'>
|
||||||
|
<button styleName='folderItem-right-button'
|
||||||
|
onClick={(e) => this.handleEditButtonClick(e)}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button styleName='folderItem-right-button'
|
||||||
|
onClick={(e) => this.handleDeleteButtonClick(e)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
switch (this.state.status) {
|
||||||
|
case 'DELETE':
|
||||||
|
return this.renderDelete()
|
||||||
|
case 'EDIT':
|
||||||
|
return this.renderEdit()
|
||||||
|
case 'IDLE':
|
||||||
|
default:
|
||||||
|
return this.renderIdle()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FolderItem.propTypes = {
|
||||||
|
hostBoundingBox: PropTypes.shape({
|
||||||
|
bottom: PropTypes.number,
|
||||||
|
height: PropTypes.number,
|
||||||
|
left: PropTypes.number,
|
||||||
|
right: PropTypes.number,
|
||||||
|
top: PropTypes.number,
|
||||||
|
width: PropTypes.number
|
||||||
|
}),
|
||||||
|
storage: PropTypes.shape({
|
||||||
|
key: PropTypes.string
|
||||||
|
}),
|
||||||
|
folder: PropTypes.shape({
|
||||||
|
key: PropTypes.string,
|
||||||
|
color: PropTypes.string,
|
||||||
|
name: PropTypes.string
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CSSModules(FolderItem, styles)
|
||||||
94
browser/main/modals/PreferencesModal/FolderItem.styl
Normal file
94
browser/main/modals/PreferencesModal/FolderItem.styl
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
.folderItem
|
||||||
|
height 35px
|
||||||
|
box-sizing border-box
|
||||||
|
padding 2.5px 15px
|
||||||
|
&:hover
|
||||||
|
background-color darken(white, 3%)
|
||||||
|
.folderItem-left
|
||||||
|
height 30px
|
||||||
|
border-left solid 2px transparent
|
||||||
|
padding 0 10px
|
||||||
|
line-height 30px
|
||||||
|
float left
|
||||||
|
.folderItem-left-danger
|
||||||
|
color $danger-color
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
.folderItem-left-key
|
||||||
|
color $ui-inactive-text-color
|
||||||
|
font-size 10px
|
||||||
|
margin 0 5px
|
||||||
|
border none
|
||||||
|
|
||||||
|
.folderItem-left-colorButton
|
||||||
|
colorDefaultButton()
|
||||||
|
height 25px
|
||||||
|
width 25px
|
||||||
|
line-height 23px
|
||||||
|
padding 0
|
||||||
|
box-sizing border-box
|
||||||
|
vertical-align middle
|
||||||
|
border $ui-border
|
||||||
|
border-radius 2px
|
||||||
|
margin-right 5px
|
||||||
|
margin-left -15px
|
||||||
|
|
||||||
|
.folderItem-left-nameInput
|
||||||
|
height 25px
|
||||||
|
box-sizing border-box
|
||||||
|
vertical-align middle
|
||||||
|
border $ui-border
|
||||||
|
border-radius 2px
|
||||||
|
padding 0 5px
|
||||||
|
outline none
|
||||||
|
|
||||||
|
.folderItem-right
|
||||||
|
float right
|
||||||
|
|
||||||
|
.folderItem-right-button
|
||||||
|
vertical-align middle
|
||||||
|
height 25px
|
||||||
|
margin-top 2.5px
|
||||||
|
colorDefaultButton()
|
||||||
|
border-radius 2px
|
||||||
|
border $ui-border
|
||||||
|
margin-right 5px
|
||||||
|
padding 0 5px
|
||||||
|
&:last-child
|
||||||
|
margin-right 0
|
||||||
|
|
||||||
|
.folderItem-right-confirmButton
|
||||||
|
@extend .folderItem-right-button
|
||||||
|
border none
|
||||||
|
colorPrimaryButton()
|
||||||
|
|
||||||
|
.folderItem-right-dangerButton
|
||||||
|
@extend .folderItem-right-button
|
||||||
|
border none
|
||||||
|
colorDangerButton()
|
||||||
|
|
||||||
|
body[data-theme="dark"]
|
||||||
|
.folderItem
|
||||||
|
&:hover
|
||||||
|
background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
|
||||||
|
|
||||||
|
.folderItem-left-danger
|
||||||
|
color $danger-color
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
.folderItem-left-key
|
||||||
|
color $ui-dark-inactive-text-color
|
||||||
|
|
||||||
|
.folderItem-left-colorButton
|
||||||
|
colorDarkDefaultButton()
|
||||||
|
border-color $ui-dark-borderColor
|
||||||
|
|
||||||
|
.folderItem-right-button
|
||||||
|
colorDarkDefaultButton()
|
||||||
|
border-color $ui-dark-borderColor
|
||||||
|
|
||||||
|
.folderItem-right-confirmButton
|
||||||
|
colorDarkPrimaryButton()
|
||||||
|
|
||||||
|
.folderItem-right-dangerButton
|
||||||
|
colorDarkDangerButton()
|
||||||
52
browser/main/modals/PreferencesModal/FolderList.js
Normal file
52
browser/main/modals/PreferencesModal/FolderList.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import React, { PropTypes } from 'react'
|
||||||
|
import CSSModules from 'browser/lib/CSSModules'
|
||||||
|
import styles from './FolderList.styl'
|
||||||
|
import FolderItem from './FolderItem'
|
||||||
|
|
||||||
|
class FolderList extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
let { storage, hostBoundingBox } = this.props
|
||||||
|
|
||||||
|
let folderList = storage.folders.map((folder) => {
|
||||||
|
return <FolderItem key={folder.key}
|
||||||
|
folder={folder}
|
||||||
|
storage={storage}
|
||||||
|
hostBoundingBox={hostBoundingBox}
|
||||||
|
/>
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div styleName='folderList'>
|
||||||
|
{folderList.length > 0
|
||||||
|
? folderList
|
||||||
|
: <div styleName='folderList-empty'>No Folders</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FolderList.propTypes = {
|
||||||
|
hostBoundingBox: PropTypes.shape({
|
||||||
|
bottom: PropTypes.number,
|
||||||
|
height: PropTypes.number,
|
||||||
|
left: PropTypes.number,
|
||||||
|
right: PropTypes.number,
|
||||||
|
top: PropTypes.number,
|
||||||
|
width: PropTypes.number
|
||||||
|
}),
|
||||||
|
storage: PropTypes.shape({
|
||||||
|
key: PropTypes.string
|
||||||
|
}),
|
||||||
|
folder: PropTypes.shape({
|
||||||
|
key: PropTypes.string,
|
||||||
|
color: PropTypes.string,
|
||||||
|
name: PropTypes.string
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CSSModules(FolderList, styles)
|
||||||
@@ -1,265 +1,13 @@
|
|||||||
import React, { PropTypes } from 'react'
|
import React, { PropTypes } from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
|
||||||
import CSSModules from 'browser/lib/CSSModules'
|
import CSSModules from 'browser/lib/CSSModules'
|
||||||
import styles from './StorageItem.styl'
|
import styles from './StorageItem.styl'
|
||||||
import consts from 'browser/lib/consts'
|
import consts from 'browser/lib/consts'
|
||||||
import dataApi from 'browser/main/lib/dataApi'
|
import dataApi from 'browser/main/lib/dataApi'
|
||||||
import store from 'browser/main/store'
|
import store from 'browser/main/store'
|
||||||
|
import FolderList from './FolderList'
|
||||||
|
|
||||||
const { shell, remote } = require('electron')
|
const { shell, remote } = require('electron')
|
||||||
const { dialog } = remote
|
const { dialog } = remote
|
||||||
import { SketchPicker } from 'react-color'
|
|
||||||
|
|
||||||
class UnstyledFolderItem extends React.Component {
|
|
||||||
constructor (props) {
|
|
||||||
super(props)
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
status: 'IDLE',
|
|
||||||
folder: {
|
|
||||||
showColumnPicker: false,
|
|
||||||
colorPickerPos: { left: 0, top: 0 },
|
|
||||||
color: props.color,
|
|
||||||
name: props.name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEditChange (e) {
|
|
||||||
let { folder } = this.state
|
|
||||||
|
|
||||||
folder.name = this.refs.nameInput.value
|
|
||||||
this.setState({
|
|
||||||
folder
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleConfirmButtonClick (e) {
|
|
||||||
this.confirm()
|
|
||||||
}
|
|
||||||
|
|
||||||
confirm () {
|
|
||||||
let { storage, folder } = this.props
|
|
||||||
dataApi
|
|
||||||
.updateFolder(storage.key, folder.key, {
|
|
||||||
color: this.state.folder.color,
|
|
||||||
name: this.state.folder.name
|
|
||||||
})
|
|
||||||
.then((data) => {
|
|
||||||
store.dispatch({
|
|
||||||
type: 'UPDATE_FOLDER',
|
|
||||||
storage: data.storage
|
|
||||||
})
|
|
||||||
this.setState({
|
|
||||||
status: 'IDLE'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleColorButtonClick (e) {
|
|
||||||
const folder = Object.assign({}, this.state.folder, { showColumnPicker: true, colorPickerPos: { left: 0, top: 0 } })
|
|
||||||
this.setState({ folder }, function () {
|
|
||||||
// After the color picker has been painted, re-calculate its position
|
|
||||||
// by comparing its dimensions to the host dimensions.
|
|
||||||
const { hostBoundingBox } = this.props
|
|
||||||
const colorPickerNode = ReactDOM.findDOMNode(this.refs.colorPicker)
|
|
||||||
const colorPickerBox = colorPickerNode.getBoundingClientRect()
|
|
||||||
const offsetTop = hostBoundingBox.bottom - colorPickerBox.bottom
|
|
||||||
const folder = Object.assign({}, this.state.folder, {
|
|
||||||
colorPickerPos: {
|
|
||||||
left: 25,
|
|
||||||
top: offsetTop < 0 ? offsetTop - 5 : 0 // subtract 5px for aestetics
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.setState({ folder })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleColorChange (color) {
|
|
||||||
const folder = Object.assign({}, this.state.folder, { color: color.hex })
|
|
||||||
this.setState({ folder })
|
|
||||||
}
|
|
||||||
|
|
||||||
handleColorPickerClose (event) {
|
|
||||||
const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
|
|
||||||
this.setState({ folder })
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCancelButtonClick (e) {
|
|
||||||
this.setState({
|
|
||||||
status: 'IDLE'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleFolderItemBlur (e) {
|
|
||||||
let el = e.relatedTarget
|
|
||||||
while (el != null) {
|
|
||||||
if (el === this.refs.root) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
el = el.parentNode
|
|
||||||
}
|
|
||||||
this.confirm()
|
|
||||||
}
|
|
||||||
|
|
||||||
renderEdit (e) {
|
|
||||||
const popover = { position: 'absolute', zIndex: 2 }
|
|
||||||
const cover = {
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
left: 0
|
|
||||||
}
|
|
||||||
const pickerStyle = Object.assign({}, {
|
|
||||||
position: 'absolute'
|
|
||||||
}, this.state.folder.colorPickerPos)
|
|
||||||
return (
|
|
||||||
<div styleName='folderList-item'
|
|
||||||
onBlur={(e) => this.handleFolderItemBlur(e)}
|
|
||||||
tabIndex='-1'
|
|
||||||
ref='root'
|
|
||||||
>
|
|
||||||
<div styleName='folderList-item-left'>
|
|
||||||
<button styleName='folderList-item-left-colorButton' style={{color: this.state.folder.color}}
|
|
||||||
onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
|
|
||||||
>
|
|
||||||
{this.state.folder.showColumnPicker
|
|
||||||
? <div style={popover}>
|
|
||||||
<div style={cover}
|
|
||||||
onClick={() => this.handleColorPickerClose()}
|
|
||||||
/>
|
|
||||||
<div style={pickerStyle}>
|
|
||||||
<SketchPicker
|
|
||||||
ref='colorPicker'
|
|
||||||
color={this.state.folder.color}
|
|
||||||
onChange={(color) => this.handleColorChange(color)}
|
|
||||||
onChangeComplete={(color) => this.handleColorChange(color)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
<i className='fa fa-square' />
|
|
||||||
</button>
|
|
||||||
<input styleName='folderList-item-left-nameInput'
|
|
||||||
value={this.state.folder.name}
|
|
||||||
ref='nameInput'
|
|
||||||
onChange={(e) => this.handleEditChange(e)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div styleName='folderList-item-right'>
|
|
||||||
<button styleName='folderList-item-right-confirmButton'
|
|
||||||
onClick={(e) => this.handleConfirmButtonClick(e)}
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</button>
|
|
||||||
<button styleName='folderList-item-right-button'
|
|
||||||
onClick={(e) => this.handleCancelButtonClick(e)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDeleteConfirmButtonClick (e) {
|
|
||||||
let { storage, folder } = this.props
|
|
||||||
dataApi
|
|
||||||
.deleteFolder(storage.key, folder.key)
|
|
||||||
.then((data) => {
|
|
||||||
store.dispatch({
|
|
||||||
type: 'DELETE_FOLDER',
|
|
||||||
storage: data.storage,
|
|
||||||
folderKey: data.folderKey
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
renderDelete () {
|
|
||||||
return (
|
|
||||||
<div styleName='folderList-item'>
|
|
||||||
<div styleName='folderList-item-left'>
|
|
||||||
Are you sure to <span styleName='folderList-item-left-danger'>delete</span> this folder?
|
|
||||||
</div>
|
|
||||||
<div styleName='folderList-item-right'>
|
|
||||||
<button styleName='folderList-item-right-dangerButton'
|
|
||||||
onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</button>
|
|
||||||
<button styleName='folderList-item-right-button'
|
|
||||||
onClick={(e) => this.handleCancelButtonClick(e)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEditButtonClick (e) {
|
|
||||||
let { folder: propsFolder } = this.props
|
|
||||||
let { folder: stateFolder } = this.state
|
|
||||||
const folder = Object.assign({}, stateFolder, propsFolder)
|
|
||||||
this.setState({
|
|
||||||
status: 'EDIT',
|
|
||||||
folder
|
|
||||||
}, () => {
|
|
||||||
this.refs.nameInput.select()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDeleteButtonClick (e) {
|
|
||||||
this.setState({
|
|
||||||
status: 'DELETE'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
renderIdle () {
|
|
||||||
let { folder } = this.props
|
|
||||||
return (
|
|
||||||
<div styleName='folderList-item'
|
|
||||||
onDoubleClick={(e) => this.handleEditButtonClick(e)}
|
|
||||||
>
|
|
||||||
<div styleName='folderList-item-left'
|
|
||||||
style={{borderColor: folder.color}}
|
|
||||||
>
|
|
||||||
<span styleName='folderList-item-left-name'>{folder.name}</span>
|
|
||||||
<span styleName='folderList-item-left-key'>({folder.key})</span>
|
|
||||||
</div>
|
|
||||||
<div styleName='folderList-item-right'>
|
|
||||||
<button styleName='folderList-item-right-button'
|
|
||||||
onClick={(e) => this.handleEditButtonClick(e)}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
<button styleName='folderList-item-right-button'
|
|
||||||
onClick={(e) => this.handleDeleteButtonClick(e)}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
switch (this.state.status) {
|
|
||||||
case 'DELETE':
|
|
||||||
return this.renderDelete()
|
|
||||||
case 'EDIT':
|
|
||||||
return this.renderEdit()
|
|
||||||
case 'IDLE':
|
|
||||||
default:
|
|
||||||
return this.renderIdle()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const FolderItem = CSSModules(UnstyledFolderItem, styles)
|
|
||||||
|
|
||||||
class StorageItem extends React.Component {
|
class StorageItem extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
@@ -349,13 +97,7 @@ class StorageItem extends React.Component {
|
|||||||
|
|
||||||
render () {
|
render () {
|
||||||
let { storage, hostBoundingBox } = this.props
|
let { storage, hostBoundingBox } = this.props
|
||||||
let folderList = storage.folders.map((folder) => {
|
|
||||||
return <FolderItem key={folder.key}
|
|
||||||
folder={folder}
|
|
||||||
storage={storage}
|
|
||||||
hostBoundingBox={hostBoundingBox}
|
|
||||||
/>
|
|
||||||
})
|
|
||||||
return (
|
return (
|
||||||
<div styleName='root' key={storage.key}>
|
<div styleName='root' key={storage.key}>
|
||||||
<div styleName='header'>
|
<div styleName='header'>
|
||||||
@@ -404,12 +146,9 @@ class StorageItem extends React.Component {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div styleName='folderList'>
|
<FolderList storage={storage}
|
||||||
{folderList.length > 0
|
hostBoundingBox={hostBoundingBox}
|
||||||
? folderList
|
/>
|
||||||
: <div styleName='folderList-empty'>No Folders</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -426,11 +165,6 @@ StorageItem.propTypes = {
|
|||||||
}),
|
}),
|
||||||
storage: PropTypes.shape({
|
storage: PropTypes.shape({
|
||||||
key: PropTypes.string
|
key: PropTypes.string
|
||||||
}),
|
|
||||||
folder: PropTypes.shape({
|
|
||||||
key: PropTypes.string,
|
|
||||||
color: PropTypes.string,
|
|
||||||
name: PropTypes.string
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -63,75 +63,6 @@
|
|||||||
z-index 10
|
z-index 10
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
|
|
||||||
.folderList-item
|
|
||||||
height 35px
|
|
||||||
box-sizing border-box
|
|
||||||
padding 2.5px 15px
|
|
||||||
&:hover
|
|
||||||
background-color darken(white, 3%)
|
|
||||||
.folderList-item-left
|
|
||||||
height 30px
|
|
||||||
border-left solid 2px transparent
|
|
||||||
padding 0 10px
|
|
||||||
line-height 30px
|
|
||||||
float left
|
|
||||||
.folderList-item-left-danger
|
|
||||||
color $danger-color
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
.folderList-item-left-key
|
|
||||||
color $ui-inactive-text-color
|
|
||||||
font-size 10px
|
|
||||||
margin 0 5px
|
|
||||||
border none
|
|
||||||
|
|
||||||
.folderList-item-left-colorButton
|
|
||||||
colorDefaultButton()
|
|
||||||
height 25px
|
|
||||||
width 25px
|
|
||||||
line-height 23px
|
|
||||||
padding 0
|
|
||||||
box-sizing border-box
|
|
||||||
vertical-align middle
|
|
||||||
border $ui-border
|
|
||||||
border-radius 2px
|
|
||||||
margin-right 5px
|
|
||||||
margin-left -15px
|
|
||||||
|
|
||||||
.folderList-item-left-nameInput
|
|
||||||
height 25px
|
|
||||||
box-sizing border-box
|
|
||||||
vertical-align middle
|
|
||||||
border $ui-border
|
|
||||||
border-radius 2px
|
|
||||||
padding 0 5px
|
|
||||||
outline none
|
|
||||||
|
|
||||||
.folderList-item-right
|
|
||||||
float right
|
|
||||||
|
|
||||||
.folderList-item-right-button
|
|
||||||
vertical-align middle
|
|
||||||
height 25px
|
|
||||||
margin-top 2.5px
|
|
||||||
colorDefaultButton()
|
|
||||||
border-radius 2px
|
|
||||||
border $ui-border
|
|
||||||
margin-right 5px
|
|
||||||
padding 0 5px
|
|
||||||
&:last-child
|
|
||||||
margin-right 0
|
|
||||||
|
|
||||||
.folderList-item-right-confirmButton
|
|
||||||
@extend .folderList-item-right-button
|
|
||||||
border none
|
|
||||||
colorPrimaryButton()
|
|
||||||
|
|
||||||
.folderList-item-right-dangerButton
|
|
||||||
@extend .folderList-item-right-button
|
|
||||||
border none
|
|
||||||
colorDangerButton()
|
|
||||||
|
|
||||||
body[data-theme="dark"]
|
body[data-theme="dark"]
|
||||||
.header
|
.header
|
||||||
border-color $ui-dark-borderColor
|
border-color $ui-dark-borderColor
|
||||||
@@ -153,28 +84,3 @@ body[data-theme="dark"]
|
|||||||
top 25px
|
top 25px
|
||||||
z-index 10
|
z-index 10
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
|
|
||||||
.folderList-item
|
|
||||||
&:hover
|
|
||||||
background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
|
|
||||||
|
|
||||||
.folderList-item-left-danger
|
|
||||||
color $danger-color
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
.folderList-item-left-key
|
|
||||||
color $ui-dark-inactive-text-color
|
|
||||||
|
|
||||||
.folderList-item-left-colorButton
|
|
||||||
colorDarkDefaultButton()
|
|
||||||
border-color $ui-dark-borderColor
|
|
||||||
|
|
||||||
.folderList-item-right-button
|
|
||||||
colorDarkDefaultButton()
|
|
||||||
border-color $ui-dark-borderColor
|
|
||||||
|
|
||||||
.folderList-item-right-confirmButton
|
|
||||||
colorDarkPrimaryButton()
|
|
||||||
|
|
||||||
.folderList-item-right-dangerButton
|
|
||||||
colorDarkDangerButton()
|
|
||||||
|
|||||||
Reference in New Issue
Block a user