@plusscommunities/pluss-core-app 4.0.4-auth.0 → 6.0.0-auth.0

package/dist/module/components/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","View","Text","TouchableWithoutFeedback","Modal","_","connect","LINEGREY","TEXT_DARK","TEXT_LIGHT","getMainBrandingColourFromState","InlineButton","Popup","renderOptions","props","options","createElement","style","styles","bottom","map","option","index","key","onPress","action","color","textStyle","optionText","colourBrandingMain","bold","optionTextBold","text","renderTitle","title","renderContent","content","render","visible","transparent","animationType","onRequestClose","onClose","container","menu","containerStyle","top","children","position","left","right","backgroundColor","zIndex","paddingHorizontal","paddingVertical","justifyContent","alignItems","width","borderRadius","padding","fontFamily","fontSize","lineHeight","textAlign","marginBottom","borderTopColor","borderTopWidth","flexDirection","marginRight","mapStateToProps","state","popup"],"sources":["Popup.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, TouchableWithoutFeedback, Modal } from 'react-native';\nimport _ from 'lodash';\nimport { connect } from 'react-redux';\nimport { LINEGREY, TEXT_DARK, TEXT_LIGHT, getMainBrandingColourFromState } from '../colours';\nimport { InlineButton } from './InlineButton';\n\nclass Popup extends Component {\n  renderOptions() {\n    if (!this.props.options) {\n      return null;\n    }\n    return (\n      <View style={styles.bottom}>\n        {_.map(this.props.options, (option, index) => {\n          return (\n            <InlineButton\n              key={index}\n              onPress={option.action}\n              color=\"#fff\"\n              textStyle={[styles.optionText, { color: this.props.colourBrandingMain }, option.bold && styles.optionTextBold]}\n            >\n              {option.text}\n            </InlineButton>\n          );\n        })}\n      </View>\n    );\n  }\n\n  renderTitle() {\n    if (!this.props.title) {\n      return null;\n    }\n    return <Text style={[styles.title, { color: this.props.colourBrandingMain }]}>{this.props.title}</Text>;\n  }\n\n  renderContent() {\n    if (this.props.content) {\n      return this.props.content;\n    }\n    if (!this.props.text) {\n      return null;\n    }\n    return <Text style={styles.text}>{this.props.text}</Text>;\n  }\n\n  render() {\n    return (\n      <Modal visible transparent animationType=\"fade\" onRequestClose={this.props.onClose}>\n        <TouchableWithoutFeedback style={styles.container} onPress={this.props.onClose}>\n          <View style={styles.container}>\n            <View style={[styles.menu, this.props.containerStyle]}>\n              <View style={styles.top}>\n                {this.renderTitle()}\n                {this.renderContent()}\n                {this.props.children}\n              </View>\n              {this.renderOptions()}\n            </View>\n          </View>\n        </TouchableWithoutFeedback>\n      </Modal>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n    backgroundColor: 'rgba(0,0,0,0.5)',\n    zIndex: 1000,\n    paddingHorizontal: 16,\n    paddingVertical: 32,\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: '100%',\n  },\n  menu: {\n    backgroundColor: '#fff',\n    borderRadius: 12,\n  },\n  top: {\n    padding: 24,\n  },\n  title: {\n    fontFamily: 'sf-bold',\n    fontSize: 24,\n    lineHeight: 24,\n    color: TEXT_DARK,\n    textAlign: 'center',\n    marginBottom: 16,\n  },\n  text: {\n    fontFamily: 'sf-regular',\n    fontSize: 16,\n    lineHeight: 22,\n    color: TEXT_LIGHT,\n    textAlign: 'center',\n  },\n  bottom: {\n    borderTopColor: LINEGREY,\n    borderTopWidth: 1,\n    flexDirection: 'row-reverse',\n    padding: 8,\n  },\n  option: {\n    marginRight: 16,\n  },\n  optionText: {\n    fontFamily: 'sf-regular',\n    fontSize: 16,\n  },\n  optionTextBold: {\n    fontFamily: 'sf-semibold',\n  },\n};\n\nconst mapStateToProps = state => {\n  return {\n    colourBrandingMain: getMainBrandingColourFromState(state),\n  };\n};\n\nconst popup = connect(mapStateToProps, {})(Popup);\nexport { popup as Popup };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,IAAI,EAAEC,wBAAwB,EAAEC,KAAK,QAAQ,cAAc;AAC1E,OAAOC,CAAC,MAAM,QAAQ;AACtB,SAASC,OAAO,QAAQ,aAAa;AACrC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,8BAA8B,QAAQ,YAAY;AAC5F,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,MAAMC,KAAK,SAASZ,SAAS,CAAC;EAC5Ba,aAAaA,CAAA,EAAG;IACd,IAAI,CAAC,IAAI,CAACC,KAAK,CAACC,OAAO,EAAE;MACvB,OAAO,IAAI;IACb;IACA,oBACEhB,KAAA,CAAAiB,aAAA,CAACf,IAAI;MAACgB,KAAK,EAAEC,MAAM,CAACC;IAAO,GACxBd,CAAC,CAACe,GAAG,CAAC,IAAI,CAACN,KAAK,CAACC,OAAO,EAAE,CAACM,MAAM,EAAEC,KAAK,KAAK;MAC5C,oBACEvB,KAAA,CAAAiB,aAAA,CAACL,YAAY;QACXY,GAAG,EAAED,KAAM;QACXE,OAAO,EAAEH,MAAM,CAACI,MAAO;QACvBC,KAAK,EAAC,MAAM;QACZC,SAAS,EAAE,CAACT,MAAM,CAACU,UAAU,EAAE;UAAEF,KAAK,EAAE,IAAI,CAACZ,KAAK,CAACe;QAAmB,CAAC,EAAER,MAAM,CAACS,IAAI,IAAIZ,MAAM,CAACa,cAAc;MAAE,GAE9GV,MAAM,CAACW,IACI,CAAC;IAEnB,CAAC,CACG,CAAC;EAEX;EAEAC,WAAWA,CAAA,EAAG;IACZ,IAAI,CAAC,IAAI,CAACnB,KAAK,CAACoB,KAAK,EAAE;MACrB,OAAO,IAAI;IACb;IACA,oBAAOnC,KAAA,CAAAiB,aAAA,CAACd,IAAI;MAACe,KAAK,EAAE,CAACC,MAAM,CAACgB,KAAK,EAAE;QAAER,KAAK,EAAE,IAAI,CAACZ,KAAK,CAACe;MAAmB,CAAC;IAAE,GAAE,IAAI,CAACf,KAAK,CAACoB,KAAY,CAAC;EACzG;EAEAC,aAAaA,CAAA,EAAG;IACd,IAAI,IAAI,CAACrB,KAAK,CAACsB,OAAO,EAAE;MACtB,OAAO,IAAI,CAACtB,KAAK,CAACsB,OAAO;IAC3B;IACA,IAAI,CAAC,IAAI,CAACtB,KAAK,CAACkB,IAAI,EAAE;MACpB,OAAO,IAAI;IACb;IACA,oBAAOjC,KAAA,CAAAiB,aAAA,CAACd,IAAI;MAACe,KAAK,EAAEC,MAAM,CAACc;IAAK,GAAE,IAAI,CAAClB,KAAK,CAACkB,IAAW,CAAC;EAC3D;EAEAK,MAAMA,CAAA,EAAG;IACP,oBACEtC,KAAA,CAAAiB,aAAA,CAACZ,KAAK;MAACkC,OAAO;MAACC,WAAW;MAACC,aAAa,EAAC,MAAM;MAACC,cAAc,EAAE,IAAI,CAAC3B,KAAK,CAAC4B;IAAQ,gBACjF3C,KAAA,CAAAiB,aAAA,CAACb,wBAAwB;MAACc,KAAK,EAAEC,MAAM,CAACyB,SAAU;MAACnB,OAAO,EAAE,IAAI,CAACV,KAAK,CAAC4B;IAAQ,gBAC7E3C,KAAA,CAAAiB,aAAA,CAACf,IAAI;MAACgB,KAAK,EAAEC,MAAM,CAACyB;IAAU,gBAC5B5C,KAAA,CAAAiB,aAAA,CAACf,IAAI;MAACgB,KAAK,EAAE,CAACC,MAAM,CAAC0B,IAAI,EAAE,IAAI,CAAC9B,KAAK,CAAC+B,cAAc;IAAE,gBACpD9C,KAAA,CAAAiB,aAAA,CAACf,IAAI;MAACgB,KAAK,EAAEC,MAAM,CAAC4B;IAAI,GACrB,IAAI,CAACb,WAAW,CAAC,CAAC,EAClB,IAAI,CAACE,aAAa,CAAC,CAAC,EACpB,IAAI,CAACrB,KAAK,CAACiC,QACR,CAAC,EACN,IAAI,CAAClC,aAAa,CAAC,CAChB,CACF,CACkB,CACrB,CAAC;EAEZ;AACF;AAEA,MAAMK,MAAM,GAAG;EACbyB,SAAS,EAAE;IACTK,QAAQ,EAAE,UAAU;IACpB7B,MAAM,EAAE,CAAC;IACT8B,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRJ,GAAG,EAAE,CAAC;IACNK,eAAe,EAAE,iBAAiB;IAClCC,MAAM,EAAE,IAAI;IACZC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE;EACT,CAAC;EACDb,IAAI,EAAE;IACJO,eAAe,EAAE,MAAM;IACvBO,YAAY,EAAE;EAChB,CAAC;EACDZ,GAAG,EAAE;IACHa,OAAO,EAAE;EACX,CAAC;EACDzB,KAAK,EAAE;IACL0B,UAAU,EAAE,SAAS;IACrBC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdpC,KAAK,EAAElB,SAAS;IAChBuD,SAAS,EAAE,QAAQ;IACnBC,YAAY,EAAE;EAChB,CAAC;EACDhC,IAAI,EAAE;IACJ4B,UAAU,EAAE,YAAY;IACxBC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdpC,KAAK,EAAEjB,UAAU;IACjBsD,SAAS,EAAE;EACb,CAAC;EACD5C,MAAM,EAAE;IACN8C,cAAc,EAAE1D,QAAQ;IACxB2D,cAAc,EAAE,CAAC;IACjBC,aAAa,EAAE,aAAa;IAC5BR,OAAO,EAAE;EACX,CAAC;EACDtC,MAAM,EAAE;IACN+C,WAAW,EAAE;EACf,CAAC;EACDxC,UAAU,EAAE;IACVgC,UAAU,EAAE,YAAY;IACxBC,QAAQ,EAAE;EACZ,CAAC;EACD9B,cAAc,EAAE;IACd6B,UAAU,EAAE;EACd;AACF,CAAC;AAED,MAAMS,eAAe,GAAGC,KAAK,IAAI;EAC/B,OAAO;IACLzC,kBAAkB,EAAEnB,8BAA8B,CAAC4D,KAAK;EAC1D,CAAC;AACH,CAAC;AAED,MAAMC,KAAK,GAAGjE,OAAO,CAAC+D,eAAe,EAAE,CAAC,CAAC,CAAC,CAACzD,KAAK,CAAC;AACjD,SAAS2D,KAAK,IAAI3D,KAAK"}

package/dist/module/components/PopupMenu.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableWithoutFeedback, TouchableOpacity, Modal } from 'react-native';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { getMainBrandingColourFromState, LINEGREY, TEXT_DARK } from '../colours';
+class PopupMenu extends Component {
+  renderOption(item, index) {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      key: index,
+      onPress: item.onPress
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.option, index === 0 && styles.firstOption]
+    }, _.isEmpty(item.text) && item.content ? item.content : /*#__PURE__*/React.createElement(Text, {
+      style: styles.optionText
+    }, item.text)));
+  }
+  renderOptions() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.optionsContainer
+    }, _.map(this.props.options, (item, index) => {
+      return this.renderOption(item, index);
+    }));
+  }
+  renderTitle() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.titleContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.titleText
+    }, this.props.title));
+  }
+  renderCancel() {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.props.onClose
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.option, styles.cancelOption]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.optionText, styles.cancelText, {
+        color: this.props.colourBrandingMain
+      }]
+    }, this.props.cancelText)));
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(Modal, {
+      visible: true,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: this.props.onClose
+    }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+      style: styles.container,
+      onPress: this.props.onClose
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.menu
+    }, this.renderTitle(), this.renderOptions(), this.renderCancel()))));
+  }
+}
+const styles = {
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    zIndex: 1000
+  },
+  menu: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12
+  },
+  optionsContainer: {
+    paddingHorizontal: 16
+  },
+  option: {
+    paddingVertical: 16,
+    borderColor: LINEGREY,
+    borderTopWidth: 1
+  },
+  cancelOption: {
+    paddingHorizontal: 16
+  },
+  firstOption: {
+    borderTopWidth: 0
+  },
+  optionText: {
+    fontFamily: 'sf-regular',
+    fontSize: 16,
+    textAlign: 'center',
+    color: TEXT_DARK
+  },
+  cancelText: {
+    fontFamily: 'sf-medium'
+  },
+  titleContainer: {
+    padding: 16,
+    borderColor: LINEGREY,
+    borderBottomWidth: 1
+  },
+  titleText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    textAlign: 'center',
+    color: TEXT_DARK
+  }
+};
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state)
+  };
+};
+const popupMenu = connect(mapStateToProps, {})(PopupMenu);
+export { popupMenu as PopupMenu };
+//# sourceMappingURL=PopupMenu.js.map

