@beppla/tapas-ui 1.0.66 → 1.0.67

package/commonjs/DeviceSelectionModal/DeviceSelectionModal.js

@@ -1,303 +1,356 @@
 "use strict";
 
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = void 0 && (void 0).__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _themed = require("@rneui/themed");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const DeviceSelectionModal = ({
-  visible,
-  devices,
-  selectedDeviceId,
-  onClose,
-  onConfirm,
-  title,
-  isLoading = false,
-  error = null,
-  onRetry,
-  selectDeviceText = "Select Device",
-  pleaseSelectDeviceText = "Please select a device",
-  loadingDevicesText = "Loading devices...",
-  noDevicesAvailableText = "No devices available",
-  closeText = "Close",
-  confirmText = "Confirm",
-  retryText = "Retry",
-  testID
-}) => {
-  const [localSelectedId, setLocalSelectedId] = (0, _react.useState)(selectedDeviceId);
-  const styles = useStyles();
-  const theme = (0, _themed.useTheme)();
-  const handleDeviceSelect = deviceId => {
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var themed_1 = require("@rneui/themed");
+var DeviceSelectionModal = function (_a) {
+  var visible = _a.visible,
+    devices = _a.devices,
+    selectedDeviceId = _a.selectedDeviceId,
+    onClose = _a.onClose,
+    onConfirm = _a.onConfirm,
+    title = _a.title,
+    _b = _a.isLoading,
+    isLoading = _b === void 0 ? false : _b,
+    _c = _a.error,
+    error = _c === void 0 ? null : _c,
+    onRetry = _a.onRetry,
+    _d = _a.selectDeviceText,
+    selectDeviceText = _d === void 0 ? "Select Device" : _d,
+    _e = _a.pleaseSelectDeviceText,
+    pleaseSelectDeviceText = _e === void 0 ? "Please select a device" : _e,
+    _f = _a.loadingDevicesText,
+    loadingDevicesText = _f === void 0 ? "Loading devices..." : _f,
+    _g = _a.noDevicesAvailableText,
+    noDevicesAvailableText = _g === void 0 ? "No devices available" : _g,
+    _h = _a.closeText,
+    closeText = _h === void 0 ? "Close" : _h,
+    _j = _a.confirmText,
+    confirmText = _j === void 0 ? "Confirm" : _j,
+    _k = _a.retryText,
+    retryText = _k === void 0 ? "Retry" : _k,
+    testID = _a.testID;
+  var _l = (0, react_1.useState)(selectedDeviceId),
+    localSelectedId = _l[0],
+    setLocalSelectedId = _l[1];
+  var styles = useStyles();
+  var theme = (0, themed_1.useTheme)();
+  var handleDeviceSelect = function (deviceId) {
     setLocalSelectedId(deviceId);
   };
-  const handleConfirm = () => {
+  var handleConfirm = function () {
     if (localSelectedId) {
       onConfirm(localSelectedId);
     }
   };
-  const handleClose = () => {
+  var handleClose = function () {
     setLocalSelectedId(selectedDeviceId);
     onClose();
   };
-  const renderDeviceItem = ({
-    item
-  }) => {
-    const isSelected = item.id === localSelectedId;
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  var renderDeviceItem = function (_a) {
+    var item = _a.item;
+    var isSelected = item.id === localSelectedId;
+    return react_1.default.createElement(react_native_1.TouchableOpacity, {
       style: [styles.deviceItem, isSelected && styles.selectedDeviceItem],
-      onPress: () => handleDeviceSelect(item.id)
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      onPress: function () {
+        return handleDeviceSelect(item.id);
+      }
+    }, react_1.default.createElement(react_native_1.View, {
       style: styles.radioContainer
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    }, react_1.default.createElement(react_native_1.View, {
       style: [styles.radioButton, isSelected && styles.radioButtonSelected]
-    }, isSelected && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    }, isSelected && react_1.default.createElement(react_native_1.View, {
       style: styles.radioButtonInner
-    }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    }))), react_1.default.createElement(react_native_1.View, {
       style: styles.deviceInfo
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    }, react_1.default.createElement(react_native_1.Text, {
       style: [styles.deviceName, isSelected && styles.selectedDeviceName]
-    }, item.name), item.description && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    }, item.name), item.description && react_1.default.createElement(react_native_1.Text, {
       style: styles.deviceDescription
     }, item.description)));
   };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
+  return react_1.default.createElement(react_native_1.Modal, {
     visible: visible,
     transparent: true,
     animationType: "fade",
     onRequestClose: handleClose,
     testID: testID
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, react_1.default.createElement(react_native_1.View, {
     style: styles.overlay
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, react_1.default.createElement(react_native_1.View, {
     style: styles.modalContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, react_1.default.createElement(react_native_1.View, {
     style: styles.header
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: styles.title
-  }, title || selectDeviceText), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, title || selectDeviceText), react_1.default.createElement(react_native_1.Text, {
     style: styles.subtitle
-  }, pleaseSelectDeviceText)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, pleaseSelectDeviceText)), react_1.default.createElement(react_native_1.View, {
     style: styles.deviceList
-  }, isLoading ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, isLoading ? react_1.default.createElement(react_native_1.View, {
     style: styles.loadingContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
+  }, react_1.default.createElement(react_native_1.ActivityIndicator, {
     size: "large",
     color: theme.theme.colors.primary
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }), react_1.default.createElement(react_native_1.Text, {
     style: styles.loadingText
-  }, loadingDevicesText)) : error ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, loadingDevicesText)) : error ? react_1.default.createElement(react_native_1.View, {
     style: styles.errorContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: styles.errorText
-  }, error), onRetry && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, error), onRetry && react_1.default.createElement(react_native_1.TouchableOpacity, {
     style: styles.retryButton,
     onPress: onRetry
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: styles.retryButtonText
-  }, retryText))) : (devices || []).length === 0 ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, retryText))) : (devices || []).length === 0 ? react_1.default.createElement(react_native_1.View, {
     style: styles.emptyContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: styles.emptyText
-  }, noDevicesAvailableText)) : /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+  }, noDevicesAvailableText)) : react_1.default.createElement(react_native_1.FlatList, {
     data: devices,
-    keyExtractor: item => item.id,
+    keyExtractor: function (item) {
+      return item.id;
+    },
     renderItem: renderDeviceItem,
     showsVerticalScrollIndicator: false
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })), react_1.default.createElement(react_native_1.View, {
     style: styles.footer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, react_1.default.createElement(react_native_1.TouchableOpacity, {
     style: styles.closeButton,
     onPress: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: styles.closeButtonText
-  }, closeText)), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, closeText)), react_1.default.createElement(react_native_1.TouchableOpacity, {
     style: [styles.confirmButton, !localSelectedId && styles.confirmButtonDisabled],
     onPress: handleConfirm,
     disabled: !localSelectedId
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }, react_1.default.createElement(react_native_1.Text, {
     style: [styles.confirmButtonText, !localSelectedId && styles.confirmButtonTextDisabled]
   }, confirmText))))));
 };
