@dhis2/analytics 999.9.9-loadflash-alpha.1 → 999.9.9-outlier-table.alpha.2

package/build/es/components/PeriodDimension/PeriodTransfer.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { getNowInCalendar } from '@dhis2/multi-calendar-dates';
-import { TabBar, Tab, Transfer } from '@dhis2/ui';
+import { IconInfo16, TabBar, Tab, Transfer } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import PeriodIcon from '../../assets/DimensionItemIcons/PeriodIcon.js'; //TODO: Reimplement the icon.js
@@ -14,15 +14,35 @@ import RelativePeriodFilter from './RelativePeriodFilter.js';
 import { getFixedPeriodsOptionsById } from './utils/fixedPeriods.js';
 import { MONTHLY, QUARTERLY } from './utils/index.js';
 import { getRelativePeriodsOptionsById } from './utils/relativePeriods.js';
-const PeriodTransfer = _ref => {
+const RightHeader = _ref => {
+  let {
+    infoText
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: `jsx-${styles.__hash}` + " " + "rightHeader"
+  }, i18n.t('Selected Periods')), infoText && /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}` + " " + "info-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${styles.__hash}`
+  }, /*#__PURE__*/React.createElement(IconInfo16, null)), /*#__PURE__*/React.createElement("span", {
+    className: `jsx-${styles.__hash}` + " " + "info-text"
+  }, infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+RightHeader.propTypes = {
+  infoText: PropTypes.string
+};
+const PeriodTransfer = _ref2 => {
   let {
     onSelect,
     dataTest,
-    initialSelectedPeriods,
+    selectedItems,
     rightFooter,
     excludedPeriodTypes,
-    periodsSettings
-  } = _ref;
+    periodsSettings,
+    infoBoxMessage
+  } = _ref2;
   const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY) ? getRelativePeriodsOptionsById(QUARTERLY) : getRelativePeriodsOptionsById(MONTHLY);
   const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY, periodsSettings) : getFixedPeriodsOptionsById(MONTHLY, periodsSettings);
   const now = getNowInCalendar(periodsSettings.calendar);
@@ -35,7 +55,6 @@ const PeriodTransfer = _ref => {
     reversePeriods: false
   });
   const [allPeriods, setAllPeriods] = useState(defaultRelativePeriodType.getPeriods());
