@oxyhq/services 5.16.23 → 5.16.25

package/lib/module/ui/components/Surface.js

@@ -0,0 +1,252 @@
+"use strict";
+
+import * as React from 'react';
+import { Animated, Platform, StyleSheet } from 'react-native';
+import { useInternalTheme } from './theming';
+import overlay, { isAnimatedValue } from './styles/overlay';
+import shadow from './styles/shadow';
+import { forwardRef } from './utils/forwardRef';
+import { splitStyles } from './utils/splitStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MD2Surface = forwardRef(({
+  style,
+  theme: overrideTheme,
+  ...rest
+}, ref) => {
+  const {
+    elevation = 4
+  } = StyleSheet.flatten(style) || {};
+  const {
+    dark: isDarkTheme,
+    mode,
+    colors
+  } = useInternalTheme(overrideTheme);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    ref: ref,
+    ...rest,
+    style: [{
+      backgroundColor: isDarkTheme && mode === 'adaptive' ? overlay(elevation, colors?.surface) : colors?.surface
+    }, elevation ? shadow(elevation) : null, style]
+  });
+});
+const outerLayerStyleProperties = ['position', 'alignSelf', 'top', 'right', 'bottom', 'left', 'start', 'end', 'flex', 'flexShrink', 'flexGrow', 'width', 'height', 'transform', 'opacity'];
+const shadowColor = '#000';
+const iOSShadowOutputRanges = [{
+  shadowOpacity: 0.15,
+  height: [0, 1, 2, 4, 6, 8],
+  shadowRadius: [0, 3, 6, 8, 10, 12]
+}, {
+  shadowOpacity: 0.3,
+  height: [0, 1, 1, 1, 2, 4],
+  shadowRadius: [0, 1, 2, 3, 3, 4]
+}];
+const inputRange = [0, 1, 2, 3, 4, 5];
+function getStyleForShadowLayer(elevation, layer) {
+  if (isAnimatedValue(elevation)) {
+    return {
+      shadowColor,
+      shadowOpacity: elevation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
+        extrapolate: 'clamp'
+      }),
+      shadowOffset: {
+        width: 0,
+        height: elevation.interpolate({
+          inputRange,
+          outputRange: iOSShadowOutputRanges[layer].height
+        })
+      },
+      shadowRadius: elevation.interpolate({
+        inputRange,
+        outputRange: iOSShadowOutputRanges[layer].shadowRadius
+      })
+    };
+  }
+  return {
+    shadowColor,
+    shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
+    shadowOffset: {
+      width: 0,
+      height: iOSShadowOutputRanges[layer].height[elevation]
+    },
+    shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation]
+  };
+}
+const SurfaceIOS = forwardRef(({
+  elevation,
+  style,
+  backgroundColor,
+  testID,
+  children,
+  mode = 'elevated',
+  container,
+  ...props
+}, ref) => {
+  const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
+    const flattenedStyles = StyleSheet.flatten(style) || {};
+    const [filteredStyles, outerLayerStyles, borderRadiusStyles] = splitStyles(flattenedStyles, style => outerLayerStyleProperties.includes(style) || style.startsWith('margin'), style => style.startsWith('border') && style.endsWith('Radius'));
+    if (process.env.NODE_ENV !== 'production' && filteredStyles.overflow === 'hidden' && elevation !== 0) {
+      console.warn('When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.');
+    }
+    const bgColor = flattenedStyles.backgroundColor || backgroundColor;
+    const isElevated = mode === 'elevated';
+    const outerLayerViewStyles = {
+      ...(isElevated && getStyleForShadowLayer(elevation, 0)),
+      ...outerLayerStyles,
+      ...borderRadiusStyles,
+      backgroundColor: bgColor
+    };
+    const innerLayerViewStyles = {
+      ...(isElevated && getStyleForShadowLayer(elevation, 1)),
+      ...filteredStyles,
+      ...borderRadiusStyles,
+      flex: flattenedStyles.height || !container && flattenedStyles.flex ? 1 : undefined,
+      backgroundColor: bgColor
+    };
+    return [outerLayerViewStyles, innerLayerViewStyles];
+  }, [style, elevation, backgroundColor, mode, container]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    ref: ref,
+    style: outerLayerViewStyles,
+    testID: `${testID}-outer-layer`,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      ...props,
+      style: innerLayerViewStyles,
+      testID: testID,
+      children: children
+    })
+  });
+});
+
+/**
+ * Surface is a basic container that can give depth to an element with elevation shadow.
+ * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
+ * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
+ * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Surface, Text } from 'react-native-paper';
+ * import { StyleSheet } from 'react-native';
+ *
+ * const MyComponent = () => (
+ *   <Surface style={styles.surface} elevation={4}>
+ *      <Text>Surface</Text>
+ *   </Surface>
+ * );
+ *
+ * export default MyComponent;
+ *
+ * const styles = StyleSheet.create({
+ *   surface: {
+ *     padding: 8,
+ *     height: 80,
+ *     width: 80,
+ *     alignItems: 'center',
+ *     justifyContent: 'center',
+ *   },
+ * });
+ * ```
+ */
+const Surface = forwardRef(({
+  elevation = 1,
+  children,
+  theme: overridenTheme,
+  style,
+  testID = 'surface',
+  mode = 'elevated',
+  ...props
+}, ref) => {
+  const theme = useInternalTheme(overridenTheme);
+  if (!theme.isV3) return /*#__PURE__*/_jsx(MD2Surface, {
+    ...props,
+    theme: theme,
+    style: style,
+    ref: ref,
+    children: children
+  });
+  const {
+    colors
+  } = theme;
+  const inputRange = [0, 1, 2, 3, 4, 5];
+  const backgroundColor = (() => {
+    if (isAnimatedValue(elevation)) {
+      return elevation.interpolate({
+        inputRange,
+        outputRange: inputRange.map(elevation => {
+          return colors.elevation?.[`level${elevation}`];
+        })
+      });
+    }
+    return colors.elevation?.[`level${elevation}`];
+  })();
+  const isElevated = mode === 'elevated';
+  if (Platform.OS === 'web') {
+    const {
+      pointerEvents = 'auto'
+    } = props;
+    return /*#__PURE__*/_jsx(Animated.View, {
+      ...props,
+      pointerEvents: pointerEvents,
+      ref: ref,
+      testID: testID,
+      style: [{
+        backgroundColor
+      }, elevation && isElevated ? shadow(elevation, theme.isV3) : null, style],
+      children: children
+    });
+  }
+  if (Platform.OS === 'android') {
+    const elevationLevel = [0, 3, 6, 9, 12, 15];
+    const getElevationAndroid = () => {
+      if (isAnimatedValue(elevation)) {
+        return elevation.interpolate({
+          inputRange,
+          outputRange: elevationLevel
+        });
+      }
+      return elevationLevel[elevation];
+    };
+    const {
+      margin,
+      padding,
+      transform,
+      borderRadius
+    } = StyleSheet.flatten(style) || {};
+    const outerLayerStyles = {
+      margin,
+      padding,
+      transform,
+      borderRadius
+    };
+    const sharedStyle = [{
+      backgroundColor
+    }, style];
+    return /*#__PURE__*/_jsx(Animated.View, {
+      ...props,
+      testID: testID,
+      ref: ref,
+      style: [{
+        backgroundColor,
+        transform
+      }, outerLayerStyles, sharedStyle, isElevated && {
+        elevation: getElevationAndroid()
+      }],
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(SurfaceIOS, {
+    ...props,
+    ref: ref,
+    elevation: elevation,
+    backgroundColor: backgroundColor,
+    style: style,
+    testID: testID,
+    mode: mode,
+    children: children
+  });
+});
+export default Surface;
+//# sourceMappingURL=Surface.js.map

package/lib/module/ui/components/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","Platform","StyleSheet","useInternalTheme","overlay","isAnimatedValue","shadow","forwardRef","splitStyles","jsx","_jsx","MD2Surface","style","theme","overrideTheme","rest","ref","elevation","flatten","dark","isDarkTheme","mode","colors","View","backgroundColor","surface","outerLayerStyleProperties","shadowColor","iOSShadowOutputRanges","shadowOpacity","height","shadowRadius","inputRange","getStyleForShadowLayer","layer","interpolate","outputRange","extrapolate","shadowOffset","width","SurfaceIOS","testID","children","container","props","outerLayerViewStyles","innerLayerViewStyles","useMemo","flattenedStyles","filteredStyles","outerLayerStyles","borderRadiusStyles","includes","startsWith","endsWith","process","env","NODE_ENV","overflow","console","warn","bgColor","isElevated","flex","undefined","Surface","overridenTheme","isV3","map","OS","pointerEvents","elevationLevel","getElevationAndroid","margin","padding","transform","borderRadius","sharedStyle"],"sourceRoot":"../../../../src","sources":["ui/components/Surface.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/TextField/Addons/Outline.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Outline = ({
+  isV3,
+  label,
+  activeColor,
+  backgroundColor,
+  hasActiveOutline,
+  focused,
+  outlineColor,
+  roundness,
+  style
+}) => /*#__PURE__*/_jsx(View, {
+  testID: "text-input-outline",
+  pointerEvents: "none",
+  style: [styles.outline, !label && styles.noLabelOutline,
+  // eslint-disable-next-line react-native/no-inline-styles
+  {
+    backgroundColor,
+    borderRadius: roundness,
+    borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
+    borderColor: hasActiveOutline ? activeColor : outlineColor
+  }, style]
+});
+const styles = StyleSheet.create({
+  outline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 6,
+    bottom: 0
+  },
+  noLabelOutline: {
+    top: 0
+  }
+});
+//# sourceMappingURL=Outline.js.map

package/lib/module/ui/components/TextField/Addons/Outline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","jsx","_jsx","Outline","isV3","label","activeColor","backgroundColor","hasActiveOutline","focused","outlineColor","roundness","style","testID","pointerEvents","styles","outline","noLabelOutline","borderRadius","borderWidth","borderColor","create","position","left","right","top","bottom"],"sourceRoot":"../../../../../../src","sources":["ui/components/TextField/Addons/Outline.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,EAGVC,IAAI,QAEC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgBtB,OAAO,MAAMC,OAAO,GAAGA,CAAC;EACtBC,IAAI;EACJC,KAAK;EACLC,WAAW;EACXC,eAAe;EACfC,gBAAgB;EAChBC,OAAO;EACPC,YAAY;EACZC,SAAS;EACTC;AACY,CAAC,kBACbV,IAAA,CAACF,IAAI;EACHa,MAAM,EAAC,oBAAoB;EAC3BC,aAAa,EAAC,MAAM;EACpBF,KAAK,EAAE,CACLG,MAAM,CAACC,OAAO,EACd,CAACX,KAAK,IAAIU,MAAM,CAACE,cAAc;EAC/B;EACA;IACEV,eAAe;IACfW,YAAY,EAAEP,SAAS;IACvBQ,WAAW,EAAE,CAACf,IAAI,GAAGI,gBAAgB,GAAGC,OAAO,IAAI,CAAC,GAAG,CAAC;IACxDW,WAAW,EAAEZ,gBAAgB,GAAGF,WAAW,GAAGI;EAChD,CAAC,EACDE,KAAK;AACL,CACH,CACF;AAED,MAAMG,MAAM,GAAGhB,UAAU,CAACsB,MAAM,CAAC;EAC/BL,OAAO,EAAE;IACPM,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV,CAAC;EACDT,cAAc,EAAE;IACdQ,GAAG,EAAE;EACP;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/ui/components/TextField/Addons/Underline.js

@@ -0,0 +1,47 @@
+"use strict";
+
+import * as React from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useInternalTheme } from '../../theming';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Underline = ({
+  parentState,
+  error,
+  colors,
+  activeColor,
+  underlineColorCustom,
+  hasActiveOutline,
+  style,
+  theme: themeOverrides
+}) => {
+  const {
+    isV3
+  } = useInternalTheme(themeOverrides);
+  let backgroundColor = parentState.focused ? activeColor : underlineColorCustom;
+  if (error) backgroundColor = colors?.error;
+  const activeScale = isV3 ? 2 : 1;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    testID: "text-input-underline",
+    style: [styles.underline, isV3 && styles.md3Underline, {
+      backgroundColor,
+      // Underlines is thinner when input is not focused
+      transform: [{
+        scaleY: (isV3 ? hasActiveOutline : parentState.focused) ? activeScale : 0.5
+      }]
+    }, style]
+  });
+};
+const styles = StyleSheet.create({
+  underline: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 2,
+    zIndex: 1
+  },
+  md3Underline: {
+    height: 1
+  }
+});
+//# sourceMappingURL=Underline.js.map

