How to Use with Semantic UI React?

[becauseinterwebs]

Not really a bug, and not really a feature request .. ;)

I can't get the modal or dropdown working with Semantic UI React components:

import { Button, Modal } from 'semantic-ui-react';
import AddToCalendarHOC from 'react-add-to-calendar-hoc';

const startDatetime = moment().utc().add(2, 'days');
        const endDatetime = startDatetime.clone().add(2, 'hours');
        const duration = moment.duration(endDatetime.diff(startDatetime)).asHours();
        const e = {
            description: 'Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.',
            duration,
            endDatetime: endDatetime.format('YYYYMMDDTHHmmssZ'),
            location: 'NYC',
            startDatetime: startDatetime.format('YYYYMMDDTHHmmssZ'),
            title: 'Super Fun Event',
        }

const AddToCalendarModal = AddToCalendarHOC(Button, Modal);

<AddToCalendarModal event={e}/>

The modal does not open on button click, and using dropdown created a React.children error:

React.Children.only expected to receive a single React element child.

So just wondering how to implement this with Semanti UI React components?

Thank you!

[SalahAdDin]

Actually, I have the same problem with Material UI, i don't understand why.

[SalahAdDin]

@jasonleibowitz I can't get a model(from materialUI) to be rendered, can you make a codepen or something explaining it? Thanks.

[jasonleibowitz]

Here is a Code Sandbox example for using this with material-ui. I think both of your issues are related.

You can't just pass in the Modal directly imported from the library into this HOC because, for instance, the Material UI Modal expects content inside of it and that doesn't happen automatically. Instead, you should create a wrapper around the Material UI Modal that passes children, the add to calendar content, into it:

// components/ModalWrapper.js

import { Modal } from '@materia-ui/core';

export default function ModalWrapper({ children, isOpen, handleCloseModal }) {
  return (
    <Modal open={isOpen} onClose={handleCloseModal}>
      {children}
    </Modal>
  );
}

That should solve your problem.

[SalahAdDin]

Well, i am doing this:

  const AddLink = () => {
    return (
      <Link
        // onClick={handleOnClick}
        style={{ cursor: "pointer", textDecoration: "none" }}
      >
        <PlusIcon style={{ marginRight: 20 }} />
        <Typography component="span" className={clsx(classes.typho, classes.pink)}>
          {t("event.add.calendar.link")}
        </Typography>
      </Link>
    )
  }

  const AddToCalendarDropdown = AddToCalendarHOC(AddLink, Dropdown)

But... i'mt not sure, it seems clicking in the link does not change its state. Why?

[jasonleibowitz]

If you look at the examples in the docs your Button component needs to accept both onClick and children props:

const AddLink = ({ children, onClick }) => {
  return (
    <Link
      onClick={onClick}
    >
      <PlusIcon />
      <Typography component="span">{t("event.add.calendar.link")}</Typography>
    </Link>
  );
};

That should work. If it doesn't, why don't you create a code sandbox to debug?

[jasonleibowitz]

Closed as non-actionable.