@draftbit/core 46.4.4-6da88d.2 → 46.4.4-7001c8.2

package/src/components/StepIndicator.tsx

@@ -1,494 +0,0 @@
-// @ts-nocheck
-import React, { Component } from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  Animated,
-  TouchableWithoutFeedback,
-} from "react-native";
-
-const STEP_STATUS = {
-  CURRENT: "current",
-  FINISHED: "finished",
-  UNFINISHED: "unfinished",
-};
-
-interface CustomStyles {
-  stepIndicatorSize?: number;
-  currentStepIndicatorSize?: number;
-  separatorStrokeWidth?: number;
-  separatorStrokeUnfinishedWidth?: number;
-  separatorStrokeFinishedWidth?: number;
-  currentStepStrokeWidth: number;
-  stepStrokeWidth?: number;
-  stepStrokeCurrentColor?: string;
-  stepStrokeFinishedColor: string;
-  stepStrokeUnFinishedColor: string;
-  separatorFinishedColor: string;
-  separatorUnFinishedColor: string;
-  stepIndicatorFinishedColor: string;
-  stepIndicatorUnFinishedColor: string;
-  stepIndicatorCurrentColor: string;
-  stepIndicatorLabelFontSize: number;
-  currentStepIndicatorLabelFontSize?: number;
-  stepIndicatorLabelCurrentColor: string;
-  stepIndicatorLabelFinishedColor: string;
-  stepIndicatorLabelUnFinishedColor: string;
-  labelColor?: string;
-  labelSize?: number;
-  labelAlign?: string;
-  currentStepLabelColor?: string;
-  labelFontFamily?: string;
-}
-
-type Props = {
-  stepCount: number;
-  currentPosition: number;
-  customStyles: CustomStyles;
-};
-
-type State = {
-  width: number;
-  height: number;
-  progressBarSize: number;
-  customStyles: CustomStyles;
-};
-
-export default class StepIndicator extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const defaultStyles = {
-      stepIndicatorSize: 30,
-      currentStepIndicatorSize: 40,
-      separatorStrokeWidth: 3,
-      separatorStrokeUnfinishedWidth: 0,
-      separatorStrokeFinishedWidth: 0,
-      currentStepStrokeWidth: 5,
-      stepStrokeWidth: 0,
-      stepStrokeCurrentColor: "#4aae4f",
-      stepStrokeFinishedColor: "#4aae4f",
-      stepStrokeUnFinishedColor: "#4aae4f",
-      separatorFinishedColor: "#4aae4f",
-      separatorUnFinishedColor: "#a4d4a5",
-      stepIndicatorFinishedColor: "#4aae4f",
-      stepIndicatorUnFinishedColor: "#a4d4a5",
-      stepIndicatorCurrentColor: "#ffffff",
-      stepIndicatorLabelFontSize: 15,
-      currentStepIndicatorLabelFontSize: 15,
-      stepIndicatorLabelCurrentColor: "#000000",
-      stepIndicatorLabelFinishedColor: "#ffffff",
-      stepIndicatorLabelUnFinishedColor: "rgba(255,255,255,0.5)",
-      labelColor: "#000000",
-      labelSize: 13,
-      labelAlign: "center",
-      currentStepLabelColor: "#4aae4f",
-    };
-
-    const customStyles = Object.assign(defaultStyles, props.customStyles);
-
-    this.state = {
-      width: 0,
-      height: 1,
-      progressBarSize: -2,
-      customStyles,
-    };
-
-    this.progressAnim = new Animated.Value(0);
-    this.sizeAnim = new Animated.Value(
-      this.state.customStyles.stepIndicatorSize
-    );
-    this.borderRadiusAnim = new Animated.Value(
-      this.state.customStyles.stepIndicatorSize / 2
-    );
-  }
-
-  stepPressed(position) {
-    if (this.props.onPress) {
-      this.props.onPress(position);
-    }
-  }
-
-  render() {
-    const { labels, direction } = this.props;
-    return (
-      <View
-        style={[
-          styles.container,
-          direction === "vertical"
-            ? { flexDirection: "row", flex: 1 }
-            : { flexDirection: "column" },
-        ]}
-      >
-        {this.state.width !== 0 && this.renderProgressBarBackground()}
-        {this.state.width !== 0 && this.renderProgressBar()}
-        {this.renderStepIndicator()}
-        {labels && this.renderStepLabels()}
-      </View>
-    );
-  }
-
-  componentDidUpdate(prevProps) {
-    // if (prevProps.customStyles !== this.props.customStyles) {
-    //   this.setState((state) => ({
-    //     customStyles: Object.assign(
-    //       state.customStyles,
-    //       this.props.customStyles
-    //     ),
-    //   }));
-    // }
-
-    if (prevProps.currentPosition !== this.props.currentPosition) {
-      this.onCurrentPositionChanged(this.props.currentPosition);
-    }
-  }
-
-  renderProgressBarBackground = () => {
-    const { stepCount, direction } = this.props;
-    let progressBarBackgroundStyle;
-    if (direction === "vertical") {
-      progressBarBackgroundStyle = {
-        backgroundColor: this.state.customStyles.separatorUnFinishedColor,
-        position: "absolute",
-        left:
-          (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
-        top: this.state.height / (2 * stepCount),
-        bottom: this.state.height / (2 * stepCount),
-        width:
-          this.state.customStyles.separatorStrokeUnfinishedWidth === 0
-            ? this.state.customStyles.separatorStrokeWidth
-            : this.state.customStyles.separatorStrokeUnfinishedWidth,
-      };
-    } else {
-      progressBarBackgroundStyle = {
-        backgroundColor: this.state.customStyles.separatorUnFinishedColor,
-        position: "absolute",
-        top:
-          (this.state.height - this.state.customStyles.separatorStrokeWidth) /
-          2,
-        left: this.state.width / (2 * stepCount),
-        right: this.state.width / (2 * stepCount),
-        height:
-          this.state.customStyles.separatorStrokeUnfinishedWidth === 0
-            ? this.state.customStyles.separatorStrokeWidth
-            : this.state.customStyles.separatorStrokeUnfinishedWidth,
-      };
-    }
-    return (
-      <View
-        onLayout={(event) => {
-          if (direction === "vertical") {
-            this.setState(
-              { progressBarSize: event.nativeEvent.layout.height },
-              () => {
-                this.onCurrentPositionChanged(this.props.currentPosition);
-              }
-            );
-          } else {
-            this.setState(
-              { progressBarSize: event.nativeEvent.layout.width },
-              () => {
-                this.onCurrentPositionChanged(this.props.currentPosition);
-              }
-            );
-          }
-        }}
-        style={progressBarBackgroundStyle}
-      />
-    );
-  };
-
-  renderProgressBar = () => {
-    const { stepCount, direction } = this.props;
-    let progressBarStyle;
-    if (direction === "vertical") {
-      progressBarStyle = {
-        backgroundColor: this.state.customStyles.separatorFinishedColor,
-        position: "absolute",
-        left:
-          (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
-        top: this.state.height / (2 * stepCount),
-        bottom: this.state.height / (2 * stepCount),
-        width:
-          this.state.customStyles.separatorStrokeFinishedWidth === 0
-            ? this.state.customStyles.separatorStrokeWidth
-            : this.state.customStyles.separatorStrokeFinishedWidth,
-        height: this.progressAnim,
-      };
-    } else {
-      progressBarStyle = {
-        backgroundColor: this.state.customStyles.separatorFinishedColor,
-        position: "absolute",
-        top:
-          (this.state.height - this.state.customStyles.separatorStrokeWidth) /
-          2,
-        left: this.state.width / (2 * stepCount),
-        right: this.state.width / (2 * stepCount),
-        height:
-          this.state.customStyles.separatorStrokeFinishedWidth === 0
-            ? this.state.customStyles.separatorStrokeWidth
-            : this.state.customStyles.separatorStrokeFinishedWidth,
-        width: this.progressAnim,
-      };
-    }
-    return <Animated.View style={progressBarStyle} />;
-  };
-
-  renderStepIndicator = () => {
-    let steps = [];
-    const { stepCount, direction } = this.props;
-    for (let position = 0; position < stepCount; position++) {
-      steps.push(
-        <TouchableWithoutFeedback
-          key={position}
-          onPress={() => this.stepPressed(position)}
-        >
-          <View
-            style={[
-              styles.stepContainer,
-              direction === "vertical"
-                ? { flexDirection: "column" }
-                : { flexDirection: "row" },
-            ]}
-          >
-            {this.renderStep(position)}
-          </View>
-        </TouchableWithoutFeedback>
-      );
-    }
-    return (
-      <View
-        onLayout={(event) =>
-          this.setState({
-            width: event.nativeEvent.layout.width,
-            height: event.nativeEvent.layout.height,
-          })
-        }
-        style={[
-          styles.stepIndicatorContainer,
-          direction === "vertical"
-            ? {
-                flexDirection: "column",
-                width: this.state.customStyles.currentStepIndicatorSize,
-              }
-            : {
-                flexDirection: "row",
-                height: this.state.customStyles.currentStepIndicatorSize,
-              },
-        ]}
-      >
-        {steps}
-      </View>
-    );
-  };
-
-  renderStepLabels = () => {
-    const { labels, direction, currentPosition, renderLabel } = this.props;
-    var labelViews = labels.map((label, index) => {
-      const selectedStepLabelStyle =
-        index === currentPosition
-          ? { color: this.state.customStyles.currentStepLabelColor }
-          : { color: this.state.customStyles.labelColor };
-      return (
-        <TouchableWithoutFeedback
-          style={styles.stepLabelItem}
-          key={index}
-          onPress={() => this.stepPressed(index)}
-        >
-          <View style={styles.stepLabelItem}>
-            {renderLabel ? (
-              renderLabel({
-                position: index,
-                stepStatus: this.getStepStatus(index),
-                label,
-                currentPosition,
-              })
-            ) : (
-              <Text
-                style={[
-                  styles.stepLabel,
-                  selectedStepLabelStyle,
-                  {
-                    fontSize: this.state.customStyles.labelSize,
-                    fontFamily: this.state.customStyles.labelFontFamily,
-                  },
-                ]}
-              >
-                {label}
-              </Text>
-            )}
-          </View>
-        </TouchableWithoutFeedback>
-      );
-    });
-
-    return (
-      <View
-        style={[
-          styles.stepLabelsContainer,
-          direction === "vertical"
-            ? { flexDirection: "column", paddingHorizontal: 4 }
-            : { flexDirection: "row", paddingVertical: 4 },
-          { alignItems: this.state.customStyles.labelAlign },
-        ]}
-      >
-        {labelViews}
-      </View>
-    );
-  };
-
-  renderStep = (position) => {
-    const { renderStepIndicator } = this.props;
-    let stepStyle;
-    let indicatorLabelStyle;
-
-    switch (this.getStepStatus(position)) {
-      case STEP_STATUS.CURRENT: {
-        stepStyle = {
-          backgroundColor: this.state.customStyles.stepIndicatorCurrentColor,
-          borderWidth: this.state.customStyles.currentStepStrokeWidth,
-          borderColor: this.state.customStyles.stepStrokeCurrentColor,
-          height: this.sizeAnim,
-          width: this.sizeAnim,
-          borderRadius: this.borderRadiusAnim,
-        };
-        indicatorLabelStyle = {
-          fontSize: this.state.customStyles.currentStepIndicatorLabelFontSize,
-          color: this.state.customStyles.stepIndicatorLabelCurrentColor,
-        };
-
-        break;
-      }
-      case STEP_STATUS.FINISHED: {
-        stepStyle = {
-          backgroundColor: this.state.customStyles.stepIndicatorFinishedColor,
-          borderWidth: this.state.customStyles.stepStrokeWidth,
-          borderColor: this.state.customStyles.stepStrokeFinishedColor,
-          height: this.state.customStyles.stepIndicatorSize,
-          width: this.state.customStyles.stepIndicatorSize,
-          borderRadius: this.state.customStyles.stepIndicatorSize / 2,
-        };
-        indicatorLabelStyle = {
-          fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
-          color: this.state.customStyles.stepIndicatorLabelFinishedColor,
-        };
-        break;
-      }
-
-      case STEP_STATUS.UNFINISHED: {
-        stepStyle = {
-          backgroundColor: this.state.customStyles.stepIndicatorUnFinishedColor,
-          borderWidth: this.state.customStyles.stepStrokeWidth,
-          borderColor: this.state.customStyles.stepStrokeUnFinishedColor,
-          height: this.state.customStyles.stepIndicatorSize,
-          width: this.state.customStyles.stepIndicatorSize,
-          borderRadius: this.state.customStyles.stepIndicatorSize / 2,
-        };
-        indicatorLabelStyle = {
-          overflow: "hidden",
-          fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
-          color: this.state.customStyles.stepIndicatorLabelUnFinishedColor,
-        };
-        break;
-      }
-      default:
-    }
-
-    return (
-      <Animated.View key={"step-indicator"} style={[styles.step, stepStyle]}>
-        {renderStepIndicator ? (
-          renderStepIndicator({
-            position,
-            stepStatus: this.getStepStatus(position),
-          })
-        ) : (
-          <Text style={indicatorLabelStyle}>{`${position + 1}`}</Text>
-        )}
-      </Animated.View>
-    );
-  };
-
-  getStepStatus = (stepPosition) => {
-    const { currentPosition } = this.props;
-    if (stepPosition === currentPosition) {
-      return STEP_STATUS.CURRENT;
-    } else if (stepPosition < currentPosition) {
-      return STEP_STATUS.FINISHED;
-    } else {
-      return STEP_STATUS.UNFINISHED;
-    }
-  };
-
-  onCurrentPositionChanged = (position) => {
-    let { stepCount } = this.props;
-    if (position > stepCount - 1) {
-      position = stepCount - 1;
-    }
-    const animateToPosition =
-      (this.state.progressBarSize / (stepCount - 1)) * position;
-    this.sizeAnim.setValue(this.state.customStyles.stepIndicatorSize);
-    this.borderRadiusAnim.setValue(
-      this.state.customStyles.stepIndicatorSize / 2
-    );
-    Animated.sequence([
-      Animated.timing(this.progressAnim, {
-        toValue: animateToPosition,
-        duration: 200,
-      }),
-      Animated.parallel([
-        Animated.timing(this.sizeAnim, {
-          toValue: this.state.customStyles.currentStepIndicatorSize,
-          duration: 100,
-        }),
-        Animated.timing(this.borderRadiusAnim, {
-          toValue: this.state.customStyles.currentStepIndicatorSize / 2,
-          duration: 100,
-        }),
-      ]),
-    ]).start();
-  };
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "transparent",
-  },
-  stepIndicatorContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-    backgroundColor: "transparent",
-  },
-  stepLabelsContainer: {
-    justifyContent: "space-around",
-  },
-  step: {
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 2,
-  },
-  stepContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  stepLabel: {
-    fontSize: 12,
-    textAlign: "center",
-    fontWeight: "500",
-  },
-  stepLabelItem: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-StepIndicator.defaultProps = {
-  currentPosition: 0,
-  stepCount: 5,
-  customStyles: {},
-  direction: "horizontal",
-};

