@procivis/one-react-native-components 0.1.63 → 0.3.22

package/src/input/selection-input.tsx

@@ -1,112 +0,0 @@
-import Picker from '@procivis/react-native-picker';
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import type { TouchableOpacityProps } from 'react-native';
-
-import { focusAccessibility } from '../accessibility/accessibility';
-import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
-import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
-import { useAppColorScheme } from '../theme';
-import { useForwardedRef } from '../utils/ref';
-import TextInput, { TextInputAccessory } from './text-input';
-
-export interface SelectionInputChoice {
-  label: string;
-  /**
-   * If specified used in the input display, otherwise {@link label} used.
-   * The {@link label} is always used for the picker values.
-   */
-  shortLabel?: string;
-  value: string | number;
-}
-
-export interface SelectionInputProps extends TouchableOpacityProps {
-  error?: string;
-  label: string;
-  /**
-   * Called when selection changes
-   * @return `true` to avoid accessibility auto-focusing, `false` otherwise
-   */
-  onChange?: (value: SelectionInputChoice) => boolean;
-  pickerCancelLabel: string;
-
-  pickerConfirmLabel: string;
-  pickerTitle?: string;
-  /** {@link SelectionInputChoice.label} of the selected choice */
-  selectedValue?: string | number;
-
-  values: SelectionInputChoice[];
-}
-
-/**
- * Generic selection input component
- * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=B2Y3PtJHH22XDPkx-0
- */
-const SelectionInput = forwardRef<TouchableOpacityRef, SelectionInputProps>(
-  (
-    { selectedValue, values, label, pickerTitle, pickerConfirmLabel, pickerCancelLabel, onChange, error, ...props },
-    ref,
-  ) => {
-    const t = useAccessibilityTranslation();
-    const colorScheme = useAppColorScheme();
-    const selectedChoice = useMemo(
-      () => (selectedValue !== undefined ? values.find(({ value }) => value === selectedValue) : undefined),
-      [selectedValue, values],
-    );
-
-    const [forwardedRef, refObject] = useForwardedRef(ref);
-    const [pickerOpen, setPickerOpen] = useState(false);
-
-    const onOpen = useCallback(() => setPickerOpen(true), []);
-    const onConfirm = useCallback(
-      (valueLabel: any) => {
-        setPickerOpen(false);
-        const choice = values.find(({ label: choiceLabel }) => choiceLabel === valueLabel);
-        if (!choice || !onChange?.(choice)) {
-          setTimeout(() => focusAccessibility(refObject.current), 200);
-        }
-      },
-      [onChange, refObject, values],
-    );
-    const onCancel = useCallback(() => {
-      setPickerOpen(false);
-      requestAnimationFrame(() => focusAccessibility(refObject.current));
-    }, [refObject]);
-
-    const accessibilityLabel = error ? `${label}, ${error}` : label;
-    return (
-      <TouchableOpacity
-        accessibilityHint={t('accessibility.control.combobox.tapToSelect')}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="combobox"
-        accessibilityValue={{ text: selectedChoice?.label }}
-        onPress={onOpen}
-        ref={forwardedRef}
-        {...props}>
-        <TextInput
-          accessory={TextInputAccessory.Dropdown}
-          disabled={true}
-          error={error}
-          label={label}
-          pointerEvents="none"
-          value={selectedChoice?.shortLabel ?? selectedChoice?.label}
-        />
-        <Picker
-          cancelText={pickerCancelLabel}
-          confirmText={pickerConfirmLabel}
-          items={values.map(({ label: itemLabel }) => itemLabel)}
-          modal
-          mode="list"
-          onCancel={onCancel}
-          onConfirm={onConfirm}
-          open={pickerOpen}
-          selectedValue={selectedChoice?.label}
-          textColor={colorScheme.text}
-          title={pickerTitle ?? label}
-        />
-      </TouchableOpacity>
-    );
-  },
-);
-
-SelectionInput.displayName = 'SelectionInput';
-export default SelectionInput;

package/src/input/text-input.tsx

