plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -1,110 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$file, Button, FileServiceChooseFileConfig, FileServiceSingleFile} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const getSingleFile = async (option?: FileServiceChooseFileConfig) => {
-    const file = await $file.chooseFile(option);
-    console.log('success', file);
-  };
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <Button label={'获取单个文件'} onClick={() => getSingleFile()}/>
-    </DemoRow>
-  );
-});
-export const demo2 = designPage(() => {
-
-  const getSingleFile = async (option?: FileServiceChooseFileConfig) => {
-    const file = await $file.chooseFile(option);
-    console.log('success', file);
-  };
-
-  return () => (
-    <DemoRow title={'其他'}>
-      <Button onClick={() => getSingleFile({ multiple: true })} label="获取多个文件"/>
-      <Button onClick={() => getSingleFile({ max: 5 })} label="获取单个文件，最大5M"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true })} label="获取多个文件，最大5M"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true, accept: 'image' })} label="获取多个文件，类型为图片"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true, accept: 'excel' })} label="获取多个文件，类型为Excel文档"/>
-      <Button onClick={() => getSingleFile({ max: 5, multiple: true, accept: 'image/png' })} label="获取多个文件，类型为自定义"/>
-    </DemoRow>
-  );
-});
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    base64: null as null | string,
-  });
-
-
-  const showImage = async () => {
-    const file = await $file.chooseImage();
-    const base64 = await $file.readAsDataURL(file as FileServiceSingleFile);
-    state.base64 = base64 as string;
-  };
-
-  return () => (
-    <DemoRow title={'获取图片base64字符串'}>
-      <Button label={'获取图片之后展示图片'} onClick={() => showImage()}/>
-      <div>
-        {!!state.base64 && <img src={state.base64} style={{ maxWidth: '100px', maxHeight: '100px' }}/>}
-      </div>
-    </DemoRow>
-  );
-});
-export const demo4 = designPage(() => {
-
-  async function uploadFile() {
-    const file = await $file.chooseFile();
-    await $file.upload({
-      action: 'http://1.116.13.72:7001/uploadFile',
-      file,
-      filename: 'file',
-      data: {
-        headId: '123',
-        module: 'single',
-      },
-      onProgress(data) {
-        console.log('progress', data);
-      },
-      onSuccess(...args) {
-        console.log('success', ...args);
-      },
-      onError(...args) {
-        console.log('error', ...args);
-      },
-    });
-  }
-
-  async function uploadFiles() {
-    const file = await $file.chooseFile({ multiple: true });
-    await $file.upload({
-      action: 'http://193.112.75.134/server/upload/uploadFiles',
-      file,
-      filename: 'files',
-      data: {
-        headId: '456',
-        module: 'multiple',
-      },
-      onProgress(data) {
-        console.log('progress', data);
-      },
-      onSuccess(...args) {
-        console.log('success', ...args);
-      },
-      onError(...args) {
-        console.log('error', ...args);
-      },
-    });
-  }
-
-  return () => (
-    <DemoRow title={'获取文件，然后上传文件'}>
-      <Button label={'上传文件'} onClick={uploadFile}/>
-      <Button label={'上传多个文件'} onClick={uploadFiles}/>
-    </DemoRow>
-  );
-});

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

@@ -1,100 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {Button, useMessage} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {MessageDirection} from "../../../../packages/components/useMessage/message.service.utils";
-import {FixInput} from "../../../../packages/utils/FixInput";
-
-export const demo1 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button label="show message" onClick={() => [$message('保存完毕！'), $message('保存完毕！222')]}/>
-    </DemoRow>
-  );
-});
-export const demo2 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="带状态的消息提示">
-      <Button label="Primary" onClick={() => $message.primary('保存完毕！')} mode="fill" status="primary"/>
-      <Button label="Success" onClick={() => $message.success('保存完毕！')} mode="fill" status="success"/>
-      <Button label="Warn" onClick={() => $message.warn('保存完毕！')} mode="fill" status="warn"/>
-      <Button label="Error" onClick={() => $message.error('保存完毕！')} mode="fill" status="error"/>
-      <Button label="Secondary" onClick={() => $message.secondary('保存完毕！')} mode="fill" status="secondary"/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="自定义停留时长">
-      <Button label="1s" onClick={() => $message({ message: '保存完毕！', time: 1000 })}/>
-      <Button label="手动关闭" onClick={() => $message({ message: '保存完毕！', time: null })}/>
-    </DemoRow>
-  );
-});
-export const demo4 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title={'位置'}>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.start, vertical: MessageDirection.start })} label="左上"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.center, vertical: MessageDirection.start })} label="中上"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.end, vertical: MessageDirection.start })} label="右上"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.start, vertical: MessageDirection.center })} label="左中"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.center, vertical: MessageDirection.center })} label="中中"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.end, vertical: MessageDirection.center })} label="右中"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.start, vertical: MessageDirection.end })} label="左下"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.center, vertical: MessageDirection.end })} label="中下"/>
-      <Button onClick={() => $message('提示信息！', { horizontal: MessageDirection.end, vertical: MessageDirection.end })} label="右下"/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Button onClick={() => $message('提示信息！', { time: 1000, onClose: () => console.log('close') })} label="一秒后自动关闭"/>
-      <Button onClick={() => $message('提示信息！', { time: null })} label="不自动关闭"/>
-      <Button onClick={() => $message('提示信息！', { onClose: () => console.log('done') })} label="监听结束事件"/>
-      <Button onClick={() => $message('提示信息！', { onClick: () => console.log('click') })} label="监听点击事件"/>
-    </DemoRow>
-  );
-});
-export const demo6 = designPage(() => {
-
-  const { $message } = useMessage();
-
-  const state = reactive({
-    text: '自定义编辑文本'
-  });
-
-  const closeDemo = () => {
-    const close = $message({
-      render: () => (
-        <div>
-          <FixInput style={{ marginRight: '10px' }} v-model={state.text}/>
-          <Button label="close" mode="text" onClick={() => close()}/>
-        </div>
-      )
-    });
-  };
-
-  return () => (
-    <DemoRow title="自定义内容">
-      <Button onClick={closeDemo} label="show"/>
-      {state.text}
-    </DemoRow>
-  );
-});

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