plain-design 1.0.0-beta.34 → 1.0.0-beta.37

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

@@ -1,99 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, useMessage, useNotice} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const { $notice } = useNotice();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button label="basic notice" onClick={() => $notice('您有一条未读消息！')}/>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const { $notice } = useNotice();
-
-  return () => (
-    <DemoRow title="状态">
-      <Button label="Primary" onClick={() => $notice.primary('您有一条未读消息！')} mode="fill" status="primary"/>
-      <Button label="Success" onClick={() => $notice.success('您有一条未读消息！')} mode="fill" status="success"/>
-      <Button label="Warn" onClick={() => $notice.warn('您有一条未读消息！')} mode="fill" status="warn"/>
-      <Button label="Error" onClick={() => $notice.error('您有一条未读消息！')} mode="fill" status="error"/>
-      <Button label="Secondary" onClick={() => $notice.secondary('您有一条未读消息！')} mode="fill" status="secondary"/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const { $notice } = useNotice();
-
-  return () => (
-    <DemoRow title="停留时间">
-      <Button label="3s(default)" onClick={() => $notice('您有一条未读消息！')}/>
-      <Button label="1s" onClick={() => $notice('您有一条未读消息！', { time: 1000 })}/>
-      <Button label="never" onClick={() => $notice('您有一条未读消息！', { time: null })}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const { $notice } = useNotice();
-  const { $message } = useMessage();
-
-  const showNotice = () => {
-    const close = $notice({
-      icon: 'pi-customer-service',
-      time: null,
-      renderHead: () => <>订单状态变更通知</>,
-      renderContent: () => <>
-        您的订单已经被商家受理，正在安排仓库发货。
-      </>,
-      renderFoot: () => <>
-        <Button size="mini" label="取消订阅" onClick={() => {
-          close();
-          $message('取消订阅');
-        }}/>
-        <Button size="mini" label="查看订单" mode="fill" onClick={close}/>
-      </>
-    });
-  };
-
-  return () => (
-    <DemoRow title="自定义内容">
-      <Button label="custom" onClick={showNotice}/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const { $notice } = useNotice();
-
-  return () => (
-    <DemoRow title="消息位置">
-      <Button label="Top Left" onClick={() => $notice('您有一条未读消息！', { horizontal: 'start', vertical: 'start' })}/>
-      <Button label="Top Right" onClick={() => $notice('您有一条未读消息！', { horizontal: 'end', vertical: 'start' })}/>
-      <Button label="Bottom Left" onClick={() => $notice('您有一条未读消息！', { horizontal: 'start', vertical: 'end' })}/>
-      <Button label="Bottom Right" onClick={() => $notice('您有一条未读消息！', { horizontal: 'end', vertical: 'end' })}/>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-
-  const { $notice } = useNotice();
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="监听点击/关闭动作">
-      <Button label="basic notice" onClick={() => $notice('您有一条未读消息！', { onClose: () => $message('close'), onClick: () => $message('click') })}/>
-    </DemoRow>
-  );
-});

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

@@ -1,325 +0,0 @@
-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>
-  );
-});