86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import { MouseEvent as ReactMouseEvent } from 'react';
|
|
import React, {
|
|
FC,
|
|
useCallback,
|
|
useMemo,
|
|
memo,
|
|
} from '../../../../lib/teact/teact';
|
|
import { getDispatch, withGlobal } from '../../../../lib/teact/teactn';
|
|
|
|
import { OwnProps as PhotoProps } from '../Photo';
|
|
import { OwnProps as VideoProps } from '../Video';
|
|
|
|
import buildClassName from '../../../../util/buildClassName';
|
|
import {
|
|
selectIsInSelectMode,
|
|
selectIsMessageSelected,
|
|
} from '../../../../modules/selectors';
|
|
|
|
type OwnProps =
|
|
PhotoProps
|
|
& VideoProps;
|
|
|
|
type StateProps = {
|
|
isInSelectMode?: boolean;
|
|
isSelected?: boolean;
|
|
};
|
|
|
|
export default function withSelectControl(WrappedComponent: FC) {
|
|
const ComponentWithSelectControl: FC<OwnProps & StateProps> = (props) => {
|
|
const {
|
|
isInSelectMode,
|
|
isSelected,
|
|
message,
|
|
dimensions,
|
|
} = props;
|
|
const { toggleMessageSelection } = getDispatch();
|
|
|
|
const handleMessageSelect = useCallback((e: ReactMouseEvent<HTMLDivElement, MouseEvent>) => {
|
|
e.stopPropagation();
|
|
toggleMessageSelection({ messageId: message.id, withShift: e?.shiftKey });
|
|
}, [toggleMessageSelection, message]);
|
|
|
|
const newProps = useMemo(() => {
|
|
return {
|
|
...props,
|
|
isInSelectMode,
|
|
isSelected,
|
|
dimensions: {
|
|
...props.dimensions,
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
onClick: isInSelectMode ? undefined : props.onClick,
|
|
};
|
|
}, [props, isInSelectMode, isSelected]);
|
|
|
|
return (
|
|
<div
|
|
className={buildClassName('album-item-select-wrapper', isSelected && 'is-selected')}
|
|
style={dimensions ? `left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''}
|
|
onClick={isInSelectMode ? handleMessageSelect : undefined}
|
|
>
|
|
{isInSelectMode && (
|
|
<div className="message-select-control">
|
|
{isSelected && (
|
|
<i className="icon-select" />
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
|
<WrappedComponent {...newProps} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return memo(withGlobal<OwnProps>(
|
|
(global, ownProps) => {
|
|
const { message } = ownProps;
|
|
return {
|
|
isInSelectMode: selectIsInSelectMode(global),
|
|
isSelected: selectIsMessageSelected(global, message.id),
|
|
};
|
|
},
|
|
)(ComponentWithSelectControl));
|
|
}
|