-  const [selectedPeriods, setSelectedPeriods] = useState(initialSelectedPeriods);
   const [isRelative, setIsRelative] = useState(true);
   const [relativeFilter, setRelativeFilter] = useState({
     periodType: defaultRelativePeriodType.id
@@ -44,6 +63,10 @@ const PeriodTransfer = _ref => {
     periodType: defaultFixedPeriodType.id,
     year: defaultFixedPeriodYear.toString()
   });
+  const isActive = value => {
+    const item = selectedItems.find(item => item.id === value);
+    return !item || item.isActive;
+  };
   const onIsRelativeClick = state => {
     if (state !== isRelative) {
       setIsRelative(state);
@@ -90,11 +113,6 @@ const PeriodTransfer = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
-  const renderRightHeader = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: `jsx-${styles.__hash}` + " " + "rightHeader"
-  }, i18n.t('Selected Periods')), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: styles.__hash
-  }, styles));
   const onSelectFixedPeriods = filter => {
     setFixedFilter(filter);
     setAllPeriods(getFixedPeriodsOptionsById(filter.periodType, periodsSettings).getPeriods(fixedPeriodConfig(Number(filter.year)), periodsSettings));
@@ -105,45 +123,54 @@ const PeriodTransfer = _ref => {
     id: styles.__hash
   }, styles));
   return /*#__PURE__*/React.createElement(Transfer, {
-    onChange: _ref2 => {
+    onChange: _ref3 => {
       let {
         selected
-      } = _ref2;
-      const formattedItems = selected.map(id => ({
-        id,
-        name: [...allPeriods, ...selectedPeriods].find(item => item.id === id).name
-      }));
-      setSelectedPeriods(formattedItems);
+      } = _ref3;
+      const formattedItems = selected.map(id => {
+        const matchingItem = [...allPeriods, ...selectedItems].find(item => item.id === id);
+        return {
+          id,
+          name: matchingItem.name,
+          isActive: matchingItem.isActive
+        };
+      });
       onSelect(formattedItems);
     },
-    selected: selectedPeriods.map(period => period.id),
+    selected: selectedItems.map(period => period.id),
     leftHeader: renderLeftHeader(),
     enableOrderChange: true,
     height: TRANSFER_HEIGHT,
     optionsWidth: TRANSFER_OPTIONS_WIDTH,
     selectedWidth: TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: renderEmptySelection(),
-    rightHeader: renderRightHeader(),
+    rightHeader: /*#__PURE__*/React.createElement(RightHeader, {
+      infoText: infoBoxMessage
+    }),
     rightFooter: rightFooter,
-    options: [...allPeriods, ...selectedPeriods].map(_ref3 => {
+    options: [...allPeriods, ...selectedItems].map(_ref4 => {
       let {
         id,
         name
-      } = _ref3;
+      } = _ref4;
       return {
         label: name,
         value: id
       };
     }),
-    renderOption: props => /*#__PURE__*/React.createElement(TransferOption, _extends({}, props, {
+    renderOption: props => /*#__PURE__*/React.createElement(TransferOption
+    /* eslint-disable react/prop-types */, _extends({}, props, {
+      active: isActive(props.value),
       icon: PeriodIcon,
       dataTest: `${dataTest}-transfer-option`
+      /* eslint-enable react/prop-types */
     })),
+
     dataTest: `${dataTest}-transfer`
   });
 };
 PeriodTransfer.defaultProps = {
-  initialSelectedPeriods: [],
+  selectedItems: [],
   excludedPeriodTypes: [],
   periodsSettings: {
     calendar: 'gregory',
@@ -154,14 +181,16 @@ PeriodTransfer.propTypes = {
   onSelect: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
-  initialSelectedPeriods: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string
-  })),
+  infoBoxMessage: PropTypes.string,
   periodsSettings: PropTypes.shape({
     calendar: PropTypes.string,
     locale: PropTypes.string
   }),
-  rightFooter: PropTypes.node
+  rightFooter: PropTypes.node,
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    isActive: PropTypes.bool,
+    name: PropTypes.string
+  }))
 };
 export default PeriodTransfer;

package/build/es/components/PeriodDimension/__tests__/__snapshots__/PeriodDimension.spec.js.snap

@@ -4,7 +4,6 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
 <PeriodTransfer
   dataTest="period-dimension"
   excludedPeriodTypes={Array []}
-  initialSelectedPeriods={Array []}
   onSelect={[Function]}
   periodsSettings={
     Object {
@@ -13,5 +12,6 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
     }
   }
   rightFooter={<React.Fragment />}
+  selectedItems={Array []}
 />
 `;

package/build/es/components/PeriodDimension/__tests__/__snapshots__/PeriodSelector.spec.js.snap

@@ -77,18 +77,7 @@ exports[`The Period Selector component matches the snapshot 1`] = `
   optionsWidth="420px"
   renderOption={[Function]}
   rightFooter={<React.Fragment />}
-  rightHeader={
-    <React.Fragment>
-      <p
-        className="rightHeader"
-      >
-        Selected Periods
-      </p>
-      <style>
-        
-      </style>
-    </React.Fragment>
-  }
+  rightHeader={<RightHeader />}
   selected={Array []}
   selectedEmptyComponent={
     <React.Fragment>

package/build/es/components/RichText/Editor.bk/Editor.js

@@ -0,0 +1,30 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import convertCtrlKey from './convertCtrlKey.js';
+class Editor extends Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "onKeyDown", event => {
+      convertCtrlKey(event, this.props.onEdit);
+    });
+  }
+  render() {
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      onKeyDown: this.onKeyDown
+    }, children);
+  }
+}
+Editor.defaultProps = {
+  onEdit: null
+};
+Editor.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  onEdit: PropTypes.func
+};
+export default Editor;

