Skip to content

Commit

Permalink
feat(WebexWidget): add theme selector on the widgets demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
lungancatalin authored and cipak committed Sep 8, 2021
1 parent 77181e6 commit 15626a1
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 2 deletions.
15 changes: 13 additions & 2 deletions demo/WebexMeetingWidgetDemo.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {Button, Input} from '@momentum-ui/react';
import {Button, Input, Select, SelectOption} from '@momentum-ui/react';
import './WebexMeetingWidgetDemo.scss';

import {WebexMeetingWidget} from '../src';

export default function WebexMeetingWidgetDemo({token}) {
const [destination, setDestination] = useState('');
const [displayWidget, setDisplayWidget] = useState(false);
const [theme, setTheme] = useState('dark');

const displayButtonEnabled = token && destination && !displayWidget;

Expand All @@ -21,6 +22,11 @@ export default function WebexMeetingWidgetDemo({token}) {
setDisplayWidget(false);
};

const handleChangeTheme = (selectedOptions) => {
const selectedTheme = selectedOptions[0].value;
setTheme(selectedTheme);
};

return (
<React.Fragment>
<h3>Webex Meeting Widget</h3>
Expand All @@ -47,12 +53,17 @@ export default function WebexMeetingWidgetDemo({token}) {
<Button disabled={!displayWidget} onClick={handleHideMeetingWidget} ariaLabel="Remove Meeting Widget">
Remove Meeting Widget
</Button>
<div className="webex-theme-selector">Theme</div>
<Select defaultValue="Dark" onSelect={handleChangeTheme}>
<SelectOption value="dark" label="Dark" />
<SelectOption value="light" label="Light" />
</Select>
</form>
{token && destination && displayWidget && (
<WebexMeetingWidget
accessToken={token}
meetingDestination={destination}
className="webex-meeting-widget-demo fluid-height"
className={`webex-meeting-widget-demo fluid-height wxc-theme-${theme}`}
/>
)}
</React.Fragment>
Expand Down
5 changes: 5 additions & 0 deletions demo/WebexMeetingWidgetDemo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,8 @@
width: 100%;
min-height: 400px;
}

.webex-theme-selector {
margin-top: 8px;
color: #121212;
}

0 comments on commit 15626a1

Please sign in to comment.