@plusscommunities/pluss-feature-builder-app-d 1.0.1-beta.3

package/dist/module/components/WidgetLarge.js

@@ -0,0 +1,274 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Component } from "react";
+import { Text, View, ScrollView, StyleSheet, TouchableOpacity, Image } from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { Icon } from "react-native-elements";
+import { Services } from "../feature.config";
+import { Components, Colours } from "../core.config";
+import { values } from "../values.config";
+import { selectListings, selectFeatureDefinition } from "../reducers/featureBuilderReducer";
+import { SPACING } from "../js/spacing";
+import { getMainBrandingColourFromState } from "../js";
+import { getSummaryFieldValue } from "../js/helpers";
+class WidgetLarge extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "getTitle", () => {
+      const {
+        options,
+        featureDefinition
+      } = this.props;
+      if (options && !_.isEmpty(options.Title)) return options.Title;
+      // Use feature definition title
+      if (featureDefinition !== null && featureDefinition !== void 0 && featureDefinition.title || featureDefinition !== null && featureDefinition !== void 0 && featureDefinition.displayName) {
+        return featureDefinition.title || featureDefinition.displayName;
+      }
+      return values.featureName || "Custom Features";
+    });
+    _defineProperty(this, "getEmptyStateText", () => {
+      const {
+        options
+      } = this.props;
+      if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
+      return "No custom features available";
+    });
+    _defineProperty(this, "refresh", () => {
+      this.onLoadingChanged(true, async () => {
+        try {
+          const {
+            initializeFeatureBuilder
+          } = await import("../actions/featureBuilderActions");
+          await initializeFeatureBuilder()(this.props.dispatch, () => this.props.getState);
+        } finally {
+          this.onLoadingChanged(false);
+        }
+      });
+    });
+    _defineProperty(this, "onLoadingChanged", (loading, callback) => {
+      this.setState({
+        loading
+      }, () => {
+        if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
+        if (callback) callback();
+      });
+    });
+    _defineProperty(this, "getImageSource", imageField => {
+      if (!imageField) return null;
+      if (typeof imageField === "string") {
+        return {
+          uri: imageField
+        };
+      }
+      if (typeof imageField === "object" && imageField.uri) {
+        return imageField;
+      }
+      if (typeof imageField === "object" && imageField.url) {
+        return {
+          uri: imageField.url
+        };
+      }
+      return null;
+    });
+    _defineProperty(this, "onListingPress", listing => {
+      const {
+        featureDefinition
+      } = this.props;
+      const title = this.getTitle();
+      Services.navigation.navigate(values.screens.featureDetail, {
+        listing: listing,
+        featureDefinition: featureDefinition,
+        featureTitle: title
+      });
+    });
+    _defineProperty(this, "renderListingCard", listing => {
+      var _listing$fields, _listing$fields2;
+      const {
+        colourBrandingMain,
+        featureDefinition
+      } = this.props;
+      const title = ((_listing$fields = listing.fields) === null || _listing$fields === void 0 ? void 0 : _listing$fields[values.mandatoryFields.title]) || "Untitled";
+      const summary = getSummaryFieldValue(listing, featureDefinition);
+      const imageField = (_listing$fields2 = listing.fields) === null || _listing$fields2 === void 0 ? void 0 : _listing$fields2[values.mandatoryFields.featureImage];
+      const imageSource = this.getImageSource(imageField);
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        key: listing.id,
+        style: styles.listItem,
+        onPress: () => this.onListingPress(listing)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.avatarContainer
+      }, imageSource ? /*#__PURE__*/React.createElement(Image, {
+        source: imageSource,
+        style: styles.avatar,
+        resizeMode: "cover"
+      }) : /*#__PURE__*/React.createElement(View, {
+        style: [styles.avatar, styles.placeholderAvatar]
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "image",
+        type: "font-awesome",
+        size: 16,
+        color: Colours.TEXT_LIGHT
+      }))), /*#__PURE__*/React.createElement(View, {
+        style: styles.textContainer
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: styles.titleText,
+        numberOfLines: 1
+      }, title), summary && /*#__PURE__*/React.createElement(Text, {
+        style: styles.descriptionText,
+        numberOfLines: 1
+      }, summary)), /*#__PURE__*/React.createElement(View, {
+        style: styles.chevronContainer
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "chevron-right",
+        type: "font-awesome",
+        size: 14,
+        color: Colours.TEXT_LIGHT
+      })));
+    });
+    this.state = {
+      loading: false
+    };
+  }
+  componentDidMount() {
+    this.refresh();
+  }
+  componentDidUpdate(prevProps) {
+    if (!prevProps.dataUpdated && this.props.dataUpdated) {
+      this.refresh();
+    }
+  }
+  renderContent() {
+    const {
+      listings
+    } = this.props;
+
+    // Don't render widget if no listings are available (and not loading)
+    if (_.isEmpty(listings) && !this.state.loading) {
+      return null;
+    }
+    if (_.isEmpty(listings)) {
+      if (this.state.loading) {
+        return /*#__PURE__*/React.createElement(View, {
+          style: styles.loadingPadding
+        }, /*#__PURE__*/React.createElement(Components.LoadingStateWidget, {
+          height: 300
+        }));
+      }
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      contentContainerStyle: styles.featuresContainer,
+      showsVerticalScrollIndicator: false
+    }, listings.map(listing => this.renderListingCard(listing)));
+  }
+  render() {
+    const {
+      colourBrandingMain
+    } = this.props;
+    const content = this.renderContent();
+    // Don't render widget section if content is null (no features available)
+    if (content === null) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.sectionContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.sectionPadding
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.sectionHeading
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.sectionTitle
+    }, this.getTitle()))), content);
+  }
+}
+const styles = StyleSheet.create({
+  sectionContainer: {
+    backgroundColor: "#fff",
+    flex: 1
+  },
+  sectionPadding: {
+    paddingHorizontal: SPACING.MD,
+    paddingBottom: SPACING.XS + 2,
+    paddingTop: SPACING.MD
+  },
+  loadingPadding: {
+    paddingHorizontal: SPACING.MD
+  },
+  sectionHeading: {
+    marginBottom: SPACING.MD
+  },
+  sectionTitle: {
+    fontFamily: "sf-bold",
+    fontSize: 24,
+    color: "#000"
+  },
+  featuresContainer: {
+    paddingHorizontal: SPACING.MD,
+    paddingBottom: SPACING.MD
+  },
+  // Listing item styles (similar to CondensedListItem)
+  listItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: "#fff"
+  },
+  avatarContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginRight: 12
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: Colours.BACKGROUND_LIGHT || "#f0f0f0"
+  },
+  placeholderAvatar: {
+    backgroundColor: Colours.BACKGROUND_LIGHT || "#f0f0f0",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  titleText: {
+    fontFamily: "sf-semibold",
+    fontSize: 16,
+    color: Colours.TEXT_DARK || "#333",
+    marginBottom: 2
+  },
+  descriptionText: {
+    fontFamily: "sf-regular",
+    fontSize: 14,
+    color: Colours.TEXT_LIGHT || "#666",
+    lineHeight: 18
+  },
+  chevronContainer: {
+    paddingLeft: 8
+  }
+});
+const mapStateToProps = state => {
+  var _state$strings;
+  const {
+    user,
+    notifications
+  } = state;
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    listings: selectListings(state),
+    featureDefinition: selectFeatureDefinition(state),
+    site: user.site,
+    dataUpdated: notifications.dataUpdated[values.notificationKey],
+    strings: ((_state$strings = state.strings) === null || _state$strings === void 0 ? void 0 : _state$strings.config) || {}
+  };
+};
+export default connect(mapStateToProps, null, null, {
+  forwardRef: true
+})(WidgetLarge);
+//# sourceMappingURL=WidgetLarge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","Text","View","ScrollView","StyleSheet","TouchableOpacity","Image","connect","_","Icon","Services","Components","Colours","values","selectListings","selectFeatureDefinition","SPACING","getMainBrandingColourFromState","getSummaryFieldValue","WidgetLarge","constructor","props","_defineProperty","options","featureDefinition","isEmpty","Title","title","displayName","featureName","EmptyText","onLoadingChanged","initializeFeatureBuilder","dispatch","getState","loading","callback","setState","state","imageField","uri","url","listing","getTitle","navigation","navigate","screens","featureDetail","featureTitle","_listing$fields","_listing$fields2","colourBrandingMain","fields","mandatoryFields","summary","featureImage","imageSource","getImageSource","createElement","key","id","style","styles","listItem","onPress","onListingPress","avatarContainer","source","avatar","resizeMode","placeholderAvatar","name","type","size","color","TEXT_LIGHT","textContainer","titleText","numberOfLines","descriptionText","chevronContainer","componentDidMount","refresh","componentDidUpdate","prevProps","dataUpdated","renderContent","listings","loadingPadding","LoadingStateWidget","height","contentContainerStyle","featuresContainer","showsVerticalScrollIndicator","map","renderListingCard","render","content","sectionContainer","sectionPadding","sectionHeading","sectionTitle","create","backgroundColor","flex","paddingHorizontal","MD","paddingBottom","XS","paddingTop","marginBottom","fontFamily","fontSize","flexDirection","alignItems","paddingVertical","width","borderRadius","marginRight","BACKGROUND_LIGHT","justifyContent","TEXT_DARK","lineHeight","paddingLeft","mapStateToProps","_state$strings","user","notifications","site","notificationKey","strings","config","forwardRef"],"sources":["WidgetLarge.js"],"sourcesContent":["import React, { Component } from \"react\";\nimport {\n\tText,\n\tView,\n\tScrollView,\n\tStyleSheet,\n\tTouchableOpacity,\n\tImage,\n} from \"react-native\";\nimport { connect } from \"react-redux\";\nimport _ from \"lodash\";\nimport { Icon } from \"react-native-elements\";\nimport { Services } from \"../feature.config\";\nimport { Components, Colours } from \"../core.config\";\nimport { values } from \"../values.config\";\nimport { selectListings, selectFeatureDefinition } from \"../reducers/featureBuilderReducer\";\nimport { SPACING } from \"../js/spacing\";\nimport { getMainBrandingColourFromState } from \"../js\";\nimport { getSummaryFieldValue } from \"../js/helpers\";\n\nclass WidgetLarge extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = { loading: false };\n\t}\n\n\tcomponentDidMount() {\n\t\tthis.refresh();\n\t}\n\n\tcomponentDidUpdate(prevProps) {\n\t\tif (!prevProps.dataUpdated && this.props.dataUpdated) {\n\t\t\tthis.refresh();\n\t\t}\n\t}\n\n\tgetTitle = () => {\n\t\tconst { options, featureDefinition } = this.props;\n\t\tif (options && !_.isEmpty(options.Title)) return options.Title;\n\t\t// Use feature definition title\n\t\tif (\n\t\t\tfeatureDefinition?.title ||\n\t\t\tfeatureDefinition?.displayName\n\t\t) {\n\t\t\treturn (\n\t\t\t\tfeatureDefinition.title || featureDefinition.displayName\n\t\t\t);\n\t\t}\n\t\treturn values.featureName || \"Custom Features\";\n\t};\n\n\tgetEmptyStateText = () => {\n\t\tconst { options } = this.props;\n\t\tif (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;\n\t\treturn \"No custom features available\";\n\t};\n\n\trefresh = () => {\n\t\tthis.onLoadingChanged(true, async () => {\n\t\t\ttry {\n\t\t\t\tconst { initializeFeatureBuilder } = await import(\n\t\t\t\t\t\"../actions/featureBuilderActions\"\n\t\t\t\t);\n\t\t\t\tawait initializeFeatureBuilder()(\n\t\t\t\t\tthis.props.dispatch,\n\t\t\t\t\t() => this.props.getState,\n\t\t\t\t);\n\t\t\t} finally {\n\t\t\t\tthis.onLoadingChanged(false);\n\t\t\t}\n\t\t});\n\t};\n\n\tonLoadingChanged = (loading, callback) => {\n\t\tthis.setState({ loading }, () => {\n\t\t\tif (this.props.onLoadingChanged)\n\t\t\t\tthis.props.onLoadingChanged(this.state.loading);\n\t\t\tif (callback) callback();\n\t\t});\n\t};\n\n\tgetImageSource = (imageField) => {\n\t\tif (!imageField) return null;\n\n\t\tif (typeof imageField === \"string\") {\n\t\t\treturn { uri: imageField };\n\t\t}\n\n\t\tif (typeof imageField === \"object\" && imageField.uri) {\n\t\t\treturn imageField;\n\t\t}\n\n\t\tif (typeof imageField === \"object\" && imageField.url) {\n\t\t\treturn { uri: imageField.url };\n\t\t}\n\n\t\treturn null;\n\t};\n\n\tonListingPress = (listing) => {\n\t\tconst { featureDefinition } = this.props;\n\t\tconst title = this.getTitle();\n\t\tServices.navigation.navigate(values.screens.featureDetail, {\n\t\t\tlisting: listing,\n\t\t\tfeatureDefinition: featureDefinition,\n\t\t\tfeatureTitle: title,\n\t\t});\n\t};\n\n\trenderListingCard = (listing) => {\n\t\tconst { colourBrandingMain, featureDefinition } = this.props;\n\t\tconst title = listing.fields?.[values.mandatoryFields.title] || \"Untitled\";\n\t\tconst summary = getSummaryFieldValue(listing, featureDefinition);\n\t\tconst imageField = listing.fields?.[values.mandatoryFields.featureImage];\n\t\tconst imageSource = this.getImageSource(imageField);\n\n\t\treturn (\n\t\t\t<TouchableOpacity\n\t\t\t\tkey={listing.id}\n\t\t\t\tstyle={styles.listItem}\n\t\t\t\tonPress={() => this.onListingPress(listing)}\n\t\t\t>\n\t\t\t\t{/* Small circular avatar image */}\n\t\t\t\t<View style={styles.avatarContainer}>\n\t\t\t\t\t{imageSource ? (\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsource={imageSource}\n\t\t\t\t\t\t\tstyle={styles.avatar}\n\t\t\t\t\t\t\tresizeMode=\"cover\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<View style={[styles.avatar, styles.placeholderAvatar]}>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tname=\"image\"\n\t\t\t\t\t\t\t\ttype=\"font-awesome\"\n\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\tcolor={Colours.TEXT_LIGHT}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t)}\n\t\t\t\t</View>\n\n\t\t\t\t{/* Text content */}\n\t\t\t\t<View style={styles.textContainer}>\n\t\t\t\t\t<Text style={styles.titleText} numberOfLines={1}>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Text>\n\t\t\t\t\t{summary && (\n\t\t\t\t\t\t<Text style={styles.descriptionText} numberOfLines={1}>\n\t\t\t\t\t\t\t{summary}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t)}\n\t\t\t\t</View>\n\n\t\t\t\t{/* Chevron icon */}\n\t\t\t\t<View style={styles.chevronContainer}>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tname=\"chevron-right\"\n\t\t\t\t\t\ttype=\"font-awesome\"\n\t\t\t\t\t\tsize={14}\n\t\t\t\t\t\tcolor={Colours.TEXT_LIGHT}\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t</TouchableOpacity>\n\t\t);\n\t};\n\n\trenderContent() {\n\t\tconst { listings } = this.props;\n\n\t\t// Don't render widget if no listings are available (and not loading)\n\t\tif (_.isEmpty(listings) && !this.state.loading) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (_.isEmpty(listings)) {\n\t\t\tif (this.state.loading) {\n\t\t\t\treturn (\n\t\t\t\t\t<View style={styles.loadingPadding}>\n\t\t\t\t\t\t<Components.LoadingStateWidget height={300} />\n\t\t\t\t\t</View>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={styles.featuresContainer}\n\t\t\t\tshowsVerticalScrollIndicator={false}\n\t\t\t>\n\t\t\t\t{listings.map((listing) => this.renderListingCard(listing))}\n\t\t\t</ScrollView>\n\t\t);\n\t}\n\n\trender() {\n\t\tconst { colourBrandingMain } = this.props;\n\n\t\tconst content = this.renderContent();\n\t\t// Don't render widget section if content is null (no features available)\n\t\tif (content === null) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<View style={styles.sectionContainer}>\n\t\t\t\t<View style={styles.sectionPadding}>\n\t\t\t\t\t<View style={styles.sectionHeading}>\n\t\t\t\t\t\t<Text style={styles.sectionTitle}>{this.getTitle()}</Text>\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t{content}\n\t\t\t</View>\n\t\t);\n\t}\n}\n\nconst styles = StyleSheet.create({\n\tsectionContainer: {\n\t\tbackgroundColor: \"#fff\",\n\t\tflex: 1,\n\t},\n\tsectionPadding: {\n\t\tpaddingHorizontal: SPACING.MD,\n\t\tpaddingBottom: SPACING.XS + 2,\n\t\tpaddingTop: SPACING.MD,\n\t},\n\tloadingPadding: {\n\t\tpaddingHorizontal: SPACING.MD,\n\t},\n\tsectionHeading: {\n\t\tmarginBottom: SPACING.MD,\n\t},\n\tsectionTitle: {\n\t\tfontFamily: \"sf-bold\",\n\t\tfontSize: 24,\n\t\tcolor: \"#000\",\n\t},\n\tfeaturesContainer: {\n\t\tpaddingHorizontal: SPACING.MD,\n\t\tpaddingBottom: SPACING.MD,\n\t},\n\t// Listing item styles (similar to CondensedListItem)\n\tlistItem: {\n\t\tflexDirection: \"row\",\n\t\talignItems: \"center\",\n\t\tpaddingHorizontal: 16,\n\t\tpaddingVertical: 8,\n\t\tbackgroundColor: \"#fff\",\n\t},\n\tavatarContainer: {\n\t\twidth: 40,\n\t\theight: 40,\n\t\tborderRadius: 20,\n\t\tmarginRight: 12,\n\t},\n\tavatar: {\n\t\twidth: 40,\n\t\theight: 40,\n\t\tborderRadius: 20,\n\t\tbackgroundColor: Colours.BACKGROUND_LIGHT || \"#f0f0f0\",\n\t},\n\tplaceholderAvatar: {\n\t\tbackgroundColor: Colours.BACKGROUND_LIGHT || \"#f0f0f0\",\n\t\tjustifyContent: \"center\",\n\t\talignItems: \"center\",\n\t},\n\ttextContainer: {\n\t\tflex: 1,\n\t\tjustifyContent: \"center\",\n\t},\n\ttitleText: {\n\t\tfontFamily: \"sf-semibold\",\n\t\tfontSize: 16,\n\t\tcolor: Colours.TEXT_DARK || \"#333\",\n\t\tmarginBottom: 2,\n\t},\n\tdescriptionText: {\n\t\tfontFamily: \"sf-regular\",\n\t\tfontSize: 14,\n\t\tcolor: Colours.TEXT_LIGHT || \"#666\",\n\t\tlineHeight: 18,\n\t},\n\tchevronContainer: {\n\t\tpaddingLeft: 8,\n\t},\n});\n\nconst mapStateToProps = (state) => {\n\tconst { user, notifications } = state;\n\n\treturn {\n\t\tcolourBrandingMain: getMainBrandingColourFromState(state),\n\t\tlistings: selectListings(state),\n\t\tfeatureDefinition: selectFeatureDefinition(state),\n\t\tsite: user.site,\n\t\tdataUpdated: notifications.dataUpdated[values.notificationKey],\n\t\tstrings: state.strings?.config || {},\n\t};\n};\n\nexport default connect(mapStateToProps, null, null, { forwardRef: true })(\n\tWidgetLarge,\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/module/components/WidgetSmall.js

