plain-design 1.0.0-beta.33 → 1.0.0-beta.35

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

@@ -1,464 +0,0 @@
-import {classnames, computed, designPage, getComponentCls, reactive} from "plain-design-composition";
-import data2 from '../../../data/data-2.json';
-import {DemoRow} from "../../Demo/DemoRow";
-import {Alert, Checkbox, VirtualList} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`;
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList
-          data={list.value} size={40} v-slots={{
-          default: ({ item, index, vIndex }) => (
-            <div
-              key={index}
-              onClick={() => console.log(index, { ...item })}
-              data-idx={index}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`;
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  return () => (
-    <DemoRow title={'动态高度'}>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList data={list.value} size={60} dynamicSize v-slots={{
-          default: ({ item, vid, index, vIndex }) => (
-            <div
-              key={vIndex}
-              data-vid={vid}
-              data-idx={index}
-              onClick={() => console.log(vid, { ...item })}
-              style={{
-                ...item.color,
-                height: item.size + 'px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                  color: 'white'
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`;
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
-
-  const state = reactive({ disabledVirtualScroll: false, });
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'禁用/启用虚拟滚动'}>
-      <Checkbox v-model={state.disabledVirtualScroll} label={'禁用虚拟滚动'}/>
-      <br/>
-      <br/>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }} key={state.disabledVirtualScroll ? '1' : '2'}>
-        <VirtualList data={list.value} size={40} disabled={state.disabledVirtualScroll} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              data-idx={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                  color: 'white'
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`;
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <DemoRow title={'横向滚动'}>
-      <Alert style={{ marginBottom: '16px' }}>当需要横向滚动时，必须指定横向滚动的宽度</Alert>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
-        <VirtualList
-          data={list.value} width={200} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              data-idx={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-      <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6', display: 'inline-block' }}>
-        <VirtualList
-          data={list.value} width={600} size={40} v-slots={{
-          default: ({ item, index }) => (
-            <div
-              key={index}
-              data-idx={index}
-              onClick={() => console.log(index, { ...item })}
-              style={{
-                ...item.color,
-                height: '40px',
-                display: 'block',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  width: '40px',
-                  backgroundColor: 'var(--custom-secondary-2)',
-                  height: '100%',
-                  overflow: 'hidden',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-                className={classnames(getClass(item))}>
-                {index + 1}
-              </div>
-              <div style={{
-                width: 'calc(100% - 40px)',
-                float: 'right',
-                height: '100%',
-                padding: '0 12px',
-                display: 'flex',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-              }}>
-                <div style={{
-                  fontSize: '12px',
-                  display: 'flex',
-                  justifyContent: 'space-between'
-                }}>
-                  <span>{item.name}</span>
-                  <span>{item.date}</span>
-                </div>
-                <div style={{
-                  textAlign: 'right',
-                }}>
-                  {item.star}
-                </div>
-              </div>
-            </div>
-          )
-        }}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo2Horizontal = designPage(() => {
-
-  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
-  let colors: string[] = [];
-  const getRandomColor = () => {
-    if (colors.length === 0) {colors = [...sourceColors];}
-    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
-    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`;
-    return { backgroundColor, color };
-  };
-  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
-
-  return () => (
-    <DemoRow title={'横向虚拟滚动'}>
-      <div style={{ width: '400px', height: '100px', backgroundColor: '#f6f6f6' }}>
-        <VirtualList
-          data={list.value}
-          size={60 * 3}
-          dynamicSize
-          horizontal
-          v-slots={{
-            default: ({ item, vid, index, vIndex }) => (
-              <div
-                key={vIndex}
-                data-vid={vid}
-                data-idx={index}
-                onClick={() => console.log(vid, { ...item })}
-                style={{
-                  ...item.color,
-                  width: item.size * 3 + 'px',
-                  display: 'inline-block',
-                  height: '100px'
-                }}
-              >
-                <div
-                  style={{
-                    width: '40px',
-                    backgroundColor: 'var(--custom-secondary-2)',
-                    height: '100%',
-                    overflow: 'hidden',
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}>
-                  {index + 1}
-                </div>
-                <div style={{
-                  width: 'calc(100% - 40px)',
-                  float: 'right',
-                  height: '100%',
-                  padding: '0 12px',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  flexDirection: 'column',
-                  boxSizing: 'border-box',
-                }}>
-                  <div style={{
-                    fontSize: '12px',
-                    display: 'flex',
-                    justifyContent: 'space-between'
-                  }}>
-                    <span>{item.name}</span>
-                    <span>{item.date}</span>
-                  </div>
-                  <div style={{
-                    textAlign: 'right',
-                    color: 'white'
-                  }}>
-                    {item.star}
-                  </div>
-                </div>
-              </div>
-            )
-          }}/>
-      </div>
-    </DemoRow>
-  );
-});