@swan-io/lake 8.12.0 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.12.0",
+  "version": "8.13.0",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/LakeButton.d.ts

@@ -21,6 +21,7 @@ export type ButtonProps = {
     href?: string;
     hrefAttrs?: HrefAttrs;
     pill?: boolean;
+    disabledUntil?: string;
 } & ({
     ariaLabel: string;
     children?: never;

package/src/components/LakeButton.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, forwardRef, Fragment, memo } from "react";
+import { Option } from "@swan-io/boxed";
+import { Children, forwardRef, Fragment, memo, useEffect, useState } from "react";
 import { ActivityIndicator, StyleSheet, View, } from "react-native";
-import { match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, spacings, texts, } from "../constants/design";
 import { isNotNullish, isNullish } from "../utils/nullish";
@@ -52,6 +53,12 @@ const styles = StyleSheet.create({
         backgroundColor: colors.gray[900],
         borderRadius: radii[6],
     },
+    loaderContainerProgress: {
+        opacity: 0.5,
+        backgroundColor: colors.gray[900],
+        transformOrigin: "0 0",
+        ...StyleSheet.absoluteFillObject,
+    },
     small: {
         height: 40,
         paddingLeft: 16,
@@ -83,6 +90,8 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         transform: "translateZ(0px)",
+        borderRadius: radii[6],
+        overflow: "hidden",
     },
     group: {
         flexDirection: "row",
@@ -112,7 +121,8 @@ const styles = StyleSheet.create({
         visibility: "hidden",
     },
 });
-export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", direction = "row", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", iconSize = size === "small" ? 18 : 20, style, forceBackground = false, href, hrefAttrs, pill = false, }, forwardedRef) => {
+export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", direction = "row", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", iconSize = size === "small" ? 18 : 20, style, forceBackground = false, href, hrefAttrs, pill = false, disabledUntil, }, forwardedRef) => {
+    const [progressAnimation, setProgressAnimation] = useState(() => Option.None());
     const isPrimary = mode === "primary";
     const isSmall = size === "small";
     const vertical = direction === "column";
@@ -122,14 +132,43 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
     const hasIconStart = hasIcon && iconPosition === "start";
     const hasIconEnd = hasIcon && iconPosition === "end";
     const hasOnlyIcon = hasIcon && isNullish(children);
-    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
+    useEffect(() => {
+        if (disabledUntil == null) {
+            return;
+        }
+        const startTime = Date.now();
+        const endTime = new Date(disabledUntil).getTime();
+        const config = {
+            startTime,
+            duration: endTime - startTime,
+            endTime,
+        };
+        const tick = () => {
+            const now = Date.now();
+            if (now >= config.endTime) {
+                setProgressAnimation(Option.None());
+            }
+            else {
+                setProgressAnimation(Option.Some({
+                    startTime: config.startTime,
+                    duration: config.duration,
+                    now: Date.now(),
+                }));
+                animationFrameId = requestAnimationFrame(tick);
+            }
+        };
+        let animationFrameId = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(animationFrameId);
+    }, [disabledUntil]);
+    const shouldHideContents = loading || progressAnimation.isSome();
+    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled || progressAnimation.isSome(), ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
             isSmall && styles.small,
             vertical && [styles.vertical, isSmall && styles.verticalSmall],
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
             hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
-            disabled && commonStyles.disabled,
+            (disabled || progressAnimation.isSome()) && commonStyles.disabled,
             disabled && forceBackground && styles.resetOpacity,
             grow && styles.grow,
             match(mode)
@@ -174,11 +213,16 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                     : hovered || pressed
                         ? colors[color][700]
                         : colors[color][600];
-            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize, style: loading && styles.hidden }), isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth })] })), typeof children === "string" || typeof children === "number" ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", style: [
+            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize, style: shouldHideContents && styles.hidden }), isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth })] })), typeof children === "string" || typeof children === "number" ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", style: [
                             isSmall ? styles.textSmall : styles.text,
-                            loading && styles.hidden,
+                            shouldHideContents && styles.hidden,
                             { color: textColor },
-                        ], children: children })) : (_jsx(Box, { alignItems: "center", direction: "row", justifyContent: "center", style: [vertical && styles.vertical, loading && styles.hidden], children: children })), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth }), _jsx(Icon, { color: textColor, name: icon, size: iconSize, style: loading && styles.hidden })] })), loading && (_jsx(View, { style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: isPrimary ? colors[color].contrast : colors[color].primary, size: iconSize }) })), isPrimary && _jsx(View, { style: [styles.hiddenView, pressed && styles.pressed] }), pill && _jsx(View, { style: styles.pill })] }));
+                        ], children: children })) : (_jsx(Box, { alignItems: "center", direction: "row", justifyContent: "center", style: [vertical && styles.vertical, shouldHideContents && styles.hidden], children: children })), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth }), _jsx(Icon, { color: textColor, name: icon, size: iconSize, style: shouldHideContents && styles.hidden })] })), loading && (_jsx(View, { style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: isPrimary ? colors[color].contrast : colors[color].primary, size: iconSize }) })), isPrimary && _jsx(View, { style: [styles.hiddenView, pressed && styles.pressed] }), match(progressAnimation)
+                        .with(Option.P.Some(P.select()), ({ startTime, now, duration }) => (_jsxs(View, { style: styles.loaderContainer, children: [_jsx(View, { style: [
+                                    styles.loaderContainerProgress,
+                                    { transform: `scaleX(${((now - startTime) / duration) * 100}%)` },
+                                ] }), _jsx(LakeText, { color: isPrimary ? colors[color].contrast : colors[color].primary, children: Math.ceil((duration - (now - startTime)) / 1000) })] })))
+                        .otherwise(() => null), pill && _jsx(View, { style: styles.pill })] }));
         } }));
 }));
 LakeButton.displayName = "Button";