IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana/ui: auto focus threshold editor input (#28360)

Browse Source 
* feat(grafana-ui): autofocus threshold editor input

* refactor(grafana-ui): remove commented out css

* feat(grafana-ui): use ref for autofocus new thresholds editor input

* refactor(grafana-ui): conditionally set input ref for latest threshold

* refactor(grafana-ui): put back createRef for input ref
This commit is contained in:
Jack Westbrook 2020-10-26 12:21:41 +01:00 committed by GitHub
parent 0cdb23a069
commit a8a3686785
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
View File

@ -38,6 +38,8 @@ interface State {
}
export class ThresholdsEditor extends PureComponent<Props, State> {
private latestThresholdInputRef: React.RefObject<HTMLInputElement>;
constructor(props: Props) {
super(props);
@ -45,6 +47,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
steps[0].value = -Infinity;
this.state = { steps };
this.latestThresholdInputRef = React.createRef();
}
onAddThreshold = () => {
@ -67,7 +70,12 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const newThresholds = [...steps, add];
sortThresholds(newThresholds);
this.setState({ steps: newThresholds }, this.onChange);
this.setState({ steps: newThresholds }, () => {
if (this.latestThresholdInputRef.current) {
this.latestThresholdInputRef.current.focus();
}
this.onChange();
});
};
onRemoveThreshold = (threshold: ThresholdWithKey) => {
@ -136,7 +144,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
});
};
renderInput(threshold: ThresholdWithKey, styles: ThresholdStyles) {
renderInput(threshold: ThresholdWithKey, styles: ThresholdStyles, idx: number) {
const isPercent = this.props.thresholds.mode === ThresholdsMode.Percentage;
if (!isFinite(threshold.value)) {
@ -167,6 +175,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
key={isPercent.toString()}
onChange={(event: ChangeEvent<HTMLInputElement>) => this.onChangeThresholdValue(event, threshold)}
value={threshold.value}
ref={idx === 0 ? this.latestThresholdInputRef : null}
onBlur={this.onBlur}
prefix={
<div className={styles.inputPrefix}>
@ -208,13 +217,11 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
{steps
.slice(0)
.reverse()
.map(threshold => {
return (
<div className={styles.item} key={`${threshold.key}`}>
{this.renderInput(threshold, styles)}
</div>
);
})}
.map((threshold, idx) => (
<div className={styles.item} key={`${threshold.key}`}>
{this.renderInput(threshold, styles, idx)}
</div>
))}
</div>
<div>
@ -279,7 +286,6 @@ const getStyles = stylesFactory(
wrapper: css`
display: flex;
flex-direction: column;
// margin-bottom: -${theme.spacing.formSpacingBase * 2}px;
`,
thresholds: css`
display: flex;