@draftbit/core 46.4.4-c5d4b3.2 → 46.4.4-caab07.0

package/src/components/Portal/PortalHost.js

@@ -27,81 +27,92 @@ export const PortalContext = React.createContext(null);
  * 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 {
-    constructor() {
-        super(...arguments);
-        this.setManager = (manager) => {
-            this.manager = manager;
-        };
-        this.mount = (children) => {
-            const key = this.nextKey++;
-            if (this.manager) {
-                this.manager.mount(key, children);
-            }
-            else {
-                this.queue.push({ type: "mount", key, children });
-            }
-            return key;
-        };
-        this.update = (key, children) => {
-            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);
-                }
-            }
-        };
-        this.unmount = (key) => {
-            if (this.manager) {
-                this.manager.unmount(key);
-            }
-            else {
-                this.queue.push({ type: "unmount", key });
-            }
-        };
-        this.nextKey = 0;
-        this.queue = [];
-    }
-    componentDidMount() {
-        const manager = this.manager;
-        const queue = this.queue;
-        while (queue.length && manager) {
-            const action = queue.pop();
-            if (action) {
-                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;
-                }
-            }
+  constructor() {
+    super(...arguments);
+    this.setManager = (manager) => {
+      this.manager = manager;
+    };
+    this.mount = (children) => {
+      const key = this.nextKey++;
+      if (this.manager) {
+        this.manager.mount(key, children);
+      } else {
+        this.queue.push({ type: "mount", key, children });
+      }
+      return key;
+    };
+    this.update = (key, children) => {
+      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);
         }
+      }
+    };
+    this.unmount = (key) => {
+      if (this.manager) {
+        this.manager.unmount(key);
+      } else {
+        this.queue.push({ type: "unmount", key });
+      }
+    };
+    this.nextKey = 0;
+    this.queue = [];
+  }
+  componentDidMount() {
+    const manager = this.manager;
+    const queue = this.queue;
+    while (queue.length && manager) {
+      const action = queue.pop();
+      if (action) {
+        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;
+        }
+      }
     }
-    render() {
-        return (React.createElement(PortalContext.Provider, { value: {
-                mount: this.mount,
-                update: this.update,
-                unmount: this.unmount,
-            } },
-            React.createElement(View, { style: styles.container, collapsable: false, pointerEvents: "box-none" }, this.props.children),
-            React.createElement(PortalManager, { ref: this.setManager })));
-    }
+  }
+  render() {
+    return React.createElement(
+      PortalContext.Provider,
+      {
+        value: {
+          mount: this.mount,
+          update: this.update,
+          unmount: this.unmount,
+        },
+      },
+      React.createElement(
+        View,
+        {
+          style: styles.container,
+          collapsable: false,
+          pointerEvents: "box-none",
+        },
+        this.props.children
+      ),
+      React.createElement(PortalManager, { ref: this.setManager })
+    );
+  }
 }
 PortalHost.displayName = "Portal.Host";
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
+  container: {
+    flex: 1,
+  },
 });

package/src/components/Portal/PortalManager.js

@@ -4,29 +4,42 @@ import { View, StyleSheet } from "react-native";
  * Portal host is the component which actually renders all Portals.
  */
 export default class PortalManager extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            portals: [],
-        };
-        this.mount = (key, children) => {
-            this.setState((state) => ({
-                portals: [...state.portals, { key, children }],
-            }));
-        };
-        this.update = (key, children) => this.setState((state) => ({
-            portals: state.portals.map((item) => {
-                if (item.key === key) {
-                    return { ...item, children };
-                }
-                return item;
-            }),
-        }));
-        this.unmount = (key) => this.setState((state) => ({
-            portals: state.portals.filter((item) => item.key !== key),
-        }));
-    }
-    render() {
-        return this.state.portals.map(({ key, children }) => (React.createElement(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)));
-    }
+  constructor() {
+    super(...arguments);
+    this.state = {
+      portals: [],
+    };
+    this.mount = (key, children) => {
+      this.setState((state) => ({
+        portals: [...state.portals, { key, children }],
+      }));
+    };
+    this.update = (key, children) =>
+      this.setState((state) => ({
+        portals: state.portals.map((item) => {
+          if (item.key === key) {
+            return { ...item, children };
+          }
+          return item;
+        }),
+      }));
+    this.unmount = (key) =>
+      this.setState((state) => ({
+        portals: state.portals.filter((item) => item.key !== key),
+      }));
+  }
+  render() {
+    return this.state.portals.map(({ key, children }) =>
+      React.createElement(
+        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
+      )
+    );
+  }
 }

package/src/components/ProgressBar.js

@@ -1,118 +1,146 @@
 import React, { Component } from "react";
