mirror of
https://github.com/element-hq/element-web
synced 2024-11-25 18:55:58 +03:00
add ComponentVisibility to customisation docs (#21008)
* add componentvisibility to customisation md Signed-off-by: Kerry Archibald <kerrya@element.io> * few more words Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
parent
762fc53c61
commit
d4a019b27a
1 changed files with 27 additions and 0 deletions
|
@ -32,3 +32,30 @@ steps to remove the need for build changes like the above.
|
||||||
By isolating customisations to their own module, this approach should remove the
|
By isolating customisations to their own module, this approach should remove the
|
||||||
chance of merge conflicts when updating your fork, and thus simplify ongoing
|
chance of merge conflicts when updating your fork, and thus simplify ongoing
|
||||||
maintenance.
|
maintenance.
|
||||||
|
|
||||||
|
### Component visibility customisation
|
||||||
|
UI for some actions can be hidden via the ComponentVisibility customisation:
|
||||||
|
- inviting users to rooms and spaces,
|
||||||
|
- creating rooms,
|
||||||
|
- creating spaces,
|
||||||
|
|
||||||
|
To customise visibility create a customisation module from [ComponentVisibility](https://github.com/matrix-org/matrix-react-sdk/blob/master/src/customisations/ComponentVisibility.ts) following the instructions above.
|
||||||
|
|
||||||
|
`shouldShowComponent` determines whether or not the active MatrixClient user should be able to use
|
||||||
|
the given UI component. When `shouldShowComponent` returns falsy all UI components for that feature will be hidden.
|
||||||
|
If shown, the user might still not be able to use the
|
||||||
|
component depending on their contextual permissions. For example, invite options
|
||||||
|
might be shown to the user but they won't have permission to invite users to
|
||||||
|
the current room: the button will appear disabled.
|
||||||
|
|
||||||
|
For example, to only allow users who meet a certain condition to create spaces:
|
||||||
|
```
|
||||||
|
function shouldShowComponent(component: UIComponent): boolean {
|
||||||
|
if (component === UIComponent.CreateSpaces) {
|
||||||
|
const userMeetsCondition = <<check your custom condition here>>
|
||||||
|
return userMeetsCondition;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
In this example, all UI related to creating a space will be hidden unless the users meets a custom condition.
|
Loading…
Reference in a new issue