Commit 787c2aa7 authored by chris's avatar chris

aligment box finished

parent 94e95ca3
import { includes } from 'lodash'
import React from 'react'
import classNames from 'classnames'
import styles from './AlignmentBox.local.scss'
import PropTypes from 'prop-types'
import React from 'react'
const AlignmentBox = ({ chapter, position, update }) => {
const borderLess = { top: false, right: true, bottom: false, left: false }
import classes from './AlignmentBox.local.scss'
const boxStyles = classNames(
styles.alignmentBox,
const AlignmentBox = ({ active, id, noBorder, onClick }) => {
const styles = classNames(
classes.alignmentBox,
{
[styles.borderTop]: borderLess.top,
[styles.borderRight]: borderLess.right,
[styles.borderBottom]: borderLess.bottom,
[styles.borderLeft]: borderLess.left
})
[classes.active]: active,
[classes.borderTop]: noBorder.top,
[classes.borderRight]: noBorder.right,
[classes.borderBottom]: noBorder.bottom,
[classes.borderLeft]: noBorder.left
}
)
return (
<div
className={styles}
id={id}
onClick={onClick}
role='presentation'
className={boxStyles}
/>
)
}
AlignmentBox.propTypes = {
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
noBorder: PropTypes.shape({
top: PropTypes.bool,
bottom: PropTypes.bool,
right: PropTypes.bool,
left: PropTypes.bool
}),
onClick: PropTypes.func
}
AlignmentBox.defaultProps = {
active: false,
id: '',
update: () => null
noBorder: {
top: false,
bottom: false,
right: false,
left: false
},
onClick: () => null
}
export default AlignmentBox
Something
Inactive
```js
const chapter = {
alignment: {
'left': false,
'right': false
}
};
const position = 'left';
const update = () => { return null };
const active = false;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBox
active={active}
noBorder={noBorder}
id = {id}
onClick={onClick}
/>
```
Active
```js
const active = true;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBox
active={active}
noBorder={noBorder}
id = {id}
onClick={onClick}
/>
```
Active with no right border
```js
const active = true;
const id = 'eyedee';
const noBorder = { right: true };
const onClick = () => { return null };
<AlignmentBox
chapter={chapter}
position={position}
update={update}
active={active}
noBorder={noBorder}
id = {id}
onClick={onClick}
/>
```
\ No newline at end of file
```
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