package/lib/module/ui/components/TextField/Addons/Underline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","StyleSheet","useInternalTheme","jsx","_jsx","Underline","parentState","error","colors","activeColor","underlineColorCustom","hasActiveOutline","style","theme","themeOverrides","isV3","backgroundColor","focused","activeScale","View","testID","styles","underline","md3Underline","transform","scaleY","create","position","left","right","bottom","height","zIndex"],"sourceRoot":"../../../../../../src","sources":["ui/components/TextField/Addons/Underline.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,UAAU,QAA8B,cAAc;AAIzE,SAASC,gBAAgB,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiBjD,OAAO,MAAMC,SAAS,GAAGA,CAAC;EACxBC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,WAAW;EACXC,oBAAoB;EACpBC,gBAAgB;EAChBC,KAAK;EACLC,KAAK,EAAEC;AACO,CAAC,KAAK;EACpB,MAAM;IAAEC;EAAK,CAAC,GAAGb,gBAAgB,CAACY,cAAc,CAAC;EAEjD,IAAIE,eAAe,GAAGV,WAAW,CAACW,OAAO,GACrCR,WAAW,GACXC,oBAAoB;EAExB,IAAIH,KAAK,EAAES,eAAe,GAAGR,MAAM,EAAED,KAAK;EAE1C,MAAMW,WAAW,GAAGH,IAAI,GAAG,CAAC,GAAG,CAAC;EAEhC,oBACEX,IAAA,CAACJ,QAAQ,CAACmB,IAAI;IACZC,MAAM,EAAC,sBAAsB;IAC7BR,KAAK,EAAE,CACLS,MAAM,CAACC,SAAS,EAChBP,IAAI,IAAIM,MAAM,CAACE,YAAY,EAC3B;MACEP,eAAe;MACf;MACAQ,SAAS,EAAE,CACT;QACEC,MAAM,EAAE,CAACV,IAAI,GAAGJ,gBAAgB,GAAGL,WAAW,CAACW,OAAO,IAClDC,WAAW,GACX;MACN,CAAC;IAEL,CAAC,EACDN,KAAK;EACL,CACH,CAAC;AAEN,CAAC;AAED,MAAMS,MAAM,GAAGpB,UAAU,CAACyB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE;EACV,CAAC;EACDT,YAAY,EAAE;IACZQ,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/ui/components/TextField/Adornment/TextFieldAdornment.js

