react95-native-rabbl 0.1.1

package/src/components/ScrollView/ScrollView.tsx

@@ -0,0 +1,284 @@
+import React, { useRef } from 'react';
+import {
+  StyleSheet,
+  View,
+  ScrollView as RNScrollView,
+  ViewStyle,
+  StyleProp,
+  ImageBackground,
+  PanResponder,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import type {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+import useAsyncReference from '../../hooks/useAsyncReference';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Panel, Button, ArrowIcon } from '../..';
+
+type Direction = -1 | 1;
+
+type ScrollViewProps = React.ComponentProps<typeof View> & {
+  alwaysShowScrollbars?: boolean;
+  children: React.ReactNode;
+  horizontal?: boolean;
+  small?: boolean;
+  scrollViewProps?: React.ComponentProps<typeof RNScrollView>;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+// TODO: performance improvements (callbacks, refs ...etc)
+// TODO: disable scroll buttons when scroll position reached min or max
+// TODO: add 'scrollIncrement' prop (granularity of scroll buttons)
+const ScrollView = ({
+  alwaysShowScrollbars = false,
+  children,
+  horizontal = false,
+  small = false,
+  scrollViewProps = {},
+  style,
+  theme,
+  ...rest
+}: ScrollViewProps) => {
+  const scrollViewRef = useRef<RNScrollView>(null);
+
+  const [contentOffset, setContentOffset] = useAsyncReference(0);
+  const [contentSize, setContentSize] = useAsyncReference(0);
+  const [scrollViewSize, setScrollViewSize] = useAsyncReference(0);
+
+  const scrollbarThickness = small ? 26 : 30;
+  const scrollbarButtonSize = scrollbarThickness;
+  const scrollbarAxis = horizontal ? 'x' : 'y';
+  const scrollbarLengthDimension = horizontal ? 'width' : 'height';
+  const scrollbarThicknessDimension = horizontal ? 'height' : 'width';
+
+  const contentFullyVisible = contentSize.current <= scrollViewSize.current;
+
+  const visibleContentRatio = scrollViewSize.current / contentSize.current;
+
+  const scrolledContentRatio = contentOffset.current / contentSize.current;
+
+  const thumbPosition =
+    Math.max(
+      0,
+      Math.min(
+        1 - visibleContentRatio,
+        parseFloat(scrolledContentRatio.toFixed(3)),
+      ),
+    ) * 100;
+
+  // CALLBACKS
+
+  const scrollTo = (distance: number, animated = false) => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollTo({
+        [scrollbarAxis]: distance,
+        animated,
+      });
+    }
+  };
+
+  const handleScrollButtonPress = (direction: Direction) => {
+    scrollTo(contentOffset.current + 24 * direction, true);
+  };
+
+  const handleTrackPress = (direction: Direction) => {
+    scrollTo(contentOffset.current + scrollViewSize.current * direction);
+  };
+
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollViewProps.onScroll?.(e);
+    setContentOffset(e.nativeEvent.contentOffset[scrollbarAxis]);
+  };
+
+  const handleContentSizeChange = (width: number, height: number) => {
+    scrollViewProps.onContentSizeChange?.(width, height);
+    setContentSize(horizontal ? width : height);
+  };
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    scrollViewProps.onLayout?.(e);
+    setScrollViewSize(e.nativeEvent.layout[scrollbarLengthDimension]);
+  };
+
+  const dragStartScrollPositionRef = useRef(0);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+
+      onPanResponderGrant: () => {
+        dragStartScrollPositionRef.current = contentOffset.current;
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        const scrollTrackLength =
+          scrollViewSize.current - 2 * scrollbarButtonSize;
+        const scrollDistanceChange =
+          gestureState[horizontal ? 'dx' : 'dy'] / scrollTrackLength;
+
+        const translatedDistance = scrollDistanceChange * contentSize.current;
+        scrollTo(dragStartScrollPositionRef.current + translatedDistance);
+      },
+      onPanResponderTerminationRequest: () => true,
+    }),
+  ).current;
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          flexDirection: horizontal ? 'column' : 'row',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <View style={[styles.content]}>
+        <RNScrollView
+          {...scrollViewProps}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={10}
+          ref={scrollViewRef}
+          onScroll={handleScroll}
+          onContentSizeChange={handleContentSizeChange}
+          onLayout={handleLayout}
+          horizontal={horizontal}
+        >
+          {children}
+        </RNScrollView>
+      </View>
+      {(!contentFullyVisible || alwaysShowScrollbars) && (
+        <View
+          accessibilityRole='scrollbar'
+          style={[
+            {
+              flexDirection: horizontal ? 'row' : 'column',
+              [scrollbarLengthDimension]: '100%',
+              [scrollbarThicknessDimension]: scrollbarThickness,
+              backgroundColor: theme.material,
+            },
+          ]}
+        >
+          <ImageBackground
+            style={[styles.background]}
+            imageStyle={{
+              resizeMode: 'repeat',
+            }}
+            source={{
+              // TODO: create util function for generating checkered background
+              uri:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIUlEQVQoU2P8////fwYkwMjIyIjCp4MCZPtAbAwraa8AAEGrH/nfAIhgAAAAAElFTkSuQmCC',
+            }}
+          />
+          <Button
+            theme={theme}
+            variant='raised'
+            onPress={() => handleScrollButtonPress(-1)}
+            disabled={contentFullyVisible}
+            style={{
+              height: scrollbarButtonSize,
+              width: scrollbarButtonSize,
+              padding: 0,
+            }}
+          >
+            <ArrowIcon
+              theme={theme}
+              direction={horizontal ? 'left' : 'up'}
+              disabled={contentFullyVisible}
+              segments={small ? 3 : 4}
+            />
+          </Button>
+          <View style={[styles.scrollbarTrack]}>
+            {!contentFullyVisible && (
+              <View
+                style={{
+                  flex: 1,
+                  flexDirection: horizontal ? 'row' : 'column',
+                }}
+              >
+                <TouchableWithoutFeedback
+                  onPressIn={() => handleTrackPress(-1)}
+                >
+                  <View
+                    style={{
+                      [scrollbarLengthDimension]: `${thumbPosition}%`,
+                    }}
+                  />
+                </TouchableWithoutFeedback>
+                {/* SCROLLBAR THUMB */}
+                <Panel
+                  theme={theme}
+                  variant='raised'
+                  style={{
+                    [scrollbarLengthDimension]: `${visibleContentRatio * 100}%`,
+                  }}
+                  {...panResponder.panHandlers}
+                />
+                <TouchableWithoutFeedback onPressIn={() => handleTrackPress(1)}>
+                  <View
+                    style={{
+                      flex: 1,
+                    }}
+                  />
+                </TouchableWithoutFeedback>
+              </View>
+            )}
+          </View>
+          <Button
+            theme={theme}
+            variant='raised'
+            onPress={() => handleScrollButtonPress(1)}
+            disabled={contentFullyVisible}
+            style={{
+              height: scrollbarButtonSize,
+              width: scrollbarButtonSize,
+              padding: 0,
+            }}
+          >
+            <ArrowIcon
+              theme={theme}
+              direction={horizontal ? 'right' : 'down'}
+              disabled={contentFullyVisible}
+              segments={small ? 3 : 4}
+            />
+          </Button>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: 'flex',
+    position: 'relative',
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  scrollbarTrack: {
+    overflow: 'hidden',
+    flex: 1,
+  },
+  background: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+});
+
+export default withTheme(ScrollView);

