react-native-sortables/dist/module/components/SortableFlex.js

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React, { createElement as _createElement } from "react";
import { memo, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
import { DEFAULT_SORTABLE_FLEX_PROPS } from '../constants';
import { useDragEndHandler, usePropsWithDefaults } from '../hooks';
import { useStableCallbackValues } from '../integrations/reanimated';
import { FLEX_STRATEGIES, FlexProvider, ItemsProvider, useCommonValuesContext, useMeasurementsContext, useOrderUpdater, useStrategyKey } from '../providers';
import { orderItems, processChildren } from '../utils';
import { SortableContainer } from './shared';
import { jsx as _jsx } from "react/jsx-runtime";
function SortableFlex(props) {
  const {
    children,
    onActiveItemDropped,
    onDragEnd: _onDragEnd,
    onDragMove,
    onDragStart,
    onOrderChange,
    strategy,
    ...rest
  } = usePropsWithDefaults(props, DEFAULT_SORTABLE_FLEX_PROPS);
  const items = processChildren(children);
  const callbacks = useStableCallbackValues({
    onActiveItemDropped,
    onDragMove,
    onDragStart,
    onOrderChange
  });
  const onDragEnd = useDragEndHandler(_onDragEnd, {
    order: params => function (data) {
      return orderItems(data, items, params, true);
    }
  });
  return /*#__PURE__*/_jsx(ItemsProvider, {
    items: items,
    children: /*#__PURE__*/_createElement(SortableFlexInner, {
      ...rest,
      ...callbacks,
      key: useStrategyKey(strategy),
      strategy: strategy,
      onDragEnd: onDragEnd
    })
  });
}
const CONTROLLED_ITEM_DIMENSIONS = {
  height: false,
  width: false
};
const SortableFlexInner = /*#__PURE__*/memo(function SortableFlexInner({
  alignContent,
  alignItems,
  columnGap,
  debug,
  dimensionsAnimationType,
  DropIndicatorComponent,
  dropIndicatorStyle,
  flexDirection,
  flexWrap,
  gap,
  height,
  itemEntering,
  itemExiting,
  justifyContent,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  overflow,
  padding,
  paddingBottom,
  paddingHorizontal,
  paddingLeft,
  paddingRight,
  paddingTop,
  paddingVertical,
  rowGap,
  showDropIndicator,
  strategy,
  width,
  ...rest
}) {
  const isColumn = flexDirection.startsWith('column');
  const controlledContainerDimensions = useMemo(() => flexWrap === 'nowrap' ? {
    height: height === undefined,
    width: width === undefined
  } : {
    height: height === undefined,
    width: isColumn && width === undefined
  }, [flexWrap, isColumn, height, width]);
  const styleProps = {
    alignContent,
    alignItems,
    columnGap: columnGap ?? gap,
    flexDirection,
    flexWrap,
    height,
    justifyContent,
    maxHeight,
    maxWidth,
    minHeight,
    minWidth,
    padding,
    paddingBottom,
    paddingHorizontal,
    paddingLeft,
    paddingRight,
    paddingTop,
    paddingVertical,
    rowGap: rowGap ?? gap,
    width
  };
  return /*#__PURE__*/_jsx(FlexProvider, {
    ...rest,
    controlledContainerDimensions: controlledContainerDimensions,
    controlledItemDimensions: CONTROLLED_ITEM_DIMENSIONS,
    debug: debug,
    strategy: strategy,
    styleProps: styleProps,
    children: /*#__PURE__*/_jsx(SortableFlexComponent, {
      debug: debug,
      dimensionsAnimationType: dimensionsAnimationType,
      DropIndicatorComponent: DropIndicatorComponent,
      dropIndicatorStyle: dropIndicatorStyle,
      itemEntering: itemEntering,
      itemExiting: itemExiting,
      overflow: overflow,
      showDropIndicator: showDropIndicator,
      strategy: strategy,
      styleProps: styleProps
    })
  });
});
function SortableFlexComponent({
  strategy,
  styleProps,
  ...rest
}) {
  const {
    usesAbsoluteLayout
  } = useCommonValuesContext();
  const {
    handleContainerMeasurement
  } = useMeasurementsContext();
  const {
    alignContent,
    alignItems,
    flexDirection,
    flexWrap,
    height,
    justifyContent,
    width
  } = styleProps;
  useOrderUpdater(strategy, FLEX_STRATEGIES);
  const baseContainerStyle = {
    ...styleProps,
    height: height === 'fill' ? undefined : height,
    width: width === 'fill' ? undefined : width
  };
  const animatedContainerStyle = useAnimatedStyle(() => usesAbsoluteLayout.value ? {
    // We need to override them to prevent react-native flex layout
    // positioning from interfering with our absolute layout
    alignContent: 'flex-start',
    alignItems: 'flex-start',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0
  } : {
    alignContent,
    alignItems,
    flexDirection,
    flexWrap,
    justifyContent
  });
  return /*#__PURE__*/_jsx(SortableContainer, {
    ...rest,
    containerStyle: [baseContainerStyle, animatedContainerStyle],
    itemStyle: styles.styleOverride,
    onLayout: runOnUI(handleContainerMeasurement)
  });
}
const styles = StyleSheet.create({
  styleOverride: {
    // This is needed to prevent items from stretching (which is default behavior)
    alignSelf: 'flex-start'
  }
});
export default SortableFlex;
//# sourceMappingURL=SortableFlex.js.map