sapo-components-ui-rn 1.0.0

package/src/components/Switch/utils.ts

@@ -0,0 +1,96 @@
+import { Platform } from "react-native";
+
+import type { InternalTheme } from "../../types";
+
+type BaseProps = {
+  theme: InternalTheme;
+  disabled?: boolean;
+  value?: boolean;
+};
+
+const getCheckedColor = ({
+  theme,
+  color,
+}: {
+  theme: InternalTheme;
+  color?: string;
+}) => {
+  if (color) {
+    return color;
+  }
+
+  return theme.colors.surfaceBrandDefault;
+};
+
+const getThumbTintColor = ({
+  theme,
+  disabled,
+  value,
+  checkedColor,
+}: BaseProps & { checkedColor: string }) => {
+  const isIOS = Platform.OS === "ios";
+
+  if (isIOS) {
+    return undefined;
+  }
+
+  if (disabled) {
+    if (theme.dark) {
+      return theme.colors.backgroundPrimary;
+    }
+    return theme.colors.backgroundPrimary;
+  }
+
+  if (value) {
+    return checkedColor;
+  }
+
+  if (theme.dark) {
+    return theme.colors.backgroundPrimary;
+  }
+  return theme.colors.backgroundPrimary;
+};
+
+const getOnTintColor = ({
+  theme,
+  disabled,
+  value,
+  checkedColor,
+}: BaseProps & { checkedColor: string }) => {
+  const isIOS = Platform.OS === "ios";
+
+  if (isIOS) {
+    return checkedColor;
+  }
+
+  if (disabled) {
+    if (theme.dark) {
+      return theme.colors.backgroundPrimary;
+    }
+    return theme.colors.backgroundPrimary;
+  }
+
+  if (value) {
+    return checkedColor;
+  }
+
+  if (theme.dark) {
+    return theme.colors.backgroundPrimary;
+  }
+  return theme.colors.backgroundPrimary;
+};
+
+export const getSwitchColor = ({
+  theme,
+  disabled,
+  value,
+  color,
+}: BaseProps & { color?: string }) => {
+  const checkedColor = getCheckedColor({ theme, color });
+
+  return {
+    onTintColor: getOnTintColor({ theme, disabled, value, checkedColor }),
+    thumbTintColor: getThumbTintColor({ theme, disabled, value, checkedColor }),
+    checkedColor,
+  };
+};

package/src/components/Text/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Text as TextRN, TextProps, StyleSheet, Platform } from "react-native";
+import { memoDeepEqual } from "../../utils/function-utils";
+import colors from "../../theme/colors";
+import { useInternalTheme } from "../../core/theming";
+import { ThemeProp } from "../../types";
+
+export interface IText extends TextProps {
+  size?: number;
+  color?: string;
+  center?: boolean;
+  bold?: boolean;
+  medium?: boolean;
+  children?: any;
+  theme?: ThemeProp;
+}
+
+const Text = (props: IText) => {
+  const { children, onPress, theme: themeOverrides, ...rest } = props;
+  const theme = useInternalTheme();
+
+  delete rest.style;
+  const _getStyle = () => {
+    const style: any = {
+      fontWeight: "normal",
+      color: colors.ink.INK100,
+      fontFamily: "Inter-Regular",
+    };
+    const { size = 14, center, color, bold, medium } = props;
+    style.color = theme.colors.textDefault || "black";
+    if (size) {
+      style.fontSize = size;
+    }
+    if (color) {
+      style.color = color;
+    }
+    if (center) {
+      style.textAlign = "center";
+    }
+    if (bold) {
+      style.fontFamily = "Inter-Bold";
+      if (Platform.OS === "ios") {
+        style.fontWeight = "bold";
+      }
+    }
+    if (medium) {
+      style.fontFamily = "Inter-SemiBold";
+      if (Platform.OS === "ios") {
+        style.fontWeight = "600";
+      }
+    }
+    return StyleSheet.create({ style }).style;
+  };
+  const defaultStyle = _getStyle();
+  const Component = TextRN;
+
+  return (
+    <Component
+      onPress={onPress}
+      style={[defaultStyle, props.style]}
+      allowFontScaling={false}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default memoDeepEqual(Text);

package/src/components/TextInput/Addons/Outline.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import {
+  StyleSheet,
+  ColorValue,
+  StyleProp,
+  View,
+  ViewStyle,
+} from "react-native";
+
+import { TextInputLabelProp } from "../types";
+
+type OutlineProps = {
+  activeColor: string;
+  backgroundColor: ColorValue | any;
+  hasActiveOutline?: boolean;
+  focused?: boolean;
+  outlineColor?: string;
+  roundness?: number;
+  label?: TextInputLabelProp;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const Outline = ({
+  label,
+  activeColor,
+  backgroundColor,
+  hasActiveOutline,
+  focused,
+  outlineColor = "#EAEBED",
+  roundness = 8,
+  style,
+}: OutlineProps) => (
+  <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: 1,
+        // borderColor: hasActiveOutline ? activeColor : outlineColor,
+      },
+      style,
+    ]}
+  />
+);
+
+const styles = StyleSheet.create({
+  outline: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 6,
+    bottom: 0,
+  },
+  noLabelOutline: {
+    top: 0,
+  },
+});

