2019-10-22 10:18:01 +02:00
|
|
|
import React, { forwardRef } from 'react';
|
2019-10-18 15:27:45 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2019-10-22 10:18:01 +02:00
|
|
|
// import { FormattedMessage } from 'react-intl';
|
|
|
|
// import { Grab, Pencil, Remove } from '@buffetjs/icons';
|
2019-10-18 15:27:45 +02:00
|
|
|
|
2019-10-22 10:18:01 +02:00
|
|
|
// import pluginId from '../../pluginId';
|
|
|
|
// import PreviewCarret from '../PreviewCarret';
|
2019-10-18 15:27:45 +02:00
|
|
|
import Carret from './Carret';
|
|
|
|
import DraggedField from '../DraggedField';
|
|
|
|
import Wrapper from './Wrapper';
|
|
|
|
|
|
|
|
// eslint-disable-next-line react/display-name
|
|
|
|
const DraggedFieldWithPreview = forwardRef(
|
2019-10-22 10:18:01 +02:00
|
|
|
({ name, showLeftCarret, showRightCarret, size }, refs) => {
|
2019-10-18 15:27:45 +02:00
|
|
|
const isHidden = name === '_TEMP_';
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div style={{ width: `${(1 / 12) * size * 100}%` }}>
|
2019-10-22 10:18:01 +02:00
|
|
|
<Wrapper ref={refs.dropRef}>
|
2019-10-18 15:27:45 +02:00
|
|
|
{showLeftCarret && <Carret />}
|
|
|
|
|
|
|
|
<div className="sub">
|
|
|
|
<DraggedField
|
2019-10-22 10:18:01 +02:00
|
|
|
ref={refs.dragRef}
|
2019-10-18 15:27:45 +02:00
|
|
|
isHidden={isHidden}
|
|
|
|
name={name}
|
|
|
|
style={{ padding: 0, margin: 0 }}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{showRightCarret && <Carret right />}
|
|
|
|
</Wrapper>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2019-10-22 10:18:01 +02:00
|
|
|
DraggedFieldWithPreview.defaultProps = {
|
|
|
|
showLeftCarret: false,
|
|
|
|
showRightCarret: false,
|
|
|
|
size: 1,
|
|
|
|
};
|
|
|
|
|
|
|
|
DraggedFieldWithPreview.propTypes = {
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
showLeftCarret: PropTypes.bool,
|
|
|
|
showRightCarret: PropTypes.bool,
|
|
|
|
size: PropTypes.number,
|
|
|
|
};
|
|
|
|
|
2019-10-18 15:27:45 +02:00
|
|
|
export default DraggedFieldWithPreview;
|