@beppla/tapas-ui 1.0.70 → 1.0.72

package/module/Header/Header.js

@@ -1,191 +1,175 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, TouchableOpacity, Platform } from "react-native";
-import { Header, Input, Avatar, makeStyles, withTheme } from "@rneui/themed";
-import Icon from "../Icons/TapasIcon";
+"use strict";
 
-// ts-ignore
-const useStyles = makeStyles(theme => ({
-  headerContainer: {
-    backgroundColor: theme.colors.background,
-    height: 72
-  },
-  title: {
-    color: theme.colors.primary,
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.h2,
-    fontWeight: theme.fonts.weightL,
-    letterSpacing: theme.fonts.letterSpacingM,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  mobileTitle: {
-    fontSize: theme.fonts.h3,
-    fontStyle: "normal",
-    letterSpacing: theme.fonts.letterSpacingS
-  },
-  webTitle: {
-    minWidth: undefined,
-    flexDirection: "row",
-    flexGrow: 1,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    justifyContent: "flex-start"
-  },
-  leftContainer: {
-    justifyContent: "center",
-    overflow: 'hidden'
-  },
-  rightContainer: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  searchContainer: {
-    width: 168,
-    marginRight: 8,
-    paddingLeft: 16,
-    paddingRight: 40,
-    paddingVertical: 8,
-    height: 40,
-    backgroundColor: theme.colors.colorSurface7,
-    borderRadius: theme.radius.full,
-    fontSize: theme.fonts.sizeM,
-    fontFamily: theme.fonts.fontFamily
-  },
-  searchInputContainer: {
-    borderBottomWidth: 0,
-    // placeholderTextColor: theme.colors.colorTextPlaceholder, // Not supported in React Native
-    height: "100%",
-    width: "100%"
-  },
-  searchInput: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: theme.fonts.sizeM
-    // outlineWidth: 0, // Not supported in React Native
-  },
-  dropdownContent: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    backgroundColor: "#ffffff",
-    borderRadius: 5
-  },
-  mobileSearchContainer: {
-    width: 40,
-    height: 40,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: theme.colors.colorSurface7,
-    borderRadius: theme.radius.full,
-    marginRight: 8
-  }
-}));
-const isWeb = Platform.OS === "web";
-const HeaderComponent = ({
-  title,
-  searchPlaceholderText,
-  avatarSource,
-  hasBack = false,
-  // @ts-ignore
-  theme,
-  searchOnChangeText,
-  avatarOnPress,
-  leftIcon = "menu",
-  showLeftIcon = false,
-  onLeftIconPress,
-  backIconStyle,
-  isShowSearch = false,
-  ...props
-}) => {
-  const [searchText, setSearchText] = useState("");
-  const [visible] = useState(showLeftIcon);
-  const styles = useStyles(props);
-
-  // TODO: click avatar to show some dropdown menu for login/logout
-  // const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  // const handleMouseEnter = () => {
-  //     setIsDropdownVisible(true);
-  // };
-  // const handleMouseLeave = () => {
-  //     setIsDropdownVisible(false);
-  // };
-
-  useEffect(() => {
-    if (searchOnChangeText) {
-      searchOnChangeText(searchText);
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
-  }, [searchText]);
-  const handleLeftIconPress = () => {
-    onLeftIconPress && onLeftIconPress();
+    return t;
   };
-  return /*#__PURE__*/React.createElement(View, {
-    testID: "header"
-  }, /*#__PURE__*/React.createElement(Header, {
-    leftContainerStyle: styles.leftContainer,
-    leftComponent: /*#__PURE__*/React.createElement(View, {
-      style: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        overflow: 'hidden',
-        width: '100%'
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__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];
       }
-    }, visible && /*#__PURE__*/React.createElement(TouchableOpacity, {
-      onPress: handleLeftIconPress
-    }, /*#__PURE__*/React.createElement(Icon, {
-      style: {
-        marginRight: 10
-      },
-      name: leftIcon,
-      size: 20,
-      color: theme?.colors?.grey1
-    })), hasBack && /*#__PURE__*/React.createElement(TouchableOpacity, {
-      onPress: handleLeftIconPress
-    }, /*#__PURE__*/React.createElement(Icon, {
-      style: {
-        marginRight: 10,
-        ...backIconStyle
-      },
-      name: "back",
-      size: 20,
-      color: theme?.colors?.grey1
-    })), /*#__PURE__*/React.createElement(Text, {
-      style: [styles.title, !isWeb ? styles.mobileTitle : styles.webTitle, hasBack && styles.mobileTitle]
-    }, title)),
-    rightComponent: /*#__PURE__*/React.createElement(View, {
-      style: styles.rightContainer
-    }, isWeb && isShowSearch && /*#__PURE__*/React.createElement(Input, {
-      placeholder: searchPlaceholderText,
-      leftIcon: /*#__PURE__*/React.createElement(Icon, {
-        name: "search",
-        size: 24,
-        color: theme?.colors?.grey1
-      }),
-      containerStyle: styles.searchContainer,
-      inputContainerStyle: styles.searchInputContainer,
-      inputStyle: styles.searchInput,
-      onChangeText: setSearchText
-    }), !isWeb && isShowSearch && /*#__PURE__*/React.createElement(View, {
-      style: styles.mobileSearchContainer
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "search",
-      size: 24,
-      color: theme?.colors?.grey1
-    })), avatarSource && /*#__PURE__*/React.createElement(Avatar, {
-      rounded: true,
-      source: {
-        uri: avatarSource
-      },
-      size: "small",
-      onPress: avatarOnPress
-    })),
-    centerContainerStyle: {
-      flex: 0.01
-    },
-    containerStyle: [styles.headerContainer, props.headerContainerStyle]
-  }));
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__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;
+  };
+}();
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-export default withTheme(HeaderComponent);
-//# sourceMappingURL=Header.js.maprOnPress", "leftIcon", "showLeftIcon", "onLeftIconPress", "backIconStyle", "isShowSearch"]);
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var themed_1 = require("@rneui/themed");
+var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+// ts-ignore
+var useStyles = (0, themed_1.makeStyles)(function (theme) {
+  return {
+    headerContainer: {
+      backgroundColor: theme.colors.background,
+      height: 72
+    },
+    title: {
+      color: theme.colors.primary,
+      fontFamily: theme.fonts.fontFamily,
+      fontSize: theme.fonts.h2,
+      fontWeight: theme.fonts.weightL,
+      letterSpacing: theme.fonts.letterSpacingM,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    mobileTitle: {
+      fontSize: theme.fonts.h3,
+      fontStyle: "normal",
+      letterSpacing: theme.fonts.letterSpacingS
+    },
+    webTitle: {
+      minWidth: undefined,
+      flexDirection: "row",
+      flexGrow: 1,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      justifyContent: "flex-start"
+    },
+    leftContainer: {
+      justifyContent: "center",
+      overflow: 'hidden'
+    },
+    rightContainer: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    searchContainer: {
+      width: 168,
+      marginRight: 8,
+      paddingLeft: 16,
+      paddingRight: 40,
+      paddingVertical: 8,
+      height: 40,
+      backgroundColor: theme.colors.colorSurface7,
+      borderRadius: theme.radius.full,
+      fontSize: theme.fonts.sizeM,
+      fontFamily: theme.fonts.fontFamily
+    },
+    searchInputContainer: {
+      borderBottomWidth: 0,
+      // placeholderTextColor: theme.colors.colorTextPlaceholder, // Not supported in React Native
+      height: "100%",
+      width: "100%"
+    },
+    searchInput: {
+      fontFamily: theme.fonts.fontFamily,
+      fontSize: theme.fonts.sizeM
+      // outlineWidth: 0, // Not supported in React Native
+    },
+    dropdownContent: {
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      backgroundColor: "#ffffff",
+      borderRadius: 5
+    },
+    mobileSearchContainer: {
+      width: 40,
+      height: 40,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.colors.colorSurface7,
+      borderRadius: theme.radius.full,
+      marginRight: 8
+    }
+  };
+});
+var isWeb = react_native_1.Platform.OS === "web";
+var HeaderComponent = function (_a) {
+  var _b, _c, _d, _e;
+  var title = _a.title,
+    searchPlaceholderText = _a.searchPlaceholderText,
+    avatarSource = _a.avatarSource,
+    _f = _a.hasBack,
+    hasBack = _f === void 0 ? false : _f,
+    // @ts-ignore
+    theme = _a.theme,
+    searchOnChangeText = _a.searchOnChangeText,
+    avatarOnPress = _a.avatarOnPress,
+    _g = _a.leftIcon,
+    leftIcon = _g === void 0 ? "menu" : _g,
+    _h = _a.showLeftIcon,
+    showLeftIcon = _h === void 0 ? false : _h,
+    onLeftIconPress = _a.onLeftIconPress,
+    backIconStyle = _a.backIconStyle,
+    _j = _a.isShowSearch,
+    isShowSearch = _j === void 0 ? false : _j,
+    props = __rest(_a, ["title", "searchPlaceholderText", "avatarSource", "hasBack", "theme", "searchOnChangeText", "avatarOnPress", "leftIcon", "showLeftIcon", "onLeftIconPress", "backIconStyle", "isShowSearch"]);
   var _k = (0, react_1.useState)(""),
     searchText = _k[0],
     setSearchText = _k[1];
@@ -274,4 +258,3 @@ export default withTheme(HeaderComponent);
   }));
 };
 exports.default = (0, themed_1.withTheme)(HeaderComponent);
