react95-native-rabbl 0.1.1

package/src/components/Portal/PortalHost.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable react/destructuring-assignment */
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import PortalManager from './PortalManager';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+type Operation =
+  | { type: 'mount'; key: number; children: React.ReactNode }
+  | { type: 'update'; key: number; children: React.ReactNode }
+  | { type: 'unmount'; key: number };
+
+export type PortalMethods = {
+  mount: (children: React.ReactNode) => number;
+  update: (key: number, children: React.ReactNode) => void;
+  unmount: (key: number) => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const PortalContext = React.createContext<PortalMethods>(null as any);
+
+/**
+ * Portal host renders all of its children `Portal` elements.
+ * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
+ * If you're using the `Provider` component, it already includes `Portal.Host`.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Text } from 'react-native';
+ * import { Portal } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Portal.Host>
+ *     <Text>Content of the app</Text>
+ *   </Portal.Host>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.
+ */
+export default class PortalHost extends React.Component<Props> {
+  // eslint-disable-next-line react/static-property-placement
+  static displayName = 'Portal.Host';
+
+  componentDidMount() {
+    const { manager } = this;
+    const { queue } = this;
+
+    while (queue.length && manager) {
+      const action = queue.pop();
+      if (action) {
+        // eslint-disable-next-line default-case
+        switch (action.type) {
+          case 'mount':
+            manager.mount(action.key, action.children);
+            break;
+          case 'update':
+            manager.update(action.key, action.children);
+            break;
+          case 'unmount':
+            manager.unmount(action.key);
+            break;
+        }
+      }
+    }
+  }
+
+  private setManager = (manager: PortalManager | undefined | null) => {
+    this.manager = manager;
+  };
+
+  private mount = (children: React.ReactNode) => {
+    // eslint-disable-next-line no-plusplus
+    const key = this.nextKey++;
+
+    if (this.manager) {
+      this.manager.mount(key, children);
+    } else {
+      this.queue.push({ type: 'mount', key, children });
+    }
+
+    return key;
+  };
+
+  private update = (key: number, children: React.ReactNode) => {
+    if (this.manager) {
+      this.manager.update(key, children);
+    } else {
+      const op = { type: 'mount', key, children };
+      const index = this.queue.findIndex(
+        o => o.type === 'mount' || (o.type === 'update' && o.key === key),
+      );
+
+      if (index > -1) {
+        // @ts-ignore
+        this.queue[index] = op;
+      } else {
+        this.queue.push(op as Operation);
+      }
+    }
+  };
+
+  private unmount = (key: number) => {
+    if (this.manager) {
+      this.manager.unmount(key);
+    } else {
+      this.queue.push({ type: 'unmount', key });
+    }
+  };
+
+  // eslint-disable-next-line react/sort-comp
+  private nextKey = 0;
+
+  private queue: Operation[] = [];
+
+  private manager: PortalManager | null | undefined;
+
+  render() {
+    return (
+      <PortalContext.Provider
+        value={{
+          mount: this.mount,
+          update: this.update,
+          unmount: this.unmount,
+        }}
+      >
+        {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+        <View
+          style={styles.container}
+          collapsable={false}
+          pointerEvents='box-none'
+        >
+          {this.props.children}
+        </View>
+        <PortalManager ref={this.setManager} />
+      </PortalContext.Provider>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/Portal/PortalManager.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable react/state-in-constructor */
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+type State = {
+  portals: Array<{
+    key: number;
+    children: React.ReactNode;
+  }>;
+};
+
+/**
+ * Portal host is the component which actually renders all Portals.
+ */
+export default class PortalManager extends React.PureComponent<{}, State> {
+  state: State = {
+    portals: [],
+  };
+
+  mount = (key: number, children: React.ReactNode) => {
+    this.setState(state => ({
+      portals: [...state.portals, { key, children }],
+    }));
+  };
+
+  update = (key: number, children: React.ReactNode) =>
+    this.setState(state => ({
+      portals: state.portals.map(item => {
+        if (item.key === key) {
+          return { ...item, children };
+        }
+        return item;
+      }),
+    }));
+
+  unmount = (key: number) =>
+    this.setState(state => ({
+      portals: state.portals.filter(item => item.key !== key),
+    }));
+
+  render() {
+    return this.state.portals.map(({ key, children }) => (
+      <View
+        key={key}
+        collapsable={
+          false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
+        }
+        pointerEvents='box-none'
+        style={StyleSheet.absoluteFill}
+      >
+        {children}
+      </View>
+    ));
+  }
+}

package/src/components/Portal/index.ts

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

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  LayoutChangeEvent,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { blockSizes } from '../../styles/styles';
+import { Panel } from '../..';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  background?: 'canvas' | 'material';
+  percent: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  variant?: 'default' | 'tile' | 'indeterminate';
+};
+
+const tileWidth = 17;
+
+const Progress = ({
+  background = 'material',
+  percent = 0,
+  style = {},
+  theme,
+  variant = 'default',
+  ...rest
+}: Props) => {
+  const [tilesNumber, setTilesNumber] = useState(0);
+  const [progressWidth, setProgressWidth] = useState(0);
+
+  function onProgressWidthChange(e: LayoutChangeEvent) {
+    const { width } = e.nativeEvent.layout;
+    setProgressWidth(width);
+  }
+
+  useEffect(() => {
+    setTilesNumber(Math.round((percent / 100) * (progressWidth / tileWidth)));
+  }, [percent]);
+
+  return (
+    <Panel
+      theme={theme}
+      variant='cutout'
+      background={background}
+      {...rest}
+      style={[
+        styles.wrapper,
+        {
+          height: blockSizes.md,
+        },
+        style,
+      ]}
+      accessible
+      accessibilityRole='progressbar'
+      accessibilityValue={{
+        min: 0,
+        max: 100,
+        now: percent,
+      }}
+    >
+      <View style={[styles.progressWrapper]}>
+        {variant === 'tile' ? (
+          <View
+            style={[styles.tilesWrapper, { borderColor: theme.material }]}
+            onLayout={onProgressWidthChange}
+          >
+            {Array(tilesNumber)
+              .fill(null)
+              .map((_, index) => (
+                <View
+                  style={[
+                    styles.tile,
+                    styles.progress,
+                    {
+                      backgroundColor: theme.progress,
+                      borderColor: theme.material,
+                    },
+                  ]}
+                  key={index}
+                />
+              ))}
+          </View>
+        ) : (
+          <View
+            style={[
+              styles.progress,
+              { width: `${percent}%`, backgroundColor: theme.progress },
+            ]}
+          />
+        )}
+      </View>
+    </Panel>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    padding: 4,
+  },
+  progressWrapper: {
+    width: '100%',
+    height: '100%',
+  },
+  progress: {
+    height: '100%',
+  },
+  tilesWrapper: {
+    flexDirection: 'row',
+    flex: 1,
+    borderWidth: 1,
+  },
+  tile: {
+    width: tileWidth,
+    borderWidth: 1,
+  },
+});
+
+export default withTheme(Progress);

package/src/components/Progress/index.ts

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

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SwitchBase, SwitchProps } from '../SwitchBase';
+
+import { withTheme } from '../../core/theming';
+
+type Props = SwitchProps & {
+  status: 'checked' | 'unchecked';
+};
+
+const Radio = (props: Props) => {
+  return <SwitchBase component='radio' {...props} />;
+};
+
+export default withTheme(Radio);

package/src/components/Radio/index.ts

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

package/src/components/ScrollPanel/ScrollPanel.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Divider, Panel } from '../..';
+
+// TODO: should we pass theme to wrapped components? (Divider, Panel etc);
+
+// TODO: add noBottomBorder and noTopBorder prop
+type Props = React.ComponentPropsWithRef<typeof ScrollView> & {
+  children?: React.ReactNode;
+  noBackground?: boolean;
+  theme: Theme;
+};
+
+const ScrollPanel = ({
+  children,
+  noBackground,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={[
+        styles.wrapper,
+        {
+          backgroundColor: noBackground ? 'transparent' : theme.materialDark,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <Panel theme={theme} variant='raised' style={[styles.borderWrapper]}>
+        <View style={[styles.inner, { backgroundColor: theme.material }]}>
+          <Divider theme={theme} orientation='vertical' variant='raised' />
+          <Divider theme={theme} orientation='vertical' variant='raised' />
+          <View style={[styles.content]}>{children}</View>
+        </View>
+      </Panel>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexGrow: 0,
+  },
+  inner: {
+    padding: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  borderWrapper: {
+    padding: 4,
+    position: 'relative',
+    minWidth: '100%',
+  },
+  content: {
+    marginLeft: 8,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default withTheme(ScrollPanel);

package/src/components/ScrollPanel/index.ts

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