-import { Animated, Easing, View, I18nManager, } from "react-native";
+import { Animated, Easing, View, I18nManager } from "react-native";
 const INDETERMINATE_WIDTH_FACTOR = 0.3;
-const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
+const BAR_WIDTH_ZERO_POSITION =
+  INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
 export default class ProgressBar extends Component {
-    constructor(props) {
-        super(props);
-        this.handleLayout = (event) => {
-            const { width = 150, onLayout } = this.props;
-            if (!width) {
-                this.setState({ width: event.nativeEvent.layout.width });
-            }
-            if (onLayout) {
-                onLayout(event);
-            }
-        };
-        const { progress: progressP = 0, indeterminate = false } = props;
-        const progress = Math.min(Math.max(progressP, 0), 1);
-        this.state = {
-            width: 0,
-            progress: new Animated.Value(indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress),
-            animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
-        };
+  constructor(props) {
+    super(props);
+    this.handleLayout = (event) => {
+      const { width = 150, onLayout } = this.props;
+      if (!width) {
+        this.setState({ width: event.nativeEvent.layout.width });
+      }
+      if (onLayout) {
+        onLayout(event);
+      }
+    };
+    const { progress: progressP = 0, indeterminate = false } = props;
+    const progress = Math.min(Math.max(progressP, 0), 1);
+    this.state = {
+      width: 0,
+      progress: new Animated.Value(
+        indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress
+      ),
+      animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
+    };
+  }
+  componentDidMount() {
+    const { indeterminate = false } = this.props;
+    if (indeterminate) {
+      this.animate();
     }
-    componentDidMount() {
-        const { indeterminate = false } = this.props;
-        if (indeterminate) {
-            this.animate();
-        }
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      indeterminate = false,
+      useNativeDriver = false,
+      progress: progressP = 0,
+      animationType = "spring",
+      animationConfig = { bounciness: 0 },
+      animated = true,
+    } = this.props;
+    if (prevProps.indeterminate !== indeterminate) {
+      if (indeterminate) {
+        this.animate();
+      } else {
+        Animated.spring(this.state.animationValue, {
+          toValue: BAR_WIDTH_ZERO_POSITION,
+          useNativeDriver,
+        }).start();
+      }
     }
-    componentDidUpdate(prevProps) {
-        const { indeterminate = false, useNativeDriver = false, progress: progressP = 0, animationType = "spring", animationConfig = { bounciness: 0 }, animated = true, } = this.props;
-        if (prevProps.indeterminate !== indeterminate) {
-            if (indeterminate) {
-                this.animate();
-            }
-            else {
-                Animated.spring(this.state.animationValue, {
-                    toValue: BAR_WIDTH_ZERO_POSITION,
-                    useNativeDriver,
-                }).start();
-            }
-        }
-        if (prevProps.indeterminate !== indeterminate ||
-            prevProps.progress !== progressP) {
-            const progress = this.props.indeterminate
-                ? INDETERMINATE_WIDTH_FACTOR
-                : Math.min(Math.max(progressP, 0), 1);
-            if (animated) {
-                Animated[animationType](this.state.progress, {
-                    ...animationConfig,
-                    toValue: progress,
-                    velocity: 0,
-                    useNativeDriver,
-                }).start();
-            }
-            else {
-                this.state.progress.setValue(progress);
-            }
-        }
-    }
-    animate() {
-        const { useNativeDriver = false, indeterminateAnimationDuration = 1000 } = this.props;
-        this.state.animationValue.setValue(0);
-        Animated.timing(this.state.animationValue, {
-            toValue: 1,
-            duration: indeterminateAnimationDuration,
-            easing: Easing.linear,
-            isInteraction: false,
-            useNativeDriver,
-        }).start((endState) => {
-            if (endState.finished) {
-                this.animate();
-            }
-        });
-    }
-    render() {
-        const { borderColor, borderRadius = 4, borderWidth = 1, children, color = "rgba(0, 122, 255, 1)", style, unfilledColor, width = 150, ...restProps } = this.props;
-        const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
-        const containerStyle = {
-            width,
-            borderWidth,
-            borderColor: borderColor || color,
-            borderRadius,
-            overflow: "hidden",
-            backgroundColor: unfilledColor,
-        };
-        const progressStyle = {
-            backgroundColor: color,
-            // Always take up full height of container.
-            height: "100%",
-            transform: [
-                {
-                    translateX: this.state.animationValue.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
-                    }),
-                },
-                {
-                    translateX: this.state.progress.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0],
-                    }),
-                },
-                {
-                    // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
-                    scaleX: this.state.progress.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0.0001, 1],
-                    }),
-                },
-            ],
-        };
-        return (React.createElement(View, { style: [containerStyle, style], onLayout: this.handleLayout, ...restProps },
-            React.createElement(Animated.View, { style: progressStyle }),
-            children));
+    if (
+      prevProps.indeterminate !== indeterminate ||
+      prevProps.progress !== progressP
+    ) {
+      const progress = this.props.indeterminate
+        ? INDETERMINATE_WIDTH_FACTOR
+        : Math.min(Math.max(progressP, 0), 1);
+      if (animated) {
+        Animated[animationType](this.state.progress, {
+          ...animationConfig,
+          toValue: progress,
+          velocity: 0,
+          useNativeDriver,
+        }).start();
+      } else {
+        this.state.progress.setValue(progress);
+      }
     }
