@plusscommunities/pluss-core-app 1.4.9 → 1.5.0

package/dist/module/components/PopupMenu.js

@@ -0,0 +1,128 @@
+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,"sources":["PopupMenu.js"],"names":["React","Component","View","Text","TouchableWithoutFeedback","TouchableOpacity","Modal","connect","_","getMainBrandingColourFromState","LINEGREY","TEXT_DARK","PopupMenu","renderOption","item","index","onPress","styles","option","firstOption","isEmpty","text","content","optionText","renderOptions","optionsContainer","map","props","options","renderTitle","titleContainer","titleText","title","renderCancel","onClose","cancelOption","cancelText","color","colourBrandingMain","render","container","menu","position","bottom","left","right","top","backgroundColor","zIndex","borderTopLeftRadius","borderTopRightRadius","paddingHorizontal","paddingVertical","borderColor","borderTopWidth","fontFamily","fontSize","textAlign","padding","borderBottomWidth","mapStateToProps","state","popupMenu"],"mappings":"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","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"]}

package/dist/module/components/PositionedImage.js

@@ -0,0 +1,333 @@
+function _extends() { _extends = Object.assign || 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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,"sources":["PositionedImage.js"],"names":["React","Component","View","Animated","PanResponder","Image","StyleSheet","Icon","BOXGREY","TEXT_LIGHT","PositionedImage","constructor","props","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","styles","gridContainer","gridHorizontal","gridVertical","renderGuide","guideContainer","opacity","guideIconContainer","flexDirection","guideIcon","guideIconDisabled","render","container","style","getLayout","panHandlers","overflow","backgroundColor","position","top","right","bottom","left","alignItems","justifyContent","color","fontSize","margin","borderBottomWidth","borderBottomColor","borderLeftWidth","borderLeftColor"],"mappings":"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","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"]}

package/dist/module/components/ProfilePic.js

@@ -0,0 +1,119 @@
+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,"sources":["ProfilePic.js"],"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","backgroundColor","borderRadius","isDefault","uri","styles","profilePicImage","colourBrandingMain","children","render","profilePicOuter","bordered","style","id","zIndex","flex","borderWidth","borderColor","mapStateToProps","profilePic"],"mappings":"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","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"]}