package/src/components/ScrollView/index.ts

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

package/src/components/Select/Select.tsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableHighlight,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import type { Theme, AnyValue } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import {
+  blockSizes,
+  buildBorderStyles,
+  builtTextStyles,
+} from '../../styles/styles';
+import shadow from '../../styles/shadow';
+
+import getSelectOptions, { Option } from './SelectBase';
+import { ScrollView, Text, ArrowIcon, Panel } from '../..';
+
+type Props = {
+  disabled?: boolean;
+  menuMaxHeight?: number;
+  // TODO: what to put below?
+  onChange: (value: AnyValue) => void;
+  options: Array<Option>;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value: AnyValue;
+};
+
+const Select = ({
+  disabled = false,
+  menuMaxHeight,
+  onChange,
+  options = [],
+  style,
+  theme,
+  value,
+  ...rest
+}: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+
+  function handleOptionSelect(option: Option) {
+    onChange(option.value);
+    setIsOpen(false);
+  }
+
+  function getLabelContainerBackgroundColor() {
+    if (disabled) {
+      return theme.material;
+    }
+
+    if (isPressed) {
+      return theme.hoverBackground;
+    }
+
+    return theme.canvas;
+  }
+
+  const [selectedOptions, selectOptions] = getSelectOptions({
+    options,
+    values: [value],
+    onChange: handleOptionSelect,
+    theme,
+  });
+
+  const selectedOption = selectedOptions[0];
+  // TODO: close dropdown when user touches outside of component
+  // TODO: native prop to use native select
+
+  const borderStyles = buildBorderStyles(theme);
+  const textStyles = builtTextStyles(theme);
+
+  return (
+    <Panel
+      theme={theme}
+      variant='cutout'
+      background={disabled ? 'material' : 'canvas'}
+      style={[styles.wrapper, style]}
+      {...rest}
+    >
+      <TouchableHighlight
+        onPress={() => setIsOpen(currentIsOpen => !currentIsOpen)}
+        activeOpacity={1}
+        disabled={disabled}
+        onHideUnderlay={() => setIsPressed(false)}
+        onShowUnderlay={() => setIsPressed(true)}
+        // TODO: accessibility
+        // accessibilityTraits
+        // accessibilityComponentType
+        // accessibilityRole
+        // accessibilityState
+        underlayColor='none'
+      >
+        <View style={[styles.inner]}>
+          <View style={[styles.flex]}>
+            <View
+              style={[
+                styles.selectValue,
+                { backgroundColor: disabled ? theme.material : theme.canvas },
+              ]}
+            >
+              <View
+                style={[
+                  styles.center,
+                  {
+                    borderWidth: 2,
+                    borderColor: disabled ? theme.material : theme.canvas,
+                    backgroundColor: getLabelContainerBackgroundColor(),
+                  },
+
+                  isPressed && borderStyles.focusSecondaryOutline,
+                ]}
+              >
+                <Text
+                  theme={theme}
+                  style={[
+                    styles.textValue,
+                    disabled ? textStyles.disabled : textStyles.default,
+                    !disabled &&
+                      isPressed && {
+                        color: isPressed
+                          ? theme.canvasTextInvert
+                          : theme.canvasText,
+                      },
+                  ]}
+                >
+                  {selectedOption.label}
+                </Text>
+              </View>
+            </View>
+            <Panel
+              theme={theme}
+              variant={isPressed ? 'default' : 'raised'}
+              invert={isPressed}
+              style={[styles.fakeButton]}
+            >
+              <ArrowIcon
+                theme={theme}
+                segments={4}
+                direction='down'
+                disabled={disabled}
+                style={{
+                  paddingTop: isPressed ? 2 : 0,
+                }}
+              />
+            </Panel>
+          </View>
+          {isOpen && (
+            <View
+              style={[
+                styles.options,
+                {
+                  height: menuMaxHeight || 'auto',
+                  backgroundColor: theme.canvas,
+                  borderColor: theme.borderDarkest,
+                },
+              ]}
+            >
+              <ScrollView theme={theme}>{selectOptions}</ScrollView>
+            </View>
+          )}
+        </View>
+      </TouchableHighlight>
+    </Panel>
+  );
+};
+
+const selectHeight = blockSizes.md;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    height: selectHeight,
+    alignSelf: 'flex-start',
+    padding: 0,
+  },
+  inner: {
+    position: 'relative',
+    padding: 4,
+  },
+  flex: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+  },
+  selectValue: {
+    flexGrow: 1,
+    flex: 1,
+    height: '100%',
+    padding: 2,
+  },
+  center: {
+    flexGrow: 1,
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+  },
+  textValue: {
+    fontSize: 16,
+    paddingHorizontal: 4,
+  },
+  fakeButton: {
+    position: 'relative',
+    height: '100%',
+    width: 30,
+    padding: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  options: {
+    position: 'absolute',
+    top: selectHeight,
+    left: 0,
+    right: 0,
+    borderWidth: 2,
+    padding: 2,
+    display: 'flex',
+    ...shadow(2),
+  },
+});
+
+export default withTheme(Select);

