L
L
Leonid Shishkin2019-07-16 10:12:26
React
Leonid Shishkin, 2019-07-16 10:12:26

Can I call action from react-yandex-map balloon?

The Balloon component is rendered using renderToStaticMarkup, so it is not possible to call any actions in the balloon. Is there a way to somehow display components in the react-yandex-map balloon in a different way so that it is possible to display not static html, but a normal react component?

const getPointData = (
  store: IEshopStore,
  cart,
  remnants,
  SetOpenedStore,
  openedStores,
  storeClickAction
): IPlacemarkProperties => {
  return {
    balloonContent: renderToStaticMarkup(
      Baloon({
        store,
        cart,
        remnants,
        SetOpenedStore,
        openedStores,
        storeClickAction,
      })
    ),
    clusterCaption: `
        <div>
          <p>${store.name} - ${store.param.street || ''}</p>
        </div>
      `,
    hintContent: store.param.street,

  };
};

export const generatePlaceMarks = (
  stores: IEshopStore[],
  cart,
  remnants,
  SetOpenedStore,
  openedStores,
  storeClickAction
): IPlacemark[] => {
  return stores.map(store => {
    const { storeCategoryType, isJevelStore } = store.param;
    const name = getPlacemarkIconName(storeCategoryType, isJevelStore);
    return {
      type: 'Feature',
      id: +store.IStoreId,
      storeType: storeCategoryType,
      geometry: store.param.location,
      properties: getPointData(
        store,
        cart,
        remnants,
        SetOpenedStore,
        openedStores,
        storeClickAction
      ),
      options: {
        iconLayout: 'default#image',
        iconImageHref: `${path}/static/img/placemark-${name}.svg`,
        iconImageSize: isJevelStore ? [42, 42] : [21, 42],
        // iconImageOffset: [-15, -44],
      },

    };
  });
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question