Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Icon, Tag } from 'antd';
- import React, { FC, useEffect, useMemo, useState } from 'react';
- import styles from './Label.module.scss';
- import {
- LabelProps,
- IconLeftProps,
- IconRightProps,
- IconTagProps,
- CheckLabelProps,
- CrossLabelProps,
- } from './interfaces';
- let className;
- const BaseLabel: FC<LabelProps> = (props) => {
- const [values, changeValues] = useState(
- props || {
- color: 'default',
- textLabel: 'Label',
- backgroundColor: 'rgba(1,113,211,0.05)',
- opacity: 1,
- size: 'default',
- }
- );
- useEffect(() => {
- changeValues(props);
- }, [props]);
- const { color, textLabel, opacity, backgroundColor, size } = values;
- console.log(backgroundColor);
- className = `ant-label-${size}`;
- const style = [styles.label, className, styles.position].join(' ');
- const labelStyle = { color, opacity, backgroundColor };
- return (
- <Tag style={labelStyle} className={style}>
- {textLabel}
- </Tag>
- );
- };
- const IconLeft: FC<IconLeftProps> = (props) => {
- return (
- <>
- <Icon className={styles.icon} type={props.iconType} />
- {props.textLabel}
- </>
- );
- };
- const IconRight: FC<IconRightProps> = (props) => {
- return (
- <>
- {props.textLabel}
- <Icon className={styles.icon} type={props.iconType} />
- </>
- );
- };
- const IconTag: FC<IconTagProps> = (props) => {
- if (props.position === 'left') {
- return <IconLeft {...props} />;
- } else {
- return <IconRight {...props} />;
- }
- };
- const CheckLabel: FC<CheckLabelProps> = (props) => {
- const {
- color,
- textLabel,
- opacity,
- backgroundColor,
- size,
- iconPosition,
- } = props;
- className = `ant-label-${size}`;
- const style = [styles.label, className, styles.position].join(' ');
- const labelStyle = { color, opacity, backgroundColor };
- const [text, changeText] = useState(textLabel);
- useEffect(() => changeText(textLabel), [textLabel]);
- return (
- <Tag style={labelStyle} className={style}>
- <IconTag {...props} />
- </Tag>
- );
- };
- const CrossLabel: FC<CrossLabelProps> = (props) => {
- const {
- color,
- textLabel,
- opacity,
- backgroundColor,
- size,
- iconPosition,
- } = props;
- className = `ant-label-${size}`;
- const style = [styles.label, className, styles.position].join(' ');
- const labelStyle = { color, opacity, backgroundColor };
- const [text, changeText] = useState(textLabel);
- useEffect(() => changeText(textLabel));
- return (
- <Tag style={labelStyle} className={style}>
- <IconTag {...props} />
- </Tag>
- );
- };
- const Label = {
- BaseLabel,
- CheckLabel,
- CrossLabel,
- };
- export default Label;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement