jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
112 lines (111 loc) • 2.6 kB
TypeScript
import type { PropsWithChildren } from 'react';
import type { PickClassStyleType, ReactPropsBase } from 'jamis-core';
import type { BadgeObject, BaseSchema, SchemaClassName, SchemaExpression } from '../types';
export interface AvatarSchema extends BaseSchema {
type: 'avatar';
/**
* 类名
*/
className?: SchemaClassName;
/**
* 角标
*/
badge?: BadgeObject;
/**
* 图片地址
*/
src?: string;
srcExpr?: SchemaExpression;
/**
* 图标
*/
icon?: string;
/**
* 图片相对于容器的缩放方式
*/
fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
/**
* 形状
*/
shape?: 'circle' | 'square' | 'rounded';
/**
* 大小
*/
size?: number | 'small' | 'default' | 'large';
/**
* 文本
*/
text?: string;
/**
* 字符类型距离左右两侧边界单位像素
*/
gap?: number;
/**
* 图片无法显示时的替换文字地址
*/
alt?: string;
/**
* 图片是否允许拖动
*/
draggable?: boolean;
/**
* 图片CORS属性
*/
crossOrigin?: 'anonymous' | 'use-credentials' | '';
/**
* 图片加载失败的处理策略
*/
imageFailback?: false | 'icon' | 'text' | (SchemaExpression & {});
}
/**
* Avatar 属性
*/
export interface AvatarCmptProps extends ReactPropsBase, PropsWithChildren, PickClassStyleType {
/**
* 图片地址
*/
src?: string | React.ReactNode;
/**
* 图标
*/
icon?: string | React.ReactNode;
/**
* 图片相对于容器的缩放方式
*/
fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
/**
* 形状
*/
shape?: 'circle' | 'square' | 'rounded';
/**
* 大小
*/
size?: number | 'small' | 'default' | 'large';
/**
* 文本
*/
text?: string;
/**
* 字符类型距离左右两侧边界单位像素
*/
gap?: number;
/**
* 图片无法显示时的替换文字地址
*/
alt?: string;
/**
* 图片是否允许拖动
*/
draggable?: boolean;
/**
* 图片CORS属性
*/
crossOrigin?: 'anonymous' | 'use-credentials' | '';
/**
* 图片加载失败的事件，返回 false 会关闭组件默认的
*/
imageFailback?: false | 'text' | 'icon';
onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
onMouseEnter?: (e: React.MouseEvent<HTMLSpanElement>) => void;
onMouseLeave?: (e: React.MouseEvent<HTMLSpanElement>) => void;
}