translate practical-projects doc and ListView, ref ant-design#329

lixiaoyang1992 · Apr 26, 2018 · a7cda9d · a7cda9d
1 parent 8b5d92f
commit a7cda9d
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 182 deletions.
diff --git a/components/list-view/demo/basic-body.md b/components/list-view/demo/basic-body.md
@@ -5,7 +5,7 @@ title:
   en-US: 'use `<body>`  container'
 ---
 
-使用 html 的 `body` 作为滚动容器
+use html `body` as a scroll container.
 
 ````jsx
 /* eslint no-dupe-keys: 0 */
@@ -19,12 +19,12 @@ const data = [
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
-    title: '麦当劳邀您过周末',
+    title: 'McDonald\'s invites you',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
-    title: '食惠周',
+    title: 'Eat the week',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
 ];
@@ -117,7 +117,7 @@ class Demo extends React.Component {
             <img style={{ height: '1.28rem', marginRight: '0.3rem' }} src={obj.img} />
             <div className="row-text">
               <div style={{ marginBottom: '0.16rem', fontWeight: 'bold' }}>{obj.des}</div>
-              <div><span style={{ fontSize: '0.6rem', color: '#FF6E27' }}>{rowID}</span>元/任务</div>
+              <div><span style={{ fontSize: '0.6rem', color: '#FF6E27' }}>{rowID}</span>¥</div>
             </div>
           </div>
         </div>
@@ -128,7 +128,7 @@ class Demo extends React.Component {
         dataSource={this.state.dataSource}
         renderHeader={() => <span>header</span>}
         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
-          {this.state.isLoading ? '加载中...' : '加载完毕'}
+          {this.state.isLoading ? 'Loading...' : 'Loaded'}
         </div>}
         renderRow={row}
         renderSeparator={separator}

diff --git a/components/list-view/demo/basic-row.tsx b/components/list-view/demo/basic-row.tsx
@@ -12,12 +12,12 @@ const data = [
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
-    title: '麦当劳邀您过周末',
+    title: 'McDonald\'s invites you',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
-    title: '食惠周',
+    title: 'Eat the week',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
 ];
@@ -100,19 +100,19 @@ export default class BasicRowDemo extends React.Component<any, any> {
                 <View>
                   <Text>{obj.des} - {rowID}</Text>
                   <Text>{this.props.highlightRow}</Text>
-                  <Text><Text style={[{ fontSize: 24, color: '#FF6E27' }]}>35</Text>元/任务</Text>
+                  <Text><Text style={[{ fontSize: 24, color: '#FF6E27' }]}>35</Text>¥</Text>
                 </View>
               </View>
             </View>
           </TouchableHighlight>
         </View>
       );
     };