@@ -0,0 +1,148 @@
+"use strict";
+
+import React, { createElement as _createElement } from 'react';
+import { AdornmentSide, AdornmentType, InputMode } from './enums';
+import TextFieldAffix, { AffixAdornment } from './TextFieldAffix';
+import TextFieldIcon, { IconAdornment } from './TextFieldIcon';
+import { getConstants } from '../helpers';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function getAdornmentConfig({
+  left,
+  right
+}) {
+  let adornmentConfig = [];
+  if (left || right) {
+    [{
+      side: AdornmentSide.Left,
+      adornment: left
+    }, {
+      side: AdornmentSide.Right,
+      adornment: right
+    }].forEach(({
+      side,
+      adornment
+    }) => {
+      if (adornment && /*#__PURE__*/React.isValidElement(adornment)) {
+        let type;
+        if (adornment.type === TextFieldAffix) {
+          type = AdornmentType.Affix;
+        } else if (adornment.type === TextFieldIcon) {
+          type = AdornmentType.Icon;
+        }
+        adornmentConfig.push({
+          side,
+          type
+        });
+      }
+    });
+  }
+  return adornmentConfig;
+}
+export function getAdornmentStyleAdjustmentForNativeInput({
+  adornmentConfig,
+  leftAffixWidth,
+  rightAffixWidth,
+  paddingHorizontal,
+  inputOffset = 0,
+  mode,
+  isV3
+}) {
+  const {
+    OUTLINED_INPUT_OFFSET,
+    ADORNMENT_OFFSET
+  } = getConstants(isV3);
+  if (adornmentConfig.length) {
+    const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(({
+      type,
+      side
+    }) => {
+      const isLeftSide = side === AdornmentSide.Left;
+      const inputModeAdornemntOffset = mode === InputMode.Outlined ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET : ADORNMENT_OFFSET;
+      const paddingKey = `padding${captalize(side)}`;
+      const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
+      const padding = typeof paddingHorizontal === 'number' ? paddingHorizontal : inputModeAdornemntOffset;
+      const offset = affixWidth + padding;
+      const isAffix = type === AdornmentType.Affix;
+      const marginKey = `margin${captalize(side)}`;
+      return {
+        [marginKey]: isAffix ? 0 : offset,
+        [paddingKey]: isAffix ? offset : inputOffset
+      };
+    });
+    const allStyleAdjustmentsMerged = adornmentStyleAdjustmentForNativeInput.reduce((mergedStyles, currentStyle) => {
+      return {
+        ...mergedStyles,
+        ...currentStyle
+      };
+    }, {});
+    return allStyleAdjustmentsMerged;
+  } else {
+    return [{}];
+  }
+}
+const captalize = text => text.charAt(0).toUpperCase() + text.slice(1);
+const TextFieldAdornment = ({
+  adornmentConfig,
+  left,
+  right,
+  onAffixChange,
+  textStyle,
+  visible,
+  topPosition,
+  isTextInputFocused,
+  forceFocus,
+  paddingHorizontal,
+  maxFontSizeMultiplier,
+  theme,
+  disabled
+}) => {
+  if (adornmentConfig.length) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: adornmentConfig.map(({
+        type,
+        side
+      }) => {
+        let inputAdornmentComponent;
+        if (side === AdornmentSide.Left) {
+          inputAdornmentComponent = left;
+        } else if (side === AdornmentSide.Right) {
+          inputAdornmentComponent = right;
+        }
+        const commonProps = {
+          side: side,
+          testID: `${side}-${type}-adornment`,
+          isTextInputFocused,
+          paddingHorizontal,
+          disabled
+        };
+        if (type === AdornmentType.Icon) {
+          return /*#__PURE__*/_createElement(IconAdornment, {
+            ...commonProps,
+            theme: theme,
+            key: side,
+            icon: inputAdornmentComponent,
+            topPosition: topPosition[AdornmentType.Icon],
+            forceFocus: forceFocus
+          });
+        } else if (type === AdornmentType.Affix) {
+          return /*#__PURE__*/_createElement(AffixAdornment, {
+            ...commonProps,
+            key: side,
+            topPosition: topPosition[AdornmentType.Affix][side],
+            affix: inputAdornmentComponent,
+            textStyle: textStyle,
+            onLayout: onAffixChange[side],
+            visible: visible,
+            maxFontSizeMultiplier: maxFontSizeMultiplier
+          });
+        } else {
+          return null;
+        }
+      })
+    });
+  } else {
+    return null;
+  }
+};
+export default TextFieldAdornment;
+//# sourceMappingURL=TextFieldAdornment.js.map

