103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
/**
|
|
* Created by jiangzhixiong on 2024/04/28
|
|
*/
|
|
|
|
import React, { forwardRef, MouseEventHandler, ReactNode, useContext, useImperativeHandle } from 'react'
|
|
import { ConfigProvider, EMPTY_BASE64 } from '@zhst/meta'
|
|
import { Flex, Image } from 'antd';
|
|
import './index.less'
|
|
|
|
const { ConfigContext } = ConfigProvider
|
|
|
|
export interface IData {
|
|
id?: string | number;
|
|
url?: string;
|
|
sort?: number;
|
|
title?: string;
|
|
subtitle?: string;
|
|
}
|
|
|
|
export interface CommonCardProps extends IData {
|
|
prefixCls?: string;
|
|
data?: IData
|
|
width?: string;
|
|
height?: string;
|
|
onCreateTxt?: string;
|
|
onCreate?: () => void;
|
|
onAddTxt?: string;
|
|
onAdd?: (data: any) => void;
|
|
onRemoveTxt?: string;
|
|
onRemove?: (data: any) => void;
|
|
actions?: ReactNode[]
|
|
onItemClick?: (data: any, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
}
|
|
|
|
export interface CommonCardRefProps {
|
|
}
|
|
|
|
const CommonCard = forwardRef<CommonCardRefProps, CommonCardProps>((props, ref) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
url,
|
|
id,
|
|
title,
|
|
subtitle,
|
|
sort,
|
|
data,
|
|
actions = [],
|
|
width = '184px',
|
|
height = '100%',
|
|
onItemClick
|
|
} = props
|
|
const { getPrefixCls } = useContext(ConfigContext)
|
|
const componentName = getPrefixCls('biz-search-card', customizePrefixCls);
|
|
|
|
const optionListRender = (_actions: ReactNode[]) => {
|
|
return _actions.map((action, i) => (
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
<li key={`${componentName}-main-opt-action-${i}`}>
|
|
{action}
|
|
{i !== _actions.length - 1 && <em className={`${componentName}-main-opt-action-split`} />}
|
|
</li>
|
|
))
|
|
}
|
|
|
|
const handleItemClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, _data: IData | undefined) => {
|
|
onItemClick?.(data, e)
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
}))
|
|
|
|
return (
|
|
<div
|
|
className={componentName}
|
|
style={{
|
|
width,
|
|
height
|
|
}}
|
|
onClick={e => handleItemClick(e, data)}
|
|
>
|
|
<div className={`${componentName}-main`}>
|
|
<i className={`${componentName}-main-num`}>{sort || id}</i>
|
|
<Image
|
|
className={`${componentName}-main-img`}
|
|
src={url || data?.url}
|
|
height={'240px'}
|
|
preview={false}
|
|
fallback={EMPTY_BASE64}
|
|
/>
|
|
<ul className={`${componentName}-main-opt`}>
|
|
{optionListRender(actions)}
|
|
</ul>
|
|
</div>
|
|
<div className={`${componentName}-footer`}>
|
|
<p className={`${componentName}-footer-tit`}>{title || data?.title}</p>
|
|
<p className={`${componentName}-footer-subtitle`}>{subtitle || data?.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default CommonCard
|