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

package/src/pages/index/components/table/DemoPlcOperation.tsx

@@ -1,307 +1,307 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import DATA from "../../../data/data-1.json";
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {$message, Alert, Checkbox, Form, FormItem, InputNumber, OuterOperation, Plc, PlcGroup, PlcOperation, Radio, RadioGroup, Segment, SegmentGroup, Table, Toggle} from "../../../../packages";
-import {iTableOperation} from "../../../../packages/components/Table/standard/PlcOperation/PlcOperation.utils";
-
-export const demo1 = designPage(() => {
-
-  const data = DATA.slice(0, 3);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);} },
-    { label: '自定义渲染', position: 'inner', render: ({ row }) => <span key="custom" onClick={() => console.log('自定义渲染:' + row.name)}>[{row.name}]</span> },
-  ];
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const data = DATA.slice(0, 3);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
-  ];
-
-  return () => (
-    <DemoRow title="动态显示的按钮">
-      <Alert label="删除按钮评分小于4则隐藏" style={{ marginBottom: '12px' }}/>
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const data = DATA.slice(0, 3);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, disabled: ({ row }) => !row.star || row.star < 4 },
-  ];
-
-  return () => (
-    <DemoRow title="动态禁用的按钮">
-      <Alert label="删除按钮评分小于4则禁用" style={{ marginBottom: '12px' }}/>
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const data = DATA.slice(0, 10);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
-    { label: '订阅', position: 'inner', handler: ({ row }) => {$message(`订阅：` + row.name);}, show: ({ row }) => !!row.star && row.star > 3 },
-    { label: '收藏', position: 'inner', handler: ({ row }) => {$message(`收藏：` + row.name);}, show: ({ row }) => !!row.star && row.star > 2 },
-    { label: '发布', position: 'inner', handler: ({ row }) => {$message(`发布：` + row.name);}, show: ({ row }) => !!row.star && row.star > 1 },
-  ];
-
-  return () => (
-    <DemoRow title="按钮自动折叠">
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo10 = designPage(() => {
-
-  const state = reactive({
-    data: DATA,
-    size: undefined as any,
-    summaryData: [
-      {
-        "id": 0,
-        "color": "#79f285",
-        "name": "Lisa",
-        "date": "2002-04-28",
-        "star": "★★★★★★★",
-        "size": 49
-      },
-      {
-        "id": 1,
-        "color": "#f27990",
-        "name": "George",
-        "date": "2019-01-06",
-        "star": "★★★★★★★★",
-        "size": 74
-      },
-    ],
-    other: {
-      hasSummaryData: true,
-      groupHead: false,
-    },
-    props: {
-      headRowHeight: undefined,
-      bodyRowHeight: undefined,
-      border: false,
-      virtual: true,
-    },
-    plc: {
-      width: 200,
-      align: 'left' as any,
-      init: true,
-      order: 5,
-      hide: undefined,
-    },
-    editNode: null as null | iTableNode,
-    onDblclickCell: (node: iTableNode) => {
-      console.log('node', node);
-      if (!!state.editNode) {
-        if (node === state.editNode) {
-          // node.saveEdit();
-          // node.closeEdit();
-          state.editNode = null;
-          return;
-        } else {
-          // state.editNode.cancelEdit();
-        }
-      }
-
-      // node.enableEdit();
-      state.editNode = node;
-    },
-  });
-
-  const operations: iTableOperation[] = [
-    {
-      label: '外部按钮一',
-      handler: () => {
-        $message('外部按钮一');
-      },
-    },
-    {
-      label: '外部按钮二',
-      handler: () => {
-        $message('外部按钮二');
-      },
-    },
-    {
-      label: '复制',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('复制' + row.name);
-      },
-    },
-    {
-      label: '删除',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('删除' + row.name);
-      },
-    },
-    {
-      label: '发布',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('发布' + row.name);
-      },
-    },
-    {
-      label: '订阅',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('订阅' + row.name);
-      },
-    },
-    {
-      label: '收藏',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('收藏' + row.name);
-      },
-    },
-  ];
-
-  return () => (
-    <DemoRow title={'切换列'}>
-      <Form column={3}>
-        <FormItem label={'列宽度响应测试'}>
-          <InputNumber v-model={state.plc.width} step={100}/>
-        </FormItem>
-        <FormItem label="表头行高">
-          <InputNumber v-model={state.props.headRowHeight} step={5}/>
-        </FormItem>
-        <FormItem label="表体行高">
-          <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
-        </FormItem>
-        <FormItem label="列销毁测试(名称)">
-          <Toggle v-model={state.plc.init}/>
-        </FormItem>
-        <FormItem label="大小尺寸">
-          <SegmentGroup v-model={state.size}>
-            <Segment label="Mini" val="mini"/>
-            <Segment label="Small" val="small"/>
-            <Segment label="Normal" val="normal"/>
-            <Segment label="Large" val="large"/>
-          </SegmentGroup>
-        </FormItem>
-        <FormItem label="文本对齐方式">
-          <RadioGroup v-model={state.plc.align}>
-            <Radio label="left" val="left"/>
-            <Radio label="center" val="center"/>
-            <Radio label="right" val="right"/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="带边框">
-          <Checkbox v-model={state.props.border}/>
-        </FormItem>
-        <FormItem label="合计行">
-          <Toggle v-model={state.other.hasSummaryData}/>
-        </FormItem>
-        <FormItem label="表头分组">
-          <Toggle v-model={state.other.groupHead}/>
-        </FormItem>
-        <FormItem label="启用虚拟滚动">
-          <Toggle v-model={state.props.virtual}/>
-        </FormItem>
-        {!state.other.groupHead && <>
-          <FormItem label="order(名称)">
-            <InputNumber v-model={state.plc.order}/>
-          </FormItem>
-          <FormItem label="hide:(评分)">
-            <Toggle v-model={state.plc.hide}/>
-          </FormItem>
-        </>}
-      </Form>
-      <OuterOperation operations={operations}/>
-      <Table
-        data={state.data}
-        summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
-        onDblclickCell={state.onDblclickCell}
-        {...state.props}
-        /*不加这个key，没有问题，还很流畅*/
-        // key={state.other.groupHead ? '1' : '2'}
-        size={state.size}
-        showRows={10}
-        virtual={state.props.virtual}
-      >
-
-        {!!state.other.groupHead && <>
-          <Plc title={'普通文本列'} field={'id'}/>
-          <Plc title={'设置宽度'} field={'id'} width={state.plc.width} align={state.plc.align}/>
-          <Plc title={'大小'} field={'size'} align={state.plc.align}/>
-          <PlcGroup title="联系方式">
-            <Plc title={'地址'} field={'addr'} align={state.plc.align}/>
-            <Plc title={'链接'} field={'url'} align={state.plc.align}/>
-          </PlcGroup>
-          <PlcGroup title={'地址'} align={state.plc.align}>
-            <Plc field="date" title="日期" align={state.plc.align}/>
-            {!!state.plc.init && <Plc field="name" title="名称" align={state.plc.align}/>}
-            <Plc field="color" title="颜色" align={state.plc.align}/>
-          </PlcGroup>
-        </>}
-        {!state.other.groupHead && <>
-          <Plc field="id" title="编号"/>
-          <Plc field="name" title="名称"/>
-          <Plc field="id" title="编号(order=4)" order="4" align={state.plc.align}/>
-          <Plc field="size" title="大小" align={state.plc.align}/>
-          {!!state.plc.init && <Plc field="name" title="名称" order={state.plc.order} align={state.plc.align}/>}
-          <Plc field="date" title="日期(order=6)" order="6" align={state.plc.align}/>
-          <Plc field="color" title="颜色" align={state.plc.align}/>
-          <Plc field="star" title="评分" hide={state.plc.hide} align={state.plc.align}/>
-        </>}
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
+import {designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import DATA from "../../../data/data-1.json";
+import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
+import {$message, Alert, Checkbox, Form, FormItem, InputNumber, OuterOperation, Plc, PlcGroup, PlcOperation, Radio, RadioGroup, Segment, SegmentGroup, Table, Toggle} from "../../../../packages";
+import {iTableOperation} from "../../../../packages/components/Table/standard/PlcOperation/PlcOperation.utils";
+
+export const demo1 = designPage(() => {
+
+  const data = DATA.slice(0, 3);
+
+  const operations: iTableOperation[] = [
+    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
+    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);} },
+    { label: '自定义渲染', position: 'inner', render: ({ row }) => <span key="custom" onClick={() => console.log('自定义渲染:' + row.name)}>[{row.name}]</span> },
+  ];
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Table data={data}>
+        <Plc field="id" title="编号"/>
+        <Plc field="name" title="名称"/>
+        <Plc field="date" title="日期(order=6)" order="6"/>
+        <Plc field="color" title="颜色"/>
+        <Plc field="star" title="评分"/>
+        <PlcOperation operations={operations}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demo2 = designPage(() => {
+
+  const data = DATA.slice(0, 3);
+
+  const operations: iTableOperation[] = [
+    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
+    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
+  ];
+
+  return () => (
+    <DemoRow title="动态显示的按钮">
+      <Alert label="删除按钮评分小于4则隐藏" style={{ marginBottom: '12px' }}/>
+      <Table data={data}>
+        <Plc field="id" title="编号"/>
+        <Plc field="name" title="名称"/>
+        <Plc field="date" title="日期(order=6)" order="6"/>
+        <Plc field="color" title="颜色"/>
+        <Plc field="star" title="评分"/>
+        <PlcOperation operations={operations}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demo3 = designPage(() => {
+
+  const data = DATA.slice(0, 3);
+
+  const operations: iTableOperation[] = [
+    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
+    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, disabled: ({ row }) => !row.star || row.star < 4 },
+  ];
+
+  return () => (
+    <DemoRow title="动态禁用的按钮">
+      <Alert label="删除按钮评分小于4则禁用" style={{ marginBottom: '12px' }}/>
+      <Table data={data}>
+        <Plc field="id" title="编号"/>
+        <Plc field="name" title="名称"/>
+        <Plc field="date" title="日期(order=6)" order="6"/>
+        <Plc field="color" title="颜色"/>
+        <Plc field="star" title="评分"/>
+        <PlcOperation operations={operations}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demo4 = designPage(() => {
+
+  const data = DATA.slice(0, 10);
+
+  const operations: iTableOperation[] = [
+    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
+    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
+    { label: '订阅', position: 'inner', handler: ({ row }) => {$message(`订阅：` + row.name);}, show: ({ row }) => !!row.star && row.star > 3 },
+    { label: '收藏', position: 'inner', handler: ({ row }) => {$message(`收藏：` + row.name);}, show: ({ row }) => !!row.star && row.star > 2 },
+    { label: '发布', position: 'inner', handler: ({ row }) => {$message(`发布：` + row.name);}, show: ({ row }) => !!row.star && row.star > 1 },
+  ];
+
+  return () => (
+    <DemoRow title="按钮自动折叠">
+      <Table data={data}>
+        <Plc field="id" title="编号"/>
+        <Plc field="name" title="名称"/>
+        <Plc field="date" title="日期(order=6)" order="6"/>
+        <Plc field="color" title="颜色"/>
+        <Plc field="star" title="评分"/>
+        <PlcOperation operations={operations}/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demo10 = designPage(() => {
+
+  const state = reactive({
+    data: DATA,
+    size: undefined as any,
+    summaryData: [
+      {
+        "id": 0,
+        "color": "#79f285",
+        "name": "Lisa",
+        "date": "2002-04-28",
+        "star": "★★★★★★★",
+        "size": 49
+      },
+      {
+        "id": 1,
+        "color": "#f27990",
+        "name": "George",
+        "date": "2019-01-06",
+        "star": "★★★★★★★★",
+        "size": 74
+      },
+    ],
+    other: {
+      hasSummaryData: true,
+      groupHead: false,
+    },
+    props: {
+      headRowHeight: undefined,
+      bodyRowHeight: undefined,
+      border: false,
+      virtual: true,
+    },
+    plc: {
+      width: 200,
+      align: 'left' as any,
+      init: true,
+      order: 5,
+      hide: undefined,
+    },
+    editNode: null as null | iTableNode,
+    onDblclickCell: (node: iTableNode) => {
+      console.log('node', node);
+      if (!!state.editNode) {
+        if (node === state.editNode) {
+          // node.saveEdit();
+          // node.closeEdit();
+          state.editNode = null;
+          return;
+        } else {
+          // state.editNode.cancelEdit();
+        }
+      }
+
+      // node.enableEdit();
+      state.editNode = node;
+    },
+  });
+
+  const operations: iTableOperation[] = [
+    {
+      label: '外部按钮一',
+      handler: () => {
+        $message('外部按钮一');
+      },
+    },
+    {
+      label: '外部按钮二',
+      handler: () => {
+        $message('外部按钮二');
+      },
+    },
+    {
+      label: '复制',
+      position: 'inner',
+      handler: ({ row }) => {
+        $message('复制' + row.name);
+      },
+    },
+    {
+      label: '删除',
+      position: 'inner',
+      handler: ({ row }) => {
+        $message('删除' + row.name);
+      },
+    },
+    {
+      label: '发布',
+      position: 'inner',
+      handler: ({ row }) => {
+        $message('发布' + row.name);
+      },
+    },
+    {
+      label: '订阅',
+      position: 'inner',
+      handler: ({ row }) => {
+        $message('订阅' + row.name);
+      },
+    },
+    {
+      label: '收藏',
+      position: 'inner',
+      handler: ({ row }) => {
+        $message('收藏' + row.name);
+      },
+    },
+  ];
+
+  return () => (
+    <DemoRow title={'切换列'}>
+      <Form column={3}>
+        <FormItem label={'列宽度响应测试'}>
+          <InputNumber v-model={state.plc.width} step={100}/>
+        </FormItem>
+        <FormItem label="表头行高">
+          <InputNumber v-model={state.props.headRowHeight} step={5}/>
+        </FormItem>
+        <FormItem label="表体行高">
+          <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
+        </FormItem>
+        <FormItem label="列销毁测试(名称)">
+          <Toggle v-model={state.plc.init}/>
+        </FormItem>
+        <FormItem label="大小尺寸">
+          <SegmentGroup v-model={state.size}>
+            <Segment label="Mini" val="mini"/>
+            <Segment label="Small" val="small"/>
+            <Segment label="Normal" val="normal"/>
+            <Segment label="Large" val="large"/>
+          </SegmentGroup>
+        </FormItem>
+        <FormItem label="文本对齐方式">
+          <RadioGroup v-model={state.plc.align}>
+            <Radio label="left" val="left"/>
+            <Radio label="center" val="center"/>
+            <Radio label="right" val="right"/>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="带边框">
+          <Checkbox v-model={state.props.border}/>
+        </FormItem>
+        <FormItem label="合计行">
+          <Toggle v-model={state.other.hasSummaryData}/>
+        </FormItem>
+        <FormItem label="表头分组">
+          <Toggle v-model={state.other.groupHead}/>
+        </FormItem>
+        <FormItem label="启用虚拟滚动">
+          <Toggle v-model={state.props.virtual}/>
+        </FormItem>
+        {!state.other.groupHead && <>
+          <FormItem label="order(名称)">
+            <InputNumber v-model={state.plc.order}/>
+          </FormItem>
+          <FormItem label="hide:(评分)">
+            <Toggle v-model={state.plc.hide}/>
+          </FormItem>
+        </>}
+      </Form>
+      <OuterOperation operations={operations}/>
+      <Table
+        data={state.data}
+        summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
+        onDblclickCell={state.onDblclickCell}
+        {...state.props}
+        /*不加这个key，没有问题，还很流畅*/
+        // key={state.other.groupHead ? '1' : '2'}
+        size={state.size}
+        showRows={10}
+        virtual={state.props.virtual}
+      >
+
+        {!!state.other.groupHead && <>
+          <Plc title={'普通文本列'} field={'id'}/>
+          <Plc title={'设置宽度'} field={'id'} width={state.plc.width} align={state.plc.align}/>
+          <Plc title={'大小'} field={'size'} align={state.plc.align}/>
+          <PlcGroup title="联系方式">
+            <Plc title={'地址'} field={'addr'} align={state.plc.align}/>
+            <Plc title={'链接'} field={'url'} align={state.plc.align}/>
+          </PlcGroup>
+          <PlcGroup title={'地址'} align={state.plc.align}>
+            <Plc field="date" title="日期" align={state.plc.align}/>
+            {!!state.plc.init && <Plc field="name" title="名称" align={state.plc.align}/>}
+            <Plc field="color" title="颜色" align={state.plc.align}/>
+          </PlcGroup>
+        </>}
+        {!state.other.groupHead && <>
+          <Plc field="id" title="编号"/>
+          <Plc field="name" title="名称"/>
+          <Plc field="id" title="编号(order=4)" order="4" align={state.plc.align}/>
+          <Plc field="size" title="大小" align={state.plc.align}/>
+          {!!state.plc.init && <Plc field="name" title="名称" order={state.plc.order} align={state.plc.align}/>}
+          <Plc field="date" title="日期(order=6)" order="6" align={state.plc.align}/>
+          <Plc field="color" title="颜色" align={state.plc.align}/>
+          <Plc field="star" title="评分" hide={state.plc.hide} align={state.plc.align}/>
+        </>}
+        <PlcOperation operations={operations}/>
+      </Table>
+    </DemoRow>
+  );
+});