emotion#cx TypeScript Examples

The following examples show how to use emotion#cx. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: SeriesTable.tsx From grafana-chinese with Apache License 2.0

6 votes

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>
  );
}

Example #2

Source File: text-field.component.tsx From master-frontend-lemoncode with MIT License

6 votes

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}
    />
  );
}

Example #3

Source File: FilterByRefIdTransformerEditor.tsx From grafana-chinese with Apache License 2.0

6 votes

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>
  );
}

Example #4

Source File: index.tsx From doc-blocks with MIT License

6 votes

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))"};
        }
      `
    )}
  />
)

Example #5

Source File: DataLinksListItem.tsx From grafana-chinese with Apache License 2.0

6 votes

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>
  );
}

Example #6

Source File: RichTextControls.tsx From Full-Stack-React-TypeScript-and-Node with MIT License

6 votes

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;
        `
      )}
    />
  )
)

Example #7

Source File: FormField.tsx From grafana-chinese with Apache License 2.0

6 votes

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>
  );
}

Example #8

Source File: RichTextControls.tsx From Full-Stack-React-TypeScript-and-Node with MIT License

6 votes

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;
        `
      )}
    />
  )
)

Example #9

Source File: Legend.tsx From grafana-chinese with Apache License 2.0

6 votes

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

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

Example #10

Source File: text-field.component.tsx From master-frontend-lemoncode with MIT License

6 votes

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),
      }}
    />
  );
}

Example #11

Source File: Label.tsx From grafana-chinese with Apache License 2.0

6 votes

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>
  );
}

Example #12

Source File: RichTextControls.tsx From Full-Stack-React-TypeScript-and-Node with MIT License

6 votes

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"};
        `
      )}
    />
  )
)

Example #13

Source File: list.component.tsx From master-frontend-lemoncode with MIT License

6 votes

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>
  );
}

Example #14

Source File: FieldValidationMessage.tsx From grafana-chinese with Apache License 2.0

6 votes

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>
  );
}

Example #15

Source File: SimplePanel.tsx From magnesium-wordcloud-panel with Apache License 2.0

5 votes

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>
  );
}

Example #16

Source File: AdHocFilter.tsx From grafana-chinese with Apache License 2.0

5 votes

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>
  );
}

Example #17

Source File: RichTextControls.tsx From Full-Stack-React-TypeScript-and-Node with MIT License

5 votes

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>
    );
  }
)

Example #18

Source File: Branding.tsx From grafana-chinese with Apache License 2.0

5 votes

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>;
}