package/src/components/TabView/TabView.js

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { TabView, TabBar, SceneMap } from "react-native-tab-view";
-// import { withTheme } from "../../theming";
-import TabViewItem from "./TabViewItem";
-const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
-    const [index, setIndex] = React.useState(0);
-    const [routes, setRoutes] = React.useState([]);
-    const [tabScenes, setTabScenes] = React.useState({});
-    React.useEffect(() => {
-        const newRoutes = [];
-        const scenes = {};
-        React.Children.toArray(children)
-            .filter((child) => child.type === TabViewItem)
-            .forEach((child) => {
-            var _a, _b, _c;
-            if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.id) {
-                newRoutes.push({
-                    key: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.id,
-                    ...child === null || child === void 0 ? void 0 : child.props,
-                });
-                scenes[(_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.id] = () => child;
-            }
-        });
-        setRoutes(newRoutes);
-        setTabScenes(scenes);
-    }, [children]);
-    const indexChangeHandler = (i) => setIndex(i);
-    const renderTabBar = (props) => {
-        console.log(props);
-        return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
-    };
-    return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
-};
-export default TabViewComponent;

package/src/components/TabView/TabView.tsx

@@ -1,97 +0,0 @@
-import * as React from "react";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
-import { TabView, TabBar, SceneMap } from "react-native-tab-view";
-
-// import { withTheme } from "../../theming";
-import TabViewItem from "./TabViewItem";
-import type { IconSlot } from "../../interfaces/Icon";
-
-type TabBarPosition = "top" | "bottom";
-type KeyboardDismissMode = "none" | "auto" | "on-drag";
-
-type TabViewProps = {
-  tabBarPosition?: TabBarPosition;
-  keyboardDismissMode?: KeyboardDismissMode;
-  swipeEnabled?: boolean;
-  scrollEnabled?: boolean;
-  activeColor?: string;
-  inactiveColor?: string;
-  pressColor?: string;
-  indicatorColor?: string;
-  style?: StyleProp<TextStyle | ViewStyle>;
-  children: React.ReactNode;
-} & IconSlot;
-
-const TabViewComponent = ({
-  Icon,
-  tabBarPosition,
-  keyboardDismissMode,
-  swipeEnabled,
-  scrollEnabled,
-  activeColor,
-  inactiveColor,
-  pressColor,
-  indicatorColor,
-  style,
-  children,
-}: TabViewProps) => {
-  const [index, setIndex] = React.useState(0);
-  const [routes, setRoutes] = React.useState([]);
-  const [tabScenes, setTabScenes] = React.useState({});
-
-  React.useEffect(() => {
-    const newRoutes: any = [];
-    const scenes: any = {};
-
-    React.Children.toArray(children)
-      .filter((child: any) => child.type === TabViewItem)
-      .forEach((child: any) => {
-        if (child?.props?.id) {
-          newRoutes.push({
-            key: child?.props?.id,
-            ...child?.props,
-          });
-          scenes[child?.props?.id] = () => child;
-        }
-      });
-
-    setRoutes(newRoutes);
-    setTabScenes(scenes);
-  }, [children]);
-
-  const indexChangeHandler = (i: any) => setIndex(i);
-
-  const renderTabBar = (props: any) => {
-    console.log(props);
-    return (
-      <TabBar
-        {...props}
-        activeColor={activeColor}
-        inactiveColor={inactiveColor}
-        pressColor={pressColor}
-        scrollEnabled={scrollEnabled}
-        indicatorStyle={{ backgroundColor: indicatorColor }}
-        renderIcon={({ route, color }) =>
-          route?.icon ? (
-            <Icon name={route.icon} color={color} size={36} />
-          ) : null
-        }
-        style={style}
-      />
-    );
-  };
-
-  return (
-    <TabView
-      navigationState={{ index, routes }}
-      renderScene={SceneMap(tabScenes)}
-      renderTabBar={renderTabBar}
-      onIndexChange={indexChangeHandler}
-      tabBarPosition={tabBarPosition}
-      keyboardDismissMode={keyboardDismissMode}
-      swipeEnabled={swipeEnabled}
-    />
-  );
-};
-
-export default TabViewComponent;

