Is there "disabled" attribute for grafana ui components

abhinandan13 · May 19, 2020, 7:59am

Hi,
I am using <Segment/> from @grafana/ui.I would like to know is there a way to make this component disabled based on the certain value of state,because i was unable to find the disabled attribute in <Segment/>

vsergeyev · May 19, 2020, 8:08am

Hello @abhinandan13

Please try regular disabled attribute:

<Segment disabled={value} ...

I use it for UI component:

github.com

vsergeyev/loudml-grafana-app/blob/master/src/panel/GraphPanelController.tsx#L524


      appEvents.emit(AppEvents.alertError, [err.message]);
      return;
    });
}

render() {
  const data = this.data;

  return (
    <>
      <Button size="sm" className="btn btn-inverse" disabled={!this.isValid()} onClick={this.onCreateBaselineClick.bind(this)}>
        <i className="fa fa-graduation-cap fa-fw"></i>
        Create Baseline
      </Button>
      <Tooltip placement="top" content={<LoudMLTooltip data={data} />}>
        <span className="gf-form-help-icon">
          <i className="fa fa-info-circle" />
        </span>
      </Tooltip>
    </>
  );

Regards,
V.

abhinandan13 · May 19, 2020, 8:52am

@vsergeyev thanks for the reply,but when i use the disable attribute in <Segment> i get an error saying

Property ‘disabled’ does not exist on type ‘IntrinsicAttributes & SegmentSyncProps & { children?: ReactNode; }’.

Here is a snapshot of my code

alexkhomenko · May 19, 2020, 12:29pm

Segment doesn’t have a disabled prop. You can se the list of the available props at grafana/ui storybook page: https://developers.grafana.com/ui/latest/index.html?path=/docs/data-source-segment-segmentsync--array-options

vsergeyev · May 19, 2020, 2:18pm

Setting className or overriding onChange may help to make it disabled:

github.com

grafana/grafana/blob/master/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx#L44


      onChange({ value: input.value as any, label: input.value });
    } else {
      onClickOutside();
    }
  }
});

return (
  <div ref={ref}>
    <Select
      className={cx(
        css`
          width: ${width > 120 ? width : 120}px;
        `
      )}
      noOptionsMessage={() => noOptionsMessage}
      placeholder=""
      autoFocus={true}
      isOpen={true}
      onChange={onChange}
      options={options}