plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/components/normal/DemoPopup.tsx

@@ -0,0 +1,695 @@
+import {designComponent, designPage, getComponentCls, inject, onBeforeUnmount, onMounted, provide, reactive, useRefs} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Button, ButtonGroup, Checkbox, Icon, Input, Popup} from "../../../../packages";
+import {DemoLine} from "../../Demo/DemoLine";
+import {iPopupAlign, iPopupDirection, iPopupTrigger} from "../../../../packages/components/usePopup/utils/popup.utils";
+import treeData from '../../../data/tree.data.json';
+import button from "../../../../packages/components/Button";
+
+export const demo1 = designPage(() => {
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Popup>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+
+      <Popup message="popper content" title="Title">
+        <span>Span</span>
+      </Popup>
+      <Popup message="popper content" title="Title">
+        <Icon icon="pi-search"/>
+      </Popup>
+
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+
+  const directions = ['top', 'bottom', 'left', 'right'] as iPopupDirection[];
+  const aligns = ['start', 'center', 'end'] as iPopupAlign[];
+
+  return () => (
+    <DemoRow title="方向位置">
+      {directions.map(direction => (
+        <DemoLine key={direction}>
+          <ButtonGroup>
+            <Popup placement={direction} key="default">
+              {{
+                default: () => <Button label={direction}/>,
+                popper: () => <>
+                  <div style={{ height: '100px' }}>popper content</div>
+                </>
+              }}
+            </Popup>
+            {aligns.map(align => (
+              <Popup placement={`${direction}-${align}`} key={align}>
+                {{
+                  default: () => <Button label={`${direction}-${align}`}/>,
+                  popper: () => <>
+                    <div style={{ height: '100px' }}>popper content</div>
+                  </>
+                }}
+              </Popup>
+            ))}
+          </ButtonGroup>
+        </DemoLine>
+      ))}
+    </DemoRow>
+  );
+});
+
+
+export const demo3 = designPage(() => {
+
+  const state = reactive({
+    manualValue: false,
+  });
+
+  return () => (
+    <DemoRow title="触发动作">
+      <Popup trigger="hover">
+        {{
+          default: () => <Button label="Hover"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="click">
+        {{
+          default: () => <Button label="Click"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="focus">
+        {{
+          default: () => <Button label="Focus"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="contextmenu">
+        {{
+          default: () => <Button label="Contextmenu"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup trigger="manual" v-model={state.manualValue}>
+        {{
+          default: () => <Button label="Manual(Click)" onClick={() => state.manualValue = !state.manualValue}/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+
+    </DemoRow>
+  );
+});
+
+
+export const demoSize = designPage(() => {
+
+  return () => (
+    <DemoRow title="大小尺寸">
+      <Popup popperSize="mini">
+        {{
+          default: () => <Button label="Mini" size="mini"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup popperSize="small">
+        {{
+          default: () => <Button label="Small" size="small"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup popperSize="normal">
+        {{
+          default: () => <Button label="Normal" size="normal"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup popperSize="large">
+        {{
+          default: () => <Button label="Large" size="large"/>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+
+    </DemoRow>
+  );
+});
+
+export const demo4 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ button: Button });
+
+  return () => (
+    <DemoRow title="外部Reference">
+
+      <Button label="Outer reference" ref={onRef.button}/>
+
+      <Popup reference={refs.button?.refs.el}>
+        {{ popper: () => <div>popper content</div> }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo5 = designPage(() => {
+
+  return () => (
+    <DemoRow title="SizeEqual">
+
+      <Popup sizeEqual>
+        {{
+          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-6')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Vertical</div>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+      <Popup placement="right" sizeEqual>
+        {{
+          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-6')})`, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>Horizontal</div>,
+          popper: () => <div>popper content</div>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo6 = designPage(() => {
+
+  return () => (
+    <DemoRow title="过度动画">
+
+      <p>fade动画一般用于Tooltip</p>
+      <p>drop动画一般用于dropdown</p>
+      <p>slide动画一般用于下拉表单组件</p>
+      <p>scale一般用于提示信息</p>
+      <p>direction-scale一般不用</p>
+
+      <Popup animation="fade">
+        {{
+          default: () => <Button label="fade"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="slide">
+        {{
+          default: () => <Button label="slide"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="scale">
+        {{
+          default: () => <Button label="scale"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="scale-y">
+        {{
+          default: () => <Button label="scale-y"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+      <Popup animation="drop">
+        {{
+          default: () => <Button label="drop"/>,
+          popper: () => <div>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </div>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo7 = designPage(() => {
+
+  const state = reactive({
+    show: false,
+    open: false,
+  });
+
+  return () => (
+    <DemoRow title="show & open">
+      <Checkbox label="show" v-model={state.show}/>
+      <Checkbox label="open" v-model={state.open}/>
+
+      <Popup v-model={state.show} v-model:open={state.open}>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo8 = designPage(() => {
+
+  const state = reactive({
+    isShow: false,
+    config: {
+      direction: 'bottom' as any,
+      align: 'start' as any,
+      animation: 'drop' as any,
+      showArrow: true,
+      trigger: 'click' as any,
+    }
+  });
+
+  const directions = ['top', 'bottom', 'left', 'right'];
+  const aligns = ['start', 'center', 'end'];
+  const animations = [
+    'fade',
+    'slide',
+    'drop',
+    'scale',
+    'scale-y',
+  ];
+
+  return () => (
+    <DemoRow title="综合示例">
+      <Popup
+        placement={`${state.config.direction}-${state.config.align}` as any}
+        trigger={state.config.trigger}
+        animation={state.config.animation}
+        arrowSize={state.config.showArrow ? undefined : 0}
+      >
+        {{
+          default: () => <Button label="Button" onClick={() => {state.config.trigger === 'manual' && (state.isShow = !state.isShow);}}/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+
+      <DemoLine title="directions">
+        <ButtonGroup>
+          {directions.map(direction => <Button label={direction} onClick={() => state.config.direction = direction} key={direction} mode={state.config.direction === direction ? 'fill' : undefined}/>)}
+        </ButtonGroup>
+      </DemoLine>
+
+      <DemoLine title="aligns">
+        <ButtonGroup>
+          {aligns.map(align => <Button label={align} onClick={() => state.config.align = align} key={align} mode={state.config.align === align ? 'fill' : undefined}/>)}
+        </ButtonGroup>
+      </DemoLine>
+
+      <DemoLine title="animations">
+        <ButtonGroup>
+          {animations.map(animation => <Button label={animation} onClick={() => state.config.animation = animation} key={animation} mode={state.config.animation === animation ? 'fill' : undefined}/>)}
+        </ButtonGroup>
+      </DemoLine>
+
+      <DemoLine title="show arrow">
+        <Checkbox label="arrow" v-model={state.config.showArrow}/>
+      </DemoLine>
+
+    </DemoRow>
+  );
+});
+
+
+export const demo10 = designPage(() => {
+
+  return () => (
+    <DemoRow title="设置宽高">
+      <p>只有设置高度的时候使用Scroll滚动条容器</p>
+      <Popup height="100px" width="200px">
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+            ---
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo11 = designPage(() => {
+
+  return () => (
+    <DemoRow title="去掉默认内边距">
+      <Popup noPadding>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demo12 = designPage(() => {
+
+  const state = reactive({
+    disabled: false,
+  });
+
+  return () => (
+    <DemoRow title="禁用">
+      <Checkbox v-model={state.disabled} label="disabled"/>
+      <Popup disabled={state.disabled}>
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demoDestroy = designPage(() => {
+
+  const state = reactive({
+    destroyOnClose: true,
+  });
+
+  return () => (
+    <DemoRow title="关闭的时候销毁内容">
+      <Checkbox label="destroyOnClose" v-model={state.destroyOnClose}/>
+      <Popup key={String(state.destroyOnClose)} destroyOnClose={state.destroyOnClose} animation="slide" trigger="click">
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+            <Input style={{ margin: '16px 0' }}/>
+          </>
+        }}
+      </Popup>
+      {/*{directions.map(direction => (
+        <DemoLine key={direction}>
+          <ButtonGroup>
+            <Popup placement={direction as any} key="default" destroyOnClose>
+              {{
+                default: () => <Button label={direction}/>,
+                popper: () => <>
+                  <div style={{ height: '100px' }}>popper content</div>
+                </>
+              }}
+            </Popup>
+            {aligns.map(align => (
+              <Popup placement={`${direction}-${align}` as any} key={align} destroyOnClose>
+                {{
+                  default: () => <Button label={`${direction}-${align}`}/>,
+                  popper: () => <>
+                    <div style={{ height: '100px' }}>popper content</div>
+                  </>
+                }}
+              </Popup>
+            ))}
+          </ButtonGroup>
+        </DemoLine>
+      ))}*/}
+    </DemoRow>
+  );
+});
+
+export const demoContext = designPage(() => {
+
+  const Parent = designComponent({
+    slots: ['default'],
+    setup({ slots }) {
+      const state = reactive({ count: 100 });
+      provide('demo_context', state);
+      let timer: any;
+      onMounted(() => {
+        timer = setInterval(() => {state.count++;}, 1000);
+      });
+      onBeforeUnmount(() => {
+        clearInterval(timer);
+      });
+      return () => slots.default();
+    },
+  });
+
+  const Child = designComponent({
+    setup() {
+      const parentState = inject<null | { count: number }>('demo_context', null);
+      return () => (
+        <button>{parentState?.count || '无'}</button>
+      );
+    },
+  });
+
+  return () => (
+    <DemoRow title="组件上下文">
+      <Parent>
+        <Popup>
+          {{
+            default: () => <Button label="Button"/>,
+            popper: () => <>
+              <Child/>
+              <div>桃花坞里桃花庵；</div>
+              <div>桃花庵里桃花仙；</div>
+              <div>桃花仙人种桃树；</div>
+              <div>又摘桃花换酒钱；</div>
+            </>
+          }}
+        </Popup>
+      </Parent>
+    </DemoRow>
+  );
+});
+
+interface iDemoTreeMeta {
+  id: string,
+  name: string,
+  subs?: iDemoTreeMeta[]
+}
+
+export const demoCascade = designPage(() => {
+
+  const state = reactive({
+    showClickDemo: false,
+    showHoverDemo: false,
+    demo3: false,
+    demo4: false,
+  });
+
+  const renderList = (list: iDemoTreeMeta[], trigger?: iPopupTrigger) => (
+    list.map(item => (
+      !!item.subs?.length ? (
+          <Popup key={item.name} placement="right-start" arrowSize={0} offset={12} hideOnClickReference={false} trigger={trigger}>
+            {{
+              default: () => (
+                <div
+                  style={{
+                    minWidth: '100px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '4px 0',
+                  }}>
+                  <span>{item.name}</span>
+                  <Icon icon="pi-right"/>
+                </div>
+              ),
+              popper: () => renderList(item.subs!)
+            }}
+          </Popup>
+        )
+        : (
+          <div
+            key={item.name}
+            style={{
+              minWidth: '100px',
+              padding: '4px 0',
+            }} onClick={() => handleClickItem(item)}>
+            <span>{item.name}</span>
+          </div>
+        )
+    ))
+  );
+
+  const handleClickItem = (item: iDemoTreeMeta) => {
+    $message(item.name);
+    state.showClickDemo = false;
+    state.showHoverDemo = false;
+    state.demo3 = false;
+    state.demo4 = false;
+  };
+
+  return () => (
+    <DemoRow title="父子级联">
+      <Popup trigger="hover" v-model={state.showHoverDemo}>
+        {{
+          default: () => <Button label="Hover"/>,
+          popper: () => renderList(treeData)
+        }}
+      </Popup>
+      <Popup trigger="click" v-model={state.showClickDemo}>
+        {{
+          default: () => <Button label="Click"/>,
+          popper: () => renderList(treeData)
+        }}
+      </Popup>
+      <Popup trigger="click" v-model={state.demo3}>
+        {{
+          default: () => <Button label="ParentClick, ChildHover"/>,
+          popper: () => renderList(treeData, "hover")
+        }}
+      </Popup>
+      <Popup trigger="contextmenu" v-model={state.demo4}>
+        {{
+          default: () => <Button label="ParentContextmenu, ChildHover"/>,
+          popper: () => renderList(treeData, "hover")
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+export const demoMinWidth = designPage(() => {
+  return () => (
+    <DemoRow title="最小宽度">
+      <Popup minHeight={150} placement="right-start">
+        {{
+          default: () => <Button label="Button"/>,
+          head: () => <span>Title</span>,
+          popper: () => <>
+            <div>popper content</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+export const demoDark = designPage(() => {
+  return () => (
+    <DemoRow title="黑色主题">
+      <Popup dark>
+        {{
+          default: () => <Button label="Button"/>,
+          popper: () => <>
+            <div>Ctrl + Shift + A</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demoStatus = designPage(() => {
+  return () => (
+    <DemoRow title="状态">
+      {(['primary', 'success', 'warn', 'error'] as const).map(status => (
+        <Popup status={status} key={status}>
+          {{
+            default: () => <Button status={status} label={status}/>,
+            popper: () => <>
+              <div>输入有误，不是合法的表达式</div>
+            </>
+          }}
+        </Popup>
+      ))}
+    </DemoRow>
+  );
+});
+
+export const demoCover = designPage(() => {
+  return () => (
+    <DemoRow title="覆盖reference">
+      <Popup cover modelValue trigger="manual">
+        {{
+          default: () => <div style={{ height: '100px', width: '100px', backgroundColor: `var(--${getComponentCls('primary-1')})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>REFERENCE</div>,
+          popper: () => (
+            <div style={{ height: '100%', width: '100%', boxSizing: 'border-box', border: `solid 1px var(--${getComponentCls('primary-6')})`, pointerEvents: 'none' }}>
+              <div style={{ position: 'absolute', right: 0, bottom: 0, padding: '8px', pointerEvents: 'auto' }}>
+                1/6
+              </div>
+            </div>
+          )
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});
+
+
+export const demoNoBg = designPage(() => {
+  return () => (
+    <DemoRow title="取消背景色">
+      <Popup noBackground>
+        {{
+          default: () => <Button label="Button"/>,
+          popper: () => <>
+            <div>桃花坞里桃花庵；</div>
+            <div>桃花庵里桃花仙；</div>
+            <div>桃花仙人种桃树；</div>
+            <div>又摘桃花换酒钱；</div>
+          </>
+        }}
+      </Popup>
+    </DemoRow>
+  );
+});