doc: update examples

yanglinlong6 · Dec 11, 2018 · 2437eca · 2437eca
1 parent cd4dfe2
commit 2437eca
Show file tree

Hide file tree

Showing 47 changed files with 808 additions and 72 deletions.
diff --git a/components/accordion/index.tsx b/components/accordion/index.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import RNAccordion, { AccordionProps } from 'react-native-collapsible/Accordion';

diff --git a/components/action-sheet/AndroidContainer.tsx b/components/action-sheet/AndroidContainer.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { ActionSheetIOSOptions, Text, TouchableHighlight, View } from 'react-native';
 import Modal from '../modal/ModalView';

diff --git a/components/badge/demo/basic.tsx b/components/badge/demo/basic.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 /* tslint:disable:no-console */
 import React from 'react';
 import { ScrollView, View } from 'react-native';

diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
@@ -9,7 +9,7 @@ title:
 
 ````jsx
 /* tslint:disable:no-unused-variable */
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { Button, WhiteSpace, WingBlank } from '@ant-design/react-native';
 

diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx
@@ -1,5 +1,5 @@
 /* tslint:disable:no-unused-variable */
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { Button, WhiteSpace, WingBlank } from '../../';
 

diff --git a/components/card/CardHeader.tsx b/components/card/CardHeader.tsx
@@ -1,4 +1,4 @@
-/* tslint:disable:jsx-no-multiline-js */
+
 import React from 'react';
 import { Image, ImageStyle, StyleProp, Text, View, ViewStyle } from 'react-native';
 import { WithTheme, WithThemeStyles } from '../style';

diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
@@ -7,6 +7,80 @@ title:
 
 [Demo Source Code](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/checkbox/demo/basic.tsx)
 
-````jsx
-// todos: include('./basic.tsx')
-````
+```jsx
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Checkbox, List, WhiteSpace } from '@ant-design/react-native';
+const AgreeItem = Checkbox.AgreeItem;
+const CheckboxItem = Checkbox.CheckboxItem;
+export default class BasicCheckboxExample extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      checkBox1: true,
+      agreeItem1: true,
+      checkboxItem1: true,
+    };
+  }
+  render() {
+    return (
+      <View>
+        <View style={{ padding: 10 }}>
+          <Checkbox
+            checked={this.state.checkBox1}
+            style={{ color: '#f00' }}
+            onChange={event => {
+              this.setState({ checkBox1: event.target.checked });
+            }}
+          />
+          <WhiteSpace />
+          <Checkbox>Checkbox</Checkbox>
+          <WhiteSpace />
+          <Checkbox checked disabled />
+          <WhiteSpace />
+          <Checkbox disabled />
+        </View>
+
+        <WhiteSpace />
+        <AgreeItem>
+          Agree agreement agreement agreement agreement agreement agreement
+          agreement
+        </AgreeItem>
+        <WhiteSpace />
+        <AgreeItem
+          checked={this.state.agreeItem1}
+          checkboxStyle={{ color: '#f00' }}
+          onChange={event => {
+            this.setState({ agreeItem1: event.target.checked });
+          }}
+        >
+          Agree agreement
+        </AgreeItem>
+        <WhiteSpace />
+        <AgreeItem disabled>Not selected. Not editable</AgreeItem>
+        <WhiteSpace />
+        <AgreeItem checked disabled>
+          Force selected. Not editable
+        </AgreeItem>
+
+        <List style={{ marginTop: 12 }}>
+          <Text style={{ marginTop: 12 }}>Multiple options</Text>
+          <CheckboxItem
+            checked={this.state.checkboxItem1}
+            onChange={event => {
+              this.setState({ checkboxItem1: event.target.checked });
+            }}
+          >
+            Option 1
+          </CheckboxItem>
+          <CheckboxItem>Option 2</CheckboxItem>
+          <CheckboxItem disabled>Option 3</CheckboxItem>
+          <CheckboxItem disabled checked>
+            Option 4
+          </CheckboxItem>
+        </List>
+      </View>
+    );
+  }
+}
+```
diff --git a/components/checkbox/demo/basic.tsx b/components/checkbox/demo/basic.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { Text, View } from 'react-native';
 import { Checkbox, List, WhiteSpace } from '../../';

diff --git a/components/date-picker-view/demo/basic.md b/components/date-picker-view/demo/basic.md
@@ -7,6 +7,41 @@ title:
 
 [Demo Source Code](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/date-picker-view/demo/basic.tsx)
 
-````jsx
-// todos: include('./basic.tsx')
-````
+```jsx
+import React from 'react';
+import { Text, View } from 'react-native';
+import { DatePickerView } from '@ant-design/react-native';
+export default class DatePickerViewExample extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      value: undefined,
+    };
+    this.onChange = value => {
+      console.log(value);
+      this.setState({ value });
+    };
+    this.onValueChange = (...args) => {
+      console.log(args);
+    };
+  }
+  render() {
+    return (
+      <View>
+        <Text style={{ margin: 16 }}>Start DateTime</Text>
+        <DatePickerView
+          value={this.state.value}
+          onChange={this.onChange}
+          onValueChange={this.onValueChange}
+        />
+        <Text style={{ margin: 16 }}>End DateTime</Text>
+        <DatePickerView
+          value={this.state.value}
+          onChange={this.onChange}
+          onValueChange={this.onValueChange}
+        />
+      </View>
+    );
+  }
+}
+```
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
@@ -7,6 +7,38 @@ title:
 
 [Demo Source Code](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/date-picker/demo/basic.tsx)
 
