|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- import {FC} from 'react'
- import styled from 'styled-components'
-
- const Base = styled('div')({
- borderRadius: '0.25rem',
- overflow: 'hidden',
- position: 'relative',
- backgroundColor: 'var(--color-bg, white)',
- '::before': {
- content: "''",
- borderWidth: 1,
- borderStyle: 'solid',
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- borderRadius: 'inherit',
- boxSizing: 'border-box',
- },
- })
-
- const ClickArea = styled('label')({
- position: 'relative',
- height: '100%',
- })
-
- const Label = styled('span')({
- position: 'absolute',
- left: -999999,
- })
-
- const Input = styled('textarea')({
- display: 'block',
- width: '100%',
- minHeight: '3rem',
- margin: 0,
- padding: '1rem 1rem',
- boxSizing: 'border-box',
- font: 'inherit',
- border: 0,
- backgroundColor: 'transparent',
- color: 'inherit',
- outline: 0,
- })
-
- type Props = {
- label: string,
- name: string,
- className?: string,
- block?: boolean,
- placeholder?: string,
- defaultValue?: string | number | readonly string[],
- }
-
- const TextArea: FC<Props> = ({
- label,
- className,
- block,
- ...etcProps
- }) => {
- return (
- <Base
- className={className}
- style={{
- display: block ? 'block' : 'inline-block',
- width: block ? '100%' : undefined,
- }}
- >
- <ClickArea>
- <Label>
- {label}
- </Label>
- <Input
- {...etcProps}
- style={{
- resize: block ? 'vertical' : undefined,
- }}
- />
- </ClickArea>
- </Base>
- )
- }
-
- export default TextArea
|