mirror of
https://github.com/logto-io/logto.git
synced 2025-03-31 22:51:25 -05:00
chore(console): remove deprecated transfer component (#2815)
This commit is contained in:
Xiao Yijun
GitHub
parent
e38cd36579
commit
45e72f173c
8 changed files with 18 additions and 211 deletions
|
|
@ -11,6 +11,7 @@ type Props = {
|
|||
sortIndex: number;
|
||||
moveItem: (dragIndex: number, hoverIndex: number) => void;
|
||||
children: ReactNode;
|
||||
dragType?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
|
|
@ -20,9 +21,14 @@ type DragItemProps = {
|
|||
type: string;
|
||||
};
|
||||
|
||||
const dragType = 'TransferItem';
|
||||
|
||||
const DraggableItem = ({ id, children, sortIndex, moveItem, className }: Props) => {
|
||||
const DraggableItem = ({
|
||||
id,
|
||||
children,
|
||||
sortIndex,
|
||||
moveItem,
|
||||
dragType = 'DraggableItem',
|
||||
className,
|
||||
}: Props) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { setIsDragging } = useContext(DragDropContext);
|
||||
const [{ handlerId }, drop] = useDrop<DragItemProps, void, { handlerId: Nullable<Identifier> }>({
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.dragging {
|
||||
.item:hover {
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
2
packages/console/src/components/DragDrop/index.tsx
Normal file
2
packages/console/src/components/DragDrop/index.tsx
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default as DragDropProvider } from './DragDropProvider';
|
||||
export { default as DraggableItem } from './DraggableItem';
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.transfer {
|
||||
.main {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
|
||||
.box {
|
||||
width: 50%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-subhead-2);
|
||||
padding: _.unit(3) _.unit(4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.items {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
padding: _.unit(2) _.unit(4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font: var(--font-body-medium);
|
||||
|
||||
&.draggable {
|
||||
cursor: move;
|
||||
|
||||
.draggableIcon {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
> svg {
|
||||
margin-right: _.unit(2);
|
||||
margin-left: -5px; // use to align svg content with text
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dragging {
|
||||
.item {
|
||||
&:hover {
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: _.unit(2);
|
||||
|
||||
a {
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import type { ReactNode } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import CircleMinus from '@/assets/images/circle-minus.svg';
|
||||
import CirclePlus from '@/assets/images/circle-plus.svg';
|
||||
import Draggable from '@/assets/images/draggable.svg';
|
||||
|
||||
import IconButton from '../IconButton';
|
||||
import DragDropProvider from './DragDropProvider';
|
||||
import DraggableItem from './DraggableItem';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type TransferItem = {
|
||||
title: ReactNode;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
datasource: TransferItem[];
|
||||
value?: string[];
|
||||
footer?: ReactNode;
|
||||
onChange?: (value: string[]) => void;
|
||||
};
|
||||
|
||||
const Transfer = ({ title, datasource, value = [], footer, onChange }: Props) => {
|
||||
const { t } = useTranslation(undefined, {
|
||||
keyPrefix: 'admin_console',
|
||||
});
|
||||
|
||||
const selectedItems = useMemo(() => {
|
||||
return (
|
||||
value
|
||||
.map((target) => datasource.find((item) => item.value === target))
|
||||
// eslint-disable-next-line unicorn/prefer-native-coercion-functions
|
||||
.filter((item): item is TransferItem => Boolean(item))
|
||||
);
|
||||
}, [datasource, value]);
|
||||
|
||||
const unselectedItems = useMemo(() => {
|
||||
return datasource.filter((item) => !value.includes(item.value));
|
||||
}, [datasource, value]);
|
||||
|
||||
const onAddItem = (key: string) => {
|
||||
onChange?.([...value, key]);
|
||||
};
|
||||
|
||||
const onRemoveItem = (key: string) => {
|
||||
onChange?.(value.filter((value_) => value_ !== key));
|
||||
};
|
||||
|
||||
const onMoveItem = (dragIndex: number, hoverIndex: number) => {
|
||||
const dragItem = value[dragIndex];
|
||||
const hoverItem = value[hoverIndex];
|
||||
|
||||
if (!dragItem || !hoverItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
onChange?.(
|
||||
value.map((value_, index) => {
|
||||
if (index === dragIndex) {
|
||||
return hoverItem;
|
||||
}
|
||||
|
||||
if (index === hoverIndex) {
|
||||
return dragItem;
|
||||
}
|
||||
|
||||
return value_;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.transfer}>
|
||||
<div className={styles.main}>
|
||||
<div className={styles.box}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<div className={styles.items}>
|
||||
{unselectedItems.map(({ value, title }) => (
|
||||
<div key={value} className={styles.item}>
|
||||
<div className={styles.itemTitle}>{title}</div>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
onAddItem(value);
|
||||
}}
|
||||
>
|
||||
<CirclePlus />
|
||||
</IconButton>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.box}>
|
||||
<div className={styles.title}>
|
||||
{selectedItems.length} {t('general.added')}
|
||||
</div>
|
||||
<div className={styles.items}>
|
||||
<DragDropProvider>
|
||||
{selectedItems.map(({ value, title }, index) => (
|
||||
<DraggableItem key={value} sortIndex={index} id={value} moveItem={onMoveItem}>
|
||||
<div className={classNames(styles.item, styles.draggable)}>
|
||||
<Draggable className={styles.draggableIcon} />
|
||||
<div className={styles.itemTitle}>{title}</div>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
onRemoveItem(value);
|
||||
}}
|
||||
>
|
||||
<CircleMinus />
|
||||
</IconButton>
|
||||
</div>
|
||||
</DraggableItem>
|
||||
))}
|
||||
</DragDropProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{footer && <div className={styles.footer}>{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transfer;
|
||||
|
|
@ -3,8 +3,7 @@ import { conditional } from '@silverhand/essentials';
|
|||
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import DragDropProvider from '@/components/Transfer/DragDropProvider';
|
||||
import DraggableItem from '@/components/Transfer/DraggableItem';
|
||||
import { DragDropProvider, DraggableItem } from '@/components/DragDrop';
|
||||
import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';
|
||||
import {
|
||||
identifierRequiredConnectorMapping,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { ConnectorType } from '@logto/schemas';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { DragDropProvider, DraggableItem } from '@/components/DragDrop';
|
||||
import TextLink from '@/components/TextLink';
|
||||
import DragDropProvider from '@/components/Transfer/DragDropProvider';
|
||||
import DraggableItem from '@/components/Transfer/DraggableItem';
|
||||
import useConnectorGroups from '@/hooks/use-connector-groups';
|
||||
import type { ConnectorGroup } from '@/types/connector';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue