react-intl#RawIntlProvider TypeScript Examples

The following examples show how to use react-intl#RawIntlProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: I18nProvider.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
I18nProvider = observer(({children, rtlLayout}: I18nProviderProps) => {
  const mainStore = getMainStore()

  const getDirection = useCallback(() => {
    const rtlCondition = rtlLayout
      || localesStore.isRtlLayout(mainStore.locale);

    return rtlCondition ? 'rtl' : 'ltr';
  }, [rtlLayout, mainStore?.locale])

  const i18n = getI18n();

  if (!mainStore || !mainStore.locale) {
    return null;
  }

  return (
    <RawIntlProvider value={i18n}>
      <ConfigProvider
        locale={antdLocalesStore.antdLocaleMapping[mainStore.locale]}
        direction={getDirection()}
      >
        {children}
      </ConfigProvider>
    </RawIntlProvider>
  );
})
Example #2
Source File: parent_breadcrumbs.tsx    From website with Apache License 2.0 6 votes vote down vote up 
render(): JSX.Element {
    const num = this.props.parentPlaces.length;
    const breadcrumbs = this.props.parentPlaces.map((dcid, index) => {
      const name = this.props.names[dcid].split(",")[0];
      if (index === num - 1) {
        return <span key={dcid}>{name}</span>;
      }
      return (
        <React.Fragment key={dcid}>
          <LocalizedLink
            className="place-links"
            href={`/place/${dcid}`}
            text={name}
          />
          {index < num - 1 && <span>, </span>}
        </React.Fragment>
      );
    });
    return (
      <RawIntlProvider value={intl}>
        <FormattedMessage
          id="place_breadcrumb"
          description='Gives context for where this place is located. E.g. on the Tokyo place page, we say "{City} in {Japan, Asia}".'
          defaultMessage="{placeType} in {placeName}"
          values={{
            placeType: displayNameForPlaceType(this.props.placeType),
            placeName: breadcrumbs,
          }}
        />
      </RawIntlProvider>
    );
  }
Example #3
Source File: main_pane.tsx    From website with Apache License 2.0 5 votes vote down vote up 
render(): JSX.Element {
    const categoryData = this.props.pageChart[this.props.category];
    const isOverview = this.props.category === "Overview";
    const topics = Object.keys(categoryData);
    return (
      <RawIntlProvider value={intl}>
        {this.showOverview() && (
          <Overview dcid={this.props.dcid} locale={this.props.locale} />
        )}
        {topics.map((topic: string, index: number) => {
          if (isOverview) {
            return (
              <section className="block col-12" key={topic + index}>
                <ChartHeader
                  text={topic}
                  place={this.props.dcid}
                  isOverview={true}
                  categoryStrings={this.props.categoryStrings}
                />
                <div className="row row-cols-xl-3 row-cols-md-2 row-cols-1">
                  {categoryData[topic].map((data: ChartBlockData) => {
                    return this.renderChartBlock(data, this.props.category);
                  })}
                </div>
              </section>
            );
          } else {
            // For non overview page, each chart config makes a chart block,
            // The topic is only used for grouping, which is not displayed on
            // UI.
            return [
              topic && (
                <section
                  className="block topic-header col-12"
                  key={topic + index}
                >
                  <h2 id={topic} className="topic">
                    {topic}
                  </h2>
                </section>
              ),
              categoryData[topic].map((data: ChartBlockData, index) => {
                return (
                  <section className="block col-12" key={index + data.title}>
                    <ChartHeader
                      text={data.title}
                      place={this.props.dcid}
                      isOverview={false}
                      categoryStrings={this.props.categoryStrings}
                    />
                    <div className="row row-cols-xl-3 row-cols-md-2 row-cols-1">
                      {this.renderChartBlock(data, this.props.category)}
                    </div>
                  </section>
                );
              }),
            ];
          }
        })}
      </RawIntlProvider>
    );
  }