Spaces:
Build error
Build error
File size: 4,850 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import classNames from 'classnames';
import { connect } from 'react-redux';
import { FormattedMessage, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
import bindAll from 'lodash.bindall';
import Input from '../forms/input.jsx';
import Box from '../box/box.jsx';
import styles from './variables-tab.css';
class VariablesTab extends React.Component {
constructor(props) {
super(props);
bindAll(this, [
"handleSearch",
"renderVariable"
]);
this.state = {
query: ''
};
}
handleSearch (event) {
this.setState({
query: String(event.target.value).toLowerCase()
})
}
renderVariable(variable) {
const isTooBig = (variable.type === 'list' ? variable.value.join('\n').length > 5000000
: String(variable.value).length > 1000000) && !this.props.showLargeValue[variable.id];
const isEditing = variable.id === this.props.editingVariableId;
const isEditingName = isEditing && this.props.editingVariableInput === 'name';
const isEditingValue = isEditing && this.props.editingVariableInput === 'value';
const displayVariableValue = isEditingValue ? this.props.editingVariableEditValue
: (variable.type === 'list' ? variable.value.join('\n') : variable.value);
const inputValueProps = {
onFocus: () => this.props.onClickVariableValue(variable),
onBlur: (event) => this.props.onEditVariableValue(event, variable),
onChange: this.props.onTypeVariableValue,
onKeyDown: (event) => this.props.onTypeVariableValue(event, variable),
};
return <tr>
<td className={styles.variableName}>
<input
onFocus={() => this.props.onClickVariableName(variable)}
onBlur={(event) => this.props.onEditVariableName(event, variable)}
onChange={this.props.onTypeVariableName}
onKeyDown={(event) => this.props.onTypeVariableName(event, variable)}
value={isEditingName ? this.props.editingVariableEditName : variable.name}
/>
</td>
<td className={styles.variableValue}>
{isTooBig ?
<button
onClick={() => this.props.onClickShowLarge(variable.id)}
className={styles.valueTooBig}
>
Click to display very large value.
</button>
: variable.type === 'list' ? <textarea {...inputValueProps} value={displayVariableValue} />
: <input {...inputValueProps} value={displayVariableValue} />
}
</td>
</tr>
}
render() {
const {
localVariables,
globalVariables,
} = this.props;
const filteredLocal = localVariables.filter(varr => varr.name.toLowerCase().includes(this.state.query));
const filteredGlobal = globalVariables.filter(varr => varr.name.toLowerCase().includes(this.state.query));
return (<div className={styles.editorWrapper}>
<Box
className={styles.editorContainer}
>
<Input
placeholder="Search"
className={styles.searchBar}
onChange={this.handleSearch}
/>
{filteredLocal.length > 0 && <div>
<span className={styles.heading}>Variables for this sprite</span>
<table>
{filteredLocal.map(this.renderVariable)}
</table>
</div>}
{filteredGlobal.length > 0 && <div>
<span className={styles.heading}>Variables for all sprites</span>
<table>
{filteredGlobal.map(this.renderVariable)}
</table>
</div>}
</Box>
</div>)
}
}
VariablesTab.propTypes = {
localVariables: PropTypes.any,
globalVariables: PropTypes.any,
showLargeValue: PropTypes.any,
editingVariableId: PropTypes.string,
editingVariableInput: PropTypes.string,
editingVariableEditName: PropTypes.string,
editingVariableEditValue: PropTypes.string,
onClickShowLarge: PropTypes.func.isRequired,
onClickVariableName: PropTypes.func.isRequired,
onClickVariableValue: PropTypes.func.isRequired,
onEditVariableName: PropTypes.func.isRequired,
onEditVariableValue: PropTypes.func.isRequired,
onTypeVariableName: PropTypes.func.isRequired,
onTypeVariableValue: PropTypes.func.isRequired,
};
export default injectIntl(VariablesTab);
|