cfb0cce9b8
* Wip refactoring view * Post merge conflicts * Fix review * Add create view capability * Fix create object missing view * Fix tests
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { forwardRef, InputHTMLAttributes } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { RGBA } from '@/ui/theme/constants/Rgba';
|
|
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
|
|
|
|
const StyledInput = styled.input`
|
|
${TEXT_INPUT_STYLE}
|
|
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
box-sizing: border-box;
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
height: 32px;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
border-color: ${({ theme }) => theme.color.blue};
|
|
box-shadow: 0px 0px 0px 3px ${({ theme }) => RGBA(theme.color.blue, 0.1)};
|
|
}
|
|
`;
|
|
|
|
const StyledInputContainer = styled.div`
|
|
box-sizing: border-box;
|
|
padding: ${({ theme }) => theme.spacing(1)};
|
|
width: 100%;
|
|
`;
|
|
|
|
export const DropdownMenuInput = forwardRef<
|
|
HTMLInputElement,
|
|
InputHTMLAttributes<HTMLInputElement>
|
|
>(({ autoFocus, defaultValue, placeholder, onChange }, ref) => {
|
|
return (
|
|
<StyledInputContainer>
|
|
<StyledInput
|
|
autoFocus={autoFocus}
|
|
defaultValue={defaultValue}
|
|
placeholder={placeholder}
|
|
onChange={onChange}
|
|
ref={ref}
|
|
/>
|
|
</StyledInputContainer>
|
|
);
|
|
});
|