katoikia-app/web-ui/web-react/src/AppConfig.js

376 lines
19 KiB
JavaScript
Raw Normal View History

2022-07-06 04:15:11 +00:00
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { RadioButton } from 'primereact/radiobutton';
import { InputSwitch } from 'primereact/inputswitch';
import classNames from 'classnames';
2022-07-21 06:43:41 +00:00
import { Button } from "primereact/button";
2022-07-06 04:15:11 +00:00
export const AppConfig = (props) => {
const [active, setActive] = useState(false);
const [scale, setScale] = useState(14);
2022-07-21 06:43:41 +00:00
const [scales] = useState([12, 13, 14, 15, 16]);
const [theme, setTheme] = useState('khaki');
2022-07-06 04:15:11 +00:00
const config = useRef(null);
let outsideClickListener = useRef(null);
const unbindOutsideClickListener = useCallback(() => {
if (outsideClickListener.current) {
document.removeEventListener('click', outsideClickListener.current);
outsideClickListener.current = null;
}
}, []);
const hideConfigurator = useCallback((event) => {
setActive(false);
unbindOutsideClickListener();
event.preventDefault();
}, [unbindOutsideClickListener]);
const bindOutsideClickListener = useCallback(() => {
if (!outsideClickListener.current) {
outsideClickListener.current = (event) => {
if (active && isOutsideClicked(event)) {
hideConfigurator(event);
}
};
document.addEventListener('click', outsideClickListener.current);
}
}, [active, hideConfigurator]);
useEffect(() => {
if (active) {
bindOutsideClickListener()
}
else {
unbindOutsideClickListener()
}
}, [active, bindOutsideClickListener, unbindOutsideClickListener]);
const isOutsideClicked = (event) => {
return !(config.current.isSameNode(event.target) || config.current.contains(event.target));
}
const decrementScale = () => {
setScale((prevState) => --prevState);
}
const incrementScale = () => {
setScale((prevState) => ++prevState);
}
useEffect(() => {
document.documentElement.style.fontSize = scale + 'px';
}, [scale])
const toggleConfigurator = (event) => {
setActive(prevState => !prevState);
}
const configClassName = classNames('layout-config', {
'layout-config-active': active
})
const replaceLink = useCallback((linkElement, href, callback) => {
if (isIE()) {
linkElement.setAttribute('href', href);
if (callback) {
callback();
}
}
else {
const id = linkElement.getAttribute('id');
const cloneLinkElement = linkElement.cloneNode(true);
cloneLinkElement.setAttribute('href', href);
cloneLinkElement.setAttribute('id', id + '-clone');
linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
cloneLinkElement.addEventListener('load', () => {
linkElement.remove();
cloneLinkElement.setAttribute('id', id);
if (callback) {
callback();
}
});
}
2022-07-21 06:43:41 +00:00
}, [])
2022-07-06 04:15:11 +00:00
useEffect(() => {
let themeElement = document.getElementById('theme-link');
const themeHref = 'assets/themes/' + theme + '/theme.css';
replaceLink(themeElement, themeHref);
2022-07-21 06:43:41 +00:00
}, [theme, replaceLink])
2022-07-06 04:15:11 +00:00
const isIE = () => {
return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent)
}
const changeTheme = (e, theme, scheme) => {
props.onColorModeChange(scheme);
setTheme(theme);
}
return (
<div ref={config} className={configClassName} id={"layout-config"}>
<button className="layout-config-button p-link" id="layout-config-button" onClick={toggleConfigurator}>
<i className="pi pi-cog"></i>
</button>
2022-07-21 06:43:41 +00:00
<Button className="p-button-danger layout-config-close p-button-rounded p-button-text" icon="pi pi-times" onClick={hideConfigurator} />
2022-07-06 04:15:11 +00:00
<div className="layout-config-content">
<h5 className="mt-0">Component Scale</h5>
<div className="config-scale">
<Button icon="pi pi-minus" onClick={decrementScale} className="p-button-text" disabled={scale === scales[0]} />
{
scales.map((item) => {
2022-07-21 06:43:41 +00:00
return <i className={classNames('pi pi-circle-on', { 'scale-active': item === scale })} key={item} />
2022-07-06 04:15:11 +00:00
})
}
<Button icon="pi pi-plus" onClick={incrementScale} className="p-button-text" disabled={scale === scales[scales.length - 1]} />
</div>
<h5>Input Style</h5>
<div className="p-formgroup-inline">
<div className="field-radiobutton">
<RadioButton inputId="input_outlined" name="inputstyle" value="outlined" onChange={(e) => props.onInputStyleChange(e.value)} checked={props.inputStyle === 'outlined'} />
<label htmlFor="input_outlined">Outlined</label>
</div>
<div className="field-radiobutton">
<RadioButton inputId="input_filled" name="inputstyle" value="filled" onChange={(e) => props.onInputStyleChange(e.value)} checked={props.inputStyle === 'filled'} />
<label htmlFor="input_filled">Filled</label>
</div>
</div>
<h5>Ripple Effect</h5>
<InputSwitch checked={props.rippleEffect} onChange={props.onRippleEffect} />
<h5>Menu Type</h5>
<div className="p-formgroup-inline">
<div className="field-radiobutton">
<RadioButton inputId="static" name="layoutMode" value="static" onChange={(e) => props.onLayoutModeChange(e.value)} checked={props.layoutMode === 'static'} />
<label htmlFor="static">Static</label>
</div>
<div className="field-radiobutton">
<RadioButton inputId="overlay" name="layoutMode" value="overlay" onChange={(e) => props.onLayoutModeChange(e.value)} checked={props.layoutMode === 'overlay'} />
<label htmlFor="overlay">Overlay</label>
</div>
</div>
<h5>Themes</h5>
<h6 className="mt-0">Bootstrap</h6>
<div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-light-blue', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-light-purple', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-dark-blue', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'bootstrap4-dark-purple', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
<h6>Material Design</h6>
<div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-light-indigo', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-light-indigo', 'light')}>
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-light-deeppurple', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-dark-indigo', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'md-dark-deeppurple', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
<h6>Material Design Compact</h6>
<div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-light-indigo', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-light-deeppurple', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-dark-indigo', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'mdc-dark-deeppurple', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
<h6>Tailwind</h6>
<div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'tailwind-light', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
<h6>Fluent UI</h6>
<div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'fluent-light', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
<h6>PrimeOne Design - 2022</h6>
<div className="grid free-themes">
2022-07-21 06:43:41 +00:00
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'khaki', 'light')}>
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Khaki" />
</button>
</div>
2022-07-06 04:15:11 +00:00
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-indigo', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-blue', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-purple', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-light-teal', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-indigo', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-blue', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-purple', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={(e) => changeTheme(e, 'lara-dark-teal', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
<h6>PrimeOne Design - 2021</h6>
<div className="grid free-themes">
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-blue', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-green', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/saga-green.png" alt="Saga Green" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-orange', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'saga-purple', 'light')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-blue', 'dim')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-green', 'dim')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/vela-green.png" alt="Vela Green" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-orange', 'dim')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'vela-purple', 'dim')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-blue', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-green', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/arya-green.png" alt="Arya Green" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-orange', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange" />
2022-07-06 04:15:11 +00:00
</button>
</div>
<div className="col-3 text-center">
<button className="p-link" onClick={e => changeTheme(e, 'arya-purple', 'dark')}>
2022-07-21 06:43:41 +00:00
<img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple" />
2022-07-06 04:15:11 +00:00
</button>
</div>
</div>
</div>
</div>
);
}