@@ -1,253 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Animated,
-  Insets,
-  LayoutChangeEvent,
-  LayoutRectangle,
-  NativeSyntheticEvent,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  TextInput as RNTextInput,
-  TextInputFocusEventData as RNTextInputFocusEventData,
-  TextInputProps as RNTextInputProps,
-  TextInputSubmitEditingEventData as RNTextInputSubmitEditingEventData,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
-import { ClearInputIcon, DropdownInputIcon } from '../icons/input';
-import font from '../text/font';
-import Typography from '../text/typography';
-import { useAppColorScheme } from '../theme/color-scheme-context';
-import { concatTestID } from '../utils/testID';
-
-// difference between font sizes
-const LABEL_SCALE_RATIO = 14 / 12;
-
-export enum TextInputAccessory {
-  Dropdown = 'dropdown',
-  Clear = 'clear',
-}
-
-const hitSlop: Insets = { bottom: 10, left: 10, right: 10, top: 10 };
-
-export type TextInputProps = Omit<RNTextInputProps, 'editable' | 'onSubmitEditing' | 'style'> & {
-  accessory?: TextInputAccessory;
-  accessoryAccessibilityLabel?: string;
-  disabled?: boolean;
-  error?: string;
-  label: string;
-  onAccessoryPress?: () => void;
-  onSubmit?: (value: string) => void;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * Generic text input component
- * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=3%3A824&t=r7HhHF1rsNLmOBL2-4
- */
-const TextInput = forwardRef<RNTextInput, TextInputProps>(
-  (
-    {
-      value,
-      label,
-      accessory = TextInputAccessory.Clear,
-      accessoryAccessibilityLabel,
-      onAccessoryPress,
-      onSubmit,
-      onFocus,
-      onBlur,
-      disabled,
-      error,
-      style,
-      placeholder,
-      ...props
-    },
-    ref,
-  ) => {
-    const colorScheme = useAppColorScheme();
-    const { fontScale } = useWindowDimensions();
-
-    const [focused, setFocused] = useState(false);
-    const onFocusAction = useCallback(
-      (e: NativeSyntheticEvent<RNTextInputFocusEventData>) => {
-        setFocused(true);
-        onFocus?.(e);
-      },
-      [onFocus],
-    );
-    const onBlurAction = useCallback(
-      (e: NativeSyntheticEvent<RNTextInputFocusEventData>) => {
-        setFocused(false);
-        onBlur?.(e);
-      },
-      [onBlur],
-    );
-
-    const onSubmitEditing = useCallback(
-      (e: NativeSyntheticEvent<RNTextInputSubmitEditingEventData>) => onSubmit?.(e.nativeEvent.text),
-      [onSubmit],
-    );
-
-    const accessoryIcon = useMemo(() => {
-      switch (accessory) {
-        case TextInputAccessory.Dropdown:
-          return <DropdownInputIcon />;
-        case TextInputAccessory.Clear:
-          return value && !disabled ? <ClearInputIcon /> : undefined;
-      }
-    }, [accessory, disabled, value]);
-
-    const accessoryComponent = accessoryIcon ? (
-      <TouchableOpacity
-        accessibilityLabel={accessoryAccessibilityLabel}
-        accessibilityRole="button"
-        accessible={!disabled}
-        disabled={disabled}
-        hitSlop={hitSlop}
-        onPress={onAccessoryPress}
-        testID={concatTestID(props.testID, 'accessoryButton')}>
-        {accessoryIcon}
-      </TouchableOpacity>
-    ) : null;
-
-    const labelPosition = focused || value ? 0 : 1;
-    const [labelAnimation] = useState<Animated.Value>(() => new Animated.Value(labelPosition));
-    useEffect(() => {
-      Animated.timing(labelAnimation, {
-        duration: 200,
-        toValue: labelPosition,
-        useNativeDriver: true,
-      }).start();
-    }, [labelAnimation, labelPosition]);
-
-    const [labelLayout, setLabelLayout] = useState<LayoutRectangle>();
-    const onLabelLayout = useCallback((event: LayoutChangeEvent) => setLabelLayout(event.nativeEvent.layout), []);
-
-    const accessibilityLabel = disabled ? undefined : label;
-    const inputStyle = { height: Math.min(2, fontScale) * 24 };
-
-    const input = (
-      <RNTextInput
-        accessibilityLabel={accessibilityLabel}
-        defaultValue={value || ''}
-        editable={!disabled}
-        hitSlop={hitSlop}
-        maxFontSizeMultiplier={2}
-        numberOfLines={1}
-        onBlur={onBlurAction}
-        onFocus={onFocusAction}
-        onSubmitEditing={onSubmitEditing}
-        placeholder={focused ? placeholder : undefined}
-        ref={ref}
-        returnKeyType="next"
-        style={[
-          font.regular,
-          styles.inputText,
-          Platform.OS === 'android' ? styles.inputAndroid : styles.inputIOS,
-          {
-            color: colorScheme.text,
-          },
-        ]}
-        textAlignVertical="center"
-        // https://github.com/facebook/react-native/issues/17530
-        underlineColorAndroid="#00000000"
-        value={value}
-        {...props}
-      />
-    );
-    return (
-      <View style={style}>
-        <Animated.View
-          onLayout={onLabelLayout}
-          style={
-            labelLayout
-              ? {
-                  transform: [
-                    {
-                      // move label into the position of placeholder
-                      translateY: labelAnimation.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, labelLayout.height + 4],
-                      }),
-                    },
-                    {
-                      // compensate scale position in X direction
-                      translateX: labelAnimation.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, (labelLayout.width * (LABEL_SCALE_RATIO - 1)) / 2],
-                      }),
-                    },
-                    {
-                      // scale label into the size of placeholder
-                      scale: labelAnimation.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [1, LABEL_SCALE_RATIO],
-                      }),
-                    },
-                  ],
-                }
-              : undefined
-          }>
-          <Typography accessible={false} color={'rgba(0, 0, 0, 0.50)'} preset="s">
-            {label}
-          </Typography>
-        </Animated.View>
-        <View
-          style={[
-            styles.inputRow,
-            {
-              borderColor: focused ? colorScheme.accent : colorScheme.grayDark,
-            },
-          ]}>
-          {Platform.OS === 'android' ? <View style={[styles.inputWrapperAndroid, inputStyle]}>{input}</View> : input}
-          {accessoryComponent}
-        </View>
-        {error ? (
-          <Typography color={colorScheme.error} preset="s">
-            {error}
-          </Typography>
-        ) : null}
-      </View>
-    );
-  },
-);
-
-const styles = StyleSheet.create({
-  inputAndroid: {
-    fontSize: 14,
-    left: 0,
-    letterSpacing: 0.2,
-    lineHeight: 22,
-    position: 'absolute',
-    right: 0,
-  },
-  inputIOS: {
-    flex: 1,
-  },
-  inputRow: {
-    alignItems: 'center',
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    marginBottom: 4,
-    paddingVertical: 4,
-  },
-  inputText: {
-    fontSize: 14,
-    letterSpacing: 0.2,
-    lineHeight: Platform.OS === 'android' ? 22 : 20,
-    minHeight: 24,
-  },
-  inputWrapperAndroid: {
-    flex: 1,
-    justifyContent: 'center',
-    overflow: 'visible',
-  },
-});
-
-TextInput.displayName = 'Input';
-
-export default TextInput;