package/lib/module/ui/components/TextField/Adornment/TextFieldAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createElement","_createElement","AdornmentSide","AdornmentType","InputMode","TextFieldAffix","AffixAdornment","TextFieldIcon","IconAdornment","getConstants","Fragment","_Fragment","jsx","_jsx","getAdornmentConfig","left","right","adornmentConfig","side","Left","adornment","Right","forEach","isValidElement","type","Affix","Icon","push","getAdornmentStyleAdjustmentForNativeInput","leftAffixWidth","rightAffixWidth","paddingHorizontal","inputOffset","mode","isV3","OUTLINED_INPUT_OFFSET","ADORNMENT_OFFSET","length","adornmentStyleAdjustmentForNativeInput","map","isLeftSide","inputModeAdornemntOffset","Outlined","paddingKey","captalize","affixWidth","padding","offset","isAffix","marginKey","allStyleAdjustmentsMerged","reduce","mergedStyles","currentStyle","text","charAt","toUpperCase","slice","TextFieldAdornment","onAffixChange","textStyle","visible","topPosition","isTextInputFocused","forceFocus","maxFontSizeMultiplier","theme","disabled","children","inputAdornmentComponent","commonProps","testID","key","icon","affix","onLayout"],"sourceRoot":"../../../../../../src","sources":["ui/components/TextField/Adornment/TextFieldAdornment.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAAC,aAAA,IAAAC,cAAA,QAAM,OAAO;AAWzB,SAASC,aAAa,EAAEC,aAAa,EAAEC,SAAS,QAAQ,SAAS;AACjE,OAAOC,cAAc,IAAIC,cAAc,QAAQ,kBAAkB;AACjE,OAAOC,aAAa,IAAIC,aAAa,QAAQ,iBAAiB;AAK9D,SAASC,YAAY,QAAQ,YAAY;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAE1C,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,IAAI;EACJC;AAIF,CAAC,EAA0B;EACzB,IAAIC,eAAsB,GAAG,EAAE;EAC/B,IAAIF,IAAI,IAAIC,KAAK,EAAE;IACjB,CACE;MAAEE,IAAI,EAAEhB,aAAa,CAACiB,IAAI;MAAEC,SAAS,EAAEL;IAAK,CAAC,EAC7C;MAAEG,IAAI,EAAEhB,aAAa,CAACmB,KAAK;MAAED,SAAS,EAAEJ;IAAM,CAAC,CAChD,CAACM,OAAO,CAAC,CAAC;MAAEJ,IAAI;MAAEE;IAAU,CAAC,KAAK;MACjC,IAAIA,SAAS,iBAAIrB,KAAK,CAACwB,cAAc,CAACH,SAAS,CAAC,EAAE;QAChD,IAAII,IAAI;QACR,IAAIJ,SAAS,CAACI,IAAI,KAAKnB,cAAc,EAAE;UACrCmB,IAAI,GAAGrB,aAAa,CAACsB,KAAK;QAC5B,CAAC,MAAM,IAAIL,SAAS,CAACI,IAAI,KAAKjB,aAAa,EAAE;UAC3CiB,IAAI,GAAGrB,aAAa,CAACuB,IAAI;QAC3B;QACAT,eAAe,CAACU,IAAI,CAAC;UACnBT,IAAI;UACJM;QACF,CAAC,CAAC;MACJ;IACF,CAAC,CAAC;EACJ;EAEA,OAAOP,eAAe;AACxB;AAEA,OAAO,SAASW,yCAAyCA,CAAC;EACxDX,eAAe;EACfY,cAAc;EACdC,eAAe;EACfC,iBAAiB;EACjBC,WAAW,GAAG,CAAC;EACfC,IAAI;EACJC;AASF,CAAC,EAA+C;EAC9C,MAAM;IAAEC,qBAAqB;IAAEC;EAAiB,CAAC,GAAG3B,YAAY,CAACyB,IAAI,CAAC;EAEtE,IAAIjB,eAAe,CAACoB,MAAM,EAAE;IAC1B,MAAMC,sCAAsC,GAAGrB,eAAe,CAACsB,GAAG,CAChE,CAAC;MAAEf,IAAI;MAAEN;IAAsB,CAAC,KAAK;MACnC,MAAMsB,UAAU,GAAGtB,IAAI,KAAKhB,aAAa,CAACiB,IAAI;MAC9C,MAAMsB,wBAAwB,GAC5BR,IAAI,KAAK7B,SAAS,CAACsC,QAAQ,GACvBN,gBAAgB,GAAGD,qBAAqB,GACxCC,gBAAgB;MACtB,MAAMO,UAAU,GAAG,UAAUC,SAAS,CAAC1B,IAAI,CAAC,EAAE;MAC9C,MAAM2B,UAAU,GAAGL,UAAU,GAAGX,cAAc,GAAGC,eAAe;MAChE,MAAMgB,OAAO,GACX,OAAOf,iBAAiB,KAAK,QAAQ,GACjCA,iBAAiB,GACjBU,wBAAwB;MAC9B,MAAMM,MAAM,GAAGF,UAAU,GAAGC,OAAO;MAEnC,MAAME,OAAO,GAAGxB,IAAI,KAAKrB,aAAa,CAACsB,KAAK;MAC5C,MAAMwB,SAAS,GAAG,SAASL,SAAS,CAAC1B,IAAI,CAAC,EAAE;MAE5C,OAAO;QACL,CAAC+B,SAAS,GAAGD,OAAO,GAAG,CAAC,GAAGD,MAAM;QACjC,CAACJ,UAAU,GAAGK,OAAO,GAAGD,MAAM,GAAGf;MACnC,CAAC;IACH,CACF,CAAC;IACD,MAAMkB,yBAAyB,GAC7BZ,sCAAsC,CAACa,MAAM,CAC3C,CAACC,YAAY,EAAEC,YAAY,KAAK;MAC9B,OAAO;QACL,GAAGD,YAAY;QACf,GAAGC;MACL,CAAC;IACH,CAAC,EACD,CAAC,CACH,CAAC;IACH,OAAOH,yBAAyB;EAClC,CAAC,MAAM;IACL,OAAO,CAAC,CAAC,CAAC,CAAC;EACb;AACF;AAEA,MAAMN,SAAS,GAAIU,IAAY,IAC7BA,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,GAAGF,IAAI,CAACG,KAAK,CAAC,CAAC,CAAC;AA2B9C,MAAMC,kBAAoE,GAAGA,CAAC;EAC5EzC,eAAe;EACfF,IAAI;EACJC,KAAK;EACL2C,aAAa;EACbC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,kBAAkB;EAClBC,UAAU;EACVjC,iBAAiB;EACjBkC,qBAAqB;EACrBC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,IAAIlD,eAAe,CAACoB,MAAM,EAAE;IAC1B,oBACExB,IAAA,CAAAF,SAAA;MAAAyD,QAAA,EACGnD,eAAe,CAACsB,GAAG,CAAC,CAAC;QAAEf,IAAI;QAAEN;MAAsB,CAAC,KAAK;QACxD,IAAImD,uBAAuB;QAC3B,IAAInD,IAAI,KAAKhB,aAAa,CAACiB,IAAI,EAAE;UAC/BkD,uBAAuB,GAAGtD,IAAI;QAChC,CAAC,MAAM,IAAIG,IAAI,KAAKhB,aAAa,CAACmB,KAAK,EAAE;UACvCgD,uBAAuB,GAAGrD,KAAK;QACjC;QAEA,MAAMsD,WAAW,GAAG;UAClBpD,IAAI,EAAEA,IAAI;UACVqD,MAAM,EAAE,GAAGrD,IAAI,IAAIM,IAAI,YAAY;UACnCuC,kBAAkB;UAClBhC,iBAAiB;UACjBoC;QACF,CAAC;QACD,IAAI3C,IAAI,KAAKrB,aAAa,CAACuB,IAAI,EAAE;UAC/B,oBACEzB,cAAA,CAACO,aAAa;YAAA,GACR8D,WAAW;YACfJ,KAAK,EAAEA,KAAM;YACbM,GAAG,EAAEtD,IAAK;YACVuD,IAAI,EAAEJ,uBAAwB;YAC9BP,WAAW,EAAEA,WAAW,CAAC3D,aAAa,CAACuB,IAAI,CAAE;YAC7CsC,UAAU,EAAEA;UAAW,CACxB,CAAC;QAEN,CAAC,MAAM,IAAIxC,IAAI,KAAKrB,aAAa,CAACsB,KAAK,EAAE;UACvC,oBACExB,cAAA,CAACK,cAAc;YAAA,GACTgE,WAAW;YACfE,GAAG,EAAEtD,IAAK;YACV4C,WAAW,EAAEA,WAAW,CAAC3D,aAAa,CAACsB,KAAK,CAAC,CAACP,IAAI,CAAE;YACpDwD,KAAK,EAAEL,uBAAwB;YAC/BT,SAAS,EAAEA,SAAU;YACrBe,QAAQ,EAAEhB,aAAa,CAACzC,IAAI,CAAE;YAC9B2C,OAAO,EAAEA,OAAQ;YACjBI,qBAAqB,EAAEA;UAAsB,CAC9C,CAAC;QAEN,CAAC,MAAM;UACL,OAAO,IAAI;QACb;MACF,CAAC;IAAC,CACF,CAAC;EAEP,CAAC,MAAM;IACL,OAAO,IAAI;EACb;AACF,CAAC;AAED,eAAeP,kBAAkB","ignoreList":[]}

