86 lines
2.4 KiB
React
86 lines
2.4 KiB
React
|
import React, { useEffect } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import './RoomSettings.scss';
|
||
|
|
|
||
|
|
import cons from '../../../client/state/cons';
|
||
|
|
import navigation from '../../../client/state/navigation';
|
||
|
|
|
||
|
|
import Text from '../../atoms/text/Text';
|
||
|
|
import Header, { TitleWrapper } from '../../atoms/header/Header';
|
||
|
|
import ScrollView from '../../atoms/scroll/ScrollView';
|
||
|
|
import Tabs from '../../atoms/tabs/Tabs';
|
||
|
|
import RoomProfile from '../../molecules/room-profile/RoomProfile';
|
||
|
|
|
||
|
|
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
|
||
|
|
import SearchIC from '../../../../public/res/ic/outlined/search.svg';
|
||
|
|
import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
|
||
|
|
import LockIC from '../../../../public/res/ic/outlined/lock.svg';
|
||
|
|
import InfoIC from '../../../../public/res/ic/outlined/info.svg';
|
||
|
|
|
||
|
|
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
||
|
|
|
||
|
|
const tabItems = [{
|
||
|
|
iconSrc: SettingsIC,
|
||
|
|
text: 'General',
|
||
|
|
disabled: false,
|
||
|
|
}, {
|
||
|
|
iconSrc: SearchIC,
|
||
|
|
text: 'Search',
|
||
|
|
disabled: false,
|
||
|
|
}, {
|
||
|
|
iconSrc: ShieldUserIC,
|
||
|
|
text: 'Permissions',
|
||
|
|
disabled: false,
|
||
|
|
}, {
|
||
|
|
iconSrc: LockIC,
|
||
|
|
text: 'Security',
|
||
|
|
disabled: false,
|
||
|
|
}, {
|
||
|
|
iconSrc: InfoIC,
|
||
|
|
text: 'Advanced',
|
||
|
|
disabled: false,
|
||
|
|
}];
|
||
|
|
|
||
|
|
function RoomSettings({ roomId }) {
|
||
|
|
const [, forceUpdate] = useForceUpdate();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const settingsToggle = (isVisible) => {
|
||
|
|
if (isVisible) forceUpdate();
|
||
|
|
else setTimeout(() => forceUpdate(), 200);
|
||
|
|
};
|
||
|
|
navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
|
||
|
|
return () => {
|
||
|
|
navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!navigation.isRoomSettings) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="room-settings">
|
||
|
|
<ScrollView autoHide>
|
||
|
|
<div className="room-settings__content">
|
||
|
|
<Header>
|
||
|
|
<TitleWrapper>
|
||
|
|
<Text variant="s1" weight="medium" primary>Room settings</Text>
|
||
|
|
</TitleWrapper>
|
||
|
|
</Header>
|
||
|
|
<RoomProfile roomId={roomId} />
|
||
|
|
<Tabs items={tabItems} onSelect={() => false} />
|
||
|
|
<div className="room-settings__cards-wrapper">
|
||
|
|
{/* <div className="room-settings__card">
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</ScrollView>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
RoomSettings.propTypes = {
|
||
|
|
roomId: PropTypes.string.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RoomSettings;
|