@webority/mobile-ui 0.0.39 → 0.2.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
+"use strict";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
+"use strict";import{useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,StyleSheet}from"react-native";import{createAnimatedValue,fontFor,useTheme}from"../../theme/index.js";import{hasFieldText,RequiredMark}from"./FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const FLOATED_LABEL_SCALE=.85;const FLOATED_LABEL_LIFT=1,NOTCH_GAP=4;export const useFloatingLabel=({label:e,enabled:t,floated:n,required:i=!1,variant:a,sizeTokens:r,leadingOffset:o,trailingOffset:s=0,textAlign:l="left",paddingLeft:u,lineHeight:d,restNudge:g=0,floatTrim:m=0,color:f,style:c})=>{const h=useTheme(),p=useRef(createAnimatedValue(n?1:0)).current,x=useRef(createAnimatedValue(n?1:0)).current,A="outlined"===a,[R,E]=useState(null);return useEffect(()=>{const e=n?1:0,timing=(t,n)=>Animated.timing(t,{toValue:e,duration:h.motion.duration.fast,easing:Easing.bezier(...h.motion.easing.standard),useNativeDriver:n});A||x.setValue(e);const t=A?Animated.parallel([timing(p,!0),timing(x,!1)]):timing(p,!0);return t.start(),()=>t.stop()},[n,A,p,x,h.motion.duration.fast,h.motion.easing.standard]),useMemo(()=>{if(!t||!hasFieldText(e))return{node:null,topNotch:void 0};const n=d??R?.height??r.fontSize,a=null!=d?r.paddingVertical+g:Math.max(0,(r.minHeight-n)/2),L=-(a+n/2+1-m),S=p.interpolate({inputRange:[0,1],outputRange:[0,L]}),T=p.interpolate({inputRange:[0,1],outputRange:[1,.85]}),j=-o,v=p.interpolate({inputRange:[0,1],outputRange:[0,j]}),F="right"===l?{right:r.paddingHorizontal+s,transformOrigin:"right center"}:"center"===l?{alignSelf:"center",transformOrigin:"center"}:{left:u+o,transformOrigin:"left center"},_=R?.85*R.width:0,y=R?"right"===l?R.width-_:"center"===l?(R.width-_)/2:0:0,O=A&&R?{left:R.x+j+y-4,width:x.interpolate({inputRange:[0,1],outputRange:[0,_+8]})}:void 0;return{node:_jsxs(Animated.Text,{pointerEvents:"none",onLayout:e=>{const{x:t,width:n,height:i}=e.nativeEvent.layout;E(e=>e&&e.x===t&&e.width===n&&e.height===i?e:{x:t,width:n,height:i})},style:[styles.label,F,{top:a,color:f,fontSize:r.fontSize,lineHeight:d,...fontFor(h,"medium"),transform:[{translateX:v},{translateY:S},{scale:T}]},c],children:[e,i?_jsx(RequiredMark,{}):null]}),topNotch:O}},[t,e,i,A,r,o,s,l,u,d,g,m,f,c,p,x,R,h])};const styles=StyleSheet.create({label:{position:"absolute",zIndex:1}});