package/lib/module/ui/components/TextField/Adornment/TextFieldAffix.js

@@ -0,0 +1,141 @@
+"use strict";
+
+import React from 'react';
+import { Animated, Pressable, StyleSheet, Text } from 'react-native';
+import { AdornmentSide } from './enums';
+import { getTextColor } from './utils';
+import { useInternalTheme } from '../../theming';
+import { getConstants } from '../helpers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AffixContext = /*#__PURE__*/React.createContext({
+  textStyle: {
+    fontFamily: '',
+    color: ''
+  },
+  topPosition: null,
+  side: AdornmentSide.Left
+});
+const AffixAdornment = ({
+  affix,
+  side,
+  textStyle,
+  topPosition,
+  onLayout,
+  visible,
+  paddingHorizontal,
+  maxFontSizeMultiplier,
+  testID,
+  disabled
+}) => {
+  return /*#__PURE__*/_jsx(AffixContext.Provider, {
+    value: {
+      side,
+      textStyle,
+      topPosition,
+      onLayout,
+      visible,
+      paddingHorizontal,
+      maxFontSizeMultiplier,
+      testID,
+      disabled
+    },
+    children: affix
+  });
+};
+
+/**
+ * A component to render a leading / trailing text in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       mode="outlined"
+ *       label="Outlined input"
+ *       placeholder="Type something"
+ *       right={<TextInput.Affix text="/100" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const TextFieldAffix = ({
+  text,
+  textStyle: labelStyle,
+  theme: themeOverrides,
+  onLayout: onTextLayout,
+  onPress,
+  accessibilityLabel = text
+}) => {
+  const theme = useInternalTheme(themeOverrides);
+  const {
+    AFFIX_OFFSET
+  } = getConstants(theme.isV3);
+  const {
+    textStyle,
+    onLayout,
+    topPosition,
+    side,
+    visible,
+    paddingHorizontal,
+    maxFontSizeMultiplier,
+    testID,
+    disabled
+  } = React.useContext(AffixContext);
+  const offset = typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
+  const style = {
+    top: topPosition,
+    [side]: offset
+  };
+  const textColor = getTextColor({
+    theme,
+    disabled
+  });
+  const content = /*#__PURE__*/_jsx(Text, {
+    maxFontSizeMultiplier: maxFontSizeMultiplier,
+    style: [{
+      color: textColor
+    }, textStyle, labelStyle],
+    onLayout: onTextLayout,
+    testID: `${testID}-text`,
+    children: text
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.container, style, {
+      opacity: visible?.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0]
+      }) || 1
+    }],
+    onLayout: onLayout,
+    testID: testID,
+    children: onPress ? /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      children: content
+    }) : content
+  });
+};
+TextFieldAffix.displayName = 'TextField.Affix';
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+export default TextFieldAffix;
+
+// @component-docs ignore-next-line
+export { TextFieldAffix, AffixAdornment };
+//# sourceMappingURL=TextFieldAffix.js.map

