react95-native-rabbl 0.1.1

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+
+import type { Theme, Orientation } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Panel } from '../..';
+
+import MenuItem from './MenuItem';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  anchor?: React.ReactNode;
+  children: React.ReactNode;
+  open?: boolean;
+  orientation?: Orientation;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  horizontalAlignment?: 'left' | 'right';
+  verticalAlignment?: 'above' | 'below';
+};
+
+const Menu = ({
+  anchor,
+  children,
+  open = false,
+  orientation = 'vertical',
+  style = {},
+  theme,
+  horizontalAlignment: horizontalAlign = 'left',
+  verticalAlignment: verticalAlign = 'below',
+  ...rest
+}: Props) => {
+  const [menuSize, setMenuSize] = React.useState({ width: 0, height: 0 });
+
+  const handleMenuLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setMenuSize({ width, height });
+  };
+
+  const menuPosition: StyleProp<ViewStyle> = {};
+  if (verticalAlign === 'below') {
+    menuPosition.top = '100%';
+  } else {
+    menuPosition.top = -menuSize.height;
+  }
+  if (horizontalAlign === 'left') {
+    menuPosition.left = 0;
+  } else {
+    menuPosition.right = menuSize.width;
+  }
+
+  return (
+    <View style={styles.wrapper}>
+      {anchor}
+
+      {open && (
+        <View style={[styles.menuWrapper, menuPosition]}>
+          <Panel
+            {...rest}
+            theme={theme}
+            variant='raised'
+            elevation={2}
+            onLayout={handleMenuLayout}
+            style={[
+              styles.menu,
+              {
+                display: 'flex',
+                flexDirection: orientation === 'vertical' ? 'column' : 'row',
+              },
+              style,
+            ]}
+          >
+            {children}
+          </Panel>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+  },
+  menuWrapper: {
+    position: 'absolute',
+  },
+  menu: {
+    width: 'auto',
+    position: 'absolute',
+    height: 'auto',
+    flexGrow: 0,
+    padding: 6,
+  },
+});
+
+Menu.Item = MenuItem;
+
+export default withTheme(Menu);

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableHighlight,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import type { Theme, Sizes } from '../../types';
+import { withTheme } from '../../core/theming';
+import { blockSizes, builtTextStyles } from '../../styles/styles';
+
+import { Text } from '../..';
+
+// TODO: add icon prop
+
+type Props = {
+  disabled?: boolean;
+  onPress: () => void;
+  primary?: boolean;
+  size?: Sizes;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  title: string;
+};
+
+export const Item = ({
+  disabled,
+  onPress,
+  primary = false,
+  size = 'md',
+  style,
+  theme,
+  title,
+  ...rest
+}: Props) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const textStyles = builtTextStyles(theme);
+  return (
+    <View
+      {...rest}
+      style={[
+        styles.item,
+        { height: blockSizes[size] },
+        {
+          backgroundColor: isPressed ? theme.hoverBackground : theme.material,
+        },
+        style,
+      ]}
+    >
+      <TouchableHighlight
+        style={[styles.button]}
+        onPress={onPress}
+        disabled={disabled}
+        onHideUnderlay={() => setIsPressed(false)}
+        onShowUnderlay={() => setIsPressed(true)}
+        underlayColor='none'
+        // TODO: which accessibilityRole put in here?
+        accessibilityRole='menuitem'
+        accessibilityState={{ disabled }}
+      >
+        <View pointerEvents='none' style={[styles.content]}>
+          <Text
+            theme={theme}
+            bold={primary}
+            style={[
+              disabled ? textStyles.disabled : textStyles.default,
+              !disabled && {
+                color: isPressed
+                  ? theme.materialTextInvert
+                  : theme.materialText,
+              },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+      </TouchableHighlight>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    position: 'relative',
+  },
+  button: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  content: {
+    alignSelf: 'flex-start',
+  },
+});
+
+export default withTheme(Item);

package/src/components/Menu/index.ts

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

