51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { textInputStyle } from '@/ui/theme/constants/effects';
|
|
import { overlayBackground } from '@/ui/theme/constants/effects';
|
|
|
|
const StyledInplaceInputTextInput = styled.input`
|
|
margin: 0;
|
|
width: 100%;
|
|
${textInputStyle}
|
|
`;
|
|
|
|
const StyledTextInputContainer = styled.div`
|
|
align-items: center;
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
display: flex;
|
|
margin-left: -1px;
|
|
min-height: 32px;
|
|
width: inherit;
|
|
|
|
${overlayBackground}
|
|
|
|
z-index: 10;
|
|
`;
|
|
|
|
export type TextInputEditProps = {
|
|
placeholder?: string;
|
|
value?: string;
|
|
onChange?: (newValue: string) => void;
|
|
autoFocus?: boolean;
|
|
};
|
|
|
|
export function TextInputEdit({
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
autoFocus,
|
|
}: TextInputEditProps) {
|
|
return (
|
|
<StyledTextInputContainer>
|
|
<StyledInplaceInputTextInput
|
|
autoComplete="off"
|
|
autoFocus={autoFocus}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(e) => onChange?.(e.target.value)}
|
|
/>
|
|
</StyledTextInputContainer>
|
|
);
|
|
}
|