Attempt to clarify the affect that the users_default has on power levels

This modifies displayed power levels such that:
 - If users_default is !== 0:
   - the power level 0 is displayed as "Restricted (0)"
   - the power level users_default is displayed as "Default ({users_default})"
 - Otherwise:
   - the power level 0 is displayed as "Default (0)"

When changing users_default, to say, 10, when the textual powers are rendered
again, they will take users_default into account. So those previously at 10
and which would have previously have been rendered "Custom of 10" will now
read "Default (10)". Conversely, those that were "Default (0)" will now read
"Restricted (0)".
This commit is contained in:
Luke Barnard 2017-11-13 12:08:53 +00:00
parent 88010fa26c
commit 52af7a7659
5 changed files with 72 additions and 32 deletions

View file

@ -25,6 +25,11 @@ module.exports = React.createClass({
propTypes: {
value: React.PropTypes.number.isRequired,
// The maximum value that can be set with the power selector
maxValue: React.PropTypes.number.isRequired,
// Default user power level for the room
usersDefault: React.PropTypes.number.isRequired,
// if true, the <select/> should be a 'controlled' form element and updated by React
// to reflect the current value, rather than left freeform.
@ -42,21 +47,48 @@ module.exports = React.createClass({
return {
levelRoleMap: {},
reverseRoles: {},
// List of power levels to show in the drop-down
options: [],
};
},
getDefaultProps: function() {
return {
maxValue: Infinity,
usersDefault: 0,
};
},
componentWillMount: function() {
this._initStateFromProps(this.props, true);
},
componentWillReceiveProps: function(newProps) {
this._initStateFromProps(newProps);
},
_initStateFromProps: function(newProps, initial) {
// This needs to be done now because levelRoleMap has translated strings
const levelRoleMap = Roles.levelRoleMap();
const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
const reverseRoles = {};
Object.keys(levelRoleMap).forEach(function(key) {
reverseRoles[levelRoleMap[key]] = key;
});
const options = Object.keys(levelRoleMap).filter((l) => {
return l === undefined || l <= newProps.maxValue;
});
this.setState({
levelRoleMap,
reverseRoles,
custom: levelRoleMap[this.props.value] === undefined,
options,
});
if (initial) {
this.setState({
custom: levelRoleMap[newProps.value] === undefined,
});
}
},
onSelectChange: function(event) {
@ -94,7 +126,14 @@ module.exports = React.createClass({
if (this.props.disabled) {
input = <span>{ this.props.value }</span>;
} else {
input = <input ref="custom" type="text" size="3" defaultValue={this.props.value} onBlur={this.onCustomBlur} onKeyDown={this.onCustomKeyDown} />;
input = <input
ref="custom"
type="text"
size="3"
defaultValue={this.props.value}
onBlur={this.onCustomBlur}
onKeyDown={this.onCustomKeyDown}
/>;
}
customPicker = <span> of { input }</span>;
}
@ -110,13 +149,10 @@ module.exports = React.createClass({
select = <span>{ selectValue }</span>;
} else {
// Each level must have a definition in this.state.levelRoleMap
const levels = [0, 50, 100];
let options = levels.map((level) => {
let options = this.state.options.map((level) => {
return {
value: this.state.levelRoleMap[level],
// Give a userDefault (users_default in the power event) of 0 but
// because level !== undefined, this should never be used.
text: Roles.textualPowerLevel(level, 0),
text: Roles.textualPowerLevel(level, this.props.usersDefault),
};
});
options.push({ value: "Custom", text: _t("Custom level") });