@baic/yolk-cli 2.0.1-alpha.1 → 2.0.1-alpha.10

package/templates/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-form';
+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/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/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/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/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/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/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/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/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/web/src/pages/demo/examples/RangeNumber/2.tsx

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

package/templates/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/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-form';
+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/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/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/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',
+      },
+    ]}
+  />
+);

package/templates/web/src/pages/demo/examples/Table/4.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { MenuOutlined } from '@ant-design/icons';
+import { Table } from '@baic/yolk-web';
+
+export default () => (
+  <Table
+    bordered
+    dragSort={{
+      header: false,
+      body: {
+        selfDrag: false,
+      },
+    }}
+    columns={[
+      {
+        title: '排序',
+        render: () =>
+          Table.createDragSortComponent(
+            <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />,
+          ),
+      },
+      {
+        dataIndex: 'a',
+        title: 'a',
+      },
+      {
+        dataIndex: 'b',
+        title: 'b',
+      },
+    ]}
+    dataSource={[
+      {
+        a: '1',
+        b: '1',
+      },
+      {
+        a: '2',
+        b: '2',
+      },
+    ]}
+  />
+);

package/templates/web/src/pages/demo/examples/TimerButton.tsx

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

package/templates/web/src/pages/demo/examples/Title/1.tsx

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

package/templates/web/src/pages/demo/examples/Title/2.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Button } from 'antd';
+import { Title } from '@baic/yolk-web';
+
+export default () => <Title toolbar={<Button>提交</Button>}>这里是标题</Title>;

package/templates/web/src/pages/demo/examples/WaterMark.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { WaterMark } from '@baic/yolk-web';
+
+export default () => (
+  <WaterMark content="水印">
+    <div style={{ height: 200 }} />
+  </WaterMark>
+);

package/templates/web/src/pages/demo/examples/Wrapper.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Button, Divider, Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/lib/radio/interface';
+import { Wrapper } from '@baic/yolk-web';
+import { WrapperInstance, Mode } from '@baic/yolk-web/lib/wrapper';
+
+export default () => {
+  const ref = React.useRef<WrapperInstance>(null);
+  const [mode, setMode] = React.useState<Mode>('page');
+  const onClickHandler = React.useCallback(() => ref.current?.open(), []);
+  const onChangeHandler = React.useCallback(
+    (e: RadioChangeEvent) => setMode(e.target.value),
+    [],
+  );
+  return (
+    <>
+      <Button onClick={onClickHandler}>打开</Button>
+      <Divider type="vertical" />
+      <Radio.Group onChange={onChangeHandler} defaultValue={mode}>
+        <Radio value="modal">Modal模式</Radio>
+        <Radio value="page">Page模式</Radio>
+        <Radio value="inline">Inline模式</Radio>
+      </Radio.Group>
+      <Divider />
+      <div
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          width: 500,
+          height: 500,
+          border: '1px solid #ddd',
+        }}
+      >
+        <Wrapper ref={ref} mode={mode} title="标题">
+          这里是内容
+        </Wrapper>
+      </div>
+    </>
+  );
+};

package/templates/web/src/pages/demo/examples/usePreload.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Util } from '@baic/yolk';
+import { usePreload } from '@baic/yolk-web';
+export default () => {
+  const [wrap] = usePreload(async () => {
+    await Util.delay(1000);
+  });
+  return wrap(<>页面加载完成显示出来了</>);
+};

package/templates/web/src/pages/demo/index.tsx

