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

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