+  }
+  animate() {
+    const { useNativeDriver = false, indeterminateAnimationDuration = 1000 } =
+      this.props;
+    this.state.animationValue.setValue(0);
+    Animated.timing(this.state.animationValue, {
+      toValue: 1,
+      duration: indeterminateAnimationDuration,
+      easing: Easing.linear,
+      isInteraction: false,
+      useNativeDriver,
+    }).start((endState) => {
+      if (endState.finished) {
+        this.animate();
+      }
+    });
+  }
+  render() {
+    const {
+      borderColor,
+      borderRadius = 4,
+      borderWidth = 1,
+      children,
+      color = "rgba(0, 122, 255, 1)",
+      style,
+      unfilledColor,
+      width = 150,
+      ...restProps
+    } = this.props;
+    const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
+    const containerStyle = {
+      width,
+      borderWidth,
+      borderColor: borderColor || color,
+      borderRadius,
+      overflow: "hidden",
+      backgroundColor: unfilledColor,
+    };
+    const progressStyle = {
+      backgroundColor: color,
+      // Always take up full height of container.
+      height: "100%",
+      transform: [
+        {
+          translateX: this.state.animationValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
+          }),
+        },
+        {
+          translateX: this.state.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0],
+          }),
+        },
+        {
+          // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
+          scaleX: this.state.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.0001, 1],
+          }),
+        },
+      ],
+    };
+    return React.createElement(
+      View,
+      {
+        style: [containerStyle, style],
+        onLayout: this.handleLayout,
+        ...restProps,
+      },
+      React.createElement(Animated.View, { style: progressStyle }),
+      children
+    );
+  }
 }

package/src/components/ProgressCircle.js

@@ -2,12 +2,45 @@ import * as React from "react";
 import { Text } from "react-native";
 import AnimatedCircularProgress from "./AnimatedCircularProgress";
 import { withTheme } from "../theming";
