All files / app/components StackedLabel.tsx

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                          4x           4x 7x 7x   7x 1x   7x                           4x  
import React from 'react';
import { style } from 'app/styles';
 
export interface StackedLabelProps {
  // This is the text or JSX that gets wrapped in stacked label
  children: string | JSX.Element;
  label: string;
  title?: string;
  labelStyle?: object | string;
  isSelected?: boolean;
  onLabelClick?: (evt) => void;
}
 
const defaultContainerStyle = {
  flexGrow: 0,
  marginRight: 20,
  marginBottom: 10,
};
 
export const StackedLabel = (props: StackedLabelProps): JSX.Element => {
  const labelStyles = [props.labelStyle, 'smallerText'];
  Iif (props.isSelected) {
    labelStyles.push('selected');
  } else if (props.onLabelClick) {
    labelStyles.push('selectable');
  }
  return (
    <div style={defaultContainerStyle}>
      <div
        style={style(labelStyles)}
        title={props.title}
        onClick={props.onLabelClick}
      >
        {props.label}
      </div>
      <div>{props.children}</div>
    </div>
  );
};
 
StackedLabel.displayName = 'StackedLabel';