fix: Not able to see all the options of Font property as it is not sc…

…rollable + Canvas scroll to top when I drop Tab widget on the canvas (appsmithorg#13608) * fix tab widget scrolling + text widget font control overflowing issue * revert text widget changes * tab widget scroll issue * remove border radius and box shadow from v1 widgets
ganganimaulik · May 11, 2022 · 2dacdec · 2dacdec
1 parent 10aca02
commit 2dacdec
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 86 deletions.
diff --git 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<InputWidgetProps, WidgetState> {
  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
@@ -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
@@ -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
@@ -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<HTMLElement | null>(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 && (
- <Container className="relative hidden px-6 h-9 md:flex">
+ <Container className="relative flex px-6 h-9">
  <ScrollBtnContainer
- className="left-0 scroll-nav-left-button"
- onMouseDown={() => 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}
  >
  <Icon name="left-arrow-2" size={IconSize.MEDIUM} />
@@ -299,12 +276,8 @@ function TabsComponent(props: TabsComponentProps) {
  tabsScrollable={tabsScrollable}
  />
  <ScrollBtnContainer
- className="right-0 scroll-nav-right-button"
- onMouseDown={() => 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}
  >
  <Icon name="right-arrow-2" size={IconSize.MEDIUM} />