-    const loadingTxt = this.state.isLoading ? '加载中...' : '加载完毕';
+    const loadingTxt = this.state.isLoading ? 'Loading...' : 'Loaded';
     return (
       <ListView
         dataSource={this.state.dataSource}
-        renderHeader={() => <Text style={[{ padding: 8 }]}>列表头</Text>}
+        renderHeader={() => <Text style={[{ padding: 8 }]}>header</Text>}
         renderFooter={() => <Text style={{ padding: 30, textAlign: 'center' }}> {loadingTxt} </Text>}
         renderRow={row}
         renderSeparator={separator}

diff --git a/components/list-view/demo/basic-sticky.md b/components/list-view/demo/basic-sticky.md
@@ -2,10 +2,10 @@
 order: 2
 title:
   zh-CN: '标题吸顶（body 容器)'
-  en-US: 'Title positon top (use `<body>`  container)'
+  en-US: 'Title positon top (use `<body>` container)'
 ---
 
-区块标题 “吸顶”(sticky) 功能示例
+sticky block header to the top of the page
 
 ````jsx
 /* eslint no-dupe-keys: 0 */
@@ -19,12 +19,12 @@ const data = [
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
-    title: '麦当劳邀您过周末',
+    title: 'McDonald\'s invites you',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
-    title: '食惠周',
+    title: 'Eat the week',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
 ];
@@ -137,7 +137,7 @@ class Demo extends React.Component {
             <img style={{ height: '1.28rem', marginRight: '0.3rem' }} src={obj.img} />
             <div className="row-text">
               <div style={{ marginBottom: '0.16rem', fontWeight: 'bold' }}>{obj.des}</div>
-              <div><span style={{ fontSize: '0.6rem', color: '#FF6E27' }}>35</span>元/任务</div>
+              <div><span style={{ fontSize: '0.6rem', color: '#FF6E27' }}>35</span>¥</div>
             </div>
           </div>
         </div>
@@ -149,10 +149,10 @@ class Demo extends React.Component {
         dataSource={this.state.dataSource}
         renderHeader={() => <span>header</span>}
         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
-          {this.state.isLoading ? '加载中...' : '加载完毕'}
+          {this.state.isLoading ? 'Loading...' : 'Loaded'}
         </div>}
         renderSectionHeader={sectionData => (
-          <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
+          <div>{`Task ${sectionData.split(' ')[1]}`}</div>
         )}
         renderRow={row}
         renderSeparator={separator}
@@ -166,7 +166,7 @@ class Demo extends React.Component {
         stickyProps={{
           stickyStyle: { zIndex: 999, WebkitTransform: 'none', transform: 'none' },
           // topOffset: -43,
-          // isActive: false, // 关闭 sticky 效果
+          // isActive: false,
         }}
         stickyContainerProps={{
           className: 'for-stickyContainer-demo',

diff --git a/components/list-view/demo/basic.md b/components/list-view/demo/basic.md
@@ -5,9 +5,7 @@ title:
   en-US: 'Custom container'
 ---
 
-> 注意：需要设置 ListView 的 style 的 `height`/`overflow`，以此作为滚动容器。
-
-> 同时建议设置`body`的`overflow: hidden`
+> Note: you need set `height`/`overflow` style.
 
 ````jsx
 /* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
@@ -31,12 +29,12 @@ const data = [
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
-    title: '麦当劳邀您过周末',
+    title: 'McDonald\'s invites you',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
-    title: '食惠周',
+    title: 'Eat the week',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
 ];
@@ -149,7 +147,7 @@ class Demo extends React.Component {
             <img style={{ height: '1.28rem', marginRight: '0.3rem' }} src={obj.img} />
             <div className="row-text">
               <div style={{ marginBottom: '0.16rem', fontWeight: 'bold' }}>{obj.des}</div>
-              <div><span style={{ fontSize: '0.6rem', color: '#FF6E27' }}>35</span>元/任务</div>
+              <div><span style={{ fontSize: '0.6rem', color: '#FF6E27' }}>35</span>¥</div>
             </div>
           </div>
         </div>
@@ -161,10 +159,10 @@ class Demo extends React.Component {
         dataSource={this.state.dataSource}
         renderHeader={() => <span>header</span>}
         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
-          {this.state.isLoading ? '加载中...' : '加载完毕'}
+          {this.state.isLoading ? 'Loading...' : 'Loaded'}
         </div>}
         renderSectionHeader={sectionData => (
-          <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
+          <div>{`Task ${sectionData.split(' ')[1]}`}</div>
         )}
         renderBodyComponent={() => <MyBody />}
         renderRow={row}

diff --git a/components/list-view/demo/basic.tsx b/components/list-view/demo/basic.tsx
@@ -11,12 +11,12 @@ const data = [
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
-    title: '麦当劳邀您过周末',
+    title: 'McDonald\'s invites you',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
   {
     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
-    title: '食惠周',
+    title: 'Eat the week',
     des: '不是所有的兼职汪都需要风吹日晒',
   },
 ];
@@ -83,7 +83,7 @@ export default class BasicDemo extends React.Component<any, any> {
   renderSectionHeader = (sectionData) => {
     return (
       <Text style={[{ padding: 10, backgroundColor: 'rgba(255,255,255,0.8)' }]}>
-        {`任务 ${sectionData.split(' ')[1]}`}
+        {`Task ${sectionData.split(' ')[1]}`}
       </Text>
     );
   }
@@ -124,18 +124,18 @@ export default class BasicDemo extends React.Component<any, any> {
               <View>
                 <Text>{obj.des} - {rowID}</Text>
                 <Text>{this.props.highlightRow}</Text>
-                <Text><Text style={[{ fontSize: 24, color: '#FF6E27' }]}>35</Text>元/任务</Text>
+                <Text><Text style={[{ fontSize: 24, color: '#FF6E27' }]}>35</Text>¥</Text>
               </View>
             </View>
           </View>
         </TouchableHighlight>
       </View>);
     };
-    const loadingTxt = this.state.isLoading ? '加载中...' : '加载完毕';
+    const loadingTxt = this.state.isLoading ? 'Loading...' : 'Loaded';
     return (
       <ListView
         dataSource={this.state.dataSource}
-        renderHeader={() => <Text style={[{ padding: 8 }]}>列表头</Text>}
+        renderHeader={() => <Text style={[{ padding: 8 }]}>header</Text>}
         renderFooter={() => <Text style={[{ padding: 30, textAlign: 'center' }]}> {loadingTxt} </Text>}
         renderSectionHeader={this.renderSectionHeader}
         renderRow={row}

diff --git a/components/list-view/demo/idxed-sticky.md b/components/list-view/demo/idxed-sticky.md
@@ -5,7 +5,7 @@ title:
   en-US: 'Index List (Title position top)'
 ---
 
-用于通讯薄等场景 “吸顶”(sticky)
+sticky index List
 
 
 ````jsx
@@ -66,16 +66,16 @@ class Demo extends React.Component {
       <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
         <SearchBar
           value={this.state.inputValue}
-          placeholder="搜索"
+          placeholder="Search"
           onChange={this.onSearch}
           onClear={() => { console.log('onClear'); }}
           onCancel={() => { console.log('onCancel'); }}
         />
       </div>
       <ListView.IndexedList
         dataSource={this.state.dataSource}
-        renderHeader={() => <span>头部内容请自定义</span>}
-        renderFooter={() => <span>尾部内容请自定义</span>}
+        renderHeader={() => <span>custom header</span>}
+        renderFooter={() => <span>custom footer</span>}
         renderSectionHeader={sectionData => (<div className="ih">{sectionData}</div>)}
         renderRow={rowData => (<Item>{rowData}</Item>)}
         className="am-list"
@@ -87,7 +87,7 @@ class Demo extends React.Component {
           top: 85,
         }}
         delayTime={10}
-        delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
+        delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>rendering...</div>}
       />
     </div>);
   }

diff --git a/components/list-view/demo/idxed.md b/components/list-view/demo/idxed.md
@@ -5,7 +5,7 @@ title:
   en-US: 'Index List'
 ---
 
-用于通讯薄等场景
+Index List
 
 
 ````jsx
@@ -51,8 +51,8 @@ class Demo extends React.Component {
     return (
       <ListView.IndexedList
         dataSource={this.state.dataSource}
-        renderHeader={() => <span>头部内容请自定义</span>}
-        renderFooter={() => <span>尾部内容请自定义</span>}
+        renderHeader={() => <span>custom header</span>}
+        renderFooter={() => <span>custom footer</span>}
         renderSectionHeader={sectionData => (<div className="ih">{sectionData}</div>)}
         renderRow={rowData => (<Item>{rowData}</Item>)}
         className="fortest"
@@ -65,7 +65,7 @@ class Demo extends React.Component {
           top: 20,
         }}
         delayTime={10}
-        delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
+        delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>rendering...</div>}
       />
     );
   }