2020-03-09 16:49:12 +01:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2020-03-03 16:40:02 +01:00
|
|
|
|
2020-03-09 16:49:12 +01:00
|
|
|
import CardPreview from '../CardPreview';
|
2020-03-24 00:11:16 +01:00
|
|
|
import InputModalStepper from '../../containers/InputModalStepper';
|
2020-03-09 16:49:12 +01:00
|
|
|
import Name from './Name';
|
2020-03-24 00:11:16 +01:00
|
|
|
import CardPreviewWrapper from './CardPreviewWrapper';
|
2020-03-23 16:24:26 +01:00
|
|
|
import Wrapper from './Wrapper';
|
2020-03-03 16:40:02 +01:00
|
|
|
|
2020-03-09 16:49:12 +01:00
|
|
|
const InputMedia = ({ label, onChange, name, attribute }) => {
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const handleClickToggleModal = () => {
|
|
|
|
setIsModalOpen(prev => !prev);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2020-03-24 00:11:16 +01:00
|
|
|
<Wrapper>
|
2020-03-09 16:49:12 +01:00
|
|
|
<Name htmlFor={name}>{label}</Name>
|
2020-03-24 00:11:16 +01:00
|
|
|
<CardPreviewWrapper onClick={handleClickToggleModal}>
|
2020-03-09 16:49:12 +01:00
|
|
|
<CardPreview url="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" />
|
2020-03-24 00:11:16 +01:00
|
|
|
</CardPreviewWrapper>
|
2020-03-09 16:49:12 +01:00
|
|
|
|
|
|
|
{isModalOpen && (
|
2020-03-24 00:11:16 +01:00
|
|
|
<InputModalStepper
|
2020-03-09 16:49:12 +01:00
|
|
|
isOpen={isModalOpen}
|
2020-03-23 16:24:26 +01:00
|
|
|
multiple={attribute.multiple}
|
2020-03-24 00:11:16 +01:00
|
|
|
onInputMediaChange={onChange}
|
2020-03-09 16:49:12 +01:00
|
|
|
onToggle={handleClickToggleModal}
|
|
|
|
/>
|
|
|
|
)}
|
2020-03-24 00:11:16 +01:00
|
|
|
</Wrapper>
|
2020-03-09 16:49:12 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
InputMedia.propTypes = {
|
|
|
|
attribute: PropTypes.shape({
|
|
|
|
multiple: PropTypes.bool,
|
|
|
|
required: PropTypes.bool,
|
2020-03-23 16:24:26 +01:00
|
|
|
type: PropTypes.string,
|
2020-03-09 16:49:12 +01:00
|
|
|
}).isRequired,
|
2020-03-23 16:24:26 +01:00
|
|
|
label: PropTypes.string,
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
onChange: PropTypes.func.isRequired,
|
2020-03-09 16:49:12 +01:00
|
|
|
};
|
|
|
|
InputMedia.defaultProps = {
|
|
|
|
label: '',
|
2020-03-03 16:40:02 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default InputMedia;
|