package/src/components/NumberInput/NumberInput.spec.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { NumberInput } from '../..';
+
+describe('<NumberInput />', () => {
+  it('should call onChange on increment press', () => {
+    const handleChange = jest.fn();
+
+    const { getByTestId } = render(
+      <NumberInput onChange={handleChange} defaultValue={2} />,
+    );
+    const spinButton = getByTestId('increment');
+    fireEvent(spinButton, 'press');
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(3);
+  });
+
+  it('should call onChange on decrement press', () => {
+    const handleChange = jest.fn();
+
+    const { getByTestId } = render(
+      <NumberInput onChange={handleChange} defaultValue={2} />,
+    );
+    const spinButton = getByTestId('decrement');
+    fireEvent(spinButton, 'press');
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(1);
+  });
+
+  it('should reach max value', () => {
+    const { getByTestId } = render(
+      <NumberInput defaultValue={90} min={0} max={100} step={10} />,
+    );
+    const input = getByTestId('input');
+    const incrementButton = getByTestId('increment');
+    fireEvent(incrementButton, 'press');
+
+    expect(input.props.value).toBe('100');
+  });
+
+  it('should reach min value', () => {
+    const { getByTestId } = render(
+      <NumberInput defaultValue={10} min={0} max={100} step={10} />,
+    );
+    const input = getByTestId('input');
+    const decrementButton = getByTestId('decrement');
+    fireEvent(decrementButton, 'press');
+
+    expect(input.props.value).toBe('0');
+  });
+
+  describe('prop: step', () => {
+    it('should be 1 by default', () => {
+      const { getByTestId } = render(<NumberInput defaultValue={0} />);
+      const input = getByTestId('input');
+
+      const incrementButton = getByTestId('increment');
+      fireEvent(incrementButton, 'press');
+
+      expect(input.props.value).toBe('1');
+    });
+
+    it('should change value by specified step', () => {
+      const { getByTestId } = render(
+        <NumberInput defaultValue={10} step={3} />,
+      );
+      const input = getByTestId('input');
+
+      const decrementButton = getByTestId('decrement');
+      fireEvent(decrementButton, 'press');
+
+      expect(input.props.value).toBe('7');
+    });
+
+    it('should handle decimal step', () => {
+      const { getByTestId } = render(
+        <NumberInput defaultValue={10} step={0.3} />,
+      );
+      const input = getByTestId('input');
+
+      const decrementButton = getByTestId('decrement');
+      fireEvent(decrementButton, 'press');
+
+      expect(input.props.value).toBe('9.7');
+    });
+  });
+
+  describe('prop: disabled', () => {
+    // it('should render disabled', () => {
+    //   const { getByTestId } = render(
+    //     <NumberInput defaultValue={10} disabled />,
+    //   );
+    //   const input = getByTestId('input');
+    //     const incrementButton = getByTestId('increment');
+    //     const decrementButton = getByTestId('decrement');
+    //   expect(input.props.editable).toBe(false);
+    //     expect(incrementButton.props.disabled).toBe(true);
+    //     expect(decrementButton.props.disabled).toBe(true);
+    // });
+    // it('should not react to button clicks', () => {
+    //   const { getByTestId } = render(
+    //     <NumberInput defaultValue={10} disabled />,
+    //   );
+    //   const input = getByTestId('input');
+    //   const incrementButton = getByTestId('increment');
+    //   const decrementButton = getByTestId('decrement');
+    //   fireEvent(incrementButton, 'press');
+    //   expect(input.props.value).toBe('10');
+    //   fireEvent(decrementButton, 'press');
+    //   expect(input.props.value).toBe('10');
+    // });
+  });
+
+  describe('prop: width', () => {
+    it('should render component of specified width', () => {});
+
+    it('should handle %', () => {});
+  });
+});

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { View, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import useControlledOrUncontrolled from '../../hooks/useControlledOrUncontrolled';
+
+import type { Theme, DimensionValue } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { blockSizes } from '../../styles/styles';
+import { clamp } from '../../utils';
+
+import { TextInput, Button, ArrowIcon } from '../..';
+
+type Props = {
+  defaultValue?: number;
+  disabled?: boolean;
+  inputWidth?: DimensionValue;
+  max?: number | null;
+  min?: number | null;
+  onChange?: (value: number) => void;
+  step?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value?: number;
+  variant?: 'default' | 'flat';
+};
+
+// TODO: allow to center input text horizontally
+// TODO: how are uncontrolled inputs handled in RN?
+const NumberInput = ({
+  defaultValue,
+  disabled,
+  inputWidth,
+  max = null,
+  min = null,
+  onChange,
+  step = 1,
+  style = {},
+  theme,
+  value,
+  variant = 'default',
+  ...rest
+}: Props) => {
+  const [valueDerived, setValueState] = useControlledOrUncontrolled({
+    value,
+    defaultValue,
+  });
+
+  const handleClick = (val: number) => {
+    const stateValue = parseFloat(valueDerived);
+    const newValue = clamp(
+      +parseFloat((stateValue + val).toString()).toFixed(2),
+      min,
+      max,
+    ).toString();
+
+    setValueState(parseFloat(newValue));
+
+    if (onChange) {
+      onChange(parseFloat(newValue));
+    }
+  };
+
+  const valueDerivedNumber = parseFloat(valueDerived);
+
+  const isDecrementDisabled = disabled || valueDerivedNumber === min;
+  const isIncrementDisabled = disabled || valueDerivedNumber === max;
+  const isFlat = variant === 'flat';
+
+  return (
+    <View
+      style={[styles.wrapper, style]}
+      accessibilityState={{ disabled }}
+      // TODO: are these accessibility traits correct?
+      accessibilityRole='adjustable'
+      accessibilityValue={{
+        min: min === null ? undefined : min,
+        max: max === null ? undefined : max,
+        now: valueDerived,
+      }}
+    >
+      <Button
+        theme={theme}
+        disabled={isDecrementDisabled}
+        onPress={() => handleClick(-step)}
+        variant={isFlat ? 'flat' : 'raised'}
+        style={styles.button}
+        testID='decrement'
+      >
+        <ArrowIcon
+          theme={theme}
+          segments={4}
+          disabled={isDecrementDisabled}
+          direction='left'
+        />
+      </Button>
+      <TextInput
+        theme={theme}
+        variant={variant}
+        disabled={disabled}
+        value={valueDerived.toString()}
+        style={[styles.input, { width: inputWidth || 'auto' }]}
+        editable={false}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        testID='input'
+        {...rest}
+      />
+      <Button
+        theme={theme}
+        disabled={isIncrementDisabled}
+        onPress={() => handleClick(step)}
+        variant={isFlat ? 'flat' : 'raised'}
+        style={styles.button}
+        testID='increment'
+      >
+        <ArrowIcon
+          theme={theme}
+          segments={4}
+          disabled={isIncrementDisabled}
+          direction='right'
+        />
+      </Button>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  input: {
+    marginHorizontal: 2,
+    minWidth: blockSizes.md + 2,
+  },
+  button: {
+    width: blockSizes.md,
+  },
+  buttonText: {
+    fontSize: 24,
+  },
+});
+
+export default withTheme(NumberInput);

package/src/components/NumberInput/index.ts

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

package/src/components/Panel/Panel.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { testId } from './Panel';
+import { Panel, Text } from '../..';
+
+describe('<Panel />', () => {
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <Panel>
+        <Text>Banana dance</Text>
+      </Panel>,
+    );
+
+    expect(getByTestId(testId)).toHaveTextContent('Banana dance');
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(
+      <Panel style={style}>
+        <Text>Panel</Text>
+      </Panel>,
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+});

package/src/components/Panel/Panel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Animated, View, ViewStyle } from 'react-native';
+
+import { withTheme } from '../../core/theming';
+import { Border } from '../../styles/styleElements';
+import shadow from '../../styles/shadow';
+import type { Theme } from '../../types';
+
+export const testId = 'panel';
+
+// TODO: common interface with styleElements/Border ?
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  background?: 'material' | 'canvas' | 'materialDark';
+  children?: React.ReactNode;
+  elevation?: number;
+  invert?: boolean;
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  variant?: 'default' | 'well' | 'raised' | 'clear' | 'cutout';
+};
+
+const Panel = ({
+  background = 'material',
+  children,
+  elevation = 0,
+  invert = false,
+  radius = 0,
+  style = {},
+  theme,
+  variant = 'default',
+  ...rest
+}: Props) => {
+  const getBackgroundColor = () => {
+    return theme[background];
+  };
+
+  return (
+    // TODO: fix this TS error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Animated.View
+      {...rest}
+      style={[
+        styles.container,
+        {
+          padding: variant === 'well' ? 2 : 4,
+          backgroundColor: getBackgroundColor(),
+          borderRadius: radius,
+        },
+        shadow(elevation),
+        style,
+      ]}
+      testID={testId}
+    >
+      {variant !== 'clear' && (
+        <Border
+          theme={theme}
+          variant={variant}
+          radius={radius}
+          invert={invert}
+        />
+      )}
+      {children}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+});
+
+export default withTheme(Panel);