@@ -0,0 +1,133 @@
+import _ from 'lodash';
+
+import * as React from 'react';
+
+import { Tabs } from 'antd';
+
+import BankInput from './examples/BankInput';
+import BarCode from './examples/BarCode';
+import Collapse from './examples/Collapse';
+import DatePicker from './examples/DatePicker';
+import Flex from './examples/Flex';
+import Grid1 from './examples/Grid/1';
+import Grid2 from './examples/Grid/2';
+import Grid3 from './examples/Grid/3';
+import Grid4 from './examples/Grid/4';
+import Grid5 from './examples/Grid/5';
+import Grid6 from './examples/Grid/6';
+import Iconfont from './examples/Iconfont';
+import ImagePreview from './examples/ImagePreview';
+import Input1 from './examples/Input/1';
+import Input2 from './examples/Input/2';
+import LinkButton1 from './examples/LinkButton/1';
+import LinkButton2 from './examples/LinkButton/2';
+import LinkButton3 from './examples/LinkButton/3';
+import Loading from './examples/Loading';
+import MobileInput from './examples/MobileInput';
+import NumberInput from './examples/NumberInput';
+import QrCode from './examples/QrCode';
+import RangeNumber1 from './examples/RangeNumber/1';
+import RangeNumber2 from './examples/RangeNumber/2';
+import Required from './examples/Required';
+import SearchLayout from './examples/SearchLayout';
+import Table1 from './examples/Table/1';
+import Table2 from './examples/Table/2';
+import Table3 from './examples/Table/3';
+import Table4 from './examples/Table/4';
+import TimerButton from './examples/TimerButton';
+import Title1 from './examples/Title/1';
+import Title2 from './examples/Title/2';
+import usePreload from './examples/usePreload';
+import WaterMark from './examples/WaterMark';
+import Wrapper from './examples/Wrapper';
+
+const { TabPane } = Tabs;
+
+const tabs: Record<
+  string,
+  React.FunctionComponent | Record<string, React.FunctionComponent>
+> = {
+  BankInput,
+  BarCode,
+  Collapse,
+  DatePicker,
+  Flex,
+  Grid: {
+    Grid1,
+    Grid2,
+    Grid3,
+    Grid4,
+    Grid5,
+    Grid6,
+  },
+  Iconfont,
+  ImagePreview,
+  Input: {
+    Input1,
+    Input2,
+  },
+  LinkButton: {
+    LinkButton1,
+    LinkButton2,
+    LinkButton3,
+  },
+  Loading,
+  MobileInput,
+  NumberInput,
+  QrCode,
+  RangeNumber: {
+    RangeNumber1,
+    RangeNumber2,
+  },
+  Required,
+  SearchLayout,
+  Table: {
+    Table1,
+    Table2,
+    Table3,
+    Table4,
+  },
+  TimerButton,
+  Title: {
+    Title1,
+    Title2,
+  },
+  usePreload,
+  WaterMark,
+  Wrapper,
+};
+
+export default () => {
+  const keys = Object.keys(tabs);
+  return (
+    <Tabs defaultActiveKey={keys[0]}>
+      {keys.map(key => {
+        const tab = tabs[key];
+        if (_.isFunction(tab)) {
+          return (
+            <TabPane key={key} tab={key}>
+              {React.createElement(tab)}
+            </TabPane>
+          );
+        }
+        if (_.isObject(tab)) {
+          const keys2 = Object.keys(tab);
+          return (
+            <TabPane key={key} tab={key}>
+              <Tabs defaultActiveKey={keys2[0]}>
+                {keys2.map(key2 => {
+                  const tab2 = tab[key2];
+                  return (
+                    <TabPane key={key2} tab={key2}>
+                      {React.createElement(tab2)}
+                    </TabPane>
+                  );
+                })}
+              </Tabs>
+            </TabPane>
+          );
+        }
+      })}
+    </Tabs>
+  );
+};

package/templates/web/src/pages/index.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default () => <div>Hello world</div>;

package/templates/web/{base/src → src}/types/user.d.ts

@@ -1,3 +1,3 @@
 export interface User {
   id?: string;
-}
+}

package/templates/{mobile/base → web}/tsconfig.json

@@ -4,14 +4,14 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "sourceMap": true,
     "baseUrl": "./",
     "strict": true,
     "paths": {
       "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
+      "@@/*": ["src/.umi/*"]
     },
     "allowSyntheticDefaultImports": true
   },

package/templates/web/typings.d.ts

@@ -0,0 +1,16 @@
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';