changes/NewChip.js at main · ashish-commit987/changes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from "react";
import "./NewChip.css";
import PropTypes from "prop-types";

const NewChip = ({
  label,
  variant ,
  size = "md",
  shape="pill",
  avatar,
  icon,
  onClick,
  className = "",
  ariaLabel,
}) => {
  const Component = onClick && typeof(onClick)==="function" ? "button" : "div";

  return (
    <Component
      className={`
        newchip
        chip-${variant}
        chip-${size}
        chip-shape-${shape}

        ${className}
      `}
      onClick={typeof(onClick)==="function" ? onClick : undefined}
      aria-label={ariaLabel || label}
    >
      {avatar && (
        <span className="chip-avatar" aria-hidden="true">
          {avatar}
        </span>
      )}

      {icon && (
        <span className="chip-icon" aria-hidden="true">
          {icon}
        </span>
      )}

      <span className="">{label}</span>
    </Component>
  );
};

NewChip.propTypes = {
  label: PropTypes.string.isRequired,
  variant: [
    "info",
    "highlight",
    "error",
    "light",
    "dark",
    "success",
    "warning",
    "highlight2"
  ],
  size: PropTypes.oneOf(["sm", "md", "lg"]),
  shape: PropTypes.oneOf([ "standard", "pill"]),
  avatar: PropTypes.node,
  icon: PropTypes.node,

  onClick: PropTypes.func,
  className: PropTypes.string,
  ariaLabel: PropTypes.string,
};

export default NewChip;