mirror of https://github.com/msgbyte/tailchat
refactor: avatar and move main
moonrailgun
4 years ago
parent
b34fa903d5
commit
0cdd7a10bb
@ -0,0 +1,31 @@
|
||||
import { isAvailableString, isUrl } from '../string-helper';
|
||||
|
||||
describe('string-helper', () => {
|
||||
describe('isAvailableString', () => {
|
||||
test.each<[any, boolean]>([
|
||||
['any string', true],
|
||||
['', false],
|
||||
[1, false],
|
||||
[() => {}, false],
|
||||
[{}, false],
|
||||
[[], false],
|
||||
[undefined, false],
|
||||
[null, false],
|
||||
])('%p => %p', (url, res) => {
|
||||
expect(isAvailableString(url)).toBe(res);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isUrl', () => {
|
||||
test.each<[string, boolean]>([
|
||||
['http://baidu.com', true],
|
||||
['https://baidu.com', true],
|
||||
['ws://baidu.com', true],
|
||||
['wss://baidu.com', true],
|
||||
['baidu.com', false],
|
||||
['baidu', false],
|
||||
])('%s => %p', (url, res) => {
|
||||
expect(isUrl(url)).toBe(res);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,57 @@
|
||||
import _isString from 'lodash/isString';
|
||||
import str2int from 'str2int';
|
||||
import urlRegex from 'url-regex';
|
||||
import { config } from '../config';
|
||||
|
||||
/**
|
||||
* 判断一个字符串是否可用()
|
||||
* @param str 要判断的字符串
|
||||
*/
|
||||
export function isAvailableString(str: any): boolean {
|
||||
return typeof str === 'string' && str.length > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断一个字符串是否是url
|
||||
* @param str 要判断的字符串
|
||||
*/
|
||||
export function isUrl(str: string) {
|
||||
return urlRegex({ exact: true }).test(str);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断字符串是否是一个blobUrl
|
||||
* @param str url字符串
|
||||
*/
|
||||
export const isBlobUrl = (str: string) => {
|
||||
return _isString(str) && str.startsWith('blob:');
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取一段字符串中的所有url
|
||||
* @param str 字符串
|
||||
*/
|
||||
export const getUrls = (str: string): string[] => {
|
||||
return str.match(urlRegex()) ?? [];
|
||||
};
|
||||
|
||||
/**
|
||||
* 用于判定环境变量的值
|
||||
*/
|
||||
export function is(it: string) {
|
||||
return !!it && it !== '0' && it !== 'false';
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据文本内容返回一个内置色卡的颜色
|
||||
* @param text 文本
|
||||
*/
|
||||
export function getTextColorHex(text: string): string {
|
||||
if (!text || !_isString(text)) {
|
||||
return '#ffffff'; // 如果获取不到文本，则返回白色
|
||||
}
|
||||
|
||||
const color = config.color;
|
||||
const id = str2int(text);
|
||||
return color[id % color.length];
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Avatar as AntdAvatar } from 'antd';
|
||||
import _head from 'lodash/head';
|
||||
import _upperCase from 'lodash/upperCase';
|
||||
import _isNil from 'lodash/isNil';
|
||||
import _isEmpty from 'lodash/isEmpty';
|
||||
import _isNumber from 'lodash/isNumber';
|
||||
import type { AvatarProps as AntdAvatarProps } from 'antd/lib/avatar';
|
||||
import { getTextColorHex } from 'pawchat-shared';
|
||||
|
||||
interface AvatarProps extends AntdAvatarProps {
|
||||
name?: string;
|
||||
}
|
||||
export const Avatar: React.FC<AvatarProps> = React.memo((props) => {
|
||||
const src = typeof props.src !== 'string' ? props.src : undefined;
|
||||
|
||||
const name = useMemo(() => _upperCase(_head(props.name)), [props.name]);
|
||||
|
||||
const color = useMemo(
|
||||
() =>
|
||||
// 如果src为空 且 icon为空 则给个固定颜色
|
||||
_isEmpty(src) && _isNil(props.icon)
|
||||
? getTextColorHex(props.name!)
|
||||
: undefined,
|
||||
[src, props.icon, props.name]
|
||||
);
|
||||
|
||||
const style: React.CSSProperties = useMemo(
|
||||
() => ({
|
||||
cursor: 'inherit',
|
||||
userSelect: 'none',
|
||||
...props.style,
|
||||
backgroundColor: color,
|
||||
}),
|
||||
[props.style, color]
|
||||
);
|
||||
|
||||
if (_isNumber(props.size) && typeof style.fontSize === 'undefined') {
|
||||
// 如果props.size是数字且没有指定文字大小
|
||||
// 则自动增加fontSize大小
|
||||
style.fontSize = props.size * 0.4;
|
||||
}
|
||||
|
||||
return (
|
||||
<AntdAvatar {...props} src={src} style={style}>
|
||||
{name}
|
||||
</AntdAvatar>
|
||||
);
|
||||
});
|
||||
Avatar.displayName = 'Avatar';
|
||||
|
||||
export default Avatar;
|
||||
Loading…
Reference in New Issue