package/build/es/components/RichText/Editor.bk/__tests__/Editor.spec.js

@@ -0,0 +1,26 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import convertCtrlKey from '../convertCtrlKey.js';
+import Editor from '../Editor.js';
+jest.mock('../convertCtrlKey');
+describe('RichText: Editor component', () => {
+  let richTextEditor;
+  const componentProps = {
+    onEdit: jest.fn()
+  };
+  beforeEach(() => {
+    convertCtrlKey.mockClear();
+  });
+  const renderComponent = props => {
+    return shallow( /*#__PURE__*/React.createElement(Editor, props, /*#__PURE__*/React.createElement("input", null)));
+  };
+  it('renders a result', () => {
+    richTextEditor = renderComponent(componentProps);
+    expect(richTextEditor).toHaveLength(1);
+  });
+  it('calls convertCtrlKey on keydown', () => {
+    richTextEditor = renderComponent(componentProps);
+    richTextEditor.simulate('keyDown');
+    expect(convertCtrlKey).toHaveBeenCalled();
+  });
+});

package/build/es/components/RichText/Editor.bk/__tests__/convertCtrlKey.spec.js

@@ -0,0 +1,202 @@
+import convertCtrlKey from '../convertCtrlKey.js';
+describe('convertCtrlKey', () => {
+  it('does not trigger callback if no ctrl key', () => {
+    const cb = jest.fn();
+    const e = {
+      key: 'j',
+      preventDefault: () => {}
+    };
+    convertCtrlKey(e, cb);
+    expect(cb).not.toHaveBeenCalled();
+  });
+  describe('when ctrl key + "b" pressed', () => {
+    it('triggers callback with open/close markers and caret pos in between', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        ctrlKey: true,
+        target: {
+          selectionStart: 0,
+          selectionEnd: 0,
+          value: 'rainbow dash'
+        },
+        preventDefault: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('** rainbow dash', 1);
+    });
+    it('triggers callback with open/close markers and caret pos in between (end of text)', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        ctrlKey: true,
+        target: {
+          selectionStart: 22,
+          selectionEnd: 22,
+          value: 'rainbow dash is purple'
+        },
+        preventDefault: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('rainbow dash is purple **', 24);
+    });
+    it('triggers callback with open/close markers mid-text with surrounding spaces (1)', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        metaKey: true,
+        target: {
+          selectionStart: 4,
+          // caret located just before "quick"
+          selectionEnd: 4,
+          value: 'the quick brown fox'
+        },
+        preventDefault: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('the ** quick brown fox', 5);
+    });
+    it('triggers callback with open/close markers mid-text with surrounding spaces (2)', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        metaKey: true,
+        target: {
+          selectionStart: 3,
+          // caret located just after "the"
+          selectionEnd: 3,
+          value: 'the quick brown fox'
+        },
+        preventDefault: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('the ** quick brown fox', 5);
+    });
+    it('triggers callback with correct double markers and padding', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        metaKey: true,
+        target: {
+          selectionStart: 9,
+          // between the underscores
+          selectionEnd: 9,
+          value: 'rainbow __'
+        },
+        preventDefault: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('rainbow _**_', 10);
+    });
+    describe('selected text', () => {
+      it('triggers callback with open/close markers around text and caret pos after closing marker', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 5,
+            // "ow da" is selected
+            selectionEnd: 10,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        convertCtrlKey(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainb *ow da* sh is purple', 13);
+      });
+      it('triggers callback with open/close markers around text when starting at beginning of line', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 0,
+            // "rainbow" is selected
+            selectionEnd: 7,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        convertCtrlKey(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('*rainbow* dash is purple', 9);
+      });
+      it('triggers callback with open/close markers around text when ending at end of line', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 16,
+            // "purple" is selected
+            selectionEnd: 22,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        convertCtrlKey(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainbow dash is *purple*', 24);
+      });
+      it('triggers callback with open/close markers around word', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 8,
+            // "dash" is selected
+            selectionEnd: 12,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        convertCtrlKey(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainbow *dash* is purple', 14);
+      });
+      it('triggers callback with leading/trailing spaces trimmed from selection', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 8,
+            // " dash " is selected (note leading and trailing space)
+            selectionEnd: 13,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        convertCtrlKey(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainbow *dash* is purple', 14);
+      });
+    });
+  });
+  describe('when ctrl key + "i" pressed', () => {
+    it('triggers callback with open/close italics markers and caret pos in between', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'i',
+        ctrlKey: true,
+        target: {
+          selectionStart: 0,
+          selectionEnd: 0,
+          value: ''
+        },
+        preventDefault: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('__', 1);
+    });
+  });
+});