package/lib/module/ui/components/TextField/Adornment/TextFieldAffix.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","Pressable","StyleSheet","Text","AdornmentSide","getTextColor","useInternalTheme","getConstants","jsx","_jsx","AffixContext","createContext","textStyle","fontFamily","color","topPosition","side","Left","AffixAdornment","affix","onLayout","visible","paddingHorizontal","maxFontSizeMultiplier","testID","disabled","Provider","value","children","TextFieldAffix","text","labelStyle","theme","themeOverrides","onTextLayout","onPress","accessibilityLabel","AFFIX_OFFSET","isV3","useContext","offset","style","top","textColor","content","View","styles","container","opacity","interpolate","inputRange","outputRange","accessibilityRole","displayName","create","position","justifyContent","alignItems"],"sourceRoot":"../../../../../../src","sources":["ui/components/TextField/Adornment/TextFieldAffix.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,QAAQ,EAIRC,SAAS,EAETC,UAAU,EACVC,IAAI,QAGC,cAAc;AAErB,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,YAAY,QAAQ,SAAS;AACtC,SAASC,gBAAgB,QAAQ,eAAe;AAEhD,SAASC,YAAY,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsC1C,MAAMC,YAAY,gBAAGX,KAAK,CAACY,aAAa,CAAe;EACrDC,SAAS,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAG,CAAC;EACxCC,WAAW,EAAE,IAAI;EACjBC,IAAI,EAAEZ,aAAa,CAACa;AACtB,CAAC,CAAC;AAEF,MAAMC,cAKL,GAAGA,CAAC;EACHC,KAAK;EACLH,IAAI;EACJJ,SAAS;EACTG,WAAW;EACXK,QAAQ;EACRC,OAAO;EACPC,iBAAiB;EACjBC,qBAAqB;EACrBC,MAAM;EACNC;AACF,CAAC,KAAK;EACF,oBACEhB,IAAA,CAACC,YAAY,CAACgB,QAAQ;IACpBC,KAAK,EAAE;MACLX,IAAI;MACJJ,SAAS;MACTG,WAAW;MACXK,QAAQ;MACRC,OAAO;MACPC,iBAAiB;MACjBC,qBAAqB;MACrBC,MAAM;MACNC;IACF,CAAE;IAAAG,QAAA,EAEDT;EAAK,CACe,CAAC;AAE5B,CAAC;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMU,cAAc,GAAGA,CAAC;EACtBC,IAAI;EACJlB,SAAS,EAAEmB,UAAU;EACrBC,KAAK,EAAEC,cAAc;EACrBb,QAAQ,EAAEc,YAAY;EACtBC,OAAO;EACPC,kBAAkB,GAAGN;AAChB,CAAC,KAAK;EACX,MAAME,KAAK,GAAG1B,gBAAgB,CAAC2B,cAAc,CAAC;EAC9C,MAAM;IAAEI;EAAa,CAAC,GAAG9B,YAAY,CAACyB,KAAK,CAACM,IAAI,CAAC;EAEjD,MAAM;IACJ1B,SAAS;IACTQ,QAAQ;IACRL,WAAW;IACXC,IAAI;IACJK,OAAO;IACPC,iBAAiB;IACjBC,qBAAqB;IACrBC,MAAM;IACNC;EACF,CAAC,GAAG1B,KAAK,CAACwC,UAAU,CAAC7B,YAAY,CAAC;EAElC,MAAM8B,MAAM,GACV,OAAOlB,iBAAiB,KAAK,QAAQ,GAAGA,iBAAiB,GAAGe,YAAY;EAE1E,MAAMI,KAAK,GAAG;IACZC,GAAG,EAAE3B,WAAW;IAChB,CAACC,IAAI,GAAGwB;EACV,CAAc;EAEd,MAAMG,SAAS,GAAGtC,YAAY,CAAC;IAAE2B,KAAK;IAAEP;EAAS,CAAC,CAAC;EAEnD,MAAMmB,OAAO,gBACXnC,IAAA,CAACN,IAAI;IACHoB,qBAAqB,EAAEA,qBAAsB;IAC7CkB,KAAK,EAAE,CAAC;MAAE3B,KAAK,EAAE6B;IAAU,CAAC,EAAE/B,SAAS,EAAEmB,UAAU,CAAE;IACrDX,QAAQ,EAAEc,YAAa;IACvBV,MAAM,EAAE,GAAGA,MAAM,OAAQ;IAAAI,QAAA,EAExBE;EAAI,CACD,CACP;EAED,oBACErB,IAAA,CAACT,QAAQ,CAAC6C,IAAI;IACZJ,KAAK,EAAE,CACLK,MAAM,CAACC,SAAS,EAChBN,KAAK,EACL;MACEO,OAAO,EACL3B,OAAO,EAAE4B,WAAW,CAAC;QACnBC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC;MACpB,CAAC,CAAC,IAAI;IACV,CAAC,CACD;IACF/B,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IAAAI,QAAA,EAEdO,OAAO,gBACN1B,IAAA,CAACR,SAAS;MACRkC,OAAO,EAAEA,OAAQ;MACjBiB,iBAAiB,EAAC,QAAQ;MAC1BhB,kBAAkB,EAAEA,kBAAmB;MAAAR,QAAA,EAEtCgB;IAAO,CACC,CAAC,GAEZA;EACD,CACY,CAAC;AAEpB,CAAC;AAEDf,cAAc,CAACwB,WAAW,GAAG,iBAAiB;AAE9C,MAAMP,MAAM,GAAG5C,UAAU,CAACoD,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,QAAQ,EAAE,UAAU;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe5B,cAAc;;AAE7B;AACA,SAASA,cAAc,EAAEX,cAAc","ignoreList":[]}