import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import PropTypes from 'prop-types'; import React, { useContext, useEffect } from 'react'; import classNames from 'classnames'; import { Button, CustomInput, Modal, ModalHeader, ButtonGroup, Label, Media, Badge } from 'reactstrap'; import AppContext from '../../context/Context'; import defaultModeImg from '../../assets/img/generic/falcon-mode-default.jpg'; import darkModeImg from '../../assets/img/generic/falcon-mode-dark.jpg'; import invertedImg from '../../assets/img/generic/inverted.png'; import card from '../../assets/img/generic/card.png'; import vibrant from '../../assets/img/generic/vibrant.png'; import transparent from '../../assets/img/generic/default.png'; import leftArrowFromLeft from '../../assets/img/icons/left-arrow-from-left.svg'; import arrowsH from '../../assets/img/icons/arrows-h.svg'; import paragraph from '../../assets/img/icons/paragraph.svg'; import settings from '../../assets/img/illustrations/settings.png'; import Flex from '../common/Flex'; import ScrollBarCustom from '../common/ScrollBarCustom'; import { createCookie, getCookieValue, getPageName } from '../../helpers/utils'; import VerticalNavRadioBtn from './VerticalNavStyleRadioBtn'; import LanguageRadioBtn from './LanguageRadioBtn'; import { withTranslation } from 'react-i18next'; const SidePanelModal = ({ autoShow, showOnce, autoShowDelay, cookieExpireTime, path, t }) => { const { isCombo, isOpenSidePanel, toggleModal, isFluid, setIsFluid, isRTL, setIsRTL, isDark, setIsDark, isTopNav, setIsTopNav, setIsOpenSidePanel, setIsCombo, isVertical, setIsVertical } = useContext(AppContext); const isKanban = getPageName('kanban'); useEffect(() => { let modalStatus = getCookieValue('modalClose'); if (modalStatus === null && autoShow) { setTimeout(() => { setIsOpenSidePanel(prev => !prev); showOnce && createCookie('modalClose', false, cookieExpireTime); }, autoShowDelay); } }, [autoShow, showOnce, setIsOpenSidePanel, autoShowDelay, cookieExpireTime]); return (
{t('Settings')}

{t('Set your own customized style')}

( ) }} >
{t('Color Scheme')}

{t('Choose the perfect color mode for your app.')}


{t('RTL Mode')}

{t('Switch your language direction')}

setIsRTL(target.checked)} />
{!isKanban && ( <>
{t('Fluid Layout')}

{t('Toggle container layout system')}

setIsFluid(target.checked)} />
)}
{t('Navigation Position')} New

{t('Select a suitable navigation system for your web application')}

{ setIsVertical(target.checked); setIsTopNav(!target.checked); setIsCombo(!target.checked); }} inline /> { setIsTopNav(target.checked); setIsVertical(!target.checked); setIsCombo(!target.checked); }} inline /> { setIsCombo(target.checked); setIsTopNav(target.checked); setIsVertical(target.checked); }} inline />

{t('Vertical Navbar Style')}

{t('Switch between styles for your vertical navbar')}


{t('Language')}{' '} new

{t('Switch between languages')}


settings
{t('Like What You See?')}

{t('Get MyEMS now.')}

); }; SidePanelModal.propTypes = { autoShow: PropTypes.bool, showOnce: PropTypes.bool, autoShowDelay: PropTypes.number, cookieExpireTime: PropTypes.number }; SidePanelModal.defaultProps = { autoShow: true, showOnce: true, autoShowDelay: 3000, cookieExpireTime: 7200000 }; export default withTranslation()(SidePanelModal);