@baic/yolk-cli 2.0.1-alpha.50 → 2.0.1-alpha.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baic/yolk-cli",
-  "version": "2.0.1-alpha.50",
+  "version": "2.0.1-alpha.51",
   "author": "Baic <303394539@qq.com>",
   "license": "MIT",
   "bin": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ec5bb6b67ae775e3ae4c9ae29348f185b0c4b810"
+  "gitHead": "155d9ef8174ec5656217adfb68eb0b45135d847b"
 }

package/templates/ice-mobile/src/pages/demo/examples/List/1.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { List } from '@baic/yolk-mobile';
+
+export default () => {
+  return (
+    <List header='基础用法'>
+      <List.Item>1</List.Item>
+      <List.Item>2</List.Item>
+      <List.Item>3</List.Item>
+    </List>
+  );
+};

package/templates/ice-mobile/src/pages/demo/examples/List/2.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Image } from 'antd-mobile';
+import { List } from '@baic/yolk-mobile';
+
+import mock from './mock';
+
+export default () => {
+  return (
+    <List header="函数渲染" data={mock}>
+      {({ name, avatar, description }) => (
+        <List.Item
+          key={name}
+          prefix={
+            <Image
+              src={avatar}
+              style={{ borderRadius: 20 }}
+              fit="cover"
+              width={40}
+              height={40}
+            />
+          }
+          description={description}
+        >
+          {name}
+        </List.Item>
+      )}
+    </List>
+  );
+};

package/templates/ice-mobile/src/pages/demo/examples/List/3.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Image } from 'antd-mobile';
+import { List } from '@baic/yolk-mobile';
+
+import mock from './mock';
+
+export default () => {
+  return (
+    <List header="拖拽" drag data={mock}>
+      {({ name, avatar, description }) => (
+        <List.Item
+          key={name}
+          prefix={
+            <Image
+              src={avatar}
+              style={{ borderRadius: 20 }}
+              fit="cover"
+              width={40}
+              height={40}
+            />
+          }
+          description={description}
+        >
+          {name}
+        </List.Item>
+      )}
+    </List>
+  );
+};

package/templates/ice-mobile/src/pages/demo/examples/List/4.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Image } from 'antd-mobile';
+import { List, ListVirtualizedScrollEvent } from '@baic/yolk-mobile';
+
+const rowCount = 100;
+
+const item = {
+  avatar:
+    'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+  name: 'Novalee Spicer',
+  description: 'Deserunt dolor ea eaque eos',
+};
+
+const mock = Array(rowCount).fill(item);
+
+export default () => {
+  const onScrollHandler = React.useCallback(
+    async (e: ListVirtualizedScrollEvent) => {
+      console.log(e);
+    },
+    [],
+  );
+  const virtualizedMemo = React.useMemo(
+    () => ({
+      height: 500,
+      rowHeight: 60,
+      onScroll: onScrollHandler,
+    }),
+    [onScrollHandler],
+  );
+  return (
+    <List header="拖拽" virtualized={virtualizedMemo} data={mock}>
+      {({ name, avatar, description }, index, e) => {
+        return (
+          <List.Item
+            key={e?.key}
+            style={e?.style}
+            prefix={
+              <Image
+                src={avatar}
+                style={{ borderRadius: 20 }}
+                fit="cover"
+                width={40}
+                height={40}
+              />
+            }
+            description={description}
+          >
+            {name} {index}
+          </List.Item>
+        );
+      }}
+    </List>
+  );
+};

package/templates/ice-mobile/src/pages/demo/examples/List/mock.ts

@@ -0,0 +1,30 @@
+export default [
+  {
+    id: '1',
+    avatar:
+      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    name: 'Novalee Spicer',
+    description: 'Deserunt dolor ea eaque eos',
+  },
+  {
+    id: '2',
+    avatar:
+      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
+    name: 'Sara Koivisto',
+    description: 'Animi eius expedita, explicabo',
+  },
+  {
+    id: '3',
+    avatar:
+      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    name: 'Marco Gregg',
+    description: 'Ab animi cumque eveniet ex harum nam odio omnis',
+  },
+  {
+    id: '4',
+    avatar:
+      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    name: 'Edith Koenig',
+    description: 'Commodi earum exercitationem id numquam vitae',
+  },
+];

package/templates/ice-mobile/src/pages/demo/examples/PagingList/1.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PagingList } from '@baic/yolk-mobile';
+
+export default () => {
+  return <PagingList url=""/>;
+};

package/templates/ice-mobile/src/pages/demo/index.tsx

@@ -7,11 +7,16 @@ import { Tabs, Collapse } from 'antd-mobile';
 import BarCode from './examples/BarCode';
 import Iconfont from './examples/Iconfont';
 import Input from './examples/Input';
+import List_1 from './examples/List/1';
+import List_2 from './examples/List/2';
+import List_3 from './examples/List/3';
+import List_4 from './examples/List/4';
 import Loading from './examples/Loading';
 import NumberInput_1 from './examples/NumberInput/1';
 import NumberInput_2 from './examples/NumberInput/2';
 import NumberInput_3 from './examples/NumberInput/3';
 import NumberInput_4 from './examples/NumberInput/4';
+import PagingList_1 from './examples/PagingList/1';
 import QrCode from './examples/QrCode';
 import Required from './examples/Required';
 import TimerButton from './examples/TimerButton';
@@ -27,6 +32,7 @@ const tabs: Record<
   BarCode,
   Iconfont,
   Input,
+  List: { List_1, List_2, List_3, List_4 },
   Loading,
   NumberInput: {
     NumberInput_1,
@@ -34,6 +40,9 @@ const tabs: Record<
     NumberInput_3,
     NumberInput_4,
   },
