mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Move shadow style from TableCell and InlineCell to FieldInputs (#2078)

Browse Source 
* Move shadow style from TableCell and InlineCell to FieldInputs

* Move overlay to inputs

* Complete work
This commit is contained in:
Charles Bochet
2023-10-17 20:59:56 +02:00
committed by GitHub
parent a40516df83
commit 01e9545a59
22 changed files with 164 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/src/modules/ui/data/field/meta-types/input/components/ChipFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField';
import { useChipField } from '../../hooks/useChipField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type ChipFieldInputProps = {
@ -48,16 +49,18 @@ export const ChipFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={contentFieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={contentFieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

27
front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
View File

@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText';
import { usePersistField } from '../../../hooks/usePersistField';
import { useDoubleTextChipField } from '../../hooks/useDoubleTextChipField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type DoubleTextChipFieldInputProps = {
@ -50,17 +51,19 @@ export const DoubleTextChipFieldInput = ({
};
return (
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

27
front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx
View File

@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText';
import { usePersistField } from '../../../hooks/usePersistField';
import { useDoubleTextField } from '../../hooks/useDoubleTextField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type DoubleTextFieldInputProps = {
@ -50,17 +51,19 @@ export const DoubleTextFieldInput = ({
};
return (
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

25
front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField';
import { useEmailField } from '../../hooks/useEmailField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type EmailFieldInputProps = {
@ -48,16 +49,18 @@ export const EmailFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

26
front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx
View File

@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { useMoneyField } from '../../hooks/useMoneyField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
export type FieldInputEvent = (persist: () => void) => void;
export type MoneyFieldInputProps = {
@ -46,16 +48,18 @@ export const MoneyFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toLocaleString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toLocaleString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

26
front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx
View File

@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { useNumberField } from '../../hooks/useNumberField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
export type FieldInputEvent = (persist: () => void) => void;
export type NumberFieldInputProps = {
@ -46,16 +48,18 @@ export const NumberFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

25
front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx
View File

@ -2,6 +2,7 @@ import { PhoneInput } from '@/ui/data/field/meta-types/input/components/internal
import { usePhoneField } from '../../hooks/usePhoneField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type PhoneFieldInputProps = {
@ -46,16 +47,18 @@ export const PhoneFieldInput = ({
};
return (
<PhoneInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<PhoneInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

4
front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx
View File

@ -12,9 +12,9 @@ import { useRelationField } from '../../hooks/useRelationField';
import { FieldInputEvent } from './DateFieldInput';
const StyledRelationPickerContainer = styled.div`
left: 0px;
left: -1px;
position: absolute;
top: -8px;
top: -1px;
`;
export type RelationFieldInputProps = {

25
front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField';
import { useTextField } from '../../hooks/useTextField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type TextFieldInputProps = {
@ -48,16 +49,18 @@ export const TextFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

25
front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx
View File

@ -2,6 +2,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { useURLField } from '../../hooks/useURLField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type URLFieldInputProps = {
@ -46,16 +47,18 @@ export const URLFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

14
front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx Normal file
View File

@ -0,0 +1,14 @@
import styled from '@emotion/styled';
import { overlayBackground } from '@/ui/theme/constants/effects';
const StyledFieldInputOverlay = styled.div`
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
border-radius: ${({ theme }) => theme.border.radius.sm};
${overlayBackground}
display: flex;
height: 32px;
width: 100%;
`;
export const FieldInputOverlay = StyledFieldInputOverlay;

5
front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx
View File

@ -38,6 +38,11 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
outline: none;
}
}
& svg {
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 12px;
}
`;
export type PhoneInputProps = {

2
front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx
View File

@ -7,8 +7,8 @@ import { useRegisterInputEvents } from '../../hooks/useRegisterInputEvents';
export const StyledInput = styled.input`
margin: 0;
width: 100%;
${textInputStyle}
width: 100%;
`;
type TextInputProps = {