@webority/mobile-ui 0.0.38 → 0.1.0

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

@@ -1,5 +1 @@
-"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
+export{default,FieldBase,FieldErrorGlyph,FieldLabel,FieldMessage,fieldTextAsString,hasFieldText,RequiredMark,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"./FieldBase.js";export{FLOATED_LABEL_SCALE,useFloatingLabel}from"./useFloatingLabel.js";

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

@@ -1,177 +1 @@
-"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();
-  // Two values on one timeline. The label only moves by transform, so it runs
-  // on the native driver and the float never waits on the JS thread, which is
-  // busy exactly then with the keyboard opening. The outlined notch animates a
-  // width, which only the JS driver can, so it has its own value.
-  const anim = useRef(createAnimatedValue(floated ? 1 : 0)).current;
-  const notchAnim = useRef(createAnimatedValue(floated ? 1 : 0)).current;
-  const notched = variant === 'outlined';
-  // The label's unscaled layout inside the wrapper; sizes the notch.
-  const [layout, setLayout] = useState(null);
-  useEffect(() => {
-    const to = floated ? 1 : 0;
-    const timing = (value, useNativeDriver) => Animated.timing(value, {
-      toValue: to,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver
-    });
-    if (!notched) {
-      notchAnim.setValue(to);
-    }
-    const a = notched ? Animated.parallel([timing(anim, true), timing(notchAnim, false)]) : timing(anim, true);
-    a.start();
-    return () => a.stop();
-  }, [floated, notched, anim, notchAnim, 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 = notched && layout ? {
-      left: layout.x + floatShift + originShift - NOTCH_GAP,
-      width: notchAnim.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, notched, sizeTokens, leadingOffset, trailingOffset, textAlign, paddingLeft, lineHeight, restNudge, floatTrim, color, style, anim, notchAnim, layout, theme]);
-};
-const styles = StyleSheet.create({
-  label: {
-    position: 'absolute',
-    zIndex: 1
-  }
-});
-//# sourceMappingURL=useFloatingLabel.js.map
+import{useEffect as t,useMemo as e,useRef as n,useState as i}from"react";import{Animated as r,Easing as o,StyleSheet as a}from"react-native";import{createAnimatedValue as l,fontFor as s,useTheme as u}from"../../theme/index.js";import{hasFieldText as d,RequiredMark as g}from"./FieldBase.js";import{jsx as p,jsxs as c}from"react/jsx-runtime";export const FLOATED_LABEL_SCALE=.85;export const useFloatingLabel=({label:a,enabled:h,floated:m,required:x=!1,variant:v,sizeTokens:R,leadingOffset:b,trailingOffset:w=0,textAlign:z="left",paddingLeft:L,lineHeight:O,restNudge:j=0,floatTrim:E=0,color:S,style:y})=>{const A=u(),H=n(l(m?1:0)).current,N=n(l(m?1:0)).current,T="outlined"===v,[F,V]=i(null);return t(()=>{const t=m?1:0,timing=(e,n)=>r.timing(e,{toValue:t,duration:A.motion.duration.fast,easing:o.bezier(...A.motion.easing.standard),useNativeDriver:n});T||N.setValue(t);const e=T?r.parallel([timing(H,!0),timing(N,!1)]):timing(H,!0);return e.start(),()=>e.stop()},[m,T,H,N,A.motion.duration.fast,A.motion.easing.standard]),e(()=>{if(!h||!d(a))return{node:null,topNotch:void 0};const t=O??F?.height??R.fontSize,e=null!=O?R.paddingVertical+j:Math.max(0,(R.minHeight-t)/2),n=-(e+t/2+1-E),i=H.interpolate({inputRange:[0,1],outputRange:[0,n]}),o=H.interpolate({inputRange:[0,1],outputRange:[1,.85]}),l=-b,u=H.interpolate({inputRange:[0,1],outputRange:[0,l]}),m="right"===z?{right:R.paddingHorizontal+w,transformOrigin:"right center"}:"center"===z?{alignSelf:"center",transformOrigin:"center"}:{left:L+b,transformOrigin:"left center"},v=F?.85*F.width:0,B=F?"right"===z?F.width-v:"center"===z?(F.width-v)/2:0:0,D=T&&F?{left:F.x+l+B-4,width:N.interpolate({inputRange:[0,1],outputRange:[0,v+8]})}:void 0;return{node:c(r.Text,{pointerEvents:"none",onLayout:t=>{const{x:e,width:n,height:i}=t.nativeEvent.layout;V(t=>t&&t.x===e&&t.width===n&&t.height===i?t:{x:e,width:n,height:i})},style:[f.label,m,{top:e,color:S,fontSize:R.fontSize,lineHeight:O,...s(A,"medium"),transform:[{translateX:u},{translateY:i},{scale:o}]},y],children:[a,x?p(g,{}):null]}),topNotch:D}},[h,a,x,T,R,b,w,z,L,O,j,E,S,y,H,N,F,A])};const f=a.create({label:{position:"absolute",zIndex:1}});