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

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

@@ -1,300 +1,300 @@
-import {classnames, designPage, reactive, useRefs} from "plain-design-composition";
-import './DemoScroll.scss';
-import {Button, ButtonGroup, Scroll, useAutoScrollUtils} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    list: (() => {
-      let ret = [];
-      let i = 0;
-      while (i < 40) {
-        ret.push(i++);
-      }
-      return ret;
-    })(),
-    checkboxValue: [] as string[],
-  });
-
-  const { refs, onRef } = useRefs({
-    scroll1: Scroll,
-    scroll2: Scroll,
-    autoScroll1: Scroll,
-    autoScroll2: Scroll,
-  });
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <div className={'demo-scroll'}>
-      <DemoRow title={'基本用法(检查滚动的时候会不会导致插槽的内容重新执行)'}>
-        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll>
-            <div>
-              {state.list.map((item, index) => (
-                <div className={classnames(['demo-scroll-label', getClass(item),])} key={index}>
-                  {item}
-                </div>
-              ))}
-            </div>
-          </Scroll>
-        </div>
-        <ButtonGroup vertical>
-          <Button label={'添加'} icon={'pi-plus'} onClick={() => state.list.push(state.list.length + 1)}/>
-          <Button label={'删除'} icon={'pi-delete'} onClick={() => state.list.shift()}/>
-        </ButtonGroup>
-      </DemoRow>
-      <DemoRow title={'基本用法'}>
-        <div className="demo-scroll-wrapper">
-          <Scroll>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      {/*<DemoRow title={'基本用法(多选列表)'}>
-        <div className="demo-scroll-wrapper" style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll>
-            <CheckboxGroup v-model={state.checkboxValue}>
-              {state.list.map(item => (
-                <div className={'demo-scroll-label'} key={item}>
-                  <Checkbox val={item}/>、
-                  {item}
-                </div>
-              ))}
-            </CheckboxGroup>
-          </Scroll>
-        </div>
-        <ButtonGroup vertical>
-          <Button label={'添加'} icon={'el-icon-circle-plus-outline'} onClick={() => state.list.push(state.list.length + 1)}/>
-          <Button label={'删除'} icon={'el-icon-remove-outline'} onClick={() => state.list.shift()}/>
-        </ButtonGroup>
-        {JSON.stringify(state.checkboxValue)}
-      </DemoRow>*/}
-      <DemoRow title={'可以横向滚动'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll scrollX scrollAfterDragEnd>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'只能横向滚动'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll scrollX scrollY={false}>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配内容高度'}>
-        <div className={'demo-scroll-wrapper'} style={{ height: 'auto' }}>
-          <Scroll scrollX fitContentHeight>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配内容宽度'}>
-        <div className={'demo-scroll-wrapper'} style={{ width: 'auto' }}>
-          <Scroll fitContentWidth>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配host高度'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll fitContentWidth scrollX>
-            <div style={{ height: '100%', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配host宽度'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll fitHostWidth>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-
-      <DemoRow title={'滚动：纵向'}>
-        <div className="demo-scroll-wrapper">
-          <Scroll ref={onRef.scroll1} onScroll={() => console.log('vertical scroll')}>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-              <div>
-                <p><Button mode="fill" size={'mini'} label={'scroll'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, 1000)}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scroll(no emit)'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, { time: 1000, noEmitScroll: true })}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scrollEnd'} onClick={() => refs.scroll1!.methods.scrollEnd()}/></p>
-              </div>
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'滚动：横向'}>
-        <div className="demo-scroll-wrapper">
-          <Scroll ref={onRef.scroll2} scrollX onScroll={() => console.log('horizontal scroll')}>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-              <div>
-                <p><Button mode="fill" size={'mini'} label={'scroll'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, 1000)}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scroll(no emit)'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, { time: 1000, noEmitScroll: true })}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scrollEnd'} onClick={() => refs.scroll2!.methods.scrollEnd()}/></p>
-              </div>
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'自动滚动：纵向'}>
-        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll ref={onRef.autoScroll1}>
-            <div>
-              {state.list.map((item, index) => (
-                <div className="demo-scroll-label" key={index}>
-                  {item}
-                </div>
-              ))}
-            </div>
-          </Scroll>
-        </div>
-        <div style={{ display: 'inline-block' }}>
-          <ButtonGroup>
-            <Button label={'向下滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollBottom()}/>
-            <Button label={'向上滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollTop()}/>
-            <Button label={'停止滚动'} onClick={() => refs.autoScroll1!.methods.stopAutoScroll()}/>
-          </ButtonGroup>
-        </div>
-      </DemoRow>
-      <DemoRow title={'自动滚动：横向'}>
-        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll ref={onRef.autoScroll2} scrollX>
-            <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => (
-                <div className="demo-scroll-label" key={index} style={{ width: '30px', display: 'inline-block', marginRight: '10px' }}>
-                  {item}
-                </div>
-              ))}
-            </div>
-          </Scroll>
-        </div>
-        <div style={{ display: 'inline-block' }}>
-          <ButtonGroup>
-            <Button label={'向右滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollRight()}/>
-            <Button label={'向左滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollLeft()}/>
-            <Button label={'停止滚动'} onClick={() => refs.autoScroll2!.methods.stopAutoScroll()}/>
-          </ButtonGroup>
-        </div>
-      </DemoRow>
-      <DemoRow title={'拖拽结束之后滚动'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll scrollX scrollAfterDragEnd>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-    </div>
-  );
-});
-
-export const DemoUseAutoScrollUtilsVertical = designPage(() => {
-
-  const len = new Array(20).fill(null);
-
-  const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-  const autoScrollUtils = useAutoScrollUtils({
-    vertical: true,
-    scrollUtilsParameter: { getScrollElement: () => refs.el }
-  });
-
-  const onMousedown = () => {
-    autoScrollUtils.show();
-
-    const onMouseup = () => {
-      autoScrollUtils.hide();
-      document.body.removeEventListener('mouseup', onMouseup);
-    };
-    document.body.addEventListener('mouseup', onMouseup);
-  };
-
-  return () => (
-    <DemoRow title="DemoUseAutoScrollUtils: vertical">
-      <div style={{ width: '200px', height: '200px', overflow: 'auto' }} ref={onRef.el}>
-        <table>
-          <colgroup>
-            {len.map((i, index) => (<col key={index} width={150}/>))}
-          </colgroup>
-          <tbody>
-          {len.map((_, rowIndex) => (
-            <tr key={rowIndex}>
-              {len.map((_, colIndex) => (
-                <td key={colIndex} style={{ height: '36px' }} onMouseDown={onMousedown}>{rowIndex + 1}_{colIndex + 1}</td>
-              ))}
-            </tr>
-          ))}
-          </tbody>
-        </table>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const DemoUseAutoScrollUtilsHorizontal = designPage(() => {
-
-  const len = new Array(20).fill(null);
-
-  const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-  const autoScrollUtils = useAutoScrollUtils({
-    vertical: false,
-    scrollUtilsParameter: { getScrollElement: () => refs.el }
-  });
-
-  const onMousedown = () => {
-    autoScrollUtils.show();
-
-    const onMouseup = () => {
-      autoScrollUtils.hide();
-      document.body.removeEventListener('mouseup', onMouseup);
-    };
-    document.body.addEventListener('mouseup', onMouseup);
-  };
-
-  return () => (
-    <DemoRow title="DemoUseAutoScrollUtils: horizontal">
-      <div style={{ width: '200px', height: '200px', overflow: 'auto' }} ref={onRef.el}>
-        <table>
-          <colgroup>
-            {len.map((i, index) => (<col key={index} width={150}/>))}
-          </colgroup>
-          <tbody>
-          {len.map((_, rowIndex) => (
-            <tr key={rowIndex}>
-              {len.map((_, colIndex) => (
-                <td key={colIndex} style={{ height: '36px' }} onMouseDown={onMousedown}>{rowIndex + 1}_{colIndex + 1}</td>
-              ))}
-            </tr>
-          ))}
-          </tbody>
-        </table>
-      </div>
-    </DemoRow>
-  );
-});
+import {classnames, designPage, reactive, useRefs} from "plain-design-composition";
+import './DemoScroll.scss';
+import {Button, ButtonGroup, Scroll, useAutoScrollUtils} from "../../../../packages";
+import {DemoRow} from "../../Demo/DemoRow";
+
+export const demo1 = designPage(() => {
+
+  const state = reactive({
+    list: (() => {
+      let ret = [];
+      let i = 0;
+      while (i < 40) {
+        ret.push(i++);
+      }
+      return ret;
+    })(),
+    checkboxValue: [] as string[],
+  });
+
+  const { refs, onRef } = useRefs({
+    scroll1: Scroll,
+    scroll2: Scroll,
+    autoScroll1: Scroll,
+    autoScroll2: Scroll,
+  });
+
+  function getClass(item: any) {
+    console.log('item', item);
+    return {};
+  }
+
+  return () => (
+    <div className={'demo-scroll'}>
+      <DemoRow title={'基本用法(检查滚动的时候会不会导致插槽的内容重新执行)'}>
+        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
+          <Scroll>
+            <div>
+              {state.list.map((item, index) => (
+                <div className={classnames(['demo-scroll-label', getClass(item),])} key={index}>
+                  {item}
+                </div>
+              ))}
+            </div>
+          </Scroll>
+        </div>
+        <ButtonGroup vertical>
+          <Button label={'添加'} icon={'pi-plus'} onClick={() => state.list.push(state.list.length + 1)}/>
+          <Button label={'删除'} icon={'pi-delete'} onClick={() => state.list.shift()}/>
+        </ButtonGroup>
+      </DemoRow>
+      <DemoRow title={'基本用法'}>
+        <div className="demo-scroll-wrapper">
+          <Scroll>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      {/*<DemoRow title={'基本用法(多选列表)'}>
+        <div className="demo-scroll-wrapper" style={{ display: 'inline-block', verticalAlign: 'top' }}>
+          <Scroll>
+            <CheckboxGroup v-model={state.checkboxValue}>
+              {state.list.map(item => (
+                <div className={'demo-scroll-label'} key={item}>
+                  <Checkbox val={item}/>、
+                  {item}
+                </div>
+              ))}
+            </CheckboxGroup>
+          </Scroll>
+        </div>
+        <ButtonGroup vertical>
+          <Button label={'添加'} icon={'el-icon-circle-plus-outline'} onClick={() => state.list.push(state.list.length + 1)}/>
+          <Button label={'删除'} icon={'el-icon-remove-outline'} onClick={() => state.list.shift()}/>
+        </ButtonGroup>
+        {JSON.stringify(state.checkboxValue)}
+      </DemoRow>*/}
+      <DemoRow title={'可以横向滚动'}>
+        <div className={'demo-scroll-wrapper'}>
+          <Scroll scrollX scrollAfterDragEnd>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'只能横向滚动'}>
+        <div className={'demo-scroll-wrapper'}>
+          <Scroll scrollX scrollY={false}>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'适配内容高度'}>
+        <div className={'demo-scroll-wrapper'} style={{ height: 'auto' }}>
+          <Scroll scrollX fitContentHeight>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'适配内容宽度'}>
+        <div className={'demo-scroll-wrapper'} style={{ width: 'auto' }}>
+          <Scroll fitContentWidth>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'适配host高度'}>
+        <div className={'demo-scroll-wrapper'}>
+          <Scroll fitContentWidth scrollX>
+            <div style={{ height: '100%', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'适配host宽度'}>
+        <div className={'demo-scroll-wrapper'}>
+          <Scroll fitHostWidth>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+
+      <DemoRow title={'滚动：纵向'}>
+        <div className="demo-scroll-wrapper">
+          <Scroll ref={onRef.scroll1} onScroll={() => console.log('vertical scroll')}>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+              <div>
+                <p><Button mode="fill" size={'mini'} label={'scroll'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, 1000)}/></p>
+                <p><Button mode="fill" size={'mini'} label={'scroll(no emit)'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, { time: 1000, noEmitScroll: true })}/></p>
+                <p><Button mode="fill" size={'mini'} label={'scrollEnd'} onClick={() => refs.scroll1!.methods.scrollEnd()}/></p>
+              </div>
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'滚动：横向'}>
+        <div className="demo-scroll-wrapper">
+          <Scroll ref={onRef.scroll2} scrollX onScroll={() => console.log('horizontal scroll')}>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+              <div>
+                <p><Button mode="fill" size={'mini'} label={'scroll'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, 1000)}/></p>
+                <p><Button mode="fill" size={'mini'} label={'scroll(no emit)'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, { time: 1000, noEmitScroll: true })}/></p>
+                <p><Button mode="fill" size={'mini'} label={'scrollEnd'} onClick={() => refs.scroll2!.methods.scrollEnd()}/></p>
+              </div>
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+      <DemoRow title={'自动滚动：纵向'}>
+        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
+          <Scroll ref={onRef.autoScroll1}>
+            <div>
+              {state.list.map((item, index) => (
+                <div className="demo-scroll-label" key={index}>
+                  {item}
+                </div>
+              ))}
+            </div>
+          </Scroll>
+        </div>
+        <div style={{ display: 'inline-block' }}>
+          <ButtonGroup>
+            <Button label={'向下滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollBottom()}/>
+            <Button label={'向上滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollTop()}/>
+            <Button label={'停止滚动'} onClick={() => refs.autoScroll1!.methods.stopAutoScroll()}/>
+          </ButtonGroup>
+        </div>
+      </DemoRow>
+      <DemoRow title={'自动滚动：横向'}>
+        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
+          <Scroll ref={onRef.autoScroll2} scrollX>
+            <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
+              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => (
+                <div className="demo-scroll-label" key={index} style={{ width: '30px', display: 'inline-block', marginRight: '10px' }}>
+                  {item}
+                </div>
+              ))}
+            </div>
+          </Scroll>
+        </div>
+        <div style={{ display: 'inline-block' }}>
+          <ButtonGroup>
+            <Button label={'向右滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollRight()}/>
+            <Button label={'向左滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollLeft()}/>
+            <Button label={'停止滚动'} onClick={() => refs.autoScroll2!.methods.stopAutoScroll()}/>
+          </ButtonGroup>
+        </div>
+      </DemoRow>
+      <DemoRow title={'拖拽结束之后滚动'}>
+        <div className={'demo-scroll-wrapper'}>
+          <Scroll scrollX scrollAfterDragEnd>
+            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
+              this is content
+            </div>
+          </Scroll>
+        </div>
+      </DemoRow>
+    </div>
+  );
+});
+
+export const DemoUseAutoScrollUtilsVertical = designPage(() => {
+
+  const len = new Array(20).fill(null);
+
+  const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+  const autoScrollUtils = useAutoScrollUtils({
+    vertical: true,
+    scrollUtilsParameter: { getScrollElement: () => refs.el }
+  });
+
+  const onMousedown = () => {
+    autoScrollUtils.show();
+
+    const onMouseup = () => {
+      autoScrollUtils.hide();
+      document.body.removeEventListener('mouseup', onMouseup);
+    };
+    document.body.addEventListener('mouseup', onMouseup);
+  };
+
+  return () => (
+    <DemoRow title="DemoUseAutoScrollUtils: vertical">
+      <div style={{ width: '200px', height: '200px', overflow: 'auto' }} ref={onRef.el}>
+        <table>
+          <colgroup>
+            {len.map((i, index) => (<col key={index} width={150}/>))}
+          </colgroup>
+          <tbody>
+          {len.map((_, rowIndex) => (
+            <tr key={rowIndex}>
+              {len.map((_, colIndex) => (
+                <td key={colIndex} style={{ height: '36px' }} onMouseDown={onMousedown}>{rowIndex + 1}_{colIndex + 1}</td>
+              ))}
+            </tr>
+          ))}
+          </tbody>
+        </table>
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const DemoUseAutoScrollUtilsHorizontal = designPage(() => {
+
+  const len = new Array(20).fill(null);
+
+  const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+  const autoScrollUtils = useAutoScrollUtils({
+    vertical: false,
+    scrollUtilsParameter: { getScrollElement: () => refs.el }
+  });
+
+  const onMousedown = () => {
+    autoScrollUtils.show();
+
+    const onMouseup = () => {
+      autoScrollUtils.hide();
+      document.body.removeEventListener('mouseup', onMouseup);
+    };
+    document.body.addEventListener('mouseup', onMouseup);
+  };
+
+  return () => (
+    <DemoRow title="DemoUseAutoScrollUtils: horizontal">
+      <div style={{ width: '200px', height: '200px', overflow: 'auto' }} ref={onRef.el}>
+        <table>
+          <colgroup>
+            {len.map((i, index) => (<col key={index} width={150}/>))}
+          </colgroup>
+          <tbody>
+          {len.map((_, rowIndex) => (
+            <tr key={rowIndex}>
+              {len.map((_, colIndex) => (
+                <td key={colIndex} style={{ height: '36px' }} onMouseDown={onMousedown}>{rowIndex + 1}_{colIndex + 1}</td>
+              ))}
+            </tr>
+          ))}
+          </tbody>
+        </table>
+      </div>
+    </DemoRow>
+  );
+});