6496f84374
* fix: Added Button Container for the firefox drag issue * fix: Removed un-necessary styles, added Container in Canvas mode. * fix: Removed renderMode check from styled function. * fix: Code refactor and handled Icon Button Component. * fix: Added extensive comments. * fix: handled menu button drag issues. * fix: Fixed some failing tests. * New Button locator (with drag-container) fix * NewBtn container locator fix * btn locator fix * MongoShopping spec fix * Mongo, Postgress fixes * Stat box fix * Testcase title update Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { ButtonVariant } from "components/constants";
|
|
import { RenderMode, RenderModes } from "constants/WidgetConstants";
|
|
import { buttonHoverActiveStyles } from "./utils";
|
|
|
|
/*
|
|
We have this Bug in Firefox where we are unable to drag
|
|
buttons - https://bugzilla.mozilla.org/show_bug.cgi?id=568313
|
|
|
|
We found a solution here - https://stackoverflow.com/a/43888410
|
|
*/
|
|
|
|
/*
|
|
We are adding a wrapper in Canvas mode to the Button and once
|
|
we deploy it we remove the wrapper altogether.
|
|
Because we are adding a wrapper we also need to duplicate any
|
|
:hover, :active & :focus styles and pass onClick to the wrapper.
|
|
We could have checked for firefox browser using window.navigator
|
|
but we wanted our widget to be pure and have similar experience
|
|
in all the Browsers.
|
|
*/
|
|
|
|
export type ButtonContainerProps = {
|
|
buttonColor?: string;
|
|
buttonVariant?: ButtonVariant;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
style?: React.CSSProperties;
|
|
};
|
|
|
|
const ButtonContainer = styled.div<ButtonContainerProps>`
|
|
cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
|
|
height: 100%;
|
|
|
|
& > button {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
position: relative;
|
|
&:after {
|
|
content: "";
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
&:hover > button,
|
|
&:active > button {
|
|
${buttonHoverActiveStyles}
|
|
}
|
|
`;
|
|
|
|
type DragContainerProps = ButtonContainerProps & {
|
|
children?: React.ReactNode;
|
|
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
renderMode?: RenderMode;
|
|
};
|
|
|
|
export function DragContainer(props: DragContainerProps) {
|
|
if (props.renderMode === RenderModes.CANVAS) {
|
|
return (
|
|
<ButtonContainer
|
|
buttonColor={props.buttonColor}
|
|
buttonVariant={props.buttonVariant}
|
|
disabled={props.disabled}
|
|
loading={props.loading}
|
|
onClick={props.onClick}
|
|
style={props.style}
|
|
>
|
|
{props.children}
|
|
</ButtonContainer>
|
|
);
|
|
}
|
|
|
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
return <>{props.children}</>;
|
|
}
|