feat: add list-view

.jest.config.js

@@ -1,21 +1,16 @@
 const libDir = process.env.LIB_DIR;
-const { defaults: tsjPreset } = require('ts-jest/presets');
+const {defaults: tsjPreset} = require('ts-jest/presets');
 
 const transformPackages = [
-  'react-native',
-  'react-native-menu',
-  'react-native-tab-view',
-  'react-native-collapsible',
-  'react-native-swipeout',
-  'react-native-camera-roll-picker',
+  'react-native', 'react-native-menu', 'react-native-tab-view',
+  'react-native-collapsible', 'react-native-swipeout',
+  'react-native-camera-roll-picker', 'react-native-ultimate-listview'
 ]
 
 module.exports = {
   // ...tsjPreset,
   preset: 'react-native',
-  setupFiles: [
-    './tests/setup.js'
-  ],
+  setupFiles: ['./tests/setup.js'],
   moduleFileExtensions: [
     'ts',
     'tsx',
@@ -33,8 +28,8 @@ module.exports = {
     ...tsjPreset.transform,
     // '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
     // '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
-    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
-    "\\.png": '<rootDir>/tests/imageStub.js',
+    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
+    '\\.png': '<rootDir>/tests/imageStub.js',
   },
   testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
   collectCoverageFrom: [
@@ -48,7 +43,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       babelConfig: true,
-      tsConfig: "tsconfig.test.json",
+      tsConfig: 'tsconfig.test.json',
     }
   }
 };

components/index.tsx

@@ -14,6 +14,7 @@ export { default as Grid } from './grid/index';
 export { default as Icon } from './icon/index';
 export { default as ImagePicker } from './image-picker/index';
 export { default as InputItem } from './input-item/index';
+export { default as ListView } from './list-view/index';
 export { default as List } from './list/index';
 export { default as Modal } from './modal/index';
 export { default as NoticeBar } from './notice-bar/index';

components/list-view/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import rnDemoTest from '../../../tests/shared/demoTest';
+
+rnDemoTest('list-view');

components/list-view/demo/basic.md

@@ -0,0 +1,112 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+[Demo Source Code](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/list/demo/basic.tsx)
+
+```jsx
+// tslint:disable:no-empty
+import React from 'react';
+import { Image, ScrollView, View } from 'react-native';
+import { List } from '@ant-design/react-native';
+const Item = List.Item;
+const Brief = Item.Brief;
+export default class BasicListExample extends React.Component {
+  render() {
+    return (
+      <ScrollView
+        style={{ flex: 1, backgroundColor: '#f5f5f9' }}
+        automaticallyAdjustContentInsets={false}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+        <List renderHeader={'basic'}>
+          <Item data-seed="logId">
+            标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏
+          </Item>
+          <Item wrap>
+            文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
+          </Item>
+          <Item disabled extra="箭头向右" arrow="horizontal" onPress={() => {}}>
+            标题文字
+          </Item>
+          <Item extra="箭头向下" arrow="down" onPress={() => {}}>
+            标题文字
+          </Item>
+          <Item extra="箭头向上" arrow="up" onPress={() => {}}>
+            标题文字
+          </Item>
+          <Item extra="没有箭头" arrow="empty">
+            标题文字
+          </Item>
+          <Item
+            extra={
+              <View>
+                内容内容
+                <Brief style={{ textAlign: 'right' }}>辅助文字内容</Brief>
+              </View>
+            }
+            multipleLine
+          >
+            垂直居中对齐
+          </Item>
+          <Item extra="内容内容" multipleLine>
+            垂直居中对齐<Brief>辅助文字内容</Brief>
+          </Item>
+          <Item
+            wrap
+            extra="文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行"
+            multipleLine
+            align="top"
+            arrow="horizontal"
+          >
+            顶部对齐
+            <Brief>辅助文字内容辅助文字内容辅助文字内容辅助文字内容</Brief>
+            <Brief>辅助文字内容</Brief>
+          </Item>
+          <Item
+            extra={
+              <View>
+                内容内容
+                <Brief style={{ textAlign: 'right' }}>辅助文字内容</Brief>
+              </View>
+            }
+            multipleLine
+            align="bottom"
+          >
+            底部对齐
+          </Item>
+        </List>
+        <List renderHeader={'带缩略图'}>
+          <Item thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png">
+            thumb
+          </Item>
+          <Item
+            thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
+            arrow="horizontal"
+          >
+            thumb
+          </Item>
+          <Item
+            extra={
+              <Image
+                source={{
+                  uri:
+                    'https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png',
+                }}
+                style={{ width: 29, height: 29 }}
+              />
+            }
+            arrow="horizontal"
+          >
+            extra为Image
+          </Item>
+        </List>
+      </ScrollView>
+    );
+  }
+}
+```

