mirror of
https://github.com/element-hq/element-web
synced 2024-11-27 19:56:47 +03:00
Merge pull request #5412 from matrix-org/travis/msc2790-disabled-buttons
Disable buttons when required by MSC2790
This commit is contained in:
commit
962b964c07
3 changed files with 40 additions and 6 deletions
|
@ -79,7 +79,7 @@
|
||||||
"linkifyjs": "^2.1.9",
|
"linkifyjs": "^2.1.9",
|
||||||
"lodash": "^4.17.19",
|
"lodash": "^4.17.19",
|
||||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||||
"matrix-widget-api": "^0.1.0-beta.5",
|
"matrix-widget-api": "^0.1.0-beta.8",
|
||||||
"minimist": "^1.2.5",
|
"minimist": "^1.2.5",
|
||||||
"pako": "^1.0.11",
|
"pako": "^1.0.11",
|
||||||
"parse5": "^5.1.1",
|
"parse5": "^5.1.1",
|
||||||
|
|
|
@ -23,6 +23,11 @@ import {
|
||||||
IModalWidgetCloseRequest,
|
IModalWidgetCloseRequest,
|
||||||
IModalWidgetOpenRequestData,
|
IModalWidgetOpenRequestData,
|
||||||
IModalWidgetReturnData,
|
IModalWidgetReturnData,
|
||||||
|
ISetModalButtonEnabledActionRequest,
|
||||||
|
IWidgetApiAcknowledgeResponseData,
|
||||||
|
IWidgetApiErrorResponseData,
|
||||||
|
BuiltInModalButtonID,
|
||||||
|
ModalButtonID,
|
||||||
ModalButtonKind,
|
ModalButtonKind,
|
||||||
Widget,
|
Widget,
|
||||||
WidgetApiFromWidgetAction,
|
WidgetApiFromWidgetAction,
|
||||||
|
@ -31,6 +36,7 @@ import {StopGapWidgetDriver} from "../../../stores/widgets/StopGapWidgetDriver";
|
||||||
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
||||||
import RoomViewStore from "../../../stores/RoomViewStore";
|
import RoomViewStore from "../../../stores/RoomViewStore";
|
||||||
import {OwnProfileStore} from "../../../stores/OwnProfileStore";
|
import {OwnProfileStore} from "../../../stores/OwnProfileStore";
|
||||||
|
import { arrayFastClone } from "../../../utils/arrays";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
widgetDefinition: IModalWidgetOpenRequestData;
|
widgetDefinition: IModalWidgetOpenRequestData;
|
||||||
|
@ -40,15 +46,19 @@ interface IProps {
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
messaging?: ClientWidgetApi;
|
messaging?: ClientWidgetApi;
|
||||||
|
disabledButtonIds: ModalButtonID[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const MAX_BUTTONS = 3;
|
const MAX_BUTTONS = 3;
|
||||||
|
|
||||||
export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
|
export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
|
||||||
private readonly widget: Widget;
|
private readonly widget: Widget;
|
||||||
|
private readonly possibleButtons: ModalButtonID[];
|
||||||
private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
|
private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
|
||||||
|
|
||||||
state: IState = {};
|
state: IState = {
|
||||||
|
disabledButtonIds: [],
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -58,6 +68,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
|
||||||
creatorUserId: MatrixClientPeg.get().getUserId(),
|
creatorUserId: MatrixClientPeg.get().getUserId(),
|
||||||
id: `modal_${this.props.sourceWidgetId}`,
|
id: `modal_${this.props.sourceWidgetId}`,
|
||||||
});
|
});
|
||||||
|
this.possibleButtons = (this.props.widgetDefinition.buttons || []).map(b => b.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
public componentDidMount() {
|
public componentDidMount() {
|
||||||
|
@ -79,12 +90,35 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
|
||||||
private onLoad = () => {
|
private onLoad = () => {
|
||||||
this.state.messaging.once("ready", this.onReady);
|
this.state.messaging.once("ready", this.onReady);
|
||||||
this.state.messaging.on(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
|
this.state.messaging.on(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
|
||||||
|
this.state.messaging.on(`action:${WidgetApiFromWidgetAction.SetModalButtonEnabled}`, this.onButtonEnableToggle);
|
||||||
};
|
};
|
||||||
|
|
||||||
private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
|
private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
|
||||||
this.props.onFinished(true, ev.detail.data);
|
this.props.onFinished(true, ev.detail.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
const isClose = ev.detail.data.button === BuiltInModalButtonID.Close;
|
||||||
|
if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
|
||||||
|
return this.state.messaging.transport.reply(ev.detail, {
|
||||||
|
error: {message: "Invalid button"},
|
||||||
|
} as IWidgetApiErrorResponseData);
|
||||||
|
}
|
||||||
|
|
||||||
|
let buttonIds: ModalButtonID[];
|
||||||
|
if (ev.detail.data.enabled) {
|
||||||
|
buttonIds = arrayFastClone(this.state.disabledButtonIds).filter(i => i !== ev.detail.data.button);
|
||||||
|
} else {
|
||||||
|
// use a set to swap the operation to avoid memory leaky arrays.
|
||||||
|
const tempSet = new Set(this.state.disabledButtonIds);
|
||||||
|
tempSet.add(ev.detail.data.button);
|
||||||
|
buttonIds = Array.from(tempSet);
|
||||||
|
}
|
||||||
|
this.setState({disabledButtonIds: buttonIds});
|
||||||
|
this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
|
||||||
|
};
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const templated = this.widget.getCompleteUrl({
|
const templated = this.widget.getCompleteUrl({
|
||||||
currentRoomId: RoomViewStore.getRoomId(),
|
currentRoomId: RoomViewStore.getRoomId(),
|
||||||
|
|
|
@ -6532,10 +6532,10 @@ matrix-react-test-utils@^0.2.2:
|
||||||
resolved "https://registry.yarnpkg.com/matrix-react-test-utils/-/matrix-react-test-utils-0.2.2.tgz#c87144d3b910c7edc544a6699d13c7c2bf02f853"
|
resolved "https://registry.yarnpkg.com/matrix-react-test-utils/-/matrix-react-test-utils-0.2.2.tgz#c87144d3b910c7edc544a6699d13c7c2bf02f853"
|
||||||
integrity sha512-49+7gfV6smvBIVbeloql+37IeWMTD+fiywalwCqk8Dnz53zAFjKSltB3rmWHso1uecLtQEcPtCijfhzcLXAxTQ==
|
integrity sha512-49+7gfV6smvBIVbeloql+37IeWMTD+fiywalwCqk8Dnz53zAFjKSltB3rmWHso1uecLtQEcPtCijfhzcLXAxTQ==
|
||||||
|
|
||||||
matrix-widget-api@^0.1.0-beta.5:
|
matrix-widget-api@^0.1.0-beta.8:
|
||||||
version "0.1.0-beta.5"
|
version "0.1.0-beta.8"
|
||||||
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.5.tgz#dd7f24a177aa590d812bd4e92e2c3ac225c5557e"
|
resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.8.tgz#17e85c03c46353373890b869b1fd46162bdb0026"
|
||||||
integrity sha512-J3GBJtVMFuEM/EWFylc0IlkPjdgmWxrkGYPaZ0LSmxp+OlNJxYfnWPR6F6HveW+Z8C1i0vq+BTueofSqKv2zDg==
|
integrity sha512-sWqyWs0RQqny/BimZUOxUd9BTJBzQmJlJ1i3lsSh1JBygV+aK5xQsONL97fc4i6/nwQPK72uCVDF+HwTtkpAbQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
events "^3.2.0"
|
events "^3.2.0"
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue