feat(send-view-additional-options): add bgColor optional prop
This commit is contained in:
parent
eea3510867
commit
dfb037a1d2
|
@ -3,12 +3,14 @@ import React from 'react';
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import theme from '../theme';
|
||||||
|
|
||||||
const getDefaultStyles = t => styled[t]`
|
const getDefaultStyles = t => styled[t]`
|
||||||
border-radius: ${// $FlowFixMe
|
border-radius: ${// $FlowFixMe
|
||||||
props => props.theme.boxBorderRadius};
|
props => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${// $FlowFixMe
|
background-color: ${// $FlowFixMe
|
||||||
props => props.theme.colors.inputBackground};
|
props => props.bgColor || props.theme.colors.inputBackground};
|
||||||
color: ${// $FlowFixMe
|
color: ${// $FlowFixMe
|
||||||
props => props.theme.colors.text};
|
props => props.theme.colors.text};
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
@ -34,15 +36,26 @@ type Props = {
|
||||||
disabled?: boolean,
|
disabled?: boolean,
|
||||||
type?: string,
|
type?: string,
|
||||||
step?: number,
|
step?: number,
|
||||||
|
bgColor?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
|
export const InputComponent = ({
|
||||||
|
inputType, onChange, bgColor, ...props
|
||||||
|
}: Props) => {
|
||||||
const inputTypes = {
|
const inputTypes = {
|
||||||
input: () => (
|
input: () => (
|
||||||
<Input onChange={evt => onChange(evt.target.value)} {...props} />
|
<Input
|
||||||
|
onChange={evt => onChange(evt.target.value)}
|
||||||
|
bgColor={bgColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
textarea: () => (
|
textarea: () => (
|
||||||
<Textarea onChange={evt => onChange(evt.target.value)} {...props} />
|
<Textarea
|
||||||
|
onChange={evt => onChange(evt.target.value)}
|
||||||
|
bgColor={bgColor}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -58,4 +71,5 @@ InputComponent.defaultProps = {
|
||||||
rows: 4,
|
rows: 4,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
type: 'text',
|
type: 'text',
|
||||||
|
bgColor: theme.colors.inputBackground,
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,13 +6,16 @@ import { TextComponent } from './text';
|
||||||
import ChevronUp from '../assets/images/chevron-up.svg';
|
import ChevronUp from '../assets/images/chevron-up.svg';
|
||||||
import ChevronDown from '../assets/images/chevron-down.svg';
|
import ChevronDown from '../assets/images/chevron-down.svg';
|
||||||
|
|
||||||
|
import theme from '../theme';
|
||||||
|
|
||||||
|
/* eslint-disable max-len */
|
||||||
const SelectWrapper = styled.div`
|
const SelectWrapper = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${props => props.theme.colors.inputBackground};
|
background-color: ${props => props.bgColor || props.theme.colors.inputBackground};
|
||||||
color: ${props => props.theme.colors.text};
|
color: ${props => props.theme.colors.text};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -25,6 +28,7 @@ const SelectWrapper = styled.div`
|
||||||
props.placement
|
props.placement
|
||||||
}-right-radius: 0;`}
|
}-right-radius: 0;`}
|
||||||
`;
|
`;
|
||||||
|
/* eslint-enable max-len */
|
||||||
|
|
||||||
const ValueWrapper = styled.div`
|
const ValueWrapper = styled.div`
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
@ -51,11 +55,8 @@ const SelectMenuButton = styled.button`
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid ${props => props.theme.colors.text};
|
border: 1px solid ${props => (props.isOpen ? props.theme.colors.primary : '#29292D')};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
box-shadow: ${props => `0px 0px 10px 0px ${
|
|
||||||
props.theme.colors.selectButtonShadow
|
|
||||||
}, 0px 0px 10px 0px ${props.theme.colors.selectButtonShadow} inset`};
|
|
||||||
`;
|
`;
|
||||||
/* eslint-enable max-len */
|
/* eslint-enable max-len */
|
||||||
|
|
||||||
|
@ -73,11 +74,12 @@ const OptionsWrapper = styled.div`
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
/* eslint-disable max-len */
|
||||||
const Option = styled.button`
|
const Option = styled.button`
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background-color: ${props => props.theme.colors.inputBackground};
|
background-color: ${props => props.bgColor || props.theme.colors.inputBackground};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
@ -86,6 +88,7 @@ const Option = styled.button`
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${props => props.theme.colors.background};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
/* eslint-enable max-len */
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
value: string,
|
value: string,
|
||||||
|
@ -93,6 +96,7 @@ type Props = {
|
||||||
placeholder?: string,
|
placeholder?: string,
|
||||||
onChange: string => void,
|
onChange: string => void,
|
||||||
placement?: 'top' | 'bottom',
|
placement?: 'top' | 'bottom',
|
||||||
|
bgColor?: string,
|
||||||
};
|
};
|
||||||
type State = {
|
type State = {
|
||||||
isOpen: boolean,
|
isOpen: boolean,
|
||||||
|
@ -106,6 +110,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
placeholder: '',
|
placeholder: '',
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
|
bgColor: theme.colors.inputBackground,
|
||||||
};
|
};
|
||||||
|
|
||||||
onSelect = (value: string) => {
|
onSelect = (value: string) => {
|
||||||
|
@ -139,7 +144,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
value, options, placeholder, placement,
|
value, options, placeholder, placement, bgColor,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const { isOpen } = this.state;
|
const { isOpen } = this.state;
|
||||||
|
|
||||||
|
@ -148,12 +153,13 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
placement={placement}
|
placement={placement}
|
||||||
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
|
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
|
||||||
|
bgColor={bgColor}
|
||||||
>
|
>
|
||||||
<ValueWrapper hasValue={Boolean(value)}>
|
<ValueWrapper hasValue={Boolean(value)}>
|
||||||
{this.getSelectedLabel(value) || placeholder}
|
{this.getSelectedLabel(value) || placeholder}
|
||||||
</ValueWrapper>
|
</ValueWrapper>
|
||||||
<SelectMenuButtonWrapper>
|
<SelectMenuButtonWrapper>
|
||||||
<SelectMenuButton>
|
<SelectMenuButton isOpen={isOpen}>
|
||||||
<Icon src={this.getSelectIcon()} />
|
<Icon src={this.getSelectIcon()} />
|
||||||
</SelectMenuButton>
|
</SelectMenuButton>
|
||||||
</SelectMenuButtonWrapper>
|
</SelectMenuButtonWrapper>
|
||||||
|
@ -167,6 +173,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
<Option
|
<Option
|
||||||
key={label + optionValue}
|
key={label + optionValue}
|
||||||
onClick={() => this.onSelect(optionValue)}
|
onClick={() => this.onSelect(optionValue)}
|
||||||
|
bgColor={bgColor}
|
||||||
>
|
>
|
||||||
<TextComponent value={label} />
|
<TextComponent value={label} />
|
||||||
</Option>
|
</Option>
|
||||||
|
|
Loading…
Reference in New Issue