384 update the input of the record show page inside the command menu (#10213)
Created a new component `RecordTitleCell` with an API close to `RecordInlineCell`. This new component is an autogrowing input. It consumes the `FieldContext`. It uses some hooks and states from `RecordInlineCell` because I didn't want to duplicate all the logic, but this logic could be duplicated. Two issues that I didn't solve in this PR: - There is a flashing glitch inside the input when typing - The input of a workflow isn't focused when creating a new one. This is because of an issue with the `useHotkeyScopeOnMount` hook which is deprecated but still used in some components. Upon redirection on the workflow showpage, the hokey scope of the input is overridden by the hokey scopes of the components which use `useHotkeyScopeOnMount`. I decided not to open the input for now. ## Command menu record show page ### Single input https://github.com/user-attachments/assets/50dc235c-8f34-4445-8b04-586125606bd5 ### Double input https://github.com/user-attachments/assets/bdcfd6eb-d25e-4006-a87f-6e615e8a6e7e ## Workflow breadcrumb https://github.com/user-attachments/assets/ded38dd6-5794-4779-a4ae-b3948567595a ## Record show page ### Single input https://github.com/user-attachments/assets/8ad7a606-556a-416b-8788-93415f7989e1 ### Double input https://github.com/user-attachments/assets/55aae40b-36ae-40f1-8171-06f1a5db3532
This commit is contained in:
Raphaël Bosi
@ -1,119 +0,0 @@
|
||||
import { isUpdatingRecordEditableNameState } from '@/object-record/states/isUpdatingRecordEditableName';
|
||||
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
|
||||
import { useOpenEditableBreadCrumbItem } from '@/ui/navigation/bread-crumb/hooks/useOpenEditableBreadCrumbItem';
|
||||
import { EditableBreadcrumbItemHotkeyScope } from '@/ui/navigation/bread-crumb/types/EditableBreadcrumbItemHotkeyScope';
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import { Key } from 'ts-key-enum';
|
||||
import { isDefined } from 'twenty-shared';
|
||||
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
|
||||
|
||||
type EditableBreadcrumbItemProps = {
|
||||
className?: string;
|
||||
defaultValue: string;
|
||||
noValuePlaceholder?: string;
|
||||
placeholder: string;
|
||||
onSubmit: (value: string) => void;
|
||||
hotkeyScope: string;
|
||||
};
|
||||
|
||||
const StyledButton = styled('button')`
|
||||
align-items: center;
|
||||
background: inherit;
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
box-sizing: content-box;
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
}
|
||||
`;
|
||||
|
||||
export const EditableBreadcrumbItem = ({
|
||||
className,
|
||||
defaultValue,
|
||||
noValuePlaceholder,
|
||||
placeholder,
|
||||
onSubmit,
|
||||
}: EditableBreadcrumbItemProps) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const [isUpdatingRecordEditableName, setIsUpdatingRecordEditableName] =
|
||||
useRecoilState(isUpdatingRecordEditableNameState);
|
||||
|
||||
// TODO: remove this and set the hokey scopes synchronously on page change inside the useNavigateApp hook
|
||||
useHotkeyScopeOnMount(
|
||||
EditableBreadcrumbItemHotkeyScope.EditableBreadcrumbItem,
|
||||
);
|
||||
|
||||
useScopedHotkeys(
|
||||
[Key.Escape],
|
||||
() => {
|
||||
setIsUpdatingRecordEditableName(false);
|
||||
},
|
||||
EditableBreadcrumbItemHotkeyScope.EditableBreadcrumbItem,
|
||||
);
|
||||
|
||||
useScopedHotkeys(
|
||||
[Key.Enter],
|
||||
() => {
|
||||
onSubmit(value);
|
||||
setIsUpdatingRecordEditableName(false);
|
||||
},
|
||||
EditableBreadcrumbItemHotkeyScope.EditableBreadcrumbItem,
|
||||
);
|
||||
|
||||
const clickOutsideRefs: Array<React.RefObject<HTMLElement>> = [
|
||||
inputRef,
|
||||
buttonRef,
|
||||
];
|
||||
|
||||
useListenClickOutside({
|
||||
refs: clickOutsideRefs,
|
||||
callback: () => {
|
||||
setIsUpdatingRecordEditableName(false);
|
||||
},
|
||||
listenerId: 'editable-breadcrumb-item',
|
||||
});
|
||||
|
||||
const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
|
||||
if (isDefined(value)) {
|
||||
event.target.select();
|
||||
}
|
||||
};
|
||||
|
||||
const [value, setValue] = useState<string>(defaultValue);
|
||||
|
||||
const { openEditableBreadCrumbItem } = useOpenEditableBreadCrumbItem();
|
||||
|
||||
return isUpdatingRecordEditableName ? (
|
||||
<TextInputV2
|
||||
className={className}
|
||||
autoGrow
|
||||
sizeVariant="sm"
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
placeholder={placeholder}
|
||||
onFocus={handleFocus}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<StyledButton ref={buttonRef} onClick={openEditableBreadCrumbItem}>
|
||||
{value || noValuePlaceholder}
|
||||
</StyledButton>
|
||||
);
|
||||
};
|
||||
@ -1,68 +0,0 @@
|
||||
import { expect, jest } from '@storybook/jest';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { EditableBreadcrumbItemHotkeyScope } from '@/ui/navigation/bread-crumb/types/EditableBreadcrumbItemHotkeyScope';
|
||||
|
||||
import { findByText, userEvent } from '@storybook/test';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
import { EditableBreadcrumbItem } from '../EditableBreadcrumbItem';
|
||||
|
||||
const onSubmit = jest.fn();
|
||||
|
||||
const meta: Meta<typeof EditableBreadcrumbItem> = {
|
||||
title: 'UI/Navigation/BreadCrumb/EditableBreadcrumbItem',
|
||||
component: EditableBreadcrumbItem,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<RecoilRoot>
|
||||
<Story />
|
||||
</RecoilRoot>
|
||||
),
|
||||
ComponentDecorator,
|
||||
],
|
||||
args: {
|
||||
defaultValue: 'Company Name',
|
||||
placeholder: 'Enter name',
|
||||
hotkeyScope: EditableBreadcrumbItemHotkeyScope.EditableBreadcrumbItem,
|
||||
onSubmit,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof EditableBreadcrumbItem>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
play: async ({ canvasElement }) => {
|
||||
const button = await findByText(canvasElement, 'Company Name');
|
||||
expect(button).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const Editing: Story = {
|
||||
args: {},
|
||||
play: async ({ canvasElement }) => {
|
||||
const button = canvasElement.querySelector('button');
|
||||
await userEvent.click(button);
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
await userEvent.keyboard('New Name');
|
||||
await userEvent.keyboard('{Enter}');
|
||||
|
||||
expect(onSubmit).toHaveBeenCalledWith('New Name');
|
||||
},
|
||||
};
|
||||
|
||||
export const WithNoValue: Story = {
|
||||
args: {
|
||||
defaultValue: '',
|
||||
noValuePlaceholder: 'Untitled',
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const button = await findByText(canvasElement, 'Untitled');
|
||||
|
||||
expect(button).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@ -1,19 +0,0 @@
|
||||
import { isUpdatingRecordEditableNameState } from '@/object-record/states/isUpdatingRecordEditableName';
|
||||
import { EditableBreadcrumbItemHotkeyScope } from '@/ui/navigation/bread-crumb/types/EditableBreadcrumbItemHotkeyScope';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
export const useOpenEditableBreadCrumbItem = () => {
|
||||
const setIsUpdatingRecordEditableName = useSetRecoilState(
|
||||
isUpdatingRecordEditableNameState,
|
||||
);
|
||||
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
|
||||
const openEditableBreadCrumbItem = () => {
|
||||
setIsUpdatingRecordEditableName(true);
|
||||
setHotkeyScope(EditableBreadcrumbItemHotkeyScope.EditableBreadcrumbItem);
|
||||
};
|
||||
|
||||
return { openEditableBreadCrumbItem };
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export enum EditableBreadcrumbItemHotkeyScope {
|
||||
EditableBreadcrumbItem = 'editable-breadcrumb-item',
|
||||
}
|
||||
Reference in New Issue
Block a user