50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { Sites, useTopBar } from 'cordova-sites';
|
|
import { FunctionComponent, useCallback } from 'react';
|
|
import { Button, Switch } from 'react-bootstrap-mobile';
|
|
import { useAppDispatch, useAppSelector } from '../Store/reduxHooks';
|
|
import { setDesign } from './settingsSlice';
|
|
|
|
type Props = {};
|
|
|
|
export const Settings: FunctionComponent<Props> = React.memo(({}) => {
|
|
// Variables
|
|
const design = useAppSelector((state) => state.settings.design);
|
|
const isActive = design === 'flat';
|
|
const dispatch = useAppDispatch();
|
|
|
|
// States
|
|
|
|
// Refs
|
|
|
|
// Callbacks
|
|
const toggleThemeCallback = useCallback(() => {
|
|
if (design === 'material') {
|
|
dispatch(setDesign('flat'));
|
|
} else {
|
|
dispatch(setDesign('material'));
|
|
}
|
|
}, [dispatch, design]);
|
|
|
|
// Effects
|
|
useTopBar({
|
|
title: 'Settings',
|
|
});
|
|
|
|
// Other
|
|
|
|
// Render Functions
|
|
|
|
return (
|
|
<>
|
|
<br />
|
|
<br />
|
|
<Switch id="switchTheme" checked={isActive} preLabel="android" isDual={true} onChange={toggleThemeCallback}>
|
|
ios
|
|
</Switch>
|
|
<Button onClick={toggleThemeCallback}>Change Theme</Button>
|
|
</>
|
|
);
|
|
});
|
|
Sites.addInitialization((app) => app.addDeepLink('/Settings', Settings));
|