add scrolling to customizeFields when there are a lot of them in CEO options
parent
bcc87a682a
commit
5348cfae92
|
@ -28,7 +28,7 @@ class GraphOptionsCustomizableField extends PureComponent<Props, {}> {
|
|||
onFieldUpdate({internalName, displayName: rename, visible})
|
||||
}
|
||||
|
||||
handleToggleVisible() {
|
||||
handleToggleVisible(e) {
|
||||
const {onFieldUpdate, internalName, displayName, visible} = this.props
|
||||
onFieldUpdate({internalName, displayName, visible: !visible})
|
||||
}
|
||||
|
|
|
@ -18,17 +18,19 @@ const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
|
|||
return (
|
||||
<div className="graph-options-group">
|
||||
<label className="form-label">Customize Fields</label>
|
||||
{fields.map(field => {
|
||||
return (
|
||||
<GraphOptionsCustomizableField
|
||||
key={uuid.v4()}
|
||||
internalName={field.internalName}
|
||||
displayName={field.displayName}
|
||||
visible={field.visible}
|
||||
onFieldUpdate={onFieldUpdate}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
<div className="field-controls--group">
|
||||
{fields.map(field => {
|
||||
return (
|
||||
<GraphOptionsCustomizableField
|
||||
key={uuid.v4()}
|
||||
internalName={field.internalName}
|
||||
displayName={field.displayName}
|
||||
visible={field.visible}
|
||||
onFieldUpdate={onFieldUpdate}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -123,7 +123,7 @@ export class TableOptions extends PureComponent<Props, {}> {
|
|||
const {handleUpdateTableOptions, tableOptions} = this.props
|
||||
const {fieldNames} = tableOptions
|
||||
const updatedFields = fieldNames.map(
|
||||
op => (op.internalName === field.internalName ? field : op)
|
||||
f => (f.internalName === field.internalName ? field : f)
|
||||
)
|
||||
handleUpdateTableOptions({...tableOptions, fieldNames: updatedFields})
|
||||
}
|
||||
|
|
|
@ -256,7 +256,10 @@ button.btn.btn-primary.btn-sm.gauge-controls--add-threshold {
|
|||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
|
||||
.field-controls--group {
|
||||
max-height: 235px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.field-controls--label, .field-controls--label-hidden {
|
||||
@extend %gauge-controls-label-styles;
|
||||
color: $g16-pearl;
|
||||
|
|
Loading…
Reference in New Issue