@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/FieldBase/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default, FieldBase, FieldErrorGlyph, FieldLabel, FieldMessage, RequiredMark, RequiredPlaceholder, resolveFieldSize, resolveFieldTextStyle } from "./FieldBase.js";
+export { FLOATED_LABEL_SCALE, useFloatingLabel } from "./useFloatingLabel.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/FieldBase/useFloatingLabel.js

@@ -0,0 +1,166 @@
+"use strict";
+
+/**
+ * The field family's floating label, shared by Input and SearchBar.
+ *
+ * Resting, the label sits over the text (past any leading icon) at the
+ * field's font size; on focus or with a value it rises to the box's top edge
+ * at 85% scale and slides to the field's left edge, straight above the icon.
+ * On the outlined variant the top border is cut where the floated label
+ * lands (`topNotch`, handed to FieldBase), so the rule never runs behind the
+ * text and the label needs no masking background.
+ *
+ * The hook owns the animation, the label's measured layout (which sizes the
+ * notch) and the Animated.Text itself; the consumer places `node` inside the
+ * wrapper that also holds FieldBase (position relative, overflow visible)
+ * and passes `topNotch` through.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import { createAnimatedValue, fontFor, useTheme } from "../../theme/index.js";
+import { RequiredMark } from "./FieldBase.js";
+
+/** The floated label's scale; the outlined notch is sized from it. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FLOATED_LABEL_SCALE = 0.85;
+/** One extra point up: the glyphs sit a touch low in their box, so centring the box on the border leaves the visible text a hair below it. */
+const FLOATED_LABEL_LIFT = 1;
+/** Air either side of the floated label inside the outlined notch. */
+const NOTCH_GAP = 4;
+export const useFloatingLabel = ({
+  label,
+  enabled,
+  floated,
+  required = false,
+  variant,
+  sizeTokens,
+  leadingOffset,
+  trailingOffset = 0,
+  textAlign = 'left',
+  paddingLeft,
+  lineHeight,
+  restNudge = 0,
+  floatTrim = 0,
+  color,
+  style
+}) => {
+  const theme = useTheme();
+  const anim = useRef(createAnimatedValue(floated ? 1 : 0)).current;
+  // The label's unscaled layout inside the wrapper; sizes the notch.
+  const [layout, setLayout] = useState(null);
+  useEffect(() => {
+    const a = Animated.timing(anim, {
+      toValue: floated ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    a.start();
+    return () => a.stop();
+  }, [floated, anim, theme.motion.duration.fast, theme.motion.easing.standard]);
+  return useMemo(() => {
+    if (!enabled || !label) {
+      return {
+        node: null,
+        topNotch: undefined
+      };
+    }
+    // Resting top and box height: a single-line label's box is the platform's
+    // text box; with an explicit line height the box is exactly one line, its
+    // centre the first line's centre (where FieldBase centres the icon too).
+    // The label's box: the explicit line (textarea) or, once measured, the
+    // platform's own text box, which differs between Android (font padding
+    // above the glyphs) and iOS (a tighter box). Single-line labels are
+    // centred in the field the way FieldBase centres its content, so the
+    // label sits on the text's line on both platforms; a textarea's rests on
+    // its first line from the top padding.
+    const boxHeight = lineHeight ?? layout?.height ?? sizeTokens.fontSize;
+    const restTop = lineHeight != null ? sizeTokens.paddingVertical + restNudge : Math.max(0, (sizeTokens.minHeight - boxHeight) / 2);
+    const floatTranslateY = -(restTop + boxHeight / 2 + FLOATED_LABEL_LIFT - floatTrim);
+    const translateY = anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, floatTranslateY]
+    });
+    const scale = anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, FLOATED_LABEL_SCALE]
+    });
+    // The resting label sits over the text, past the icon. Floated, it belongs
+    // at the field's left edge, straight above the icon, so it slides back by
+    // the leading offset while it rises. The same spot on every radius, a
+    // pill included: the label's position is the one thing that must not
+    // move between variants.
+    const floatShift = -leadingOffset;
+    const translateX = anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, floatShift]
+    });
+    // `transformOrigin` keeps the scale anchored at the edge the label is
+    // positioned from, so its text edge stays aligned with the field's text.
+    const position = textAlign === 'right' ? {
+      right: sizeTokens.paddingHorizontal + trailingOffset,
+      transformOrigin: 'right center'
+    } : textAlign === 'center' ? {
+      alignSelf: 'center',
+      transformOrigin: 'center'
+    } : {
+      left: paddingLeft + leadingOffset,
+      transformOrigin: 'left center'
+    };
+
+    // Outlined: cut the top border where the floated label lands, sized from
+    // the measured width at the floated scale plus a little air either side,
+    // opening with the float animation.
+    const floatedWidth = layout ? layout.width * FLOATED_LABEL_SCALE : 0;
+    const originShift = !layout ? 0 : textAlign === 'right' ? layout.width - floatedWidth : textAlign === 'center' ? (layout.width - floatedWidth) / 2 : 0;
+    const topNotch = variant === 'outlined' && layout ? {
+      left: layout.x + floatShift + originShift - NOTCH_GAP,
+      width: anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, floatedWidth + NOTCH_GAP * 2]
+      })
+    } : undefined;
+    const node = /*#__PURE__*/_jsxs(Animated.Text, {
+      pointerEvents: "none",
+      onLayout: e => {
+        const {
+          x,
+          width,
+          height
+        } = e.nativeEvent.layout;
+        setLayout(prev => prev && prev.x === x && prev.width === width && prev.height === height ? prev : {
+          x,
+          width,
+          height
+        });
+      },
+      style: [styles.label, position, {
+        top: restTop,
+        color,
+        fontSize: sizeTokens.fontSize,
+        lineHeight,
+        ...fontFor(theme, 'medium'),
+        transform: [{
+          translateX
+        }, {
+          translateY
+        }, {
+          scale
+        }]
+      }, style],
+      children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+    });
+    return {
+      node,
+      topNotch
+    };
+  }, [enabled, label, required, variant, sizeTokens, leadingOffset, trailingOffset, textAlign, paddingLeft, lineHeight, restNudge, floatTrim, color, style, anim, layout, theme]);
+};
+const styles = StyleSheet.create({
+  label: {
+    position: 'absolute',
+    zIndex: 1
+  }
+});
+//# sourceMappingURL=useFloatingLabel.js.map