313cd61ee3
* flare tag line height * . * dropdown fix + actions bar fix * actions bar on mob * . * css commented out * . * button fix * preload adjustments * tags * Fixed listings modal to make it semantic HTML via <dialog />. * Refactor an a11y fix. * Removed test that is no longer needed. * Added missing global function for test.. * Fixed broken <ListingFiltersCategories /> tests. * Refactor of mobile dropdown for listing categories. * Updated a TODO. * Made the clear query button a crayons Preact button. * padding * Fixed listings modal for accessiblilty. * Removed rspecs that are no longer valid. * We're no longer using the <dialog /> element, at least for now, so CSS changes aren't necessary. * Wasn't supposed to be committed. Co-authored-by: Nick Taylor <nick@dev.to> Co-authored-by: rhymes <rhymes@hey.com> Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
95 lines
2.6 KiB
JavaScript
95 lines
2.6 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { SingleListing } from '../singleListing/SingleListing';
|
|
import MessageModal from './MessageModal';
|
|
import { Button } from '@crayons';
|
|
|
|
const Modal = ({
|
|
currentUserId,
|
|
onAddTag,
|
|
onChangeDraftingMessage,
|
|
onClick,
|
|
onChangeCategory,
|
|
onOpenModal,
|
|
onSubmit,
|
|
listing,
|
|
message,
|
|
}) => {
|
|
const shouldRenderMessageModal = listing && listing.contact_via_connect;
|
|
|
|
const Icon = () => (
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
className="crayons-icon pointer-events-none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
|
</svg>
|
|
);
|
|
|
|
// TODO: Why are we not using the crayons modal component and instead recreating it here?
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
id="single-listing-container__inner"
|
|
className="single-listing-container__inner crayons-modal__box"
|
|
>
|
|
<div className="crayons-modal__box__header flex s:hidden">
|
|
<Button
|
|
type="button"
|
|
id="close-listing-modal"
|
|
tagName="button"
|
|
contentType="icon"
|
|
variant="ghost"
|
|
className="ml-auto"
|
|
icon={Icon}
|
|
onClick={onClick}
|
|
aria-label="Close listing"
|
|
/>
|
|
</div>
|
|
<div className="crayons-modal__box__body p-0">
|
|
<div className="p-3 m:p-6 l:p-8">
|
|
<SingleListing
|
|
onAddTag={onAddTag}
|
|
onChangeCategory={onChangeCategory}
|
|
listing={listing}
|
|
currentUserId={currentUserId}
|
|
onOpenModal={onOpenModal}
|
|
isOpen
|
|
/>
|
|
</div>
|
|
{shouldRenderMessageModal && (
|
|
<div className="bg-base-10 p-3 m:p-6 l:p-8">
|
|
<MessageModal
|
|
onSubmit={onSubmit}
|
|
onChangeDraftingMessage={onChangeDraftingMessage}
|
|
message={message}
|
|
listing={listing}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Modal.propTypes = {
|
|
listing: PropTypes.isRequired,
|
|
onAddTag: PropTypes.func.isRequired,
|
|
onChangeDraftingMessage: PropTypes.func.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
onChangeCategory: PropTypes.func.isRequired,
|
|
onOpenModal: PropTypes.func.isRequired,
|
|
onSubmit: PropTypes.func.isRequired,
|
|
currentUserId: PropTypes.number,
|
|
message: PropTypes.string.isRequired,
|
|
};
|
|
|
|
Modal.defaultProps = {
|
|
currentUserId: null,
|
|
};
|
|
|
|
export default Modal;
|