メインコンテンツまでスキップ

kotlinx-datetime Extension

extension-kotlinx-datetime モジュールは、kotlinx-datetime ライブラリの型に対応した Field を提供します。

インストール​

starter モジュールには含まれていないため、個別に依存関係を追加する必要があります。

build.gradle.kts
kotlin {
    sourceSets {
        val commonMain by getting {
            dependencies {
                // Compose Preview Lab
                implementation("me.tbsten.compose.preview.lab:starter:<version>")

                // kotlinx-datetime Extension
                implementation("me.tbsten.compose.preview.lab:extension-kotlinx-datetime:<version>")

                // kotlinx-datetime 本体も必要
                implementation("org.jetbrains.kotlinx:kotlinx-datetime:<kotlinx-datetime-version>")
            }
        }
    }
}

利用可能な Field​

Field対応する kotlinx-datetime の型説明
LocalDateTimeFieldLocalDateTime日付と時刻を編集
LocalDateFieldLocalDate日付を編集
LocalTimeFieldLocalTime時刻を編集
TimeZoneFieldTimeZoneタイムゾーンを編集
MonthFieldMonth月を選択
DayOfWeekFieldDayOfWeek曜日を選択
DatePeriodFieldDatePeriod日付の期間を編集
DateTimePeriodFieldDateTimePeriod日時の期間を編集

使用例​

LocalDateTimeField​

LocalDateTime を編集できる Field です。日付と時刻を編集できます。

PreviewLab {
    val createdAt = fieldValue {
        LocalDateTimeField(
            label = "createdAt",
            initialValue = LocalDateTime(2024, 1, 1, 12, 0, 0, 0),
        )
    }
    Text("Created at: $createdAt")
}

LocalDateField​

LocalDate を編集できる Field です。日付を編集できます。

PreviewLab {
    val birthday = fieldValue {
        LocalDateField(
            label = "birthday",
            initialValue = LocalDate(2000, 1, 1),
        )
    }
    Text("Birthday: $birthday")
}

LocalTimeField​

LocalTime を編集できる Field です。時刻を編集できます。

PreviewLab {
    val meetingTime = fieldValue {
        LocalTimeField(
            label = "meetingTime",
            initialValue = LocalTime(15, 0, 0, 0),
        )
    }
    Text("Meeting time: $meetingTime")
}

TimeZoneField​

TimeZone を編集できる Field です。withMainTimeZonesHint() や withAllTimeZonesHint() を使用して、よく使用されるタイムゾーンをヒントとして表示できます。

PreviewLab {
    val timeZone = fieldValue {
        TimeZoneField(
            label = "timeZone",
            initialValue = TimeZone.UTC,
        ).withMainTimeZonesHint() // 主要なタイムゾーンをヒントとして表示
    }
    Text("TimeZone: $timeZone")
}

ヒント関数:

  • withMainTimeZonesHint() - 主要なタイムゾーン（UTC, Asia/Tokyo, America/New_York など）をヒントとして表示
  • withAllTimeZonesHint() - すべての利用可能なタイムゾーンをヒントとして表示

MonthField​

Month を選択できる Field です。内部的には EnumField を使用しています。

PreviewLab {
    val month = fieldValue {
        MonthField(
            label = "month",
            initialValue = Month.APRIL,
        )
    }
    Text("Month: $month")
}

DayOfWeekField​

DayOfWeek を選択できる Field です。内部的には EnumField を使用しています。

PreviewLab {
    val dayOfWeek = fieldValue {
        DayOfWeekField(
            label = "regularClosingDay",
            initialValue = DayOfWeek.SUNDAY,
        )
    }
    Text("Regular closing day: $dayOfWeek")
}

DatePeriodField​

DatePeriod を編集できる Field です。年・月・日の期間を表します。

PreviewLab {
    val datePeriod = fieldValue {
        DatePeriodField(
            label = "subscriptionPeriod",
            initialValue = DatePeriod(months = 1),
        )
    }
    Text("Subscription period: $datePeriod")
}

DateTimePeriodField​

DateTimePeriod を編集できる Field です。年・月・日・時・分・秒・ナノ秒の期間を表します。

PreviewLab {
    val dateTimePeriod = fieldValue {
        DateTimePeriodField(
            label = "duration",
            initialValue = DateTimePeriod(hours = 2, minutes = 30),
        )
    }
    Text("Duration: $dateTimePeriod")
}

valueCode() のサポート​

すべての Field は valueCode() をサポートしており、Inspector の Code タブで適切な Kotlin コードが生成されます。

例：

  • LocalDateTimeField → LocalDateTime(year = 2024, month = 1, day = 1, hour = 12, minute = 0, second = 0, nanosecond = 0)
  • TimeZoneField → TimeZone.of("Asia/Tokyo")
  • MonthField → Month.APRIL

関連リンク​