|
- import {ChangeEventHandler, FC} from 'react';
- import styled from 'styled-components'
-
- const Base = styled('div')({
- height: '3rem',
- 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',
- opacity: 0.5,
- },
- })
-
- const ClickArea = styled('label')({
- position: 'relative',
- height: '100%',
- })
-
- const Label = styled('span')({
- position: 'absolute',
- left: -999999,
- })
-
- const Input = styled('input')({
- display: 'block',
- width: '100%',
- height: '100%',
- margin: 0,
- padding: '0 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[],
- onChange?: ChangeEventHandler<HTMLInputElement>,
- disabled?: boolean,
- }
-
- const NumericInput: 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}
- type="number"
- />
- </ClickArea>
- </Base>
- )
- }
-
- export default NumericInput
|