@baic/yolk-cli 2.0.1-alpha.36 → 2.0.1-alpha.39

package/templates/umi-web/src/pages/demo/examples/BarCode.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { BarCode } from '@baic/yolk-web';
+
+export default () => <BarCode value="https://www.baidu.com" />;

package/templates/umi-web/src/pages/demo/examples/Collapse.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Collapse } from '@baic/yolk-web';
+
+export default () => <Collapse title="折叠组件">这里是隐藏内容</Collapse>;

package/templates/umi-web/src/pages/demo/examples/DatePicker.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DatePicker } from '@baic/yolk-web';
+
+export default () => <DatePicker autoFixDate />;

package/templates/umi-web/src/pages/demo/examples/Flex.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Flex } from '@baic/yolk-web';
+
+export default () => (
+  <Flex>
+    <Flex>1</Flex>
+    <Flex>2</Flex>
+    <Flex>3</Flex>
+  </Flex>
+);

package/templates/umi-web/src/pages/demo/examples/Grid/1.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Grid } from '@baic/yolk-web';
+
+export default () => (
+  <Grid
+    data={[
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+    ]}
+  />
+);

package/templates/umi-web/src/pages/demo/examples/Grid/2.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Grid } from '@baic/yolk-web';
+
+export default () => (
+  <Grid
+    span={2}
+    data={[
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+    ]}
+  />
+);