package/build/es/components/RichText/Editor.bk/convertCtrlKey.js

@@ -0,0 +1,80 @@
+const state = {
+  boldMode: false,
+  italicMode: false,
+  element: null
+};
+const markerMap = {
+  italic: '_',
+  bold: '*'
+};
+const trim = str => {
+  const leftSpaces = /^\s+/;
+  const rightSpaces = /\s+$/;
+  return str.replace(leftSpaces, '').replace(rightSpaces, '');
+};
+const toggleMode = mode => {
+  const prop = `${mode}Mode`;
+  state[prop] = !state[prop];
+};
+const insertMarkers = (mode, cb) => {
+  const {
+    selectionStart: start,
+    selectionEnd: end,
+    value
+  } = state.element;
+  const marker = markerMap[mode] || null;
+  if (!marker || !cb || start < 0) {
+    return;
+  }
+  toggleMode(mode);
+  let newValue;
+  let caretPos = end + 1;
+  const padMarkers = text => {
+    // is caret between two markers (i.e., "**" or "__")? Then do not add padding
+    if (start === end && value.length && start > 0) {
+      if (value[start - 1] === markerMap.bold && value[start] === markerMap.bold || value[start - 1] === markerMap.italic && value[start] === markerMap.italic) {
+        return text;
+      }
+    }
+    if (value.length && start > 0 && value[start - 1] !== ' ') {
+      text = ` ${text}`;
+      ++caretPos;
+    }
+    if (value.length && end !== value.length && value[end] !== ' ') {
+      text = `${text} `;
+    }
+    return text;
+  };
+  if (start === end) {
+    //no text
+    const valueArr = value.split('');
+    valueArr.splice(start, 0, padMarkers(`${marker}${marker}`));
+    newValue = valueArr.join('');
+  } else {
+    const text = value.slice(start, end);
+    const trimmedText = trim(text);
+
+    // adjust caretPos based on trimmed text selection
+    caretPos = caretPos - (text.length - trimmedText.length) + 1;
+    newValue = [value.slice(0, start), padMarkers(`${marker}${trimmedText}${marker}`), value.slice(end)].join('');
+    toggleMode(mode);
+  }
+  cb(newValue, caretPos);
+};
+const convertCtrlKey = (event, cb) => {
+  const {
+    key,
+    ctrlKey,
+    metaKey
+  } = event;
+  const element = event.target;
+  state.element = element;
+  if (key === 'b' && (ctrlKey || metaKey)) {
+    event.preventDefault();
+    insertMarkers('bold', cb);
+  } else if (key === 'i' && (ctrlKey || metaKey)) {
+    event.preventDefault();
+    insertMarkers('italic', cb);
+  }
+};
+export default convertCtrlKey;

package/build/es/components/RichText/Parser.bk/MdParser.js

