i18next#TFunction TypeScript Examples

export function expandEndpoint (t: TFunction, input: EndpointOption): LinkOption[] {
  const { dnslink, genesisHash, info, isChild, isDisabled, linked, paraId, providers, text } = input;
  const base = {
    genesisHash,
    info,
    isChild,
    isDisabled,
    paraId,
    text
  };

  const result = Object.entries(providers).map(([host, value], index): LinkOption => ({
    ...base,
    dnslink: index === 0 ? dnslink : undefined,
    textBy: t('rpc.hosted.by', 'hosted by {{host}}', { ns: 'apps-config', replace: { host } }),
    value
  }));

  if (linked) {
    const last = result[result.length - 1];
    const options: LinkOption[] = [];

    linked.forEach((o) => options.push(...expandEndpoint(t, o)));
    last.linked = options;
  }

  return expandLinked(result);
}

realmValidations = (t: TFunction): RealmValidations => ({
    name: {
        required: t<string>("manage.realm.name-must-not-be-empty"),
    },
    path: {
        required: t<string>("manage.realm.path-must-not-be-empty"),
        // See the comment about path segments in the realm migration
        // for an explanation of these validations.
        // Note that these two places should be kept in sync!
        validate: pathSegment => match(checkPathSegment(pathSegment), {
            "valid": () => true as true | string,
            "too-short": () => t<string>("manage.realm.path-too-short"),
            "control-char": () => t<string>("manage.realm.no-control-in-path"),
            "whitespace": () => t<string>("manage.realm.no-space-in-path"),
            "illegal-chars": () => t<string>("manage.realm.illegal-chars-in-path",
                { illegalChars: ILLEGAL_CHARS }),
            "reserved-chars-at-beginning": () => t<string>("manage.realm.reserved-char-in-path",
                { reservedChars: RESERVED_CHARS }),
        }),
        // TODO: check if path already exists
    },
})

shareApp = async (t: TFunction) => {
  const url = t('links:l');
  try {
    await Share.share(
      {
        title: t('common:shareMessage'),
        message: Platform.OS === 'android' ? url : undefined,
        url
      },
      {
        subject: t('common:name'),
        dialogTitle: t('common:name')
      }
    );
  } catch (error) {}
}

StickyHeader: React.FC<{
  stickyStep: string;
  items: Row[];
  timeline: TimelineMetrics;
  t: TFunction;
  onToggle: () => void;
  dragging: boolean;
}> = ({ stickyStep, items, timeline, onToggle, t, dragging }) => {
  const item = items.find((item) => item.type === 'step' && item.data.step_name === stickyStep);

  if (!item || item.type !== 'step') return null;

  return (
    <TimelineRow item={item} isOpen={true} timeline={timeline} onOpen={onToggle} t={t} dragging={dragging} sticky />
  );
}

getLocalizedPostTypes = (localize: TFunction): Array<IPostType> => {
    return Resources.postTypes.map((value: IPostType) => {
        switch (value.id) {
            case "1":
                value.name = localize("notStartedStatus");
                return value;
            case "2":
                value.name = localize("activeStatus");
                return value;
            case "3":
                value.name = localize("blockedStatus");
                return value;
            case "4":
                value.name = localize("closedStatus");
                return value;
            default:
                return value;
        }
    });
}

tabsArr = ({ t }: { t: TFunction }) => [
  {
    key: tabs.HOME,
    label: t("home.name"),
    component: <Home />,
    icon: <HomeIcon />,
  },
  {
    key: tabs.TRAVEL_RECORD,
    label: t("travel_record.name"),
    component: <TravelRecord />,
    icon: <PlaceIcon />,
  },
  {
    key: tabs.BOOKMARK,
    label: t("bookmark.name"),
    component: <Bookmark />,
    icon: <BookmarkIcon />,
  },
  {
    key: tabs.SETTINGS,
    label: t("setting.name"),
    component: <Settings />,
    icon: <SettingsIcon />,
  },
]

