@bigbinary/neetoui-rn 0.0.63 → 0.0.64

package/lib/components/RichTextEditor.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:7}}),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText||"Type here...",ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:98,columnNumber:9}})),children),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({bottom:keyboardHeight},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:9}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:11}}))));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{}};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");

package/lib/hooks/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"useKeyboard",{enumerable:true,get:function get(){return _useKeyboard.useKeyboard;}});var _useKeyboard=require("./useKeyboard");

package/lib/hooks/useKeyboard.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useKeyboard=useKeyboard;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");function useKeyboard(){var _useState=(0,_react.useState)(0),_useState2=(0,_slicedToArray2.default)(_useState,2),keyboardHeight=_useState2[0],setKeyboardHeight=_useState2[1];function onKeyboardDidShow(e){setKeyboardHeight(e.endCoordinates.height);}function onKeyboardDidHide(){setKeyboardHeight(0);}(0,_react.useEffect)(function(){var keyboardDidShowListener=_reactNative.Keyboard.addListener("keyboardDidShow",onKeyboardDidShow);var keyboardDidHideListener=_reactNative.Keyboard.addListener("keyboardDidHide",onKeyboardDidHide);return function(){keyboardDidHideListener.remove();keyboardDidShowListener.remove();};},[]);return keyboardHeight;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -40,12 +40,14 @@
     ]
   },
   "peerDependencies": {
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "react-native-webview": "11.14.4"
   },
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal": "^13.0.0",
+    "react-native-pell-rich-editor": "^1.8.6",
     "react-native-remix-icon": "^0.3.0",
     "react-native-switch-toggle": "^2.2.1",
     "react-native-toast-message": "^2.1.0",
@@ -104,6 +106,7 @@
     "react-native-storybook-loader": "^2.0.4",
     "react-native-svg": "^12.1.1",
     "react-native-web": "^0.17.5",
+    "react-native-webview": "11.14.4",
     "react-test-renderer": "17.0.2",
     "serve": "^13.0.2",
     "url-loader": "^4.1.1",

package/src/components/RichTextEditor.js

@@ -0,0 +1,156 @@
+import React, { useRef, useState } from "react";
+import {
+  RichEditor,
+  RichToolbar,
+  actions,
+} from "react-native-pell-rich-editor";
+import PropTypes from "prop-types";
+import styled from "styled-components/native";
+import { space, flexbox, border, layout } from "styled-system";
+
+import { useKeyboard } from "@hooks";
+import { Container } from "@components";
+
+export const ScrollView = styled.ScrollView.attrs(() => ({
+  keyboardShouldPersistTaps: "handled",
+  showsVerticalScrollIndicator: true,
+  showsHorizontalScrollIndicator: false,
+  contentContainerStyle: { flexGrow: 1 },
+}))`
+  ${space}
+  ${flexbox}
+  ${border}
+  ${layout}
+`;
+
+/**
+ * RichTextEditor component is wrapper created around react-native-pell-rich-editor. This has dependency on react-native-webview, so make sure to add that as well.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, RichTextEditor } from "@components";
+ * import { theme } from "@theme";
+ *
+ * export default function Main() {
+ * const [message, setMessage] = React.useState('');
+ *
+ * const editorProps = {
+ *   initialContentHTML: "Rich Text Component...",
+ *   initialFocus: true,
+ *   editorStyle: {
+ *     color: theme.colors.font.grey,
+ *   },
+ * };
+ *
+ * return (
+ *   <Container flex={1}>
+ *     <RichTextEditor
+ *       onChange={setMessage}
+ *       toolbarActions={[
+ *         "keyboard",
+ *         "setBold",
+ *         "setItalic",
+ *         "insertBulletsList",
+ *         "insertOrderedList",
+ *         "setStrikethrough",
+ *         "setUnderline",
+ *         "undo",
+ *         "redo",
+ *       ]}
+ *       toolbarWrapperStyle={{bottom: 0}}
+ *       editorProps={editorProps}
+ *       toolBarProps={{}}
+ *     />
+ *   </Container>
+ *  );
+ * };
+ *
+ * ```
+ */
+
+export const RichTextEditor = ({
+  onChange,
+  placeholderText,
+  children,
+  toolbarActions,
+  editorProps,
+  toolBarProps,
+  ...rest
+}) => {
+  const richTextRef = useRef();
+  const keyboardHeight = useKeyboard();
+  const [toolbarVisible, setToolbar] = useState(true);
+  const showToolbar = keyboardHeight > 0 && toolbarVisible;
+
+  const computeToolbarActions = () => {
+    const actionItems = [];
+    toolbarActions?.map(actionItem => {
+      actionItems.push(actions[actionItem]);
+    });
+
+    return actionItems;
+  };
+
+  return (
+    <>
+      <ScrollView {...rest?.editorWrapperStyle}>
+        <RichEditor
+          placeholder={placeholderText || "Type here..."}
+          ref={richTextRef}
+          onChange={onChange}
+          useContainer={false}
+          onFocus={() => {
+            setToolbar(true);
+            editorProps?.onFocusFn();
+          }}
+          onBlur={() => {
+            setToolbar(false);
+            editorProps?.onBlurFn();
+          }}
+          {...editorProps}
+        />
+
+        {children}
+      </ScrollView>
+      {showToolbar && (
+        <Container bottom={keyboardHeight} {...rest?.toolbarWrapperStyle}>
+          <RichToolbar
+            editor={richTextRef}
+            actions={computeToolbarActions()}
+            {...toolBarProps}
+          />
+        </Container>
+      )}
+    </>
+  );
+};
+
+RichTextEditor.defaultProps = {
+  editorProps: {},
+  toolBarProps: {},
+};
+
+RichTextEditor.propTypes = {
+  /**
+   * Callback that is called when the text input's text changes.
+   */
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  /**
+   * Placeholder for the input.
+   */
+  placeholderText: PropTypes.string,
+  /**
+   * An array of actions to be provided by this toolbar. Check react-native-pell-rich-editor for list of supported actions.
+   */
+  toolbarActions: PropTypes.array.isRequired,
+  /**
+   * Object which can be used to pass other supported props by the Editor.
+   */
+  editorProps: PropTypes.object,
+  /**
+   * Object which can be used to pass other supported props by the RichToolbar.
+   */
+  toolBarProps: PropTypes.object,
+};

package/src/components/index.js

@@ -11,3 +11,4 @@ export { Alert } from "./Alert";
 export { BottomSheet } from "./BottomSheet";
 export { Chip } from "./Chip";
 export { ParentView } from "./ParentView";
+export { RichTextEditor } from "./RichTextEditor";

package/src/hooks/index.js

@@ -0,0 +1 @@
+export { useKeyboard } from "./useKeyboard";

package/src/hooks/useKeyboard.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+
+export function useKeyboard() {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  function onKeyboardDidShow(e) {
+    setKeyboardHeight(e.endCoordinates.height);
+  }
+
+  function onKeyboardDidHide() {
+    setKeyboardHeight(0);
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      "keyboardDidShow",
+      onKeyboardDidShow
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      "keyboardDidHide",
+      onKeyboardDidHide
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}