arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 01:08:27 +00:00
Code Issues Releases Wiki Activity

Add styles to textarea

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-09-04 15:54:29 +02:00
parent cf9cff3170
commit 3f7cf6ca27
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Textarea/index.js
View File

@ -2,23 +2,34 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import colors from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
const Wrapper = styled.div`
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
`;
const Label = styled.span`
padding-bottom: 4px;
color: ${colors.TEXT_SECONDARY};
`;
const disabledColor = colors.TEXT_PRIMARY;
const TextArea = styled.textarea`
width: 100%;
padding: 5px 10px;
padding: 6px 12px;
box-sizing: border-box;
min-height: 25px;
border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.TEXT_PRIMARY}`)};
border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.DIVIDER}`)};
border-radius: 2px;
resize: none;
outline: none;
background: transparent;
font-family: ${FONT_FAMILY.MONOSPACE};
color: ${colors.TEXT_PRIMARY};
background: ${colors.WHITE};
font-weight: ${FONT_WEIGHT.BASE};
font-size: ${FONT_SIZE.BASE};
white-space: pre-wrap; /* css-3 */
@ -73,34 +84,33 @@ const TextArea = styled.textarea`
opacity: 1;
}
}
&:hover:not(:disabled),
&:focus:not(:disabled) {
border: 1px solid ${colors.TEXT_SECONDARY};
}
`;
const Textarea = ({
className,
placeholder = '',
value = '',
value,
customStyle = {},
onFocus,
onBlur,
disabled,
isDisabled,
onChange,
isError,
label,
}) => (
<Wrapper>
{label && (
<Label>{label}</Label>
)}
<TextArea
className={className}
disabled={disabled}
disabled={isDisabled}
style={customStyle}
onFocus={onFocus}
onBlur={onBlur}
value={value}
placeholder={placeholder}
onChange={e => onChange(e.target.value)}
onChange={onChange}
isError={isError}
/>
</Wrapper>
@ -115,7 +125,8 @@ Textarea.propTypes = {
customStyle: PropTypes.string,
placeholder: PropTypes.string,
value: PropTypes.string,
disabled: PropTypes.bool,
isDisabled: PropTypes.bool,
label: PropTypes.string,
};
export default Textarea;