Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { useLingui } from '@lingui/react/macro';
|
|
import { Key } from 'ts-key-enum';
|
|
|
|
import { TextInput } from '@/ui/input/components/TextInput';
|
|
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
|
|
import { Button } from 'twenty-ui-deprecated/input';
|
|
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
const StyledContainer = styled.div`
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
gap: ${themeCssVariables.spacing[1]};
|
|
padding: ${themeCssVariables.spacing[1]};
|
|
width: 100%;
|
|
`;
|
|
|
|
type FieldsConfigurationGroupRenameInputProps = {
|
|
dropdownId: string;
|
|
renameValue: string;
|
|
onRenameValueChange: (value: string) => void;
|
|
onSave: (newName: string) => void;
|
|
onCancel: () => void;
|
|
};
|
|
|
|
export const FieldsConfigurationGroupRenameInput = ({
|
|
dropdownId,
|
|
renameValue,
|
|
onRenameValueChange,
|
|
onSave,
|
|
onCancel,
|
|
}: FieldsConfigurationGroupRenameInputProps) => {
|
|
const { t } = useLingui();
|
|
|
|
const handleSave = () => {
|
|
if (renameValue.trim().length > 0) {
|
|
onSave(renameValue.trim());
|
|
}
|
|
onCancel();
|
|
};
|
|
|
|
useHotkeysOnFocusedElement({
|
|
keys: [Key.Enter],
|
|
callback: handleSave,
|
|
focusId: dropdownId,
|
|
dependencies: [handleSave],
|
|
});
|
|
|
|
useHotkeysOnFocusedElement({
|
|
keys: [Key.Escape],
|
|
callback: onCancel,
|
|
focusId: dropdownId,
|
|
dependencies: [onCancel],
|
|
});
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<TextInput
|
|
value={renameValue}
|
|
onChange={onRenameValueChange}
|
|
autoFocus
|
|
fullWidth
|
|
sizeVariant="sm"
|
|
placeholder={t`Group name`}
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
accent="blue"
|
|
size="small"
|
|
title="Done"
|
|
onClick={handleSave}
|
|
/>
|
|
</StyledContainer>
|
|
);
|
|
};
|