+  PagingList: {
+    PagingList_1,
+  },
   QrCode,
   Required,
   TimerButton,
@@ -74,3 +83,5 @@ export default () => {
     </Tabs>
   );
 };
+
+// export default () => <PagingList_1 />;

package/templates/umi-mobile/src/pages/demo/examples/List/1.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { List } from '@baic/yolk-mobile';
+
+export default () => {
+  return (
+    <List header='基础用法'>
+      <List.Item>1</List.Item>
+      <List.Item>2</List.Item>
+      <List.Item>3</List.Item>
+    </List>
+  );
+};

package/templates/umi-mobile/src/pages/demo/examples/List/2.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Image } from 'antd-mobile';
+import { List } from '@baic/yolk-mobile';
+
+import mock from './mock';
+
+export default () => {
+  return (
+    <List header="函数渲染" data={mock}>
+      {({ name, avatar, description }) => (
+        <List.Item
+          key={name}
+          prefix={
+            <Image
+              src={avatar}
+              style={{ borderRadius: 20 }}
+              fit="cover"
+              width={40}
+              height={40}
+            />
+          }
+          description={description}
+        >
+          {name}
+        </List.Item>
+      )}
+    </List>
+  );
+};

package/templates/umi-mobile/src/pages/demo/examples/List/3.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Image } from 'antd-mobile';
+import { List } from '@baic/yolk-mobile';
+
+import mock from './mock';
+
+export default () => {
+  return (
+    <List header="拖拽" drag data={mock}>
+      {({ name, avatar, description }) => (
+        <List.Item
+          key={name}
+          prefix={
+            <Image
+              src={avatar}
+              style={{ borderRadius: 20 }}
+              fit="cover"
+              width={40}
+              height={40}
+            />
+          }
+          description={description}
+        >
+          {name}
+        </List.Item>
+      )}
+    </List>
+  );
+};

package/templates/umi-mobile/src/pages/demo/examples/List/4.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Image } from 'antd-mobile';
+import { List, ListVirtualizedScrollEvent } from '@baic/yolk-mobile';
+
+const rowCount = 100;
+
+const item = {
+  avatar:
+    'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+  name: 'Novalee Spicer',
+  description: 'Deserunt dolor ea eaque eos',
+};
+
+const mock = Array(rowCount).fill(item);
+
+export default () => {
+  const onScrollHandler = React.useCallback(
+    async (e: ListVirtualizedScrollEvent) => {
+      console.log(e);
+    },
+    [],
+  );
+  const virtualizedMemo = React.useMemo(
+    () => ({
+      height: 500,
+      rowHeight: 60,
+      onScroll: onScrollHandler,
+    }),
+    [onScrollHandler],
+  );
+  return (
+    <List header="拖拽" virtualized={virtualizedMemo} data={mock}>
+      {({ name, avatar, description }, index, e) => {
+        return (
+          <List.Item
+            key={e?.key}
+            style={e?.style}
+            prefix={
+              <Image
+                src={avatar}
+                style={{ borderRadius: 20 }}
+                fit="cover"
+                width={40}
+                height={40}
+              />
+            }
+            description={description}
+          >
+            {name} {index}
+          </List.Item>
+        );
+      }}
+    </List>
+  );
+};

package/templates/umi-mobile/src/pages/demo/examples/List/mock.ts

@@ -0,0 +1,30 @@
+export default [
+  {
+    id: '1',
+    avatar:
+      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    name: 'Novalee Spicer',
+    description: 'Deserunt dolor ea eaque eos',
+  },
+  {
+    id: '2',
+    avatar:
+      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
+    name: 'Sara Koivisto',
+    description: 'Animi eius expedita, explicabo',
+  },
+  {
+    id: '3',
+    avatar:
+      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    name: 'Marco Gregg',
+    description: 'Ab animi cumque eveniet ex harum nam odio omnis',
+  },
+  {
+    id: '4',
+    avatar:
+      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    name: 'Edith Koenig',
+    description: 'Commodi earum exercitationem id numquam vitae',
+  },
+];

package/templates/umi-mobile/src/pages/demo/examples/PagingList/1.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PagingList } from '@baic/yolk-mobile';
+
+export default () => {
+  return <PagingList url=""/>;
+};

package/templates/umi-mobile/src/pages/demo/index.tsx

@@ -7,11 +7,16 @@ import { Tabs, Collapse } from 'antd-mobile';
 import BarCode from './examples/BarCode';
 import Iconfont from './examples/Iconfont';
 import Input from './examples/Input';
+import List_1 from './examples/List/1';
+import List_2 from './examples/List/2';
+import List_3 from './examples/List/3';
+import List_4 from './examples/List/4';
 import Loading from './examples/Loading';
 import NumberInput_1 from './examples/NumberInput/1';
 import NumberInput_2 from './examples/NumberInput/2';
 import NumberInput_3 from './examples/NumberInput/3';
 import NumberInput_4 from './examples/NumberInput/4';
+import PagingList_1 from './examples/PagingList/1';
 import QrCode from './examples/QrCode';
 import Required from './examples/Required';
 import TimerButton from './examples/TimerButton';
@@ -27,6 +32,7 @@ const tabs: Record<
   BarCode,
   Iconfont,
   Input,
+  List: { List_1, List_2, List_3, List_4 },
   Loading,
   NumberInput: {
     NumberInput_1,
@@ -34,6 +40,9 @@ const tabs: Record<
     NumberInput_3,
     NumberInput_4,
   },
+  PagingList: {
+    PagingList_1,
+  },
   QrCode,
   Required,
   TimerButton,
@@ -74,3 +83,5 @@ export default () => {
     </Tabs>
   );
 };
+
+// export default () => <PagingList_1 />;