package/src/list/index.ts

@@ -1,5 +0,0 @@
-import ListSectionHeader, { ListSectionHeaderProps } from './list-section-header';
-import ListTitleHeader, { ListTitleHeaderProps } from './list-title-header';
-
-export { ListSectionHeader, ListSectionHeaderProps };
-export { ListTitleHeader, ListTitleHeaderProps };

package/src/loader/loader.stories.tsx

@@ -1,31 +0,0 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React from 'react';
-
-import LoaderView, { LoaderViewProps, LoaderViewState } from './loader';
-
-const Basic: Story<LoaderViewProps> = ({ ...props }) => {
-  return <LoaderView {...props} />;
-};
-
-Basic.args = {
-  state: LoaderViewState.InProgress,
-};
-
-export { Basic as LoaderView };
-
-export default {
-  title: 'component/loader/LoaderView',
-  component: LoaderView,
-  argTypes: {
-    state: {
-      options: [LoaderViewState.InProgress, LoaderViewState.Success, LoaderViewState.Warning, LoaderViewState.Error],
-      control: { type: 'radio' },
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=444-44894&mode=design&t=YI1oD2BfBie5HcvJ-0',
-    },
-  },
-} as ComponentMeta<typeof LoaderView>;

package/src/loader/loader.tsx

