diff --git a/app/client/src/widgets/InputWidget/widget/index.tsx b/app/client/src/widgets/InputWidget/widget/index.tsx index 97847e7b60..ffd2baf365 100644 --- a/app/client/src/widgets/InputWidget/widget/index.tsx +++ b/app/client/src/widgets/InputWidget/widget/index.tsx @@ -610,28 +610,6 @@ class InputWidget extends BaseWidget { isTriggerProperty: false, validation: { type: ValidationTypes.TEXT }, }, - { - propertyName: "borderRadius", - label: "Border Radius", - helpText: - "Rounds the corners of the icon button's outer border edge", - controlType: "BORDER_RADIUS_OPTIONS", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - }, - { - propertyName: "boxShadow", - label: "Box Shadow", - helpText: - "Enables you to cast a drop shadow from the frame of the widget", - controlType: "BOX_SHADOW_OPTIONS", - isJSConvertible: true, - isBindProperty: true, - isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, - }, ], }, ]; diff --git a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx index 4de7dd1a42..6be53bce56 100644 --- a/app/client/src/widgets/MultiSelectWidget/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidget/widget/index.tsx @@ -381,24 +381,6 @@ class MultiSelectWidget extends BaseWidget< isBindProperty: false, isTriggerProperty: false, }, - { - propertyName: "borderRadius", - label: "Border Radius", - helpText: - "Rounds the corners of the icon button's outer border edge", - controlType: "BORDER_RADIUS_OPTIONS", - isBindProperty: false, - isTriggerProperty: false, - }, - { - propertyName: "boxShadow", - label: "Box Shadow", - helpText: - "Enables you to cast a drop shadow from the frame of the widget", - controlType: "BOX_SHADOW_OPTIONS", - isBindProperty: false, - isTriggerProperty: false, - }, ], }, ]; diff --git a/app/client/src/widgets/TabsWidget/component/PageTabs.tsx b/app/client/src/widgets/TabsWidget/component/PageTabs.tsx index 1f3722083d..317a2842d7 100644 --- a/app/client/src/widgets/TabsWidget/component/PageTabs.tsx +++ b/app/client/src/widgets/TabsWidget/component/PageTabs.tsx @@ -121,7 +121,6 @@ function PageTabContainer({ useEffect(() => { if (isTabActive) { - tabContainerRef.current?.scrollIntoView(false); setShowScrollArrows(); } }, [isTabActive, tabsScrollable]); diff --git a/app/client/src/widgets/TabsWidget/component/index.tsx b/app/client/src/widgets/TabsWidget/component/index.tsx index 7e63d47496..96e8570580 100644 --- a/app/client/src/widgets/TabsWidget/component/index.tsx +++ b/app/client/src/widgets/TabsWidget/component/index.tsx @@ -1,7 +1,6 @@ import React, { RefObject, ReactNode, - useEffect, useRef, useState, useCallback, @@ -15,7 +14,6 @@ import Icon, { IconSize } from "components/ads/Icon"; import { generateClassName, getCanvasClassName } from "utils/generators"; import { Colors } from "constants/Colors"; import PageTabs from "./PageTabs"; -import useThrottledRAF from "utils/hooks/useThrottledRAF"; interface TabsComponentProps extends ComponentProps { children?: ReactNode; @@ -208,9 +206,7 @@ function TabsComponent(props: TabsComponentProps) { null, ); const tabsRef = useRef(null); - const [isScrolling, setIsScrolling] = useState(false); const [tabsScrollable, setTabsScrollable] = useState(false); - const [isScrollingLeft, setIsScrollingLeft] = useState(false); const [shouldShowLeftArrow, setShouldShowLeftArrow] = useState(false); const [shouldShowRightArrow, setShouldShowRightArrow] = useState(true); @@ -234,36 +230,21 @@ function TabsComponent(props: TabsComponentProps) { [tabs], ); - const scroll = useCallback(() => { - const currentOffset = tabsRef.current?.scrollLeft || 0; + const scroll = useCallback( + (isScrollingLeft) => { + const currentOffset = tabsRef.current?.scrollLeft || 0; - if (tabsRef.current) { - tabsRef.current.scrollLeft = isScrollingLeft - ? currentOffset - 5 - : currentOffset + 5; - setShowScrollArrows(); - } - }, [tabsRef.current, isScrollingLeft]); + if (tabsRef.current) { + tabsRef.current.scrollLeft = isScrollingLeft + ? currentOffset - 50 + : currentOffset + 50; + setShowScrollArrows(); + } + }, + [tabsRef.current], + ); // eslint-disable-next-line - const [_intervalRef, _rafRef, requestAF] = useThrottledRAF(scroll, 10); - - const stopScrolling = () => { - setIsScrolling(false); - setIsScrollingLeft(false); - }; - - const startScrolling = (isLeft: boolean) => { - setIsScrolling(true); - setIsScrollingLeft(isLeft); - }; - - useEffect(() => { - let clear; - if (isScrolling) { - clear = requestAF(); - } - return clear; - }, [isScrolling, isScrollingLeft]); + // const [_intervalRef, _rafRef, requestAF] = useThrottledRAF(scroll, 10); // useEffect(() => { // if (!props.shouldScrollContents) { @@ -278,14 +259,10 @@ function TabsComponent(props: TabsComponentProps) { ref={tabContainerRef} > {props.shouldShowTabs && ( - + startScrolling(true)} - onMouseLeave={stopScrolling} - onMouseUp={stopScrolling} - onTouchEnd={stopScrolling} - onTouchStart={() => startScrolling(true)} + className="left-0 cursor-pointer scroll-nav-left-button" + onClick={() => scroll(true)} visible={shouldShowLeftArrow} > @@ -299,12 +276,8 @@ function TabsComponent(props: TabsComponentProps) { tabsScrollable={tabsScrollable} /> startScrolling(false)} - onMouseLeave={stopScrolling} - onMouseUp={stopScrolling} - onTouchEnd={stopScrolling} - onTouchStart={() => startScrolling(false)} + className="right-0 cursor-pointer scroll-nav-right-button" + onClick={() => scroll(false)} visible={shouldShowRightArrow} >