-````jsx
-// todos: include('./basic.tsx')
-````
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { DatePicker, List } from '@ant-design/react-native';
+// const now = new Date();
+export default class PopupExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = value => {
+      this.setState({ value });
+    };
+    this.state = {
+      value: undefined,
+    };
+  }
+  render() {
+    return (
+      <View>
+        <List>
+          <DatePicker
+            value={this.state.value}
+            mode="date"
+            minDate={new Date(2015, 7, 6)}
+            maxDate={new Date(2026, 11, 3)}
+            onChange={this.onChange}
+            format="YYYY-MM-DD"
+          >
+            <List.Item arrow="horizontal">Select Date</List.Item>
+          </DatePicker>
+        </List>
+      </View>
+    );
+  }
+}
+```
diff --git a/components/date-picker/demo/basic.tsx b/components/date-picker/demo/basic.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 /* tslint:disable:no-console */
 import React from 'react';
 import { View } from 'react-native';

diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
@@ -1,4 +1,4 @@
-/* tslint:disable:jsx-no-multiline-js */
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import RCDatePicker from 'rmc-date-picker/lib/DatePicker';

diff --git a/components/drawer/demo/basic.md b/components/drawer/demo/basic.md
@@ -7,6 +7,87 @@ title:
 
 [Demo Source Code](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/drawer/demo/basic.tsx)
 
-````jsx
-// todos: include('./basic.tsx')
-````
+```jsx
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Button, Drawer, List, WhiteSpace } from '@ant-design/react-native';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+export default class DrawerExample extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.onOpenChange = isOpen => {
+      /* tslint:disable: no-console */
+      console.log('是否打开了 Drawer', isOpen.toString());
+    };
+  }
+  render() {
+    const itemArr = Array.apply(null, Array(20))
+      .map(function(_, i) {
+        return i;
+      })
+      .map((_i, index) => {
+        if (index === 0) {
+          return (
+            <List.Item
+              key={index}
+              thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              multipleLine
+            >
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <Text>Categories - {index}</Text>
+                <Button
+                  type="primary"
+                  size="small"
+                  onPress={() => this.drawer.closeDrawer()}
+                >
+                  close drawer
+                </Button>
+              </View>
+            </List.Item>
+          );
+        }
+        return (
+          <List.Item
+            key={index}
+            thumb="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+          >
+            <Text>Categories - {index}</Text>
+          </List.Item>
+        );
+      });
+    // Todo: https://github.com/DefinitelyTyped/DefinitelyTyped
+    const sidebar = (
+      <ScrollView style={[styles.container]}>
+        <List>{itemArr}</List>
+      </ScrollView>
+    );
+    return (
+      <Drawer
+        sidebar={sidebar}
+        position="left"
+        open={false}
+        drawerRef={el => (this.drawer = el)}
+        onOpenChange={this.onOpenChange}
+        drawerBackgroundColor="#ccc"
+      >
+        <View style={{ flex: 1, marginTop: 114, padding: 8 }}>
+          <Button onPress={() => this.drawer && this.drawer.openDrawer()}>
+            Open drawer
+          </Button>
+          <WhiteSpace />
+        </View>
+      </Drawer>
+    );
+  }
+}
+```
diff --git a/components/drawer/demo/basic.tsx b/components/drawer/demo/basic.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { Button, Drawer, List, WhiteSpace } from '../../';

diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -1,4 +1,4 @@
-/* tslint:disable:jsx-no-multiline-js */
+
 import React from 'react';
 import DrawerLayout from 'react-native-drawer-layout';
 import { DrawerProps } from './PropsType';

diff --git a/components/flex/demo/basic.md b/components/flex/demo/basic.md
@@ -9,7 +9,7 @@ name: Flex
 [Demo Source Code](https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/flex/demo/basic.tsx)
 
 ````jsx
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { ScrollView, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { Button, Flex, WhiteSpace, WingBlank } from '../../';

diff --git a/components/flex/demo/basic.tsx b/components/flex/demo/basic.tsx
@@ -1,4 +1,4 @@
-// tslint:disable:jsx-no-multiline-js
+
 import React from 'react';
 import { ScrollView, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { Button, Flex, WhiteSpace, WingBlank } from '../../';

diff --git a/components/grid/index.tsx b/components/grid/index.tsx
@@ -1,4 +1,4 @@
-/* tslint:disable:jsx-no-multiline-js */
+
 import React from 'react';
 import { Dimensions, Image, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Carousel, { CarouselProps } from '../carousel/index';