@@ -0,0 +1,315 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Component } from "react";
+import { Text, View, ScrollView, StyleSheet, TouchableOpacity, Image } from "react-native";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { Icon } from "react-native-elements";
+import { Services } from "../feature.config";
+import { Components, Colours } from "../core.config";
+import { values } from "../values.config";
+import { selectListings, selectFeatureDefinition } from "../reducers/featureBuilderReducer";
+import { SPACING } from "../js/spacing";
+import { getMainBrandingColourFromState } from "../js";
+import { getSummaryFieldValue } from "../js/helpers";
+class WidgetSmall extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "getTitle", () => {
+      const {
+        options,
+        featureDefinition
+      } = this.props;
+      if (options && !_.isEmpty(options.Title)) return options.Title;
+      // Use feature definition title
+      if (featureDefinition !== null && featureDefinition !== void 0 && featureDefinition.title || featureDefinition !== null && featureDefinition !== void 0 && featureDefinition.displayName) {
+        return featureDefinition.title || featureDefinition.displayName;
+      }
+      return values.featureName || "Features";
+    });
+    _defineProperty(this, "getEmptyStateText", () => {
+      const {
+        options
+      } = this.props;
+      if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
+      return values.labels.emptyState;
+    });
+    _defineProperty(this, "refresh", () => {
+      this.onLoadingChanged(true, async () => {
+        try {
+          // Import actions dynamically to avoid circular dependencies
+          const {
+            initializeFeatureBuilder
+          } = await import("../actions/featureBuilderActions");
+          await initializeFeatureBuilder()(this.props.dispatch, () => this.props.getState);
+        } finally {
+          this.onLoadingChanged(false);
+        }
+      });
+    });
+    _defineProperty(this, "onLoadingChanged", (loading, callback) => {
+      this.setState({
+        loading
+      }, () => {
+        if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
+        if (callback) callback();
+      });
+    });
+    _defineProperty(this, "onPressAll", () => {
+      Services.navigation.navigate(values.screens.featureList, {
+        options: this.props.options
+      });
+    });
+    _defineProperty(this, "getImageSource", imageField => {
+      if (!imageField) return null;
+      if (typeof imageField === "string") {
+        return {
+          uri: imageField
+        };
+      }
+      if (typeof imageField === "object" && imageField.uri) {
+        return imageField;
+      }
+      if (typeof imageField === "object" && imageField.url) {
+        return {
+          uri: imageField.url
+        };
+      }
+      return null;
+    });
+    _defineProperty(this, "onListingPress", listing => {
+      const {
+        featureDefinition
+      } = this.props;
+      const title = this.getTitle();
+      Services.navigation.navigate(values.screens.featureDetail, {
+        listing: listing,
+        featureDefinition: featureDefinition,
+        featureTitle: title
+      });
+    });
+    _defineProperty(this, "renderListingCard", listing => {
+      var _listing$fields, _listing$fields2;
+      const {
+        colourBrandingMain,
+        featureDefinition
+      } = this.props;
+      const title = ((_listing$fields = listing.fields) === null || _listing$fields === void 0 ? void 0 : _listing$fields[values.mandatoryFields.title]) || "Untitled";
+      const summary = getSummaryFieldValue(listing, featureDefinition);
+      const imageField = (_listing$fields2 = listing.fields) === null || _listing$fields2 === void 0 ? void 0 : _listing$fields2[values.mandatoryFields.featureImage];
+      const imageSource = this.getImageSource(imageField);
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        key: listing.id,
+        style: styles.cardContainer,
+        onPress: () => this.onListingPress(listing)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.borderContainer
+      }, imageSource ? /*#__PURE__*/React.createElement(Image, {
+        source: imageSource,
+        style: styles.cardImage,
+        resizeMode: "cover"
+      }) : /*#__PURE__*/React.createElement(View, {
+        style: [styles.cardImage, styles.placeholderImage]
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "image",
+        type: "font-awesome",
+        size: 24,
+        color: Colours.TEXT_LIGHT
+      })), /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardTitle,
+        numberOfLines: 1
+      }, title), summary && /*#__PURE__*/React.createElement(Text, {
+        style: styles.cardSummary,
+        numberOfLines: 1
+      }, summary)));
+    });
+    this.state = {
+      loading: false
+    };
+  }
+  componentDidMount() {
+    this.refresh();
+  }
+  componentDidUpdate(prevProps) {
+    if (!prevProps.dataUpdated && this.props.dataUpdated) {
+      this.refresh();
+    }
+  }
+  renderContent() {
+    const {
+      listings
+    } = this.props;
+
+    // Don't render widget if no listings are available (and not loading)
+    if (_.isEmpty(listings) && !this.state.loading) {
+      return null;
+    }
+    if (_.isEmpty(listings)) {
+      if (this.state.loading) {
+        return /*#__PURE__*/React.createElement(View, {
+          style: styles.loadingPadding
+        }, /*#__PURE__*/React.createElement(Components.LoadingStateWidget, {
+          height: 180
+        }));
+      }
+      return null;
+    }
+
+    // Show first 3 listings with peeking indicator
+    const listingsToShow = listings.slice(0, values.widget.maxItems);
+    return /*#__PURE__*/React.createElement(ScrollView, {
+      horizontal: true,
+      contentContainerStyle: {
+        paddingLeft: SPACING.XS + 2,
+        paddingRight: SPACING.SM
+      },
+      showsHorizontalScrollIndicator: false
+    }, listingsToShow.map(listing => this.renderListingCard(listing)), listings.length > values.widget.maxItems && /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: [styles.cardContainer, styles.viewMoreCard],
+      onPress: this.onPressAll
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.borderContainer, styles.viewMoreContainer]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.viewMoreText
+    }, "View all"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.viewMoreCount
+    }, listings.length, " items"))));
+  }
+  render() {
+    const {
+      colourBrandingMain
+    } = this.props;
+    const content = this.renderContent();
+    // Don't render widget section if content is null (no features available)
+    if (content === null) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.sectionContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.sectionPadding
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.sectionHeading
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.sectionTitle
+    }, this.getTitle()), /*#__PURE__*/React.createElement(Components.InlineButton, {
+      onPress: this.onPressAll,
+      color: colourBrandingMain,
+      touchableStyle: {
+        paddingTop: SPACING.XS + 2
+      },
+      textStyle: {
+        color: "#fff"
+      }
+    }, values.labels.viewAll))), content);
+  }
+}
+const styles = StyleSheet.create({
+  sectionContainer: {
+    backgroundColor: "#fff",
+    paddingTop: SPACING.MD
+  },
+  sectionPadding: {
+    paddingHorizontal: SPACING.MD,
+    paddingBottom: SPACING.XS + 2
+  },
+  loadingPadding: {
+    paddingHorizontal: SPACING.MD
+  },
+  sectionHeading: {
+    marginBottom: SPACING.XS,
+    flexDirection: "row",
+    alignContent: "flex-start",
+    justifyContent: "space-between"
+  },
+  sectionTitle: {
+    fontFamily: "sf-bold",
+    fontSize: 24,
+    color: "#000"
+  },
+  // Listing card styles
+  cardContainer: {
+    marginRight: SPACING.SM + 4,
+    width: values.widget.itemMaxWidth
+  },
+  borderContainer: {
+    borderRadius: SPACING.SM,
+    backgroundColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 4,
+    padding: SPACING.SM,
+    minHeight: values.widget.itemMinWidth
+  },
+  cardImage: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    backgroundColor: "#f0f0f0",
+    alignSelf: "center",
+    marginBottom: SPACING.XS
+  },
+  placeholderImage: {
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0"
+  },
+  cardTitle: {
+    fontFamily: "sf-semibold",
+    fontSize: 14,
+    color: "#000",
+    textAlign: "center",
+    marginBottom: 4
+  },
+  cardSummary: {
+    fontFamily: "sf-regular",
+    fontSize: 12,
+    color: "#666",
+    textAlign: "center"
+  },
+  // View more card
+  viewMoreCard: {
+    justifyContent: "center"
+  },
+  viewMoreContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: values.widget.itemMinWidth
+  },
+  viewMoreText: {
+    fontFamily: "sf-semibold",
+    fontSize: 14,
+    color: Colours.TEXT_DARK || "#000"
+  },
+  viewMoreCount: {
+    fontFamily: "sf-regular",
+    fontSize: 12,
+    color: "#666",
+    marginTop: 2
+  }
+});
+const mapStateToProps = state => {
+  var _state$strings;
+  const {
+    user,
+    notifications
+  } = state;
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+    listings: selectListings(state),
+    featureDefinition: selectFeatureDefinition(state),
+    site: user.site,
+    dataUpdated: notifications.dataUpdated[values.notificationKey],
+    strings: ((_state$strings = state.strings) === null || _state$strings === void 0 ? void 0 : _state$strings.config) || {}
+  };
+};
+export default connect(mapStateToProps, null, null, {
+  forwardRef: true
+})(WidgetSmall);
+//# sourceMappingURL=WidgetSmall.js.map