render()

in src/components/QueryEditor/EditorField.tsx [46:76]


  render() {
    const { label, optional, tooltip, tooltipInteractive, children, width, theme, ...fieldProps } = this.props;

    const styles = this.getStyles();

    // Null check for backward compatibility
    const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId?.(children);

    const labelEl = (
      <>
        <label className={styles.label} htmlFor={childInputId}>
          {label}
          {optional && <span className={styles.optional}> - optional</span>}
          {tooltip && (
            <Tooltip placement="top" content={tooltip} theme="info" interactive={tooltipInteractive}>
              <Icon tabIndex={0} name="info-circle" size="sm" className={styles.icon} />
            </Tooltip>
          )}
        </label>
        <Space v={0.5} />
      </>
    );

    return (
      <div className={styles.root}>
        <Field className={styles.field} label={labelEl} {...fieldProps}>
          {children}
        </Field>
      </div>
    );
  }