package/src/components/TabView/TabViewItem.js

@@ -1,5 +0,0 @@
-const TabViewItem = ({ title, id, icon, children, accessibilityLabel, }) => {
-    console.log({ title, id, icon, accessibilityLabel });
-    return children;
-};
-export default TabViewItem;

package/src/components/TabView/TabViewItem.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-interface TabViewItemProps {
-  title: string;
-  id: string;
-  icon: string;
-  accessibilityLabel: string;
-  children: React.ReactNode;
-}
-
-const TabViewItem = ({
-  title,
-  id,
-  icon,
-  children,
-  accessibilityLabel,
-}: TabViewItemProps) => {
-  console.log({ title, id, icon, accessibilityLabel });
-  return children;
-};
-
-export default TabViewItem;

package/src/components/TabView/index.js

@@ -1,2 +0,0 @@
-export { default as TabView } from "./TabView";
-export { default as TabViewItem } from "./TabViewItem";

package/src/components/TabView/index.tsx

@@ -1,2 +0,0 @@
-export { default as TabView } from "./TabView";
-export { default as TabViewItem } from "./TabViewItem";

package/src/components/ToggleButton.js

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import { StyleSheet } from "react-native";
-import IconButton from "./IconButton";
-const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, defaultValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
-    const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
-    React.useEffect(() => {
-        if (toggled != null) {
-            setInternalValue(toggled);
-        }
-    }, [toggled]);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            setInternalValue(defaultValue);
-        }
-    }, [defaultValue]);
-    const handlePress = () => {
-        setInternalValue(!internalValue);
-        onPress(!internalValue);
-    };
-    return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
-            styles.mainContainer,
-            {
-                width,
-                height,
-                backgroundColor: internalValue
-                    ? colors[colorSecondary]
-                    : colors[color],
-                borderColor: colors[borderColor],
-            },
-            style,
-        ], ...rest }));
-};
-const styles = StyleSheet.create({
-    mainContainer: {
-        borderWidth: 1,
-    },
-});
-export default withTheme(ToggleButton);