From 13f2acd84ea966fc674866318097d96f63ca2693 Mon Sep 17 00:00:00 2001 From: NanhuaZhang <1187692525@qq.com> Date: Tue, 10 Oct 2023 13:56:43 +0800 Subject: [PATCH 1/2] feat: add point api --- docs/demos/show-component.md | 8 ++++ docs/demos/show.md | 8 ++++ docs/examples/show-component.tsx | 75 ++++++++++++++++++++++++++++++++ docs/examples/show.tsx | 67 ++++++++++++++++++++++++++++ src/index.tsx | 16 ++++++- src/show.tsx | 50 +++++++++++++++++++++ 6 files changed, 222 insertions(+), 2 deletions(-) create mode 100644 docs/demos/show-component.md create mode 100644 docs/demos/show.md create mode 100644 docs/examples/show-component.tsx create mode 100644 docs/examples/show.tsx create mode 100644 src/show.tsx diff --git a/docs/demos/show-component.md b/docs/demos/show-component.md new file mode 100644 index 00000000..8cc52370 --- /dev/null +++ b/docs/demos/show-component.md @@ -0,0 +1,8 @@ +--- +title: ShowComponent +nav: + title: Demo + path: /demo +--- + + \ No newline at end of file diff --git a/docs/demos/show.md b/docs/demos/show.md new file mode 100644 index 00000000..b44711ce --- /dev/null +++ b/docs/demos/show.md @@ -0,0 +1,8 @@ +--- +title: Show +nav: + title: Demo + path: /demo +--- + + \ No newline at end of file diff --git a/docs/examples/show-component.tsx b/docs/examples/show-component.tsx new file mode 100644 index 00000000..b3271f4e --- /dev/null +++ b/docs/examples/show-component.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import Trigger from '@/index'; + +const builtinPlacements = { + topLeft: { + points: ['tl', 'tl'], + }, +}; + +const innerTrigger = ( +
This is popup
+); + +class Test extends React.Component { + state = { + mouseX: 600, + mouseY: 300, + }; + + onMouseXChange = ({ target: { value } }) => { + this.setState({ mouseX: Number(value) || 0 }); + }; + + onMouseYChange = ({ target: { value } }) => { + this.setState({ mouseY: Number(value) || 0 }); + }; + + show = ()=>{ + this.forceUpdate(); + } + + render() { + const { mouseX,mouseY } = this.state; + + return ( +
+ + + +
+ Interactive region +
+ +
+ ); + } +} + +export default Test; diff --git a/docs/examples/show.tsx b/docs/examples/show.tsx new file mode 100644 index 00000000..00775f2f --- /dev/null +++ b/docs/examples/show.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { triggerShow } from '@/show'; + +const builtinPlacements = { + topLeft: { + points: ['tl', 'tl'], + }, +}; + +const innerTrigger = ( +
This is popup
+); + +class Test extends React.Component { + state = { + mouseX: 600, + mouseY: 300, + }; + + onMouseXChange = ({ target: { value } }) => { + this.setState({ mouseX: Number(value) || 0 }); + }; + + onMouseYChange = ({ target: { value } }) => { + this.setState({ mouseY: Number(value) || 0 }); + }; + + show = ()=>{ + triggerShow.show({ + point: [this.state.mouseX, this.state.mouseY], + popup: innerTrigger, + builtinPlacements, + popupClassName:'point-popup', + popupAlign:{ + overflow: { + adjustX: 1, + adjustY: 1, + }, + }, + popupPlacement:'topLeft' + }) + } + + hide = () => { + triggerShow.hide(); + } + + render() { + const { mouseX,mouseY } = this.state; + + return ( +
+ + +
+ ); + } +} + +export default Test; diff --git a/src/index.tsx b/src/index.tsx index 416d9edf..659d09c7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -111,6 +111,7 @@ export interface TriggerProps { onPopupClick?: React.MouseEventHandler; alignPoint?: boolean; // Maybe we can support user pass position in the future + point?: [x: number, y: number]; /** * Trigger will memo content when close. @@ -189,6 +190,7 @@ export function generateTrigger( fresh, alignPoint, + point, onPopupClick, onPopupAlign, @@ -347,6 +349,14 @@ export function generateTrigger( React.useEffect(() => clearDelay, []); + React.useEffect(()=>{ + if (point){ + queueMicrotask(()=>{ + triggerOpen(true); + }) + } + },[point]) + // ========================== Motion ============================ const [inMotion, setInMotion] = React.useState(false); @@ -363,14 +373,16 @@ export function generateTrigger( React.useState(null); // =========================== Align ============================ - const [mousePos, setMousePos] = React.useState<[x: number, y: number]>([ + const [mousePos, setMousePos] = React.useState<[x: number, y: number]>(point ?? [ 0, 0, ]); const setMousePosByEvent = ( event: Pick, ) => { - setMousePos([event.clientX, event.clientY]); + if (!point){ + setMousePos([event.clientX, event.clientY]); + } }; const [ diff --git a/src/show.tsx b/src/show.tsx new file mode 100644 index 00000000..a73c1ee2 --- /dev/null +++ b/src/show.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import type { TriggerProps } from './index'; +import Trigger from './index'; +import type { Root } from 'react-dom/client'; +import { createRoot } from 'react-dom/client'; + +export interface ShowProps extends Omit { + point: [x: number, y: number]; +} + +export class TriggerShow { + public container = document.createElement('div'); + public root?: Root; + + public constructor() { + this.container.id = 'trigger-show-container'; + document.body.append(this.container); + } + + public show(props: ShowProps) { + if (this.root) { + this.root.unmount(); + } + this.root = createRoot(this.container); + this.root.render( + +
+ ); + } + + public hide() { + this.root?.unmount(); + } +} + +export const triggerShow = new TriggerShow(); + +// @ts-ignore +window.show = triggerShow; \ No newline at end of file From 8d8c7bfa50972f3b582160dae80beb3fb30abbe8 Mon Sep 17 00:00:00 2001 From: NanhuaZhang <1187692525@qq.com> Date: Tue, 10 Oct 2023 14:01:09 +0800 Subject: [PATCH 2/2] feat: rm window set --- src/show.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/show.tsx b/src/show.tsx index a73c1ee2..03979dd2 100644 --- a/src/show.tsx +++ b/src/show.tsx @@ -44,7 +44,4 @@ export class TriggerShow { } } -export const triggerShow = new TriggerShow(); - -// @ts-ignore -window.show = triggerShow; \ No newline at end of file +export const triggerShow = new TriggerShow(); \ No newline at end of file