package/src/components/TextInput/Addons/Underline.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { Animated, StyleSheet, StyleProp, ViewStyle } from "react-native";
+
+import { ThemeProp } from "../../../types";
+
+type UnderlineProps = {
+  parentState: {
+    focused: boolean;
+  };
+  error?: boolean;
+  colors?: {
+    error?: string;
+  };
+  activeColor: string;
+  underlineColorCustom?: string;
+  hasActiveOutline?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeProp;
+};
+
+export const Underline = ({
+  parentState,
+  error,
+  colors,
+  activeColor,
+  underlineColorCustom,
+  hasActiveOutline,
+  style,
+}: UnderlineProps) => {
+  let backgroundColor = parentState.focused
+    ? activeColor
+    : underlineColorCustom;
+
+  if (error) backgroundColor = colors?.error;
+
+  const activeScale = 2;
+
+  return (
+    <Animated.View
+      testID="text-input-underline"
+      style={[
+        styles.underline,
+        styles.md3Underline,
+        {
+          backgroundColor,
+          // Underlines is thinner when input is not focused
+          transform: [
+            {
+              scaleY: hasActiveOutline ? activeScale : 0.5,
+            },
+          ],
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  underline: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 2,
+    zIndex: 1,
+  },
+  md3Underline: {
+    height: 1,
+  },
+});

package/src/components/TextInput/Adornment/TextInputAdornment.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+import type {
+  LayoutChangeEvent,
+  TextStyle,
+  StyleProp,
+  Animated,
+  DimensionValue,
+} from "react-native";
+
+import { AdornmentSide, AdornmentType, InputMode } from "./enums";
+import TextInputAffix, { AffixAdornment } from "./TextInputAffix";
+import type {
+  AdornmentConfig,
+  AdornmentStyleAdjustmentForNativeInput,
+} from "./types";
+import { getConstants } from "../helpers";
+import { ThemeProp } from "../../../types";
+
+export function getAdornmentConfig({
+  left,
+  right,
+}: {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+}): Array<AdornmentConfig> {
+  let adornmentConfig: any[] = [];
+  if (left || right) {
+    [
+      { side: AdornmentSide.Left, adornment: left },
+      { side: AdornmentSide.Right, adornment: right },
+    ].forEach(({ side, adornment }) => {
+      if (adornment && React.isValidElement(adornment)) {
+        let type;
+        if (adornment.type === TextInputAffix) {
+          type = AdornmentType.Affix;
+        }
+        adornmentConfig.push({
+          side,
+          type,
+        });
+      }
+    });
+  }
+
+  return adornmentConfig;
+}
+
+export function getAdornmentStyleAdjustmentForNativeInput({
+  adornmentConfig,
+  leftAffixWidth,
+  rightAffixWidth,
+  paddingHorizontal,
+  inputOffset = 0,
+  mode,
+}: {
+  inputOffset?: number;
+  adornmentConfig: AdornmentConfig[];
+  leftAffixWidth: number;
+  rightAffixWidth: number;
+  mode?: "outlined" | "flat";
+  paddingHorizontal?: DimensionValue;
+}): AdornmentStyleAdjustmentForNativeInput | {} {
+  const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = getConstants();
+
+  if (adornmentConfig.length) {
+    const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(
+      ({ type, side }: AdornmentConfig) => {
+        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: string) =>
+  text.charAt(0).toUpperCase() + text.slice(1);
+
+export interface TextInputAdornmentProps {
+  forceFocus: () => void;
+  adornmentConfig: AdornmentConfig[];
+  topPosition: {
+    [AdornmentType.Affix]: {
+      [AdornmentSide.Left]: number | null;
+      [AdornmentSide.Right]: number | null;
+    };
+    [AdornmentType.Icon]: number;
+  };
+  onAffixChange: {
+    [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
+    [AdornmentSide.Right]: (event: LayoutChangeEvent) => void;
+  };
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  textStyle?: StyleProp<TextStyle>;
+  visible?: Animated.Value;
+  isTextInputFocused: boolean;
+  paddingHorizontal?: DimensionValue;
+  maxFontSizeMultiplier?: number | undefined | null;
+  theme?: ThemeProp;
+  disabled?: boolean;
+}
+
+const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
+  adornmentConfig,
+  left,
+  right,
+  onAffixChange,
+  textStyle,
+  visible,
+  topPosition,
+  isTextInputFocused,
+  forceFocus,
+  paddingHorizontal,
+  maxFontSizeMultiplier,
+  theme,
+  disabled,
+}) => {
+  if (adornmentConfig.length) {
+    return (
+      <>
+        {adornmentConfig.map(({ type, side }: AdornmentConfig) => {
+          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.Affix) {
+            return (
+              <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 TextInputAdornment;

package/src/components/TextInput/Adornment/TextInputAffix.tsx

@@ -0,0 +1,212 @@
+import React from "react";
+import {
+  Animated,
+  DimensionValue,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+
+import { AdornmentSide } from "./enums";
+import { getTextColor } from "./utils";
+import { useInternalTheme } from "../../../core/theming";
+import type { ThemeProp } from "../../../types";
+import { getConstants } from "../helpers";
+
+export type Props = {
+  /**
+   * Text to show.
+   */
+  text: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Style that is passed to the Text element.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+type ContextState = {
+  topPosition: number | null;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  visible?: Animated.Value;
+  textStyle?: StyleProp<TextStyle>;
+  side: AdornmentSide;
+  paddingHorizontal?: DimensionValue;
+  maxFontSizeMultiplier?: number | undefined | null;
+  testID?: string;
+  disabled?: boolean;
+};
+
+const AffixContext = React.createContext<ContextState>({
+  textStyle: { fontFamily: "", color: "" },
+  topPosition: null,
+  side: AdornmentSide.Left,
+});
+
+const AffixAdornment: React.FunctionComponent<
+  {
+    affix: React.ReactNode;
+    testID: string;
+  } & ContextState
+> = ({
+  affix,
+  side,
+  textStyle,
+  topPosition,
+  onLayout,
+  visible,
+  paddingHorizontal,
+  maxFontSizeMultiplier,
+  testID,
+  disabled,
+}) => {
+  return (
+    <AffixContext.Provider
+      value={{
+        side,
+        textStyle,
+        topPosition,
+        onLayout,
+        visible,
+        paddingHorizontal,
+        maxFontSizeMultiplier,
+        testID,
+        disabled,
+      }}
+    >
+      {affix}
+    </AffixContext.Provider>
+  );
+};
+
+/**
+ * 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 TextInputAffix = ({
+  text,
+  textStyle: labelStyle,
+  theme: themeOverrides,
+  onLayout: onTextLayout,
+  onPress,
+  accessibilityLabel = text,
+}: Props) => {
+  const theme = useInternalTheme();
+  const { AFFIX_OFFSET } = getConstants();
+
+  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,
+  } as ViewStyle;
+
+  const textColor = getTextColor({ theme, disabled });
+
+  const content = (
+    <Text
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      style={[{ color: textColor }, textStyle, labelStyle]}
+      onLayout={onTextLayout}
+      testID={`${testID}-text`}
+    >
+      {text}
+    </Text>
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        style,
+        {
+          opacity:
+            visible?.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 0],
+            }) || 1,
+        },
+      ]}
+      onLayout={onLayout}
+      testID={testID}
+    >
+      {onPress ? (
+        <Pressable
+          onPress={onPress}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        content
+      )}
+    </Animated.View>
+  );
+};
+
+TextInputAffix.displayName = "TextInput.Affix";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default TextInputAffix;
+
+// @component-docs ignore-next-line
+export { TextInputAffix, AffixAdornment };

package/src/components/TextInput/Adornment/enums.tsx

@@ -0,0 +1,12 @@
+export enum AdornmentType {
+  Icon = 'icon',
+  Affix = 'affix',
+}
+export enum AdornmentSide {
+  Right = 'right',
+  Left = 'left',
+}
+export enum InputMode {
+  Outlined = 'outlined',
+  Flat = 'flat',
+}