emotion#cx TypeScript Examples

SeriesTableRow: React.FC<SeriesTableRowProps> = ({ color, label, value, isActive }) => {
  const theme = useTheme();
  const styles = getSeriesTableRowStyles(theme);
  return (
    <div className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}>
      {color && (
        <div className={styles.seriesTableCell}>
          <SeriesIcon color={color} className={styles.icon} />
        </div>
      )}
      <div className={cx(styles.seriesTableCell, styles.label)}>{label}</div>
      <div className={cx(styles.seriesTableCell, styles.value)}>{value}</div>
    </div>
  );
}

TextFieldComponent: React.FunctionComponent<TextFieldProps> = (
  props
) => {
  const {
    id,
    name,
    onChange,
    onBlur,
    value,
    error,
    inputProps,
    variant,
    ...otherProps
  } = props;

  const [field, meta] = Boolean(name) ? useField(name) : [];
  const hasError = error || Boolean(meta && meta.touched && meta.error);
  const helperText = Boolean(props.helperText) ? props.helperText : meta?.error;
  const innerValue = Boolean(value) || value === '' ? value : field?.value;

  return (
    <MuiTextField
      {...otherProps}
      id={name || id}
      name={name}
      onChange={onChange || field?.onChange}
      onBlur={onBlur || field?.onBlur}
      value={innerValue}
      error={hasError}
      helperText={hasError ? helperText : ''}
      inputProps={{
        ...inputProps,
        className: cx(inputProps?.className, innerClasses.input),
      }}
      variant={variant}
    />
  );
}

FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) => {
  const theme = useContext(ThemeContext);
  return (
    <div
      className={css`
        padding: ${theme.spacing.xxs} ${theme.spacing.sm};
        color: white;
        background: ${selected ? theme.colors.blueLight : theme.colors.blueShade};
        border-radius: 16px;
        display: inline-block;
        cursor: pointer;
      `}
      onClick={onClick}
    >
      {selected && (
        <i
          className={cx(
            'fa fa-check',
            css`
              margin-right: 4px;
            `
          )}
        />
      )}
      {label}
    </div>
  );
}

Row = ({
  gap = 40,
  align = "self-start",
  type,
  className,
  ...props
}: RowProps) => (
  <div
    {...props}
    className={cx(
      className,
      css`
        align-items: ${align};
        display: grid;
        grid-auto-flow: row;
        grid-gap: ${gap}px;
        margin: 45px 0;

        > * {
          margin: 0 !important;
        }

        @media (min-width: 992px) {
          grid-auto-flow: column;
          grid-template-columns: ${type === "large-text"
            ? "2fr 1fr"
            : "repeat(auto-fit, minmax(200px, 1fr))"};
        }
      `
    )}
  />
)

DataLinksListItem: FC<DataLinksListItemProps> = ({
  index,
  link,
  data,
  onChange,
  suggestions,
  isEditing,
  onEdit,
  onRemove,
}) => {
  const theme = useTheme();
  const styles = getDataLinkListItemStyles(theme);

  const hasTitle = link.title.trim() !== '';
  const hasUrl = link.url.trim() !== '';

  return (
    <div className={styles.wrapper}>
      <HorizontalGroup justify="space-between">
        <div>
          <div className={cx(!hasTitle && styles.notConfigured)}>{hasTitle ? link.title : 'No data link provided'}</div>
          <div className={cx(!hasUrl && styles.notConfigured, styles.url)}>{hasUrl ? link.url : 'No url provided'}</div>
        </div>

        <HorizontalGroup>
          <div onClick={onEdit} className={styles.action}>
            <Icon name="pencil" />
          </div>
          <div onClick={onRemove} className={cx(styles.action, styles.remove)}>
            <Icon name="trash" />
          </div>
        </HorizontalGroup>
      </HorizontalGroup>
    </div>
  );
}

Toolbar = React.forwardRef(
  (
    { className, ...props }: PropsWithChildren<BaseProps>,
    ref:
      | MutableRefObject<HTMLDivElement | null>
      | ((instance: HTMLDivElement | null) => void)
      | null
  ) => (
    <Menu
      {...props}
      ref={ref}
      className={cx(
        className,
        css`
          position: relative;
          padding: 1px 18px 17px;
          margin: 0 -20px;
          border-bottom: 2px solid #eee;
          margin-bottom: 20px;
        `
      )}
    />
  )
)

