Merge pull request #1386 from culturecreates/bugfix/issue-1320

Bugfix/issue 1320
culturecreates · Oct 8, 2024 · 1b03c16 · 1b03c16
2 parents a8ecb7f + babf3d8
commit 1b03c16
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 2 deletions.
diff --git a/src/assets/icons/Right.svg b/src/assets/icons/Right.svg
diff --git a/src/assets/icons/left.svg b/src/assets/icons/left.svg
diff --git a/src/components/MultilingualInput/MultilingualInput.jsx b/src/components/MultilingualInput/MultilingualInput.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs } from 'antd';
+import { Button, Tabs } from 'antd';
 import { WarningOutlined } from '@ant-design/icons';
 import './multilingualInput.css';
 import { useTranslation } from 'react-i18next';
@@ -9,6 +9,8 @@ import { capitalizeFirstLetter } from '../../utils/stringManipulations';
 import { useOutletContext } from 'react-router-dom';
 import useChildrenWithLanguageFallback from '../../hooks/useChildrenWithLanguageFallback';
 import { isDataValid } from '../../utils/MultiLingualFormItemSupportFunctions';
+import { ReactComponent as MoveLeftExtra } from '../../assets/icons/left.svg';
+import { ReactComponent as MoveRightExtra } from '../../assets/icons/Right.svg';
 
 /**
  * MultilingualInput Component
@@ -42,6 +44,7 @@ function MultilingualInput({ children, ...rest }) {
   } = rest;
   const [currentCalendarData] = useOutletContext();
   const { t } = useTranslation();
+  const [activeKey, setActiveKey] = React.useState(defaultTabProp);
 
   const { fallbackStatus = {}, modifiedChildren = children } =
     !skipChildModification &&
@@ -131,13 +134,33 @@ function MultilingualInput({ children, ...rest }) {
     itemCollection.push(tabItem);
   });
 
+  // Handle circular navigation for left and right clicks
+  const handleMoveLeft = () => {
+    const currentIndex = itemCollection.findIndex((item) => item.key === activeKey);
+    const newIndex = currentIndex > 0 ? currentIndex - 1 : itemCollection.length - 1;
+    setActiveKey(itemCollection[newIndex].key);
+  };
+
+  const handleMoveRight = () => {
+    const currentIndex = itemCollection.findIndex((item) => item.key === activeKey);
+    const newIndex = currentIndex < itemCollection.length - 1 ? currentIndex + 1 : 0;
+    setActiveKey(itemCollection[newIndex].key);
+  };
+
+  const extraNavigationIcons = {
+    left: <Button type="primary" onClick={handleMoveLeft} className="tabs-icon-extra" icon={<MoveLeftExtra />} />,
+    right: <Button type="primary" onClick={handleMoveRight} icon={<MoveRightExtra />} className="tabs-icon-extra" />,
+  };
+
   return (
     <Tabs
       type="card"
-      defaultActiveKey={defaultTab}
+      activeKey={activeKey}
+      defaultTab={defaultTab}
       items={itemCollection}
       size="small"
       tabBarGutter="0"
+      tabBarExtraContent={extraNavigationIcons}
       tabPosition="top"
       animated="false"
       tabBarStyle={{ margin: '0' }}

diff --git a/src/components/MultilingualInput/multilingualInput.css b/src/components/MultilingualInput/multilingualInput.css
@@ -9,6 +9,42 @@
   background: #ffffff;
 }
 
+.bilingual-input-tab .ant-tabs-nav-more {
+  display: none;
+}
+
+.bilingual-input-tab .ant-tabs-tab {
+  user-select: none;
+  -webkit-user-select: none; /* For Safari */
+  -moz-user-select: none; /* For Firefox */
+}
+
+.bilingual-input-tab .ant-tabs-nav .ant-tabs-nav-wrap.ant-tabs-nav-wrap-ping-right::after,
+.bilingual-input-tab .ant-tabs-nav .ant-tabs-nav-wrap.ant-tabs-nav-wrap-ping-left::before {
+  opacity: 0;
+}
+
+.bilingual-input-tab .tabs-icon-extra:hover rect {
+  fill: #e6e6e6;
+}
+
+.bilingual-input-tab .tabs-icon-extra {
+  z-index: 1;
+  display: grid;
+  place-content: center;
+  border-radius: 4px;
+  padding: 0px;
+  border-color: #e6e6e6;
+  background: #ffffff;
+  width: 28px;
+  height: 28px;
+}
+
+.bilingual-input-tab .ant-tabs-extra-content {
+  display: grid;
+  place-content: center;
+}
+
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list {
   border-radius: 4px 4px 0px 0px;
 }