前端项目实战之文本标签和特殊文字组件(很简单)

小半 • 2022年12月25日下午5:25 • 前端开发 • 阅读 362

一、特别标签

组件名： TagComp
入口文件：index.tsx
样式文件：index.module.less

index.tsx

import type { CSSProperties, ReactDOM } from 'react';
import cs from 'classnames';

import Style from './index.module.less';

interface PropsType {
  children: string | ReactDOM;
  style?: CSSProperties;
  className?: string;
  theme?: 'default' | 'warning' | 'error' | 'success' | 'grey';
}

const TagComp = (props: PropsType) => {
  const { children, style, className, theme = 'default' } = props;
  return (
    <>
      {children && (
        <span
          className={cs(Style.tagComp, theme && Style[`tagComp_${theme}`], className)}
          style={style}
        >
          {children}
        </span>
      )}
    </>
  );
};

export default TagComp;

index.module.less

.tagComp {
  padding: 2px 8px;
  font-weight: 400;
  font-size: 12px;
  border-radius: 4px;
}

.tagComp_default {
  background-color: #e6f0fc;
  color: #006BE1;
}

.tagComp_success {
  background-color: #e6f8ee;
  color: #06B752;
}

.tagComp_warning {
  background-color: #fff4e5;
  color: #FF9500;
}

.tagComp_grey {
  background-color: #edf1f2;
  color: #31456A;
}

二、文案标签

组件名： PhotoPreview
入口文件：index.tsx
样式文件：index.module.less

index.tsx

import type { CSSProperties, ReactDOM } from 'react';
import { useCallback } from 'react';
import { useMemo } from 'react';
import cs from 'classnames';

import Style from './index.module.less';

interface PropsType {
  onClick?: () => void;
  children: string | ReactDOM;
  fontSize?: string;
  style?: CSSProperties;
  className?: string | undefined;
  theme?: 'default' | 'warning' | 'error' | 'success';
}

const TextComp = (props: PropsType) => {
  const { children, fontSize = '14px', style = {}, className, theme = 'default', onClick } = props;
  const thisStyle = useMemo(() => {
    if (onClick) Object.assign(style, { cursor: 'pointer' });
    Object.assign(style, { fontSize });
    return style;
  }, [onClick, style, fontSize]);

  const isNil = useCallback(
    (value: any) => value === undefined || value === null || value === '',
    []
  );

  return (
    <>
      {!isNil(children) && (
        <span
          onClick={onClick}
          className={cs(Style.textComp, theme && Style[`textComp_${theme}`], className)}
          style={thisStyle}
        >
          {children}
        </span>
      )}
    </>
  );
};

export default TextComp;

index.module.less

.textComp {
  font-weight: 400;
  font-size: 13px;
}

.textComp_default {
  color: #0068FF;
}

.textComp_success {
  color: #06B752;
}

.textComp_warning {
  color: #FF9000;
}

.textComp_error {
  color: #f31515;
}