docs(components): add modal live examples

akveo · Nov 29, 2019 · fdfbcbe · fdfbcbe
1 parent 0759295
commit fdfbcbe
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 137 deletions.
diff --git a/docs/src/articles/guides/branding.md b/docs/src/articles/guides/branding.md
@@ -108,7 +108,7 @@ Texts color may also be affected by the backgrounds change. In our case, `disabl
 }
 ```
 
-That's it! Aquamarine theme is done. Let's reload the app to review the changes.
+That's it! Pure dark theme is done. Let's reload the app to review the changes.
 
 ![image](assets/images/articles/guides/branding-theme-preview.png)
 
@@ -173,6 +173,8 @@ const App = () => (
 export default App;
 ```
 
+<hr>
+
 ## Conclusion
 
 In this guide, you learned how to configure custom theme with Eva Design System. The complete list of available theme variables can be found in <a href="https://akveo.github.io/react-native-ui-kitten/docs/design-system/light-theme" target="_blank">Light Theme</a> and <a href="https://akveo.github.io/react-native-ui-kitten/docs/design-system/dark-theme" target="_blank">Dark Theme</a> docs.

diff --git a/docs/src/structure.ts b/docs/src/structure.ts
@@ -147,28 +147,6 @@ export const structure = [
           },
         ],
       },
-      {
-        type: 'page',
-        name: 'Customize Theme',
-        children: [
-          {
-            type: 'block',
-            block: 'markdown',
-            source: 'design-system/customize-theme.md',
-          },
-        ],
-      },
-      {
-        type: 'page',
-        name: 'Create Custom Theme',
-        children: [
-          {
-            type: 'block',
-            block: 'markdown',
-            source: 'design-system/custom-theme.md',
-          },
-        ],
-      },
       {
         type: 'page',
         name: 'Customize Mapping',

diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
@@ -47,8 +47,6 @@ export type ButtonGroupElement = React.ReactElement<ButtonGroupProps>;
  * Can be `filled` or `outline`.
  * Default is `filled`.
  *
- * @property ViewProps - Any props applied to View component.
- *
  * @property {ViewProps} ...ViewProps - Any props applied to View component.
  *
  * @overview-example ButtonGroupSimpleUsage

diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
@@ -63,119 +63,9 @@ export type ModalElement = React.ReactElement<ModalProps>;
  *
  * @property {ViewProps} ...ViewProps - Any props applied to View component.
  *
- * @overview-example Simple Usage
+ * @overview-example ModalSimpleUsage
  *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Button, Modal, Text, Layout } from 'react-native-ui-kitten';
- *
- * export class ModalShowcase extends React.Component {
- *
- *   state = {
- *     modalVisible: false,
- *   };
- *
- *   setModalVisible = () => {
- *     const modalVisible = !this.state.modalVisible;
- *     this.setState({ modalVisible });
- *   };
- *
- *   renderModalElement = () => {
- *     return (
- *       <Layout
- *         level='3'
- *         style={styles.modalContainer}>
- *         <Text>This is modal</Text>
- *         <Button onPress={this.setModalVisible}>Hide Modal</Button>
- *       </Layout>
- *     );
- *   };
- *
- *   render() {
- *     return (
- *       <Layout style={styles.container}>
- *         <Button onPress={this.setModalVisible}>Show Modal</Button>
- *         <Modal visible={this.state.modalVisible}>
- *           {this.renderModalElement()}
- *         </Modal>
- *       </Layout>
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   container: {
- *     flex: 1,
- *     padding: 16,
- *   },
- *   modalContainer: {
- *     width: 200,
- *     height: 200,
- *     justifyContent: 'center',
- *     alignItems: 'center',
- *   },
- * });
- * ```
- *
- * @overview-example With Backdrop
- *
- * ```
- * import React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Button, Modal, Text, Layout } from 'react-native-ui-kitten';
- *
- * export class ModalShowcase extends React.Component {
- *
- *   state = {
- *     modalVisible: false,
- *   };
- *
- *   setModalVisible = () => {
- *     const modalVisible: boolean = !this.state.modalVisible;
- *     this.setState({ modalVisible });
- *   };
- *
- *   renderModalElement = () => {
- *     return (
- *       <Layout
- *         level='3'
- *         style={styles.modalContainer}>
- *         <Text>This is modal</Text>
- *         <Button onPress={this.setModalVisible}>Hide Modal</Button>
- *       </Layout>
- *     );
- *   };
- *
- *   render() {
- *     return (
- *       <Layout style={styles.container}>
- *         <Button onPress={this.setModalVisible}>Show Modal</Button>
- *         <Modal
- *           allowBackdrop={true}
- *           backdropStyle={{ backgroundColor: 'black', opacity: 0.5 }}
- *           onBackdropPress={this.setModalVisible}
- *           visible={this.state.modalVisible}>
- *           {this.renderModalElement()}
- *         </Modal>
- *       </View>
- *     );
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   container: {
- *     flex: 1,
- *     padding: 16,
- *   },
- *   modalContainer: {
- *     width: 200,
- *     height: 200,
- *     justifyContent: 'center',
- *     alignItems: 'center',
- *   },
- * });
- * ```
+ * @overview-example ModalWithBackdrop
  */
 export class Modal extends React.Component<ModalProps> {
 

diff --git a/src/playground/src/components/showcases/modal/modalSimpleUsage.component.tsx b/src/playground/src/components/showcases/modal/modalSimpleUsage.component.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+  Modal,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const ModalSimpleUsageShowcase = () => {
+
+  const [visible, setVisible] = React.useState(false);
+
+  const toggleModal = () => {
+    setVisible(!visible);
+  };
+
+  const renderModalElement = () => (
+    <Layout
+      level='3'
+      style={styles.modalContainer}>
+      <Text>Hi! This is modal</Text>
+      <Button onPress={toggleModal}>
+        DISMISS
+      </Button>
+    </Layout>
+  );
+
+  return (
+    <Layout style={styles.container}>
+      <Button onPress={toggleModal}>
+        TOGGLE MODAL
+      </Button>
+      <Modal visible={visible}>
+        {renderModalElement()}
+      </Modal>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+    padding: 16,
+  },
+  modalContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 256,
+    padding: 16,
+  },
+});
diff --git a/src/playground/src/components/showcases/modal/modalWithBackdrop.component.tsx b/src/playground/src/components/showcases/modal/modalWithBackdrop.component.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Button,
+  Layout,
+  Modal,
+  Text,
+} from 'react-native-ui-kitten';
+
+export const ModalWithBackdropShowcase = () => {
+
+  const [visible, setVisible] = React.useState(false);
+
+  const toggleModal = () => {
+    setVisible(!visible);
+  };
+
+  const renderModalElement = () => (
+    <Layout
+      level='3'
+      style={styles.modalContainer}>
+      <Text>Hi! This is modal.</Text>
+    </Layout>
+  );
+
+  return (
+    <Layout style={styles.container}>
+      <Button onPress={toggleModal}>
+        TOGGLE MODAL
+      </Button>
+      <Modal
+        allowBackdrop={true}
+        backdropStyle={styles.backdrop}
+        onBackdropPress={toggleModal}
+        visible={visible}>
+        {renderModalElement()}
+      </Modal>
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 256,
+    padding: 16,
+  },
+  modalContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 256,
+    padding: 16,
+  },
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});