@@ -0,0 +1,99 @@
+import MarkdownIt from 'markdown-it';
+const emojiDb = {
+  ':-)': '\u{1F642}',
+  ':)': '\u{1F642}',
+  ':-(': '\u{1F641}',
+  ':(': '\u{1F641}',
+  ':+1': '\u{1F44D}',
+  ':-1': '\u{1F44E}'
+};
+const codes = {
+  bold: {
+    name: 'bold',
+    char: '*',
+    domEl: 'strong',
+    encodedChar: 0x2a,
+    // see https://regex101.com/r/evswdV/8 for explanation of regexp
+    regexString: '\\B\\*((?!\\s)[^*]+(?:\\b|[^*\\s]))\\*\\B',
+    contentFn: val => val
+  },
+  italic: {
+    name: 'italic',
+    char: '_',
+    domEl: 'em',
+    encodedChar: 0x5f,
+    // see https://regex101.com/r/p6LpjK/6 for explanation of regexp
+    regexString: '\\b_((?!\\s)[^_]+(?:\\B|[^_\\s]))_\\b',
+    contentFn: val => val
+  },
+  emoji: {
+    name: 'emoji',
+    char: ':',
+    domEl: 'span',
+    encodedChar: 0x3a,
+    regexString: '^(:-\\)|:\\)|:\\(|:-\\(|:\\+1|:-1)',
+    contentFn: val => emojiDb[val]
+  }
+};
+let md;
+let linksInText;
+const markerIsInLinkText = pos => linksInText.some(link => pos >= link.index && pos <= link.lastIndex);
+const parse = code => (state, silent) => {
+  if (silent) {
+    return false;
+  }
+  const start = state.pos;
+
+  // skip parsing emphasis if marker is within a link
+  if (markerIsInLinkText(start)) {
+    return false;
+  }
+  const marker = state.src.charCodeAt(start);
+
+  // marker character: "_", "*", ":"
+  if (marker !== codes[code].encodedChar) {
+    return false;
+  }
+  const MARKER_REGEX = new RegExp(codes[code].regexString);
+  const token = state.src.slice(start);
+  if (MARKER_REGEX.test(token)) {
+    const markerMatch = token.match(MARKER_REGEX);
+
+    // skip parsing sections where the marker is not at the start of the token
+    if (markerMatch.index !== 0) {
+      return false;
+    }
+    const text = markerMatch[1];
+    state.push(`${codes[code].domEl}_open`, codes[code].domEl, 1);
+    const t = state.push('text', '', 0);
+    t.content = codes[code].contentFn(text);
+    state.push(`${codes.bold.domEl}_close`, codes[code].domEl, -1);
+    state.pos += markerMatch[0].length;
+    return true;
+  }
+  return false;
+};
+class MdParser {
+  constructor() {
+    // disable all rules, enable autolink for URLs and email addresses
+    md = new MarkdownIt('zero', {
+      linkify: true
+    });
+
+    // *bold* -> <strong>bold</strong>
+    md.inline.ruler.push('strong', parse(codes.bold.name));
+
+    // _italic_ -> <em>italic</em>
+    md.inline.ruler.push('italic', parse(codes.italic.name));
+
+    // :-) :) :-( :( :+1 :-1 -> <span>[unicode]</span>
+    md.inline.ruler.push('emoji', parse(codes.emoji.name));
+    md.enable(['link', 'linkify', 'strong', 'italic', 'emoji']);
+    return this;
+  }
+  render(text) {
+    linksInText = md.linkify.match(text) || [];
+    return md.renderInline(text);
+  }
+}
+export default MdParser;

package/build/es/components/RichText/Parser.bk/Parser.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import MdParserClass from './MdParser.js';
+const Parser = _ref => {
+  let {
+    children,
+    style
+  } = _ref;
+  const MdParser = useMemo(() => new MdParserClass(), []);
+  return children ? /*#__PURE__*/React.createElement("p", {
+    style: style,
+    dangerouslySetInnerHTML: {
+      __html: MdParser.render(children)
+    }
+  }) : null;
+};
+Parser.defaultProps = {
+  style: null
+};
+Parser.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  style: PropTypes.object
+};
+export default Parser;