roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-17 10:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: prettier on UI

Browse source
This commit is contained in:
Katie Thornhill 2019-11-19 23:04:09 -05:00
parent 912b40c383
commit 4b75eaa0ab
No known key found for this signature in database
GPG key ID: F76EDC6541A99644
49 changed files with 1703 additions and 1267 deletions
Download patch file Download diff file Expand all files Collapse all files

26
UI/src/components/role/demo.js
View file

@ -1,19 +1,25 @@
import React, { Component } from 'react'
import { Map } from 'immutable'
import React, { Component } from 'react';
import { Map } from 'immutable';
import Role from './index'
import Role from './index';
export default class DemoRole extends Component {
state = {
isSelected: false
}
isSelected: false,
};
handleToggle = () => {
this.setState({ isSelected: !this.state.isSelected })
}
this.setState({ isSelected: !this.state.isSelected });
};
render () {
return <Role selected={this.state.isSelected} role={Map({ name: this.props.name, color: this.props.color })} onToggle={this.handleToggle} type='button' />
render() {
return (
<Role
selected={this.state.isSelected}
role={Map({ name: this.props.name, color: this.props.color })}
onToggle={this.handleToggle}
type="button"
/>
);
}
}

34
UI/src/components/role/draggable.js
View file

@ -1,7 +1,7 @@
import React, { Component } from 'react'
import { DragSource } from 'react-dnd'
import React, { Component } from 'react';
import { DragSource } from 'react-dnd';
import Role from './index'
import Role from './index';
// @DragSource(Symbol.for('dnd: role'), {
// beginDrag ({ role, categoryId }) {
@ -12,21 +12,21 @@ import Role from './index'
// connectDragSource: connect.dragSource(),
// isDragging: monitor.isDragging()
// }))
export default
@DragSource(
Symbol.for('dnd: role'),
{
beginDrag ({ role, categoryId }) {
return { role, category: categoryId }
}
export default
@DragSource(
Symbol.for('dnd: role'),
{
beginDrag({ role, categoryId }) {
return { role, category: categoryId };
},
(connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
})
)
},
(connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
})
)
class DraggableRole extends Component {
render () {
return <Role {...this.props} type='drag' />
render() {
return <Role {...this.props} type="drag" />;
}
}

75
UI/src/components/role/index.js
View file

@ -1,9 +1,9 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Color from 'color'
import './Role.sass'
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Color from 'color';
import './Role.sass';
const whiteColor = Color('#efefef')
const whiteColor = Color('#efefef');
class Role extends Component {
static propTypes = {
@ -11,50 +11,55 @@ class Role extends Component {
onToggle: PropTypes.func,
type: PropTypes.string,
selected: PropTypes.bool,
disabled: PropTypes.bool
}
disabled: PropTypes.bool,
};
render () {
let { role, selected, disabled, type, isDragging } = this.props
type = type || 'button'
render() {
let { role, selected, disabled, type, isDragging } = this.props;
type = type || 'button';
// console.log(this.props)
let color = Color(role.get('color'))
let color = Color(role.get('color'));
if (color.rgbNumber() === 0) {
color = whiteColor
color = whiteColor;
}
const c = color
let hc = color.lighten(0.1)
const c = color;
let hc = color.lighten(0.1);
const out = <div
onClick={() => {
if (!disabled && this.props.onToggle != null) {
this.props.onToggle(!selected, selected) }
}
}
{...((disabled) ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." } : {})}
className={`role font-sans-serif ${(disabled) ? 'disabled' : ''} ${(isDragging) ? 'is-dragging' : ''} role__${type}`}
title={role.get('name')}
style={{
'--role-color-hex': c.string(),
'--role-color-hover': hc.string(),
'--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)`
}}>
<div className={`role__option ${(selected) ? 'selected' : ''}`}/>
<div className='role__name'>
{role.get('name')}
const out = (
<div
onClick={() => {
if (!disabled && this.props.onToggle != null) {
this.props.onToggle(!selected, selected);
}
}}
{...(disabled
? { 'uk-tooltip': '', title: "I don't have permissions to grant this." }
: {})}
className={`role font-sans-serif ${disabled ? 'disabled' : ''} ${
isDragging ? 'is-dragging' : ''
} role__${type}`}
title={role.get('name')}
style={{
'--role-color-hex': c.string(),
'--role-color-hover': hc.string(),
'--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)`,
}}
>
<div className={`role__option ${selected ? 'selected' : ''}`} />
<div className="role__name">{role.get('name')}</div>
</div>
</div>
);
if (type === 'drag' && this.props.connectDragSource != null) {
return this.props.connectDragSource(out)
return this.props.connectDragSource(out);
}
return out
return out;
}
}
export default Role
export default Role;