@estuary-solutions/rn-core-ui 0.0.3

package/dist/TextFields/TextField.js

@@ -0,0 +1,400 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { View, TextInput, StyleSheet, Animated, Easing, } from 'react-native';
+import { colors, fontSize } from '../themes';
+import { WEB } from '../utils';
+import Text from '../Texts/Text';
+const DEFAULT_ROWS = 3;
+const DEFAULT_MARGIN_TOP = 6;
+const DEFAULT_PADDING = 12;
+const DISABLED_COLOR = colors.disabled;
+const FOCUSED_COLOR = colors.primary;
+const ERROR_COLOR = colors.error;
+const DEFAULT_COLOR = colors.gray_D1D2D4;
+const MIN_HEIGHT = 48;
+const TextField = (_a) => {
+    var { label, labelMinSize = fontSize._12, labelSize = fontSize._14, applyTopLabel = true, labelBackground, value, defaultValue, onChangeText, error, errorColor, focusedColor, helperText, helperTextColor, helperTextStyle, renderStartIcon, renderEndIcon, multiline = false, rows = DEFAULT_ROWS, maxRows, editable = true, containerStyle, inputContainerStyle, style, onFocus, onBlur } = _a, rest = __rest(_a, ["label", "labelMinSize", "labelSize", "applyTopLabel", "labelBackground", "value", "defaultValue", "onChangeText", "error", "errorColor", "focusedColor", "helperText", "helperTextColor", "helperTextStyle", "renderStartIcon", "renderEndIcon", "multiline", "rows", "maxRows", "editable", "containerStyle", "inputContainerStyle", "style", "onFocus", "onBlur"]);
+    const [internalValue, setInternalValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    const [focused, setFocused] = React.useState(false);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [containerHeight, setContainerHeight] = React.useState(0);
+    const [labelHeight, setLabelHeight] = React.useState(0);
+    const [helperHeight, setHelperHeight] = React.useState(0);
+    const [contentHeight, setContentHeight] = React.useState(null);
+    const [startIconWidth, setStartIconWidth] = React.useState(0);
+    const [endIconWidth, setEndIconWidth] = React.useState(0);
+    const [webInputHeight, setWebInputHeight] = React.useState();
+    const inputRef = React.useRef(null); //Handling dragging on Web
+    const isApplyStartIcon = typeof renderStartIcon === 'function';
+    const isApplyEndIcon = typeof renderEndIcon === 'function';
+    const labelMaxWidth = containerWidth -
+        (isApplyStartIcon ? startIconWidth : 0) -
+        (isApplyEndIcon ? endIconWidth : 0) -
+        DEFAULT_PADDING * 2;
+    const isControlled = value !== undefined;
+    const textValue = isControlled ? value : internalValue;
+    const hasError = Boolean(error);
+    const errorMessage = typeof error === 'string' ? error : undefined;
+    const floatAnim = React.useRef(new Animated.Value(textValue ? 1 : 0)).current;
+    const handleChange = React.useCallback((text) => {
+        if (!isControlled) {
+            setInternalValue(text);
+        }
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+    }, [isControlled, onChangeText]);
+    const handleHideTopLabel = () => {
+        if (applyTopLabel) {
+            return undefined;
+        }
+        return floatAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, 0],
+        });
+    };
+    const resolvePaddingSide = (rawStyle, isTop) => {
+        const style = StyleSheet.flatten(rawStyle);
+        const side = isTop ? 'paddingTop' : 'paddingBottom';
+        if (typeof (style === null || style === void 0 ? void 0 : style.paddingVertical) === 'number') {
+            return style.paddingVertical;
+        }
+        if (typeof (style === null || style === void 0 ? void 0 : style.padding) === 'number') {
+            return style.padding;
+        }
+        if (typeof (style === null || style === void 0 ? void 0 : style[side]) === 'number') {
+            return style[side];
+        }
+        return 0;
+    };
+    const resolvePadding = (userStyle, fallbackStyle, isTop) => {
+        const userPadding = resolvePaddingSide(userStyle, isTop);
+        if (userPadding !== 0)
+            return userPadding;
+        return resolvePaddingSide(fallbackStyle, isTop);
+    };
+    const calculatePadding = (isTop) => {
+        const containerPadding = resolvePadding(containerStyle, styles.container, isTop);
+        const inputPadding = resolvePadding(inputContainerStyle, styles.inputContainer, isTop);
+        const textInputPadding = resolvePadding(style, styles.input, isTop);
+        return containerPadding + inputPadding + textInputPadding;
+    };
+    const getInsetY = (alignVertical) => {
+        switch (alignVertical) {
+            case 'center':
+                return containerHeight / 2 - labelHeight;
+            case 'bottom':
+                return containerHeight - helperHeight - DEFAULT_MARGIN_TOP - labelHeight - calculatePadding(false);
+            case 'top':
+            default:
+                return calculatePadding(true);
+        }
+    };
+    const resolveTextAlignVertical = () => {
+        var _a;
+        const textInputStyle = StyleSheet.flatten(style);
+        if (WEB) { //Web only support textAlignVertical top
+            return 'top';
+        }
+        return (_a = textInputStyle === null || textInputStyle === void 0 ? void 0 : textInputStyle.textAlignVertical) !== null && _a !== void 0 ? _a : 'top';
+    };
+    const textAlignVertical = resolveTextAlignVertical();
+    const multilineStyle = React.useMemo(() => {
+        if (!multiline || !contentHeight) {
+            return null;
+        }
+        const padding = resolvePadding(style, styles.input, true) +
+            resolvePadding(style, styles.input, false);
+        return {
+            minHeight: rows ? rows * (contentHeight - (WEB ? padding * 1.9 : padding / 1.3)) : undefined,
+            maxHeight: maxRows ? maxRows * (contentHeight - padding / 1.1) : undefined, // maxHeight not work for auto add new line with maxRows on Web. Use height instead.
+        };
+    }, [multiline, rows, maxRows, contentHeight]);
+    const multilineWebStyle = React.useMemo(() => {
+        if (!multiline || !WEB || !contentHeight || !webInputHeight) {
+            return null;
+        }
+        const padding = resolvePadding(style, styles.input, true) +
+            resolvePadding(style, styles.input, false);
+        const minHeight = rows ? rows * (contentHeight - padding * 1.9) : 0;
+        const maxHeight = maxRows ? maxRows * (contentHeight - padding * 1.9) : 0;
+        if (webInputHeight > maxHeight) {
+            return {
+                height: maxHeight
+            };
+        }
+        if (webInputHeight > minHeight && webInputHeight <= maxHeight) {
+            return {
+                height: webInputHeight
+            };
+        }
+        return null;
+    }, [multiline, rows, maxRows, contentHeight, webInputHeight]);
+    const labelInsetY = React.useMemo(() => getInsetY(textAlignVertical), [
+        textAlignVertical,
+        style,
+        inputContainerStyle,
+        containerStyle,
+        containerHeight,
+        helperHeight,
+        labelHeight
+    ]);
+    const renderBackgroundLabel = () => {
+        if (labelBackground) {
+            return labelBackground;
+        }
+        if (!editable) {
+            return DISABLED_COLOR;
+        }
+        return colors.white;
+    };
+    const renderLabelColor = () => {
+        if (hasError) {
+            if (errorColor) {
+                return errorColor;
+            }
+            return ERROR_COLOR;
+        }
+        if (focused) {
+            if (focusedColor) {
+                return focusedColor;
+            }
+            return FOCUSED_COLOR;
+        }
+        return DEFAULT_COLOR;
+    };
+    const renderInputBorderColor = () => {
+        if (hasError) {
+            if (errorColor) {
+                return errorColor;
+            }
+            return ERROR_COLOR;
+        }
+        if (focused) {
+            if (focusedColor) {
+                return focusedColor;
+            }
+            return FOCUSED_COLOR;
+        }
+        return DEFAULT_COLOR;
+    };
+    const renderHelperTextColor = () => {
+        if (helperTextColor) {
+            return helperTextColor;
+        }
+        if (hasError) {
+            if (errorColor) {
+                return errorColor;
+            }
+            return ERROR_COLOR;
+        }
+        if (!editable) {
+            return DEFAULT_COLOR;
+        }
+        return colors.black;
+    };
+    const labelViewStyle = {
+        position: 'absolute',
+        left: isApplyStartIcon ? startIconWidth + DEFAULT_PADDING : DEFAULT_PADDING,
+        top: applyTopLabel ? floatAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [labelInsetY, -labelMinSize / 1.5],
+        }) : labelInsetY,
+        maxWidth: labelMaxWidth,
+        overflow: 'hidden',
+        backgroundColor: renderBackgroundLabel(),
+        paddingHorizontal: DEFAULT_PADDING,
+        opacity: handleHideTopLabel(),
+        borderRadius: 5
+    };
+    const labelStyle = {
+        fontSize: applyTopLabel ? floatAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [labelSize, labelMinSize],
+        }) : labelSize,
+        color: renderLabelColor(),
+    };
+    React.useEffect(() => {
+        Animated.timing(floatAnim, {
+            toValue: focused || textValue ? 1 : 0,
+            duration: 180,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: false,
+        }).start();
+    }, [focused, textValue, floatAnim]);
+    React.useEffect(() => {
+        if (!WEB || !multiline) {
+            return;
+        }
+        const el = inputRef.current;
+        if (!el) {
+            return;
+        }
+        let isDragging = false;
+        let startY = 0;
+        let startScrollTop = 0;
+        const onMouseDown = (e) => {
+            isDragging = true;
+            startY = e.clientY;
+            startScrollTop = el.scrollTop;
+        };
+        const onMouseMove = (e) => {
+            if (!isDragging) {
+                return;
+            }
+            el.scrollTop = startScrollTop - (e.clientY - startY);
+        };
+        const onMouseUp = () => {
+            isDragging = false;
+        };
+        el.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+            el.removeEventListener('mousedown', onMouseDown);
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [multiline]);
+    const multilineStyleSignature = React.useMemo(() => {
+        if (!style)
+            return '';
+        const s = Array.isArray(style)
+            ? Object.assign({}, ...style)
+            : style;
+        return [
+            s.minHeight,
+            s.maxHeight,
+            s.paddingTop,
+            s.paddingBottom,
+            s.lineHeight,
+            s.fontSize,
+        ].join('|');
+    }, [style]);
+    React.useEffect(() => {
+        let timeoutID;
+        if (contentHeight) {
+            handleChange('');
+            timeoutID = setTimeout(() => setContentHeight(null), 1000); //Wait until the text change for onContentSizeChange get the init height before reset multilineStyle
+        }
+        return () => {
+            if (timeoutID) {
+                clearTimeout(timeoutID);
+            }
+        };
+    }, [multilineStyleSignature]);
+    return (_jsxs(View, { onLayout: e => {
+            var _a, _b, _c, _d;
+            setContainerWidth((_b = (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.width);
+            setContainerHeight((_d = (_c = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.height);
+        }, style: [styles.container, containerStyle], children: [_jsxs(View, { style: [
+                    styles.inputContainer,
+                    { borderColor: renderInputBorderColor() },
+                    !editable && styles.disabled,
+                    inputContainerStyle,
+                ], children: [label && (_jsx(Animated.View, { pointerEvents: 'none', onLayout: e => {
+                            var _a, _b;
+                            setLabelHeight((_b = (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.height);
+                        }, style: labelViewStyle, children: _jsx(Animated.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: labelStyle, children: label }) })), isApplyStartIcon && (_jsx(View, { style: styles.iconStart, onLayout: e => {
+                            setStartIconWidth(e.nativeEvent.layout.width);
+                        }, children: renderStartIcon({
+                            focused: focused,
+                            hasError: hasError,
+                            editable: editable,
+                        }) })), _jsx(TextInput, Object.assign({}, rest, { ref: inputRef, style: [
+                            styles.input,
+                            multiline && styles.multiline,
+                            multilineStyle,
+                            multilineWebStyle,
+                            WEB && !editable && styles.webDisabled,
+                            !editable && styles.inputDisabled,
+                            style,
+                        ], value: textValue, onChangeText: handleChange, editable: editable, multiline: multiline, onFocus: e => {
+                            if (!editable) {
+                                return;
+                            }
+                            setFocused(true);
+                            onFocus && onFocus(e);
+                        }, onBlur: e => {
+                            setFocused(false);
+                            onBlur && onBlur(e);
+                        }, onContentSizeChange: e => {
+                            if (multiline && WEB) {
+                                setWebInputHeight(e.nativeEvent.contentSize.height);
+                            }
+                            if (!multiline || contentHeight) {
+                                return;
+                            }
+                            setContentHeight(e.nativeEvent.contentSize.height);
+                        } })), isApplyEndIcon && (_jsx(View, { style: styles.iconEnd, onLayout: e => {
+                            var _a, _b;
+                            setEndIconWidth((_b = (_a = e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.width);
+                        }, children: renderEndIcon({
+                            focused: focused,
+                            hasError: hasError,
+                            editable: editable,
+                        }) }))] }), (errorMessage || helperText) && (_jsx(Text, { color: renderHelperTextColor(), onLayout: e => {
+                    var _a, _b;
+                    setHelperHeight((_b = (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.height);
+                }, style: [styles.helperText, helperTextStyle], children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : helperText }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    inputContainer: {
+        minHeight: MIN_HEIGHT,
+        borderWidth: 1,
+        borderColor: DEFAULT_COLOR,
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: DEFAULT_PADDING,
+        backgroundColor: colors.white,
+    },
+    focusedBorder: {
+        borderColor: FOCUSED_COLOR,
+    },
+    input: Object.assign({ flex: 1, fontSize: fontSize._14, color: colors.black, paddingVertical: DEFAULT_PADDING }, (WEB
+        ? {
+            outlineStyle: 'none',
+            overflow: 'hidden',
+        }
+        : {})),
+    multiline: {
+        textAlignVertical: 'top',
+        alignItems: 'flex-start'
+    },
+    iconStart: {
+        marginRight: DEFAULT_PADDING,
+    },
+    iconEnd: {
+        marginLeft: DEFAULT_PADDING,
+    },
+    helperText: {
+        marginTop: DEFAULT_MARGIN_TOP,
+        fontSize: WEB ? fontSize._10 : fontSize._12,
+        paddingHorizontal: DEFAULT_PADDING
+    },
+    disabled: {
+        backgroundColor: DISABLED_COLOR,
+    },
+    webDisabled: Object.assign({}, (WEB
+        ? {
+            cursor: 'not-allowed',
+        }
+        : {})),
+    inputDisabled: {
+        color: DEFAULT_COLOR
+    }
+});
+export default TextField;

package/dist/TextFields/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField';
+//# sourceMappingURL=index.d.ts.map

package/dist/TextFields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/TextFields/index.js

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

package/dist/Texts/Text.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextProps as RNTextProps, TextStyle, StyleProp } from 'react-native';
+export interface TextProps extends RNTextProps {
+    style?: StyleProp<TextStyle>;
+    color?: string;
+    bold?: boolean;
+    italic?: boolean;
+    light?: boolean;
+    medium?: boolean;
+    semiBold?: boolean;
+    size?: number;
+    thin?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Text component for displaying text with custom styles and loading state.
+ * This component also have its own view and can easily be customized.
+ */
+declare const Text: React.FC<TextProps>;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

package/dist/Texts/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Texts/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyC7B,CAAC;AAQF,eAAe,IAAI,CAAC"}

package/dist/Texts/Text.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, Text as RNText, } from 'react-native';
+import { colors, fontSize } from '../themes';
+/**
+ * Text component for displaying text with custom styles and loading state.
+ * This component also have its own view and can easily be customized.
+ */
+const Text = (_a) => {
+    var { bold = false, color = colors.black, italic = false, light = false, medium = false, semiBold = false, size = fontSize._16, style = {}, thin = false } = _a, rest = __rest(_a, ["bold", "color", "italic", "light", "medium", "semiBold", "size", "style", "thin"]);
+    let textStyle = {
+        color,
+        fontSize: size,
+        fontStyle: italic ? 'italic' : 'normal',
+        fontWeight: '400'
+    };
+    if (bold) {
+        textStyle.fontWeight = '700';
+    }
+    if (semiBold) {
+        textStyle.fontWeight = '600';
+    }
+    if (medium) {
+        textStyle.fontWeight = '500';
+    }
+    if (light) {
+        textStyle.fontWeight = '300';
+    }
+    if (thin) {
+        textStyle.fontWeight = '100';
+    }
+    return _jsx(RNText, Object.assign({}, rest, { style: [styles.textDefault, textStyle, style] }));
+};
+const styles = StyleSheet.create({
+    textDefault: {
+        color: colors.black,
+    },
+});
+export default Text;

package/dist/constants/DraggableFlatList/constants.d.ts

@@ -0,0 +1,28 @@
+import { PanGestureHandlerProperties } from "react-native-gesture-handler";
+import { WithSpringConfig } from "react-native-reanimated";
+export declare const SCROLL_POSITION_TOLERANCE = 2;
+export declare const DEFAULT_ANIMATION_CONFIG: WithSpringConfig;
+export declare const DEFAULT_PROPS: {
+    autoscrollThreshold: number;
+    autoscrollSpeed: number;
+    animationConfig: {
+        stiffness?: number;
+        overshootClamping?: boolean;
+        restDisplacementThreshold?: number;
+        restSpeedThreshold?: number;
+        velocity?: number;
+        reduceMotion?: import("react-native-reanimated").ReduceMotion;
+    } & {
+        mass?: number;
+        damping?: number;
+        duration?: never;
+        dampingRatio?: never;
+        clamp?: never;
+    };
+    scrollEnabled: boolean;
+    dragHitSlop: PanGestureHandlerProperties["hitSlop"];
+    activationDistance: number;
+    dragItemOverflow: boolean;
+};
+export declare const isReanimatedV2 = true;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants/DraggableFlatList/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/constants/DraggableFlatList/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAEL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAGjC,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,wBAAwB,EAAE,gBAOtC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;iBAKN,2BAA2B,CAAC,SAAS,CAAC;;;CAGzD,CAAC;AAGF,eAAO,MAAM,cAAc,OAAmB,CAAC"}

package/dist/constants/DraggableFlatList/constants.js

@@ -0,0 +1,25 @@
+import { useSharedValue, } from "react-native-reanimated";
+// Fire onScrollComplete when within this many px of target offset
+export const SCROLL_POSITION_TOLERANCE = 2;
+export const DEFAULT_ANIMATION_CONFIG = {
+    damping: 20,
+    mass: 0.2,
+    stiffness: 100,
+    overshootClamping: false,
+    restSpeedThreshold: 0.2,
+    restDisplacementThreshold: 0.2,
+};
+export const DEFAULT_PROPS = {
+    autoscrollThreshold: 30,
+    autoscrollSpeed: 100,
+    animationConfig: DEFAULT_ANIMATION_CONFIG,
+    scrollEnabled: true,
+    dragHitSlop: 0,
+    activationDistance: 0,
+    dragItemOverflow: false,
+};
+// Is there a better way to check for v2?
+export const isReanimatedV2 = !!useSharedValue;
+if (!isReanimatedV2) {
+    throw new Error("Your version of react-native-reanimated is too old for react-native-draggable-flatlist!");
+}

package/dist/constants/DraggableFlatList/types.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+import { FlatListProps, LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
+import Animated, { AnimateProps, WithSpringConfig } from "react-native-reanimated";
+import { useAnimatedValues } from "../../context/DraggableFlatList/animatedValueContext";
+import { DEFAULT_PROPS } from "./constants";
+export type DragEndParams<T> = {
+    data: T[];
+    from: number;
+    to: number;
+};
+type Modify<T, R> = Omit<T, keyof R> & R;
+type DefaultProps = Readonly<typeof DEFAULT_PROPS>;
+export type DraggableFlatListProps<T> = Modify<FlatListProps<T>, {
+    data: T[];
+    activationDistance?: number;
+    animationConfig?: Partial<WithSpringConfig>;
+    autoscrollSpeed?: number;
+    autoscrollThreshold?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    debug?: boolean;
+    dragItemOverflow?: boolean;
+    keyExtractor: (item: T, index: number) => string;
+    onDragBegin?: (index: number) => void;
+    onDragEnd?: (params: DragEndParams<T>) => void;
+    onPlaceholderIndexChange?: (placeholderIndex: number) => void;
+    onRelease?: (index: number) => void;
+    onScrollOffsetChange?: (scrollOffset: number) => void;
+    renderItem: RenderItem<T>;
+    renderPlaceholder?: RenderPlaceholder<T>;
+    simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
+    outerScrollOffset?: Animated.SharedValue<number>;
+    onAnimValInit?: (animVals: ReturnType<typeof useAnimatedValues>) => void;
+    itemEnteringAnimation?: AnimateProps<Animated.View>["entering"];
+    itemExitingAnimation?: AnimateProps<Animated.View>["exiting"];
+    itemLayoutAnimation?: AnimateProps<Animated.View>["layout"];
+    enableLayoutAnimationExperimental?: boolean;
+    onContainerLayout?: (params: {
+        layout: LayoutChangeEvent["nativeEvent"]["layout"];
+        containerRef: React.RefObject<Animated.View>;
+    }) => void;
+} & Partial<DefaultProps>>;
+export type RenderPlaceholder<T> = (params: {
+    item: T;
+    index: number;
+}) => JSX.Element;
+export type RenderItemParams<T> = {
+    item: T;
+    getIndex: () => number | undefined;
+    drag: () => void;
+    isActive: boolean;
+};
+export type RenderItem<T> = (params: RenderItemParams<T>) => React.ReactNode;
+export type AnimatedFlatListType = <T>(props: Animated.AnimateProps<FlatListProps<T> & {
+    ref: React.Ref<FlatList<T>>;
+    simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
+}>) => React.ReactElement;
+export type CellData = {
+    measurements: {
+        size: number;
+        offset: number;
+    };
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/constants/DraggableFlatList/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/constants/DraggableFlatList/types.ts"],"names":[],"mappings":"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"}

package/dist/constants/DraggableFlatList/types.js

@@ -0,0 +1 @@
+export {};

package/dist/constants/DraggableFlatList/types.web.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DraggableFlatListProps, RenderItemParams } from "../DraggableFlatList/types";
+export interface WebDraggableFlatListProps<T> extends Omit<DraggableFlatListProps<T>, "renderItem" | "containerStyle"> {
+    renderItem: (params: RenderItemParams<T>) => React.ReactNode;
+    containerStyle?: React.CSSProperties;
+}
+//# sourceMappingURL=types.web.d.ts.map

package/dist/constants/DraggableFlatList/types.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.web.d.ts","sourceRoot":"","sources":["../../../src/constants/DraggableFlatList/types.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,yBAAyB,CAAC,CAAC,CAAE,SAAQ,IAAI,CACxD,sBAAsB,CAAC,CAAC,CAAC,EACzB,YAAY,GAAG,gBAAgB,CAChC;IACC,UAAU,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC"}

package/dist/constants/DraggableFlatList/types.web.js

@@ -0,0 +1 @@
+export {};

package/dist/constants/consts.d.ts

@@ -0,0 +1,16 @@
+export declare const FORMAT_TIME_DMY_ = "DD/MM/YYYY";
+export declare const FORMAT_TIME_DMY = "DD-MM-YYYY";
+export declare const FORMAT_TIME = "YYYY-MM-DD HH:mm";
+export declare const FORMAT_TIME_DMYHMS = "DD/MM/YYYY HH:mm:ss";
+export declare const FORMAT_TIME_DMYHM = "DD/MM/YYYY HH:mm";
+export declare const FORMAT_TIME_VH = "MMMM DD, YYYY HH:mm";
+export declare const FORMAT_TIME_DDMMM = "DD MMM";
+export declare const FORMAT_TIME_YMD = "YYYY-MM-DD";
+export declare const FORMAT_TIME_FILTER = "DD/MM/YY";
+export declare const FORMAT_TIME_L = "L";
+export declare const FORMAT_TIME_LL = "LL";
+export declare const FORMAT_TIME_LLL = "LLL";
+export declare const FORMAT_TIME_LLLL = "LLLL";
+export declare const FORMAT_TIME_LT = "LT";
+export declare const FORMAT_TIME_LTS = "LTS";
+//# sourceMappingURL=consts.d.ts.map

package/dist/constants/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../src/constants/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAE7C,eAAO,MAAM,eAAe,eAAe,CAAC;AAE5C,eAAO,MAAM,WAAW,qBAAqB,CAAC;AAE9C,eAAO,MAAM,kBAAkB,wBAAwB,CAAC;AAExD,eAAO,MAAM,iBAAiB,qBAAqB,CAAC;AAEpD,eAAO,MAAM,cAAc,wBAAwB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAE1C,eAAO,MAAM,eAAe,eAAe,CAAC;AAE5C,eAAO,MAAM,kBAAkB,aAAa,CAAC;AAE7C,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,eAAe,QAAQ,CAAC;AACrC,eAAO,MAAM,gBAAgB,SAAS,CAAC;AACvC,eAAO,MAAM,cAAc,OAAO,CAAC;AACnC,eAAO,MAAM,eAAe,QAAQ,CAAC"}