You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

CircularLabel.web.js 1.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. // @flow
  2. import React, { Component } from 'react';
  3. type Props = {
  4. /**
  5. * The children to be displayed within {@code CircularLabel}.
  6. */
  7. children: React$Node,
  8. /**
  9. * Additional CSS class names to add to the root of {@code CircularLabel}.
  10. */
  11. className: string,
  12. /**
  13. * HTML ID attribute to add to the root of {@code CircularLabel}.
  14. */
  15. id: string
  16. };
  17. /**
  18. * React Component for showing short text in a circle.
  19. *
  20. * @extends Component
  21. */
  22. export default class CircularLabel extends Component<Props> {
  23. /**
  24. * Default values for {@code CircularLabel} component's properties.
  25. *
  26. * @static
  27. */
  28. static defaultProps = {
  29. className: ''
  30. };
  31. /**
  32. * Implements React's {@link Component#render()}.
  33. *
  34. * @inheritdoc
  35. * @returns {ReactElement}
  36. */
  37. render() {
  38. const {
  39. children,
  40. className,
  41. id
  42. } = this.props;
  43. return (
  44. <div
  45. className = { `circular-label ${className}` }
  46. id = { id }>
  47. { children }
  48. </div>
  49. );
  50. }
  51. }