FormField: FunctionComponent<Props> = ({
  label,
  tooltip,
  labelWidth,
  inputWidth,
  inputEl,
  className,
  ...inputProps
}) => {
  return (
    <div className={cx('form-field', className)}>
      <FormLabel width={labelWidth} tooltip={tooltip}>
        {label}
      </FormLabel>
      {inputEl || (
        <input type="text" className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`} {...inputProps} />
      )}
    </div>
  );
}

Instruction = React.forwardRef(
  (
    { className, ...props }: PropsWithChildren<BaseProps>,
    ref:
      | MutableRefObject<HTMLDivElement | null>
      | ((instance: HTMLDivElement | null) => void)
      | null
  ) => (
    <div
      {...props}
      ref={ref}
      className={cx(
        className,
        css`
          white-space: pre-wrap;
          margin: 0 -20px 10px;
          padding: 10px 20px;
          font-size: 14px;
          background: #f8f8e8;
        `
      )}
    />
  )
)

Legend: React.FC<LabelProps> = ({ children, className, ...legendProps }) => {
  const theme = useTheme();
  const styles = getLegendStyles(theme);

  return (
    <legend className={cx(styles.legend, className)} {...legendProps}>
      {children}
    </legend>
  );
}

TextFieldComponent: React.FunctionComponent<TextFieldProps> = (
  props
) => {
  const { name, onChange, onBlur, value, error, inputProps } = props;

  const [field, meta] = Boolean(name) ? useField(name) : [];
  const hasError = error || Boolean(meta && meta.touched && meta.error);
  const helperText = Boolean(field) ? meta?.error : props.helperText;

  return (
    <MuiTextField
      {...props}
      name={name}
      id={name}
      onChange={onChange || field?.onChange}
      onBlur={onBlur || field?.onBlur}
      value={value || field?.value}
      error={hasError}
      helperText={hasError ? helperText : ''}
      fullWidth={true}
      margin="normal"
      inputProps={{
        ...inputProps,
        className: cx(inputProps?.className, classes.input),
      }}
    />
  );
}

Label: React.FC<LabelProps> = ({ children, description, className, ...labelProps }) => {
  const theme = useTheme();
  const styles = getLabelStyles(theme);

  return (
    <div className={cx(styles.label, className)}>
      <label {...labelProps}>
        {children}
        {description && <span className={styles.description}>{description}</span>}
      </label>
    </div>
  );
}

Button = React.forwardRef(
  (
    {
      className,
      active,
      reversed,
      ...props
    }: PropsWithChildren<
      {
        active: boolean;
        reversed: boolean;
      } & BaseProps
    >,
    ref:
      | MutableRefObject<HTMLSpanElement | null>
      | ((instance: HTMLSpanElement | null) => void)
      | null
  ) => (
    <span
      {...props}
      ref={ref}
      className={cx(
        className,
        css`
          cursor: pointer;
          color: ${reversed
            ? active
              ? "white"
              : "#aaa"
            : active
            ? "black"
            : "#aaa"};
        `
      )}
    />
  )
)

ListComponent: React.FunctionComponent<Props> = (props) => {
  const {
    clientList,
    onLoadClientList,
    orderList,
    onLoadOrderList,
    className,
  } = props;

  return (
    <div className={cx(classes.root, className)}>
      <Button
        className={classes.loadClientButton}
        variant="contained"
        color="secondary"
        onClick={onLoadClientList}
      >
        Load Clients
      </Button>
      <TableComponent className={classes.clientList} itemList={clientList} />
      <Button
        className={classes.loadOrderButton}
        variant="contained"
        color="secondary"
        onClick={onLoadOrderList}
      >
        Load Orders
      </Button>
      <TableComponent className={classes.orderList} itemList={orderList} />
    </div>
  );
}

FieldValidationMessage: React.FC<FieldValidationMessageProps> = ({ children, className }) => {
  const theme = useTheme();
  const styles = getFieldValidationMessageStyles(theme);

  return (
    <div className={cx(styles.fieldValidationMessage, className)}>
      <i className={cx(styles.fieldValidationMessageIcon, 'fa', 'fa-warning')} />
      {children}
    </div>
  );
}

SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
  //const theme = useTheme();
  const styles = getStyles();

  const words: Array<{ text: string; value: number }> = [];
  let tags: string[] = [];
  let count: number[] = [];
  let stopWords: string[] = [];

  const tagsField = data.series[options.series_index].fields.find(field =>
    options.datasource_tags_field ? field.name === options.datasource_tags_field : field.type === FieldType.string
  );
  const countField = data.series[options.series_index].fields.find(field =>
    options.datasource_count_field ? field.name === options.datasource_count_field : field.type === FieldType.number
  );
  const stopWordsField = data.series[options.series_index].fields.find(field =>
    options.datasource_stop_words ? field.name === options.datasource_stop_words : field.type === FieldType.string
  );
  if (tagsField && countField) {
    tags = tagsField.values.toArray();
    count = countField.values.toArray();
  }
  if (stopWordsField && options.datasource_stop_words !== undefined) {
    stopWords = stopWordsField.values.toArray();
  }
  if (options.stop_words !== undefined) {
    options.stop_words.split(',').forEach(element => {
      stopWords.push(element);
    });
  }
  tags.forEach((value, index) => {
    if (stopWords.indexOf(value) === -1) {
      words.push({ text: value, value: count[index] });
    }
  });

  return (
    <div
      className={cx(
        styles.wrapper,
        css`
          width: ${width}px;
          height: ${height}px;
        `
      )}
    >
      <div style={{ height: height, width: width }}>
        <ReactWordcloud words={words} options={options.wordCloudOptions} />
      </div>
    </div>
  );
}

AdHocFilter: React.FunctionComponent<Props> = props => {
  const theme = useContext(ThemeContext);
  const styles = getStyles(theme);

  const onChange = (changeType: ChangeType) => (item: SelectableValue<string>) => {
    const { onKeyChanged, onValueChanged, onOperatorChanged } = props;

    if (!item.value) {
      return;
    }

    switch (changeType) {
      case ChangeType.Key:
        onKeyChanged(item.value);
        break;
      case ChangeType.Operator:
        onOperatorChanged(item.value);
        break;
      case ChangeType.Value:
        onValueChanged(item.value);
        break;
    }
  };

  const stringToOption = (value: string) => ({ label: value, value: value });

  const { keys, initialKey, keysPlaceHolder, initialOperator, values, initialValue, valuesPlaceHolder } = props;
  const operators = ['=', '!='];
  const keysAsOptions = keys ? keys.map(stringToOption) : [];
  const selectedKey = initialKey ? keysAsOptions.filter(option => option.value === initialKey) : undefined;
  const valuesAsOptions = values ? values.map(stringToOption) : [];
  const selectedValue = initialValue ? valuesAsOptions.filter(option => option.value === initialValue) : undefined;
  const operatorsAsOptions = operators.map(stringToOption);
  const selectedOperator = initialOperator
    ? operatorsAsOptions.filter(option => option.value === initialOperator)
    : undefined;

  return (
    <div className={cx([styles.keyValueContainer])}>
      <Select
        options={keysAsOptions}
        isSearchable
        value={selectedKey}
        onChange={onChange(ChangeType.Key)}
        placeholder={keysPlaceHolder}
      />
      <Select options={operatorsAsOptions} value={selectedOperator} onChange={onChange(ChangeType.Operator)} />
      <Select
        options={valuesAsOptions}
        isSearchable
        value={selectedValue}
        onChange={onChange(ChangeType.Value)}
        placeholder={valuesPlaceHolder}
      />
    </div>
  );
}

EditorValue = React.forwardRef(
  (
    {
      className,
      value,
      ...props
    }: PropsWithChildren<
      {
        value: any;
      } & BaseProps
    >,
    ref:
      | MutableRefObject<HTMLDivElement | null>
      | ((instance: HTMLDivElement | null) => void)
      | null
  ) => {
    const textLines = value.document.nodes
      .map((node: any) => node.text)
      .toArray()
      .join("\n");
    return (
      <div
        ref={ref}
        {...props}
        className={cx(
          className,
          css`
            margin: 30px -20px 0;
          `
        )}
      >
        <div
          className={css`
            font-size: 14px;
            padding: 5px 20px;
            color: #404040;
            border-top: 2px solid #eeeeee;
            background: #f8f8f8;
          `}
        >
          Slate's value as text
        </div>
        <div
          className={css`
            color: #404040;
            font: 12px monospace;
            white-space: pre-wrap;
            padding: 10px 20px;
            div {
              margin: 0 0 0.5em;
            }
          `}
        >
          {textLines}
        </div>
      </div>
    );
  }
)

LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
  const background = css`
    background: url(public/img/heatmap_bg_test.svg);
    background-size: cover;
  `;

  return <div className={cx(background, className)}>{children}</div>;
}