You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/BackgroundSelect.js

148 lines
4.4 KiB
JavaScript

import React from 'react'
import ImagePicker from './ImagePicker'
import ColorPicker from './ColorPicker'
import Button from './Button'
import Popout, { managePopout } from './Popout'
import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
import { capitalize, stringifyRGBA } from '../lib/util'
function validateColor(str) {
if (/#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || /\w+/gi.test(str)) {
return str
}
}
class BackgroundSelect extends React.PureComponent {
selectTab = name => {
if (this.props.mode !== name) {
this.props.onChange({ backgroundMode: name })
}
}
handlePickColor = ({ rgb }) => this.props.onChange({ backgroundColor: stringifyRGBA(rgb) })
render() {
const { color, mode, image, onChange, isVisible, toggleVisibility, carbonRef } = this.props
const background = validateColor(color) ? color : DEFAULT_BG_COLOR
const aspectRatio = carbonRef ? carbonRef.clientWidth / carbonRef.clientHeight : 1
return (
<div className="bg-select-container">
<Button
title="Background Menu"
border
center
selected={isVisible}
className={`bg-color-container bg-select-display ${isVisible ? 'is-visible' : ''}`}
onClick={toggleVisibility}
background="white"
hoverBackground="white"
data-cy="display"
>
<div className="bg-color-alpha" />
<div className="bg-color" />
</Button>
<Popout
id="bg-select-pickers"
pointerLeft="15px"
hidden={!isVisible}
style={{ width: '222px' }}
>
<div className="picker-tabs">
{['color', 'image'].map(tab => (
<div
role="button"
tabIndex={0}
key={tab}
className={`picker-tab ${mode === tab ? 'active' : ''}`}
onClick={this.selectTab.bind(null, tab)}
>
{capitalize(tab)}
</div>
))}
</div>
<div className="picker-tabs-contents">
<div hidden={mode !== 'color'}>
<ColorPicker color={color} onChange={this.handlePickColor} />
</div>
<div hidden={mode !== 'image'}>
<ImagePicker onChange={onChange} imageDataURL={image} aspectRatio={aspectRatio} />
</div>
</div>
</Popout>
<style jsx>
{`
.bg-select-container {
height: 100%;
}
.bg-select-container :global(.bg-select-display) {
position: relative;
overflow: hidden;
height: 100%;
width: 40px;
border: 1px solid ${COLORS.SECONDARY};
}
.bg-select-container :global(.bg-select-display.is-visible),
.bg-select-container :global(.bg-select-display:focus) {
border-width: 2px;
}
.bg-color {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
${mode === 'image'
? `background: url(${image});
background-size: cover;
background-repeat: no-repeat;`
: `background: ${background};`};
}
.bg-color-alpha {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
}
.picker-tabs {
display: flex;
6 years ago
border-bottom: 2px solid ${COLORS.SECONDARY};
}
.picker-tab {
user-select: none;
cursor: pointer;
background: ${COLORS.DARK_GRAY};
width: 50%;
text-align: center;
padding: 8px 0;
border-right: 1px solid ${COLORS.SECONDARY};
}
.picker-tab:last-child {
border-right: none;
}
.picker-tab.active {
background: none;
}
`}
</style>
</div>
)
}
}
export default managePopout(BackgroundSelect)