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