IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared:Components:Selector: add hotkeys for create

Browse Source
This commit is contained in:
Timofey Boyko 2024-06-05 18:30:51 +03:00
parent 31e2dc32fd
commit eb52645766
8 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/shared/components/selector/Selector.tsx
View File

@ -599,6 +599,7 @@ const Selector = ({
withFooterInput={withFooterInput}
withFooterCheckbox={withFooterCheckbox}
descriptionText={descriptionText}
inputItemVisible={inputItemVisible}
setInputItemVisible={setInputItemVisible}
// bread crumbs
{...breadCrumbsProps}

7
packages/shared/components/selector/Selector.types.ts
View File

@ -173,6 +173,8 @@ export interface EmptyScreenProps {
withSearch: boolean;
items: TSelectorItem[];
inputItemVisible: boolean;
}
type TSelectorEmptyScreen = {
@ -356,6 +358,7 @@ export type BodyProps = TSelectorBreadCrumbs &
isMultiSelect: boolean;
inputItemVisible: boolean;
setInputItemVisible: (value: boolean) => void;
items: TSelectorItem[];
@ -416,6 +419,7 @@ type TSelectorItemEmpty = {
name?: undefined;
isCreateNewItem?: undefined;
onCreateClick?: undefined;
hotkey?: undefined;
onBackClick?: undefined;
dropDownItems?: undefined;
isInputItem?: undefined;
@ -496,7 +500,7 @@ export type TSelectorItemNew = MergeTypes<
TSelectorItemEmpty,
{
isCreateNewItem: boolean;
hotkey?: string;
dropDownItems?: React.ReactElement[];
onCreateClick?: VoidFunction;
@ -552,6 +556,7 @@ export type Data = {
isGroup?: boolean,
) => React.ReactNode | null;
setInputItemVisible: (value: boolean) => void;
inputItemVisible: boolean;
};
export interface ItemProps {

3
packages/shared/components/selector/sub-components/Body.tsx
View File

@ -103,6 +103,7 @@ const Body = ({
withInfo,
infoText,
setInputItemVisible,
inputItemVisible,
}: BodyProps) => {
const [bodyHeight, setBodyHeight] = React.useState(0);
@ -260,6 +261,7 @@ const Body = ({
searchHeader={searchEmptyScreenHeader}
searchDescription={searchEmptyScreenDescription}
items={items}
inputItemVisible={inputItemVisible}
/>
) : (
<>
@ -302,6 +304,7 @@ const Body = ({
isItemLoaded,
renderCustomItem,
setInputItemVisible,
inputItemVisible,
}}
itemSize={48}
onItemsRendered={onItemsRendered}

8
packages/shared/components/selector/sub-components/EmptyScreen.tsx
View File

@ -57,6 +57,7 @@ const EmptyScreen = ({
searchDescription,
withSearch,
items,
inputItemVisible,
}: EmptyScreenProps) => {
const { t } = useTranslation(["Common"]);
const { isOpenDropDown, setIsOpenDropDown, onCloseDropDown } =
@ -69,7 +70,12 @@ const EmptyScreen = ({
const createItem = items.length > 0 ? items[0] : null;
const onCreateClickAction = () => {
if (!createItem || (!createItem.onCreateClick && !createItem.dropDownItems))
if (
!createItem ||
(!createItem.onCreateClick && !createItem.dropDownItems) ||
isOpenDropDown ||
inputItemVisible
)
return;
if (createItem.dropDownItems) return setIsOpenDropDown(true);

7
packages/shared/components/selector/sub-components/Item.tsx
View File

@ -54,7 +54,8 @@ const compareFunction = (prevProps: ItemProps, nextProps: ItemProps) => {
return (
prevItem?.id === nextItem?.id &&
prevItem?.label === nextItem?.label &&
prevItem?.isSelected === nextItem?.isSelected
prevItem?.isSelected === nextItem?.isSelected &&
nextData?.inputItemVisible === prevData?.inputItemVisible
);
};
@ -67,6 +68,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
rowLoader,
renderCustomItem,
setInputItemVisible,
inputItemVisible,
}: Data = data;
const { t } = useTranslation(["Common"]);
@ -86,6 +88,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
label,
isCreateNewItem,
onCreateClick,
hotkey,
isInputItem,
defaultInputValue,
@ -131,6 +134,8 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
onCreateClick={onCreateClick}
dropDownItems={dropDownItems}
style={style}
hotkey={hotkey}
inputItemVisible={inputItemVisible}
/>
);
}

38
packages/shared/components/selector/sub-components/NewItem.tsx
View File

@ -38,20 +38,54 @@ const NewItem = ({
style,
dropDownItems,
onCreateClick,
hotkey,
inputItemVisible,
}: {
label: string;
style: React.CSSProperties;
dropDownItems?: React.ReactElement[];
onCreateClick?: VoidFunction;
hotkey?: string;
inputItemVisible?: boolean;
}) => {
const { isOpenDropDown, onCloseDropDown, setIsOpenDropDown } =
useCreateDropDown();
const onCreateClickAction = () => {
const onCreateClickAction = React.useCallback(() => {
if (isOpenDropDown || inputItemVisible) return;
if (dropDownItems) return setIsOpenDropDown(true);
onCreateClick?.();
};
}, [
dropDownItems,
inputItemVisible,
isOpenDropDown,
onCreateClick,
setIsOpenDropDown,
]);
React.useEffect(() => {
if (isOpenDropDown && inputItemVisible) setIsOpenDropDown(false);
}, [inputItemVisible, isOpenDropDown, setIsOpenDropDown]);
const onKeyDown = React.useCallback(
(e: KeyboardEvent) => {
if (e.key.toLowerCase() === hotkey && e.shiftKey) {
onCreateClickAction();
}
},
[hotkey, onCreateClickAction],
);
React.useEffect(() => {
if (!hotkey) return;
window.removeEventListener("keypress", onKeyDown);
window.addEventListener("keypress", onKeyDown);
return () => {
window.removeEventListener("keypress", onKeyDown);
};
}, [hotkey, onCreateClickAction, onKeyDown]);
return (
<StyledItem

1
packages/shared/selectors/Files/hooks/useFilesHelper.ts
View File

@ -332,6 +332,7 @@ const useFilesHelper = ({
label: t("NewFolder"),
id: "create-folder-item",
key: "create-folder-item",
hotkey: "f",
onCreateClick: () => addInputItem(t("NewFolder"), FolderSvgUrl),
onBackClick: () => {
setSelectedItemId(current.parentId);

1
packages/shared/selectors/Files/hooks/useRoomsHelper.tsx
View File

@ -141,6 +141,7 @@ const useRoomsHelper = ({
label: t("NewRoom"),
id: "create-room-item",
key: "create-room-item",
hotkey: "r",
dropDownItems: createDropDownItems,
onBackClick: () => {
setIsRoot(true);