@webority/mobile-ui 0.0.0-stage → 0.0.34

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FLOATED_LABEL_SCALE", {
+  enumerable: true,
+  get: function () {
+    return _useFloatingLabel.FLOATED_LABEL_SCALE;
+  }
+});
+Object.defineProperty(exports, "FieldBase", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.FieldBase;
+  }
+});
+Object.defineProperty(exports, "FieldErrorGlyph", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.FieldErrorGlyph;
+  }
+});
+Object.defineProperty(exports, "FieldLabel", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.FieldLabel;
+  }
+});
+Object.defineProperty(exports, "FieldMessage", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.FieldMessage;
+  }
+});
+Object.defineProperty(exports, "RequiredMark", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.RequiredMark;
+  }
+});
+Object.defineProperty(exports, "RequiredPlaceholder", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.RequiredPlaceholder;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.default;
+  }
+});
+Object.defineProperty(exports, "resolveFieldSize", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.resolveFieldSize;
+  }
+});
+Object.defineProperty(exports, "resolveFieldTextStyle", {
+  enumerable: true,
+  get: function () {
+    return _FieldBase.resolveFieldTextStyle;
+  }
+});
+Object.defineProperty(exports, "useFloatingLabel", {
+  enumerable: true,
+  get: function () {
+    return _useFloatingLabel.useFloatingLabel;
+  }
+});
+var _FieldBase = _interopRequireWildcard(require("./FieldBase.js"));
+var _useFloatingLabel = require("./useFloatingLabel.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingLabel = exports.FLOATED_LABEL_SCALE = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _FieldBase = require("./FieldBase.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+/** The floated label's scale; the outlined notch is sized from it. */
+const FLOATED_LABEL_SCALE = exports.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;
+const useFloatingLabel = ({
+  label,
+  enabled,
+  floated,
+  required = false,
+  variant,
+  sizeTokens,
+  leadingOffset,
+  trailingOffset = 0,
+  textAlign = 'left',
+  paddingLeft,
+  lineHeight,
+  restNudge = 0,
+  floatTrim = 0,
+  color,
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const anim = (0, _react.useRef)((0, _index.createAnimatedValue)(floated ? 1 : 0)).current;
+  // The label's unscaled layout inside the wrapper; sizes the notch.
+  const [layout, setLayout] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const a = _reactNative.Animated.timing(anim, {
+      toValue: floated ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    a.start();
+    return () => a.stop();
+  }, [floated, anim, theme.motion.duration.fast, theme.motion.easing.standard]);
+  return (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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,
+        ...(0, _index.fontFor)(theme, 'medium'),
+        transform: [{
+          translateX
+        }, {
+          translateY
+        }, {
+          scale
+        }]
+      }, style],
+      children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredMark, {}) : null]
+    });
+    return {
+      node,
+      topNotch
+    };
+  }, [enabled, label, required, variant, sizeTokens, leadingOffset, trailingOffset, textAlign, paddingLeft, lineHeight, restNudge, floatTrim, color, style, anim, layout, theme]);
+};
+exports.useFloatingLabel = useFloatingLabel;
+const styles = _reactNative.StyleSheet.create({
+  label: {
+    position: 'absolute',
+    zIndex: 1
+  }
+});
+//# sourceMappingURL=useFloatingLabel.js.map