@beppla/tapas-ui 1.0.70 → 1.0.72

package/module/Button/ButtonGroup.js

@@ -1,128 +1,136 @@
-"use strict";
-
-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];
-      }
-    };
+import React, { useState } from 'react';
+import { makeStyles } from '@rneui/themed';
+import { View, Text, TouchableOpacity } from 'react-native';
+import Hoverable from '../Hoverable/Hoverable';
+import Icon from '../Icons/TapasIcon';
+const useStyles = makeStyles(theme => ({
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  buttonWrap: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: 56,
+    paddingVertical: 8,
+    backgroundColor: theme.colors.grey5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer'
+  },
+  title: {
+    fontFamily: theme.fonts.fontFamily,
+    fontSize: theme.fonts.sizeM,
+    fontWeight: theme.fonts.weightM,
+    color: theme.colors.colorTextPrimary,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 40,
+    marginLeft: 4,
+    marginRight: 12
+  },
+  first: {
+    borderTopLeftRadius: theme.radius.full,
+    borderBottomLeftRadius: theme.radius.full,
+    paddingLeft: 8,
+    paddingRight: 12
+  },
+  last: {
+    borderTopRightRadius: theme.radius.full,
+    borderBottomRightRadius: theme.radius.full,
+    borderLeftWidth: 1,
+    borderLeftColor: theme.colors.grey3,
+    paddingLeft: 12,
+    paddingRight: 8
+  },
+  middle: {
+    borderLeftWidth: 1,
+    borderLeftColor: theme.colors.grey3,
+    paddingHorizontal: 12
+  },
+  buttonHovered: {
+    backgroundColor: theme?.colors?.grey3
+  },
+  selectedStyle: {
+    backgroundColor: theme?.colors?.grey3
+  },
+  disabledStyle: {
+    backgroundColor: theme?.colors?.grey3
+  },
+  baseButton: {
+    fontFamily: theme?.fonts?.fontFamily,
+    fontSize: theme?.fonts.sizeM,
+    fontWeight: theme?.fonts.weightM,
+    minWidth: 80
+  },
+  icon: {
+    marginLeft: 8
+  },
+  disabledIcon: {
+    marginLeft: 8,
+    color: theme.colors.disabled
+  },
+  disabledTitle: {
+    color: theme.colors.disabled
   }
-  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);
+}));
+const ButtonGroup = ({
+  buttons,
+  hoveredStyle = {},
+  selectedStyle = {},
+  ...props
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const styles = useStyles(props);
+  const handleMouseEnter = index => {
+    setIsHovered(true);
+    setHoveredIndex(index);
   };
-  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;
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    setHoveredIndex(null);
   };
-}();
-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 __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
+  const handlePress = (index, button) => {
+    setSelected(index);
+    button.onPress && button.onPress(index);
+  };
+  const getButtonStyle = index => {
+    const base = [index == 0 && styles.first, index === buttons.length - 1 && styles.last, index !== 0 && index !== buttons.length - 1 && styles.middle];
+    const style = isHovered && hoveredIndex === index ? [...base, styles.buttonHovered, hoveredStyle] : base;
+    return selected === index ? [...style, styles.selectedStyle, selectedStyle] : style;
   };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.buttonContainer
+  }, buttons.map((button, index) => {
+    return !button.disabled ? /*#__PURE__*/React.createElement(Hoverable, {
+      onHoverIn: () => handleMouseEnter(index),
+      onHoverOut: handleMouseLeave
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: () => {
+        handlePress(index, button);
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.buttonWrap, ...getButtonStyle(index)]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      size: 20,
+      name: button.icon || '',
+      style: styles.icon
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.title
+    }, button.title)))) : /*#__PURE__*/React.createElement(View, {
+      style: [styles.buttonWrap, index == 0 && styles.first, index === buttons.length - 1 && styles.last, index !== 0 && index !== buttons.length - 1 && styles.middle, styles.disabledStyle]
+    }, /*#__PURE__*/React.createElement(Icon, {
+      size: 20,
+      name: button.icon || '',
+      style: styles.disabledIcon
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.title, styles.disabledTitle]
+    }, button.title));
+  }));
 };
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var react_1 = __importStar(require("react"));
-var themed_1 = require("@rneui/themed");
-var react_native_1 = require("react-native");
-var Hoverable_1 = __importDefault(require("../Hoverable/Hoverable"));
-var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
-var useStyles = (0, themed_1.makeStyles)(function (theme) {
-  var _a, _b, _c, _d;
-  return {
-    buttonContainer: {
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    buttonWrap: {
-      display: 'flex',
-      flexDirection: 'row',
-      height: 56,
-      paddingVertical: 8,
-      backgroundColor: theme.colors.grey5,
-      justifyContent: 'center',
-      alignItems: 'center',
-      cursor: 'pointer'
-    },
-    title: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightM,
-      color: theme.colors.colorTextPrimary,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      minWidth: 40,
-      marginLeft: 4,
-      marginRight: 12
-    },
-    first: {
-      borderTopLeftRadius: theme.radius.full,
-      borderBottomLeftRadius: theme.radius.full,
-      paddingLeft: 8,
-      paddingRight: 12
-    },
-    last: {
-      borderTopRightRadius: theme.radius.full,
-      borderBottomRightRadius: theme.radius.full,
-      borderLeftWidth: 1,
-      borderLeftColor: theme.colors.grey3,
-      paddingLeft: 12,
-      paddingRight: 8
-    },
-    middle: {
-      borderLeftWidth: 1,
-      borderLeftColor: theme.colors.grey3,
-      paddingHorizontal: 12
-    },
-    buttonHovered: {
-      backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.grey3
-    },
-    selectedStyle: {
-      backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey3
+export default ButtonGroup;
     },
     disabledStyle: {
       backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey3
@@ -211,4 +219,3 @@ var ButtonGroup = function (_a) {
   }));
 };
 exports.default = ButtonGroup;
-//# sourceMappingURL=ButtonGroup.js.map

package/module/Button/react-native-hoverable.d.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=react-native-hoverable.d.js.map