react95-native-rabbl 0.1.1

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,301 @@
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  LayoutChangeEvent,
+  GestureResponderEvent,
+  PanResponder,
+  ImageBackground,
+} from 'react-native';
+import useAsyncReference from '../../hooks/useAsyncReference';
+
+import type { Theme, $RemoveChildren } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { buildBorderStyles } from '../../styles/styles';
+import { Border } from '../../styles/styleElements';
+import { clamp, roundValueToStep, findClosest } from '../../utils';
+
+import { Panel, Text, Label } from '../..';
+
+function percentToValue(percent: number, min: number, max: number) {
+  return (max - min) * percent + min;
+}
+
+type Mark = { value: number; label?: string };
+
+type Props = $RemoveChildren<typeof View> & {
+  disabled?: boolean;
+  marks?: Mark[] | boolean;
+  max?: number;
+  min?: number;
+  onChange?: (a: number) => void;
+  onChangeCommitted?: (a: number) => void;
+  step?: number | null;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value?: number;
+};
+
+const Slider = ({
+  disabled = false,
+  marks: marksProp,
+  max = 100,
+  min = 0,
+  onChange,
+  onChangeCommitted,
+  step = 1,
+  style,
+  theme,
+  value = 0,
+  ...rest
+}: Props) => {
+  const [isUsed, setIsUsed] = useState(false);
+
+  let marks: Mark[];
+  // if marks is set to true, we only show ticks at specified steps
+  if (marksProp === true && step !== null) {
+    marks = [...Array(Math.round((max - min) / step) + 1)].map((_, index) => ({
+      value: min + step * index,
+    }));
+    // otherwise we display ticks and optional labels specified by the developer
+  } else if (Array.isArray(marksProp)) {
+    marks = marksProp;
+    // otherwise don't display any marks or labels
+  } else {
+    marks = [];
+  }
+
+  const [sliderSize, setSliderSize] = useAsyncReference(0);
+  const handleLayout = (e: LayoutChangeEvent) => {
+    setSliderSize(e.nativeEvent.layout.width);
+  };
+
+  const getNewValue = (e: GestureResponderEvent) => {
+    const percent = clamp(e.nativeEvent.locationX / sliderSize.current, 0, 1);
+    let newValue = percentToValue(percent, min, max);
+
+    if (step) {
+      newValue = roundValueToStep(newValue, step, min);
+    } else {
+      const marksValues = marks.map(mark => mark.value);
+      const closestIndex = findClosest(marksValues, newValue);
+      newValue = marksValues[closestIndex];
+    }
+    newValue = clamp(newValue, min, max);
+    return newValue;
+  };
+
+  // TODO: is this a good approach?
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+
+  const handleChange = (newValue: number) => {
+    if (valueRef.current !== newValue) {
+      onChange?.(newValue);
+    }
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderStart: e => {
+        setIsUsed(true);
+        const newValue = getNewValue(e);
+        handleChange(newValue);
+      },
+      onPanResponderMove: e => {
+        const newValue = getNewValue(e);
+        handleChange(newValue);
+      },
+      onPanResponderEnd: e => {
+        setIsUsed(false);
+        const newValue = getNewValue(e);
+        onChangeCommitted?.(newValue);
+      },
+      onPanResponderTerminationRequest: () => true,
+    }),
+  ).current;
+
+  const borderStyles = buildBorderStyles(theme);
+  return (
+    <View
+      style={[styles.wrapper, style]}
+      {...rest}
+      accessibilityRole='adjustable'
+      accessibilityState={{ disabled }}
+      accessibilityValue={{
+        min,
+        max,
+        now: value,
+      }}
+    >
+      <View
+        style={[
+          styles.inner,
+          isUsed
+            ? borderStyles.focusOutline
+            : { borderWidth: 2, borderColor: 'transparent' },
+        ]}
+      >
+        <View
+          pointerEvents={disabled ? 'none' : 'auto'}
+          style={[styles.track]}
+          onLayout={handleLayout}
+          {...panResponder.panHandlers}
+        >
+          <View style={[styles.trackInner]}>
+            <Border theme={theme} variant='cutout' />
+            {/* THUMB */}
+            <Panel
+              theme={theme}
+              pointerEvents='none'
+              style={[
+                styles.thumb,
+                {
+                  left: `${(100 * (value - min)) / (max - min)}%`,
+                },
+              ]}
+            >
+              {disabled && (
+                <ImageBackground
+                  style={{
+                    flex: 1,
+                  }}
+                  imageStyle={{
+                    resizeMode: 'repeat',
+                  }}
+                  source={{
+                    // TODO: create util function for generating checkered background
+                    uri:
+                      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIUlEQVQoU2P8////fwYkwMjIyIjCp4MCZPtAbAwraa8AAEGrH/nfAIhgAAAAAElFTkSuQmCC',
+                  }}
+                />
+              )}
+              {isUsed && (
+                <View style={styles.tooltipWrapper}>
+                  <Label elevation={4} style={styles.tooltip}>
+                    {value}
+                  </Label>
+                </View>
+              )}
+            </Panel>
+          </View>
+        </View>
+        {marks && (
+          <View style={styles.marksWrapper}>
+            {marks.map((m: Mark, index: number) => (
+              <View
+                style={[
+                  styles.mark,
+
+                  {
+                    position: index === 0 ? 'relative' : 'absolute',
+                    left: `${((m.value - min) / (max - min)) * 100}%`,
+                  },
+                ]}
+                key={(m.value / (max - min)) * 100}
+              >
+                <View
+                  style={[
+                    styles.tick,
+                    {
+                      backgroundColor: disabled
+                        ? theme.materialTextDisabled
+                        : theme.materialText,
+                      // TODO: util function to create disabled shadows
+                      shadowColor: disabled
+                        ? theme.materialTextDisabledShadow
+                        : 'transparent',
+                      shadowOffset: {
+                        width: 1,
+                        height: 1,
+                      },
+                      shadowOpacity: 1,
+                      shadowRadius: 0,
+                    },
+                  ]}
+                />
+                {m.label ? (
+                  <Text style={styles.markText} disabled={disabled}>
+                    {m.label}
+                  </Text>
+                ) : null}
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const thumbWidth = 18;
+const thumbHeight = 32;
+const tickSize = 6;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    paddingVertical: 4,
+  },
+  inner: {
+    position: 'relative',
+    paddingHorizontal: 16,
+  },
+  track: {
+    paddingVertical: thumbHeight / 2,
+  },
+  trackInner: {
+    height: 8,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  thumb: {
+    position: 'absolute',
+    width: thumbWidth,
+    height: thumbHeight,
+    transform: [
+      {
+        translateX: -thumbWidth / 2,
+      },
+    ],
+  },
+  tooltipWrapper: {
+    position: 'absolute',
+    top: -44,
+    left: thumbWidth / 2,
+    alignItems: 'center',
+  },
+  tooltip: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  marksWrapper: {
+    position: 'relative',
+  },
+  mark: {
+    transform: [{ translateX: -1 }],
+  },
+  tick: {
+    height: tickSize,
+    marginBottom: 2,
+    width: 2,
+  },
+  markText: {
+    fontSize: 14,
+    // TODO: is there a way to translate by 0.5 of a character width?
+    // tick should centered above
+    transform: [{ translateX: -2 }],
+  },
+});
+
+export default withTheme(Slider);

package/src/components/Slider/index.ts

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

package/src/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,260 @@
+import * as React from 'react';
+import {
+  Animated,
+  SafeAreaView,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  View,
+  ImageBackground,
+  TouchableOpacity,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+import { Text } from '../..';
+
+type Props = React.ComponentProps<typeof Animated.View> & {
+  /**
+   * Whether the Snackbar is currently visible.
+   */
+  visible: boolean;
+  /**
+   * Label and press callback for the action button. It should contain the following properties:
+   * - `label` - Label of the action button
+   * - `onPress` - Callback that is called when action button is pressed.
+   */
+  action?: {
+    label: string;
+    accessibilityLabel?: string;
+    onPress: () => void;
+  };
+  /**
+   * The duration for which the Snackbar is shown.
+   */
+  duration?: number;
+  /**
+   * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.
+   */
+  onDismiss: () => void;
+  /**
+   * Text content of the Snackbar.
+   */
+  children: React.ReactNode;
+  /**
+   * Style for the wrapper of the snackbar
+   */
+  wrapperStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  ref?: React.RefObject<View>;
+  /**
+   * @optional
+   */
+  theme: Theme;
+};
+
+const DURATION_SHORT = 4000;
+const DURATION_MEDIUM = 7000;
+const DURATION_LONG = 10000;
+
+const shadowOffset = 8;
+const radius = 4;
+
+const Snackbar = ({
+  visible,
+  action,
+  duration = DURATION_MEDIUM,
+  onDismiss,
+  children,
+  wrapperStyle,
+  style,
+  theme,
+  ...rest
+}: Props) => {
+  const { current: opacity } = React.useRef<Animated.Value>(
+    new Animated.Value(0.0),
+  );
+  const [hidden, setHidden] = React.useState<boolean>(!visible);
+
+  const hideTimeout = React.useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const scale = 0.5;
+
+  React.useEffect(() => {
+    return () => {
+      if (hideTimeout.current) clearTimeout(hideTimeout.current);
+    };
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (visible) {
+      // show
+      if (hideTimeout.current) clearTimeout(hideTimeout.current);
+      setHidden(false);
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200 * scale,
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) {
+          const isInfinity =
+            duration === Number.POSITIVE_INFINITY ||
+            duration === Number.NEGATIVE_INFINITY;
+
+          if (finished && !isInfinity) {
+            hideTimeout.current = setTimeout(onDismiss, duration);
+          }
+        }
+      });
+    } else {
+      // hide
+      if (hideTimeout.current) clearTimeout(hideTimeout.current);
+
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 100 * scale,
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) setHidden(true);
+      });
+    }
+  }, [visible, duration, opacity, scale, onDismiss]);
+
+  if (hidden) return null;
+
+  return (
+    <SafeAreaView
+      pointerEvents='box-none'
+      style={[styles.wrapper, wrapperStyle]}
+    >
+      <Animated.View
+        pointerEvents='box-none'
+        accessibilityLiveRegion='polite'
+        // TODO: fix this TS error
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        style={
+          [
+            styles.container,
+            {
+              opacity,
+              transform: [
+                {
+                  scale: visible
+                    ? opacity.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0.9, 1],
+                      })
+                    : 1,
+                },
+              ],
+            },
+            style,
+          ] as StyleProp<ViewStyle>
+        }
+        {...rest}
+      >
+        <View style={styles.inner}>
+          <View style={styles.shadow}>
+            <ImageBackground
+              style={[{ width: '100%', height: '100%' }]}
+              imageStyle={{
+                resizeMode: 'repeat',
+              }}
+              source={{
+                uri:
+                  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
+              }}
+            />
+          </View>
+          <View
+            style={[
+              styles.card,
+              {
+                backgroundColor: theme.tooltip,
+                borderColor: theme.borderDarkest,
+              },
+            ]}
+          >
+            <Text style={[styles.content, { marginRight: action ? 0 : 16 }]}>
+              {children}
+            </Text>
+            {action ? (
+              <TouchableOpacity
+                activeOpacity={0.4}
+                accessibilityLabel={action.accessibilityLabel}
+                onPress={() => {
+                  action.onPress();
+                  onDismiss();
+                }}
+                style={styles.button}
+              >
+                <Text bold style={styles.buttonText}>
+                  {action.label}
+                </Text>
+              </TouchableOpacity>
+            ) : null}
+          </View>
+        </View>
+      </Animated.View>
+    </SafeAreaView>
+  );
+};
+
+Snackbar.DURATION_SHORT = DURATION_SHORT;
+
+Snackbar.DURATION_MEDIUM = DURATION_MEDIUM;
+
+Snackbar.DURATION_LONG = DURATION_LONG;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
+  container: {
+    margin: 16,
+  },
+  content: {
+    marginLeft: 16,
+    marginVertical: 16,
+  },
+  button: {
+    marginHorizontal: 8,
+    marginVertical: 8,
+    textTransform: 'uppercase',
+    alignSelf: 'flex-end',
+    height: 36,
+    paddingHorizontal: 8,
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+  inner: {
+    flex: 1,
+    marginRight: shadowOffset,
+    marginBottom: shadowOffset,
+  },
+  card: {
+    borderWidth: 2,
+    borderRadius: radius,
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  shadow: {
+    position: 'absolute',
+    top: shadowOffset,
+    left: shadowOffset,
+    overflow: 'hidden',
+    borderRadius: radius,
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default withTheme(Snackbar);

package/src/components/Snackbar/SnackbarContent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SnackbarContent = ({ children, style = {}, ...rest }: Props) => {
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    padding: 8,
+  },
+});
+
+export default SnackbarContent;

package/src/components/Snackbar/index.ts

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