package/dist/module/components/PopupMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","View","Text","TouchableWithoutFeedback","TouchableOpacity","Modal","connect","_","getMainBrandingColourFromState","LINEGREY","TEXT_DARK","PopupMenu","renderOption","item","index","createElement","key","onPress","style","styles","option","firstOption","isEmpty","text","content","optionText","renderOptions","optionsContainer","map","props","options","renderTitle","titleContainer","titleText","title","renderCancel","onClose","cancelOption","cancelText","color","colourBrandingMain","render","visible","transparent","animationType","onRequestClose","container","menu","position","bottom","left","right","top","backgroundColor","zIndex","borderTopLeftRadius","borderTopRightRadius","paddingHorizontal","paddingVertical","borderColor","borderTopWidth","fontFamily","fontSize","textAlign","padding","borderBottomWidth","mapStateToProps","state","popupMenu"],"sources":["PopupMenu.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Text, TouchableWithoutFeedback, TouchableOpacity, Modal } from 'react-native';\nimport { connect } from 'react-redux';\nimport _ from 'lodash';\nimport { getMainBrandingColourFromState, LINEGREY, TEXT_DARK } from '../colours';\n\nclass PopupMenu extends Component {\n  renderOption(item, index) {\n    return (\n      <TouchableOpacity key={index} onPress={item.onPress}>\n        <View style={[styles.option, index === 0 && styles.firstOption]}>\n          {_.isEmpty(item.text) && item.content ? item.content : <Text style={styles.optionText}>{item.text}</Text>}\n        </View>\n      </TouchableOpacity>\n    );\n  }\n\n  renderOptions() {\n    return (\n      <View style={styles.optionsContainer}>\n        {_.map(this.props.options, (item, index) => {\n          return this.renderOption(item, index);\n        })}\n      </View>\n    );\n  }\n\n  renderTitle() {\n    return (\n      <View style={styles.titleContainer}>\n        <Text style={styles.titleText}>{this.props.title}</Text>\n      </View>\n    );\n  }\n\n  renderCancel() {\n    return (\n      <TouchableOpacity onPress={this.props.onClose}>\n        <View style={[styles.option, styles.cancelOption]}>\n          <Text style={[styles.optionText, styles.cancelText, { color: this.props.colourBrandingMain }]}>{this.props.cancelText}</Text>\n        </View>\n      </TouchableOpacity>\n    );\n  }\n\n  render() {\n    return (\n      <Modal visible transparent animationType=\"slide\" onRequestClose={this.props.onClose}>\n        <TouchableWithoutFeedback style={styles.container} onPress={this.props.onClose}>\n          <View style={styles.container}>\n            <View style={styles.menu}>\n              {this.renderTitle()}\n              {this.renderOptions()}\n              {this.renderCancel()}\n            </View>\n          </View>\n        </TouchableWithoutFeedback>\n      </Modal>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n    backgroundColor: 'rgba(0,0,0,0.5)',\n    zIndex: 1000,\n  },\n  menu: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    backgroundColor: '#fff',\n    borderTopLeftRadius: 12,\n    borderTopRightRadius: 12,\n  },\n  optionsContainer: {\n    paddingHorizontal: 16,\n  },\n  option: {\n    paddingVertical: 16,\n    borderColor: LINEGREY,\n    borderTopWidth: 1,\n  },\n  cancelOption: {\n    paddingHorizontal: 16,\n  },\n  firstOption: {\n    borderTopWidth: 0,\n  },\n  optionText: {\n    fontFamily: 'sf-regular',\n    fontSize: 16,\n    textAlign: 'center',\n    color: TEXT_DARK,\n  },\n  cancelText: {\n    fontFamily: 'sf-medium',\n  },\n  titleContainer: {\n    padding: 16,\n    borderColor: LINEGREY,\n    borderBottomWidth: 1,\n  },\n  titleText: {\n    fontFamily: 'sf-semibold',\n    fontSize: 16,\n    textAlign: 'center',\n    color: TEXT_DARK,\n  },\n};\n\nconst mapStateToProps = state => {\n  return {\n    colourBrandingMain: getMainBrandingColourFromState(state),\n  };\n};\n\nconst popupMenu = connect(mapStateToProps, {})(PopupMenu);\nexport { popupMenu as PopupMenu };\n"],"mappings":"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"}

package/dist/module/components/PositionedImage.js

@@ -0,0 +1,313 @@
+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); }
+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 React, { Component } from 'react';
+import { View, Animated, PanResponder, Image, StyleSheet } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { BOXGREY, TEXT_LIGHT } from '../colours';
+class PositionedImage extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "calculateDimensions", () => {
+      Image.getSize(this.props.source.uri, (imageWidth, imageHeight) => {
+        // Default vertical positioning
+        const newWidth = this.props.width;
+        const newHeight = imageHeight * (this.props.width / imageWidth);
+        if (newHeight < this.props.height) {
+          // If vertical positioning isn't possible, enable horizontal positioning
+          this.setState({
+            imageWidth: imageWidth * (this.props.height / imageHeight),
+            imageHeight: this.props.height,
+            isVertical: false,
+            showGuide: this.props.onPositionEnd ? true : false
+          }, this.onDimensionAvailable);
+        } else {
+          this.setState({
+            imageWidth: newWidth,
+            imageHeight: newHeight,
+            isVertical: true,
+            showGuide: this.props.onPositionEnd ? true : false
+          }, this.onDimensionAvailable);
+        }
+      });
+    });
+    _defineProperty(this, "onDimensionAvailable", () => {
+      const {
+        offset
+      } = this.props;
+      const {
+        imageWidth,
+        imageHeight,
+        isVertical
+      } = this.state;
+      if (offset) {
+        // Apply percentage offset
+        const actual = {
+          x: offset.x * imageWidth,
+          y: offset.y * imageHeight
+        };
+        this.imagePosition.setValue(actual);
+      } else {
+        // Centered by default
+        this.imagePosition.setValue({
+          x: isVertical ? 0 : -0.5 * imageWidth + 0.5 * this.props.width,
+          y: isVertical ? -0.5 * imageHeight + 0.5 * this.props.height : 0
+        });
+      }
+      if (this.props.onPositionEnd) {
+        setTimeout(() => {
+          Animated.timing(this.state.animatedOpacity, {
+            toValue: 0,
+            duration: 900,
+            useNativeDriver: false
+          }).start(() => {
+            this.setState({
+              showGuide: false
+            });
+          });
+        }, 1000);
+      }
+    });
+    this.lastPos = {
+      x: 0,
+      y: 0
+    };
+    this.imagePosition = new Animated.ValueXY(this.lastPos);
+    this.imagePosition.addListener(value => {
+      this.lastPos = value;
+    });
+    const imagePanResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => {
+        this.startPos = this.lastPos;
+        if (this.props.onPositionEnd) {
+          if (this.props.onPositionStart) this.props.onPositionStart();
+          this.setState({
+            panning: true
+          });
+          return true;
+        }
+        return false;
+      },
+      onPanResponderMove: (event, gesture) => {
+        const newPos = this.state.isVertical ? {
+          x: 0,
+          y: this.startPos.y + gesture.dy
+        } : {
+          x: this.startPos.x + gesture.dx,
+          y: 0
+        };
+        this.imagePosition.setValue(newPos);
+      },
+      onPanResponderTerminationRequest: (event, gesture) => true,
+      onPanResponderRelease: (event, gesture) => {
+        let endPos = {
+          x: 0,
+          y: 0
+        };
+        if (this.state.isVertical) {
+          const endY = this.startPos.y + gesture.dy;
+          const limitY = this.props.height - this.state.imageHeight;
+          if (endY > 0) {
+            // console.log('top reached', endY);
+            endPos = {
+              x: 0,
+              y: 0
+            };
+          } else if (endY < limitY) {
+            // console.log('bottom reached', endY, limitY);
+            endPos = {
+              x: 0,
+              y: limitY
+            };
+          } else {
+            endPos = {
+              x: 0,
+              y: endY
+            };
+          }
+        } else {
+          const endX = this.startPos.x + gesture.dx;
+          const limitX = this.props.width - this.state.imageWidth;
+          if (endX > 0) {
+            // console.log('left reached', endX);
+            endPos = {
+              x: 0,
+              y: 0
+            };
+          } else if (endX < limitX) {
+            // console.log('right reached', endX, limitX);
+            endPos = {
+              x: limitX,
+              y: 0
+            };
+          } else {
+            endPos = {
+              x: endX,
+              y: 0
+            };
+          }
+        }
+        Animated.spring(this.imagePosition, {
+          toValue: endPos,
+          useNativeDriver: false
+        }).start();
+        if (this.props.onPositionEnd) this.props.onPositionEnd({
+          x: endPos.x / this.state.imageWidth,
+          y: endPos.y / this.state.imageHeight
+        });
+        this.setState({
+          panning: false
+        });
+      },
+      onPanResponderTerminate: (event, gesture) => {
+        this.setState({
+          panning: false
+        });
+      }
+    });
+    this.state = {
+      imageWidth: 0,
+      imageHeight: 0,
+      imagePanResponder,
+      isVertical: true,
+      showGuide: false,
+      animatedOpacity: new Animated.Value(1),
+      panning: false
+    };
+  }
+  componentDidMount() {
+    this.calculateDimensions();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.source.uri !== this.props.source.uri) {
+      // console.log('componentDidUpdate', prevProps.source.uri, this.props.source.uri);
+      this.calculateDimensions();
+    }
+  }
+  renderGrid() {
+    if (!this.state.panning) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.gridContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.gridHorizontal
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.gridVertical
+    }));
+  }
+  renderGuide() {
+    if (!this.state.showGuide) return null;
+    const {
+      animatedOpacity,
+      isVertical
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles.guideContainer, {
+        opacity: animatedOpacity
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.guideIconContainer, {
+        flexDirection: 'column'
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "arrow-up",
+      type: "font-awesome",
+      iconStyle: [styles.guideIcon, !isVertical && styles.guideIconDisabled]
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "arrow-down",
+      type: "font-awesome",
+      iconStyle: [styles.guideIcon, !isVertical && styles.guideIconDisabled]
+    })), /*#__PURE__*/React.createElement(View, {
+      style: [styles.guideIconContainer, {
+        flexDirection: 'row'
+      }]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "arrow-left",
+      type: "font-awesome",
+      iconStyle: [styles.guideIcon, isVertical && styles.guideIconDisabled]
+    }), /*#__PURE__*/React.createElement(Icon, {
+      name: "arrow-right",
+      type: "font-awesome",
+      iconStyle: [styles.guideIcon, isVertical && styles.guideIconDisabled]
+    })));
+  }
+  render() {
+    const {
+      imageWidth,
+      imageHeight,
+      imagePanResponder
+    } = this.state;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.container, {
+        width: this.props.width,
+        height: this.props.height
+      }, this.props.style]
+    }, /*#__PURE__*/React.createElement(Animated.Image, _extends({
+      source: this.props.source,
+      style: [{
+        width: imageWidth,
+        height: imageHeight
+      }, this.imagePosition.getLayout()]
+    }, imagePanResponder.panHandlers)), this.renderGrid(), this.renderGuide());
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: BOXGREY
+  },
+  guideContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#0006'
+  },
+  guideIconContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  guideIcon: {
+    color: '#fff',
+    fontSize: 50,
+    margin: 15
+  },
+  guideIconDisabled: {
+    color: TEXT_LIGHT
+  },
+  gridContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  gridHorizontal: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: '50%',
+    borderBottomWidth: 1,
+    borderBottomColor: BOXGREY
+  },
+  gridVertical: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '50%',
+    borderLeftWidth: 1,
+    borderLeftColor: BOXGREY
+  }
+});
+export default PositionedImage;
+//# sourceMappingURL=PositionedImage.js.map