-//# sourceMappingURL=Header.js.map

package/module/HelloWave/HelloWave.js

@@ -54,7 +54,6 @@ const styles = StyleSheet.create({
   }
 });
 export default withTheme(HelloWave);
-//# sourceMappingURL=HelloWave.js.mapurn react_native_1.Animated.sequence([react_native_1.Animated.timing(rotationAnimation, {
         toValue: 25,
         duration: duration,
         useNativeDriver: true
@@ -95,4 +94,3 @@ var styles = react_native_1.StyleSheet.create({
   }
 });
 exports.default = (0, themed_1.withTheme)(HelloWave);
-//# sourceMappingURL=HelloWave.js.map

package/module/Hoverable/Hoverable.js

@@ -124,4 +124,3 @@ var Hoverable = function (_a) {
   }, renderChildren());
 };
 exports.default = Hoverable;
-//# sourceMappingURL=Hoverable.js.map

package/module/IconText/IconText.js

@@ -1,108 +1,83 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
-import { makeStyles, withTheme, useTheme } from '@rneui/themed';
-import TapasIcon from '../Icons/TapasIcon';
-const IconText = ({
-  onPress,
-  type = 'text',
-  title,
-  index,
-  icon,
-  style,
-  titleStyle,
-  onLayout,
-  iconColor,
-  backgroundColor,
-  size = 'medium',
-  ...props
-}) => {
-  const theme = useTheme();
-  const styles = useStyles({
-    size,
-    backgroundColor
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var themed_1 = require("@rneui/themed");
+var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+var IconText = function (_a) {
+  var onPress = _a.onPress,
+    _b = _a.type,
+    type = _b === void 0 ? 'text' : _b,
+    title = _a.title,
+    index = _a.index,
+    icon = _a.icon,
+    style = _a.style,
+    titleStyle = _a.titleStyle,
+    onLayout = _a.onLayout,
+    iconColor = _a.iconColor,
+    backgroundColor = _a.backgroundColor,
+    _c = _a.size,
+    size = _c === void 0 ? 'medium' : _c,
+    props = __rest(_a, ["onPress", "type", "title", "index", "icon", "style", "titleStyle", "onLayout", "iconColor", "backgroundColor", "size"]);
+  var theme = (0, themed_1.useTheme)();
+  var styles = useStyles({
+    size: size,
+    backgroundColor: backgroundColor
   });
-  const content = /*#__PURE__*/React.createElement(View, {
+  var content = react_1.default.createElement(react_native_1.View, {
     key: index,
     style: [styles.labelIconContainer, style]
-  }, icon && /*#__PURE__*/React.createElement(TapasIcon, {
+  }, icon && react_1.default.createElement(TapasIcon_1.default, {
     name: icon,
     style: styles.labelIcon,
     size: 16,
     color: iconColor || theme.theme.colors.secondary
-  }), /*#__PURE__*/React.createElement(Text, _extends({
+  }), react_1.default.createElement(react_native_1.Text, __assign({
     style: [styles.labelTitle, titleStyle]
   }, props, {
-    onLayout: e => onLayout && onLayout(e)
+    onLayout: function (e) {
+      return onLayout && onLayout(e);
+    }
   }), title));
   if (type === 'text') {
-    return /*#__PURE__*/React.createElement(View, {
+    return react_1.default.createElement(react_native_1.View, {
       style: [styles.container, style]
     }, content);
   }
-  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+  return react_1.default.createElement(react_native_1.TouchableOpacity, {
     onPress: onPress
   }, content);
 };
-const useStyles = makeStyles((theme, props) => {
-  const {
-    size = 'medium',
-    backgroundColor
-  } = props || {};
-  let fontSize = theme.fonts?.sizeM || 16;
-  let iconSize = 16;
-  let pdh = 4;
-  let pdv = 4;
-  switch (size) {
-    case 'small':
-      fontSize = theme.fonts?.sizeXs || 12;
-      iconSize = 12;
-      pdv = 2;
-      break;
-    case 'medium':
-      fontSize = theme.fonts?.sizeS || 14;
-      iconSize = 16;
-      break;
-    case 'large':
-      fontSize = theme.fonts?.sizeM || 16;
-      iconSize = 20;
-      pdh = 8;
-      pdv = 8;
-      break;
-  }
-  return {
-    container: {
-      marginTop: 4,
-      marginRight: 8,
-      width: 'auto',
-      paddingHorizontal: 4,
-      paddingVertical: 2,
-      backgroundColor: backgroundColor || theme.colors.grey5,
-      color: theme.colors.grey1,
-      borderRadius: 4
-    },
-    labelIconContainer: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingVertical: pdv,
-      paddingHorizontal: pdh,
-      marginBottom: 8
-    },
-    labelIcon: {
-      marginRight: 4,
-      width: iconSize,
-      height: iconSize
-    },
-    labelTitle: {
-      fontSize: fontSize,
-      letterSpacing: 0.1,
-      color: theme.colors.grey1
-    }
-  };
-});
-export default withTheme(IconText);
-//# sourceMappingURL=IconText.js.map    _f = _e.size,
+var useStyles = (0, themed_1.makeStyles)(function (theme, props) {
+  var _a, _b, _c, _d;
+  var _e = props || {},
+    _f = _e.size,
     size = _f === void 0 ? 'medium' : _f,
     backgroundColor = _e.backgroundColor;
   var fontSize = ((_a = theme.fonts) === null || _a === void 0 ? void 0 : _a.sizeM) || 16;
@@ -158,4 +133,3 @@ export default withTheme(IconText);
   };
 });
 exports.default = (0, themed_1.withTheme)(IconText);
-//# sourceMappingURL=IconText.js.map