react95-native-rabbl 0.1.1

package/src/components/FAB/FABGroup.tsx

@@ -0,0 +1,385 @@
+import * as React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Animated,
+  SafeAreaView,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { Text, FAB, Card } from '../..';
+
+type Props = {
+  icon?: boolean;
+  /**
+   * Action items to display in the form of a speed dial.
+   * An action item should contain the following properties:
+   * - `icon`: icon to display (required)
+   * - `label`: optional label text
+   * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
+   * - `color`: custom icon color of the action item
+   * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
+   * - `small`: boolean describing whether small or normal sized FAB is rendered. Defaults to `true`
+   * - `onPress`: callback that is called when `FAB` is pressed (required)
+   */
+  actions: Array<{
+    icon?: boolean;
+    label?: string;
+    color?: string;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    small?: boolean;
+    onPress: () => void;
+    testID?: string;
+  }>;
+  /**
+   * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Custom color for the `FAB`.
+   */
+  color?: string;
+  /**
+   * Function to execute on pressing the `FAB`.
+   */
+  onPress?: () => void;
+  /**
+   * Whether the speed dial is open.
+   */
+  open: boolean;
+  /**
+   * Callback which is called on opening and closing the speed dial.
+   * The open state needs to be updated when it's called, otherwise the change is dropped.
+   */
+  onStateChange: (state: { open: boolean }) => void;
+  /**
+   * Whether `FAB` is currently visible.
+   */
+  visible: boolean;
+  /**
+   * Style for the group. You can use it to pass additional styles if you need.
+   * For example, you can set an additional padding if you have a tab bar at the bottom.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
+   */
+  fabStyle?: StyleProp<ViewStyle>;
+  /**
+   * Pass down testID from Group props to FAB.
+   */
+  testID?: string;
+};
+
+/**
+ * A component to display a stack of FABs with related actions in a speed dial.
+ * To render the group above other components, you'll need to wrap it with the [`Portal`](portal.html) component.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/fab-group.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { FAB, Portal, Provider } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [state, setState] = React.useState({ open: false });
+ *
+ *   const onStateChange = ({ open }) => setState({ open });
+ *
+ *   const { open } = state;
+ *
+ *   return (
+ *     <Provider>
+ *       <Portal>
+ *         <FAB.Group
+ *           open={open}
+ *           icon={open ? 'calendar-today' : 'plus'}
+ *           actions={[
+ *             { icon: 'plus', onPress: () => console.log('Pressed add') },
+ *             {
+ *               icon: 'star',
+ *               label: 'Star',
+ *               onPress: () => console.log('Pressed star'),
+ *             },
+ *             {
+ *               icon: 'email',
+ *               label: 'Email',
+ *               onPress: () => console.log('Pressed email'),
+ *             },
+ *             {
+ *               icon: 'bell',
+ *               label: 'Remind',
+ *               onPress: () => console.log('Pressed notifications'),
+ *               small: false,
+ *             },
+ *           ]}
+ *           onStateChange={onStateChange}
+ *           onPress={() => {
+ *             if (open) {
+ *               // do something if the speed dial is open
+ *             }
+ *           }}
+ *         />
+ *       </Portal>
+ *     </Provider>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const FABGroup = ({
+  actions,
+  icon,
+  open,
+  onPress,
+  accessibilityLabel,
+  style,
+  fabStyle,
+  visible,
+  testID,
+  onStateChange,
+  color: colorProp,
+}: Props) => {
+  const { current: backdrop } = React.useRef<Animated.Value>(
+    new Animated.Value(0),
+  );
+  const animations = React.useRef<Animated.Value[]>(
+    actions.map(() => new Animated.Value(open ? 1 : 0)),
+  );
+
+  const [prevActions, setPrevActions] = React.useState<
+    | {
+        label?: string;
+        color?: string;
+        accessibilityLabel?: string;
+        style?: StyleProp<ViewStyle>;
+        onPress: () => void;
+        testID?: string;
+      }[]
+    | null
+  >(null);
+
+  // TODO: decide on scale
+  const scale = 0.8;
+
+  React.useEffect(() => {
+    if (open) {
+      Animated.parallel([
+        Animated.timing(backdrop, {
+          toValue: 1,
+          duration: 250 * scale,
+          useNativeDriver: true,
+        }),
+        Animated.stagger(
+          50 * scale,
+          animations.current
+            .map(animation =>
+              Animated.timing(animation, {
+                toValue: 1,
+                duration: 150 * scale,
+                useNativeDriver: true,
+              }),
+            )
+            .reverse(),
+        ),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(backdrop, {
+          toValue: 0,
+          duration: 200 * scale,
+          useNativeDriver: true,
+        }),
+        ...animations.current.map(animation =>
+          Animated.timing(animation, {
+            toValue: 0,
+            duration: 150 * scale,
+            useNativeDriver: true,
+          }),
+        ),
+      ]).start();
+    }
+  }, [open, actions, backdrop, scale]);
+
+  const close = () => onStateChange({ open: false });
+
+  const toggle = () => onStateChange({ open: !open });
+
+  const labelColor = 'red';
+  const backdropOpacity = open
+    ? backdrop.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0, 1, 1],
+      })
+    : backdrop;
+
+  const opacities = animations.current;
+  const scales = opacities.map(opacity =>
+    open
+      ? opacity.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.8, 1],
+        })
+      : 1,
+  );
+
+  if (actions.length !== prevActions?.length) {
+    animations.current = actions.map(
+      (_, i) => animations.current[i] || new Animated.Value(open ? 1 : 0),
+    );
+    setPrevActions(actions);
+  }
+
+  return (
+    <View pointerEvents='box-none' style={[styles.container, style]}>
+      <TouchableWithoutFeedback onPress={close}>
+        <Animated.View
+          pointerEvents={open ? 'auto' : 'none'}
+          style={[
+            styles.backdrop,
+            {
+              opacity: backdropOpacity,
+              //   backgroundColor: colors.backdrop,
+              backgroundColor: '#00000070',
+            },
+          ]}
+        />
+      </TouchableWithoutFeedback>
+      <SafeAreaView pointerEvents='box-none' style={styles.safeArea}>
+        <View pointerEvents={open ? 'box-none' : 'none'}>
+          {actions.map((SWAG, i) => (
+            <View
+              key={i} // eslint-disable-line react/no-array-index-key
+              style={[
+                styles.item,
+                {
+                  marginHorizontal:
+                    typeof SWAG.small === 'undefined' || SWAG.small ? 24 : 16,
+                },
+              ]}
+              pointerEvents={open ? 'box-none' : 'none'}
+            >
+              {SWAG.label && (
+                <View>
+                  <Card
+                    style={
+                      [
+                        styles.label,
+                        {
+                          transform: [{ scale: scales[i] }],
+                          opacity: opacities[i],
+                        },
+                      ] as StyleProp<ViewStyle>
+                    }
+                    // onPress={() => {
+                    //   it.onPress();
+                    //   close();
+                    // }}
+                    accessibilityLabel={
+                      SWAG.accessibilityLabel !== 'undefined'
+                        ? SWAG.accessibilityLabel
+                        : SWAG.label
+                    }
+                    accessibilityTraits='button'
+                    accessibilityComponentType='button'
+                    accessibilityRole='button'
+                  >
+                    <Text style={{ color: labelColor }}>{SWAG.label}</Text>
+                  </Card>
+                </View>
+              )}
+              <FAB
+                small={typeof SWAG.small !== 'undefined' ? SWAG.small : true}
+                icon={SWAG.icon}
+                color={SWAG.color}
+                style={
+                  [
+                    {
+                      transform: [{ scale: scales[i] }],
+                      opacity: opacities[i],
+                      //   backgroundColor: theme.colors.surface,
+                    },
+                    SWAG.style,
+                  ] as StyleProp<ViewStyle>
+                }
+                onPress={() => {
+                  SWAG.onPress();
+                  close();
+                }}
+                accessibilityLabel={
+                  typeof SWAG.accessibilityLabel !== 'undefined'
+                    ? SWAG.accessibilityLabel
+                    : SWAG.label
+                }
+                accessibilityTraits='button'
+                accessibilityComponentType='button'
+                accessibilityRole='button'
+                testID={SWAG.testID}
+                visible={open}
+              />
+            </View>
+          ))}
+        </View>
+        <FAB
+          onPress={() => {
+            onPress?.();
+            toggle();
+          }}
+          icon={icon}
+          color={colorProp}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityTraits='button'
+          accessibilityComponentType='button'
+          accessibilityRole='button'
+          accessibilityState={{ expanded: open }}
+          style={[styles.fab, fabStyle]}
+          visible={visible}
+          testID={testID}
+        />
+      </SafeAreaView>
+    </View>
+  );
+};
+
+FABGroup.displayName = 'FAB.Group';
+
+export default FABGroup;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    alignItems: 'flex-end',
+  },
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
+  },
+  fab: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+    marginTop: 0,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  label: {
+    borderRadius: 5,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    elevation: 2,
+  },
+  item: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});

package/src/components/FAB/index.ts

@@ -0,0 +1 @@
+export { default } from './FAB';

package/src/components/Fieldset/Fieldset.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { Fieldset, Text } from '../..';
+
+describe('<Fieldset />', () => {
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <Fieldset testID='fieldset'>
+        <Text>Banana dance</Text>
+      </Fieldset>,
+    );
+
+    expect(getByTestId('fieldset')).toHaveTextContent('Banana dance');
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(
+      <Fieldset testID='fieldset' style={style}>
+        <Text>Fieldset</Text>
+      </Fieldset>,
+    );
+
+    expect(getByTestId('fieldset')).toHaveStyle(style);
+  });
+
+  describe('prop: label', () => {
+    it('should render label', () => {
+      const { getByText } = render(<Fieldset label='Something:' />);
+
+      expect(getByText('Something:')).toBeTruthy();
+    });
+  });
+
+  describe('prop: labelStyle', () => {
+    it('should render custom label styles', () => {
+      const style = { backgroundColor: 'teal' };
+
+      const { getByText } = render(
+        <Fieldset label='Something:' labelStyle={style} />,
+      );
+
+      expect(getByText('Something:')).toHaveStyle(style);
+    });
+  });
+});

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,107 @@
+// ORIGINAL WINDOWS NAME: GROUPBOX
+import React from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Border } from '../../styles/styleElements';
+import { Text } from '../..';
+
+export const testId = 'fieldset';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  labelStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  variant?: 'default' | 'flat';
+};
+
+const Fieldset = ({
+  children,
+  disabled,
+  label,
+  labelStyle = {},
+  style = {},
+  theme,
+  variant = 'default',
+  ...rest
+}: Props) => {
+  return (
+    <View style={[styles.wrapper, style]} testID={testId} {...rest}>
+      {variant === 'flat' ? (
+        <Border variant='flat' theme={theme} />
+      ) : (
+        <>
+          <View
+            style={[
+              styles.border,
+              {
+                borderWidth: 4,
+                borderColor: theme.borderLightest,
+              },
+            ]}
+          />
+          <View
+            style={[
+              styles.border,
+              {
+                marginRight: 2,
+                marginBottom: 2,
+                borderWidth: 2,
+                borderColor: theme.borderDark,
+              },
+            ]}
+          />
+        </>
+      )}
+      {label && (
+        <Text
+          theme={theme}
+          disabled={disabled}
+          style={[
+            styles.label,
+            {
+              backgroundColor:
+                variant === 'flat' ? theme.canvas : theme.material,
+            },
+            labelStyle,
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    marginVertical: 12,
+    padding: 20,
+  },
+  label: {
+    position: 'absolute',
+    top: 0,
+    left: 8,
+    // TODO: how to properly center the label?
+    transform: [{ translateY: -8 }],
+    paddingHorizontal: 8,
+    fontSize: 16,
+    lineHeight: 16,
+  },
+  border: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+export default withTheme(Fieldset);

package/src/components/Fieldset/index.ts

@@ -0,0 +1 @@
+export { default } from './Fieldset';

package/src/components/Hourglass/Hourglass.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Hourglass } from '../..';
+
+describe('<Hourglass />', () => {
+  it('should render Hourglass', () => {
+    const { getByTestId } = render(<Hourglass testID='hourglass' />);
+    const hourglass = getByTestId('hourglass');
+
+    expect(hourglass).toBeTruthy();
+  });
+
+  describe('prop: size', () => {
+    it('sets size correctly', () => {
+      const size = 53;
+      const { getByTestId } = render(
+        <Hourglass testID='hourglass' size={size} />,
+      );
+      const hourglass = getByTestId('hourglass');
+
+      expect(hourglass).toHaveStyle({ width: 53, height: 53 });
+    });
+  });
+});

package/src/components/Hourglass/Hourglass.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, ImageBackground, StyleProp, ViewStyle } from 'react-native';
+import type { $RemoveChildren, DimensionValue } from '../../types';
+
+import base64hourglass from './base64hourglass';
+
+type Props = $RemoveChildren<typeof View> & {
+  // TODO: switch from any size (px / %) to the way we do it in Button(sm | md | lg) ?
+  size?: DimensionValue;
+  style?: StyleProp<ViewStyle>;
+};
+
+const Hourglass = ({ size = 30, style, ...rest }: Props) => {
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <ImageBackground
+        style={[
+          {
+            width: '100%',
+            height: '100%',
+          },
+        ]}
+        imageStyle={{
+          resizeMode: 'cover',
+        }}
+        source={{
+          uri: base64hourglass,
+        }}
+      />
+    </View>
+  );
+};
+
+export default Hourglass;

package/src/components/Hourglass/base64hourglass.ts

@@ -0,0 +1,3 @@
+const base64hourglass =
+  'data:image/gif;base64,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';
+export default base64hourglass;

package/src/components/Hourglass/index.ts

@@ -0,0 +1 @@
+export { default } from './Hourglass';