Add button dropdown

main
Jake Dexheimer 7 years ago
parent 4e15b66001
commit e8bb4ac0e0

@ -41,7 +41,11 @@ class Dropdown extends React.Component {
background: ${COLORS.BLACK};
user-select: none;
padding: 8px 16px;
border-bottom: 1px solid ${COLORS.SECONDARY};
border-bottom: 1px solid ${this.props.color || COLORS.SECONDARY};
}
.dropdown-list-item span {
color: ${this.props.color || '#fff'};
}
.dropdown-list-item:hover {
@ -58,8 +62,11 @@ class Dropdown extends React.Component {
}
render() {
const color = this.props.color || COLORS.SECONDARY
// find longest list value in number of characters
const MIN_WIDTH = this.props.list.reduce(
const list = this.props.button ? [...this.props.list, this.props.selected] : this.props.list
const MIN_WIDTH = list.reduce(
(max, { name }) => (name && name.length > max ? name.length : max),
0
)
@ -67,13 +74,13 @@ class Dropdown extends React.Component {
return (
<div
className="dropdown-container"
style={{ minWidth: MIN_WIDTH * 14 }}
style={{ minWidth: MIN_WIDTH * 10 + 32 }}
onClick={this.toggle}
>
<div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
<span style={{ minWidth: '4rem' }}>{this.props.selected.name}</span>
<div className="arrow-down">
<ArrowDown />
<ArrowDown fill={color} />
</div>
</div>
<div className="dropdown-list">{this.renderListItems()}</div>
@ -98,7 +105,7 @@ class Dropdown extends React.Component {
.dropdown-display {
height: 100%;
border: 1px solid ${COLORS.SECONDARY};
border: 1px solid ${color};
border-radius: 3px;
user-select: none;
padding: 8px 16px;
@ -109,6 +116,10 @@ class Dropdown extends React.Component {
z-index: 1;
}
.dropdown-display span {
color: ${color};
}
.dropdown-display:hover {
background: ${COLORS.HOVER};
}
@ -120,7 +131,7 @@ class Dropdown extends React.Component {
.dropdown-list {
display: none;
margin-top: -1px;
border: 1px solid ${COLORS.SECONDARY};
border: 1px solid ${color};
border-radius: 0px 0px 3px 3px;
max-height: 350px;
overflow-y: scroll;

@ -1,9 +1,9 @@
import React from 'react'
export default () => (
export default ({ fill }) => (
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
<path
fill="#fff"
fill={fill}
fillRule="evenodd"
d="M93.7890633,17.6396882 L97.4926052,14.0851393 C97.6061243,13.9716202 97.7196417,13.9716202 97.8331608,14.0851393 L98.4929872,14.723681 C98.6065063,14.8372001 98.6065063,14.9507175 98.4929872,15.0642366 L93.9593411,19.4063203 C93.9167714,19.4488899 93.8600127,19.4701744 93.7890633,19.4701744 C93.7181138,19.4701744 93.6613552,19.4488899 93.6187855,19.4063203 L89.0851393,15.0642366 C88.9716202,14.9507175 88.9716202,14.8372001 89.0851393,14.723681 L89.7449658,14.0851393 C89.8584849,13.9716202 89.9720022,13.9716202 90.0855213,14.0851393 L93.7890633,17.6396882 Z"
transform="translate(-89 -14)"

@ -76,7 +76,6 @@ class Editor extends React.Component {
paddingHorizontal: '32px',
uploading: false,
code: props.content,
saveAs: 'png',
_initialState: this.props.initialState
},
this.props.initialState
@ -136,7 +135,7 @@ class Editor extends React.Component {
save({ format } = { format: 'png' }) {
this.getCarbonImage({ format }).then(dataUrl => {
const link = document.createElement('a')
link.download = 'carbon.' + format
link.download = `carbon.${format}`
link.href = dataUrl
document.body.appendChild(link)
link.click()
@ -191,16 +190,12 @@ class Editor extends React.Component {
color="#57b5f9"
style={{ marginRight: '8px' }}
/>
<Button
onClick={e => this.save({ format: this.state.saveAs })}
title="Save Image"
color="#c198fb"
style={{ marginRight: '8px' }}
/>
<Dropdown
selected={{ id: this.state.saveAs, name: `(${this.state.saveAs.toUpperCase()})` }}
button
color="#c198fb"
selected={{ id: 'SAVE_IMAGE', name: 'Save Image' }}
list={['png', 'svg'].map(id => ({ id, name: id.toUpperCase() }))}
onChange={saveAs => this.setState({ saveAs: saveAs.id })}
onChange={saveAs => this.save({ format: saveAs.id })}
/>
</div>
</Toolbar>

Loading…
Cancel
Save