mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 23:37:21 +03:00
replace text input by texterarea (#3473)
* #3472 replace text input by texterarea * background color change in dark mode * box shadow and hide overflow * added tooltip in overflow text * resolved comment on #3473 * resolved comments in #3473
This commit is contained in:
parent
ceddd211cf
commit
74a54da403
@ -1,7 +1,7 @@
|
||||
import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
|
||||
import { TextInput } from '@/ui/field/input/components/TextInput';
|
||||
import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
|
||||
import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
|
||||
|
||||
import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
|
||||
import { usePersistField } from '../../../hooks/usePersistField';
|
||||
import { useTextField } from '../../hooks/useTextField';
|
||||
|
||||
@ -55,8 +55,8 @@ export const TextFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<FieldInputOverlay>
|
||||
<TextInput
|
||||
<FieldTextAreaOverlay>
|
||||
<TextAreaInput
|
||||
placeholder={fieldDefinition.metadata.placeHolder}
|
||||
autoFocus
|
||||
value={initialValue}
|
||||
@ -68,6 +68,6 @@ export const TextFieldInput = ({
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FieldInputOverlay>
|
||||
</FieldTextAreaOverlay>
|
||||
);
|
||||
};
|
||||
|
@ -1,3 +1,5 @@
|
||||
import { OverflowingTextWithTooltip } from '../../../display/tooltip/OverflowingTextWithTooltip';
|
||||
|
||||
import { EllipsisDisplay } from './EllipsisDisplay';
|
||||
|
||||
type TextDisplayProps = {
|
||||
@ -6,5 +8,7 @@ type TextDisplayProps = {
|
||||
};
|
||||
|
||||
export const TextDisplay = ({ text, maxWidth }: TextDisplayProps) => (
|
||||
<EllipsisDisplay maxWidth={maxWidth}>{text}</EllipsisDisplay>
|
||||
<EllipsisDisplay maxWidth={maxWidth}>
|
||||
<OverflowingTextWithTooltip text={text} />
|
||||
</EllipsisDisplay>
|
||||
);
|
||||
|
@ -0,0 +1,13 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledFieldTextAreaOverlay = styled.div`
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
background: ${({ theme }) => theme.background.transparent.secondary};
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
margin: -1px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const FieldTextAreaOverlay = StyledFieldTextAreaOverlay;
|
@ -13,6 +13,7 @@ const StyledContainer = styled.div`
|
||||
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -0,0 +1,79 @@
|
||||
import { ChangeEvent, useRef, useState } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { useRegisterInputEvents } from '@/object-record/field/meta-types/input/hooks/useRegisterInputEvents';
|
||||
import { textInputStyle } from '@/ui/theme/constants/effects';
|
||||
|
||||
export type TextAreaInputProps = {
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
placeholder?: string;
|
||||
autoFocus?: boolean;
|
||||
value: string;
|
||||
onEnter: (newText: string) => void;
|
||||
onEscape: (newText: string) => void;
|
||||
onTab?: (newText: string) => void;
|
||||
onShiftTab?: (newText: string) => void;
|
||||
onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
|
||||
hotkeyScope: string;
|
||||
onChange?: (newText: string) => void;
|
||||
};
|
||||
|
||||
const StyledTextArea = styled(TextareaAutosize)`
|
||||
${textInputStyle}
|
||||
width: 100%;
|
||||
resize: none;
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
background-color: ${({ theme }) => theme.background.primary};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
`;
|
||||
|
||||
export const TextAreaInput = ({
|
||||
disabled,
|
||||
className,
|
||||
placeholder,
|
||||
autoFocus,
|
||||
value,
|
||||
hotkeyScope,
|
||||
onEnter,
|
||||
onEscape,
|
||||
onTab,
|
||||
onShiftTab,
|
||||
onClickOutside,
|
||||
onChange,
|
||||
}: TextAreaInputProps) => {
|
||||
const [internalText, setInternalText] = useState(value);
|
||||
|
||||
const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setInternalText(event.target.value);
|
||||
onChange?.(event.target.value);
|
||||
};
|
||||
|
||||
const wrapperRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useRegisterInputEvents({
|
||||
inputRef: wrapperRef,
|
||||
inputValue: internalText,
|
||||
onEnter,
|
||||
onEscape,
|
||||
onClickOutside,
|
||||
onTab,
|
||||
onShiftTab,
|
||||
hotkeyScope,
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledTextArea
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
ref={wrapperRef}
|
||||
onChange={handleChange}
|
||||
autoFocus={autoFocus}
|
||||
value={internalText}
|
||||
/>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user