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

package/templates/umi-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/umi-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/umi-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/umi-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/umi-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/umi-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/es/radio/interface';
+import { Wrapper, WrapperInstance } from '@baic/yolk-web';
+import { 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/umi-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/umi-web/src/pages/demo/index.tsx

@@ -0,0 +1,135 @@
+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 PagingTable from './examples/PagingTable';
+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,
+  PagingTable,
+  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/umi-web/src/pages/index.tsx

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

package/templates/umi-web/src/types/user.d.ts

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

package/templates/umi-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';