package/src/components/Select/SelectBase.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { StyleSheet, View, TouchableHighlight } from 'react-native';
+
+import type { Theme, AnyValue } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { blockSizes } from '../../styles/styles';
+
+import { Text } from '../..';
+// TODO: allow for no option selected
+export type Option = {
+  label: React.ReactNode;
+  value: AnyValue;
+};
+
+type SelectItemProps = {
+  isSelected: boolean;
+  onPress: (option: Option) => void;
+  option: Option;
+  theme: Theme;
+};
+
+const SelectItem = ({
+  isSelected,
+  onPress,
+  option,
+  theme,
+}: SelectItemProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <TouchableHighlight
+      onPress={() => onPress(option)}
+      onHideUnderlay={() => setIsPressed(false)}
+      onShowUnderlay={() => setIsPressed(true)}
+      underlayColor='none'
+      // delay to prevent item highlighting on scroll
+      delayPressIn={70}
+      activeOpacity={1}
+    >
+      <View
+        style={[
+          styles.center,
+          styles.optionWrapper,
+          {
+            borderColor: isPressed ? theme.focusSecondary : 'transparent',
+            backgroundColor:
+              isPressed || isSelected ? theme.hoverBackground : theme.canvas,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.optionText,
+            {
+              color:
+                isPressed || isSelected
+                  ? theme.canvasTextInvert
+                  : theme.canvasText,
+            },
+          ]}
+        >
+          {option.label}
+        </Text>
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const SelectItemWithTheme = withTheme(SelectItem);
+
+const selectHeight = blockSizes.md + 2;
+
+const styles = StyleSheet.create({
+  center: {
+    flexGrow: 1,
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+  },
+  optionWrapper: {
+    height: selectHeight - 4,
+    borderWidth: 2,
+    borderStyle: 'dotted',
+  },
+  optionText: {
+    fontSize: 16,
+    paddingLeft: 6,
+  },
+});
+
+type SelectOptionsProps = {
+  options: Array<Option>;
+  values: [AnyValue];
+  onChange: (option: Option) => void;
+  theme: Theme;
+};
+
+export default function getSelectOptions({
+  options,
+  values,
+  onChange,
+  theme,
+}: SelectOptionsProps): [Option[], JSX.Element[]] {
+  const selectedOptions = options.filter(option =>
+    values.includes(option.value),
+  );
+
+  const optionItems = options.map(option => (
+    <SelectItemWithTheme
+      theme={theme}
+      key={option.value}
+      option={option}
+      isSelected={selectedOptions.includes(option)}
+      onPress={onChange}
+    />
+  ));
+  return [selectedOptions, optionItems];
+}

package/src/components/Select/SelectBox.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import type { Theme, AnyValue } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import getSelectOptions, { Option } from './SelectBase';
+import { ScrollView, Panel } from '../..';
+
+// TODO: multiselect
+
+type Props = {
+  onChange: (value: AnyValue) => void;
+  options: Array<Option>;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value: [AnyValue] | AnyValue;
+};
+
+const SelectBox = ({
+  onChange,
+  options = [],
+  style,
+  theme,
+  value,
+  ...rest
+}: Props) => {
+  const [, selectOptions] = getSelectOptions({
+    theme,
+    options,
+    values: [value],
+    onChange: handleOptionSelect,
+  });
+
+  function handleOptionSelect(option: Option) {
+    onChange(option.value);
+  }
+
+  return (
+    <Panel
+      theme={theme}
+      variant='cutout'
+      background='canvas'
+      style={[styles.wrapper, style]}
+      {...rest}
+    >
+      <ScrollView theme={theme}>
+        <View style={[styles.content, { backgroundColor: theme.canvas }]}>
+          {selectOptions}
+        </View>
+      </ScrollView>
+    </Panel>
+  );
+};
+
+export default withTheme(SelectBox);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    paddingVertical: 4,
+    paddingHorizontal: 4,
+  },
+  content: {
+    padding: 2,
+  },
+});

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export { default as SelectBox } from './SelectBox';