package/src/components/Panel/index.ts

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

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PortalConsumer from './PortalConsumer';
+import PortalHost, { PortalContext, PortalMethods } from './PortalHost';
+
+import type { Theme } from '../../types';
+import { ThemeProvider, withTheme } from '../../core/theming';
+
+type Props = {
+  /**
+   * Content of the `Portal`.
+   */
+  children: React.ReactNode;
+  /**
+   * @optional
+   */
+  theme: Theme;
+};
+
+/**
+ * Portal allows to render a component at a different place in the parent tree.
+ * You can use it to render content which should appear above other elements, similar to `Modal`.
+ * It requires a [`Portal.Host`](portal-host.html) component to be rendered somewhere in the parent tree.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Portal, Text } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Portal>
+ *     <Text>This is rendered at a different place</Text>
+ *   </Portal>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Portal = ({ children, theme }: Props) => {
+  return (
+    <PortalContext.Consumer>
+      {manager => (
+        <PortalConsumer manager={manager as PortalMethods}>
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </PortalConsumer>
+      )}
+    </PortalContext.Consumer>
+  );
+};
+
+Portal.Host = PortalHost;
+
+export default withTheme(Portal);

package/src/components/Portal/PortalConsumer.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable react/destructuring-assignment */
+import * as React from 'react';
+import type { PortalMethods } from './PortalHost';
+
+type Props = {
+  manager: PortalMethods;
+  children: React.ReactNode;
+};
+
+export default class PortalConsumer extends React.Component<Props> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private key: any;
+
+  async componentDidMount() {
+    this.checkManager();
+
+    // Delay updating to prevent React from going to infinite loop
+    await Promise.resolve();
+
+    this.key = this.props.manager.mount(this.props.children);
+  }
+
+  componentDidUpdate() {
+    this.checkManager();
+
+    this.props.manager.update(this.key, this.props.children);
+  }
+
+  componentWillUnmount() {
+    this.checkManager();
+
+    this.props.manager.unmount(this.key);
+  }
+
+  private checkManager() {
+    if (!this.props.manager) {
+      throw new Error(
+        'Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n' +
+          "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
+          'https://callstack.github.io/react-native-paper/getting-started.html',
+      );
+    }
+  }
+
+  render() {
+    return null;
+  }
+}