at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { translate } from 'react-i18next';
+import i18n from '../../../i18n';
+import {
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem
+} from 'reactstrap';
+import reduxConnect from '../../../redux/utils/connect';
+
+import Flag from 'react-flagkit';
+
+const langCountry = {
+  en: 'US',
+  ar: 'SA',
+  fr: 'FR'
+};
+
+function LangSettingsMenu(props) {
+  const {
+    t,
+    base: { langs, activeLang },
+    actions,
+    direction = ''
+  } = props;
+
+  const chooseLang = (e) => {
+    const newLang = e.target.dataset.lang;
+    actions.chooseLanguage(newLang);
+    i18n.changeLanguage(newLang);
+  };
+  const isRTL = document.documentElement.dir === 'rtl';
+
+  const dropDownProps = {};
+  if (direction) {
+    dropDownProps.direction = direction;
+  }
+
+  return (
+    <UncontrolledDropdown {...dropDownProps}>
+      <DropdownToggle className="p-0 mr-2" color="link">
+        <div className="icon-wrapper icon-wrapper-alt rounded-circle">
+          <div className="icon-wrapper-bg bg-focus" />
+          <div className="language-icon">
+            <Flag
+              className="mr-3 opacity-8"
+              country={langCountry[activeLang]}
+              size="40"
+            />
+          </div>
+        </div>
+      </DropdownToggle>
+      <DropdownMenu
+        className={`rm-pointers${isRTL ? ' dropdown-menu-left' : ''}`}
+      >
+        <div className="dropdown-menu-header">
+          <div className="dropdown-menu-header-inner pt-4 pb-4 bg-focus">
+            <div className="menu-header-content text-center text-white">
+              <h6 className="menu-header-subtitle mt-0">
+                {t('langs.chooseLanguage')}
+              </h6>
+            </div>
+          </div>
+        </div>
+
+        {langs.map((lang, i) => {
+          const translateTarget = 'langs.' + lang;
+          return (
+            <DropdownItem
+              key={lang}
+              active={activeLang === lang}
+              data-lang={lang}
+              onClick={chooseLang}
+            >
+              <Flag className="mr-3 opacity-8" country={langCountry[lang]} />
+              {t(translateTarget)}
+            </DropdownItem>
+          );
+        })}
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+}
+
+LangSettingsMenu.propTypes = {
+  t: PropTypes.func.isRequired,
+  base: PropTypes.object.isRequired,
+  actions: PropTypes.object.isRequired,
+  direction: PropTypes.string
+};
+
+const applyDecorators = compose(
+  reduxConnect('base', ['common', 'base']),
+  translate(['common'], { wait: true })
+);
+
+export default applyDecorators(LangSettingsMenu);