react-native-skia-responsive-text/dist/commonjs/components/TextLine.js

A library providing a wrapper for the React Native Skia Text component, offering features like user-friendly text alignment, efficient multiline text management, and straightforward text truncation.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNativeSkia = require("@shopify/react-native-skia");
var _react = require("react");
var _reactNativeReanimated = require("react-native-reanimated");
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function TextLine(_ref) {
  let {
    animationProgress,
    animationSettings,
    fontSize,
    horizontalAlignmentOffsets,
    index,
    lineHeight,
    verticalAlignmentOffset,
    ...rest
  } = _ref;
  const getCurrentX = () => {
    'worklet';

    return horizontalAlignmentOffsets.value[index] ?? 0;
  };
  const getCurrentY = () => {
    'worklet';

    return verticalAlignmentOffset.value + index * lineHeight.value + fontSize;
  };
  const startX = (0, _reactNativeReanimated.useSharedValue)(getCurrentX());
  const startY = (0, _reactNativeReanimated.useSharedValue)(getCurrentY());
  const prevTargetX = (0, _reactNativeReanimated.useSharedValue)(getCurrentX());
  const prevTargetY = (0, _reactNativeReanimated.useSharedValue)(getCurrentY());
  const x = (0, _reactNativeReanimated.useSharedValue)(getCurrentX());
  const y = (0, _reactNativeReanimated.useSharedValue)(getCurrentY());
  (0, _reactNativeReanimated.useAnimatedReaction)(() => ({
    x: horizontalAlignmentOffsets.value[index] ?? 0,
    y: verticalAlignmentOffset.value + index * lineHeight.value + fontSize
  }), target => {
    if (animationSettings) {
      const {
        onComplete,
        ...animation
      } = animationSettings;
      x.value = (0, _reactNativeReanimated.withTiming)(target.x, animation, onComplete);
      y.value = (0, _reactNativeReanimated.withTiming)(target.y, animation, onComplete);
    } else if (!animationProgress) {
      x.value = target.x;
      y.value = target.y;
    }
  }, [animationProgress, animationSettings, index, fontSize]);
  (0, _reactNativeReanimated.useAnimatedReaction)(() => animationProgress?.value ?? null, progress => {
    if (progress === null) return;
    const targetX = getCurrentX();
    const targetY = getCurrentY();
    if (targetX !== prevTargetX.value || targetY !== prevTargetY.value) {
      startX.value = x.value;
      startY.value = y.value;
      prevTargetX.value = targetX;
      prevTargetY.value = targetY;
    }
    x.value = (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [startX.value, targetX]);
    y.value = (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [startY.value, targetY]);
  }, [animationProgress]);
  return /*#__PURE__*/React.createElement(_reactNativeSkia.Text, _extends({}, rest, {
    x: x,
    y: y
  }));
}
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(TextLine);
//# sourceMappingURL=TextLine.js.map