feat: iframe code block；perf: workflow selector type (#3076)
* feat: iframe code block * perf: workflow selector type
This commit is contained in:
Archer
@@ -1,12 +1,11 @@
|
||||
import React, { useRef, useCallback, useState } from 'react';
|
||||
import { Button, useDisclosure, Box, Flex, useOutsideClick, Checkbox } from '@chakra-ui/react';
|
||||
import { MultipleSelectProps } from './type';
|
||||
import { ListItemType, MultipleArraySelectProps, MultipleSelectProps } from './type';
|
||||
import EmptyTip from '../EmptyTip';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import MyIcon from '../../common/Icon';
|
||||
import { ChevronDownIcon } from '@chakra-ui/icons';
|
||||
|
||||
const MultipleRowSelect = ({
|
||||
export const MultipleRowSelect = ({
|
||||
placeholder,
|
||||
label,
|
||||
value = [],
|
||||
@@ -15,14 +14,12 @@ const MultipleRowSelect = ({
|
||||
maxH = 300,
|
||||
onSelect,
|
||||
popDirection = 'bottom',
|
||||
styles,
|
||||
isArray = false
|
||||
styles
|
||||
}: MultipleSelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const [navigationPath, setNavigationPath] = useState<string[]>([]);
|
||||
const [cloneValue, setCloneValue] = useState(value);
|
||||
|
||||
useOutsideClick({
|
||||
ref: ref,
|
||||
@@ -31,33 +28,183 @@ const MultipleRowSelect = ({
|
||||
|
||||
const RenderList = useCallback(
|
||||
({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
|
||||
const currentNav = navigationPath[index];
|
||||
const selectedIndex = list.findIndex((item) => item.value === currentNav);
|
||||
const selectedValue = cloneValue[index];
|
||||
const selectedIndex = list.findIndex((item) => item.value === selectedValue);
|
||||
const children = list[selectedIndex]?.children || [];
|
||||
const hasChildren = list.some((item) => item.children && item.children?.length > 0);
|
||||
|
||||
const handleSelect = (item: any) => {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
className="nowheel"
|
||||
flex={'1 0 auto'}
|
||||
// width={0}
|
||||
px={2}
|
||||
borderLeft={index !== 0 ? 'base' : 'none'}
|
||||
maxH={`${maxH}px`}
|
||||
overflowY={'auto'}
|
||||
whiteSpace={'nowrap'}
|
||||
>
|
||||
{list.map((item) => (
|
||||
<Flex
|
||||
key={item.value}
|
||||
py={2}
|
||||
cursor={'pointer'}
|
||||
px={2}
|
||||
borderRadius={'md'}
|
||||
_hover={{
|
||||
bg: 'primary.50',
|
||||
color: 'primary.600'
|
||||
}}
|
||||
onClick={() => {
|
||||
const newValue = [...cloneValue];
|
||||
|
||||
if (item.value === selectedValue) {
|
||||
newValue[index] = undefined;
|
||||
setCloneValue(newValue);
|
||||
onSelect(newValue);
|
||||
} else {
|
||||
newValue[index] = item.value;
|
||||
setCloneValue(newValue);
|
||||
if (!hasChildren) {
|
||||
onSelect(newValue);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
}}
|
||||
{...(item.value === selectedValue
|
||||
? {
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {})}
|
||||
>
|
||||
{item.label}
|
||||
</Flex>
|
||||
))}
|
||||
{list.length === 0 && (
|
||||
<EmptyTip
|
||||
text={emptyTip ?? t('common:common.MultipleRowSelect.No data')}
|
||||
pt={1}
|
||||
pb={3}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{children.length > 0 && <RenderList list={children} index={index + 1} />}
|
||||
</>
|
||||
);
|
||||
},
|
||||
[cloneValue]
|
||||
);
|
||||
|
||||
const onOpenSelect = useCallback(() => {
|
||||
setCloneValue(value);
|
||||
onOpen();
|
||||
}, [value, onOpen]);
|
||||
|
||||
return (
|
||||
<Box ref={ref} position={'relative'}>
|
||||
<Button
|
||||
justifyContent={'space-between'}
|
||||
width={'100%'}
|
||||
variant={'whitePrimaryOutline'}
|
||||
size={'lg'}
|
||||
fontSize={'sm'}
|
||||
px={3}
|
||||
outline={'none'}
|
||||
rightIcon={<MyIcon name={'core/chat/chevronDown'} w="1rem" color={'myGray.500'} />}
|
||||
_active={{
|
||||
transform: 'none'
|
||||
}}
|
||||
{...(isOpen
|
||||
? {
|
||||
borderColor: 'primary.600',
|
||||
color: 'primary.700',
|
||||
boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
|
||||
}
|
||||
: {
|
||||
borderColor: 'myGray.200',
|
||||
boxShadow: 'none'
|
||||
})}
|
||||
{...styles}
|
||||
onClick={() => (isOpen ? onClose() : onOpenSelect())}
|
||||
>
|
||||
<Box>{label ?? placeholder}</Box>
|
||||
</Button>
|
||||
{isOpen && (
|
||||
<Box
|
||||
position={'absolute'}
|
||||
{...(popDirection === 'top'
|
||||
? {
|
||||
transform: 'translateY(-105%)',
|
||||
top: '0'
|
||||
}
|
||||
: {
|
||||
transform: 'translateY(105%)',
|
||||
bottom: '0'
|
||||
})}
|
||||
py={2}
|
||||
bg={'white'}
|
||||
border={'1px solid #fff'}
|
||||
boxShadow={'5'}
|
||||
borderRadius={'md'}
|
||||
zIndex={1}
|
||||
minW={'100%'}
|
||||
w={'max-content'}
|
||||
>
|
||||
<Flex>
|
||||
<RenderList list={list} index={0} />
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const MultipleRowArraySelect = ({
|
||||
placeholder,
|
||||
label,
|
||||
value = [],
|
||||
list,
|
||||
emptyTip,
|
||||
maxH = 300,
|
||||
onSelect,
|
||||
popDirection = 'bottom',
|
||||
styles
|
||||
}: MultipleArraySelectProps) => {
|
||||
const { t } = useTranslation();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const [navigationPath, setNavigationPath] = useState<string[]>([]);
|
||||
|
||||
// Close when clicking outside
|
||||
useOutsideClick({
|
||||
ref: ref,
|
||||
handler: onClose
|
||||
});
|
||||
|
||||
const RenderList = useCallback(
|
||||
({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
|
||||
const currentNavValue = navigationPath[index];
|
||||
const selectedIndex = list.findIndex((item) => item.value === currentNavValue);
|
||||
const children = list[selectedIndex]?.children || [];
|
||||
const hasChildren = list.some((item) => item.children && item.children?.length > 0);
|
||||
|
||||
const handleSelect = (item: ListItemType) => {
|
||||
// Has children, set parent value
|
||||
if (hasChildren) {
|
||||
// Update parent menu path
|
||||
const newPath = [...navigationPath];
|
||||
newPath[index] = item.value;
|
||||
// Clear sub paths
|
||||
newPath.splice(index + 1);
|
||||
setNavigationPath(newPath);
|
||||
} else {
|
||||
if (!isArray) {
|
||||
onSelect([navigationPath[0], item.value]);
|
||||
onClose();
|
||||
} else {
|
||||
const parentValue = navigationPath[0];
|
||||
const newValues = [...value];
|
||||
const newValue = [parentValue, item.value];
|
||||
const parentValue = navigationPath[0];
|
||||
const newValues = [...value];
|
||||
const newValue = [parentValue, item.value];
|
||||
|
||||
if (newValues.some((v) => v[0] === parentValue && v[1] === item.value)) {
|
||||
onSelect(newValues.filter((v) => !(v[0] === parentValue && v[1] === item.value)));
|
||||
} else {
|
||||
onSelect([...newValues, newValue]);
|
||||
}
|
||||
if (newValues.some((v) => v[0] === parentValue && v[1] === item.value)) {
|
||||
onSelect(newValues.filter((v) => !(v[0] === parentValue && v[1] === item.value)));
|
||||
} else {
|
||||
onSelect([...newValues, newValue]);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -74,8 +221,8 @@ const MultipleRowSelect = ({
|
||||
whiteSpace={'nowrap'}
|
||||
>
|
||||
{list.map((item) => {
|
||||
const isSelected = item.value === currentNav;
|
||||
const showCheckbox = isArray && index !== 0;
|
||||
const isSelected = item.value === currentNavValue;
|
||||
const showCheckbox = !hasChildren;
|
||||
const isChecked =
|
||||
showCheckbox &&
|
||||
value.some((v) => v[1] === item.value && v[0] === navigationPath[0]);
|
||||
@@ -101,7 +248,7 @@ const MultipleRowSelect = ({
|
||||
mr={1}
|
||||
/>
|
||||
)}
|
||||
{item.label}
|
||||
<Box>{item.label}</Box>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
@@ -117,33 +264,26 @@ const MultipleRowSelect = ({
|
||||
</>
|
||||
);
|
||||
},
|
||||
[navigationPath, value, isArray, onSelect]
|
||||
[navigationPath, value, onSelect]
|
||||
);
|
||||
|
||||
const onOpenSelect = useCallback(() => {
|
||||
setNavigationPath(isArray ? [] : [value[0]?.[0], value[0]?.[1]]);
|
||||
setNavigationPath([]);
|
||||
onOpen();
|
||||
}, [value, isArray, onOpen]);
|
||||
}, [value, onOpen]);
|
||||
|
||||
return (
|
||||
<Box ref={ref} position={'relative'}>
|
||||
<Flex
|
||||
justifyContent={'space-between'}
|
||||
alignItems={'center'}
|
||||
overflow={'auto'}
|
||||
<Button
|
||||
width={'100%'}
|
||||
variant={'whitePrimaryOutline'}
|
||||
size={'lg'}
|
||||
fontSize={'sm'}
|
||||
px={3}
|
||||
py={1}
|
||||
minH={10}
|
||||
maxH={24}
|
||||
outline={'none'}
|
||||
rightIcon={<MyIcon name={'core/chat/chevronDown'} w={4} color={'myGray.500'} />}
|
||||
border={'1px solid'}
|
||||
borderRadius={'md'}
|
||||
bg={'white'}
|
||||
rightIcon={<MyIcon name={'core/chat/chevronDown'} w="1rem" color={'myGray.500'} />}
|
||||
iconSpacing={2}
|
||||
h={'auto'}
|
||||
_active={{
|
||||
transform: 'none'
|
||||
}}
|
||||
@@ -164,20 +304,21 @@ const MultipleRowSelect = ({
|
||||
onClick={() => (isOpen ? onClose() : onOpenSelect())}
|
||||
className="nowheel"
|
||||
>
|
||||
<Box>{label ?? placeholder}</Box>
|
||||
<Flex alignItems={'center'} ml={1}>
|
||||
<ChevronDownIcon />
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box w={'100%'} textAlign={'left'}>
|
||||
{label ?? placeholder}
|
||||
</Box>
|
||||
</Button>
|
||||
{isOpen && (
|
||||
<Box
|
||||
position={'absolute'}
|
||||
{...(popDirection === 'top'
|
||||
? {
|
||||
bottom: '45px'
|
||||
transform: 'translateY(-105%)',
|
||||
top: '0'
|
||||
}
|
||||
: {
|
||||
top: '45px'
|
||||
transform: 'translateY(105%)',
|
||||
bottom: '0'
|
||||
})}
|
||||
py={2}
|
||||
bg={'white'}
|
||||
|
||||
@@ -4,9 +4,9 @@ type ListItemType = {
|
||||
value: any;
|
||||
children?: ListItemType[];
|
||||
};
|
||||
export type MultipleSelectProps<T = any> = {
|
||||
export type MultipleSelectProps = {
|
||||
label?: string | React.ReactNode;
|
||||
value: any[];
|
||||
value?: any[];
|
||||
placeholder?: string;
|
||||
list: ListItemType[];
|
||||
emptyTip?: string;
|
||||
@@ -14,5 +14,8 @@ export type MultipleSelectProps<T = any> = {
|
||||
onSelect: (val: any[]) => void;
|
||||
styles?: ButtonProps;
|
||||
popDirection?: 'top' | 'bottom';
|
||||
isArray?: boolean;
|
||||
};
|
||||
export type MultipleArraySelectProps = Omit<MultipleSelectProps, 'value'> & {
|
||||
value?: any[][];
|
||||
onSelect: (val: any[][]) => void;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user