Kalakoi/GDevelop
1
0
Fork 0
mirror of https://github.com/4ian/GDevelop.git synced 2025-10-15 10:19:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ensure all AutoComplete popover are visible on screen (even if on the bottom of the window)

Browse Source
This commit is contained in:
Florian Rival
2018-05-02 15:03:40 +01:00
parent 34f240fe59
commit 8b6b896520
9 changed files with 35 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
newIDE/app/src/Debugger/Inspectors/RuntimeSceneInspector.js
View File

@@ -10,6 +10,7 @@ import { Line } from '../../UI/Grid';
import mapValues from 'lodash/mapValues';
import AutoComplete from 'material-ui/AutoComplete';
import RaisedButton from 'material-ui/RaisedButton';
import { defaultAutocompleteProps } from '../../UI/AutocompleteProps';
type Props = {|
runtimeScene: GameData,
@@ -127,11 +128,8 @@ export default class RuntimeSceneInspector extends React.Component<
runtimeScene._objects.items && (
<Line noMargin alignItems="baseline">
<AutoComplete
{...defaultAutocompleteProps}
hintText="Enter the name of the object"
fullWidth
menuProps={{
maxHeight: 250,
}}
searchText={this.state.newObjectName}
onUpdateInput={value => {
this.setState({

13
newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/BehaviorField.js
View File

@@ -1,13 +1,8 @@
import React, { Component } from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
const gd = global.gd;
const styles = {
autoCompleteTextField: {
minWidth: 300,
},
};
const fuzzyFilterOrEmpty = (searchText, key) => {
return !key || AutoComplete.fuzzyFilter(searchText, key);
};
@@ -104,12 +99,8 @@ export default class BehaviorField extends Component {
return (
<AutoComplete
{...defaultAutocompleteProps}
floatingLabelText={this._description}
fullWidth
textFieldStyle={styles.autoCompleteTextField}
menuProps={{
maxHeight: 250,
}}
errorText={
!this._behaviorNames.length
? noBehaviorErrorText

13
newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/ExternalEventsField.js
View File

@@ -7,12 +7,7 @@ import {
enumerateExternalEvents,
} from '../../../ProjectManager/EnumerateProjectItems';
import { type ParameterFieldProps } from './ParameterFieldProps.flow';
const styles = {
autoCompleteTextField: {
minWidth: 300,
},
};
import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
const fuzzyFilterOrEmpty = (searchText, key) => {
return !key || AutoComplete.fuzzyFilter(searchText, key);
@@ -79,13 +74,9 @@ export default class ExternalEventsField extends Component<
render() {
return (
<AutoComplete
{...defaultAutocompleteProps}
floatingLabelText={this._description}
fullWidth
id="external-events-field"
textFieldStyle={styles.autoCompleteTextField}
menuProps={{
maxHeight: 250,
}}
searchText={this.state.focused ? this.state.text : this.props.value}
onFocus={() => {
this.setState({

13
newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/KeyField.js
View File

@@ -2,12 +2,7 @@
import React, { Component } from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import { type ParameterFieldProps } from './ParameterFieldProps.flow';
const styles = {
autoCompleteTextField: {
minWidth: 300,
},
};
import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
const fuzzyFilterOrEmpty = (searchText, key) => {
return !key || AutoComplete.fuzzyFilter(searchText, key);
@@ -131,12 +126,8 @@ export default class KeyField extends Component<ParameterFieldProps, State> {
render() {
return (
<AutoComplete
{...defaultAutocompleteProps}
floatingLabelText={this._description}
fullWidth
textFieldStyle={styles.autoCompleteTextField}
menuProps={{
maxHeight: 250,
}}
searchText={this.state.focused ? this.state.text : this.props.value}
onFocus={() => {
this.setState({

13
newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/LayerField.js
View File

@@ -3,12 +3,7 @@ import React, { Component } from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import { mapFor } from '../../../Utils/MapFor';
import { type ParameterFieldProps } from './ParameterFieldProps.flow';
const styles = {
autoCompleteTextField: {
minWidth: 300,
},
};
import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
const fuzzyFilterOrEmpty = (searchText, key) => {
return !key || AutoComplete.fuzzyFilter(searchText, key);
@@ -63,12 +58,8 @@ export default class LayerField extends Component<ParameterFieldProps, State> {
render() {
return (
<AutoComplete
{...defaultAutocompleteProps}
floatingLabelText={this._description}
fullWidth
textFieldStyle={styles.autoCompleteTextField}
menuProps={{
maxHeight: 250,
}}
searchText={this.state.focused ? this.state.text : this.props.value}
onFocus={() => {
this.setState({

10
newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/VariableField.js
View File

@@ -4,6 +4,7 @@ import AutoComplete from 'material-ui/AutoComplete';
import RaisedButton from 'material-ui/RaisedButton';
import { enumerateVariables } from './EnumerateVariables';
import { type ParameterFieldProps } from './ParameterFieldProps.flow';
import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
const styles = {
container: {
@@ -13,9 +14,6 @@ const styles = {
moreButton: {
marginLeft: 10,
},
autoCompleteTextField: {
minWidth: 300,
},
};
const fuzzyFilterOrEmpty = (searchText, key) => {
@@ -72,12 +70,8 @@ export default class VariableField extends Component<Props, State> {
return (
<div style={styles.container}>
<AutoComplete
{...defaultAutocompleteProps}
floatingLabelText={this._description}
fullWidth
textFieldStyle={styles.autoCompleteTextField}
menuProps={{
maxHeight: 250,
}}
searchText={this.state.focused ? this.state.text : this.props.value}
onFocus={() => {
this.setState({

18
newIDE/app/src/ObjectsList/ObjectSelector.js
View File

@@ -3,16 +3,7 @@ import AutoComplete from 'material-ui/AutoComplete';
import Divider from 'material-ui/Divider';
import { enumerateObjectsAndGroups } from './EnumerateObjects';
import { fuzzyOrEmptyFilter } from '../Utils/FuzzyOrEmptyFilter';
const styles = {
autoCompleteTextField: {
minWidth: 300,
},
};
const popoverProps = {
canAutoPosition: true,
};
import { defaultAutocompleteProps } from '../UI/AutocompleteProps';
export default class ObjectSelector extends Component {
state = {
@@ -79,11 +70,7 @@ export default class ObjectSelector extends Component {
return (
<AutoComplete
fullWidth
textFieldStyle={styles.autoCompleteTextField}
menuProps={{
maxHeight: 250,
}}
{...defaultAutocompleteProps}
searchText={this.state.focused ? this.state.text : value}
onFocus={() => {
this.setState({
@@ -116,7 +103,6 @@ export default class ObjectSelector extends Component {
dataSource={this.fullList}
filter={fuzzyOrEmptyFilter}
ref={field => (this._field = field)}
popoverProps={popoverProps}
{...rest}
/>
);

5
newIDE/app/src/ResourcesList/ResourceSelector.js
View File

@@ -10,6 +10,7 @@ import {
type ChooseResourceFunction,
type ResourceKind,
} from '../ResourcesList/ResourceSource.flow';
import { defaultAutocompleteProps } from '../UI/AutocompleteProps';
type Props = {|
project: gdProject,
@@ -152,6 +153,7 @@ export default class ResourceSelector extends React.Component<Props, State> {
return (
<AutoComplete
{...defaultAutocompleteProps}
floatingLabelText={this.props.floatingLabelText || 'Select an image'}
filter={fuzzyOrEmptyFilter}
openOnFocus
@@ -162,9 +164,6 @@ export default class ResourceSelector extends React.Component<Props, State> {
searchText={this.state.resourceName}
fullWidth={this.props.fullWidth}
style={styles.autoComplete}
menuProps={{
maxHeight: 250,
}}
/>
);
}

19
newIDE/app/src/UI/AutocompleteProps.js Normal file
View File

@@ -0,0 +1,19 @@
// @flow
/**
* Provides props for material-ui AutoComplete components that specify
* sensible defaults for size and popover size/positioning.
*/
export const defaultAutocompleteProps = {
fullWidth: true,
textFieldStyle: {
minWidth: 300,
},
menuProps: {
maxHeight: 250, //TODO: try put it in PopoverProps
},
popoverProps: {
// Ensure that the Popover menu is always visible on screen
canAutoPosition: true,
},
};