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