package/dist/module/components/PositionedImage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","View","Animated","PanResponder","Image","StyleSheet","Icon","BOXGREY","TEXT_LIGHT","PositionedImage","constructor","props","_defineProperty","getSize","source","uri","imageWidth","imageHeight","newWidth","width","newHeight","height","setState","isVertical","showGuide","onPositionEnd","onDimensionAvailable","offset","state","actual","x","y","imagePosition","setValue","setTimeout","timing","animatedOpacity","toValue","duration","useNativeDriver","start","lastPos","ValueXY","addListener","value","imagePanResponder","create","onStartShouldSetPanResponder","startPos","onPositionStart","panning","onPanResponderMove","event","gesture","newPos","dy","dx","onPanResponderTerminationRequest","onPanResponderRelease","endPos","endY","limitY","endX","limitX","spring","onPanResponderTerminate","Value","componentDidMount","calculateDimensions","componentDidUpdate","prevProps","renderGrid","createElement","style","styles","gridContainer","gridHorizontal","gridVertical","renderGuide","guideContainer","opacity","guideIconContainer","flexDirection","name","type","iconStyle","guideIcon","guideIconDisabled","render","container","_extends","getLayout","panHandlers","overflow","backgroundColor","position","top","right","bottom","left","alignItems","justifyContent","color","fontSize","margin","borderBottomWidth","borderBottomColor","borderLeftWidth","borderLeftColor"],"sources":["PositionedImage.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, Animated, PanResponder, Image, StyleSheet } from 'react-native';\nimport { Icon } from 'react-native-elements';\nimport { BOXGREY, TEXT_LIGHT } from '../colours';\n\nclass PositionedImage extends Component {\n  constructor(props) {\n    super(props);\n\n    this.lastPos = { x: 0, y: 0 };\n    this.imagePosition = new Animated.ValueXY(this.lastPos);\n    this.imagePosition.addListener(value => {\n      this.lastPos = value;\n    });\n    const imagePanResponder = PanResponder.create({\n      onStartShouldSetPanResponder: () => {\n        this.startPos = this.lastPos;\n        if (this.props.onPositionEnd) {\n          if (this.props.onPositionStart) this.props.onPositionStart();\n          this.setState({ panning: true });\n          return true;\n        }\n        return false;\n      },\n      onPanResponderMove: (event, gesture) => {\n        const newPos = this.state.isVertical ? { x: 0, y: this.startPos.y + gesture.dy } : { x: this.startPos.x + gesture.dx, y: 0 };\n        this.imagePosition.setValue(newPos);\n      },\n      onPanResponderTerminationRequest: (event, gesture) => true,\n      onPanResponderRelease: (event, gesture) => {\n        let endPos = { x: 0, y: 0 };\n        if (this.state.isVertical) {\n          const endY = this.startPos.y + gesture.dy;\n          const limitY = this.props.height - this.state.imageHeight;\n          if (endY > 0) {\n            // console.log('top reached', endY);\n            endPos = { x: 0, y: 0 };\n          } else if (endY < limitY) {\n            // console.log('bottom reached', endY, limitY);\n            endPos = { x: 0, y: limitY };\n          } else {\n            endPos = { x: 0, y: endY };\n          }\n        } else {\n          const endX = this.startPos.x + gesture.dx;\n          const limitX = this.props.width - this.state.imageWidth;\n          if (endX > 0) {\n            // console.log('left reached', endX);\n            endPos = { x: 0, y: 0 };\n          } else if (endX < limitX) {\n            // console.log('right reached', endX, limitX);\n            endPos = { x: limitX, y: 0 };\n          } else {\n            endPos = { x: endX, y: 0 };\n          }\n        }\n        Animated.spring(this.imagePosition, { toValue: endPos, useNativeDriver: false }).start();\n\n        if (this.props.onPositionEnd)\n          this.props.onPositionEnd({\n            x: endPos.x / this.state.imageWidth,\n            y: endPos.y / this.state.imageHeight,\n          });\n\n        this.setState({ panning: false });\n      },\n      onPanResponderTerminate: (event, gesture) => {\n        this.setState({ panning: false });\n      },\n    });\n\n    this.state = {\n      imageWidth: 0,\n      imageHeight: 0,\n      imagePanResponder,\n      isVertical: true,\n      showGuide: false,\n      animatedOpacity: new Animated.Value(1),\n      panning: false,\n    };\n  }\n\n  componentDidMount() {\n    this.calculateDimensions();\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.source.uri !== this.props.source.uri) {\n      // console.log('componentDidUpdate', prevProps.source.uri, this.props.source.uri);\n      this.calculateDimensions();\n    }\n  }\n\n  calculateDimensions = () => {\n    Image.getSize(this.props.source.uri, (imageWidth, imageHeight) => {\n      // Default vertical positioning\n      const newWidth = this.props.width;\n      const newHeight = imageHeight * (this.props.width / imageWidth);\n\n      if (newHeight < this.props.height) {\n        // If vertical positioning isn't possible, enable horizontal positioning\n        this.setState(\n          {\n            imageWidth: imageWidth * (this.props.height / imageHeight),\n            imageHeight: this.props.height,\n            isVertical: false,\n            showGuide: this.props.onPositionEnd ? true : false,\n          },\n          this.onDimensionAvailable,\n        );\n      } else {\n        this.setState(\n          {\n            imageWidth: newWidth,\n            imageHeight: newHeight,\n            isVertical: true,\n            showGuide: this.props.onPositionEnd ? true : false,\n          },\n          this.onDimensionAvailable,\n        );\n      }\n    });\n  };\n\n  onDimensionAvailable = () => {\n    const { offset } = this.props;\n    const { imageWidth, imageHeight, isVertical } = this.state;\n\n    if (offset) {\n      // Apply percentage offset\n      const actual = {\n        x: offset.x * imageWidth,\n        y: offset.y * imageHeight,\n      };\n      this.imagePosition.setValue(actual);\n    } else {\n      // Centered by default\n      this.imagePosition.setValue({\n        x: isVertical ? 0 : -0.5 * imageWidth + 0.5 * this.props.width,\n        y: isVertical ? -0.5 * imageHeight + 0.5 * this.props.height : 0,\n      });\n    }\n\n    if (this.props.onPositionEnd) {\n      setTimeout(() => {\n        Animated.timing(this.state.animatedOpacity, {\n          toValue: 0,\n          duration: 900,\n          useNativeDriver: false,\n        }).start(() => {\n          this.setState({ showGuide: false });\n        });\n      }, 1000);\n    }\n  };\n\n  renderGrid() {\n    if (!this.state.panning) return null;\n    return (\n      <View style={styles.gridContainer}>\n        <View style={styles.gridHorizontal} />\n        <View style={styles.gridVertical} />\n      </View>\n    );\n  }\n\n  renderGuide() {\n    if (!this.state.showGuide) return null;\n    const { animatedOpacity, isVertical } = this.state;\n    return (\n      <Animated.View style={[styles.guideContainer, { opacity: animatedOpacity }]}>\n        <View style={[styles.guideIconContainer, { flexDirection: 'column' }]}>\n          <Icon name=\"arrow-up\" type=\"font-awesome\" iconStyle={[styles.guideIcon, !isVertical && styles.guideIconDisabled]} />\n          <Icon name=\"arrow-down\" type=\"font-awesome\" iconStyle={[styles.guideIcon, !isVertical && styles.guideIconDisabled]} />\n        </View>\n        <View style={[styles.guideIconContainer, { flexDirection: 'row' }]}>\n          <Icon name=\"arrow-left\" type=\"font-awesome\" iconStyle={[styles.guideIcon, isVertical && styles.guideIconDisabled]} />\n          <Icon name=\"arrow-right\" type=\"font-awesome\" iconStyle={[styles.guideIcon, isVertical && styles.guideIconDisabled]} />\n        </View>\n      </Animated.View>\n    );\n  }\n\n  render() {\n    const { imageWidth, imageHeight, imagePanResponder } = this.state;\n\n    return (\n      <View style={[styles.container, { width: this.props.width, height: this.props.height }, this.props.style]}>\n        <Animated.Image\n          source={this.props.source}\n          style={[{ width: imageWidth, height: imageHeight }, this.imagePosition.getLayout()]}\n          {...imagePanResponder.panHandlers}\n        />\n        {this.renderGrid()}\n        {this.renderGuide()}\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n    backgroundColor: BOXGREY,\n  },\n  guideContainer: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '#0006',\n  },\n  guideIconContainer: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  guideIcon: {\n    color: '#fff',\n    fontSize: 50,\n    margin: 15,\n  },\n  guideIconDisabled: {\n    color: TEXT_LIGHT,\n  },\n  gridContainer: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n  },\n  gridHorizontal: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    left: 0,\n    height: '50%',\n    borderBottomWidth: 1,\n    borderBottomColor: BOXGREY,\n  },\n  gridVertical: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    width: '50%',\n    borderLeftWidth: 1,\n    borderLeftColor: BOXGREY,\n  },\n});\n\nexport default PositionedImage;\n"],"mappings":"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"}

package/dist/module/components/ProfilePic.js

@@ -0,0 +1,106 @@
+import React, { Component } from 'react';
+import { View, ImageBackground } from 'react-native';
+import { connect } from 'react-redux';
+import Config from '../config';
+import { Spinner } from './Spinner';
+import { LINEGREY, getMainBrandingColourFromState } from '../colours';
+class ProfilePic extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      image: null,
+      imageBorderRadius: 18,
+      imageUploading: false,
+      backgroundFill: false
+    };
+  }
+  UNSAFE_componentWillMount() {
+    this.setState({
+      image: this.props.ProfilePic != null ? this.props.ProfilePic : Config.env.defaultProfileImage,
+      imageDiameterStyle: {
+        height: this.props.Diameter != null ? this.props.Diameter : 35,
+        width: this.props.Diameter != null ? this.props.Diameter : 35
+      },
+      imageBorderRadius: this.props.Diameter != null ? this.props.Diameter / 2 : 18,
+      imageUploading: this.props.ImageUploading,
+      backgroundFill: this.props.ProfilePic === Config.env.tinyChatDefault
+    });
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let profPic = null;
+    if (nextProps.ProfilePic) {
+      profPic = nextProps.ProfilePic;
+    }
+    this.setState({
+      image: profPic,
+      imageUploading: nextProps.ImageUploading
+    });
+  }
+  renderImage() {
+    if (this.state.imageUploading) {
+      return /*#__PURE__*/React.createElement(Spinner, {
+        style: {
+          backgroundColor: 'white',
+          borderRadius: this.state.imageBorderRadius
+        }
+      });
+    }
+    let image = Config.env.defaultProfileImage;
+    let isDefault = true;
+    if (this.state.image !== null && typeof this.state.image === 'string') {
+      if (this.state.image !== 'https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg' && this.state.image !== 'https://plusscdn.azureedge.net/uploads/23046-1/636675694526742825882defaultavatar.jpg' && this.state.image !== 'https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg' && this.state.image !== 'https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:e2dc6a8b-61e8-4a76-a7ea-b1a15a013b94/public/2b3df48c4394a03840e52db886/profilepic.jpg') {
+        image = {
+          uri: this.state.image
+        };
+        isDefault = false;
+      }
+    }
+    return /*#__PURE__*/React.createElement(ImageBackground, {
+      key: "default",
+      source: image,
+      style: [styles.profilePicImage, {
+        borderRadius: this.state.imageBorderRadius
+      }, (isDefault || this.state.backgroundFill) && {
+        backgroundColor: this.props.colourBrandingMain
+      }],
+      imageStyle: {
+        borderRadius: this.state.imageBorderRadius
+      }
+    }, this.props.children);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.profilePicOuter, this.state.imageDiameterStyle, this.props.bordered && styles.bordered, {
+        borderRadius: this.state.imageBorderRadius
+      }, this.props.style],
+      key: this.props.id
+    }, this.renderImage());
+  }
+}
+const styles = {
+  profilePicOuter: {
+    height: 35,
+    width: 35,
+    zIndex: 1,
+    backgroundColor: LINEGREY
+    //  overflow: 'hidden'
+  },
+
+  profilePicImage: {
+    flex: 1,
+    height: null,
+    width: null
+  },
+  bordered: {
+    borderWidth: 1,
+    borderColor: '#fff'
+  }
+};
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state)
+  };
+};
+const profilePic = connect(mapStateToProps, {})(ProfilePic);
+export { profilePic as ProfilePic };
+//# sourceMappingURL=ProfilePic.js.map

