NiceModalProps should let objects with id

[osrl]

NiceModalHocProps has a field named id. This is too common and prevents us to pass a type with id in it.

This is not possible:

NiceModal.create(
  (object: { id: string; foo: string }) => { ... }

I actually opened a PR for this #96. But closed it since it wasn't backward compatible.

To reproduce:

export const FoodModal = NiceModal.create(
  (arg: { id: string }) => {

    return (
      <div></div>
    );
  }
);

NiceModal.show(FoodModal, {id: "foo"}) // No overload matches this call

export const FoodModal = NiceModal.create(
  (arg: { fooId: string }) => {

    return (
      <div></div>
    );
  }
);

NiceModal.show(FoodModal, {fooId: "foo"}) // It's okay now

[supnate]

hmm, I remember calling modal.show(modal, args) can use any prop name.

[supnate]

Just tried and it works but with typescript error. Need to fix the type check of modal.show().

export const MyAntdModal = NiceModal.create(({ name , id}: { name: string, id: string }) => {
  const modal = useModal();
  return (
    <Modal title="Hello Antd" visible={modal.visible} onOk={modal.hide} onCancel={modal.hide} afterClose={modal.remove}>
      Greetings: {name} ({id})!
    </Modal>
  );
});

export default function AntdSample() {
  return (
    <Space>
      <Button type="primary" onClick={() => {
        //@ts-ignore
        NiceModal.show(MyAntdModal, { name: 'Nate', id: 'nateid' })}
      }>
        Show Modal
      </Button>
    </Space>
  );
}

[czkoudy]

Hi @supnate any luck with this?

[supnate]

Type check now fixed in v1.2.12. You can use id prop now.

[chj-damon]

@supnate I'm using 1.2.13 and still facing the same problem. typescript still reports error because I passed id prop as number type