Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Not able to see all the options of Font property as it is not scrollable + Canvas scroll to top when I drop Tab widget on the canvas (#13608)

Browse Source 
* 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
This commit is contained in:
Pawan Kumar 2022-05-11 10:23:13 +05:30 committed by GitHub
parent 10aca0297f
commit 2dacdec880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/client/src/widgets/InputWidget/widget/index.tsx
View File

@ -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 },
},
],
},
];

18
app/client/src/widgets/MultiSelectWidget/widget/index.tsx
View File

@ -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,
},
],
},
];

1
app/client/src/widgets/TabsWidget/component/PageTabs.tsx
View File

@ -121,7 +121,6 @@ function PageTabContainer({
useEffect(() => {
if (isTabActive) {
tabContainerRef.current?.scrollIntoView(false);
setShowScrollArrows();
}
}, [isTabActive, tabsScrollable]);

63
app/client/src/widgets/TabsWidget/component/index.tsx
View File

@ -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} />