Determine whether power level is custom once Roles have been determined
Instead of potentially inspecting an empty {} before mounting. This fixes an issue where "Custom of N" would appear on the first mount of MemberInfo - part of https://github.com/vector-im/riot-web/issues/5107#issuecomment-331882294
This commit is contained in:
parent
4b206a0117
commit
88010fa26c
1 changed files with 17 additions and 12 deletions
|
@ -20,9 +20,6 @@ import React from 'react';
|
||||||
import * as Roles from '../../../Roles';
|
import * as Roles from '../../../Roles';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
|
|
||||||
let LEVEL_ROLE_MAP = {};
|
|
||||||
const reverseRoles = {};
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'PowerSelector',
|
displayName: 'PowerSelector',
|
||||||
|
|
||||||
|
@ -43,15 +40,23 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
custom: (LEVEL_ROLE_MAP[this.props.value] === undefined),
|
levelRoleMap: {},
|
||||||
|
reverseRoles: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
LEVEL_ROLE_MAP = Roles.levelRoleMap();
|
// This needs to be done now because levelRoleMap has translated strings
|
||||||
Object.keys(LEVEL_ROLE_MAP).forEach(function(key) {
|
const levelRoleMap = Roles.levelRoleMap();
|
||||||
reverseRoles[LEVEL_ROLE_MAP[key]] = key;
|
const reverseRoles = {};
|
||||||
});
|
Object.keys(levelRoleMap).forEach(function(key) {
|
||||||
|
reverseRoles[levelRoleMap[key]] = key;
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
levelRoleMap,
|
||||||
|
reverseRoles,
|
||||||
|
custom: levelRoleMap[this.props.value] === undefined,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onSelectChange: function(event) {
|
onSelectChange: function(event) {
|
||||||
|
@ -74,7 +79,7 @@ module.exports = React.createClass({
|
||||||
getValue: function() {
|
getValue: function() {
|
||||||
let value;
|
let value;
|
||||||
if (this.refs.select) {
|
if (this.refs.select) {
|
||||||
value = reverseRoles[this.refs.select.value];
|
value = this.state.reverseRoles[this.refs.select.value];
|
||||||
if (this.refs.custom) {
|
if (this.refs.custom) {
|
||||||
if (value === undefined) value = parseInt( this.refs.custom.value );
|
if (value === undefined) value = parseInt( this.refs.custom.value );
|
||||||
}
|
}
|
||||||
|
@ -98,17 +103,17 @@ module.exports = React.createClass({
|
||||||
if (this.state.custom) {
|
if (this.state.custom) {
|
||||||
selectValue = "Custom";
|
selectValue = "Custom";
|
||||||
} else {
|
} else {
|
||||||
selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom";
|
selectValue = this.state.levelRoleMap[this.props.value] || "Custom";
|
||||||
}
|
}
|
||||||
let select;
|
let select;
|
||||||
if (this.props.disabled) {
|
if (this.props.disabled) {
|
||||||
select = <span>{ selectValue }</span>;
|
select = <span>{ selectValue }</span>;
|
||||||
} else {
|
} else {
|
||||||
// Each level must have a definition in LEVEL_ROLE_MAP
|
// Each level must have a definition in this.state.levelRoleMap
|
||||||
const levels = [0, 50, 100];
|
const levels = [0, 50, 100];
|
||||||
let options = levels.map((level) => {
|
let options = levels.map((level) => {
|
||||||
return {
|
return {
|
||||||
value: LEVEL_ROLE_MAP[level],
|
value: this.state.levelRoleMap[level],
|
||||||
// Give a userDefault (users_default in the power event) of 0 but
|
// Give a userDefault (users_default in the power event) of 0 but
|
||||||
// because level !== undefined, this should never be used.
|
// because level !== undefined, this should never be used.
|
||||||
text: Roles.textualPowerLevel(level, 0),
|
text: Roles.textualPowerLevel(level, 0),
|
||||||
|
|
Loading…
Reference in a new issue