adding cleanup logic to avoid lingering event listeners

abanobmikaeel · Oct 3, 2023 · 6f6e0f3 · 6f6e0f3
1 parent b71ac04
commit 6f6e0f3
Show file tree

Hide file tree

Showing 7 changed files with 880 additions and 149 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,90 +1,27 @@
 import * as React from 'react';
 
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
-import CKEditor5 from 'react-native-ckeditor-custom';
+import { View } from 'react-native';
+import TaskList from './TaskList';
+import Ckeditor from './Ckeditor';
 
-export default function App() {
-  const initalData = `<p>Test</p>`;
-  const height = 200; // Example height in pixels
-  const maxHeight = 400; // Example max height in pixels, or set it to null if not needed
-  // const colors = {};
-  const fontFamily = 'Arial, sans-serif'; // Example font family
-  const toolbarBorderSize = '1px solid #ccc'; // Example toolbar border size and color
-  const editorFocusBorderSize = '2px solid #007bff'; // Example editor focus border size and color
-  const disableTooltips = false; // Set to true to disable tooltips, false otherwise
-  // const placeHolderText = 'Enter your text here'; // Example placeholder text
-  const editorConfig = {
-    // Additional editor configuration options if needed (provide an empty object or set to null if not needed)
-  };
-  const style = {
-    backgroundColor: 'black',
-    color: 'black',
-  };
-
-  const onChange = (e: any) => {
-    console.log('onChange', e);
-  };
-
-  const onError = (e: any) => {
-    console.log('onError', e);
-  };
-
-  const onFocus = (e: any) => {
-    console.log('onFocus', e);
-  };
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-  const onBlur = (e: any) => {
-    console.log('onBlur', e);
-  };
-
-  const onLoadEnd = (e: any) => {
-    console.log('onLoadEnd', e);
-  };
-
-  const renderError = () => {
-    return <Text>An error ocurred while rendering CKEDITOR5 editor</Text>;
-  };
+export default function App() {
+  const Stack = createNativeStackNavigator();
 
-  const renderLoading = () => {
-    return <ActivityIndicator></ActivityIndicator>;
-  };
   return (
-    <View style={styles.container}>
-      <CKEditor5
-        onChange={onChange}
-        onError={onError}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onLoadEnd={onLoadEnd}
-        renderError={renderError}
-        renderLoading={renderLoading}
-        initialData={initalData}
-        maxHeight={maxHeight}
-        editorConfig={editorConfig}
-        style={style}
-        disableTooltips={disableTooltips}
-        height={height}
-        androidHardwareAccelerationDisabled={false}
-        fontFamily={fontFamily}
-        colors={{}}
-        toolbarBorderSize={toolbarBorderSize}
-        editorFocusBorderSize={editorFocusBorderSize}
-        // placeHolderText={placeHolderText}
-      />
+    <View style={{ flex: 1, backgroundColor: '#222' }}>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="TaskList">
+          <Stack.Screen name="TaskList" component={TaskList} />
+          <Stack.Screen
+            name="CKEditor"
+            component={Ckeditor}
+            options={{ title: 'Oops' }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'black',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-});
diff --git a/example/src/Ckeditor.tsx b/example/src/Ckeditor.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import CKEditor5 from 'react-native-ckeditor-custom';
+
+export default function Ckeditor({ route }: any) {
+  const { initalData } = route.params;
+
+  // const initalData = `<p>Test</p>`;
+  const height = 200; // Example height in pixels
+  const maxHeight = 400; // Example max height in pixels, or set it to null if not needed
+  // const colors = {};
+  const fontFamily = 'Arial, sans-serif'; // Example font family
+  const toolbarBorderSize = '1px solid #ccc'; // Example toolbar border size and color
+  const editorFocusBorderSize = '2px solid #007bff'; // Example editor focus border size and color
+  const disableTooltips = false; // Set to true to disable tooltips, false otherwise
+  // const placeHolderText = 'Enter your text here'; // Example placeholder text
+  const editorConfig = {
+    // Additional editor configuration options if needed (provide an empty object or set to null if not needed)
+  };
+  const style = {
+    backgroundColor: 'black',
+    color: 'black',
+  };
+
+  const onChange = (e: any) => {
+    console.log('onChange', e);
+  };
+
+  const onError = (e: any) => {
+    console.log('onError', e);
+  };
+
+  const onFocus = (e: any) => {
+    console.log('onFocus', e);
+  };
+
+  const onBlur = (e: any) => {
+    console.log('onBlur', e);
+  };
+
+  const onLoadEnd = (e: any) => {
+    console.log('onLoadEnd', e);
+  };
+
+  const renderError = () => {
+    return <Text>An error ocurred while rendering CKEDITOR5 editor</Text>;
+  };
+
+  const renderLoading = () => {
+    return <ActivityIndicator></ActivityIndicator>;
+  };
+  console.log('here? ckeditor');
+
+  return (
+    <View style={styles.container}>
+      <CKEditor5
+        onChange={onChange}
+        onError={onError}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onLoadEnd={onLoadEnd}
+        renderError={renderError}
+        renderLoading={renderLoading}
+        initialData={initalData}
+        maxHeight={maxHeight}
+        editorConfig={editorConfig}
+        style={style}
+        disableTooltips={disableTooltips}
+        height={height}
+        androidHardwareAccelerationDisabled={false}
+        fontFamily={fontFamily}
+        colors={{}}
+        toolbarBorderSize={toolbarBorderSize}
+        editorFocusBorderSize={editorFocusBorderSize}
+        // placeHolderText={placeHolderText}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'black',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});
diff --git a/example/src/TaskList.tsx b/example/src/TaskList.tsx
@@ -0,0 +1,69 @@
+// import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  ScrollView,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+
+export default function TaskList({ navigation }: any) {
+  // const navigation = useNavigation<any>();
+
+  const data = [
+    { name: 'task 1', data: '<p>1-912345678</p>', key: 1 },
+    { name: 'task 2', data: '<p>2-912345678</p>', key: 2 },
+    { name: 'task 3', data: '<p>3-912345678</p>', key: 3 },
+    { name: 'task 4', data: '<p>4-912345678</p>', key: 4 },
+    { name: 'task 5', data: '<p>5-912345678</p>', key: 5 },
+  ];
+
+  const pressed = (name: any, data: any) => {
+    navigation.navigate('CKEditor', { name, initalData: data });
+  };
+  const ListItem = ({ name, data }: any) => {
+    console.log('here?', data);
+    return (
+      <View>
+        <TouchableOpacity onPress={() => pressed(name, data)}>
+          <Text style={styles.headerText}>{name}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <Text style={styles.headerText}>List</Text>
+      <ScrollView contentContainerStyle={styles.contentContainer}>
+        <View>
+          {data.map((item: any) => {
+            return (
+              <View key={item.key}>
+                <ListItem name={item.name} data={item.data} />
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'purple',
+    flex: 1,
+    width: 100,
+    height: 100,
+  },
+  contentContainer: {
+    paddingBottom: 200,
+  },
+  headerText: {
+    margin: 15,
+    color: 'white',
+    fontSize: 22,
+    fontWeight: '700',
+  },
+});