mirror of https://github.com/vector-im/riot-web
Migrate InlineTermsAgreement to TypeScript
parent
f4ec197513
commit
ef2848664f
|
@ -15,39 +15,48 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import { _t, pickBestLanguage } from "../../../languageHandler";
|
import { _t, pickBestLanguage } from "../../../languageHandler";
|
||||||
import * as sdk from "../../..";
|
import * as sdk from "../../..";
|
||||||
import { objectClone } from "../../../utils/objects";
|
import { objectClone } from "../../../utils/objects";
|
||||||
import StyledCheckbox from "../elements/StyledCheckbox";
|
import StyledCheckbox from "../elements/StyledCheckbox";
|
||||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
policiesAndServicePairs: any[];
|
||||||
|
onFinished: (string) => void;
|
||||||
|
agreedUrls: string[], // array of URLs the user has accepted
|
||||||
|
introElement: Node,
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IState {
|
||||||
|
policies: Policy[],
|
||||||
|
busy: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Policy {
|
||||||
|
checked: boolean;
|
||||||
|
url: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
@replaceableComponent("views.terms.InlineTermsAgreement")
|
@replaceableComponent("views.terms.InlineTermsAgreement")
|
||||||
export default class InlineTermsAgreement extends React.Component {
|
export default class InlineTermsAgreement extends React.Component<IProps, IState> {
|
||||||
static propTypes = {
|
constructor(props: IProps) {
|
||||||
policiesAndServicePairs: PropTypes.array.isRequired, // array of service/policy pairs
|
super(props);
|
||||||
agreedUrls: PropTypes.array.isRequired, // array of URLs the user has accepted
|
|
||||||
onFinished: PropTypes.func.isRequired, // takes an argument of accepted URLs
|
|
||||||
introElement: PropTypes.node,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
policies: [],
|
policies: [],
|
||||||
busy: false,
|
busy: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
public componentDidMount(): void {
|
||||||
// Build all the terms the user needs to accept
|
// Build all the terms the user needs to accept
|
||||||
const policies = []; // { checked, url, name }
|
const policies = []; // { checked, url, name }
|
||||||
for (const servicePolicies of this.props.policiesAndServicePairs) {
|
for (const servicePolicies of this.props.policiesAndServicePairs) {
|
||||||
const availablePolicies = Object.values(servicePolicies.policies);
|
const availablePolicies = Object.values(servicePolicies.policies);
|
||||||
for (const policy of availablePolicies) {
|
for (const policy of availablePolicies) {
|
||||||
const language = pickBestLanguage(Object.keys(policy).filter(p => p !== 'version'));
|
const language = pickBestLanguage(Object.keys(policy).filter(p => p !== 'version'));
|
||||||
const renderablePolicy = {
|
const renderablePolicy: Policy = {
|
||||||
checked: false,
|
checked: false,
|
||||||
url: policy[language].url,
|
url: policy[language].url,
|
||||||
name: policy[language].name,
|
name: policy[language].name,
|
||||||
|
@ -59,13 +68,13 @@ export default class InlineTermsAgreement extends React.Component {
|
||||||
this.setState({ policies });
|
this.setState({ policies });
|
||||||
}
|
}
|
||||||
|
|
||||||
_togglePolicy = (index) => {
|
private togglePolicy = (index: number): void => {
|
||||||
const policies = objectClone(this.state.policies);
|
const policies = objectClone(this.state.policies);
|
||||||
policies[index].checked = !policies[index].checked;
|
policies[index].checked = !policies[index].checked;
|
||||||
this.setState({ policies });
|
this.setState({ policies });
|
||||||
};
|
};
|
||||||
|
|
||||||
_onContinue = () => {
|
private onContinue = (): void => {
|
||||||
const hasUnchecked = !!this.state.policies.some(p => !p.checked);
|
const hasUnchecked = !!this.state.policies.some(p => !p.checked);
|
||||||
if (hasUnchecked) return;
|
if (hasUnchecked) return;
|
||||||
|
|
||||||
|
@ -73,7 +82,7 @@ export default class InlineTermsAgreement extends React.Component {
|
||||||
this.props.onFinished(this.state.policies.map(p => p.url));
|
this.props.onFinished(this.state.policies.map(p => p.url));
|
||||||
};
|
};
|
||||||
|
|
||||||
_renderCheckboxes() {
|
private renderCheckboxes(): React.ReactNode[] {
|
||||||
const rendered = [];
|
const rendered = [];
|
||||||
for (let i = 0; i < this.state.policies.length; i++) {
|
for (let i = 0; i < this.state.policies.length; i++) {
|
||||||
const policy = this.state.policies[i];
|
const policy = this.state.policies[i];
|
||||||
|
@ -93,7 +102,7 @@ export default class InlineTermsAgreement extends React.Component {
|
||||||
<div key={i} className='mx_InlineTermsAgreement_cbContainer'>
|
<div key={i} className='mx_InlineTermsAgreement_cbContainer'>
|
||||||
<div>{introText}</div>
|
<div>{introText}</div>
|
||||||
<div className='mx_InlineTermsAgreement_checkbox'>
|
<div className='mx_InlineTermsAgreement_checkbox'>
|
||||||
<StyledCheckbox onChange={() => this._togglePolicy(i)} checked={policy.checked}>
|
<StyledCheckbox onChange={() => this.togglePolicy(i)} checked={policy.checked}>
|
||||||
{_t("Accept")}
|
{_t("Accept")}
|
||||||
</StyledCheckbox>
|
</StyledCheckbox>
|
||||||
</div>
|
</div>
|
||||||
|
@ -103,16 +112,16 @@ export default class InlineTermsAgreement extends React.Component {
|
||||||
return rendered;
|
return rendered;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
public render(): React.ReactNode {
|
||||||
const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
|
const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
|
||||||
const hasUnchecked = !!this.state.policies.some(p => !p.checked);
|
const hasUnchecked = !!this.state.policies.some(p => !p.checked);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{this.props.introElement}
|
{this.props.introElement}
|
||||||
{this._renderCheckboxes()}
|
{this.renderCheckboxes()}
|
||||||
<AccessibleButton
|
<AccessibleButton
|
||||||
onClick={this._onContinue}
|
onClick={this.onContinue}
|
||||||
disabled={hasUnchecked || this.state.busy}
|
disabled={hasUnchecked || this.state.busy}
|
||||||
kind="primary_sm"
|
kind="primary_sm"
|
||||||
>
|
>
|
Loading…
Reference in New Issue