-const useStyles = (0, _themed.makeStyles)(theme => ({
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  modalContainer: {
-    backgroundColor: theme.colors.white,
-    borderRadius: 12,
-    width: '90%',
-    maxWidth: 400,
-    maxHeight: '80%',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 8
+var useStyles = (0, themed_1.makeStyles)(function (theme) {
+  return {
+    overlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'center',
+      alignItems: 'center'
     },
-    shadowOpacity: 0.08,
-    shadowRadius: 24,
-    elevation: 8
-  },
-  header: {
-    padding: 24,
-    paddingBottom: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.grey4
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: theme.colors.primary,
-    marginBottom: 8
-  },
-  subtitle: {
-    fontSize: 14,
-    color: theme.colors.grey1,
-    fontWeight: '400'
-  },
-  deviceList: {
-    maxHeight: 300,
-    paddingHorizontal: 24,
-    paddingVertical: 16
-  },
-  deviceItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 16,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    marginBottom: 8
-  },
-  selectedDeviceItem: {
-    backgroundColor: theme.colors.grey3
-  },
-  radioContainer: {
-    marginRight: 12
-  },
-  radioButton: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    borderWidth: 2,
-    borderColor: theme.colors.greyOutline,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  radioButtonSelected: {
-    borderColor: theme.colors.primary
-  },
-  radioButtonInner: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: theme.colors.primary
-  },
-  deviceInfo: {
-    flex: 1
-  },
-  deviceName: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: theme.colors.primary,
-    marginBottom: 4
-  },
-  selectedDeviceName: {
-    color: theme.colors.primary
-  },
-  deviceDescription: {
-    fontSize: 12,
-    color: theme.colors.grey1,
-    fontWeight: '400'
-  },
-  footer: {
-    flexDirection: 'row',
-    padding: 24,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.grey4,
-    gap: 12
-  },
-  closeButton: {
-    flex: 1,
-    height: 48,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: theme.colors.greyOutline,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  closeButtonText: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: theme.colors.grey1
-  },
-  confirmButton: {
-    flex: 1,
-    height: 48,
-    borderRadius: 8,
-    backgroundColor: theme.colors.primary,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  confirmButtonDisabled: {
-    backgroundColor: theme.colors.grey3
-  },
-  confirmButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: theme.colors.white
-  },
-  confirmButtonTextDisabled: {
-    color: theme.colors.grey1
-  },
-  loadingContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 14,
-    color: theme.colors.grey1
-  },
-  errorContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40
-  },
-  errorText: {
-    fontSize: 14,
-    color: theme.colors.error || '#FF6B6B',
-    textAlign: 'center',
-    marginBottom: 16
-  },
-  retryButton: {
-    paddingHorizontal: 20,
-    paddingVertical: 8,
-    backgroundColor: theme.colors.primary,
-    borderRadius: 6
-  },
-  retryButtonText: {
-    fontSize: 14,
-    color: theme.colors.white,
-    fontWeight: '500'
-  },
-  emptyContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 40
-  },
-  emptyText: {
-    fontSize: 14,
-    color: theme.colors.grey1,
-    textAlign: 'center'
-  }
-}));
-var _default = exports.default = (0, _themed.withTheme)(DeviceSelectionModal);
+    modalContainer: {
+      backgroundColor: theme.colors.white,
+      borderRadius: 12,
+      width: '90%',
+      maxWidth: 400,
+      maxHeight: '80%',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 8
+      },
+      shadowOpacity: 0.08,
+      shadowRadius: 24,
+      elevation: 8
+    },
+    header: {
+      padding: 24,
+      paddingBottom: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.grey4
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: theme.colors.primary,
+      marginBottom: 8
+    },
+    subtitle: {
+      fontSize: 14,
+      color: theme.colors.grey1,
+      fontWeight: '400'
+    },
+    deviceList: {
+      maxHeight: 300,
+      paddingHorizontal: 24,
+      paddingVertical: 16
+    },
+    deviceItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 16,
+      paddingHorizontal: 12,
+      borderRadius: 8,
+      marginBottom: 8
+    },
+    selectedDeviceItem: {
+      backgroundColor: theme.colors.grey3
+    },
+    radioContainer: {
+      marginRight: 12
+    },
+    radioButton: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: theme.colors.greyOutline,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    radioButtonSelected: {
+      borderColor: theme.colors.primary
+    },
+    radioButtonInner: {
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+      backgroundColor: theme.colors.primary
+    },
+    deviceInfo: {
+      flex: 1
+    },
+    deviceName: {
+      fontSize: 16,
+      fontWeight: '500',
+      color: theme.colors.primary,
+      marginBottom: 4
+    },
+    selectedDeviceName: {
+      color: theme.colors.primary
+    },
+    deviceDescription: {
+      fontSize: 12,
+      color: theme.colors.grey1,
+      fontWeight: '400'
+    },
+    footer: {
+      flexDirection: 'row',
+      padding: 24,
+      paddingTop: 16,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.grey4,
+      gap: 12
+    },
+    closeButton: {
+      flex: 1,
+      height: 48,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.greyOutline,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    closeButtonText: {
+      fontSize: 16,
+      fontWeight: '500',
+      color: theme.colors.grey1
+    },
+    confirmButton: {
+      flex: 1,
+      height: 48,
+      borderRadius: 8,
+      backgroundColor: theme.colors.primary,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    confirmButtonDisabled: {
+      backgroundColor: theme.colors.grey3
+    },
+    confirmButtonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: theme.colors.white
+    },
+    confirmButtonTextDisabled: {
+      color: theme.colors.grey1
+    },
+    loadingContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 40
+    },
+    loadingText: {
+      marginTop: 16,
+      fontSize: 14,
+      color: theme.colors.grey1
+    },
+    errorContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 40
+    },
+    errorText: {
+      fontSize: 14,
+      color: theme.colors.error || '#FF6B6B',
+      textAlign: 'center',
+      marginBottom: 16
+    },
+    retryButton: {
+      paddingHorizontal: 20,
+      paddingVertical: 8,
+      backgroundColor: theme.colors.primary,
+      borderRadius: 6
+    },
+    retryButtonText: {
+      fontSize: 14,
+      color: theme.colors.white,
+      fontWeight: '500'
+    },
+    emptyContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 40
+    },
+    emptyText: {
+      fontSize: 14,
+      color: theme.colors.grey1,
+      textAlign: 'center'
+    }
+  };
+});
+exports.default = (0, themed_1.withTheme)(DeviceSelectionModal);
 //# sourceMappingURL=DeviceSelectionModal.js.map