updates to library, customisable toolbar

Author: export-mike

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "extends": ["airbnb", "prettier", "prettier/flowtype", "prettier/react"],
+  "parser": "babel-eslint",
+  "rules": {
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
+    "global-require": "off",
+    "no-console": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "no-underscore-dangle": "off",
+    "prefer-promise-reject-errors": "off",
+    "no-nested-ternary": "off",
+    "react/no-multi-comp": "off",
+    "import/newline-after-import": "off",
+    "spaced-comment": "off",
+    "react/prefer-stateless-function": "off",
+    "react/prop-types": "off",
+    "import/first": "off",
+    "class-methods-use-this": "off",
+    "prefer-destructuring": "off",
+    "consistent-return": "off",
+    "import/prefer-default-export": "off",
+    "react/no-unescaped-entities": "off",
+    "react/sort-comp": "off",
+    "import/no-named-as-default":"off",
+    "react/forbid-prop-types": "off"
+  },
+  "globals": {
+    "fetch": true
+  }
+}

example/__tests__/App.js

@@ -16,11 +16,15 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore metro
+.*/node_modules/metro/.*
+
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow/
+node_modules/react-native/flow-github/
 
 [options]
 emoji=true
@@ -31,18 +35,20 @@ munge_underscores=true
 
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
-suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
-unsafe.enable_getters_and_setters=true
-
 [version]
-^0.57.0
+^0.67.0

example/android/.project

@@ -51,3 +51,6 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle

example/android/.settings/org.eclipse.buildship.core.prefs

@@ -1,12 +1,26 @@
 import React, { Component } from 'react';
 import {
     StyleSheet,
-    Text,
     View,
     Platform
 } from 'react-native';
-import {RichTextEditor, RichTextToolbar} from 'react-native-zss-rich-text-editor';
+import {Editor, ToolBar, ToolBarStyled} from 'react-native-zss-rich-text-editor';
 import KeyboardSpacer from 'react-native-keyboard-spacer';
+// import CustomToolBar from './CustomToolBar';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: '#ffffff',
+    paddingTop: 40
+  },
+  richText: {
+    alignItems:'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+});
 
 export default class RichTextExample extends Component {
 
@@ -16,24 +30,6 @@ export default class RichTextExample extends Component {
     this.setFocusHandlers = this.setFocusHandlers.bind(this);
   }
 
-  render() {
-    return (
-        <View style={styles.container}>
-          <RichTextEditor
-              ref={(r)=>this.richtext = r}
-              style={styles.richText}
-              initialTitleHTML={'Title!!'}
-              initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
-              editorInitializedCallback={() => this.onEditorInitialized()}
-          />
-          <RichTextToolbar
-            getEditor={() => this.richtext}
-          />
-          {Platform.OS === 'ios' && <KeyboardSpacer/>}
-        </View>
-    );
-  }
-
   onEditorInitialized() {
     this.setFocusHandlers();
     this.getHTML();
@@ -42,7 +38,7 @@ export default class RichTextExample extends Component {
   async getHTML() {
     const titleHtml = await this.richtext.getTitleHtml();
     const contentHtml = await this.richtext.getContentHtml();
-    //alert(titleHtml + ' ' + contentHtml)
+    // alert(titleHtml + ' ' + contentHtml) //eslint-disable-line
   }
 
   setFocusHandlers() {
@@ -53,19 +49,22 @@ export default class RichTextExample extends Component {
       //alert('content focus');
     });
   }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: '#ffffff',
-    paddingTop: 40
-  },
-  richText: {
-    alignItems:'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-});
 
+  render() {
+    return (
+        <View style={styles.container}>
+          <Editor
+              ref={(r)=>{ this.richtext = r}}
+              style={styles.richText}
+              initialTitleHTML="Title!!"
+              initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
+              editorInitializedCallback={() => this.onEditorInitialized()}
+          />
+          <ToolBar getEditor={() => this.richtext}>
+            {props => <ToolBarStyled {...props}/>}
+          </ToolBar>
+          {Platform.OS === 'ios' && <KeyboardSpacer/>}
+        </View>
+    );
+  }
+}

example/android/app/.classpath

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import * as ZSSEditor from 'react-native-zss-rich-text-editor'
+export const Wrapper = styled.ScrollView`
+	max-height: 50;
+	background: ${({bg}) => bg};
+`;
+
+const ActionWrapper = styled.TouchableOpacity`
+	height: 50;
+	width: 50;
+	justify-content: center;
+	background: ${({selected, selectedColor, bg}) => selected ? selectedColor : bg};
+`
+
+const DEFAULT_ICONS = {
+	[ZSSEditor.actions.insertImage]: require('./img/icon_format_media.png'),
+	[ZSSEditor.actions.setBold]: require('./img/icon_format_bold.png'),
+	[ZSSEditor.actions.setItalic]: require('./img/icon_format_italic.png'),
+	[ZSSEditor.actions.insertBulletsList]: require('./img/icon_format_ul.png'),
+	[ZSSEditor.actions.insertOrderedList]: require('./img/icon_format_ol.png'),
+	[ZSSEditor.actions.insertLink]: require('./img/icon_format_link.png'),
+};
+
+const Image = styled.Image``;
+
+
+const Action = ({onPress, action, icons, bg, selected, selectedColor}) =>
+	<ActionWrapper onPress={() => onPress(action)} bg={bg} selected={selected} selectedColor={selectedColor}>
+		{icons[action] && <Image source={icons[action]} style={{tintColor: 'white'}}/>}
+	</ActionWrapper>
+
+
+const DefaultToolbar = ({onPressAction, actions, bg, selectedColor, icons}) =>
+<Wrapper
+	contentContainerStyle={{
+		alignItems: 'center',
+		flexDirection: 'row',
+	}}
+	horizontal
+	bg={bg}>
+{actions.map(action =>
+	<Action
+		onPress={onPressAction}
+		key={action.action}
+		action={action.action}
+		selected={action.selected}
+		selectedColor={selectedColor}
+		bg={bg}
+		icons={icons}
+	/>)}
+</Wrapper>
+
+
+DefaultToolbar.defaultProps = {
+	bg: '#D3D3D3',
+	selectedColor: 'red',
+	selectedIconColor: 'green',
+	icons: DEFAULT_ICONS,
+}
+
+export default DefaultToolbar;

example/android/app/.project

@@ -45,12 +45,12 @@ android_library(
 
 android_build_config(
     name = "build_config",
-    package = "com.example",
+    package = "com.exampleapp",
 )
 
 android_resource(
     name = "res",
-    package = "com.example",
+    package = "com.exampleapp",
     res = "src/main/res",
 )
 

example/android/app/.settings/org.eclipse.buildship.core.prefs

@@ -98,7 +98,7 @@ android {
     buildToolsVersion "23.0.1"
 
     defaultConfig {
-        applicationId "com.example"
+        applicationId "com.exampleapp"
         minSdkVersion 16
         targetSdkVersion 22
         versionCode 1
@@ -140,14 +140,13 @@ dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
-    compile project(':react-native-webview-bridge')
 }
 
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-  from configurations.compile
-  into 'libs'
+    from configurations.compile
+    into 'libs'
 }
 
 project.afterEvaluate {