2016-01-18 02:58:38 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
2017-04-10 12:09:26 +03:00
|
|
|
import React from 'react';
|
|
|
|
import * as Roles from '../../../Roles';
|
2016-01-18 02:58:38 +03:00
|
|
|
|
2017-05-23 17:16:31 +03:00
|
|
|
var LEVEL_ROLE_MAP = {};
|
2016-01-18 02:58:38 +03:00
|
|
|
var reverseRoles = {};
|
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'PowerSelector',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
value: React.PropTypes.number.isRequired,
|
2016-06-23 13:15:55 +03:00
|
|
|
|
2016-03-22 20:17:40 +03:00
|
|
|
// if true, the <select/> should be a 'controlled' form element and updated by React
|
|
|
|
// to reflect the current value, rather than left freeform.
|
|
|
|
// MemberInfo uses controlled; RoomSettings uses non-controlled.
|
2016-06-23 13:15:55 +03:00
|
|
|
//
|
|
|
|
// ignored if disabled is truthy. false by default.
|
|
|
|
controlled: React.PropTypes.bool,
|
|
|
|
|
|
|
|
// should the user be able to change the value? false by default.
|
2016-01-18 02:58:38 +03:00
|
|
|
disabled: React.PropTypes.bool,
|
|
|
|
onChange: React.PropTypes.func,
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-05-23 17:16:31 +03:00
|
|
|
custom: (LEVEL_ROLE_MAP[this.props.value] === undefined),
|
2016-01-18 02:58:38 +03:00
|
|
|
};
|
|
|
|
},
|
2017-05-23 17:16:31 +03:00
|
|
|
|
|
|
|
componentWillMount: function() {
|
|
|
|
LEVEL_ROLE_MAP = Roles.levelRoleMap();
|
|
|
|
Object.keys(LEVEL_ROLE_MAP).forEach(function(key) {
|
|
|
|
reverseRoles[LEVEL_ROLE_MAP[key]] = key;
|
|
|
|
});
|
|
|
|
},
|
2016-01-18 02:58:38 +03:00
|
|
|
|
|
|
|
onSelectChange: function(event) {
|
2016-03-15 04:34:49 +03:00
|
|
|
this.setState({ custom: event.target.value === "Custom" });
|
|
|
|
if (event.target.value !== "Custom") {
|
|
|
|
this.props.onChange(this.getValue());
|
|
|
|
}
|
2016-01-18 02:58:38 +03:00
|
|
|
},
|
|
|
|
|
2016-01-18 04:18:02 +03:00
|
|
|
onCustomBlur: function(event) {
|
2016-01-18 02:58:38 +03:00
|
|
|
this.props.onChange(this.getValue());
|
|
|
|
},
|
|
|
|
|
2016-01-18 04:18:02 +03:00
|
|
|
onCustomKeyDown: function(event) {
|
|
|
|
if (event.key == "Enter") {
|
|
|
|
this.props.onChange(this.getValue());
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-01-18 02:58:38 +03:00
|
|
|
getValue: function() {
|
|
|
|
var value;
|
|
|
|
if (this.refs.select) {
|
2017-01-20 17:22:27 +03:00
|
|
|
value = reverseRoles[this.refs.select.value];
|
2016-01-18 02:58:38 +03:00
|
|
|
if (this.refs.custom) {
|
|
|
|
if (value === undefined) value = parseInt( this.refs.custom.value );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return value;
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var customPicker;
|
|
|
|
if (this.state.custom) {
|
|
|
|
var input;
|
|
|
|
if (this.props.disabled) {
|
2017-01-20 17:22:27 +03:00
|
|
|
input = <span>{ this.props.value }</span>;
|
2016-01-18 02:58:38 +03:00
|
|
|
}
|
|
|
|
else {
|
2017-01-20 17:22:27 +03:00
|
|
|
input = <input ref="custom" type="text" size="3" defaultValue={ this.props.value } onBlur={ this.onCustomBlur } onKeyDown={ this.onCustomKeyDown }/>;
|
2016-01-18 02:58:38 +03:00
|
|
|
}
|
|
|
|
customPicker = <span> of { input }</span>;
|
|
|
|
}
|
|
|
|
|
2016-03-21 03:49:18 +03:00
|
|
|
var selectValue;
|
|
|
|
if (this.state.custom) {
|
|
|
|
selectValue = "Custom";
|
|
|
|
}
|
|
|
|
else {
|
2017-05-23 17:16:31 +03:00
|
|
|
selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom";
|
2016-03-21 03:49:18 +03:00
|
|
|
}
|
2016-01-18 02:58:38 +03:00
|
|
|
var select;
|
|
|
|
if (this.props.disabled) {
|
|
|
|
select = <span>{ selectValue }</span>;
|
|
|
|
}
|
|
|
|
else {
|
2017-04-10 12:09:26 +03:00
|
|
|
// Each level must have a definition in LEVEL_ROLE_MAP
|
|
|
|
const levels = [0, 50, 100];
|
|
|
|
let options = levels.map((level) => {
|
|
|
|
return {
|
2017-05-23 17:16:31 +03:00
|
|
|
value: LEVEL_ROLE_MAP[level],
|
2017-04-10 12:09:26 +03:00
|
|
|
// 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),
|
|
|
|
}
|
|
|
|
});
|
|
|
|
options.push({ value: "Custom", text: "Custom level" });
|
|
|
|
options = options.map((op) => {
|
|
|
|
return <option value={op.value}>{op.text}</option>;
|
|
|
|
});
|
|
|
|
|
2016-01-18 02:58:38 +03:00
|
|
|
select =
|
2016-03-22 20:17:40 +03:00
|
|
|
<select ref="select"
|
|
|
|
value={ this.props.controlled ? selectValue : undefined }
|
|
|
|
defaultValue={ !this.props.controlled ? selectValue : undefined }
|
|
|
|
onChange={ this.onSelectChange }>
|
2017-04-10 12:09:26 +03:00
|
|
|
{ options }
|
2017-01-20 17:22:27 +03:00
|
|
|
</select>;
|
2016-01-18 02:58:38 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span className="mx_PowerSelector">
|
|
|
|
{ select }
|
|
|
|
{ customPicker }
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|