Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
fix: pointer events issues around widgets (#279)
Browse files Browse the repository at this point in the history 
* fix pointer events issues

* remove unused prop

* remove unused prop

* simplify builtin wrapper
  • Loading branch information
@KaWaite
KaWaite committed Jul 21, 2022
1 parent 48de868 commit 219ea4b
Show file tree
Hide file tree
Showing 6 changed files with 14 additions and 34 deletions.
15 changes: 5 additions & 10 deletions src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
View file
Expand Up @@ -25,7 +25,7 @@ export type Property = {
stories?: StoryType[];
};

const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element | null => {
const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
const publishedTheme = usePublishTheme(sceneProperty.theme);

const isExtraSmallWindow = useMedia("(max-width: 420px)");
Expand All @@ -49,7 +49,7 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
});

return (
<div>
<>
<Menu
publishedTheme={publishedTheme}
ref={wrapperRef}
Expand Down Expand Up @@ -98,9 +98,7 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
<ArrowButton
publishedTheme={publishedTheme}
disabled={!selected?.index}
onClick={handlePrev}
// sometimes react-align goes wrong
style={editing ? { pointerEvents: "none" } : undefined}>
onClick={handlePrev}>
<Icon icon="arrowLeft" size={24} />
</ArrowButton>
<Current align="center" justify="space-between">
Expand All @@ -125,13 +123,11 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
<ArrowButton
publishedTheme={publishedTheme}
disabled={selected?.index === stories.length - 1}
onClick={handleNext}
// sometimes react-align goes wrong
style={editing ? { pointerEvents: "none" } : undefined}>
onClick={handleNext}>
<Icon icon="arrowRight" size={24} />
</ArrowButton>
</Widget>
</div>
</>
);
};

Expand All @@ -149,7 +145,6 @@ const Widget = styled.div<{
height: 80px;
width: ${({ extended }) => (extended ? "100%" : "500px")};
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
pointer-events: auto;
${({ floating }) =>
floating
Expand Down
9 changes: 5 additions & 4 deletions src/components/molecules/Visualizer/Widget/index.tsx
View file
Expand Up @@ -23,7 +23,6 @@ export type Props<PP = any, SP = any> = {
pluginBaseUrl?: string;
layout?: WidgetLayout;
editing?: boolean;
iFrameProps?: PluginProps["iFrameProps"];
onExtend?: (id: string, extended: boolean | undefined) => void;
};

Expand All @@ -38,8 +37,8 @@ export default function WidgetComponent<PP = any, SP = any>({
extended,
pluginBaseUrl,
layout,
iFrameProps,
onExtend,
editing,
...props
}: Props<PP, SP>) {
const { align, location } = layout ?? {};
Expand Down Expand Up @@ -84,7 +83,9 @@ export default function WidgetComponent<PP = any, SP = any>({
: "both";

return Builtin ? (
<Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
<div style={{ pointerEvents: editing ? "none" : "auto" }}>
<Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
</div>
) : (
<Plugin
autoResize={autoResize}
Expand All @@ -96,7 +97,7 @@ export default function WidgetComponent<PP = any, SP = any>({
pluginBaseUrl={pluginBaseUrl}
property={props.pluginProperty}
widget={w}
iFrameProps={iFrameProps}
iFrameProps={{ style: { pointerEvents: editing ? "none" : "auto" } }}
onRender={handleRender}
onResize={handleResize}
/>
Expand Down
10 changes: 2 additions & 8 deletions src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx
View file
@@ -1,5 +1,5 @@
import { omit, pick } from "lodash-es";
import { useCallback, useMemo, useState, CSSProperties } from "react";
import { useCallback, useMemo, useState } from "react";
import { GridArea, GridItem } from "react-align";
import { useDeepCompareEffect } from "react-use";

Expand All @@ -15,7 +15,6 @@ type Props = {
area: "top" | "middle" | "bottom";
align: Alignment;
widgets?: Widget[];
editing?: boolean;
isEditable?: boolean;
isBuilt?: boolean;
sceneProperty?: any;
Expand All @@ -33,7 +32,6 @@ export default function Area({
widgets,
pluginProperty,
layoutConstraint,
editing,
...props
}: Props) {
const theme = useTheme();
Expand Down Expand Up @@ -81,7 +79,7 @@ export default function Area({
index={i}
extended={extended ?? widget.extended}
extendable={extendable2}
style={editing ? undefined : pointerEventsAutoStyle}>
style={{ pointerEvents: "none" }}>
{({ editing }) => (
<W
widget={widget}
Expand All @@ -94,7 +92,6 @@ export default function Area({
extended={extended}
editing={editing}
onExtend={handleExtend}
iFrameProps={editing ? undefined : iFrameProps}
{...props}
/>
)}
Expand All @@ -105,9 +102,6 @@ export default function Area({
) : null;
}

const pointerEventsAutoStyle: CSSProperties = { pointerEvents: "auto" };
const iFrameProps = { style: pointerEventsAutoStyle };

function useOverriddenExtended({
layout,
widgets,
Expand Down
3 changes: 0 additions & 3 deletions src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
View file
Expand Up @@ -15,7 +15,6 @@ export type Props = {
layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
isEditable?: boolean;
isBuilt?: boolean;
editing?: boolean;
sceneProperty?: any;
pluginProperty?: { [key: string]: any };
pluginBaseUrl?: string;
Expand All @@ -33,7 +32,6 @@ export default function MobileZone({
pluginBaseUrl,
isEditable,
isBuilt,
editing,
children,
}: Props) {
const filteredSections = useMemo(() => {
Expand Down Expand Up @@ -67,7 +65,6 @@ export default function MobileZone({
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
editing={editing}
/>
),
)}
Expand Down
3 changes: 0 additions & 3 deletions src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx
View file
Expand Up @@ -9,7 +9,6 @@ export type Props = {
zone?: WidgetZone;
zoneName: "inner" | "outer";
layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
editing?: boolean;
isEditable?: boolean;
isBuilt?: boolean;
sceneProperty?: any;
Expand All @@ -28,7 +27,6 @@ export default function Zone({
sceneProperty,
pluginProperty,
pluginBaseUrl,
editing,
isEditable,
isBuilt,
children,
Expand Down Expand Up @@ -56,7 +54,6 @@ export default function Zone({
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
editing={editing}
/>
),
)}
Expand Down
8 changes: 2 additions & 6 deletions src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
View file
Expand Up @@ -81,8 +81,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
layoutConstraint={layoutConstraint}
editing={editing}>
layoutConstraint={layoutConstraint}>
{alignSystem?.inner && (
<ZoneComponent
zoneName="inner"
Expand All @@ -93,7 +92,6 @@ const WidgetAlignSystem: React.FC<Props> = ({
isEditable={isEditable}
isBuilt={isBuilt}
layoutConstraint={layoutConstraint}
editing={editing}
/>
)}
</MobileZone>
Expand All @@ -106,8 +104,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
layoutConstraint={layoutConstraint}
editing={editing}>
layoutConstraint={layoutConstraint}>
<ZoneComponent
zoneName="inner"
zone={alignSystem?.inner}
Expand All @@ -117,7 +114,6 @@ const WidgetAlignSystem: React.FC<Props> = ({
isEditable={isEditable}
isBuilt={isBuilt}
layoutConstraint={layoutConstraint}
editing={editing}
/>
</ZoneComponent>
)}
Expand Down

0 comments on commit 219ea4b

Please sign in to comment.