Fixed asterix bold and italics and added pre-commit hooks

Author: Luke Brandon Farrell

README.md

@@ -20,13 +20,15 @@ The `<SmartText />` component contains a number of abilities:
 
 1. Emoji 😄🥶🤯 it uses [node-emoji](https://www.npmjs.com/package/node-emoji) under the hood
 2. Markdown support for *italics* and **bold**
-3. Nested text support e.g. `<SmartText size={12} color='black'>My nested <SmartText bold>test!</SmartText>` where parent props will be inherited by children.
+3. Nested text support e.g. `<SmartText size={12} color='black'>My nested <SmartText bold>test!</SmartText>`  where parent props will be inherited by children.
 
 ## Light Text
 
 The `<LightText />` componnet takes all the same props as `<SmartText />` but has no abilities! This component can be used
 to enjoy all the benefits of easy styling and positioning without any of the extra code or processing which comes with `<SmartText />`.
 
+- You can also nest `LightText` in a `SmartText`: `<SmartText size={12} color='black'>My nested <LightText bold>test!</LightText>`
+
 ## Props
 
 | Prop                | Type          | Optional  |                                                               

lib/SmartText.js

@@ -25,13 +25,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 /* NPM - Node Package Manage */
-import React from 'react';
-import { Text as RNText } from 'react-native';
-import PropTypes from 'prop-types';
-import _map from 'lodash.map';
 import _get from 'lodash.get';
 import _isString from 'lodash.isstring';
+import _map from 'lodash.map';
+import _flatten from 'lodash.flatten';
 import Emoji from 'node-emoji';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Text as RNText } from 'react-native';
+/** Components */
+import LightText from './LightText';
 var SmartText = function (_a) {
     var items = _a.children, size = _a.size, color = _a.color, bold = _a.bold, italic = _a.italic, underline = _a.underline, strikethrough = _a.strikethrough, align = _a.align, lineHeight = _a.lineHeight, family = _a.family, opacity = _a.opacity, style = _a.style, _b = _a.m, m = _b === void 0 ? 0 : _b, _c = _a.mh, mh = _c === void 0 ? 0 : _c, _d = _a.mv, mv = _d === void 0 ? 0 : _d, _e = _a.mt, mt = _e === void 0 ? 0 : _e, _f = _a.mb, mb = _f === void 0 ? 0 : _f, _g = _a.ml, ml = _g === void 0 ? 0 : _g, _h = _a.mr, mr = _h === void 0 ? 0 : _h, _j = _a.p, p = _j === void 0 ? 0 : _j, _k = _a.ph, ph = _k === void 0 ? 0 : _k, _l = _a.pv, pv = _l === void 0 ? 0 : _l, _m = _a.pt, pt = _m === void 0 ? 0 : _m, _o = _a.pb, pb = _o === void 0 ? 0 : _o, _p = _a.pl, pl = _p === void 0 ? 0 : _p, _q = _a.pr, pr = _q === void 0 ? 0 : _q, props = __rest(_a, ["children", "size", "color", "bold", "italic", "underline", "strikethrough", "align", "lineHeight", "family", "opacity", "style", "m", "mh", "mv", "mt", "mb", "ml", "mr", "p", "ph", "pv", "pt", "pb", "pl", "pr"]);
     var smartChildren = items;
@@ -40,11 +43,7 @@ var SmartText = function (_a) {
      *
      * *italics* and **bold** supported
      */
-    // TODO : This currently breaks nesting text components
-    //   smartChildren = mapChildrenToTransformer(
-    //     smartChildren,
-    //     parseAsteriskInMarkdownString
-    //   );
+    smartChildren = mapChildrenToTransformer(smartChildren, parseAsteriskInMarkdownString);
     /**
      * Maps children to <SmartText /> or <span /> components
      */
@@ -91,12 +90,12 @@ var SmartText = function (_a) {
         if (_isString(children)) {
             return transform(children);
         }
-        return _map(children, function (child, index) {
+        return _flatten(_map(children, function (child, index) {
             if (_isString(child)) {
                 return transform(child, index);
             }
             return child;
-        });
+        }));
     }
     /**
      * Maps children and copies props from parent SmartText to any children
@@ -119,7 +118,7 @@ var SmartText = function (_a) {
         }
         return _map(children, function (child, index) {
             var type = _get(child, 'type', null);
-            if (type === SmartText || type === 'span') {
+            if (type === SmartText || type === LightText) {
                 var ownProps = _get(child, 'props', null);
                 var children_1 = _get(ownProps, 'children', null);
                 return (React.createElement(SmartText, __assign({ key: index, size: size, color: color, bold: bold, italic: italic, underline: underline, strikethrough: strikethrough, align: align, lineHeight: lineHeight, family: family }, props, ownProps), children_1));
@@ -140,15 +139,15 @@ var SmartText = function (_a) {
         // We use (S^t) as a matching pattern as it is a unlikely occurance in any text
         markdown = markdown.replace(/\*{2}(.*?)\*{2}/g, function (match, p1) { return "=S^tS^t" + p1 + "S^tS^t="; });
         markdown = markdown.replace(/\*{1}(.*?)\*{1}/g, function (match, p1) { return "=S^t" + p1 + "S^t="; });
-        return markdown.split(/=/g).map(function (item) {
+        return markdown.split(/=/g).map(function (item, index) {
             var text = item.replace(/(S\^t)/g, '');
             // **Double** asterisk is bold
             if (/(S\^t){2}(.*?)(S\^t){2}/.test(item)) {
-                return React.createElement("span", { bold: true }, text);
+                return (React.createElement(LightText, { key: index, bold: true }, text));
                 // **single** asterisk is italic
             }
             else if (/(S\^t){1}(.*?)(S\^t){1}/.test(item)) {
-                return React.createElement("span", { italic: true }, text);
+                return (React.createElement(LightText, { key: index, italic: true }, text));
             }
             return text;
         });