react-intl#FormattedMessage TypeScript Examples

render() {
    const { lang, onSwitchLang } = this.props;
    const { data } = this.state;
    return (
      <div className='contributors'>
        <Header lang={lang} onSwitchLang={onSwitchLang} tab="contributors" />
        <div className='content'>
          <div className='title'><FormattedMessage id='contributors.title' /></div>
          <span className='subtitle'><FormattedMessage id='contributors.subtitle' /></span>
          <div className='list'>
            { data.map((org:any, index: number) => {
              return (
                <div className='org' key={index}>
                  <div className='org_name'>{lang == 'zh' ? org.name_zh : org.name_en }</div>
                  <div className='members'>
                    {org.members.map((member: any, i: number) => {
                      return (
                        <div className='member' key={i}>
                          <div className='member_avatar'>
                            <img src={member.avatar || "https://originalstatic.aminer.cn/misc/ncov/homepage/avatars/default.jpg"} />
                          </div>
                          <div className='member_name'>{lang=='zh' ? member.name_zh : member.name_en}</div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        <div className='footer'>
          © 2005-2020 AMiner 京ICP备17059297号-2
        </div>
      </div>
    )
  }

BtnTitle = ({value}: BtnTitleProps) => {
  const intl = useIntl();

  if (value == null || value.length === 0) {
    return (
      <span>
        <PlusOutlined />
        <FormattedMessage id='jmix.nestedEntityField.addEntities' />
      </span>
    );
  }

  return (
    <>
      {constructTitle(value, intl)}
    </>
  );
}

export default function ScreenShareHeader(props: Props) {
  const roster = useRoster();
  const { onClickStopButton } = props;
  return (
    <div className={cx('screenShareHeader')}>
      <button
        className={cx('stopButton')}
        type="button"
        onClick={onClickStopButton}
      >
        <FormattedMessage id="ScreenShareHeader.stopSharing" />
      </button>
      <div className={cx('description')}>
        {roster ? (
          <FormattedMessage
            id="ScreenShareHeader.online"
            values={{
              number: Object.keys(roster).length - 1
            }}
          />
        ) : (
          ` `
        )}
      </div>
    </div>
  );
}

export default function CurrentNewsPostNotice() {
  const [newsPost] = useApi(getCurrentNewsPost);

  if (newsPost == null) {
    return null;
  }

  return (
    <div className='news-post-notice'>
      <a href={newsPost.url}>
        <FormattedMessage
          defaultMessage='Click here to vote in the round of {roundName}!'
          description='[Submissions] Banner linked to news post of ongoing voting'
          values={{ roundName: newsPost.roundName }}
        />
      </a>
    </div>
  );
}

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>
    );
  }

public translate(translationId: string, params: object = {}): JSX.Element | string {
    try {
      const message = this.registry.get(translationId);

      return (
        <FormattedMessage
          id={message.translationId}
          defaultMessage={message.messages.get(this.getLang()).message}
          values={params}
        />
      );
    } catch (e) {
      return translationId;
    }
  }

DefaultError = (props: DefaultErrorProps) => {

  const [showingCode, setShowingCode] = useState<Boolean>(false);


  return (<ErrorSummary
    data-testid="default-error"
    aria-labelledby="error-summary-title"
    role="alert"
    tabIndex={-1}>
    <ErrorSummary.Title
      id="error-summary-title"
    >
      <FormattedMessage id="error.title"/>
    </ErrorSummary.Title>
    <ErrorSummary.Body>
    
      <p><FormattedMessage id="error.body" /></p>
      <ErrorSummary.List>
        <ErrorSummary.Item
          href="#example-error-1"
          onClick={() => setShowingCode(!showingCode)}>
          <FormattedMessage id="error.fix" />
        </ErrorSummary.Item>            
      </ErrorSummary.List>
      {showingCode && <FormattedMessage
        id="error.reference"
        values={{ eventId: props.eventId }} />}
    </ErrorSummary.Body>
  </ErrorSummary>);
}

export default function SimpleAccordion(props: any) {
  const classes = useStyles();
  const { tx } = props;

  return (
    <div className={classes.root}>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>
            <FormattedMessage id="Message to be signed" />
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <TXPreviewer tx={tx} />
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

render() {
    const label: string = this.state.detail ? this.state.detail.label : this.props.data.label;
    const desc: string = this.state.detail ? (this.state.detail.abstractInfo.enwiki || this.state.detail.abstractInfo.zhwiki || this.state.detail.abstractInfo.baidu || "") : "";
    const properties: any = this.state.detail ? (this.state.detail.abstractInfo.COVID && this.state.detail.abstractInfo.COVID.properties || null) : null;
    const relations: any[] = this.state.detail ? (this.state.detail.abstractInfo.COVID && this.state.detail.abstractInfo.COVID.relations || []) : [];
    return (
      <div className='entitypanel' onClick={() => this.props.onClose && this.props.onClose()}>
        <div className='panel' onClick={e => e.stopPropagation()}>
          <div className='left'>
          <div className='title'>{this.state.detail && <EntityFlag source={this.state.detail.source} />}<span>{label}</span></div>
            <div className='content'>
              {
                desc && (
                  <div>
                    <div className='head'><FormattedMessage id='entitypanel.desc' /></div>
                    <div className='desc' dangerouslySetInnerHTML={{__html: desc}}/>
                  </div>
                )
              }
              {
                !!relations.length && (
                  <div>
                    <div className='head'><FormattedMessage id='entitypanel.relations' /></div>
                    <div className='relations'>
                      {
                        relations.map((relation: any, index: number) => {
                          let forward: boolean = relation.forward == "True" || relation.forward == true;
                          return (
                            <div className='relation' key={index}>
                              <div className='name'>{relation.relation}</div>
                              <div className='direction'>{forward ? <ForwardSvg fill='palegreen' /> : <BackwardSvg fill='indianred' />}</div>
                              <div className='label'><Tooltip placement='top' title={relation.label}><div className='label_inner'>{relation.label}<div className='line' /></div></Tooltip></div>
                            </div>
                          )
                        })
                      }
                    </div>
                  </div>
                )
              }
              {
                properties && !!Object.keys(properties).length && (
                  <div>
                    <div className='head'><FormattedMessage id='entitypanel.properties' /></div>
                    {
                      Object.keys(properties).map((p: string, index: number) => {
                        return (
                          <div key={index}>
                            <div className='property'><span className='key'>{p}</span>{properties[p]}</div>
                          </div>
                        )
                      })
                    }
                  </div>
                )
              }
            </div>
          </div>
          <div className='right'>
            <div className='title'><FormattedMessage id='entitypanel.events' /></div>
            <div className='list'>
              { 
                this.state.relatedEvents.map((event: any, index: number) => {
                  return (
                    <div className='event' key={index} onClick={() => this.props.onOpenEvent && this.props.onOpenEvent(this.props.date || this.props.env.date, event)}>
                      <EventFlag lang={this.props.env.lang} type={event.type} category={event.category}/><span className='title'>{event.title}</span>
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
      </div>
    )
  }

HomePage = () => (
  <div>
    <FormattedMessage id="home.welcome" /> scr-jmix!
  </div>
)

function CopyMeetingPageComponent(props: CopyMeetingPageProps) {
  return (
    <>
      <Header />
      <Stack
        className="container"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <Stack.Item align="center" className="meetingCardContainer">
          <svg
            className="meetingSuccess"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 48 48"
          >
            <path
              d="M24 0c2.2 0 4.3.3 6.4.9 2 .6 3.9 1.4 5.7 2.4 1.8 1 3.4 2.3 4.9 3.8 1.5 1.5 2.7 3.1 3.8 4.9 1 1.8 1.8 3.7 2.4 5.7.6 2 .9 4.2.9 6.4s-.3 4.3-.9 6.3c-.6 2-1.4 3.9-2.4 5.7-1 1.8-2.3 3.4-3.8 4.9-1.5 1.5-3.1 2.7-4.9 3.8-1.8 1-3.7 1.9-5.7 2.4-2 .6-4.1.9-6.4.9-2.2 0-4.3-.3-6.3-.9-2-.6-3.9-1.4-5.7-2.4-1.8-1-3.4-2.3-4.9-3.8-1.5-1.5-2.7-3.1-3.8-4.9-1-1.8-1.9-3.7-2.4-5.7C.3 28.3 0 26.2 0 24s.3-4.3.9-6.4c.6-2 1.4-3.9 2.4-5.7 1-1.8 2.3-3.4 3.8-4.9 1.5-1.5 3.1-2.7 4.9-3.8 1.8-1 3.7-1.9 5.7-2.4S21.8 0 24 0zm7.9 17.1c-.6 0-1.2.2-1.6.7l-8.5 8.5-3-3c-.4-.4-1-.7-1.6-.7-.3 0-.6.1-.8.2-.3.1-.5.3-.7.5s-.4.4-.5.7c-.2.3-.2.5-.2.8 0 .6.2 1.2.7 1.6l4.6 4.6c.4.4 1 .7 1.6.7.6 0 1.2-.2 1.6-.7l10.1-10.1c.4-.5.7-1 .7-1.6 0-.3-.1-.6-.2-.8-.1-.3-.3-.5-.5-.7s-.4-.4-.7-.5c-.4-.2-.7-.2-1-.2z"
              fill="#599c00"
            />
          </svg>

          <Text block variant="xLarge" className="meetingCardHeader">
            <FormattedMessage id="copyMeetingPage.header" />
          </Text>
          <div
            className="meetingCardBody"
            id="copy"
            dangerouslySetInnerHTML={{ __html: props.meeting?.preview ?? '' }}
          />
          <PrimaryButton
            className="teamsButton copyButton"
            onClick={() => props.onCopyToClipboard(props.meeting)}
            ariaLabel={translate('copyMeetingPage.copy.ariaLabel')}
          >
            <FormattedMessage id="copyMeetingPage.copy" />
          </PrimaryButton>
        </Stack.Item>
      </Stack>
    </>
  );
}

export function ProtectedRoute(props: ProtectedRouteProps) {
  const authUser = useOsuAuth().user;
  useTitle(
    authUser == null
      ? 'Unauthenticated'
      : props.role != null && !hasRole(authUser, props.role)
      ? 'Unauthorized'
      : null,
  );

  return (
    <Route
      {...props}
      children={undefined}
      component={undefined}
      render={() => {
        if (authUser == null) {
          return (
            <FormattedMessage
              defaultMessage="I don't know who you are! Try <a>logging in</a> first."
              description='[Errors] Error message shown when trying to view a protected page before logging in'
              tagName='p'
              values={{
                a: (c: string) => <a href={loginUrl}>{c}</a>,
              }}
            />
          );
        }

        if (props.role == null || hasRole(authUser, props.role)) {
          return props.children;
        }

        return (
          <FormattedMessage
            defaultMessage="You aren't cool enough to see this page."
            description='[Errors] Error message shown when logged in but not having permission to view a page'
            tagName='p'
          />
        );
      }}
    />
  );
}

export default function ListPage() {
  const { formatMessage } = useIntl();

  return (
    <>
      <Title>{formatMessage({ defaultMessage: 'Page Result 页面结果' })}</Title>
      <Description>
        {formatMessage({
          defaultMessage: '用于反馈一系列操作任务的处理结果',
        })}
      </Description>
      <Subtitle>
        <FormattedMessage defaultMessage="使用场景" />
      </Subtitle>
      <Description>
        {formatMessage({
          defaultMessage: '当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。',
        })}
      </Description>
      <Subtitle>
        <FormattedMessage defaultMessage="设计稿" />
      </Subtitle>
      <Figma
        height="30%"
        collapsable
        url="https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GIO-Design?node-id=4093%3A45839"
      />

      <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>

      <Subheading>{formatMessage({ defaultMessage: '样例展示' })}</Subheading>
      <Canvas>
        <Story id="upgraded-page--demo" />
      </Canvas>
      <Subheading>{formatMessage({ defaultMessage: '无权限' })}</Subheading>
      <Canvas>
        <Story id="upgraded-page--no-auth" />
      </Canvas>

      <Subheading>{formatMessage({ defaultMessage: '无资源权限' })}</Subheading>
      <Canvas>
        <Story id="upgraded-page--no-resource" />
      </Canvas>

      <Subheading>{formatMessage({ defaultMessage: '无共享' })}</Subheading>
      <Canvas>
        <Story id="upgraded-page--no-shared" />
      </Canvas>
      <Subheading>{formatMessage({ defaultMessage: '404 此页面未找到' })}</Subheading>
      <Canvas>
        <Story id="upgraded-page--not-found" />
      </Canvas>

      <Subheading>{formatMessage({ defaultMessage: '500 服务器发生了错误' })}</Subheading>
      <Canvas>
        <Story id="upgraded-page--internal-server-error" />
      </Canvas>

      <Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>
      <ArgsTable of={Page} />
    </>
  );
}

useOrganizationInvites = (): IOrganizationInvitesHookResult => {
    const intl = useIntl()
    const AcceptMessage = intl.formatMessage({ id: 'Accept' })
    const RejectMessage = intl.formatMessage({ id: 'Reject' })
    const DoneMessage = intl.formatMessage({ id: 'OperationCompleted' })
    const ServerErrorMessage = intl.formatMessage({ id: 'ServerError' })
    const { user } = useAuth()
    const { selectLink } = useOrganization()
    const { objs: userInvites, refetch, loading } = OrganizationEmployee.useObjects(
        { where: user ? { user: { id: user.id }, isAccepted: false, isRejected: false, isBlocked: false } : {} },
    )
    const { addNotification } = useLayoutContext()
    const [acceptOrReject] = useMutation(ACCEPT_OR_REJECT_ORGANIZATION_INVITE_BY_ID_MUTATION)
    const handleAcceptOrReject = async (item, action) => {
        let data = {}
        if (action === 'accept') {
            data = { isAccepted: true, isRejected: false }
        } else if (action === 'reject') {
            data = { isAccepted: false, isRejected: true }
        } else if (action === 'leave') {
            data = { isRejected: true }
        }
        const sender = getClientSideSenderInfo()
        try {
            await acceptOrReject({ variables: { id: item.id, data: { ...data, dv: 1, sender } } })
            notification.success({ message: DoneMessage })
        } catch (error) {
            notification.error({
                message: ServerErrorMessage,
                description: error.message,
            })
        }
        await refetch()
    }
    if (userInvites) {
        userInvites.forEach(invite => {
            addNotification({
                actions: [
                    {
                        action: () => handleAcceptOrReject(invite, 'reject'),
                        title: RejectMessage,
                        secondary: true,
                    },
                    {
                        action: () => handleAcceptOrReject(invite, 'accept').then(() => {
                            selectLink({ id: invite.id })
                        }),
                        title: AcceptMessage,
                    },
                ],
                message: (
                    <FormattedMessage
                        id='pages.users.InviteMessageTitle'
                        values={{
                            name: invite.organization.name,
                        }}
                    />
                ),
                type: 'success',
                id: `invite_${invite.id}`,
            })
        })
    }
    return {
        loading,
    }
}

innerForm = (props: any) => {
  const intl = useIntl();

  const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props;

  return (
    <Form
      className="export-mnemonic-key"
      id="export-mnemonic-key"
      onSubmit={handleSubmit}
      aria-label="form"
    >
      <TextField
        size="small"
        label={intl.formatMessage({ id: 'Password' })}
        name="password"
        type="password"
        id="password"
        fullWidth
        value={values.password}
        onChange={handleChange}
        onBlur={handleBlur}
        error={!!errors.password}
        helperText={errors.password && touched.password && errors.password}
        margin="normal"
        variant="outlined"
        data-testid="field-password"
      />

      {isSubmitting && (
        <div id="submitting">
          <FormattedMessage id="Submitting" />
        </div>
      )}
      <Button
        type="submit"
        id="submit-button"
        disabled={isSubmitting}
        color="primary"
        variant="contained"
        data-testid="submit-button"
      >
        <FormattedMessage id="Confirm" />
      </Button>
    </Form>
  );
}

render() {
    const regionInfo = this.props.regionInfo || {name_en: '', name_zh: ''}
    let fullName = this.props.env.lang === 'en' ? regionInfo.name_en : regionInfo.name_zh
    if (fullName === 'United States of America') fullName = "United States"
    else if (fullName === 'People\'s Republic of China') fullName = "China"
    fullName = fullName.replace('Republic', 'Rep.').replace('Democratic', 'Dem.')
    const ep = this.props.dayEp
    let active: number | undefined = ep ? ((ep.confirmed||0) - (ep.cured||0) - (ep.dead||0)) : undefined;
    let active_delta: number | undefined = ep ? ((ep.confirmed_delta||0) - (ep.cured_delta||0) - (ep.dead_delta||0)) : undefined;
    return (
      <div className='dashboard'>
        <div className='up'>
          <div className='left'>
            <DBBlock style={{width: `${this.props.env.isMobile ? this._leftWidth_m : this._leftWidth}px`, height: `${this._upHeight}px`}}>
              <div className='region'>{fullName}</div>
              <Tooltip 
                title={this.props.env.lang == 'zh' ? "风险指数" : "Risk Index"}
                placement='bottom'>
                <div className='risk'>
                  <div className='value' style={{color: risk2color(ep?.risk)}}>{displayNumber(ep?.risk)}</div>
                  <div className='title'>Risk Index</div>
                  <span className='tip' onClick={() => window.open("https://covid-dashboard.aminer.cn/algorithm/?lang="+this.props.env.lang)}><Tip_Svg /></span>
                </div>
              </Tooltip>
              <div className='mode-con'>
                <MapModeSelector mapMode={this.props.mapMode} onSetMapMode={this.props.onSetMapMode}/>
              </div>
            </DBBlock>
            <DBBlock style={{width: `${this.props.env.isMobile ? this._leftWidth_m : this._leftWidth}px`, height: `${this._timeHeight}px`}}>
              <div className='time'>{dateformat(this.props.env.date, "yyyy/mm/dd HH:MM:ss")}</div>
            </DBBlock>
          </div>
          { 
            !this.props.env.isMobile && (
              <div className='right'>
                <div className='rightup'>
                  <DBBlock style={{width: `${this._dataWidth}px`, height: `${this._rightupHeight}px`}}>
                    <Tooltip title={this.props.env.lang == 'zh' ? "累计确诊" : "Total Confirmed"} placement='top' >
                      <div>
                        <div className='data-delta' style={{color: 'lightsalmon'}}><i className="fas fa-plus"/><span className="agg">{displayNumber(ep?.confirmed_delta)}</span></div>
                        <div className='data' style={{color: 'red'}}><i className="fas fa-medkit"/><span className="agg">{displayNumber(ep?.confirmed)}</span></div>
                      </div>
                    </Tooltip>
                  </DBBlock>
                  <DBBlock style={{width: `${this._dataWidth}px`, height: `${this._rightupHeight}px`}}>
                    <Tooltip title={this.props.env.lang == 'zh' ? "现存确诊" : "Active"} placement='top' >
                      <div>
                        <div className='data-delta' style={{color: 'lightgoldenrodyellow'}}><i className="fas fa-plus"/><span className="agg">{displayNumber(active_delta)}</span></div>
                        <div className='data' style={{color: 'khaki'}}><i className="fas fa-diagnoses"/><span className="agg">{displayNumber(active)}</span></div>
                      </div>
                    </Tooltip>
                  </DBBlock>
                  <DBBlock style={{width: `${this._dataWidth}px`, height: `${this._rightupHeight}px`}}>
                    <Tooltip title={this.props.env.lang == 'zh' ? "治愈" : "Cured"} placement='top' >
                      <div>
                        <div className='data-delta' style={{color: 'palegreen'}}><i className="fas fa-plus"/><span className="agg">{displayNumber(ep?.cured_delta)}</span></div>
                        <div className='data' style={{color: 'lime'}}><i className="fas fa-star-of-life"/><span className="agg">{displayNumber(ep?.cured)}</span></div>
                      </div>
                    </Tooltip>
                  </DBBlock>
                  <DBBlock style={{width: `${this._dataWidth}px`, height: `${this._rightupHeight}px`}}>
                    <Tooltip title={this.props.env.lang == 'zh' ? "死亡" : "Dead"} placement='top' >
                      <div>
                        <div className='data-delta' style={{color: 'gainsboro'}}><i className="fas fa-plus"/><span className="agg">{displayNumber(ep?.dead_delta)}</span></div>
                        <div className='data' style={{color: 'darkgrey'}}><i className="fas fa-skull-crossbones"/><span className="agg">{displayNumber(ep?.dead)}</span></div>
                      </div>
                    </Tooltip>
                  </DBBlock>
                </div>
                <div className='rightdown'>
                  <DBBlock style={{width: `${this._riskWidth}px`, height: `${this._rightdownHeight}px`}}>
                    <div className='chart-con'>
                      <ReactEcharts option={this.riskOption()} style={{height: `${this._rightdownHeight-12}px`, width: '100%'}}/>
                      <div className='title'><FormattedMessage id='map.control.riskchart' /></div>
                    </div>
                  </DBBlock>
                  <div className='hot-btns' style={{width: `${this._dataWidth}px`, height: `${this._rightupHeight}`}}>
                    <Button className='hot-btn' onClick={() => this.props.onChangeHotRegion && this.props.onChangeHotRegion("beijing")}><FormattedMessage id="hot.beijing" /></Button>
                  </div>
                </div>
                <div className='rightsearch'>
                  <SearchBar lang={this.props.env.lang} width={this._riskWidth} height={this._rightupHeight} onSearch={this.handleSearch} onClose={this.handleSearchClose} />
                </div>
              </div>
            )
          }
        </div>
        { 
          this.state.searchResults && (
            <div className='searchresults'>
              <SearchResults 
                lang={this.props.env.lang} 
                date={this.props.env.date}
                data={this.state.searchResults} 
                defaultWidth={this._leftWidth+this._riskWidth+this._blockMargin} 
                maxHeight={document.body.offsetHeight-this._blockMargin*2-this._upHeight-220}
                onOpenEntity={this.props.onOpenEntity}
                onOpenEvent={this.props.onOpenEvent} />
            </div>
          )
        }
      </div>
    )
  }

AssociationM2MBrowserTable = observer(
  (props: EntityListProps<AssociationM2MTestEntity>) => {
    const {
      entityList,
      onEntityListChange,
      onSelectEntity,
      disabled: readOnlyMode
    } = props;
    const onOpenScreenError = useOpenScreenErrorCallback();
    const onEntityDelete = useEntityDeleteCallback();
    const {
      items,
      count,
      relationOptions,
      executeListQuery,
      listQueryResult: { loading, error },
      handleSelectionChange,
      handleFilterChange,
      handleSortOrderChange,
      handlePaginationChange,
      handleDeleteBtnClick,
      handleCreateBtnClick,
      handleCloneBtnClick,
      handleEditBtnClick,
      goToParentScreen,
      entityListState
    } = useEntityList<AssociationM2MTestEntity>({
      listQuery: SCR_ASSOCIATIONM2MTESTENTITY_LIST,
      entityName: ENTITY_NAME,
      routingPath: ROUTING_PATH,
      entityList,
      onEntityListChange,
      onPagination: saveHistory,
      onEntityDelete,
      onOpenScreenError,
      lazyLoading: true
    });

    const selectEntityHandler = useCallback(() => {
      if (onSelectEntity != null) {
        const selectedEntityInstance = items?.find(
          ({ id }) => id === entityListState.selectedEntityId
        );
        onSelectEntity(selectedEntityInstance);
        goToParentScreen();
      }
    }, [
      onSelectEntity,
      entityListState.selectedEntityId,
      goToParentScreen,
      items
    ]);

    useDefaultBrowserTableHotkeys({
      selectedEntityId: entityListState.selectedEntityId,
      handleCreateBtnClick,
      handleEditBtnClick,
      handleDeleteBtnClick
    });

    if (error != null) {
      console.error(error);
      return <RetryDialog onRetry={executeListQuery} />;
    }

    let buttons: ReactElement[] = [];
    if (onSelectEntity != null) {
      buttons = [
        <Button
          htmlType="button"
          style={{ margin: "0 12px 12px 0" }}
          icon={<LeftOutlined />}
          onClick={goToParentScreen}
          key="back"
          type="default"
          shape="circle"
        />,
        <Button
          htmlType="button"
          style={{ margin: "0 12px 12px 0" }}
          type="primary"
          disabled={entityListState.selectedEntityId == null}
          onClick={selectEntityHandler}
          key="selectEntity"
        >
          <span>
            <FormattedMessage id="common.selectEntity" />
          </span>
        </Button>
      ];
    } else if (!readOnlyMode) {
      buttons = [
        <EntityPermAccessControl
          entityName={ENTITY_NAME}
          operation="create"
          key="create"
        >
          <Button
            htmlType="button"
            style={{ margin: "0 12px 12px 0" }}
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleCreateBtnClick}
          >
            <span>
              <FormattedMessage id="common.create" />
            </span>
          </Button>
        </EntityPermAccessControl>,
        <EntityPermAccessControl
          entityName={ENTITY_NAME}
          operation="create"
          key="clone"
        >
          <Button
            htmlType="button"
            style={{ margin: "0 12px 12px 0" }}
            disabled={entityListState.selectedEntityId == null}
            type="default"
            onClick={handleCloneBtnClick}
          >
            <FormattedMessage id="common.clone" />
          </Button>
        </EntityPermAccessControl>,
        <EntityPermAccessControl
          entityName={ENTITY_NAME}
          operation="update"
          key="update"
        >
          <Button
            htmlType="button"
            style={{ margin: "0 12px 12px 0" }}
            disabled={entityListState.selectedEntityId == null}
            type="default"
            onClick={handleEditBtnClick}
          >
            <FormattedMessage id="common.edit" />
          </Button>
        </EntityPermAccessControl>,
        <EntityPermAccessControl
          entityName={ENTITY_NAME}
          operation="delete"
          key="delete"
        >
          <Button
            htmlType="button"
            style={{ margin: "0 12px 12px 0" }}
            disabled={entityListState.selectedEntityId == null}
            onClick={handleDeleteBtnClick}
            key="remove"
            type="default"
          >
            <FormattedMessage id="common.remove" />
          </Button>
        </EntityPermAccessControl>
      ];
    }

    if (entityList != null) {
      buttons.unshift(
        <Tooltip title={<FormattedMessage id="common.back" />} key="back">
          <Button
            htmlType="button"
            style={{ margin: "0 12px 12px 0" }}
            icon={<LeftOutlined />}
            onClick={goToParentScreen}
            key="back"
            type="default"
            shape="circle"
          />
        </Tooltip>
      );
    }

    return (
      <DataTable
        tableId={ROUTING_PATH + ENTITY_NAME}
        items={items}
        count={count}
        relationOptions={relationOptions}
        current={entityListState.pagination?.current}
        pageSize={entityListState.pagination?.pageSize}
        entityName={ENTITY_NAME}
        loading={loading}
        error={error}
        enableFiltersOnColumns={entityList != null ? [] : undefined}
        enableSortingOnColumns={entityList != null ? [] : undefined}
        columnDefinitions={["name"]}
        onRowSelectionChange={handleSelectionChange}
        onFilterChange={handleFilterChange}
        onSortOrderChange={handleSortOrderChange}
        onPaginationChange={handlePaginationChange}
        hideSelectionColumn={true}
        buttons={buttons}
        executeListQuery={entityList == null ? executeListQuery : undefined}
      />
    );
  }
)