You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { ChatInputActionBar } from '@lobehub/ui';
|
|
import { ReactNode, memo, useMemo } from 'react';
|
|
|
|
import { ActionKeys, actionMap, getLeftActionList, getRightActionList } from './config';
|
|
|
|
const RenderActionList = ({ dataSource }: { dataSource: ActionKeys[] }) => (
|
|
<>
|
|
{dataSource.map((key) => {
|
|
const Render = actionMap[key];
|
|
return <Render key={key} />;
|
|
})}
|
|
</>
|
|
);
|
|
|
|
export interface ActionBarProps {
|
|
leftAreaEndRender?: ReactNode;
|
|
leftAreaStartRender?: ReactNode;
|
|
mobile?: boolean;
|
|
padding?: number | string;
|
|
rightAreaEndRender?: ReactNode;
|
|
rightAreaStartRender?: ReactNode;
|
|
}
|
|
|
|
const ActionBar = memo<ActionBarProps>(
|
|
({
|
|
padding = '0 16px',
|
|
mobile,
|
|
rightAreaStartRender,
|
|
rightAreaEndRender,
|
|
leftAreaStartRender,
|
|
leftAreaEndRender,
|
|
}) => {
|
|
const leftActionList = useMemo(() => getLeftActionList(mobile), [mobile]);
|
|
const rightActionList = useMemo(() => getRightActionList(mobile), [mobile]);
|
|
|
|
return (
|
|
<ChatInputActionBar
|
|
leftAddons={
|
|
<>
|
|
{leftAreaStartRender}
|
|
<RenderActionList dataSource={leftActionList} />
|
|
{leftAreaEndRender}
|
|
</>
|
|
}
|
|
padding={padding}
|
|
rightAddons={
|
|
<>
|
|
{rightAreaStartRender}
|
|
<RenderActionList dataSource={rightActionList} />
|
|
{rightAreaEndRender}
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default ActionBar;
|