Commit db371532 authored by chris's avatar chris

add classnanmes to package.json and make borders optional

parent 968a2649
......@@ -30,6 +30,7 @@
"redux": "3.6.0"
},
"devDependencies": {
"classnames": "^2.2.5",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
......
import { includes } from 'lodash'
import React from 'react'
import classNames from 'classnames'
import styles from './AlignmentBox.local.scss'
// class AlignmentBox extends React.Component {
// constructor (props) {
// super(props)
// this.onClick = this.onClick.bind(this)
// }
//
// onClick () {
// const { chapter, position, update } = this.props
//
// if (!includes(['left', 'right'], position)) return
//
// const patch = {
// alignment: chapter.alignment,
// id: chapter.id
// }
//
// patch.alignment[position] = !chapter.alignment[position]
//
// update(patch)
// }
//
// render () {
// const { chapter, position } = this.props
// const selected = chapter.alignment[position]
//
// // TODO -- fix classes here
// const outerClass = styles.leftRightBox + ' ' + styles[position + 'Box']
// const innerClass = selected ? styles.boxActive : styles.boxInactiveHover
//
// return (
// <li onClick={this.onClick}>
// <div className={outerClass}>
// <div className={innerClass} />
// </div>
// </li>
// )
// }
// }
// const innerClass = selected ? styles.boxActive : styles.boxInactiveHover
// const borderLess = { top: true, right: true, bottom: true, left: true }
const AlignmentBox = ({ chapter, position, update }) => {
const borderLess = { top: false, right: true, bottom: false, left: false }
const AlignmentBox = ({ active, id, udpate }) => (
<div className={styles.alignmentBox + ' ' + styles.active}></div>
)
const boxStyles = classNames(
styles.alignmentBox,
{
[styles.borderTop]: borderLess.top,
[styles.borderRight]: borderLess.right,
[styles.borderBottom]: borderLess.bottom,
[styles.borderLeft]: borderLess.left
})
return (
<div
role='presentation'
className={boxStyles}
/>
)
}
AlignmentBox.defaultProps = {
active: false,
......
......@@ -17,3 +17,19 @@ $white-rgba: rgba(255, 255, 255, 1);
background-color: $main-grey;
}
}
.borderTop {
border-top: 0;
}
.borderRight {
border-right: 0;
}
.borderBottom {
border-bottom: 0;
}
.borderLeft {
border-left: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment