toggle component

Author: Aniket-Engg

libs/remix-ui/app/src/lib/remix-app/components/modals/managePreferences.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDialogDispatchers } from '../../context/provider'
 import { CustomTooltip } from "@remix-ui/helper"
+import { ToggleSwitch } from '@remix-ui/toggle'
 import { AppContext } from '../../context/context'
 declare global {
   interface Window {
@@ -64,14 +65,10 @@ const ManagePreferencesSwitcher = (prop: {
           /></p>
         </div>
         <div>
-          <button
-            data-id="matomoPerfAnalyticsSwitch"
-            id='matomoPerfAnalyticsSwitch'
-            className="btn text-ai mt-1"
-            onClick={() => setMatPerfSwitch(!matPerfSwitch)}
-          >
-            { matPerfSwitch ? <i className="fas fa-toggle-on fa-2xl"></i> : <i className="fas fa-toggle-off fa-2xl"></i> }
-          </button>
+          <ToggleSwitch
+            id = "matomoPerfAnalyticsSwitch"
+            size = "2xl"
+          ></ToggleSwitch>
         </div>
       </div>
       <div data-id="remixAI" className='justify-content-between d-flex'>

libs/remix-ui/toggle/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/toggle-switch/toggle-switch'

libs/remix-ui/toggle/src/lib/toggle-switch/toggle-switch.css

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import './toggle-switch.css'
+import { CustomTooltip } from '@remix-ui/helper'
+
+interface IToggleSwitch {
+  id: string
+  onstyle?: string
+  offstyle?: string
+  size?: string // lg,xl,2xl etc
+  tooltipTextId?: string
+  classList?: string
+  disabled?: boolean
+  initiallyOn?: boolean
+}
+export const ToggleSwitch = (props: IToggleSwitch) => {
+  const { id, onstyle, offstyle, size, tooltipTextId, disabled, initiallyOn} = props
+  const [ isOn, setIsOn] = useState(initiallyOn)
+
+
+  const handleClick = (e: any) => {
+  }
+
+  const childJSXWithTooltip = (
+      <CustomTooltip
+            placement={"auto"}
+            tooltipId="matomoAnonAnalyticsTooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={<FormattedMessage id="remixApp.mpOp1Tooltip" />}
+      >
+        <button
+          data-id="matomoAnonAnalyticsSwitch"
+          id='matomoAnonAnalyticsSwitch'
+          className="btn text-ai"
+        >
+          <i className="fas fa-toggle-on fa-2xl"></i>
+        </button>
+      </CustomTooltip>
+  )
+
+  const childJSXWithoutTooltip = (
+      <button
+        data-id={ id + "Switch"}
+        id='matomoAnonAnalyticsSwitch'
+        className="btn text-ai"
+      >
+        { isOn ? <i className={`fas fa-toggle-on ${size ? `fa-${size}` : "fa-lg"}`}></i> : <i className={`fas fa-toggle-off ${size ? `fa-${size}` : "fa-lg"}`}></i> }
+      </button>
+  )
+
+  return tooltipTextId ? childJSXWithTooltip : childJSXWithoutTooltip
+}
+
+export default ToggleSwitch

libs/remix-ui/toggle/src/lib/toggle-switch/toggle-switch.tsx

@@ -133,6 +133,9 @@
             "@remix-ui/toaster": [
               "libs/remix-ui/toaster/src/index.ts"
             ],
+            "@remix-ui/toggle": [
+              "libs/remix-ui/toggle/src/index.ts"
+            ],
             "@remix-ui/tooltip-popup": [
               "libs/remix-ui/tooltip-popup/src/index.ts"
             ],