package/dist/module/components/ProfilePic.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","View","ImageBackground","connect","Config","Spinner","LINEGREY","getMainBrandingColourFromState","ProfilePic","constructor","props","state","image","imageBorderRadius","imageUploading","backgroundFill","UNSAFE_componentWillMount","setState","env","defaultProfileImage","imageDiameterStyle","height","Diameter","width","ImageUploading","tinyChatDefault","UNSAFE_componentWillReceiveProps","nextProps","profPic","renderImage","createElement","style","backgroundColor","borderRadius","isDefault","uri","key","source","styles","profilePicImage","colourBrandingMain","imageStyle","children","render","profilePicOuter","bordered","id","zIndex","flex","borderWidth","borderColor","mapStateToProps","profilePic"],"sources":["ProfilePic.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { View, ImageBackground } from 'react-native';\nimport { connect } from 'react-redux';\nimport Config from '../config';\nimport { Spinner } from './Spinner';\nimport { LINEGREY, getMainBrandingColourFromState } from '../colours';\n\nclass ProfilePic extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      image: null,\n      imageBorderRadius: 18,\n      imageUploading: false,\n      backgroundFill: false,\n    };\n  }\n\n  UNSAFE_componentWillMount() {\n    this.setState({\n      image: this.props.ProfilePic != null ? this.props.ProfilePic : Config.env.defaultProfileImage,\n      imageDiameterStyle: {\n        height: this.props.Diameter != null ? this.props.Diameter : 35,\n        width: this.props.Diameter != null ? this.props.Diameter : 35,\n      },\n      imageBorderRadius: this.props.Diameter != null ? this.props.Diameter / 2 : 18,\n      imageUploading: this.props.ImageUploading,\n      backgroundFill: this.props.ProfilePic === Config.env.tinyChatDefault,\n    });\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    let profPic = null;\n    if (nextProps.ProfilePic) {\n      profPic = nextProps.ProfilePic;\n    }\n\n    this.setState({\n      image: profPic,\n      imageUploading: nextProps.ImageUploading,\n    });\n  }\n\n  renderImage() {\n    if (this.state.imageUploading) {\n      return (\n        <Spinner\n          style={{\n            backgroundColor: 'white',\n            borderRadius: this.state.imageBorderRadius,\n          }}\n        />\n      );\n    }\n    let image = Config.env.defaultProfileImage;\n    let isDefault = true;\n    if (this.state.image !== null && typeof this.state.image === 'string') {\n      if (\n        this.state.image !== 'https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg' &&\n        this.state.image !== 'https://plusscdn.azureedge.net/uploads/23046-1/636675694526742825882defaultavatar.jpg' &&\n        this.state.image !== 'https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg' &&\n        this.state.image !==\n          'https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:e2dc6a8b-61e8-4a76-a7ea-b1a15a013b94/public/2b3df48c4394a03840e52db886/profilepic.jpg'\n      ) {\n        image = { uri: this.state.image };\n        isDefault = false;\n      }\n    }\n    return (\n      <ImageBackground\n        key=\"default\"\n        source={image}\n        style={[\n          styles.profilePicImage,\n          { borderRadius: this.state.imageBorderRadius },\n          (isDefault || this.state.backgroundFill) && { backgroundColor: this.props.colourBrandingMain },\n        ]}\n        imageStyle={{ borderRadius: this.state.imageBorderRadius }}\n      >\n        {this.props.children}\n      </ImageBackground>\n    );\n  }\n\n  render() {\n    return (\n      <View\n        style={[\n          styles.profilePicOuter,\n          this.state.imageDiameterStyle,\n          this.props.bordered && styles.bordered,\n          { borderRadius: this.state.imageBorderRadius },\n          this.props.style,\n        ]}\n        key={this.props.id}\n      >\n        {this.renderImage()}\n      </View>\n    );\n  }\n}\n\nconst styles = {\n  profilePicOuter: {\n    height: 35,\n    width: 35,\n    zIndex: 1,\n    backgroundColor: LINEGREY,\n    //  overflow: 'hidden'\n  },\n  profilePicImage: {\n    flex: 1,\n    height: null,\n    width: null,\n  },\n  bordered: {\n    borderWidth: 1,\n    borderColor: '#fff',\n  },\n};\n\nconst mapStateToProps = state => {\n  return {\n    colourBrandingMain: getMainBrandingColourFromState(state),\n  };\n};\n\nconst profilePic = connect(mapStateToProps, {})(ProfilePic);\nexport { profilePic as ProfilePic };\n"],"mappings":"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"}