@@ -1,169 +0,0 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { InteractionManager, StyleSheet, View } from 'react-native';
-import Animated, {
-  cancelAnimation,
-  Easing,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { LoaderError, LoaderProgressSpinner, LoaderSuccess, LoaderWarning } from '../icons/loader';
-import { concatTestID } from '../utils';
-
-export enum LoaderViewState {
-  Error = 'error',
-  InProgress = 'inProgress',
-  Success = 'success',
-  Warning = 'warning',
-}
-
-export type LoaderViewProps = {
-  animate: boolean;
-  state?: LoaderViewState;
-  testID?: string;
-};
-
-const LoaderView: FC<LoaderViewProps> = ({ animate, state, testID }) => {
-  const [initialDelayPassed, setInitialDelayPassed] = useState(false);
-  const rotationIsAnimating = useRef(false);
-  const rotation = useSharedValue(0);
-  const opacity = useSharedValue(state === LoaderViewState.InProgress ? 0 : 1);
-
-  const finished = state !== LoaderViewState.InProgress;
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setInitialDelayPassed(true);
-    }, 1000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      cancelAnimation(rotation);
-    };
-  }, [rotation]);
-
-  const startRotationAnimation = useCallback(() => {
-    if (rotationIsAnimating.current) {
-      return;
-    }
-    rotationIsAnimating.current = true;
-    rotation.value = withRepeat(
-      withTiming(360, {
-        duration: 1000,
-        easing: Easing.linear,
-      }),
-      -1,
-    );
-  }, [rotationIsAnimating, rotation]);
-
-  const stopRotationAnimation = useCallback(() => {
-    InteractionManager.runAfterInteractions(() => {
-      rotationIsAnimating.current = false;
-      cancelAnimation(rotation);
-      rotation.value = 0;
-    });
-  }, [rotationIsAnimating, rotation]);
-
-  useEffect(() => {
-    if (animate) {
-      startRotationAnimation();
-    } else {
-      stopRotationAnimation();
-    }
-  }, [animate, startRotationAnimation, stopRotationAnimation]);
-
-  useEffect(() => {
-    if (!initialDelayPassed) {
-      return;
-    }
-    const toValue = finished ? 1 : 0;
-    if (opacity.value === toValue) {
-      return;
-    }
-    if (animate) {
-      if (!finished) {
-        startRotationAnimation();
-      }
-      opacity.value = withTiming(
-        toValue,
-        {
-          duration: 300,
-          easing: Easing.ease,
-        },
-        () => {
-          if (finished) {
-            runOnJS(stopRotationAnimation)();
-          }
-        },
-      );
-    } else {
-      opacity.value = toValue;
-      stopRotationAnimation();
-    }
-  }, [opacity, finished, initialDelayPassed, animate, stopRotationAnimation, startRotationAnimation]);
-
-  const spinnerAnimatedStyle = useAnimatedStyle(
-    () => ({
-      opacity: 1 - opacity.value,
-      transform: [
-        {
-          rotateZ: `${rotation.value}deg`,
-        },
-      ],
-    }),
-    [opacity, rotation],
-  );
-
-  const resultAnimatedStyle = useAnimatedStyle(
-    () => ({
-      opacity: opacity.value,
-    }),
-    [opacity],
-  );
-
-  const finishedIcon = useMemo(() => {
-    switch (state) {
-      case LoaderViewState.Success:
-        return <LoaderSuccess />;
-      case LoaderViewState.Warning:
-        return <LoaderWarning />;
-      case LoaderViewState.Error:
-        return <LoaderError />;
-      default:
-        return null;
-    }
-  }, [state]);
-
-  return (
-    <View style={styles.loader} testID={concatTestID(testID, state)}>
-      <Animated.View style={[styles.loaderElement, spinnerAnimatedStyle]}>
-        <LoaderProgressSpinner />
-      </Animated.View>
-      <Animated.View style={[styles.loaderElement, resultAnimatedStyle]}>{finishedIcon}</Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  loader: {
-    height: 64,
-    width: 64,
-  },
-  loaderElement: {
-    height: 64,
-    left: 0,
-    position: 'absolute',
-    top: 0,
-    width: 64,
-  },
-});
-
-export default LoaderView;

package/src/loader/loading-result.stories.tsx

@@ -1,67 +0,0 @@
-import type { ComponentMeta, Story } from '@storybook/react';
-import React from 'react';
-
-import { ButtonType } from '../buttons';
-import BackButton from '../buttons/back-button';
-import { LoaderViewState } from './loader';
-import LoadingResultScreen from './loading-result';
-
-type Args = {
-  label: string;
-  state: LoaderViewState;
-  withButton1: boolean;
-  withButton2: boolean;
-  withButton3: boolean;
-  withHeader: boolean;
-};
-
-const Basic: Story<Args> = ({ label, state, withButton1, withButton2, withButton3, withHeader }) => {
-  return (
-    <LoadingResultScreen
-      button={withButton1 ? { title: 'Button 1' } : undefined}
-      secondaryButton={withButton2 ? { type: ButtonType.Secondary, title: 'Button 2' } : undefined}
-      tertiaryButton={withButton3 ? { type: ButtonType.Secondary, title: 'Button 3' } : undefined}
-      header={
-        withHeader
-          ? {
-              leftItem: BackButton,
-              title: 'Title',
-            }
-          : undefined
-      }
-      loader={{
-        animate: true,
-        state,
-        label,
-      }}
-    />
-  );
-};
-
-Basic.args = {
-  label: 'Loading...',
-  state: LoaderViewState.InProgress,
-  withButton1: true,
-  withButton2: false,
-  withButton3: false,
-  withHeader: true,
-};
-
-export { Basic as LoadingResultScreen };
-
-export default {
-  title: 'component/loader/LoadingResultScreen',
-  component: LoadingResultScreen,
-  argTypes: {
-    state: {
-      options: [LoaderViewState.InProgress, LoaderViewState.Success, LoaderViewState.Warning],
-      control: { type: 'radio' },
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=444-44894&mode=design&t=YI1oD2BfBie5HcvJ-0',
-    },
-  },
-} as ComponentMeta<typeof LoadingResultScreen>;