Нестандартный подход в разработке: как мы интегрировали React с «Битрикс»

			import React, { FC, useState } from 'react';

import {
  closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors
} from '@dnd-kit/core';

import {
  arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable
} from '@dnd-kit/sortable';

import { CSS } from '@dnd-kit/utilities';

import { LibraryPlaylist } from '@/api/Library/libraryPlaylists';

import PlaylistEditTile
  from '@/ui/components/Library/Playlists/PlaylistsEditTilesList/PlaylistsEditTile/PlaylistEditTile';

import styles from './PlaylistsEditTilesList.module.scss';

interface PlaylistsEditTilesListProps {
  sortedPlaylists: LibraryPlaylist[];
  setSortedPlaylists: (playlists: LibraryPlaylist[]) => void;
}

const SortableItem = (props: {
  id?: any;
  playlist?: any;
  style?: any;
  disableDrag?: boolean;
  setDisableDrag?: any;
}) => {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
	id: props.id,
	disabled: props.disableDrag
  });

  const { playlist, style } = props;
  
  const innerStyle = {
	transform: CSS.Transform.toString(transform),
	transition,
	...style
  };

  return (
	<PlaylistEditTile
  	innerStyle={innerStyle}
  	setNodeRef={setNodeRef}
  	key={playlist.id}
  	width={'100%'}
  	height={'100%'}
  	attributes={attributes}
  	listeners={listeners}
  	playlist={playlist}
  	setDisableDrag={props.setDisableDrag}
	/>
  );
};

const PlaylistsEditTilesList: FC<PlaylistsEditTilesListProps> = ({
  sortedPlaylists,
  setSortedPlaylists
}) => {
  const [disableDrag, setDisableDrag] = useState(false);
  const sensors = useSensors(
	useSensor(PointerSensor, {
  	activationConstraint: {
    	distance: 10
  	}
	}),
	useSensor(KeyboardSensor, {
  	coordinateGetter: sortableKeyboardCoordinates
	})
  );
  const handleDragEnd = (event: { active: any; over: any }) => {
	const { active, over } = event;
	if (active.id !== over.id) {
  	const oldIndex = sortedPlaylists.findIndex((playlist) => playlist.id === active.id);
  	const newIndex = sortedPlaylists.findIndex((playlist) => playlist.id === over.id);
  	const newArray = arrayMove(sortedPlaylists, oldIndex, newIndex);
  	setSortedPlaylists(newArray);
	}
  };

  return (
	<>
  	<DndContext
    	sensors={sensors}
    	collisionDetection={closestCenter}
    	onDragEnd={handleDragEnd}
    	autoScroll={false}
  	>

    	<SortableContext
      	items={sortedPlaylists}
      	strategy={rectSortingStrategy}
    	>
    	
      	<div className={styles.container}>
        	{sortedPlaylists.map((playlist) => (
          	<SortableItem
            	playlist={playlist}
            	key={playlist.id}
            	id={playlist.id}
            	disableDrag={disableDrag}
            	setDisableDrag={setDisableDrag}
          	/>
        	))}
      	</div>
    	</SortableContext>
  	</DndContext>
	</>
  );
};

export default PlaylistsEditTilesList;
		

			import { FC, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import classNames from 'classnames';
import { fadeInStyle, useOpacity } from '@/utils/useOpacity';
import PlayerPopupActionButtons from './components/PlayerPopupActionButtons/PlayerPopupActionButtons';
import PlayerPopupSizeButtons from './components/PlayerPopupSizeButtons/PlayerPopupSizeButtons';
import styles from './PlayerSettingsPopup.module.scss';
import { RootState } from '@/store/types';

interface PlayerSettingsPopupProps {
  buttonRef: React.RefObject<HTMLButtonElement>;
  setIsPopupOpen: (isPopupOpen: boolean) => void;
  isInitialPage: boolean;
  isPlayerSmall: boolean;
  setIsPlayerSmall: (isPlayerSmall: boolean) => void;
  trackId: string;
}

const PlayerSettingsPopup: FC<PlayerSettingsPopupProps> = ({
  buttonRef,
  setIsPopupOpen,
  trackId,
  isPlayerSmall,
  setIsPlayerSmall,
}) => {
  const isLightTheme = useSelector<RootState, boolean>((state) => state.appState.isLightTheme);
  const position = buttonRef.current?.getBoundingClientRect();
  const heightRef = useRef<HTMLDivElement>(null);
  const heightShift = heightRef.current?.clientHeight;
  const [isClosing, setIsClosing] = useState(false);
  const handleClose = (e: any) => {
	if (e.target === e.currentTarget) {
  	setIsClosing(true);
  	setTimeout(() => {
    	setIsPopupOpen(false);
  	}, 200);
	}
  };
  const opacity = useOpacity();
  return (
	<div
  	style={{
    	...fadeInStyle(opacity, 0),
  	}}
  	className={classNames(styles.container, {
    	[styles.light]: isLightTheme,
    	[styles.closing]: isClosing,
  	})}

  	onClick={handleClose}
	>
  	<div
    	style={{
      	position: 'absolute',
      	top: (position?.top || 0) - (heightShift || 0),
      	left: (position?.left || 0) + 30,
    	}}
    	ref={heightRef}
  	>

    	<PlayerPopupActionButtons
      	trackId={trackId}
      	show={true /*!isInitialPage*/}
      	close={() => setIsPopupOpen(false)}
    	/>

    	<PlayerPopupSizeButtons isPlayerSmall={isPlayerSmall} setIsPlayerSmall={setIsPlayerSmall} />
  	</div>
	</div>
  );
};

export default PlayerSettingsPopup;