plain-design 1.0.0-beta.12 → 1.0.0-beta.121

package/src/pages/index/components/columns/DemoPlcTime.tsx

@@ -1,293 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {$message, Button, ButtonGroup, Form, FormItem, Plc, PlcIndex, PlcInput, PlcNumber, PlcTime, PlcTimeRange, Table} from "../../../../packages";
-import data50 from "../../../data/data-50.json";
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data50.slice(0, 5),
-    editNodes: [] as iTableNode[],
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (!tableNode.state.edit) {
-        tableNode.enableEdit();
-        state.editNodes.push(tableNode);
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <Form column={1}>
-        <FormItem label="导出">
-          <ButtonGroup style={{ margin: '4px 0' }}>
-            <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-            <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-          </ButtonGroup>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        ref={onRef.table}
-      >
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcTime field="time" title="时间" required/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data50.slice(0, 5),
-    editNodes: [] as iTableNode[],
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (!tableNode.state.edit) {
-        tableNode.enableEdit();
-        state.editNodes.push(tableNode);
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <DemoRow title={'格式化'}>
-      <Form column={1}>
-        <FormItem label="导出">
-          <ButtonGroup style={{ margin: '4px 0' }}>
-            <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-            <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-          </ButtonGroup>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        ref={onRef.table}
-      >
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcTime field="time" title="时间" required/>
-        <PlcTime field="time" title="时间(显示格式化)" required displayFormat="HH时mm分ss秒"/>
-        <PlcTime field="timeNumber" title="时间(值格式化)" required valueFormat="hhmmss" displayFormat="HH时mm分ss秒"/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data50.slice(0, 5),
-    editNodes: [] as iTableNode[],
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (!tableNode.state.edit) {
-        tableNode.enableEdit();
-        state.editNodes.push(tableNode);
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <DemoRow title={'范围选择'}>
-      <Form column={1}>
-        <FormItem label="导出">
-          <ButtonGroup style={{ margin: '4px 0' }}>
-            <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-            <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-          </ButtonGroup>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        ref={onRef.table}
-      >
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcTimeRange
-          startField="startTime"
-          startTitle="开始时间"
-          endField="endTime"
-          endTitle="结束时间"
-          startAttrs={{ required: true }}
-        />
-        <PlcNumber field="num" title="数字"/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data50.slice(0, 5),
-    editNodes: [] as iTableNode[],
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (!tableNode.state.edit) {
-        tableNode.enableEdit();
-        state.editNodes.push(tableNode);
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <DemoRow title={'范围选择格式化'}>
-      <Form column={1}>
-        <FormItem label="导出">
-          <ButtonGroup style={{ margin: '4px 0' }}>
-            <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-            <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-          </ButtonGroup>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        ref={onRef.table}
-      >
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcTimeRange
-          startField="startTime"
-          startTitle="开始时间"
-          endField="endTime"
-          endTitle="结束时间"
-          displayFormat="HH时mm分ss秒"
-          startAttrs={{ required: true }}
-        />
-        <PlcNumber field="num" title="数字"/>
-      </Table>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/columns/DemoTableColumns.tsx

@@ -1,88 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import data200 from '../../../data/data-200.json';
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {$message, Button, ButtonGroup, Form, FormItem, Plc, PlcCheckbox, PlcColorPicker, PlcDate, PlcIndex, PlcInput, PlcNumber, PlcRate, PlcToggle, Table, Toggle} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export default designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data200,
-    editNodes: [] as iTableNode[],
-    virtualFlag: true,
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (!tableNode.state.edit) {
-        tableNode.enableEdit();
-        state.editNodes.push(tableNode);
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Form column={1}>
-          <FormItem label={'开启虚拟滚动'}>
-            <Toggle v-model={state.virtualFlag}/>
-          </FormItem>
-          <FormItem label="导出">
-            <ButtonGroup style={{ margin: '4px 0' }}>
-              <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-              <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-            </ButtonGroup>
-          </FormItem>
-          <FormItem label={'编辑'}>
-            <ButtonGroup disabled={state.editNodes.length === 0}>
-              <Button onClick={state.saveEdit} label={'保存编辑'}/>
-              <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-            </ButtonGroup>
-          </FormItem>
-        </Form>
-      </DemoRow>
-      <DemoRow title={'行内编辑'}>
-        <Table
-          virtual={state.virtualFlag}
-          data={state.data}
-          onDblclickCell={state.onDblClickRow}
-          ref={onRef.table}
-          showRows={10}
-        >
-          <PlcIndex/>
-          <Plc field="id" title="编号"/>
-          <Plc field="name" title="普通文本列"/>
-          <PlcInput field="name" title="文本框" required/>
-          <PlcNumber field={'size'} title={'数字框'}/>
-          <PlcDate field={'date'} title={'日期'}/>
-          <PlcColorPicker field={'color'} title={'颜色'}/>
-          <PlcRate field={'star'} title={'评分'}/>
-          <PlcToggle field={'flag'} title={'开关'}/>
-          <PlcCheckbox field={'flag'} title={'开关'}/>
-        </Table>
-      </DemoRow>
-    </div>
-  );
-});