export function createCustom (t: TFunction): LinkOption[] {
  const WS_URL = (
    (typeof process !== 'undefined' ? process.env?.WS_URL : undefined) ||
    (typeof window !== 'undefined' ? (window as EnvWindow).process_env?.WS_URL : undefined)
  );

  return WS_URL
    ? [
      {
        isHeader: true,
        text: t('rpc.custom', 'Custom environment', { ns: 'apps-config' }),
        textBy: '',
        value: ''
      },
      {
        info: 'WS_URL',
        text: t('rpc.custom.entry', 'Custom {{WS_URL}}', { ns: 'apps-config', replace: { WS_URL } }),
        textBy: WS_URL,
        value: WS_URL
      }
    ]
    : [];
}

tableColumnsTenant = (t: TFunction) => [
  {
    accessor: 'clientId',
    Header: t('common.clientId'),
    sortable: true,
    Cell: getApiTokensTableCells('clientId'),
  },
  {
    accessor: 'description',
    Header: t('common.description'),
    sortable: true,
    Cell: getApiTokensTableCells('Description'),
  },
  {
    accessor: 'createdByUserId',
    Header: t('common.createdBy'),
    sortable: true,
    Cell: getApiTokensTableCells('createdByUserId'),
  },
  {
    accessor: 'createdAt',
    Header: t('common.createdAt'),
    sortable: true,
    Cell: getApiTokensTableCells('createdAt'),
  },
  {
    id: 'actions',
    minWidth: '3.25rem',
    maxWidth: '3.25rem',
    Cell: ApiTokensActions,
  },
]

/**
 * fork from i18next/react-i18next/-/blob/src/useTranslation.js
 * i18n for react 使用hooks
 */
export function useTranslation() {
  const { t: i18nT, ready } = useI18NTranslation();

  const [_t, _setT] = useState<TFunction>(() => t);
  useEffect(() => {
    _setT(
      () =>
        (...args: any[]) =>
          (t as any)(...args)
    );
  }, [i18nT]);

  return { t: _t, ready };
}

function getPromptContent(t: TFunction, step: number) {
  switch (step) {
    case 1:
      return (
        <H3>
          {t(
            'Waiting for user to click ALLOW button on screen sharing device...'
          )}
        </H3>
      );
    case 2:
      return <H3>{t('Connected!')}</H3>;
    case 3:
      return (
        <H3>
          {t(
            'Waiting for user to select source to share from screen sharing device...'
          )}
        </H3>
      );
    default:
      return <H3>{`${t('Error occurred')} :(`}</H3>;
  }
}

getFormikValidate = (t: TFunction) => (values: { name: string; price: number }) => {
	const errors: FormikErrors<{ name: string; price: number }> = {};
	if (!values.name) {
		errors.name = t('material_name_empty');
	}
	if (!values.price) {
		errors.price = t('material_price_empty');
	}
	return errors;
}

getUpdatedUserParties = async (
    dispatch: Dispatch<AppAction>,
    t: TFunction
): Promise<ClientParty[]> => {
    try {
        const response = await Axios.get('/api/userParties', axiosConfig());

        if (response.data.success) {
            dispatch(
                setGlobalState({
                    userParties: response.data.userParties
                })
            );

            return Promise.resolve(response.data.userParties);
        } else {
            dispatch(
                setGlobalState({
                    errorMessage: t(`apiResponseMessages.${response.data.msg}`)
                })
            );

            return Promise.reject(new Error('Not successful'));
        }
    } catch (error) {
        dispatch(
            setGlobalState({
                errorMessage: t(`errors.userPartyFetchError`)
            })
        );
        return Promise.reject(error);
    }
}

function renderExtended({ address, balancesAll, withExtended }: Props, t: TFunction): React.ReactNode {
  const extendedDisplay = withExtended === true ? DEFAULT_EXTENDED : withExtended || undefined;

  if (!extendedDisplay) {
    return null;
  }

  return (
    <div className="column">
      {balancesAll && extendedDisplay.nonce && (
        <>
          <Label label={t<string>('transactions')} />
          <div className="result">{formatNumber(balancesAll.accountNonce)}</div>
        </>
      )}
      {extendedDisplay.crypto && (
        <>
          <Label label={t<string>('type')} />
          <CryptoType accountId={address} className="result" />
        </>
      )}
    </div>
  );
}

localize: TFunction;