diff --git a/website/src/Users/UserForm.js b/website/src/Users/UserForm.js index 0c07931..bc2f39b 100644 --- a/website/src/Users/UserForm.js +++ b/website/src/Users/UserForm.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import autobind from 'autobind-decorator' import { regExpPattern } from 'regexp-pattern' import { api } from 'src/API' -import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui' +import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon, DropdownList } from 'ui' import { FormBinder } from 'react-form-binder' import { sizeInfo } from 'ui/style' @@ -144,6 +144,13 @@ export class UserForm extends React.Component { + + ( + + Team Name + + )} /> + diff --git a/website/src/Users/Users.js b/website/src/Users/Users.js index 878f787..b25b925 100644 --- a/website/src/Users/Users.js +++ b/website/src/Users/Users.js @@ -32,7 +32,7 @@ export class Users extends Component { api.listUsers().then((list) => { list.items.sort((userA, userB) => (userA.lastName.localeCompare(userB.lastName))) - this.setState({ users: list.items }) + this.setState({ users: list.items, selectedUser: list.items[0] }) // TODO: <- Remove }).catch((error) => { this.setState({ messageModal: { @@ -276,10 +276,10 @@ export class Users extends Component { { this.state.selectedUser - ? - : + ? + : } diff --git a/website/src/ui/Box.js b/website/src/ui/Box.js index 333043b..e1ad87b 100644 --- a/website/src/ui/Box.js +++ b/website/src/ui/Box.js @@ -10,7 +10,11 @@ export class Box extends Component { borderRight: PropTypes.object, borderLeft: PropTypes.object, border: PropTypes.object, - radius: PropTypes.number, + radius: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), + radiusTopLeft: PropTypes.number, + radiusTopRight: PropTypes.number, + radiusBottomLeft: PropTypes.number, + radiusBottomRight: PropTypes.number, background: PropTypes.string, style: PropTypes.object, children: PropTypes.node, @@ -20,8 +24,9 @@ export class Box extends Component { let { children, background, borderTop, borderBottom, borderLeft, borderRight, - border, radius, style } = this.props - const flatten = (border) => { + border, style, radius, + radiusTopLeft, radiusTopRight, radiusBottomLeft, radiusBottomRight } = this.props + const stringify = (border) => { if (!border) { return null } @@ -34,19 +39,48 @@ export class Box extends Component { } if (border) { - borderTop = borderBottom = borderLeft = borderRight = flatten(border) + borderTop = borderBottom = borderLeft = borderRight = stringify(border) } else { - borderTop = flatten(borderTop) - borderBottom = flatten(borderBottom) - borderLeft = flatten(borderLeft) - borderRight = flatten(borderRight) + borderTop = stringify(borderTop) + borderBottom = stringify(borderBottom) + borderLeft = stringify(borderLeft) + borderRight = stringify(borderRight) + } + + let borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius + + if (radius) { + if (typeof radius === 'number') { + borderTopLeftRadius = borderTopRightRadius = borderBottomLeftRadius = borderBottomRightRadius = radius + } else { + borderTopLeftRadius = radius.topLeft + borderTopRightRadius = radius.topRight + borderBottomLeftRadius = radius.bottomLeft + borderBottomRightRadius = radius.bottomRight + } + } else { + borderTopLeftRadius = radiusTopLeft + borderTopRightRadius = radiusTopRight + borderBottomLeftRadius = radiusBottomLeft + borderBottomRightRadius = radiusBottomRight } return (
{children} diff --git a/website/src/ui/DropdownList.js b/website/src/ui/DropdownList.js new file mode 100644 index 0000000..09665fc --- /dev/null +++ b/website/src/ui/DropdownList.js @@ -0,0 +1,156 @@ +import Radium from 'radium' +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import { Box, Icon } from '.' +import { sizeInfo, colorInfo, fontInfo } from './style' +import downArrowImage from './images/down-arrow.svg' +import upArrowImage from './images/up-arrow.svg' +import autobind from 'autobind-decorator' + +@Radium +export class DropdownList extends Component { + static propTypes = { + data: PropTypes.array, + render: PropTypes.func.isRequired, + } + + constructor(props) { + super(props) + this.state = { + open: false, + } + } + + @autobind + handleClick(e) { + this.setState({ open: !this.state.open }) + } + + render() { + const { data, render } = this.props + const { open } = this.state + const dropDownIconSize = 20 + const dropdownIconMargin = 8 + const dropdownBackground = 'white' + const selectedItem = data ? data[0] : + const border = { width: sizeInfo.listBorderWidth, color: colorInfo.listBorder } + + let dropdown = null + + if (open) { + dropdown = ( + + ) + } + + return ( +
+ +
+ {render(selectedItem)} +
+
+ +
+ + {dropdown} +
+ ) + } +} + +DropdownList.Item = Radium(class ListItem extends Component { + static propTypes = { + children: PropTypes.node, + active: PropTypes.bool, + onClick: PropTypes.func, + } + + render() { + const { children, active, onClick } = this.props + + return ( +
+ {children} +
+ ) + } +}) + +DropdownList.Icon = Radium(class ListIcon extends Component { + static propTypes = { + name: PropTypes.string, + size: PropTypes.number, + } + + render() { + const { size, name } = this.props + let source = Icon.svgs[name] || Icon.svgs['placeholder'] + + return ( + + ) + } +}) + +DropdownList.Text = Radium(class ListText extends Component { + static propTypes = { + children: PropTypes.node, + } + + render() { + const { children } = this.props + + return ( + {children} + ) + } +}) diff --git a/website/src/ui/images/down-arrow.svg b/website/src/ui/images/down-arrow.svg new file mode 100644 index 0000000..05c1ffc --- /dev/null +++ b/website/src/ui/images/down-arrow.svg @@ -0,0 +1,14 @@ + + + + down-arrow + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/website/src/ui/images/up-arrow.svg b/website/src/ui/images/up-arrow.svg new file mode 100644 index 0000000..8ecdc9b --- /dev/null +++ b/website/src/ui/images/up-arrow.svg @@ -0,0 +1,14 @@ + + + + up-arrow + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/website/src/ui/index.js b/website/src/ui/index.js index 6efe532..0931ce9 100644 --- a/website/src/ui/index.js +++ b/website/src/ui/index.js @@ -11,6 +11,7 @@ export { Text } from './Text' export { Link } from './Link' export { Icon } from './Icon' export { List } from './List' +export { DropdownList } from './DropdownList' export { Modal } from './Modal' export { Dimmer } from './Dimmer' export { Loader } from './Loader'