-const ProgressCircle = ({ progress = 0.5, style, color = "primary", size = 100, showsText = true, unfilledColor, strokeCap = "butt", textStyle, thickness = 1, theme, }) => {
-    const progressNum = Math.round(progress * 100);
-    const tintColor = color || theme.colors.primary;
-    const backgroundColor = unfilledColor || theme.colors.secondary;
-    return (React.createElement(AnimatedCircularProgress, { size: size, width: thickness, backgroundWidth: thickness, fill: progressNum, tintColor: tintColor, backgroundColor: backgroundColor, rotation: 0, lineCap: strokeCap, style: style }, (fill) => showsText ? (React.createElement(Text, { style: [{ fontSize: size * 0.275, color: tintColor }, textStyle] },
-        Math.round(fill),
-        "%")) : null));
+const ProgressCircle = ({
+  progress = 0.5,
+  style,
+  color = "primary",
+  size = 100,
+  showsText = true,
+  unfilledColor,
+  strokeCap = "butt",
+  textStyle,
+  thickness = 1,
+  theme,
+}) => {
+  const progressNum = Math.round(progress * 100);
+  const tintColor = color || theme.colors.primary;
+  const backgroundColor = unfilledColor || theme.colors.secondary;
+  return React.createElement(
+    AnimatedCircularProgress,
+    {
+      size: size,
+      width: thickness,
+      backgroundWidth: thickness,
+      fill: progressNum,
+      tintColor: tintColor,
+      backgroundColor: backgroundColor,
+      rotation: 0,
+      lineCap: strokeCap,
+      style: style,
+    },
+    (fill) =>
+      showsText
+        ? React.createElement(
+            Text,
+            {
+              style: [{ fontSize: size * 0.275, color: tintColor }, textStyle],
+            },
+            Math.round(fill),
+            "%"
+          )
+        : null
+  );
 };
 export default withTheme(ProgressCircle);

package/src/components/ProgressIndicator.js

@@ -1,27 +1,48 @@
 import * as React from "react";
 import StepIndicator from "./StepIndicator";
 import { withTheme } from "../theming";
-const ProgressIndicator = ({ numberOfSteps, currentStep, currentStepStrokeWidth = 3, stepStrokeCurrentColor = "primary", stepIndicatorSize, currentStepIndicatorSize, stepIndicatorCurrentColor, stepIndicatorLabelCurrentColor, stepIndicatorLabelFontSize = 12, stepNumberFinishedColor = "strongInverse", stepNumberUnfinishedColor = "primary", unfinishedColor = "light", finishedColor = "primary", theme, }) => {
-    const currentPosition = currentStep - 1;
-    return (React.createElement(StepIndicator, { stepCount: numberOfSteps, currentPosition: currentPosition, customStyles: {
-            stepIndicatorSize,
-            currentStepIndicatorSize: currentStepIndicatorSize
-                ? currentStepIndicatorSize
-                : stepIndicatorSize,
-            stepStrokeFinishedColor: finishedColor,
-            stepStrokeUnFinishedColor: unfinishedColor,
-            separatorFinishedColor: finishedColor,
-            separatorUnFinishedColor: unfinishedColor,
-            stepIndicatorFinishedColor: finishedColor,
-            stepIndicatorUnFinishedColor: unfinishedColor,
-            currentStepStrokeWidth,
-            stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
-            stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
-            stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
-            stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
-            stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
-            stepIndicatorLabelFontSize,
-            labelFontFamily: theme.typography.body1.fontFamily,
-        } }));
+const ProgressIndicator = ({
+  numberOfSteps,
+  currentStep,
+  currentStepStrokeWidth = 3,
+  stepStrokeCurrentColor = "primary",
+  stepIndicatorSize,
+  currentStepIndicatorSize,
+  stepIndicatorCurrentColor,
+  stepIndicatorLabelCurrentColor,
+  stepIndicatorLabelFontSize = 12,
+  stepNumberFinishedColor = "strongInverse",
+  stepNumberUnfinishedColor = "primary",
+  unfinishedColor = "light",
+  finishedColor = "primary",
+  theme,
+}) => {
+  const currentPosition = currentStep - 1;
+  return React.createElement(StepIndicator, {
+    stepCount: numberOfSteps,
+    currentPosition: currentPosition,
+    customStyles: {
+      stepIndicatorSize,
+      currentStepIndicatorSize: currentStepIndicatorSize
+        ? currentStepIndicatorSize
+        : stepIndicatorSize,
+      stepStrokeFinishedColor: finishedColor,
+      stepStrokeUnFinishedColor: unfinishedColor,
+      separatorFinishedColor: finishedColor,
+      separatorUnFinishedColor: unfinishedColor,
+      stepIndicatorFinishedColor: finishedColor,
+      stepIndicatorUnFinishedColor: unfinishedColor,
+      currentStepStrokeWidth,
+      stepStrokeCurrentColor:
+        stepStrokeCurrentColor || stepIndicatorCurrentColor,
+      stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
+      stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
+      stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
+      stepIndicatorLabelCurrentColor:
+        stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
+      stepIndicatorLabelFontSize,
+      labelFontFamily: theme.typography.body1.fontFamily,
+    },
+  });
 };
 export default withTheme(ProgressIndicator);

package/src/components/RadioButton/RadioButton.js

@@ -3,15 +3,42 @@ import Config from "../Config";
 import IconButton from "../IconButton";
 import { getValueForRadioButton } from "../../utilities";
 import { useRadioButtonGroupContext } from "./context";
-const RadioButton = ({ Icon, disabled = false, color, value = "", selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
-    const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
-    const realValue = getValueForRadioButton(value);
-    const realContextValue = getValueForRadioButton(contextValue);
-    const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
-    const handlePress = () => {
-        onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
-    };
-    return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
+const RadioButton = ({
+  Icon,
+  disabled = false,
+  color,
+  value = "",
+  selected,
+  unselectedColor,
+  onPress,
+  size = Config.radioButtonSize,
+  selectedIcon = "MaterialIcons/radio-button-checked",
+  unselectedIcon = "MaterialIcons/radio-button-unchecked",
+  style,
+  ...rest
+}) => {
+  const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
+  const realValue = getValueForRadioButton(value);
+  const realContextValue = getValueForRadioButton(contextValue);
+  const isSelected =
+    selected !== null && selected !== void 0
+      ? selected
+      : realContextValue === realValue;
+  const handlePress = () => {
+    onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
+    onValueChange === null || onValueChange === void 0
+      ? void 0
+      : onValueChange(realValue);
+  };
+  return React.createElement(IconButton, {
+    Icon: Icon,
+    icon: isSelected ? selectedIcon : unselectedIcon,
+    color: isSelected ? color : unselectedColor,
+    disabled: disabled,
+    onPress: handlePress,
+    size: size,
+    style: style,
+    ...rest,
+  });
 };
 export default RadioButton;