import { type PrimitiveType, type MessageDescriptor as ReactIntlMessageDescriptor } from 'react-intl'; import { locales } from './locales'; import type { FormatXMLElementFn, Options as IntlMessageFormatOptions } from 'intl-messageformat'; type Messages = Record; type MessageDescriptor = Omit & { id: T; defaultText: (typeof locales.ja)[T]; }; type DatePart = 'year' | 'month' | 'day' | 'weekday'; export type FormatDateProps = { /** * フォーマット対象の日付 */ date: Date; /** * 表示する日付のパーツ。指定しない場合は全て表示 */ parts?: readonly [DatePart, ...DatePart[]]; /** * フォーマットオプション */ options?: Intl.DateTimeFormatOptions & { /** * 日本語ロケールでスラッシュを無効化し、月を長形式で表示する * @example * // 通常: "2025/01" * // disableSlashInJa: true の場合: "2025年1月" */ disableSlashInJa?: boolean; /** * 最初の文字を大文字化する * @example * // 通常: "seg." (pt) * // capitalizeFirstLetter: true の場合: "Seg." (pt) */ capitalizeFirstLetter?: boolean; }; }; /** * useIntlフックの戻り値の型定義 */ export type UseIntlReturn = { /** 利用可能なロケールのリスト */ availableLocales: string[]; /** メッセージのローカライズ関数 */ localize: (descriptor: MessageDescriptor, values?: Record>, opts?: IntlMessageFormatOptions) => string; /** * 日付をロケールに応じた形式でフォーマットする関数 * @param props - フォーマットのオプション * @param props.date - フォーマット対象の日付 * @param props.parts - 表示する日付のパーツ。デフォルトは ['year', 'month', 'day', 'weekday'] * @param props.options - フォーマットオプション * @param props.options.disableSlashInJa - 日本語ロケールでスラッシュを無効化し、月を長形式で表示する * @param props.options.capitalizeFirstLetter - 最初の文字を大文字化する * @returns フォーマットされた日付文字列 * @example * // 基本的な使用法(ロケールのデフォルト形式:曜日なし) * formatDate({ date: new Date() }) // "2024/01/15" (ja) * * // 日付を曜日ありで表示 * formatDate({ date: new Date(), parts: ['year', 'month', 'day', 'weekday'] }) // "2024/01/15(水)" (ja) * * // 特定のフィールドのみ表示 * formatDate({ date: new Date(), parts: ['year', 'month'] }) // "2024/01" (ja) * formatDate({ date: new Date(), parts: ['weekday'] }) // "月" (ja) * * // 日本語でスラッシュを無効化(月を長形式で表示) * formatDate({ date: new Date(), parts: ['year', 'month'], options: { disableSlashInJa: true } }) // "2024年1月" (ja) * * // 最初の文字を大文字化 * formatDate({ date: new Date(), parts: ['weekday'], options: { capitalizeFirstLetter: true } }) // "Seg." (pt)(指定しなければ "seg.") */ formatDate(props: FormatDateProps): string; /** * 現在のロケールに基づいて週の開始日を決定する関数 * Intl.Locale.prototype.getWeekInfo()の動作を再現 * getWeekInfo()を使わない理由は、Firefoxでは動作しないため * * @returns 週の開始日(0 = 日曜日, 1 = 月曜日, ..., 6 = 土曜日) */ getWeekStartDay: () => number; /** 現在のロケール */ locale: keyof typeof locales; }; /** * 多言語化機能を提供するフック * react-intlをベースにした国際化機能を提供します * * @returns {UseIntlReturn} 国際化に関連する関数とプロパティを含むオブジェクト * @example * // 基本的な使用法(メッセージのローカライズ) * const Component = () => { * const { localize } = useIntl() * return {localize({ id: 'smarthr-ui/common/language', defaultText: '日本語' })} * } * * @example * // 日付のフォーマット * const Component = () => { * const { formatDate } = useIntl() * return {formatDate({ date: new Date() })} // "2024/01/15" (ja) * } * * @example * // 利用可能なロケールの確認 * const Component = () => { * const { availableLocales, locale } = useIntl() * return
現在のロケール: {locale}
* } */ export declare const useIntl: () => UseIntlReturn; export {};