package/templates/umi-web/src/pages/demo/examples/Grid/3.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, Divider } from 'antd';
+import { Grid } from '@baic/yolk-web';
+
+export default () => {
+  const [bordered, setBordered] = React.useState(true);
+  const onClickHandler = React.useCallback(() => setBordered(!bordered), [
+    bordered,
+  ]);
+  return (
+    <>
+      <Button onClick={onClickHandler}>{bordered ? '关闭' : '开启'}边框</Button>
+      <Divider />
+      <Grid
+        bordered={bordered}
+        data={[
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+        ]}
+      />
+    </>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/Grid/4.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Radio, Divider } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio/interface';
+import { Grid, GridProps } from '@baic/yolk-web';
+
+export default () => {
+  const [size, setSize] = React.useState<GridProps['size']>('middle');
+  const onChangeHandler = React.useCallback(
+    (e: RadioChangeEvent) => setSize(e.target.value),
+    [],
+  );
+  return (
+    <>
+      <Radio.Group value={size} onChange={onChangeHandler}>
+        <Radio.Button value="small">small</Radio.Button>
+        <Radio.Button value="middle">middle</Radio.Button>
+        <Radio.Button value="large">large</Radio.Button>
+      </Radio.Group>
+      <Divider />
+      <Grid
+        size={size}
+        data={[
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+        ]}
+      />
+    </>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/Grid/5.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Form } from 'antd';
+import { Grid, Input, useForm } from '@baic/yolk-web';
+
+export default () => {
+  const [form] = useForm();
+  const { createFormItem } = form;
+  return (
+    <Form form={form}>
+      <Grid
+        data={[
+          {
+            label: '标题',
+            value: createFormItem({
+              name: 'content',
+              rules: 'required',
+            })(<Input />),
+            required: true,
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+          {
+            label: '标题',
+            value: '内容',
+          },
+        ]}
+      />
+    </Form>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/Grid/6.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Grid } from '@baic/yolk-web';
+
+export default () => (
+  <Grid
+    bordered={false}
+    itemDirection="vertical"
+    data={[
+      {
+        label: '标题',
+        value: '内容',
+        required: true,
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+      {
+        label: '标题',
+        value: '内容',
+      },
+    ]}
+  />
+);

package/templates/umi-web/src/pages/demo/examples/Iconfont.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Provider, Iconfont } from '@baic/yolk-web';
+
+export default () => {
+  return (
+    <Provider
+      iconfontScriptUrl={[
+        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
+        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
+      ]}
+    >
+      <Iconfont type="icon-javascript" />
+      <Iconfont type="icon-java" />
+      <Iconfont type="icon-shoppingcart" />
+      <Iconfont type="icon-python" />
+    </Provider>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/ImagePreview.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Button } from 'antd';
+import { ImagePreview } from '@baic/yolk-web';
+
+export default () => {
+  const [visible, setVisible] = React.useState(false);
+  const onClickHandler = React.useCallback(() => setVisible(true), []);
+  const onCloseHandler = React.useCallback(() => setVisible(false), []);
+  return (
+    <>
+      <Button onClick={onClickHandler}>预览图片</Button>
+      <ImagePreview
+        visible={visible}
+        onClose={onCloseHandler}
+        urls={['https://avatars.githubusercontent.com/u/1750965']}
+        current="https://avatars.githubusercontent.com/u/1750965"
+      />
+    </>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/Input/1.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Input } from '@baic/yolk-web';
+
+export default () => <Input />;

package/templates/umi-web/src/pages/demo/examples/Input/2.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Form, Button, Divider } from 'antd';
+import { useForm } from '@baic/yolk-web';
+import {
+  Config,
+  Input,
+  NumberInput,
+  MobileInput,
+  BankInput,
+  Grid,
+} from '@baic/yolk-web';
+
+export default () => {
+  const [form] = useForm();
+  const { createFormItem, setFieldsValue, resetFields } = form;
+  const [edit, setEdit] = React.useState(true);
+  const onClickHandler = React.useCallback(() => {
+    if (edit) {
+      setEdit(false);
+      setFieldsValue({
+        grid_name: '某某',
+        grid_age: 18,
+        grid_mobile: '13000000000',
+        grid_bankNumber: '0000000000000000',
+      });
+    } else {
+      setEdit(true);
+      resetFields();
+    }
+  }, [edit, setFieldsValue, resetFields]);
+  return (
+    <>
+      <Button onClick={onClickHandler}>{edit ? '详情' : '编辑'}</Button>
+      <Divider />
+      <Config edit={edit}>
+        <Form form={form}>
+          <Grid
+            data={[
+              {
+                label: '姓名',
+                value: createFormItem({
+                  name: 'grid_name',
+                  rules: 'required',
+                })(<Input />),
+                required: edit,
+              },
+              {
+                label: '年龄',
+                value: createFormItem({
+                  name: 'grid_age',
+                  rules: 'required',
+                })(<NumberInput maxLength={3} />),
+                required: edit,
+              },
+              {
+                label: '电话号码',
+                value: createFormItem({
+                  name: 'grid_mobile',
+                  rules: {
+                    required: true,
+                    mobile: true,
+                  },
+                })(<MobileInput />),
+                required: edit,
+              },
+              {
+                label: '银行卡号',
+                value: createFormItem({
+                  name: 'grid_bankNumber',
+                  rules: 'required',
+                })(<BankInput />),
+                required: edit,
+              },
+            ]}
+          />
+        </Form>
+      </Config>
+    </>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/LinkButton/1.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { LinkButton } from '@baic/yolk-web';
+
+export default () => <LinkButton onClick={() => {}}>操作</LinkButton>;

package/templates/umi-web/src/pages/demo/examples/LinkButton/2.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { LinkButton } from '@baic/yolk-web';
+
+export default () => (
+  <LinkButton.Merge>
+    <LinkButton onClick={() => {}}>修改</LinkButton>
+    <LinkButton>删除</LinkButton>
+  </LinkButton.Merge>
+);

package/templates/umi-web/src/pages/demo/examples/LinkButton/3.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { LinkButton } from '@baic/yolk-web';
+
+export default () => (
+  <LinkButton.Group>
+    <LinkButton onClick={() => {}}>编辑</LinkButton>
+    <LinkButton.Merge>
+      <LinkButton onClick={() => {}}>修改</LinkButton>
+      <LinkButton>删除</LinkButton>
+    </LinkButton.Merge>
+  </LinkButton.Group>
+);

package/templates/umi-web/src/pages/demo/examples/Loading.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Loading } from '@baic/yolk-web';
+
+export default () => (
+  <div
+    style={{
+      position: 'relative',
+    }}
+  >
+    <Loading />
+  </div>
+);

package/templates/umi-web/src/pages/demo/examples/MobileInput.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { MobileInput } from '@baic/yolk-web';
+
+export default () => <MobileInput />;

package/templates/umi-web/src/pages/demo/examples/NumberInput.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { NumberInput } from '@baic/yolk-web';
+
+export default () => <NumberInput />;

package/templates/umi-web/src/pages/demo/examples/PagingTable.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PagingTable, Input } from '@baic/yolk-web';
+
+export default () => {
+  return (
+    <PagingTable
+      url=""
+      columns={[
+        {
+          dataIndex: 'name',
+          title: 'name',
+        },
+      ]}
+      search={({ createFormItem }) => [
+        createFormItem({
+          name: 'Input',
+        })(<Input />),
+      ]}
+    />
+  );
+};

package/templates/umi-web/src/pages/demo/examples/QrCode.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { QrCode } from '@baic/yolk-web';
+
+export default () => <QrCode value="https://www.baidu.com" />;

package/templates/umi-web/src/pages/demo/examples/RangeNumber/1.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { RangeNumber } from '@baic/yolk-web';
+
+export default () => <RangeNumber />;

package/templates/umi-web/src/pages/demo/examples/RangeNumber/2.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Form } from 'antd';
+import { RangeNumber, useForm } from '@baic/yolk-web';
+
+export default () => {
+  const [form] = useForm();
+  const { createFormItem } = form;
+  return (
+    <Form form={form}>
+      {createFormItem({
+        name: 'RangeNumber',
+      })(<RangeNumber />)}
+    </Form>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/Required.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Required } from '@baic/yolk-web';
+
+export default () => <Required>必填</Required>;

package/templates/umi-web/src/pages/demo/examples/SearchLayout.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Form } from 'antd';
+import { useForm } from '@baic/yolk-web';
+import {
+  SearchLayout,
+  Input,
+  NumberInput,
+  MobileInput,
+  BankInput,
+} from '@baic/yolk-web';
+
+export default () => {
+  const [form] = useForm();
+  const { createFormItem } = form;
+  return (
+    <Form form={form}>
+      <SearchLayout
+        data={[
+          createFormItem({
+            name: 'name',
+            label: '姓名',
+            rules: 'required',
+          })(<Input />),
+          createFormItem({
+            name: 'age',
+            label: '年龄',
+            rules: 'required',
+          })(<NumberInput maxLength={3} />),
+          createFormItem({
+            name: 'mobile',
+            label: '电话号码',
+            rules: {
+              required: true,
+              mobile: true,
+            },
+          })(<MobileInput />),
+          createFormItem({
+            name: 'bankNumber',
+            label: '银行卡号',
+            rules: 'required',
+          })(<BankInput />),
+        ]}
+      />
+    </Form>
+  );
+};

package/templates/umi-web/src/pages/demo/examples/Table/1.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Table } from '@baic/yolk-web';
+
+export default () => (
+  <Table
+    columns={[
+      {
+        dataIndex: 'a',
+        title: 'a',
+        formatter: v => v,
+      },
+      {
+        dataIndex: 'b',
+        title: 'b',
+        ellipsis: true,
+      },
+      {
+        dataIndex: 'b',
+        title: 'b',
+        ellipsis: 5,
+      },
+      {
+        dataIndex: 'b',
+        title: 'b',
+        ellipsis: () => '123',
+      },
+      {
+        dataIndex: 'a',
+        title: 'a',
+        fontWeight: 'bold',
+      },
+      {
+        dataIndex: 'a',
+        title: 'a',
+        unit: '元',
+      },
+      {
+        dataIndex: 'a',
+        title: 'a',
+        tag: true,
+      },
+      {
+        dataIndex: 'a',
+        title: 'a',
+        tag: {
+          color: 'red',
+        },
+      },
+      {
+        dataIndex: 'a',
+        title: 'a',
+        tag: 'red',
+      },
+    ]}
+    dataSource={[
+      {
+        a: '1',
+        b: '124125125151251251515125',
+        c: true,
+        d: null,
+      },
+    ]}
+  />
+);

package/templates/umi-web/src/pages/demo/examples/Table/2.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Table } from '@baic/yolk-web';
+
+export default () => (
+  <Table
+    bordered
+    dragSort
+    columns={[
+      {
+        dataIndex: 'a',
+        title: 'a',
+      },
+      {
+        dataIndex: 'b',
+        title: 'b',
+      },
+    ]}
+    dataSource={[
+      {
+        a: '1',
+        b: '1',
+      },
+      {
+        a: '2',
+        b: '2',
+      },
+    ]}
+  />
+);

package/templates/umi-web/src/pages/demo/examples/Table/3.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { message } from 'antd';
+import { Table } from '@baic/yolk-web';
+
+export default () => (
+  <Table
+    bordered
+    dragSort={{
+      header: {
+        onSortEnd: ({ oldIndex, newIndex }) =>
+          message.success(`排序结束, 从${oldIndex}到${newIndex}`),
+      },
+      body: {
+        onSortEnd: ({ oldIndex, newIndex }) =>
+          message.success(`排序结束, 从${oldIndex}到${newIndex}`),
+      },
+    }}
+    columns={[
+      {
+        dataIndex: 'a',
+        title: 'a',
+      },
+      {
+        dataIndex: 'b',
+        title: 'b',
+      },
+    ]}
+    dataSource={[
+      {
+        a: '1',
+        b: '1',
+      },
+      {
+        a: '2',
+        b: '2',
+      },
+    ]}
+  />
+);