@ovotech/element-native 4.4.8 → 4.4.9

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import { IconName } from '../../providers/icons-types';
+export type ButtonVariantName = 'surface' | 'destructive' | 'outline' | 'outline-variant';
+type ButtonBase = PropsWithChildren<TouchableOpacityProps & {
+    variant?: ButtonVariantName;
+    ref?: Ref<TouchableOpacity>;
+    inverted?: boolean;
+    size?: 'default' | 'large';
+    fullWidth?: boolean;
+}>;
+type ButtonWithText = ButtonBase & {
+    children: React.ReactNode;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+};
+type ButtonIconOnly = ButtonBase & {
+    children?: never;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+};
+export type ButtonProps = ButtonWithText | ButtonIconOnly;
+declare const Button: ({ iconLeft, iconRight, children, fullWidth, variant, inverted, size, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+type OmittedButtonProps = Omit<ComponentProps<typeof Button>, 'variant' | 'ref'> & {
+    ref: Ref<TouchableOpacity>;
+};
+declare const ButtonDestructive: import("react").ForwardRefExoticComponent<Omit<OmittedButtonProps, "ref"> & import("react").RefAttributes<TouchableOpacity>>;
+export { Button, ButtonDestructive };

package/dist/components/Button/Button.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDestructive = exports.Button = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
+var Button_styles_1 = require("./Button.styles");
+var ButtonWrapper = function (_a) {
+    var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
+    return ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+};
+var Button = function (_a) {
+    var iconLeft = _a.iconLeft, iconRight = _a.iconRight, children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'surface' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'default' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size"]);
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    var isIconOnly = !children;
+    return ((0, jsx_runtime_1.jsx)(ButtonWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(Button_styles_1.StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: size === 'default' ? (0, element_core_1.numToPx)(16) : (0, element_core_1.numToPx)(20) })), children ? ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: size === 'default' ? (0, element_core_1.numToPx)(16) : (0, element_core_1.numToPx)(20) }))] }) })));
+};
+exports.Button = Button;
+var ButtonDestructive = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Button, __assign({ variant: "destructive" }, props, { ref: ref }))); });
+exports.ButtonDestructive = ButtonDestructive;