plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/service/DemoPopupService.tsx

@@ -1,322 +1,325 @@
-import {designPage, getComponentCls, iMouseEvent, reactive, useRefs} from "plain-design-composition";
-import {Button, Checkbox} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {usePopup} from "../../../../packages/components/usePopup/usePopup";
-import {ePopupAnimation, ePopupTrigger, iPopupPlacement, iPopupUseOption} from "../../../../packages/components/usePopup/utils/popup.utils";
-import ButtonGroup from "../../../../packages/components/ButtonGroup";
-import {useMove} from "../../../../packages/utils/useMove";
-import {useReferenceTrigger} from "../../../../packages/components/usePopup/trigger/useReferenceTrigger";
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ button: Button });
-
-  const { $popup, popupId } = usePopup();
-
-  const state = reactive({
-    placement: 'top' as iPopupPlacement,
-    arrow: true,
-    boundary: true,
-    refreshOnScroll: true,
-    hideOnScroll: false,
-    trigger: ePopupTrigger.click as typeof ePopupTrigger.TYPE,
-    interactive: true,
-    hideOnClickReference: true,
-    sizeEqual: false,
-    animation: ePopupAnimation.slide as typeof ePopupAnimation.TYPE,
-    // offsetAlign: 40,
-
-    placementListArray: [
-      ['top', 'bottom', 'left', 'right',],
-      ['top-start', 'top-center', 'top-end',],
-      ['bottom-start', 'bottom-center', 'bottom-end',],
-      ['left-start', 'left-center', 'left-end',],
-      ['right-start', 'right-center', 'right-end',],
-    ] as iPopupPlacement[][],
-
-    triggers: [
-      ePopupTrigger.click,
-      ePopupTrigger.contextmenu,
-      ePopupTrigger.hover,
-      ePopupTrigger.focus,
-      ePopupTrigger.manual,
-    ] as typeof ePopupTrigger.TYPE[],
-
-    animations: [
-      ePopupAnimation.fade,
-      ePopupAnimation.slide,
-      ePopupAnimation.drop,
-      ePopupAnimation.scale,
-      ePopupAnimation["scale-y"],
-    ] as typeof ePopupAnimation.TYPE[],
-  });
-
-  const utils = {
-    getOption: (): iPopupUseOption => {
-      return {
-        id: popupId,
-        type: "1",
-        placement: state.placement,
-        reference: refs.button!.refs.el!,
-        trigger: state.trigger,
-        arrowSize: state.arrow ? undefined : 0,
-        boundary: state.boundary ? `#boundary-${popupId}` : undefined,
-        refreshOnScroll: state.refreshOnScroll,
-        hideOnScroll: state.hideOnScroll,
-        interactive: state.interactive,
-        hideOnClickReference: state.hideOnClickReference,
-        sizeEqual: state.sizeEqual,
-        animation: state.animation,
-        // offsetAlign: 40,
-        render: () => (
-          <div>
-            <div>桃花坞里桃花庵;</div>
-            <div>桃花庵里桃花仙;</div>
-            <div>桃花仙人种桃树;</div>
-            <div>又摘桃花换酒钱;</div>
-          </div>
-        )
-      };
-    },
-    update: () => {
-      $popup.update(utils.getOption());
-    },
-  };
-
-  useMove({
-    elGetter: () => refs.button?.refs.el,
-    onMove: () => $popup.refresh(utils.getOption())
-  });
-
-  useReferenceTrigger({
-    get: () => ({ reference: refs.button?.refs.el, trigger: state.trigger }),
-    getOption: () => utils.getOption(),
-    manager: $popup.manager,
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <div id={`boundary-${popupId}`} style={{ width: '400px', height: '400px', marginBottom: '100px', backgroundColor: '#f1f1f1', padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Button label="POPUP" ref={onRef.button} mode="fill"/>
-      </div>
-      {state.placementListArray.map(list => (
-        <ButtonGroup key={list[0]} style={{ marginBottom: '12px' }}>
-          {list.map(item => (
-            <Button
-              key={item}
-              label={item}
-              mode={item === state.placement ? 'fill' : 'flat'}
-              onClick={() => {
-                state.placement = item;
-                utils.update();
-              }}
-            />
-          ))}
-        </ButtonGroup>
-      ))}
-      <div style={{ height: '24px' }}/>
-      <ButtonGroup>
-        {state.triggers.map(trigger => (
-          <Button
-            key={trigger}
-            label={trigger}
-            mode={trigger === state.trigger ? 'fill' : 'flat'}
-            onClick={() => {
-              state.trigger = trigger;
-              utils.update();
-            }}
-          />
-        ))}
-      </ButtonGroup>
-      <div style={{ height: '24px' }}/>
-      <ButtonGroup>
-        {state.animations.map(animation => (
-          <Button
-            key={animation}
-            label={animation}
-            mode={animation === state.animation ? 'fill' : 'flat'}
-            onClick={() => {
-              state.animation = animation;
-              utils.update();
-            }}
-          />
-        ))}
-      </ButtonGroup>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="arrow" v-model={state.arrow} onChange={utils.update}/>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="boundary" v-model={state.boundary} onChange={utils.update}/>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="refreshOnScroll" v-model={state.refreshOnScroll} onChange={utils.update}/>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="hideOnScroll" v-model={state.hideOnScroll} onChange={utils.update}/>
-      {state.trigger === ePopupTrigger.hover && <>
-        <div style={{ height: '24px' }}/>
-        <Checkbox label="interactive" v-model={state.interactive} onChange={utils.update}/>
-      </>}
-      {(state.trigger === ePopupTrigger.hover || state.trigger === ePopupTrigger.contextmenu) && <>
-        <div style={{ height: '24px' }}/>
-        <Checkbox label="hideOnClickReference" v-model={state.hideOnClickReference} onChange={utils.update}/>
-      </>}
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="sizeEqual" v-model={state.sizeEqual} onChange={utils.update}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ button: Button, boundary: HTMLDivElement });
-
-  const { $popup, popupId } = usePopup();
-
-  const state = reactive({
-    placement: 'top' as iPopupPlacement,
-    arrow: true,
-    boundary: true,
-    refreshOnScroll: true,
-    hideOnScroll: false,
-    trigger: ePopupTrigger.click as typeof ePopupTrigger.TYPE,
-    interactive: true,
-    hideOnClickReference: true,
-
-    placementListArray: [
-      ['top', 'bottom', 'left', 'right',],
-      ['top-start', 'top-center', 'top-end',],
-      ['bottom-start', 'bottom-center', 'bottom-end',],
-      ['left-start', 'left-center', 'left-end',],
-      ['right-start', 'right-center', 'right-end',],
-    ] as iPopupPlacement[][],
-
-    triggers: [
-      ePopupTrigger.click,
-      ePopupTrigger.contextmenu,
-      ePopupTrigger.hover,
-      ePopupTrigger.focus,
-      ePopupTrigger.manual,
-    ] as typeof ePopupTrigger.TYPE[]
-  });
-
-  const utils = {
-    getOption: (): iPopupUseOption => {
-      return {
-        id: popupId,
-        type: "1",
-        placement: state.placement,
-        reference: refs.button!.refs.el!,
-        trigger: state.trigger,
-        arrowSize: state.arrow ? undefined : 0,
-        refreshOnScroll: state.refreshOnScroll,
-        hideOnScroll: state.hideOnScroll,
-        interactive: state.interactive,
-        hideOnClickReference: state.hideOnClickReference,
-        stickyReference: refs.boundary,
-        render: () => (
-          <div>
-            <div>桃花坞里桃花庵;</div>
-            <div>桃花庵里桃花仙;</div>
-            <div>桃花仙人种桃树;</div>
-            <div>又摘桃花换酒钱;</div>
-          </div>
-        )
-      };
-    },
-    update: () => {
-      $popup.update(utils.getOption());
-    },
-  };
-
-  useMove({
-    elGetter: () => refs.button?.refs.el,
-    onMove: () => $popup.refresh(utils.getOption())
-  });
-
-  useReferenceTrigger({
-    get: () => ({ reference: refs.button?.refs.el, trigger: state.trigger }),
-    getOption: () => utils.getOption(),
-    manager: $popup.manager,
-  });
-
-  return () => (
-    <DemoRow title="StickyReference">
-      <div ref={onRef.boundary} style={{ width: '400px', height: '400px', marginBottom: '100px', backgroundColor: '#f1f1f1', padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Button label="POPUP" ref={onRef.button} mode="fill"/>
-      </div>
-      {state.placementListArray.map(list => (
-        <ButtonGroup key={list[0]} style={{ marginBottom: '12px' }}>
-          {list.map(item => (
-            <Button
-              key={item}
-              label={item}
-              mode={item === state.placement ? 'fill' : 'flat'}
-              onClick={() => {
-                state.placement = item;
-                utils.update();
-              }}
-            />
-          ))}
-        </ButtonGroup>
-      ))}
-      <div style={{ height: '24px' }}/>
-      <ButtonGroup>
-        {state.triggers.map(trigger => (
-          <Button
-            key={trigger}
-            label={trigger}
-            mode={trigger === state.trigger ? 'fill' : 'flat'}
-            onClick={() => {
-              state.trigger = trigger;
-            }}
-          />
-        ))}
-      </ButtonGroup>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="arrow" v-model={state.arrow} onChange={utils.update}/>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="refreshOnScroll" v-model={state.refreshOnScroll} onChange={utils.update}/>
-      <div style={{ height: '24px' }}/>
-      <Checkbox label="hideOnScroll" v-model={state.hideOnScroll} onChange={utils.update}/>
-      {state.trigger === ePopupTrigger.hover && <>
-        <div style={{ height: '24px' }}/>
-        <Checkbox label="interactive" v-model={state.interactive} onChange={utils.update}/>
-      </>}
-      {(state.trigger === ePopupTrigger.hover || state.trigger === ePopupTrigger.contextmenu) && <>
-        <div style={{ height: '24px' }}/>
-        <Checkbox label="hideOnClickReference" v-model={state.hideOnClickReference} onChange={utils.update}/>
-      </>}
-    </DemoRow>
-  );
-});
-
-export const demoAbsolute = designPage(() => {
-
-  const { $popup } = usePopup();
-
-  const handler = {
-    onContextmenu: (e: iMouseEvent) => {
-      e.preventDefault();
-      $popup.absolute({
-        x: e.clientX,
-        y: e.clientY,
-        type: 'demo-absolute',
-        placement: 'right-start',
-        trigger: 'contextmenu',
-        render: () => (
-          <div>
-            <div>桃花坞里桃花庵；</div>
-            <div>桃花庵里桃花仙；</div>
-            <div>桃花仙人种桃树；</div>
-            <div>又摘桃花换酒钱；</div>
-          </div>
-        )
-      });
-    },
-  };
-
-  return () => (
-    <DemoRow title="绝对定位">
-      <div onContextMenu={handler.onContextmenu} style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-1')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>
-    </DemoRow>
-  );
-});
+import {designPage, getComponentCls, iMouseEvent, reactive, useRefs} from "plain-design-composition";
+import {Button, Checkbox, ClientZoom} from "../../../../packages";
+import {DemoRow} from "../../Demo/DemoRow";
+import {usePopup} from "../../../../packages/components/usePopup/usePopup";
+import {ePopupAnimation, ePopupTrigger, iPopupPlacement, iPopupUseOption} from "../../../../packages/components/usePopup/utils/popup.utils";
+import ButtonGroup from "../../../../packages/components/ButtonGroup";
+import {useMove} from "../../../../packages/utils/useMove";
+import {useReferenceTrigger} from "../../../../packages/components/usePopup/trigger/useReferenceTrigger";
+
+export const demo1 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ button: Button });
+
+  const { $popup, popupId } = usePopup();
+
+  const state = reactive({
+    placement: 'top' as iPopupPlacement,
+    arrow: true,
+    boundary: true,
+    refreshOnScroll: true,
+    hideOnScroll: false,
+    trigger: ePopupTrigger.click as typeof ePopupTrigger.TYPE,
+    interactive: true,
+    hideOnClickReference: true,
+    sizeEqual: false,
+    animation: ePopupAnimation.slide as typeof ePopupAnimation.TYPE,
+    // offsetAlign: 40,
+
+    placementListArray: [
+      ['top', 'bottom', 'left', 'right',],
+      ['top-start', 'top-center', 'top-end',],
+      ['bottom-start', 'bottom-center', 'bottom-end',],
+      ['left-start', 'left-center', 'left-end',],
+      ['right-start', 'right-center', 'right-end',],
+    ] as iPopupPlacement[][],
+
+    triggers: [
+      ePopupTrigger.click,
+      ePopupTrigger.contextmenu,
+      ePopupTrigger.hover,
+      ePopupTrigger.focus,
+      ePopupTrigger.manual,
+    ] as typeof ePopupTrigger.TYPE[],
+
+    animations: [
+      ePopupAnimation.fade,
+      ePopupAnimation.slide,
+      ePopupAnimation.drop,
+      ePopupAnimation.scale,
+      ePopupAnimation["scale-y"],
+    ] as typeof ePopupAnimation.TYPE[],
+  });
+
+  const utils = {
+    getOption: (): iPopupUseOption => {
+      return {
+        id: popupId,
+        type: "1",
+        placement: state.placement,
+        reference: refs.button!.refs.el!,
+        trigger: state.trigger,
+        arrowSize: state.arrow ? undefined : 0,
+        boundary: state.boundary ? `#boundary-${popupId}` : undefined,
+        refreshOnScroll: state.refreshOnScroll,
+        hideOnScroll: state.hideOnScroll,
+        interactive: state.interactive,
+        hideOnClickReference: state.hideOnClickReference,
+        sizeEqual: state.sizeEqual,
+        animation: state.animation,
+        // offsetAlign: 40,
+        render: () => (
+          <div>
+            <div>桃花坞里桃花庵;</div>
+            <div>桃花庵里桃花仙;</div>
+            <div>桃花仙人种桃树;</div>
+            <div>又摘桃花换酒钱;</div>
+          </div>
+        )
+      };
+    },
+    update: () => {
+      $popup.update(utils.getOption());
+    },
+  };
+
+  useMove({
+    elGetter: () => refs.button?.refs.el,
+    onMove: () => $popup.refresh(utils.getOption())
+  });
+
+  useReferenceTrigger({
+    get: () => ({ reference: refs.button?.refs.el, trigger: state.trigger }),
+    getOption: () => utils.getOption(),
+    manager: $popup.manager,
+  });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <div id={`boundary-${popupId}`} style={{ width: '400px', height: '400px', marginBottom: '100px', backgroundColor: '#f1f1f1', padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Button label="POPUP" ref={onRef.button} mode="fill"/>
+      </div>
+      {state.placementListArray.map(list => (
+        <ButtonGroup key={list[0]} style={{ marginBottom: '12px' }}>
+          {list.map(item => (
+            <Button
+              key={item}
+              label={item}
+              mode={item === state.placement ? 'fill' : 'flat'}
+              onClick={() => {
+                state.placement = item;
+                utils.update();
+              }}
+            />
+          ))}
+        </ButtonGroup>
+      ))}
+      <div style={{ height: '24px' }}/>
+      <ButtonGroup>
+        {state.triggers.map(trigger => (
+          <Button
+            key={trigger}
+            label={trigger}
+            mode={trigger === state.trigger ? 'fill' : 'flat'}
+            onClick={() => {
+              state.trigger = trigger;
+              utils.update();
+            }}
+          />
+        ))}
+      </ButtonGroup>
+      <div style={{ height: '24px' }}/>
+      <ButtonGroup>
+        {state.animations.map(animation => (
+          <Button
+            key={animation}
+            label={animation}
+            mode={animation === state.animation ? 'fill' : 'flat'}
+            onClick={() => {
+              state.animation = animation;
+              utils.update();
+            }}
+          />
+        ))}
+      </ButtonGroup>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="arrow" v-model={state.arrow} onChange={utils.update}/>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="boundary" v-model={state.boundary} onChange={utils.update}/>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="refreshOnScroll" v-model={state.refreshOnScroll} onChange={utils.update}/>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="hideOnScroll" v-model={state.hideOnScroll} onChange={utils.update}/>
+      {state.trigger === ePopupTrigger.hover && <>
+        <div style={{ height: '24px' }}/>
+        <Checkbox label="interactive" v-model={state.interactive} onChange={utils.update}/>
+      </>}
+      {(state.trigger === ePopupTrigger.hover || state.trigger === ePopupTrigger.contextmenu) && <>
+        <div style={{ height: '24px' }}/>
+        <Checkbox label="hideOnClickReference" v-model={state.hideOnClickReference} onChange={utils.update}/>
+      </>}
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="sizeEqual" v-model={state.sizeEqual} onChange={utils.update}/>
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ button: Button, boundary: HTMLDivElement });
+
+  const { $popup, popupId } = usePopup();
+
+  const state = reactive({
+    placement: 'top' as iPopupPlacement,
+    arrow: true,
+    boundary: true,
+    refreshOnScroll: true,
+    hideOnScroll: false,
+    trigger: ePopupTrigger.click as typeof ePopupTrigger.TYPE,
+    interactive: true,
+    hideOnClickReference: true,
+
+    placementListArray: [
+      ['top', 'bottom', 'left', 'right',],
+      ['top-start', 'top-center', 'top-end',],
+      ['bottom-start', 'bottom-center', 'bottom-end',],
+      ['left-start', 'left-center', 'left-end',],
+      ['right-start', 'right-center', 'right-end',],
+    ] as iPopupPlacement[][],
+
+    triggers: [
+      ePopupTrigger.click,
+      ePopupTrigger.contextmenu,
+      ePopupTrigger.hover,
+      ePopupTrigger.focus,
+      ePopupTrigger.manual,
+    ] as typeof ePopupTrigger.TYPE[]
+  });
+
+  const utils = {
+    getOption: (): iPopupUseOption => {
+      return {
+        id: popupId,
+        type: "1",
+        placement: state.placement,
+        reference: refs.button!.refs.el!,
+        trigger: state.trigger,
+        arrowSize: state.arrow ? undefined : 0,
+        refreshOnScroll: state.refreshOnScroll,
+        hideOnScroll: state.hideOnScroll,
+        interactive: state.interactive,
+        hideOnClickReference: state.hideOnClickReference,
+        stickyReference: refs.boundary,
+        render: () => (
+          <div>
+            <div>桃花坞里桃花庵;</div>
+            <div>桃花庵里桃花仙;</div>
+            <div>桃花仙人种桃树;</div>
+            <div>又摘桃花换酒钱;</div>
+          </div>
+        )
+      };
+    },
+    update: () => {
+      $popup.update(utils.getOption());
+    },
+  };
+
+  useMove({
+    elGetter: () => refs.button?.refs.el,
+    onMove: () => $popup.refresh(utils.getOption())
+  });
+
+  useReferenceTrigger({
+    get: () => ({ reference: refs.button?.refs.el, trigger: state.trigger }),
+    getOption: () => utils.getOption(),
+    manager: $popup.manager,
+  });
+
+  return () => (
+    <DemoRow title="StickyReference">
+      <div ref={onRef.boundary} style={{ width: '400px', height: '400px', marginBottom: '100px', backgroundColor: '#f1f1f1', padding: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Button label="POPUP" ref={onRef.button} mode="fill"/>
+      </div>
+      {state.placementListArray.map(list => (
+        <ButtonGroup key={list[0]} style={{ marginBottom: '12px' }}>
+          {list.map(item => (
+            <Button
+              key={item}
+              label={item}
+              mode={item === state.placement ? 'fill' : 'flat'}
+              onClick={() => {
+                state.placement = item;
+                utils.update();
+              }}
+            />
+          ))}
+        </ButtonGroup>
+      ))}
+      <div style={{ height: '24px' }}/>
+      <ButtonGroup>
+        {state.triggers.map(trigger => (
+          <Button
+            key={trigger}
+            label={trigger}
+            mode={trigger === state.trigger ? 'fill' : 'flat'}
+            onClick={() => {
+              state.trigger = trigger;
+            }}
+          />
+        ))}
+      </ButtonGroup>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="arrow" v-model={state.arrow} onChange={utils.update}/>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="refreshOnScroll" v-model={state.refreshOnScroll} onChange={utils.update}/>
+      <div style={{ height: '24px' }}/>
+      <Checkbox label="hideOnScroll" v-model={state.hideOnScroll} onChange={utils.update}/>
+      {state.trigger === ePopupTrigger.hover && <>
+        <div style={{ height: '24px' }}/>
+        <Checkbox label="interactive" v-model={state.interactive} onChange={utils.update}/>
+      </>}
+      {(state.trigger === ePopupTrigger.hover || state.trigger === ePopupTrigger.contextmenu) && <>
+        <div style={{ height: '24px' }}/>
+        <Checkbox label="hideOnClickReference" v-model={state.hideOnClickReference} onChange={utils.update}/>
+      </>}
+    </DemoRow>
+  );
+});
+
+export const demoAbsolute = designPage(() => {
+
+  const { $popup } = usePopup();
+
+  const handler = {
+    onContextmenu: (e: iMouseEvent) => {
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
+      e.preventDefault();
+      $popup.absolute({
+        x: clientX,
+        y: clientY,
+        type: 'demo-absolute',
+        placement: 'right-start',
+        trigger: 'contextmenu',
+        render: () => (
+          <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        )
+      });
+    },
+  };
+
+  return () => (
+    <DemoRow title="绝对定位">
+      <div onContextMenu={handler.onContextmenu} style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-1')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>
+    </DemoRow>
+  );
+});