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

package/src/components/Portal/PortalHost.js

@@ -27,92 +27,81 @@ 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,42 +4,29 @@ 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,146 +1,118 @@
 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),
-    };
-  }
-  componentDidMount() {
-    const { indeterminate = false } = this.props;
-    if (indeterminate) {
-      this.animate();
+    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),
+        };
     }
-  }
-  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();
-      }
+    componentDidMount() {
+        const { indeterminate = false } = this.props;
+        if (indeterminate) {
+            this.animate();
+        }
     }
-    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);
-      }
+    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));
     }
-  }
-  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,45 +2,12 @@ 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,48 +1,27 @@
 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,42 +3,15 @@ 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;