Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 3x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 3x 3x | import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' const Wrapper = styled.input.attrs({ name: (props) => props.name, type: (props) => props.type, })` display: block; width: ${(props) => props.width}; height: 52px; padding: 0 20px; box-sizing: border-box; font-family: ${(props) => props.theme['fontPrimary']}; font-size: 18px; color: ${(props) => props.theme['inputColor']}; border-width: 1px; border-color: ${(props) => props.theme['inputBorderColor']}; border-style: solid; border-radius: 0.5rem; background-color: ${(props) => props.theme['inputBackgroundColor']}; background-image: none; outline-width: 0; user-select: text; &:disabled { color: ${(props) => props.theme['inputColor']}; background: ${(props) => props.theme['inputBackgroundColor']}; cursor: not-allowed; } ` const Input = (props) => <Wrapper {...{ ...props, ...props.input }} /> Input.propTypes = { disabled: PropTypes.bool, input: PropTypes.object, name: PropTypes.string, type: PropTypes.oneOf(['text', 'date', 'number', 'password', 'search']), width: PropTypes.string, } Input.defaultProps = { disabled: false, type: 'text', width: '100%', } export default Input |