components/list-view/demo/basic.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { ListView } from '../../';
+
+export default class BasicListExample extends React.Component<any, any> {
+  state = {
+    layout: 'list',
+  };
+  sleep = (time: any) =>
+    new Promise(resolve => setTimeout(() => resolve(), time));
+  onFetch = async (
+    page = 1,
+    startFetch: (arg0: string[], arg1: number) => void,
+    abortFetch: () => void,
+  ) => {
+    try {
+      //This is required to determinate whether the first loading list is all loaded.
+      let pageLimit = 30;
+      if (this.state.layout === 'grid') pageLimit = 60;
+      const skip = (page - 1) * pageLimit;
+
+      //Generate dummy data
+      let rowData = Array.from(
+        { length: pageLimit },
+        (_, index) => `item -> ${index + skip}`,
+      );
+
+      //Simulate the end of the list if there is no more data returned from the server
+      if (page === 10) {
+        rowData = [];
+      }
+
+      //Simulate the network loading in ES7 syntax (async/await)
+      await this.sleep(2000);
+      startFetch(rowData, pageLimit);
+    } catch (err) {
+      abortFetch(); //manually stop the refresh or pagination if it encounters network error
+    }
+  };
+
+  renderItem = (item: any) => {
+    return (
+      <View style={{ padding: 10 }}>
+        <Text>{item}</Text>
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <ListView
+        onFetch={this.onFetch}
+        keyExtractor={(item: any, index: any) =>
+          `${this.state.layout} - ${item} - ${index}`
+        }
+        renderItem={this.renderItem}
+        numColumns={this.state.layout === 'list' ? 1 : 3}
+      />
+    );
+  }
+}
+
+export const title = 'ListView';
+export const description = 'ListView Example';

components/list-view/index.en-US.md

@@ -0,0 +1,38 @@
+---
+category: Components
+type: Data Display
+title: List
+---
+
+A single and continuous block content is vertically arranged to display current contents, status and available operations. eg：Contact List.
+
+In case you need an infinite scroll list - consider using [ListView](https://mobile.ant.design/components/list-view/) component.
+
+### Rule
+- Generally `List` consists of main infomation, main operations, secondary infomation and secondary operations.
+- The main infomation and main operations are placed on the left side of list, and secondary infomation and secondary operations are placed on the right side.
+
+## API
+
+### List
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| renderHeader       | list heder  | (): void |    |
+| renderFooter       | list footer  | (): void |    |
+
+### List.Item
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| thumb       | thumbnail on the left side of `List`(string type will be used to set img src)  | String/React.Element |   |
+| extra      | extra content on the right side of `List`        | String/React.Element |    |
+| arrow      | arrow direction, options: `horizontal`,`up`,`down`, `empty`; `empty` option may hide the dom  | String |     |
+| align    | vertical alignment of child elements，options: `top`,`middle`,`bottom`  | String   | `middle` |
+| onPress    | callback is called when  list is clicked | (): void |    |
+| multipleLine    | multiple line | Boolean  | `false`  |
+| wrap    | Whether to wrap long texts, otherwise it will be hidden by default. | Boolean  | `false`  |
+
+### List.Item.Brief
+
+Brief infomation

components/list-view/index.tsx

@@ -0,0 +1,58 @@
+/*
+ *
+ * ListView
+ *
+ */
+
+import React from 'react';
+import { Platform } from 'react-native';
+import { UltimateListView } from 'react-native-ultimate-listview';
+
+export interface ListViewProps<T> {
+  children?: React.ReactNode;
+  onFetch: (
+    currentPage: number,
+    startFetch: () => any,
+    abortFetch: () => void,
+  ) => void;
+  pageSize?: number;
+  renderItem: (
+    item: T,
+    index: number,
+    separators: {
+      highlight: () => void;
+      unhighlight: () => void;
+      updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
+    },
+  ) => React.ReactElement<any> | null;
+  emptyView?: () => React.ReactNode;
+  afterFetch?: () => void;
+  numColumns?: number;
+  keyExtractor: (item: T, index: number) => string;
+}
+export interface ListViewState {}
+class ListView<T> extends React.PureComponent<ListViewProps<T>, ListViewState> {
+  ulv: { refresh: () => void };
+
+  refresh = () => {
+    if (this.ulv) {
+      this.ulv.refresh();
+    }
+  };
+  render() {
+    const { renderItem, ...props } = this.props;
+
+    return (
+      <UltimateListView
+        key="ant-list-view"
+        refreshableMode={Platform.OS === 'ios' ? 'advanced' : 'basic'}
+        numColumns={1}
+        {...props}
+        item={renderItem} // this takes two params (item, index)
+        ref={(ref: { refresh: () => void }) => (this.ulv = ref)}
+      />
+    );
+  }
+}
+
+export default ListView;

components/list-view/index.zh-CN.md

@@ -0,0 +1,39 @@
+---
+category: Components
+type: Data Display
+title: List
+subtitle: 列表
+---
+
+单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。
+
+当你需要一个 infinite scroll 列表时，请使用 [ListView](https://mobile.ant.design/components/list-view/)。
+
+### 规则
+- 一般由主要信息、主要操作、次要信息、次要操作组成。
+- 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。
+
+## API
+
+### List
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| renderHeader       | list heder  | (): void |  无  |
+| renderFooter       | list footer  | (): void |  无  |
+
+### List.Item
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| thumb       | 缩略图(当为 string 类型时作为 img src)  | String/React.Element |  无  |
+| extra      | 右边内容        | String/React.Element |  无  |
+| arrow      | 箭头方向(右,上,下), 可选`horizontal`,`up`,`down`,`empty`，如果是`empty`则存在对应的dom,但是不显示   | String |   无  |
+| align    |  子元素垂直对齐，可选`top`,`middle`,`bottom`  | String   | `middle` |
+| onPress    | 点击事件的回调函数 | (): void |  无  |
+| multipleLine    | 多行 | Boolean  | `false`  |
+| wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |
+
+### List.Item.Brief
+
+辅助说明