├── .github ├── dependabot.yaml └── workflows │ └── android.yml ├── .gitignore ├── LICENSE.txt ├── README.md ├── build.gradle.kts ├── chiptextfield-core ├── .gitignore ├── build.gradle ├── consumer-rules.pro ├── gradle.properties ├── proguard-rules.pro └── src │ ├── androidMain │ ├── AndroidManifest.xml │ └── kotlin │ │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ └── Platform.android.kt │ ├── commonMain │ └── kotlin │ │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ ├── BasicChipTextField.kt │ │ ├── BasicChipTextFieldDefaults.kt │ │ ├── BasicCloseButton.kt │ │ ├── Chip.kt │ │ ├── ChipStyle.kt │ │ ├── ChipTextFieldColors.kt │ │ ├── ChipTextFieldState.kt │ │ ├── Platform.kt │ │ └── util │ │ ├── FilterNewLinesOnValueChange.kt │ │ ├── Modifier.ext.kt │ │ └── StableHolder.kt │ ├── jsMain │ └── kotlin │ │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ └── Platform.js.kt │ ├── jvmMain │ └── kotlin │ │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ └── Platform.jvm.kt │ └── wasmJsMain │ └── kotlin │ └── com │ └── dokar │ └── chiptextfield │ └── Platform.wasmJs.kt ├── chiptextfield-m3 ├── .gitignore ├── build.gradle ├── consumer-rules.pro ├── gradle.properties ├── proguard-rules.pro └── src │ ├── androidMain │ └── AndroidManifest.xml │ └── commonMain │ └── kotlin │ └── com │ └── dokar │ └── chiptextfield │ └── m3 │ ├── ChipTextField.kt │ ├── ChipTextFieldDefaults.kt │ ├── CloseButton.kt │ ├── OutlinedChipTextField.kt │ └── TextFieldColorsConverter.kt ├── chiptextfield ├── .gitignore ├── build.gradle ├── consumer-rules.pro ├── gradle.properties ├── proguard-rules.pro └── src │ ├── androidMain │ └── AndroidManifest.xml │ └── commonMain │ └── kotlin │ └── com │ └── dokar │ └── chiptextfield │ ├── ChipTextField.kt │ ├── ChipTextFieldDefaults.kt │ ├── CloseButton.kt │ ├── OutlinedChipTextField.kt │ └── TextFieldColorsConverter.kt ├── gradle.properties ├── gradle ├── libs.versions.toml └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── images ├── screenshot_avatar.png ├── screenshot_checkable.jpg ├── screenshot_filled.jpg ├── screenshot_light.png ├── screenshot_m3.jpg └── screenshot_outlined.jpg ├── kotlin-js-store └── yarn.lock ├── sample ├── .gitignore ├── android │ ├── .gitignore │ ├── build.gradle │ ├── proguard-rules.pro │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── dokar │ │ │ └── chiptextfield │ │ │ └── sample │ │ │ └── MainActivity.kt │ │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ ├── ic_baseline_check_24.xml │ │ └── ic_launcher_background.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values-night │ │ └── themes.xml │ │ └── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml ├── desktop │ ├── .gitignore │ ├── build.gradle.kts │ └── src │ │ └── jvmMain │ │ └── kotlin │ │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ └── sample │ │ └── Main.kt ├── shared │ ├── .gitignore │ ├── build.gradle.kts │ └── src │ │ ├── androidMain │ │ └── kotlin │ │ │ └── com │ │ │ └── dokar │ │ │ └── chiptextfield │ │ │ └── sample │ │ │ └── Platform.android.kt │ │ ├── commonMain │ │ └── kotlin │ │ │ └── com │ │ │ └── dokar │ │ │ └── chiptextfield │ │ │ └── sample │ │ │ ├── Platform.kt │ │ │ ├── SampleScreen.kt │ │ │ ├── ThemeColorSelector.kt │ │ │ ├── data │ │ │ ├── AvatarChip.kt │ │ │ ├── CheckableChip.kt │ │ │ └── SampleChips.kt │ │ │ ├── m2 │ │ │ ├── AvatarChips.kt │ │ │ ├── CheckableChips.kt │ │ │ ├── ChipsHeader.kt │ │ │ ├── M2ChipsScreen.kt │ │ │ ├── ManualFocusChips.kt │ │ │ └── TextChips.kt │ │ │ ├── m3 │ │ │ ├── ChipsHeader.kt │ │ │ └── M3ChipsScreen.kt │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Shape.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ │ ├── jsMain │ │ └── kotlin │ │ │ └── com │ │ │ └── dokar │ │ │ └── chiptextfield │ │ │ └── sample │ │ │ └── Platform.js.kt │ │ ├── jvmMain │ │ └── kotlin │ │ │ └── com │ │ │ └── dokar │ │ │ └── chiptextfield │ │ │ └── sample │ │ │ └── Platform.jvm.kt │ │ └── wasmJsMain │ │ └── kotlin │ │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ └── sample │ │ └── Platform.wasmJs.kt └── webApp │ ├── .gitignore │ ├── build.gradle.kts │ └── src │ ├── jsMain │ ├── kotlin │ │ └── com │ │ │ └── dokar │ │ │ └── chiptextfield │ │ │ └── sample │ │ │ └── Main.kt │ └── resources │ │ └── index.html │ └── wasmJsMain │ ├── kotlin │ └── com │ │ └── dokar │ │ └── chiptextfield │ │ └── sample │ │ └── Main.kt │ └── resources │ ├── index.html │ └── load.mjs └── settings.gradle /.github/dependabot.yaml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: "gradle" 5 | directory: "/" 6 | schedule: 7 | interval: "daily" 8 | 9 | - package-ecosystem: "github-actions" 10 | directory: "/" 11 | schedule: 12 | interval: "daily" -------------------------------------------------------------------------------- /.github/workflows/android.yml: -------------------------------------------------------------------------------- 1 | name: Android CI 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | 9 | jobs: 10 | build: 11 | 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - uses: actions/checkout@v4 16 | - name: set up JDK 17 17 | uses: actions/setup-java@v4 18 | with: 19 | java-version: '17' 20 | distribution: 'adopt' 21 | cache: gradle 22 | 23 | - name: Grant execute permission for gradlew 24 | run: chmod +x gradlew 25 | - name: Build with Gradle 26 | run: ./gradlew build 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | .idea 5 | .DS_Store 6 | /build 7 | /captures 8 | .externalNativeBuild 9 | .cxx 10 | local.properties 11 | .kotlin 12 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ChipTextField 2 | 3 | [![Maven Central](https://maven-badges.herokuapp.com/maven-central/io.github.dokar3/chiptextfield/badge.svg)](https://maven-badges.herokuapp.com/maven-central/io.github.dokar3/chiptextfield) 4 | 5 | Editable and customizable chips for Compose Multiplatform. Available on these platforms: 6 | 7 | - Android (Jetpack Compose) 8 | - Desktop 9 | - Browser (wasmJs and canvas) 10 | 11 | iOS support is currently lacking, see [#131](https://github.com/dokar3/ChipTextField/issues/131). 12 | 13 | # Usage 14 | 15 | Gradle dependency: 16 | 17 | ```groovy 18 | // Material 2 19 | implementation "io.github.dokar3:chiptextfield:latest_version" 20 | 21 | // Material 3 22 | implementation "io.github.dokar3:chiptextfield-m3:latest_version" 23 | ``` 24 | 25 | **Default (filled style)** 26 | 27 | ```kotlin 28 | var value by remember { mutableStateOf("Initial text") } 29 | val state = rememberChipTextFieldState() 30 | ChipTextField( 31 | state = state, 32 | value = value, 33 | onValueChange = { value = it }, 34 | onSubmit = { text -> Chip(text) }, 35 | ) 36 | ``` 37 | 38 | Simplified version if do not care about the text field value: 39 | 40 | ```kotlin 41 | val state = rememberChipTextFieldState() 42 | ChipTextField( 43 | state = state, 44 | onSubmit = ::Chip, 45 | ) 46 | ``` 47 | 48 | ![](/images/screenshot_filled.jpg) 49 | 50 | **Outlined** 51 | 52 | ```kotlin 53 | val state = rememberChipTextFieldState() 54 | OutlinedChipTextField( 55 | state = state, 56 | onSubmit = ::Chip, 57 | ) 58 | ``` 59 | 60 | ![](/images/screenshot_outlined.jpg) 61 | 62 | **Need a classic underline style?** 63 | 64 | ```kotlin 65 | val state = rememberChipTextFieldState() 66 | ChipTextField( 67 | state = state, 68 | onSubmit = ::Chip, 69 | colors = TextFieldDefaults.textFieldColors( 70 | backgroundColor = Color.Transparent, 71 | ), 72 | contentPadding = PaddingValues(bottom = 8.dp), 73 | ) 74 | ``` 75 | 76 | ![](/images/screenshot_light.png) 77 | 78 | **Checkable chips** 79 | 80 | ```kotlin 81 | class CheckableChip(text: String, isChecked: Boolean = false) : Chip(text) { 82 | var isChecked by mutableStateOf(isChecked) 83 | } 84 | 85 | val state = rememberChipTextFieldState( 86 | chips = listOf(CheckableChip(""), /*...*/), 87 | ) 88 | BasicChipTextField( 89 | state = state, 90 | onSubmit = { null }, 91 | readOnly = true, // Disable editing 92 | chipLeadingIcon = { chip -> CheckIcon(chip) }, // Show check icon if checked 93 | chipTrailingIcon = {}, // Hide default close button 94 | onChipClick = { chip -> chip.isChecked = !chip.isChecked } 95 | ) 96 | 97 | @Composable 98 | fun CheckIcon(chip: CheckableChip, modifier: Modifier = Modifier) { /*...*/ } 99 | ``` 100 | 101 | ![](/images/screenshot_checkable.jpg) 102 | 103 | **Avatar chips** 104 | 105 | ```kotlin 106 | class AvatarChip(text: String, val avatarUrl: String) : Chip(text) 107 | 108 | val state = rememberChipTextFieldState() 109 | ChipTextField( 110 | state = state, 111 | onSubmit = { AvatarChip(it.text, AVATAR_URL) }, 112 | chipLeadingIcon = { chip -> Avatar(chip) } // Load and display avatar 113 | ) 114 | 115 | @Composable 116 | fun Avatar(chip: AvatarChip, modifier: Modifier = Modifier) { /*...*/ } 117 | ``` 118 | 119 | ![](/images/screenshot_avatar.png) 120 | 121 | **Material 3** 122 | 123 | ```diff 124 | - import com.dokar.chiptextfield.OutlinedChipTextField 125 | + import com.dokar.chiptextfield.m3.OutlinedChipTextField 126 | ``` 127 | 128 | ![](/images/screenshot_m3.jpg) 129 | 130 | 131 | # License 132 | 133 | ``` 134 | Copyright 2021 dokar3 135 | 136 | Licensed under the Apache License, Version 2.0 (the "License"); 137 | you may not use this file except in compliance with the License. 138 | You may obtain a copy of the License at 139 | 140 | http://www.apache.org/licenses/LICENSE-2.0 141 | 142 | Unless required by applicable law or agreed to in writing, software 143 | distributed under the License is distributed on an "AS IS" BASIS, 144 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 145 | See the License for the specific language governing permissions and 146 | limitations under the License. 147 | ``` -------------------------------------------------------------------------------- /build.gradle.kts: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | buildscript { 3 | val composeBomVersion: String by extra("2024.06.00") 4 | } 5 | 6 | plugins { 7 | alias(libs.plugins.android.application) apply false 8 | alias(libs.plugins.android.library) apply false 9 | alias(libs.plugins.kotlin.android) apply false 10 | alias(libs.plugins.compose.multiplatform) apply false 11 | alias(libs.plugins.compose.compiler) apply false 12 | alias(libs.plugins.mavenpublish) apply false 13 | } 14 | -------------------------------------------------------------------------------- /chiptextfield-core/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /chiptextfield-core/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.library") 3 | id("kotlin-multiplatform") 4 | id('com.vanniktech.maven.publish') 5 | id("org.jetbrains.compose") 6 | alias(libs.plugins.compose.compiler) 7 | } 8 | 9 | android { 10 | namespace 'com.dokar.chiptextfield.core' 11 | 12 | compileSdk libs.versions.androidCompileSdk.get().toInteger() 13 | 14 | defaultConfig { 15 | minSdk 21 16 | targetSdkVersion libs.versions.androidTargetSdk.get().toInteger() 17 | 18 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 19 | consumerProguardFiles "consumer-rules.pro" 20 | } 21 | 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 26 | } 27 | } 28 | } 29 | 30 | kotlin { 31 | jvmToolchain(11) 32 | 33 | jvm() 34 | // iosX64() 35 | // macosX64() 36 | js(IR) { 37 | browser() 38 | } 39 | wasmJs { 40 | binaries.executable() 41 | binaries.library() 42 | } 43 | 44 | androidTarget { 45 | publishLibraryVariants("release") 46 | } 47 | 48 | sourceSets { 49 | commonMain { 50 | dependencies { 51 | api(compose.ui) 52 | api(compose.foundation) 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /chiptextfield-core/consumer-rules.pro: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/chiptextfield-core/consumer-rules.pro -------------------------------------------------------------------------------- /chiptextfield-core/gradle.properties: -------------------------------------------------------------------------------- 1 | POM_ARTIFACT_ID=chiptextfield-core 2 | POM_PACKAGING=aar -------------------------------------------------------------------------------- /chiptextfield-core/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /chiptextfield-core/src/androidMain/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chiptextfield-core/src/androidMain/kotlin/com/dokar/chiptextfield/Platform.android.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | actual suspend fun awaitFrame() { 4 | kotlinx.coroutines.android.awaitFrame() 5 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/BasicChipTextFieldDefaults.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.shape.CircleShape 4 | import androidx.compose.runtime.Composable 5 | import androidx.compose.ui.graphics.Color 6 | import androidx.compose.ui.graphics.Shape 7 | import androidx.compose.ui.text.PlatformParagraphStyle 8 | import androidx.compose.ui.text.PlatformSpanStyle 9 | import androidx.compose.ui.text.PlatformTextStyle 10 | import androidx.compose.ui.text.TextStyle 11 | import androidx.compose.ui.unit.Dp 12 | import androidx.compose.ui.unit.dp 13 | 14 | object BasicChipTextFieldDefaults { 15 | private const val DISABLED_CONTENT_ALPHA = 0.38f 16 | 17 | private val DefaultPlatformTextStyle = PlatformTextStyle( 18 | spanStyle = PlatformSpanStyle.Default, 19 | paragraphStyle = PlatformParagraphStyle.Default, 20 | ) 21 | private val DefaultTextStyle = TextStyle.Default.copy(platformStyle = DefaultPlatformTextStyle) 22 | 23 | val textStyle: TextStyle = DefaultTextStyle 24 | 25 | @Composable 26 | fun chipStyle( 27 | shape: Shape = CircleShape, 28 | cursorColor: Color = Color.Black, 29 | focusedBorderWidth: Dp = 1.dp, 30 | unfocusedBorderWidth: Dp = 1.dp, 31 | disabledBorderWidth: Dp = 1.dp, 32 | focusedBorderColor: Color = Color.Black, 33 | unfocusedBorderColor: Color = focusedBorderColor, 34 | disabledBorderColor: Color = focusedBorderColor.copy(alpha = DISABLED_CONTENT_ALPHA), 35 | focusedTextColor: Color = Color.Black, 36 | unfocusedTextColor: Color = focusedTextColor, 37 | disabledTextColor: Color = focusedTextColor.copy(alpha = DISABLED_CONTENT_ALPHA), 38 | focusedBackgroundColor: Color = Color.Transparent, 39 | unfocusedBackgroundColor: Color = focusedBackgroundColor, 40 | disabledBackgroundColor: Color = focusedBackgroundColor, 41 | ): ChipStyle { 42 | return DefaultChipStyle( 43 | shape = shape, 44 | cursorColor = cursorColor, 45 | focusedBorderWidth = focusedBorderWidth, 46 | unfocusedBorderWidth = unfocusedBorderWidth, 47 | disabledBorderWidth = disabledBorderWidth, 48 | focusedBorderColor = focusedBorderColor, 49 | unfocusedBorderColor = unfocusedBorderColor, 50 | disabledBorderColor = disabledBorderColor, 51 | focusedTextColor = focusedTextColor, 52 | unfocusedTextColor = unfocusedTextColor, 53 | disabledTextColor = disabledTextColor, 54 | focusedBackgroundColor = focusedBackgroundColor, 55 | unfocusedBackgroundColor = unfocusedBackgroundColor, 56 | disabledBackgroundColor = disabledBackgroundColor, 57 | ) 58 | } 59 | 60 | @Composable 61 | fun chipTextFieldColors( 62 | textColor: Color = Color.Black, 63 | disabledTextColor: Color = textColor.copy(alpha = DISABLED_CONTENT_ALPHA), 64 | errorTextColor: Color = Color.Red, 65 | cursorColor: Color = Color.Black, 66 | errorCursorColor: Color = Color.Red, 67 | backgroundColor: Color = Color.Transparent, 68 | disabledBackgroundColor: Color = Color.Transparent, 69 | ): ChipTextFieldColors = DefaultChipTextFieldColors( 70 | textColor = textColor, 71 | disabledTextColor = disabledTextColor, 72 | errorTextColor = errorTextColor, 73 | cursorColor = cursorColor, 74 | errorCursorColor = errorCursorColor, 75 | backgroundColor = backgroundColor, 76 | disabledBackgroundColor = disabledBackgroundColor, 77 | ) 78 | } 79 | -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/BasicCloseButton.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.Canvas 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.clickable 6 | import androidx.compose.foundation.layout.Row 7 | import androidx.compose.foundation.layout.padding 8 | import androidx.compose.foundation.layout.size 9 | import androidx.compose.foundation.shape.CircleShape 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.runtime.CompositionLocalProvider 12 | import androidx.compose.runtime.remember 13 | import androidx.compose.ui.Modifier 14 | import androidx.compose.ui.draw.clip 15 | import androidx.compose.ui.geometry.Offset 16 | import androidx.compose.ui.graphics.Color 17 | import androidx.compose.ui.platform.LocalDensity 18 | import androidx.compose.ui.platform.LocalViewConfiguration 19 | import androidx.compose.ui.platform.ViewConfiguration 20 | import androidx.compose.ui.unit.Dp 21 | import androidx.compose.ui.unit.DpSize 22 | import androidx.compose.ui.unit.dp 23 | 24 | @Composable 25 | fun BasicCloseButton( 26 | state: ChipTextFieldState, 27 | chip: T, 28 | modifier: Modifier = Modifier, 29 | backgroundColor: Color = Color.Black.copy(alpha = 0.3f), 30 | strokeColor: Color = Color.White, 31 | startPadding: Dp = 0.dp, 32 | endPadding: Dp = 6.dp 33 | ) { 34 | Row( 35 | modifier = modifier 36 | .padding(start = startPadding, end = endPadding) 37 | ) { 38 | CloseButtonImpl( 39 | onClick = { state.removeChip(chip) }, 40 | backgroundColor = backgroundColor, 41 | strokeColor = strokeColor 42 | ) 43 | } 44 | } 45 | 46 | @Composable 47 | private fun CloseButtonImpl( 48 | onClick: () -> Unit, 49 | backgroundColor: Color, 50 | strokeColor: Color, 51 | modifier: Modifier = Modifier, 52 | ) { 53 | val padding = with(LocalDensity.current) { 6.dp.toPx() } 54 | val strokeWidth = with(LocalDensity.current) { 1.2.dp.toPx() } 55 | val viewConfiguration = LocalViewConfiguration.current 56 | val viewConfigurationOverride = remember(viewConfiguration) { 57 | ViewConfigurationOverride( 58 | base = viewConfiguration, 59 | minimumTouchTargetSize = DpSize(24.dp, 24.dp) 60 | ) 61 | } 62 | CompositionLocalProvider(LocalViewConfiguration provides viewConfigurationOverride) { 63 | Canvas( 64 | modifier = modifier 65 | .size(18.dp) 66 | .clip(CircleShape) 67 | .background(backgroundColor) 68 | .clickable(onClick = onClick) 69 | ) { 70 | drawLine( 71 | color = strokeColor, 72 | start = Offset(padding, padding), 73 | end = Offset(size.width - padding, size.height - padding), 74 | strokeWidth = strokeWidth 75 | ) 76 | drawLine( 77 | color = strokeColor, 78 | start = Offset(padding, size.height - padding), 79 | end = Offset(size.width - padding, padding), 80 | strokeWidth = strokeWidth 81 | ) 82 | } 83 | } 84 | } 85 | 86 | internal class ViewConfigurationOverride( 87 | base: ViewConfiguration, 88 | override val doubleTapMinTimeMillis: Long = base.doubleTapMinTimeMillis, 89 | override val doubleTapTimeoutMillis: Long = base.doubleTapTimeoutMillis, 90 | override val longPressTimeoutMillis: Long = base.longPressTimeoutMillis, 91 | override val touchSlop: Float = base.touchSlop, 92 | override val minimumTouchTargetSize: DpSize = base.minimumTouchTargetSize 93 | ) : ViewConfiguration 94 | -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/Chip.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.interaction.FocusInteraction 4 | import androidx.compose.runtime.Stable 5 | import androidx.compose.runtime.getValue 6 | import androidx.compose.runtime.mutableStateOf 7 | import androidx.compose.runtime.setValue 8 | import androidx.compose.ui.text.input.TextFieldValue 9 | 10 | /** 11 | * Basic chip class 12 | */ 13 | @Stable 14 | open class Chip(text: String) { 15 | internal var textFieldValue by mutableStateOf(TextFieldValue(text)) 16 | 17 | internal val focus = FocusInteraction.Focus() 18 | 19 | val text: String get() = textFieldValue.text 20 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/ChipStyle.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.interaction.InteractionSource 4 | import androidx.compose.foundation.interaction.collectIsFocusedAsState 5 | import androidx.compose.runtime.Composable 6 | import androidx.compose.runtime.Immutable 7 | import androidx.compose.runtime.Stable 8 | import androidx.compose.runtime.State 9 | import androidx.compose.runtime.getValue 10 | import androidx.compose.runtime.rememberUpdatedState 11 | import androidx.compose.ui.graphics.Color 12 | import androidx.compose.ui.graphics.Shape 13 | import androidx.compose.ui.unit.Dp 14 | 15 | /** 16 | * Chip style 17 | */ 18 | @Stable 19 | interface ChipStyle { 20 | @Composable 21 | fun shape( 22 | enabled: Boolean, 23 | interactionSource: InteractionSource 24 | ): State 25 | 26 | @Composable 27 | fun borderWidth( 28 | enabled: Boolean, 29 | interactionSource: InteractionSource 30 | ): State 31 | 32 | @Composable 33 | fun borderColor( 34 | enabled: Boolean, 35 | interactionSource: InteractionSource 36 | ): State 37 | 38 | @Composable 39 | fun textColor( 40 | enabled: Boolean, 41 | interactionSource: InteractionSource 42 | ): State 43 | 44 | @Composable 45 | fun cursorColor(): State 46 | 47 | @Composable 48 | fun backgroundColor( 49 | enabled: Boolean, 50 | interactionSource: InteractionSource 51 | ): State 52 | } 53 | 54 | @Immutable 55 | class DefaultChipStyle( 56 | private val shape: Shape, 57 | private val cursorColor: Color, 58 | private val focusedBorderWidth: Dp, 59 | private val unfocusedBorderWidth: Dp, 60 | private val disabledBorderWidth: Dp, 61 | private val focusedBorderColor: Color, 62 | private val unfocusedBorderColor: Color, 63 | private val disabledBorderColor: Color, 64 | private val focusedTextColor: Color, 65 | private val unfocusedTextColor: Color, 66 | private val disabledTextColor: Color, 67 | private val focusedBackgroundColor: Color, 68 | private val unfocusedBackgroundColor: Color, 69 | private val disabledBackgroundColor: Color, 70 | ) : ChipStyle { 71 | @Composable 72 | override fun shape( 73 | enabled: Boolean, 74 | interactionSource: InteractionSource, 75 | ): State { 76 | return rememberUpdatedState(shape) 77 | } 78 | 79 | @Composable 80 | override fun borderWidth( 81 | enabled: Boolean, 82 | interactionSource: InteractionSource, 83 | ): State { 84 | val focused by interactionSource.collectIsFocusedAsState() 85 | return rememberUpdatedState( 86 | when { 87 | !enabled -> disabledBorderWidth 88 | focused -> focusedBorderWidth 89 | else -> unfocusedBorderWidth 90 | } 91 | ) 92 | } 93 | 94 | @Composable 95 | override fun borderColor( 96 | enabled: Boolean, 97 | interactionSource: InteractionSource, 98 | ): State { 99 | val focused by interactionSource.collectIsFocusedAsState() 100 | return rememberUpdatedState( 101 | when { 102 | !enabled -> disabledBorderColor 103 | focused -> focusedBorderColor 104 | else -> unfocusedBorderColor 105 | } 106 | ) 107 | } 108 | 109 | @Composable 110 | override fun textColor( 111 | enabled: Boolean, 112 | interactionSource: InteractionSource, 113 | ): State { 114 | val focused by interactionSource.collectIsFocusedAsState() 115 | return rememberUpdatedState( 116 | when { 117 | !enabled -> disabledTextColor 118 | focused -> focusedTextColor 119 | else -> unfocusedTextColor 120 | } 121 | ) 122 | } 123 | 124 | @Composable 125 | override fun cursorColor(): State { 126 | return rememberUpdatedState(cursorColor) 127 | } 128 | 129 | @Composable 130 | override fun backgroundColor( 131 | enabled: Boolean, 132 | interactionSource: InteractionSource, 133 | ): State { 134 | val focused by interactionSource.collectIsFocusedAsState() 135 | return rememberUpdatedState( 136 | when { 137 | !enabled -> disabledBackgroundColor 138 | focused -> focusedBackgroundColor 139 | else -> unfocusedBackgroundColor 140 | } 141 | ) 142 | } 143 | 144 | override fun equals(other: Any?): Boolean { 145 | if (this === other) return true 146 | if (other !is DefaultChipStyle) return false 147 | 148 | if (shape != other.shape) return false 149 | if (cursorColor != other.cursorColor) return false 150 | if (focusedBorderWidth != other.focusedBorderWidth) return false 151 | if (unfocusedBorderWidth != other.unfocusedBorderWidth) return false 152 | if (disabledBorderWidth != other.disabledBorderWidth) return false 153 | if (focusedBorderColor != other.focusedBorderColor) return false 154 | if (unfocusedBorderColor != other.unfocusedBorderColor) return false 155 | if (disabledBorderColor != other.disabledBorderColor) return false 156 | if (focusedTextColor != other.focusedTextColor) return false 157 | if (unfocusedTextColor != other.unfocusedTextColor) return false 158 | if (disabledTextColor != other.disabledTextColor) return false 159 | if (focusedBackgroundColor != other.focusedBackgroundColor) return false 160 | if (unfocusedBackgroundColor != other.unfocusedBackgroundColor) return false 161 | if (disabledBackgroundColor != other.disabledBackgroundColor) return false 162 | 163 | return true 164 | } 165 | 166 | override fun hashCode(): Int { 167 | var result = shape.hashCode() 168 | result = 31 * result + cursorColor.hashCode() 169 | result = 31 * result + focusedBorderWidth.hashCode() 170 | result = 31 * result + unfocusedBorderWidth.hashCode() 171 | result = 31 * result + disabledBorderWidth.hashCode() 172 | result = 31 * result + focusedBorderColor.hashCode() 173 | result = 31 * result + unfocusedBorderColor.hashCode() 174 | result = 31 * result + disabledBorderColor.hashCode() 175 | result = 31 * result + focusedTextColor.hashCode() 176 | result = 31 * result + unfocusedTextColor.hashCode() 177 | result = 31 * result + disabledTextColor.hashCode() 178 | result = 31 * result + focusedBackgroundColor.hashCode() 179 | result = 31 * result + unfocusedBackgroundColor.hashCode() 180 | result = 31 * result + disabledBackgroundColor.hashCode() 181 | return result 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/ChipTextFieldColors.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.interaction.InteractionSource 4 | import androidx.compose.runtime.Composable 5 | import androidx.compose.runtime.State 6 | import androidx.compose.runtime.rememberUpdatedState 7 | import androidx.compose.ui.graphics.Color 8 | 9 | interface ChipTextFieldColors { 10 | @Composable 11 | fun textColor( 12 | enabled: Boolean, 13 | isError: Boolean, 14 | interactionSource: InteractionSource, 15 | ): State 16 | 17 | @Composable 18 | fun cursorColor(isError: Boolean): State 19 | 20 | @Composable 21 | fun backgroundColor( 22 | enabled: Boolean, 23 | isError: Boolean, 24 | interactionSource: InteractionSource 25 | ): State 26 | } 27 | 28 | internal class DefaultChipTextFieldColors( 29 | private val textColor: Color, 30 | private val disabledTextColor: Color, 31 | private val errorTextColor: Color, 32 | private val cursorColor: Color, 33 | private val errorCursorColor: Color, 34 | private val backgroundColor: Color, 35 | private val disabledBackgroundColor: Color, 36 | ) : ChipTextFieldColors { 37 | @Composable 38 | override fun textColor( 39 | enabled: Boolean, 40 | isError: Boolean, 41 | interactionSource: InteractionSource 42 | ): State { 43 | return rememberUpdatedState( 44 | when { 45 | isError -> errorTextColor 46 | !enabled -> textColor 47 | else -> disabledTextColor 48 | } 49 | ) 50 | } 51 | 52 | @Composable 53 | override fun cursorColor(isError: Boolean): State { 54 | return rememberUpdatedState(if (isError) cursorColor else errorCursorColor) 55 | } 56 | 57 | @Composable 58 | override fun backgroundColor( 59 | enabled: Boolean, 60 | isError: Boolean, 61 | interactionSource: InteractionSource 62 | ): State { 63 | return rememberUpdatedState(if (enabled) backgroundColor else disabledBackgroundColor) 64 | } 65 | 66 | override fun equals(other: Any?): Boolean { 67 | if (this === other) return true 68 | if (other !is DefaultChipTextFieldColors) return false 69 | 70 | if (textColor != other.textColor) return false 71 | if (disabledTextColor != other.disabledTextColor) return false 72 | if (errorTextColor != other.errorTextColor) return false 73 | if (cursorColor != other.cursorColor) return false 74 | if (errorCursorColor != other.errorCursorColor) return false 75 | if (backgroundColor != other.backgroundColor) return false 76 | if (disabledBackgroundColor != other.disabledBackgroundColor) return false 77 | 78 | return true 79 | } 80 | 81 | override fun hashCode(): Int { 82 | var result = textColor.hashCode() 83 | result = 31 * result + disabledTextColor.hashCode() 84 | result = 31 * result + errorTextColor.hashCode() 85 | result = 31 * result + cursorColor.hashCode() 86 | result = 31 * result + errorCursorColor.hashCode() 87 | result = 31 * result + backgroundColor.hashCode() 88 | result = 31 * result + disabledBackgroundColor.hashCode() 89 | return result 90 | } 91 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/ChipTextFieldState.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.Stable 5 | import androidx.compose.runtime.getValue 6 | import androidx.compose.runtime.mutableIntStateOf 7 | import androidx.compose.runtime.mutableStateOf 8 | import androidx.compose.runtime.remember 9 | import androidx.compose.runtime.setValue 10 | 11 | /** 12 | * Return a new remembered [ChipTextFieldState] 13 | * 14 | * @param chips Default chips 15 | */ 16 | @Composable 17 | fun rememberChipTextFieldState( 18 | chips: List = emptyList() 19 | ): ChipTextFieldState { 20 | return remember { ChipTextFieldState(chips = chips) } 21 | } 22 | 23 | /** 24 | * State class for [BasicChipTextField] 25 | * 26 | * @param chips Default chips 27 | */ 28 | @Stable 29 | class ChipTextFieldState( 30 | chips: List = emptyList() 31 | ) { 32 | internal var disposed = false 33 | 34 | internal var defaultChips: List = chips 35 | 36 | private var _focusedChip: T? by mutableStateOf(null) 37 | internal val focusedChip get() = _focusedChip 38 | 39 | private var _focusedChipIndex by mutableIntStateOf(-1) 40 | val focusedChipIndex get() = _focusedChipIndex 41 | 42 | internal var nextFocusedChipIndex by mutableIntStateOf(-1) 43 | 44 | internal var recordFocusedChip = true 45 | 46 | internal var textFieldFocusState by mutableStateOf(TextFieldFocusState.None) 47 | 48 | val isTextFieldFocused get() = textFieldFocusState == TextFieldFocusState.Focused 49 | 50 | var chips by mutableStateOf(chips) 51 | 52 | /** 53 | * Add a chip 54 | */ 55 | fun addChip(chip: T) { 56 | val list = chips.toMutableList() 57 | list.add(chip) 58 | chips = list 59 | } 60 | 61 | /** 62 | * Remove chip 63 | */ 64 | fun removeChip(chip: T) { 65 | val list = chips.toMutableList() 66 | val index = list.indexOf(chip) 67 | if (index == -1) { 68 | return 69 | } 70 | 71 | val focusedChipIndex = list.indexOf(focusedChip) 72 | if (focusedChipIndex == list.lastIndex && focusedChipIndex > 0) { 73 | if (index == list.lastIndex) { 74 | // The chip to remove is also the last chip, change the focused chip to the 75 | // previous chip 76 | updateFocusedChip(list[index - 1]) 77 | } 78 | // IME will lose focus if the focused chip is the last, we move the focus to the 79 | // previous composable to avoid IME flash 80 | recordFocusedChip = false 81 | nextFocusedChipIndex = focusedChipIndex - 1 82 | } else if (chip == focusedChip && index < list.lastIndex) { 83 | // We are removing the focusing chip, simply set the focused chip to the next one. 84 | updateFocusedChip(list[index + 1]) 85 | } 86 | 87 | list.remove(chip) 88 | chips = list 89 | } 90 | 91 | internal fun removeLastChip() { 92 | val list = chips.subList(0, chips.size - 1) 93 | chips = list 94 | } 95 | 96 | internal fun updateFocusedChip(chip: T?) { 97 | if (chip != null) { 98 | textFieldFocusState = TextFieldFocusState.None 99 | } 100 | this._focusedChip = chip 101 | this._focusedChipIndex = chips.indexOf(chip) 102 | } 103 | 104 | /** 105 | * Focus a chip by index. 106 | */ 107 | fun focusChip(index: Int) { 108 | if (chips.isEmpty()) return 109 | if (index < 0 || index > chips.lastIndex) return 110 | updateFocusedChip(chips[index]) 111 | } 112 | 113 | /** 114 | * Clear focus from a focused chip by index. 115 | */ 116 | fun clearChipFocus(index: Int) { 117 | if (chips.isEmpty()) return 118 | if (index < 0 || index > chips.lastIndex) return 119 | val target = chips[index] 120 | if (focusedChip == target) { 121 | updateFocusedChip(null) 122 | } 123 | } 124 | 125 | /** 126 | * Focus the text field at the end of chips. 127 | */ 128 | fun focusTextField() { 129 | textFieldFocusState = TextFieldFocusState.Focused 130 | } 131 | 132 | /** 133 | * Clear focus from the focused text field at the end chips. 134 | */ 135 | fun clearTextFieldFocus() { 136 | textFieldFocusState = TextFieldFocusState.Unfocused 137 | } 138 | } 139 | 140 | internal enum class TextFieldFocusState { 141 | None, 142 | Focused, 143 | Unfocused, 144 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/Platform.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | expect suspend fun awaitFrame() -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/util/FilterNewLinesOnValueChange.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.util 2 | 3 | import androidx.compose.ui.text.input.TextFieldValue 4 | 5 | /** 6 | * Remove all `\n` in [TextFieldValue] 7 | */ 8 | internal fun filterNewLines( 9 | block: (value: TextFieldValue, hasNewLine: Boolean) -> Unit 10 | ): (TextFieldValue) -> Unit = { 11 | val text = it.text 12 | val hasNewLine = text.hasNewLine() 13 | val value = if (hasNewLine) { 14 | TextFieldValue( 15 | text = text.removeNewLines(), 16 | selection = it.selection, 17 | composition = it.composition, 18 | ) 19 | } else { 20 | it 21 | } 22 | block(value, hasNewLine) 23 | } 24 | 25 | private fun String.hasNewLine(): Boolean { 26 | return indexOf('\n') != -1 27 | } 28 | 29 | private fun String.removeNewLines(): String { 30 | val index = indexOf('\n') 31 | return if (index != -1) { 32 | replace("\n", "") 33 | } else { 34 | this 35 | } 36 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/util/Modifier.ext.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.util 2 | 3 | import androidx.compose.ui.Modifier 4 | 5 | inline fun Modifier.runIf( 6 | value: Boolean, 7 | block: Modifier.() -> Modifier 8 | ): Modifier { 9 | return if (value) { 10 | this.block() 11 | } else { 12 | this 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /chiptextfield-core/src/commonMain/kotlin/com/dokar/chiptextfield/util/StableHolder.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.util 2 | 3 | import androidx.compose.runtime.Stable 4 | 5 | @Stable 6 | internal data class StableHolder(val value: T) -------------------------------------------------------------------------------- /chiptextfield-core/src/jsMain/kotlin/com/dokar/chiptextfield/Platform.js.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import kotlinx.browser.window 4 | import kotlinx.coroutines.awaitAnimationFrame 5 | 6 | actual suspend fun awaitFrame() { 7 | // May not be needed? 8 | window.awaitAnimationFrame() 9 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/jvmMain/kotlin/com/dokar/chiptextfield/Platform.jvm.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | actual suspend fun awaitFrame() { 4 | // Do nothing 5 | } -------------------------------------------------------------------------------- /chiptextfield-core/src/wasmJsMain/kotlin/com/dokar/chiptextfield/Platform.wasmJs.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | actual suspend fun awaitFrame() { 4 | // Do nothing 5 | } -------------------------------------------------------------------------------- /chiptextfield-m3/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /chiptextfield-m3/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.library") 3 | id("kotlin-multiplatform") 4 | id('com.vanniktech.maven.publish') 5 | id("org.jetbrains.compose") 6 | alias(libs.plugins.compose.compiler) 7 | } 8 | 9 | android { 10 | namespace 'com.dokar.chiptextfield.m3' 11 | 12 | compileSdk libs.versions.androidCompileSdk.get().toInteger() 13 | 14 | defaultConfig { 15 | minSdk 21 16 | targetSdkVersion libs.versions.androidTargetSdk.get().toInteger() 17 | 18 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 19 | consumerProguardFiles "consumer-rules.pro" 20 | } 21 | 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 26 | } 27 | } 28 | } 29 | 30 | kotlin { 31 | jvmToolchain(11) 32 | 33 | jvm() 34 | // iosX64() 35 | // macosX64() 36 | js(IR) { 37 | browser() 38 | } 39 | wasmJs { 40 | binaries.executable() 41 | binaries.library() 42 | } 43 | 44 | androidTarget { 45 | publishLibraryVariants("release") 46 | } 47 | 48 | sourceSets { 49 | commonMain { 50 | dependencies { 51 | api project(":chiptextfield-core") 52 | api(compose.ui) 53 | api(compose.foundation) 54 | api(compose.material3) 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /chiptextfield-m3/consumer-rules.pro: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/chiptextfield-m3/consumer-rules.pro -------------------------------------------------------------------------------- /chiptextfield-m3/gradle.properties: -------------------------------------------------------------------------------- 1 | POM_ARTIFACT_ID=chiptextfield-m3 2 | POM_PACKAGING=aar -------------------------------------------------------------------------------- /chiptextfield-m3/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /chiptextfield-m3/src/androidMain/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chiptextfield-m3/src/commonMain/kotlin/com/dokar/chiptextfield/m3/ChipTextField.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.m3 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.interaction.MutableInteractionSource 5 | import androidx.compose.foundation.layout.Box 6 | import androidx.compose.foundation.layout.PaddingValues 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.text.KeyboardOptions 9 | import androidx.compose.material3.ExperimentalMaterial3Api 10 | import androidx.compose.material3.LocalTextStyle 11 | import androidx.compose.material3.TextField 12 | import androidx.compose.material3.TextFieldColors 13 | import androidx.compose.material3.TextFieldDefaults 14 | import androidx.compose.material3.TextFieldDefaults.indicatorLine 15 | import androidx.compose.runtime.Composable 16 | import androidx.compose.runtime.SideEffect 17 | import androidx.compose.runtime.getValue 18 | import androidx.compose.runtime.mutableStateOf 19 | import androidx.compose.runtime.remember 20 | import androidx.compose.runtime.setValue 21 | import androidx.compose.ui.Modifier 22 | import androidx.compose.ui.graphics.Shape 23 | import androidx.compose.ui.text.TextStyle 24 | import androidx.compose.ui.text.input.TextFieldValue 25 | import androidx.compose.ui.text.input.VisualTransformation 26 | import androidx.compose.ui.unit.Dp 27 | import androidx.compose.ui.unit.dp 28 | import com.dokar.chiptextfield.BasicChipTextField 29 | import com.dokar.chiptextfield.Chip 30 | import com.dokar.chiptextfield.ChipStyle 31 | import com.dokar.chiptextfield.ChipTextFieldState 32 | 33 | /** 34 | * Chip text field with Material Design filled style. 35 | * 36 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 37 | * used to control style, layout and interaction of the inner text field independently. 38 | * 39 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 40 | * 41 | * ```kotlin 42 | * ChipTextField( 43 | * state = ..., 44 | * onSubmit = ..., 45 | * modifier = Modifier, 46 | * innerModifier = Modifier 47 | * .heightIn(max = 100.dp) 48 | * .verticalScroll(state = rememberScrollState()), 49 | * ) 50 | * ``` 51 | * 52 | * @see [BasicChipTextField] 53 | * @see [TextField] 54 | */ 55 | @Composable 56 | fun ChipTextField( 57 | state: ChipTextFieldState, 58 | onSubmit: (value: String) -> T?, 59 | modifier: Modifier = Modifier, 60 | innerModifier: Modifier = Modifier, 61 | enabled: Boolean = true, 62 | readOnly: Boolean = false, 63 | readOnlyChips: Boolean = readOnly, 64 | isError: Boolean = false, 65 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 66 | textStyle: TextStyle = LocalTextStyle.current, 67 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 68 | label: @Composable (() -> Unit)? = null, 69 | placeholder: @Composable (() -> Unit)? = null, 70 | leadingIcon: @Composable (() -> Unit)? = null, 71 | trailingIcon: @Composable (() -> Unit)? = null, 72 | chipVerticalSpacing: Dp = 4.dp, 73 | chipHorizontalSpacing: Dp = 4.dp, 74 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 75 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 76 | onChipClick: ((chip: T) -> Unit)? = null, 77 | onChipLongClick: ((chip: T) -> Unit)? = null, 78 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 79 | shape: Shape = TextFieldDefaults.shape, 80 | colors: TextFieldColors = TextFieldDefaults.colors(), 81 | contentPadding: PaddingValues = 82 | if (label == null) { 83 | TextFieldDefaults.contentPaddingWithoutLabel() 84 | } else { 85 | TextFieldDefaults.contentPaddingWithLabel() 86 | } 87 | ) { 88 | var value by remember { mutableStateOf(TextFieldValue()) } 89 | val onValueChange: (TextFieldValue) -> Unit = { value = it } 90 | ChipTextField( 91 | state = state, 92 | onSubmit = { onSubmit(it.text) }, 93 | value = value, 94 | onValueChange = onValueChange, 95 | modifier = modifier, 96 | innerModifier = innerModifier, 97 | enabled = enabled, 98 | readOnly = readOnly, 99 | readOnlyChips = readOnlyChips, 100 | isError = isError, 101 | keyboardOptions = keyboardOptions, 102 | textStyle = textStyle, 103 | chipStyle = chipStyle, 104 | label = label, 105 | placeholder = placeholder, 106 | leadingIcon = leadingIcon, 107 | trailingIcon = trailingIcon, 108 | chipVerticalSpacing = chipVerticalSpacing, 109 | chipHorizontalSpacing = chipHorizontalSpacing, 110 | chipLeadingIcon = chipLeadingIcon, 111 | chipTrailingIcon = chipTrailingIcon, 112 | onChipClick = onChipClick, 113 | onChipLongClick = onChipLongClick, 114 | interactionSource = interactionSource, 115 | shape = shape, 116 | colors = colors, 117 | contentPadding = contentPadding, 118 | ) 119 | } 120 | 121 | /** 122 | * Chip text field with Material Design filled style. 123 | * 124 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 125 | * used to control style, layout and interaction of the inner text field independently. 126 | * 127 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 128 | * 129 | * ```kotlin 130 | * ChipTextField( 131 | * state = ..., 132 | * onSubmit = ..., 133 | * modifier = Modifier, 134 | * innerModifier = Modifier 135 | * .heightIn(max = 100.dp) 136 | * .verticalScroll(state = rememberScrollState()), 137 | * ) 138 | * ``` 139 | * 140 | * @see [BasicChipTextField] 141 | * @see [TextField] 142 | */ 143 | @Composable 144 | fun ChipTextField( 145 | state: ChipTextFieldState, 146 | value: String, 147 | onValueChange: (String) -> Unit, 148 | onSubmit: (value: String) -> T?, 149 | modifier: Modifier = Modifier, 150 | innerModifier: Modifier = Modifier, 151 | enabled: Boolean = true, 152 | readOnly: Boolean = false, 153 | readOnlyChips: Boolean = readOnly, 154 | isError: Boolean = false, 155 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 156 | textStyle: TextStyle = LocalTextStyle.current, 157 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 158 | label: @Composable (() -> Unit)? = null, 159 | placeholder: @Composable (() -> Unit)? = null, 160 | leadingIcon: @Composable (() -> Unit)? = null, 161 | trailingIcon: @Composable (() -> Unit)? = null, 162 | chipVerticalSpacing: Dp = 4.dp, 163 | chipHorizontalSpacing: Dp = 4.dp, 164 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 165 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 166 | onChipClick: ((chip: T) -> Unit)? = null, 167 | onChipLongClick: ((chip: T) -> Unit)? = null, 168 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 169 | shape: Shape = TextFieldDefaults.shape, 170 | colors: TextFieldColors = TextFieldDefaults.colors(), 171 | contentPadding: PaddingValues = 172 | if (label == null) { 173 | TextFieldDefaults.contentPaddingWithoutLabel() 174 | } else { 175 | TextFieldDefaults.contentPaddingWithLabel() 176 | } 177 | ) { 178 | // Copied from androidx.compose.foundation.text.BasicTextField.kt 179 | var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value)) } 180 | val textFieldValue = textFieldValueState.copy(text = value) 181 | SideEffect { 182 | if (textFieldValue.selection != textFieldValueState.selection || 183 | textFieldValue.composition != textFieldValueState.composition 184 | ) { 185 | textFieldValueState = textFieldValue 186 | } 187 | } 188 | var lastTextValue by remember(value) { mutableStateOf(value) } 189 | val mappedOnValueChange: (TextFieldValue) -> Unit = { newTextFieldValueState -> 190 | textFieldValueState = newTextFieldValueState 191 | 192 | val stringChangedSinceLastInvocation = lastTextValue != newTextFieldValueState.text 193 | lastTextValue = newTextFieldValueState.text 194 | 195 | if (stringChangedSinceLastInvocation) { 196 | onValueChange(newTextFieldValueState.text) 197 | } 198 | } 199 | ChipTextField( 200 | state = state, 201 | onSubmit = { onSubmit(it.text) }, 202 | value = textFieldValue, 203 | onValueChange = mappedOnValueChange, 204 | modifier = modifier, 205 | innerModifier = innerModifier, 206 | enabled = enabled, 207 | readOnly = readOnly, 208 | readOnlyChips = readOnlyChips, 209 | isError = isError, 210 | keyboardOptions = keyboardOptions, 211 | textStyle = textStyle, 212 | chipStyle = chipStyle, 213 | label = label, 214 | placeholder = placeholder, 215 | leadingIcon = leadingIcon, 216 | trailingIcon = trailingIcon, 217 | chipVerticalSpacing = chipVerticalSpacing, 218 | chipHorizontalSpacing = chipHorizontalSpacing, 219 | chipLeadingIcon = chipLeadingIcon, 220 | chipTrailingIcon = chipTrailingIcon, 221 | onChipClick = onChipClick, 222 | onChipLongClick = onChipLongClick, 223 | interactionSource = interactionSource, 224 | shape = shape, 225 | colors = colors, 226 | contentPadding = contentPadding, 227 | ) 228 | } 229 | 230 | /** 231 | * Chip text field with Material Design filled style. 232 | * 233 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 234 | * used to control style, layout and interaction of the inner text field independently. 235 | * 236 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 237 | * 238 | * ```kotlin 239 | * ChipTextField( 240 | * state = ..., 241 | * onSubmit = ..., 242 | * modifier = Modifier, 243 | * innerModifier = Modifier 244 | * .heightIn(max = 100.dp) 245 | * .verticalScroll(state = rememberScrollState()), 246 | * ) 247 | * ``` 248 | * 249 | * @see [BasicChipTextField] 250 | * @see [TextField] 251 | */ 252 | @OptIn(ExperimentalMaterial3Api::class) 253 | @Composable 254 | fun ChipTextField( 255 | state: ChipTextFieldState, 256 | value: TextFieldValue, 257 | onValueChange: (TextFieldValue) -> Unit, 258 | onSubmit: (value: TextFieldValue) -> T?, 259 | modifier: Modifier = Modifier, 260 | innerModifier: Modifier = Modifier, 261 | enabled: Boolean = true, 262 | readOnly: Boolean = false, 263 | readOnlyChips: Boolean = readOnly, 264 | isError: Boolean = false, 265 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 266 | textStyle: TextStyle = LocalTextStyle.current, 267 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 268 | label: @Composable (() -> Unit)? = null, 269 | placeholder: @Composable (() -> Unit)? = null, 270 | leadingIcon: @Composable (() -> Unit)? = null, 271 | trailingIcon: @Composable (() -> Unit)? = null, 272 | chipVerticalSpacing: Dp = 4.dp, 273 | chipHorizontalSpacing: Dp = 4.dp, 274 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 275 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 276 | onChipClick: ((chip: T) -> Unit)? = null, 277 | onChipLongClick: ((chip: T) -> Unit)? = null, 278 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 279 | shape: Shape = TextFieldDefaults.shape, 280 | colors: TextFieldColors = TextFieldDefaults.colors(), 281 | contentPadding: PaddingValues = 282 | if (label == null) { 283 | TextFieldDefaults.contentPaddingWithoutLabel() 284 | } else { 285 | TextFieldDefaults.contentPaddingWithLabel() 286 | } 287 | ) { 288 | val fieldColors = remember(colors) { colors.toChipTextFieldColors() } 289 | Box( 290 | modifier = modifier 291 | .background( 292 | fieldColors.backgroundColor(enabled, isError, interactionSource).value, 293 | shape 294 | ) 295 | .indicatorLine(enabled, isError, interactionSource, colors) 296 | ) { 297 | BasicChipTextField( 298 | state = state, 299 | onSubmit = onSubmit, 300 | value = value, 301 | onValueChange = onValueChange, 302 | modifier = innerModifier.fillMaxWidth(), 303 | enabled = enabled, 304 | readOnly = readOnly, 305 | readOnlyChips = readOnlyChips, 306 | isError = isError, 307 | keyboardOptions = keyboardOptions, 308 | textStyle = textStyle, 309 | chipStyle = chipStyle, 310 | chipVerticalSpacing = chipVerticalSpacing, 311 | chipHorizontalSpacing = chipHorizontalSpacing, 312 | chipLeadingIcon = chipLeadingIcon, 313 | chipTrailingIcon = chipTrailingIcon, 314 | onChipClick = onChipClick, 315 | onChipLongClick = onChipLongClick, 316 | interactionSource = interactionSource, 317 | colors = fieldColors, 318 | decorationBox = { innerTextField -> 319 | TextFieldDefaults.DecorationBox( 320 | value = if (state.chips.isEmpty() && value.text.isEmpty()) "" else " ", 321 | innerTextField = innerTextField, 322 | enabled = !readOnly, 323 | singleLine = false, 324 | visualTransformation = VisualTransformation.None, 325 | interactionSource = interactionSource, 326 | isError = isError, 327 | label = label, 328 | placeholder = placeholder, 329 | leadingIcon = leadingIcon, 330 | trailingIcon = trailingIcon, 331 | colors = colors, 332 | contentPadding = contentPadding, 333 | ) 334 | }, 335 | ) 336 | } 337 | } 338 | -------------------------------------------------------------------------------- /chiptextfield-m3/src/commonMain/kotlin/com/dokar/chiptextfield/m3/ChipTextFieldDefaults.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.m3 2 | 3 | import androidx.compose.material3.MaterialTheme 4 | import androidx.compose.runtime.Composable 5 | import androidx.compose.ui.graphics.Color 6 | import androidx.compose.ui.graphics.Shape 7 | import androidx.compose.ui.unit.Dp 8 | import androidx.compose.ui.unit.dp 9 | import com.dokar.chiptextfield.ChipStyle 10 | import com.dokar.chiptextfield.DefaultChipStyle 11 | 12 | object ChipTextFieldDefaults { 13 | private const val DISABLED_CONTENT_ALPHA = 0.38f 14 | 15 | @Composable 16 | fun chipStyle( 17 | shape: Shape = MaterialTheme.shapes.small, 18 | cursorColor: Color = MaterialTheme.colorScheme.primary, 19 | focusedBorderWidth: Dp = 1.dp, 20 | unfocusedBorderWidth: Dp = 1.dp, 21 | disabledBorderWidth: Dp = 1.dp, 22 | focusedBorderColor: Color = MaterialTheme.colorScheme.outline, 23 | unfocusedBorderColor: Color = focusedBorderColor, 24 | disabledBorderColor: Color = focusedBorderColor.copy(alpha = DISABLED_CONTENT_ALPHA), 25 | focusedTextColor: Color = MaterialTheme.colorScheme.onSurface, 26 | unfocusedTextColor: Color = focusedTextColor, 27 | disabledTextColor: Color = focusedTextColor.copy(alpha = DISABLED_CONTENT_ALPHA), 28 | focusedBackgroundColor: Color = Color.Transparent, 29 | unfocusedBackgroundColor: Color = focusedBackgroundColor, 30 | disabledBackgroundColor: Color = focusedBackgroundColor, 31 | ): ChipStyle { 32 | return DefaultChipStyle( 33 | shape = shape, 34 | cursorColor = cursorColor, 35 | focusedBorderWidth = focusedBorderWidth, 36 | unfocusedBorderWidth = unfocusedBorderWidth, 37 | disabledBorderWidth = disabledBorderWidth, 38 | focusedBorderColor = focusedBorderColor, 39 | unfocusedBorderColor = unfocusedBorderColor, 40 | disabledBorderColor = disabledBorderColor, 41 | focusedTextColor = focusedTextColor, 42 | unfocusedTextColor = unfocusedTextColor, 43 | disabledTextColor = disabledTextColor, 44 | focusedBackgroundColor = focusedBackgroundColor, 45 | unfocusedBackgroundColor = unfocusedBackgroundColor, 46 | disabledBackgroundColor = disabledBackgroundColor, 47 | ) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /chiptextfield-m3/src/commonMain/kotlin/com/dokar/chiptextfield/m3/CloseButton.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.m3 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.ui.Modifier 5 | import androidx.compose.ui.graphics.Color 6 | import androidx.compose.ui.unit.Dp 7 | import androidx.compose.ui.unit.dp 8 | import com.dokar.chiptextfield.BasicCloseButton 9 | import com.dokar.chiptextfield.Chip 10 | import com.dokar.chiptextfield.ChipTextFieldState 11 | 12 | @Composable 13 | fun CloseButton( 14 | state: ChipTextFieldState, 15 | chip: T, 16 | modifier: Modifier = Modifier, 17 | backgroundColor: Color = Color.Black.copy(alpha = 0.3f), 18 | strokeColor: Color = Color.White, 19 | startPadding: Dp = 0.dp, 20 | endPadding: Dp = 6.dp 21 | ) { 22 | BasicCloseButton( 23 | state = state, 24 | chip = chip, 25 | modifier = modifier, 26 | backgroundColor = backgroundColor, 27 | strokeColor = strokeColor, 28 | startPadding = startPadding, 29 | endPadding = endPadding, 30 | ) 31 | } -------------------------------------------------------------------------------- /chiptextfield-m3/src/commonMain/kotlin/com/dokar/chiptextfield/m3/OutlinedChipTextField.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.m3 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.interaction.MutableInteractionSource 5 | import androidx.compose.foundation.layout.Box 6 | import androidx.compose.foundation.layout.fillMaxWidth 7 | import androidx.compose.foundation.layout.padding 8 | import androidx.compose.foundation.text.KeyboardOptions 9 | import androidx.compose.material3.ExperimentalMaterial3Api 10 | import androidx.compose.material3.LocalTextStyle 11 | import androidx.compose.material3.OutlinedTextField 12 | import androidx.compose.material3.OutlinedTextFieldDefaults 13 | import androidx.compose.material3.TextFieldColors 14 | import androidx.compose.runtime.Composable 15 | import androidx.compose.runtime.SideEffect 16 | import androidx.compose.runtime.getValue 17 | import androidx.compose.runtime.mutableStateOf 18 | import androidx.compose.runtime.remember 19 | import androidx.compose.runtime.setValue 20 | import androidx.compose.ui.Modifier 21 | import androidx.compose.ui.graphics.Shape 22 | import androidx.compose.ui.text.TextStyle 23 | import androidx.compose.ui.text.input.TextFieldValue 24 | import androidx.compose.ui.text.input.VisualTransformation 25 | import androidx.compose.ui.unit.Dp 26 | import androidx.compose.ui.unit.dp 27 | import com.dokar.chiptextfield.BasicChipTextField 28 | import com.dokar.chiptextfield.Chip 29 | import com.dokar.chiptextfield.ChipStyle 30 | import com.dokar.chiptextfield.ChipTextFieldState 31 | import com.dokar.chiptextfield.util.runIf 32 | 33 | /** 34 | * Chip text field with Material Design outlined style. 35 | * 36 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 37 | * used to control style, layout and interaction of the inner text field independently. 38 | * 39 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 40 | * 41 | * ```kotlin 42 | * OutlinedChipTextField( 43 | * state = ..., 44 | * onSubmit = ..., 45 | * modifier = Modifier, 46 | * innerModifier = Modifier 47 | * .heightIn(max = 100.dp) 48 | * .verticalScroll(state = rememberScrollState()), 49 | * ) 50 | * ``` 51 | * 52 | * @see [BasicChipTextField] 53 | * @see [OutlinedTextField] 54 | */ 55 | @Composable 56 | fun OutlinedChipTextField( 57 | state: ChipTextFieldState, 58 | onSubmit: (value: String) -> T?, 59 | modifier: Modifier = Modifier, 60 | innerModifier: Modifier = Modifier, 61 | enabled: Boolean = true, 62 | readOnly: Boolean = false, 63 | readOnlyChips: Boolean = readOnly, 64 | isError: Boolean = false, 65 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 66 | textStyle: TextStyle = LocalTextStyle.current, 67 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 68 | label: @Composable (() -> Unit)? = null, 69 | placeholder: @Composable (() -> Unit)? = null, 70 | leadingIcon: @Composable (() -> Unit)? = null, 71 | trailingIcon: @Composable (() -> Unit)? = null, 72 | chipVerticalSpacing: Dp = 4.dp, 73 | chipHorizontalSpacing: Dp = 4.dp, 74 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 75 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 76 | onChipClick: ((chip: T) -> Unit)? = null, 77 | onChipLongClick: ((chip: T) -> Unit)? = null, 78 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 79 | shape: Shape = OutlinedTextFieldDefaults.shape, 80 | colors: TextFieldColors = OutlinedTextFieldDefaults.colors(), 81 | ) { 82 | var value by remember { mutableStateOf(TextFieldValue()) } 83 | val onValueChange: (TextFieldValue) -> Unit = { value = it } 84 | OutlinedChipTextField( 85 | state = state, 86 | onSubmit = { onSubmit(it.text) }, 87 | value = value, 88 | onValueChange = onValueChange, 89 | modifier = modifier, 90 | innerModifier = innerModifier, 91 | enabled = enabled, 92 | readOnly = readOnly, 93 | readOnlyChips = readOnlyChips, 94 | isError = isError, 95 | keyboardOptions = keyboardOptions, 96 | textStyle = textStyle, 97 | chipStyle = chipStyle, 98 | label = label, 99 | placeholder = placeholder, 100 | leadingIcon = leadingIcon, 101 | trailingIcon = trailingIcon, 102 | chipVerticalSpacing = chipVerticalSpacing, 103 | chipHorizontalSpacing = chipHorizontalSpacing, 104 | chipLeadingIcon = chipLeadingIcon, 105 | chipTrailingIcon = chipTrailingIcon, 106 | onChipClick = onChipClick, 107 | onChipLongClick = onChipLongClick, 108 | interactionSource = interactionSource, 109 | shape = shape, 110 | colors = colors, 111 | ) 112 | } 113 | 114 | /** 115 | * Chip text field with Material Design outlined style. 116 | * 117 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 118 | * used to control style, layout and interaction of the inner text field independently. 119 | * 120 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 121 | * 122 | * ```kotlin 123 | * OutlinedChipTextField( 124 | * state = ..., 125 | * onSubmit = ..., 126 | * modifier = Modifier, 127 | * innerModifier = Modifier 128 | * .heightIn(max = 100.dp) 129 | * .verticalScroll(state = rememberScrollState()), 130 | * ) 131 | * ``` 132 | * 133 | * @see [BasicChipTextField] 134 | * @see [OutlinedTextField] 135 | */ 136 | @Composable 137 | fun OutlinedChipTextField( 138 | state: ChipTextFieldState, 139 | value: String, 140 | onValueChange: (String) -> Unit, 141 | onSubmit: (value: String) -> T?, 142 | modifier: Modifier = Modifier, 143 | innerModifier: Modifier = Modifier, 144 | enabled: Boolean = true, 145 | readOnly: Boolean = false, 146 | readOnlyChips: Boolean = readOnly, 147 | isError: Boolean = false, 148 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 149 | textStyle: TextStyle = LocalTextStyle.current, 150 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 151 | label: @Composable (() -> Unit)? = null, 152 | placeholder: @Composable (() -> Unit)? = null, 153 | leadingIcon: @Composable (() -> Unit)? = null, 154 | trailingIcon: @Composable (() -> Unit)? = null, 155 | chipVerticalSpacing: Dp = 4.dp, 156 | chipHorizontalSpacing: Dp = 4.dp, 157 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 158 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 159 | onChipClick: ((chip: T) -> Unit)? = null, 160 | onChipLongClick: ((chip: T) -> Unit)? = null, 161 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 162 | shape: Shape = OutlinedTextFieldDefaults.shape, 163 | colors: TextFieldColors = OutlinedTextFieldDefaults.colors(), 164 | ) { 165 | // Copied from androidx.compose.foundation.text.BasicTextField.kt 166 | var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value)) } 167 | val textFieldValue = textFieldValueState.copy(text = value) 168 | SideEffect { 169 | if (textFieldValue.selection != textFieldValueState.selection || 170 | textFieldValue.composition != textFieldValueState.composition 171 | ) { 172 | textFieldValueState = textFieldValue 173 | } 174 | } 175 | var lastTextValue by remember(value) { mutableStateOf(value) } 176 | val mappedOnValueChange: (TextFieldValue) -> Unit = { newTextFieldValueState -> 177 | textFieldValueState = newTextFieldValueState 178 | 179 | val stringChangedSinceLastInvocation = lastTextValue != newTextFieldValueState.text 180 | lastTextValue = newTextFieldValueState.text 181 | 182 | if (stringChangedSinceLastInvocation) { 183 | onValueChange(newTextFieldValueState.text) 184 | } 185 | } 186 | OutlinedChipTextField( 187 | state = state, 188 | onSubmit = { onSubmit(it.text) }, 189 | value = textFieldValue, 190 | onValueChange = mappedOnValueChange, 191 | modifier = modifier, 192 | innerModifier = innerModifier, 193 | enabled = enabled, 194 | readOnly = readOnly, 195 | readOnlyChips = readOnlyChips, 196 | isError = isError, 197 | keyboardOptions = keyboardOptions, 198 | textStyle = textStyle, 199 | chipStyle = chipStyle, 200 | label = label, 201 | placeholder = placeholder, 202 | leadingIcon = leadingIcon, 203 | trailingIcon = trailingIcon, 204 | chipVerticalSpacing = chipVerticalSpacing, 205 | chipHorizontalSpacing = chipHorizontalSpacing, 206 | chipLeadingIcon = chipLeadingIcon, 207 | chipTrailingIcon = chipTrailingIcon, 208 | onChipClick = onChipClick, 209 | onChipLongClick = onChipLongClick, 210 | interactionSource = interactionSource, 211 | shape = shape, 212 | colors = colors, 213 | ) 214 | } 215 | 216 | /** 217 | * Chip text field with Material Design outlined style. 218 | * 219 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 220 | * used to control style, layout and interaction of the inner text field independently. 221 | * 222 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 223 | * 224 | * ```kotlin 225 | * OutlinedChipTextField( 226 | * state = ..., 227 | * onSubmit = ..., 228 | * modifier = Modifier, 229 | * innerModifier = Modifier 230 | * .heightIn(max = 100.dp) 231 | * .verticalScroll(state = rememberScrollState()), 232 | * ) 233 | * ``` 234 | * 235 | * @see [BasicChipTextField] 236 | * @see [OutlinedTextField] 237 | */ 238 | @OptIn(ExperimentalMaterial3Api::class) 239 | @Composable 240 | fun OutlinedChipTextField( 241 | state: ChipTextFieldState, 242 | value: TextFieldValue, 243 | onValueChange: (TextFieldValue) -> Unit, 244 | onSubmit: (value: TextFieldValue) -> T?, 245 | modifier: Modifier = Modifier, 246 | innerModifier: Modifier = Modifier, 247 | enabled: Boolean = true, 248 | readOnly: Boolean = false, 249 | readOnlyChips: Boolean = readOnly, 250 | isError: Boolean = false, 251 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 252 | textStyle: TextStyle = LocalTextStyle.current, 253 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 254 | label: @Composable (() -> Unit)? = null, 255 | placeholder: @Composable (() -> Unit)? = null, 256 | leadingIcon: @Composable (() -> Unit)? = null, 257 | trailingIcon: @Composable (() -> Unit)? = null, 258 | chipVerticalSpacing: Dp = 4.dp, 259 | chipHorizontalSpacing: Dp = 4.dp, 260 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 261 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 262 | onChipClick: ((chip: T) -> Unit)? = null, 263 | onChipLongClick: ((chip: T) -> Unit)? = null, 264 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 265 | shape: Shape = OutlinedTextFieldDefaults.shape, 266 | colors: TextFieldColors = OutlinedTextFieldDefaults.colors(), 267 | ) { 268 | val fieldColors = remember(colors) { colors.toChipTextFieldColors() } 269 | Box( 270 | modifier = modifier 271 | .runIf(label != null) { modifier.padding(top = 8.dp) } 272 | .background( 273 | fieldColors.backgroundColor(enabled, isError, interactionSource).value, 274 | shape 275 | ) 276 | ) { 277 | BasicChipTextField( 278 | state = state, 279 | onSubmit = onSubmit, 280 | value = value, 281 | onValueChange = onValueChange, 282 | modifier = innerModifier.fillMaxWidth(), 283 | enabled = enabled, 284 | readOnly = readOnly, 285 | readOnlyChips = readOnlyChips, 286 | isError = isError, 287 | keyboardOptions = keyboardOptions, 288 | textStyle = textStyle, 289 | chipStyle = chipStyle, 290 | chipVerticalSpacing = chipVerticalSpacing, 291 | chipHorizontalSpacing = chipHorizontalSpacing, 292 | chipLeadingIcon = chipLeadingIcon, 293 | chipTrailingIcon = chipTrailingIcon, 294 | onChipClick = onChipClick, 295 | onChipLongClick = onChipLongClick, 296 | interactionSource = interactionSource, 297 | colors = fieldColors, 298 | decorationBox = { innerTextField -> 299 | OutlinedTextFieldDefaults.DecorationBox( 300 | value = if (state.chips.isEmpty() && value.text.isEmpty()) "" else " ", 301 | innerTextField = innerTextField, 302 | enabled = !readOnly, 303 | singleLine = false, 304 | visualTransformation = VisualTransformation.None, 305 | interactionSource = interactionSource, 306 | isError = isError, 307 | label = label, 308 | placeholder = placeholder, 309 | leadingIcon = leadingIcon, 310 | trailingIcon = trailingIcon, 311 | colors = colors, 312 | container = { 313 | OutlinedTextFieldDefaults.ContainerBox( 314 | enabled, 315 | isError, 316 | interactionSource, 317 | colors, 318 | shape 319 | ) 320 | }, 321 | ) 322 | }, 323 | ) 324 | } 325 | } 326 | -------------------------------------------------------------------------------- /chiptextfield-m3/src/commonMain/kotlin/com/dokar/chiptextfield/m3/TextFieldColorsConverter.kt: -------------------------------------------------------------------------------- 1 | @file:Suppress("INVISIBLE_MEMBER", "INVISIBLE_REFERENCE") 2 | 3 | package com.dokar.chiptextfield.m3 4 | 5 | import androidx.compose.animation.animateColorAsState 6 | import androidx.compose.animation.core.tween 7 | import androidx.compose.foundation.interaction.InteractionSource 8 | import androidx.compose.foundation.interaction.collectIsFocusedAsState 9 | import androidx.compose.material3.TextFieldColors 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.runtime.State 12 | import androidx.compose.runtime.getValue 13 | import androidx.compose.runtime.rememberUpdatedState 14 | import androidx.compose.ui.graphics.Color 15 | import com.dokar.chiptextfield.ChipTextFieldColors 16 | 17 | // Copied from material3 v1.2 18 | private const val AnimationDuration = 150 19 | 20 | fun TextFieldColors.toChipTextFieldColors(): ChipTextFieldColors { 21 | return object : ChipTextFieldColors { 22 | @Composable 23 | override fun textColor( 24 | enabled: Boolean, 25 | isError: Boolean, 26 | interactionSource: InteractionSource 27 | ): State { 28 | val focused by interactionSource.collectIsFocusedAsState() 29 | val targetValue = when { 30 | !enabled -> disabledTextColor 31 | isError -> errorTextColor 32 | focused -> focusedTextColor 33 | else -> unfocusedTextColor 34 | } 35 | return rememberUpdatedState(targetValue) 36 | } 37 | 38 | @Composable 39 | override fun cursorColor(isError: Boolean): State { 40 | return rememberUpdatedState(if (isError) errorCursorColor else cursorColor) 41 | } 42 | 43 | @Composable 44 | override fun backgroundColor( 45 | enabled: Boolean, 46 | isError: Boolean, 47 | interactionSource: InteractionSource 48 | ): State { 49 | val focused by interactionSource.collectIsFocusedAsState() 50 | val targetValue = when { 51 | !enabled -> disabledContainerColor 52 | isError -> errorContainerColor 53 | focused -> focusedContainerColor 54 | else -> unfocusedContainerColor 55 | } 56 | return animateColorAsState(targetValue, tween(durationMillis = AnimationDuration)) 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /chiptextfield/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /chiptextfield/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("com.android.library") 3 | id("kotlin-multiplatform") 4 | id('com.vanniktech.maven.publish') 5 | id("org.jetbrains.compose") 6 | alias(libs.plugins.compose.compiler) 7 | } 8 | 9 | android { 10 | namespace "com.dokar.chiptextfield" 11 | 12 | compileSdk libs.versions.androidCompileSdk.get().toInteger() 13 | 14 | defaultConfig { 15 | minSdk 21 16 | targetSdkVersion libs.versions.androidTargetSdk.get().toInteger() 17 | 18 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 19 | consumerProguardFiles "consumer-rules.pro" 20 | } 21 | 22 | buildTypes { 23 | release { 24 | minifyEnabled false 25 | proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro" 26 | } 27 | } 28 | } 29 | 30 | kotlin { 31 | jvmToolchain(11) 32 | 33 | jvm() 34 | // iosX64() 35 | // macosX64() 36 | js(IR) { 37 | browser() 38 | } 39 | wasmJs { 40 | binaries.executable() 41 | binaries.library() 42 | } 43 | 44 | androidTarget { 45 | publishLibraryVariants("release") 46 | } 47 | 48 | sourceSets { 49 | commonMain { 50 | dependencies { 51 | api project(":chiptextfield-core") 52 | api(compose.ui) 53 | api(compose.foundation) 54 | api(compose.material) 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /chiptextfield/consumer-rules.pro: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/chiptextfield/consumer-rules.pro -------------------------------------------------------------------------------- /chiptextfield/gradle.properties: -------------------------------------------------------------------------------- 1 | POM_ARTIFACT_ID=chiptextfield 2 | POM_PACKAGING=aar -------------------------------------------------------------------------------- /chiptextfield/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /chiptextfield/src/androidMain/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chiptextfield/src/commonMain/kotlin/com/dokar/chiptextfield/ChipTextField.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.interaction.MutableInteractionSource 5 | import androidx.compose.foundation.layout.Box 6 | import androidx.compose.foundation.layout.PaddingValues 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.text.KeyboardOptions 9 | import androidx.compose.material.ExperimentalMaterialApi 10 | import androidx.compose.material.LocalTextStyle 11 | import androidx.compose.material.TextField 12 | import androidx.compose.material.TextFieldColors 13 | import androidx.compose.material.TextFieldDefaults 14 | import androidx.compose.material.TextFieldDefaults.indicatorLine 15 | import androidx.compose.runtime.Composable 16 | import androidx.compose.runtime.SideEffect 17 | import androidx.compose.runtime.getValue 18 | import androidx.compose.runtime.mutableStateOf 19 | import androidx.compose.runtime.remember 20 | import androidx.compose.runtime.setValue 21 | import androidx.compose.ui.Modifier 22 | import androidx.compose.ui.graphics.Shape 23 | import androidx.compose.ui.text.TextStyle 24 | import androidx.compose.ui.text.input.TextFieldValue 25 | import androidx.compose.ui.text.input.VisualTransformation 26 | import androidx.compose.ui.unit.Dp 27 | import androidx.compose.ui.unit.dp 28 | 29 | /** 30 | * Chip text field with Material Design filled style. 31 | * 32 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 33 | * used to control style, layout and interaction of the inner text field independently. 34 | * 35 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 36 | * 37 | * ```kotlin 38 | * ChipTextField( 39 | * state = ..., 40 | * onSubmit = ..., 41 | * modifier = Modifier, 42 | * innerModifier = Modifier 43 | * .heightIn(max = 100.dp) 44 | * .verticalScroll(state = rememberScrollState()), 45 | * ) 46 | * ``` 47 | * 48 | * @see [BasicChipTextField] 49 | * @see [TextField] 50 | */ 51 | @OptIn(ExperimentalMaterialApi::class) 52 | @Composable 53 | fun ChipTextField( 54 | state: ChipTextFieldState, 55 | onSubmit: (value: String) -> T?, 56 | modifier: Modifier = Modifier, 57 | innerModifier: Modifier = Modifier, 58 | enabled: Boolean = true, 59 | readOnly: Boolean = false, 60 | readOnlyChips: Boolean = readOnly, 61 | isError: Boolean = false, 62 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 63 | textStyle: TextStyle = LocalTextStyle.current, 64 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 65 | label: @Composable (() -> Unit)? = null, 66 | placeholder: @Composable (() -> Unit)? = null, 67 | leadingIcon: @Composable (() -> Unit)? = null, 68 | trailingIcon: @Composable (() -> Unit)? = null, 69 | chipVerticalSpacing: Dp = 4.dp, 70 | chipHorizontalSpacing: Dp = 4.dp, 71 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 72 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 73 | onChipClick: ((chip: T) -> Unit)? = null, 74 | onChipLongClick: ((chip: T) -> Unit)? = null, 75 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 76 | shape: Shape = TextFieldDefaults.TextFieldShape, 77 | colors: TextFieldColors = TextFieldDefaults.textFieldColors(), 78 | contentPadding: PaddingValues = 79 | if (label == null) { 80 | TextFieldDefaults.textFieldWithoutLabelPadding() 81 | } else { 82 | TextFieldDefaults.textFieldWithLabelPadding() 83 | } 84 | ) { 85 | var value by remember { mutableStateOf(TextFieldValue()) } 86 | val onValueChange: (TextFieldValue) -> Unit = { value = it } 87 | ChipTextField( 88 | state = state, 89 | onSubmit = { onSubmit(it.text) }, 90 | value = value, 91 | onValueChange = onValueChange, 92 | modifier = modifier, 93 | innerModifier = innerModifier, 94 | enabled = enabled, 95 | readOnly = readOnly, 96 | readOnlyChips = readOnlyChips, 97 | isError = isError, 98 | keyboardOptions = keyboardOptions, 99 | textStyle = textStyle, 100 | chipStyle = chipStyle, 101 | label = label, 102 | placeholder = placeholder, 103 | leadingIcon = leadingIcon, 104 | trailingIcon = trailingIcon, 105 | chipVerticalSpacing = chipVerticalSpacing, 106 | chipHorizontalSpacing = chipHorizontalSpacing, 107 | chipLeadingIcon = chipLeadingIcon, 108 | chipTrailingIcon = chipTrailingIcon, 109 | onChipClick = onChipClick, 110 | onChipLongClick = onChipLongClick, 111 | interactionSource = interactionSource, 112 | shape = shape, 113 | colors = colors, 114 | contentPadding = contentPadding, 115 | ) 116 | } 117 | 118 | /** 119 | * Chip text field with Material Design filled style. 120 | * 121 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 122 | * used to control style, layout and interaction of the inner text field independently. 123 | * 124 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 125 | * 126 | * ```kotlin 127 | * ChipTextField( 128 | * state = ..., 129 | * onSubmit = ..., 130 | * modifier = Modifier, 131 | * innerModifier = Modifier 132 | * .heightIn(max = 100.dp) 133 | * .verticalScroll(state = rememberScrollState()), 134 | * ) 135 | * ``` 136 | * 137 | * @see [BasicChipTextField] 138 | * @see [TextField] 139 | */ 140 | @OptIn(ExperimentalMaterialApi::class) 141 | @Composable 142 | fun ChipTextField( 143 | state: ChipTextFieldState, 144 | value: String, 145 | onValueChange: (String) -> Unit, 146 | onSubmit: (value: String) -> T?, 147 | modifier: Modifier = Modifier, 148 | innerModifier: Modifier = Modifier, 149 | enabled: Boolean = true, 150 | readOnly: Boolean = false, 151 | readOnlyChips: Boolean = readOnly, 152 | isError: Boolean = false, 153 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 154 | textStyle: TextStyle = LocalTextStyle.current, 155 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 156 | label: @Composable (() -> Unit)? = null, 157 | placeholder: @Composable (() -> Unit)? = null, 158 | leadingIcon: @Composable (() -> Unit)? = null, 159 | trailingIcon: @Composable (() -> Unit)? = null, 160 | chipVerticalSpacing: Dp = 4.dp, 161 | chipHorizontalSpacing: Dp = 4.dp, 162 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 163 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 164 | onChipClick: ((chip: T) -> Unit)? = null, 165 | onChipLongClick: ((chip: T) -> Unit)? = null, 166 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 167 | shape: Shape = TextFieldDefaults.TextFieldShape, 168 | colors: TextFieldColors = TextFieldDefaults.textFieldColors(), 169 | contentPadding: PaddingValues = 170 | if (label == null) { 171 | TextFieldDefaults.textFieldWithoutLabelPadding() 172 | } else { 173 | TextFieldDefaults.textFieldWithLabelPadding() 174 | } 175 | ) { 176 | // Copied from androidx.compose.foundation.text.BasicTextField.kt 177 | var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value)) } 178 | val textFieldValue = textFieldValueState.copy(text = value) 179 | SideEffect { 180 | if (textFieldValue.selection != textFieldValueState.selection || 181 | textFieldValue.composition != textFieldValueState.composition 182 | ) { 183 | textFieldValueState = textFieldValue 184 | } 185 | } 186 | var lastTextValue by remember(value) { mutableStateOf(value) } 187 | val mappedOnValueChange: (TextFieldValue) -> Unit = { newTextFieldValueState -> 188 | textFieldValueState = newTextFieldValueState 189 | 190 | val stringChangedSinceLastInvocation = lastTextValue != newTextFieldValueState.text 191 | lastTextValue = newTextFieldValueState.text 192 | 193 | if (stringChangedSinceLastInvocation) { 194 | onValueChange(newTextFieldValueState.text) 195 | } 196 | } 197 | ChipTextField( 198 | state = state, 199 | onSubmit = { onSubmit(it.text) }, 200 | value = textFieldValue, 201 | onValueChange = mappedOnValueChange, 202 | modifier = modifier, 203 | innerModifier = innerModifier, 204 | enabled = enabled, 205 | readOnly = readOnly, 206 | readOnlyChips = readOnlyChips, 207 | isError = isError, 208 | keyboardOptions = keyboardOptions, 209 | textStyle = textStyle, 210 | chipStyle = chipStyle, 211 | label = label, 212 | placeholder = placeholder, 213 | leadingIcon = leadingIcon, 214 | trailingIcon = trailingIcon, 215 | chipVerticalSpacing = chipVerticalSpacing, 216 | chipHorizontalSpacing = chipHorizontalSpacing, 217 | chipLeadingIcon = chipLeadingIcon, 218 | chipTrailingIcon = chipTrailingIcon, 219 | onChipClick = onChipClick, 220 | onChipLongClick = onChipLongClick, 221 | interactionSource = interactionSource, 222 | shape = shape, 223 | colors = colors, 224 | contentPadding = contentPadding, 225 | ) 226 | } 227 | 228 | /** 229 | * Chip text field with Material Design filled style. 230 | * 231 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 232 | * used to control style, layout and interaction of the inner text field independently. 233 | * 234 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 235 | * 236 | * ```kotlin 237 | * ChipTextField( 238 | * state = ..., 239 | * onSubmit = ..., 240 | * modifier = Modifier, 241 | * innerModifier = Modifier 242 | * .heightIn(max = 100.dp) 243 | * .verticalScroll(state = rememberScrollState()), 244 | * ) 245 | * ``` 246 | * 247 | * @see [BasicChipTextField] 248 | * @see [TextField] 249 | */ 250 | @OptIn(ExperimentalMaterialApi::class) 251 | @Composable 252 | fun ChipTextField( 253 | state: ChipTextFieldState, 254 | value: TextFieldValue, 255 | onValueChange: (TextFieldValue) -> Unit, 256 | onSubmit: (value: TextFieldValue) -> T?, 257 | modifier: Modifier = Modifier, 258 | innerModifier: Modifier = Modifier, 259 | enabled: Boolean = true, 260 | readOnly: Boolean = false, 261 | readOnlyChips: Boolean = readOnly, 262 | isError: Boolean = false, 263 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 264 | textStyle: TextStyle = LocalTextStyle.current, 265 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 266 | label: @Composable (() -> Unit)? = null, 267 | placeholder: @Composable (() -> Unit)? = null, 268 | leadingIcon: @Composable (() -> Unit)? = null, 269 | trailingIcon: @Composable (() -> Unit)? = null, 270 | chipVerticalSpacing: Dp = 4.dp, 271 | chipHorizontalSpacing: Dp = 4.dp, 272 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 273 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 274 | onChipClick: ((chip: T) -> Unit)? = null, 275 | onChipLongClick: ((chip: T) -> Unit)? = null, 276 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 277 | shape: Shape = TextFieldDefaults.TextFieldShape, 278 | colors: TextFieldColors = TextFieldDefaults.textFieldColors(), 279 | contentPadding: PaddingValues = 280 | if (label == null) { 281 | TextFieldDefaults.textFieldWithoutLabelPadding() 282 | } else { 283 | TextFieldDefaults.textFieldWithLabelPadding() 284 | } 285 | ) { 286 | val fieldColors = remember(colors) { colors.toChipTextFieldColors() } 287 | Box( 288 | modifier = modifier 289 | .background( 290 | fieldColors.backgroundColor(enabled, isError, interactionSource).value, 291 | shape 292 | ) 293 | .indicatorLine(enabled, isError, interactionSource, colors) 294 | ) { 295 | BasicChipTextField( 296 | state = state, 297 | onSubmit = onSubmit, 298 | value = value, 299 | onValueChange = onValueChange, 300 | modifier = innerModifier.fillMaxWidth(), 301 | enabled = enabled, 302 | readOnly = readOnly, 303 | readOnlyChips = readOnlyChips, 304 | isError = isError, 305 | keyboardOptions = keyboardOptions, 306 | textStyle = textStyle, 307 | chipStyle = chipStyle, 308 | chipVerticalSpacing = chipVerticalSpacing, 309 | chipHorizontalSpacing = chipHorizontalSpacing, 310 | chipLeadingIcon = chipLeadingIcon, 311 | chipTrailingIcon = chipTrailingIcon, 312 | onChipClick = onChipClick, 313 | onChipLongClick = onChipLongClick, 314 | interactionSource = interactionSource, 315 | colors = fieldColors, 316 | decorationBox = { innerTextField -> 317 | TextFieldDefaults.TextFieldDecorationBox( 318 | value = if (state.chips.isEmpty() && value.text.isEmpty()) "" else " ", 319 | innerTextField = innerTextField, 320 | enabled = !readOnly, 321 | singleLine = false, 322 | visualTransformation = VisualTransformation.None, 323 | interactionSource = interactionSource, 324 | isError = isError, 325 | label = label, 326 | placeholder = placeholder, 327 | leadingIcon = leadingIcon, 328 | trailingIcon = trailingIcon, 329 | colors = colors, 330 | contentPadding = contentPadding, 331 | ) 332 | }, 333 | ) 334 | } 335 | } 336 | -------------------------------------------------------------------------------- /chiptextfield/src/commonMain/kotlin/com/dokar/chiptextfield/ChipTextFieldDefaults.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.shape.CircleShape 4 | import androidx.compose.material.ContentAlpha 5 | import androidx.compose.material.MaterialTheme 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.ui.graphics.Color 8 | import androidx.compose.ui.graphics.Shape 9 | import androidx.compose.ui.unit.Dp 10 | import androidx.compose.ui.unit.dp 11 | 12 | object ChipTextFieldDefaults { 13 | @Composable 14 | fun chipStyle( 15 | shape: Shape = CircleShape, 16 | cursorColor: Color = MaterialTheme.colors.primary, 17 | focusedBorderWidth: Dp = 1.dp, 18 | unfocusedBorderWidth: Dp = 1.dp, 19 | disabledBorderWidth: Dp = 1.dp, 20 | focusedBorderColor: Color = MaterialTheme.colors.onBackground, 21 | unfocusedBorderColor: Color = focusedBorderColor, 22 | disabledBorderColor: Color = focusedBorderColor.copy(alpha = ContentAlpha.disabled), 23 | focusedTextColor: Color = MaterialTheme.colors.onBackground, 24 | unfocusedTextColor: Color = focusedTextColor, 25 | disabledTextColor: Color = focusedTextColor.copy(alpha = ContentAlpha.disabled), 26 | focusedBackgroundColor: Color = Color.Transparent, 27 | unfocusedBackgroundColor: Color = focusedBackgroundColor, 28 | disabledBackgroundColor: Color = focusedBackgroundColor, 29 | ): ChipStyle { 30 | return DefaultChipStyle( 31 | shape = shape, 32 | cursorColor = cursorColor, 33 | focusedBorderWidth = focusedBorderWidth, 34 | unfocusedBorderWidth = unfocusedBorderWidth, 35 | disabledBorderWidth = disabledBorderWidth, 36 | focusedBorderColor = focusedBorderColor, 37 | unfocusedBorderColor = unfocusedBorderColor, 38 | disabledBorderColor = disabledBorderColor, 39 | focusedTextColor = focusedTextColor, 40 | unfocusedTextColor = unfocusedTextColor, 41 | disabledTextColor = disabledTextColor, 42 | focusedBackgroundColor = focusedBackgroundColor, 43 | unfocusedBackgroundColor = unfocusedBackgroundColor, 44 | disabledBackgroundColor = disabledBackgroundColor, 45 | ) 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /chiptextfield/src/commonMain/kotlin/com/dokar/chiptextfield/CloseButton.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.material.MaterialTheme 4 | import androidx.compose.runtime.Composable 5 | import androidx.compose.ui.Modifier 6 | import androidx.compose.ui.graphics.Color 7 | import androidx.compose.ui.unit.Dp 8 | import androidx.compose.ui.unit.dp 9 | 10 | @Composable 11 | fun CloseButton( 12 | state: ChipTextFieldState, 13 | chip: T, 14 | modifier: Modifier = Modifier, 15 | backgroundColor: Color = if (MaterialTheme.colors.isLight) { 16 | Color.Black.copy(alpha = 0.3f) 17 | } else { 18 | Color.White.copy(alpha = 0.3f) 19 | }, 20 | strokeColor: Color = Color.White, 21 | startPadding: Dp = 0.dp, 22 | endPadding: Dp = 6.dp 23 | ) { 24 | BasicCloseButton( 25 | state = state, 26 | chip = chip, 27 | modifier = modifier, 28 | backgroundColor = backgroundColor, 29 | strokeColor = strokeColor, 30 | startPadding = startPadding, 31 | endPadding = endPadding, 32 | ) 33 | } -------------------------------------------------------------------------------- /chiptextfield/src/commonMain/kotlin/com/dokar/chiptextfield/OutlinedChipTextField.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.interaction.MutableInteractionSource 5 | import androidx.compose.foundation.layout.Box 6 | import androidx.compose.foundation.layout.fillMaxWidth 7 | import androidx.compose.foundation.layout.padding 8 | import androidx.compose.foundation.text.KeyboardOptions 9 | import androidx.compose.material.ExperimentalMaterialApi 10 | import androidx.compose.material.LocalTextStyle 11 | import androidx.compose.material.MaterialTheme 12 | import androidx.compose.material.OutlinedTextField 13 | import androidx.compose.material.TextFieldColors 14 | import androidx.compose.material.TextFieldDefaults 15 | import androidx.compose.runtime.Composable 16 | import androidx.compose.runtime.SideEffect 17 | import androidx.compose.runtime.getValue 18 | import androidx.compose.runtime.mutableStateOf 19 | import androidx.compose.runtime.remember 20 | import androidx.compose.runtime.setValue 21 | import androidx.compose.ui.Modifier 22 | import androidx.compose.ui.graphics.Shape 23 | import androidx.compose.ui.text.TextStyle 24 | import androidx.compose.ui.text.input.TextFieldValue 25 | import androidx.compose.ui.text.input.VisualTransformation 26 | import androidx.compose.ui.unit.Dp 27 | import androidx.compose.ui.unit.dp 28 | import com.dokar.chiptextfield.util.runIf 29 | 30 | /** 31 | * Chip text field with Material Design outlined style. 32 | * 33 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 34 | * used to control style, layout and interaction of the inner text field independently. 35 | * 36 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 37 | * 38 | * ```kotlin 39 | * OutlinedChipTextField( 40 | * state = ..., 41 | * onSubmit = ..., 42 | * modifier = Modifier, 43 | * innerModifier = Modifier 44 | * .heightIn(max = 100.dp) 45 | * .verticalScroll(state = rememberScrollState()), 46 | * ) 47 | * ``` 48 | * 49 | * @see [BasicChipTextField] 50 | * @see [OutlinedTextField] 51 | */ 52 | @Composable 53 | fun OutlinedChipTextField( 54 | state: ChipTextFieldState, 55 | onSubmit: (value: String) -> T?, 56 | modifier: Modifier = Modifier, 57 | innerModifier: Modifier = Modifier, 58 | enabled: Boolean = true, 59 | readOnly: Boolean = false, 60 | readOnlyChips: Boolean = readOnly, 61 | isError: Boolean = false, 62 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 63 | textStyle: TextStyle = LocalTextStyle.current, 64 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 65 | label: @Composable (() -> Unit)? = null, 66 | placeholder: @Composable (() -> Unit)? = null, 67 | leadingIcon: @Composable (() -> Unit)? = null, 68 | trailingIcon: @Composable (() -> Unit)? = null, 69 | chipVerticalSpacing: Dp = 4.dp, 70 | chipHorizontalSpacing: Dp = 4.dp, 71 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 72 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 73 | onChipClick: ((chip: T) -> Unit)? = null, 74 | onChipLongClick: ((chip: T) -> Unit)? = null, 75 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 76 | shape: Shape = MaterialTheme.shapes.small, 77 | colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(), 78 | ) { 79 | var value by remember { mutableStateOf(TextFieldValue()) } 80 | val onValueChange: (TextFieldValue) -> Unit = { value = it } 81 | OutlinedChipTextField( 82 | state = state, 83 | onSubmit = { onSubmit(it.text) }, 84 | value = value, 85 | onValueChange = onValueChange, 86 | modifier = modifier, 87 | innerModifier = innerModifier, 88 | enabled = enabled, 89 | readOnly = readOnly, 90 | readOnlyChips = readOnlyChips, 91 | isError = isError, 92 | keyboardOptions = keyboardOptions, 93 | textStyle = textStyle, 94 | chipStyle = chipStyle, 95 | label = label, 96 | placeholder = placeholder, 97 | leadingIcon = leadingIcon, 98 | trailingIcon = trailingIcon, 99 | chipVerticalSpacing = chipVerticalSpacing, 100 | chipHorizontalSpacing = chipHorizontalSpacing, 101 | chipLeadingIcon = chipLeadingIcon, 102 | chipTrailingIcon = chipTrailingIcon, 103 | onChipClick = onChipClick, 104 | onChipLongClick = onChipLongClick, 105 | interactionSource = interactionSource, 106 | shape = shape, 107 | colors = colors, 108 | ) 109 | } 110 | 111 | /** 112 | * Chip text field with Material Design outlined style. 113 | * 114 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 115 | * used to control style, layout and interaction of the inner text field independently. 116 | * 117 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 118 | * 119 | * ```kotlin 120 | * OutlinedChipTextField( 121 | * state = ..., 122 | * onSubmit = ..., 123 | * modifier = Modifier, 124 | * innerModifier = Modifier 125 | * .heightIn(max = 100.dp) 126 | * .verticalScroll(state = rememberScrollState()), 127 | * ) 128 | * ``` 129 | * 130 | * @see [BasicChipTextField] 131 | * @see [OutlinedTextField] 132 | */ 133 | @Composable 134 | fun OutlinedChipTextField( 135 | state: ChipTextFieldState, 136 | value: String, 137 | onValueChange: (String) -> Unit, 138 | onSubmit: (value: String) -> T?, 139 | modifier: Modifier = Modifier, 140 | innerModifier: Modifier = Modifier, 141 | enabled: Boolean = true, 142 | readOnly: Boolean = false, 143 | readOnlyChips: Boolean = readOnly, 144 | isError: Boolean = false, 145 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 146 | textStyle: TextStyle = LocalTextStyle.current, 147 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 148 | label: @Composable (() -> Unit)? = null, 149 | placeholder: @Composable (() -> Unit)? = null, 150 | leadingIcon: @Composable (() -> Unit)? = null, 151 | trailingIcon: @Composable (() -> Unit)? = null, 152 | chipVerticalSpacing: Dp = 4.dp, 153 | chipHorizontalSpacing: Dp = 4.dp, 154 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 155 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 156 | onChipClick: ((chip: T) -> Unit)? = null, 157 | onChipLongClick: ((chip: T) -> Unit)? = null, 158 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 159 | shape: Shape = MaterialTheme.shapes.small, 160 | colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(), 161 | ) { 162 | // Copied from androidx.compose.foundation.text.BasicTextField.kt 163 | var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value)) } 164 | val textFieldValue = textFieldValueState.copy(text = value) 165 | SideEffect { 166 | if (textFieldValue.selection != textFieldValueState.selection || 167 | textFieldValue.composition != textFieldValueState.composition 168 | ) { 169 | textFieldValueState = textFieldValue 170 | } 171 | } 172 | var lastTextValue by remember(value) { mutableStateOf(value) } 173 | val mappedOnValueChange: (TextFieldValue) -> Unit = { newTextFieldValueState -> 174 | textFieldValueState = newTextFieldValueState 175 | 176 | val stringChangedSinceLastInvocation = lastTextValue != newTextFieldValueState.text 177 | lastTextValue = newTextFieldValueState.text 178 | 179 | if (stringChangedSinceLastInvocation) { 180 | onValueChange(newTextFieldValueState.text) 181 | } 182 | } 183 | OutlinedChipTextField( 184 | state = state, 185 | onSubmit = { onSubmit(it.text) }, 186 | value = textFieldValue, 187 | onValueChange = mappedOnValueChange, 188 | modifier = modifier, 189 | innerModifier = innerModifier, 190 | enabled = enabled, 191 | readOnly = readOnly, 192 | readOnlyChips = readOnlyChips, 193 | isError = isError, 194 | keyboardOptions = keyboardOptions, 195 | textStyle = textStyle, 196 | chipStyle = chipStyle, 197 | label = label, 198 | placeholder = placeholder, 199 | leadingIcon = leadingIcon, 200 | trailingIcon = trailingIcon, 201 | chipVerticalSpacing = chipVerticalSpacing, 202 | chipHorizontalSpacing = chipHorizontalSpacing, 203 | chipLeadingIcon = chipLeadingIcon, 204 | chipTrailingIcon = chipTrailingIcon, 205 | onChipClick = onChipClick, 206 | onChipLongClick = onChipLongClick, 207 | interactionSource = interactionSource, 208 | shape = shape, 209 | colors = colors, 210 | ) 211 | } 212 | 213 | /** 214 | * Chip text field with Material Design outlined style. 215 | * 216 | * The [innerModifier] will be passed to the inner text field of the decoration box. This can be 217 | * used to control style, layout and interaction of the inner text field independently. 218 | * 219 | * This is a sample to constraint the height of the inner text field and makes it scrollable: 220 | * 221 | * ```kotlin 222 | * OutlinedChipTextField( 223 | * state = ..., 224 | * onSubmit = ..., 225 | * modifier = Modifier, 226 | * innerModifier = Modifier 227 | * .heightIn(max = 100.dp) 228 | * .verticalScroll(state = rememberScrollState()), 229 | * ) 230 | * ``` 231 | * 232 | * @see [BasicChipTextField] 233 | * @see [OutlinedTextField] 234 | */ 235 | @OptIn(ExperimentalMaterialApi::class) 236 | @Composable 237 | fun OutlinedChipTextField( 238 | state: ChipTextFieldState, 239 | value: TextFieldValue, 240 | onValueChange: (TextFieldValue) -> Unit, 241 | onSubmit: (value: TextFieldValue) -> T?, 242 | modifier: Modifier = Modifier, 243 | innerModifier: Modifier = Modifier, 244 | enabled: Boolean = true, 245 | readOnly: Boolean = false, 246 | readOnlyChips: Boolean = readOnly, 247 | isError: Boolean = false, 248 | keyboardOptions: KeyboardOptions = KeyboardOptions(), 249 | textStyle: TextStyle = LocalTextStyle.current, 250 | chipStyle: ChipStyle = ChipTextFieldDefaults.chipStyle(), 251 | label: @Composable (() -> Unit)? = null, 252 | placeholder: @Composable (() -> Unit)? = null, 253 | leadingIcon: @Composable (() -> Unit)? = null, 254 | trailingIcon: @Composable (() -> Unit)? = null, 255 | chipVerticalSpacing: Dp = 4.dp, 256 | chipHorizontalSpacing: Dp = 4.dp, 257 | chipLeadingIcon: @Composable (chip: T) -> Unit = {}, 258 | chipTrailingIcon: @Composable (chip: T) -> Unit = { CloseButton(state, it) }, 259 | onChipClick: ((chip: T) -> Unit)? = null, 260 | onChipLongClick: ((chip: T) -> Unit)? = null, 261 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, 262 | shape: Shape = MaterialTheme.shapes.small, 263 | colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(), 264 | ) { 265 | val fieldColors = remember(colors) { colors.toChipTextFieldColors() } 266 | Box( 267 | modifier = modifier 268 | .runIf(label != null) { modifier.padding(top = 8.dp) } 269 | .background( 270 | fieldColors.backgroundColor(enabled, isError, interactionSource).value, 271 | shape 272 | ) 273 | ) { 274 | BasicChipTextField( 275 | state = state, 276 | onSubmit = onSubmit, 277 | value = value, 278 | onValueChange = onValueChange, 279 | modifier = innerModifier.fillMaxWidth(), 280 | enabled = enabled, 281 | readOnly = readOnly, 282 | readOnlyChips = readOnlyChips, 283 | isError = isError, 284 | keyboardOptions = keyboardOptions, 285 | textStyle = textStyle, 286 | chipStyle = chipStyle, 287 | chipVerticalSpacing = chipVerticalSpacing, 288 | chipHorizontalSpacing = chipHorizontalSpacing, 289 | chipLeadingIcon = chipLeadingIcon, 290 | chipTrailingIcon = chipTrailingIcon, 291 | onChipClick = onChipClick, 292 | onChipLongClick = onChipLongClick, 293 | interactionSource = interactionSource, 294 | colors = fieldColors, 295 | decorationBox = { innerTextField -> 296 | TextFieldDefaults.OutlinedTextFieldDecorationBox( 297 | value = if (state.chips.isEmpty() && value.text.isEmpty()) "" else " ", 298 | innerTextField = innerTextField, 299 | enabled = !readOnly, 300 | singleLine = false, 301 | visualTransformation = VisualTransformation.None, 302 | interactionSource = interactionSource, 303 | isError = isError, 304 | label = label, 305 | placeholder = placeholder, 306 | leadingIcon = leadingIcon, 307 | trailingIcon = trailingIcon, 308 | colors = colors, 309 | border = { 310 | TextFieldDefaults.BorderBox( 311 | enabled, 312 | isError, 313 | interactionSource, 314 | colors, 315 | shape 316 | ) 317 | }, 318 | ) 319 | }, 320 | ) 321 | } 322 | } 323 | -------------------------------------------------------------------------------- /chiptextfield/src/commonMain/kotlin/com/dokar/chiptextfield/TextFieldColorsConverter.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield 2 | 3 | import androidx.compose.foundation.interaction.InteractionSource 4 | import androidx.compose.material.TextFieldColors 5 | import androidx.compose.runtime.Composable 6 | import androidx.compose.runtime.State 7 | import androidx.compose.ui.graphics.Color 8 | 9 | fun TextFieldColors.toChipTextFieldColors(): ChipTextFieldColors { 10 | return object : ChipTextFieldColors { 11 | @Composable 12 | override fun textColor( 13 | enabled: Boolean, 14 | isError: Boolean, 15 | interactionSource: InteractionSource, 16 | ): State { 17 | return this@toChipTextFieldColors.textColor(enabled) 18 | } 19 | 20 | @Composable 21 | override fun cursorColor(isError: Boolean): State { 22 | return this@toChipTextFieldColors.cursorColor(isError) 23 | } 24 | 25 | @Composable 26 | override fun backgroundColor( 27 | enabled: Boolean, 28 | isError: Boolean, 29 | interactionSource: InteractionSource 30 | ): State { 31 | return this@toChipTextFieldColors.backgroundColor(enabled) 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | # IDE (e.g. Android Studio) users: 3 | # Gradle settings configured through the IDE *will override* 4 | # any settings specified in this file. 5 | # For more details on how to configure your build environment visit 6 | # http://www.gradle.org/docs/current/userguide/build_environment.html 7 | # Specifies the JVM arguments used for the daemon process. 8 | # The setting is particularly useful for tweaking memory settings. 9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 10 | # When configured, Gradle will run in incubating parallel mode. 11 | # This option should only be used with decoupled projects. More details, visit 12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 13 | # org.gradle.parallel=true 14 | # AndroidX package structure to make it clearer which packages are bundled with the 15 | # Android operating system, and which are packaged with your app"s APK 16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 17 | android.useAndroidX=true 18 | # Automatically convert third-party libraries to use AndroidX 19 | android.enableJetifier=true 20 | # Kotlin code style for this project: "official" or "obsolete": 21 | kotlin.code.style=official 22 | 23 | org.jetbrains.compose.experimental.jscanvas.enabled=true 24 | org.jetbrains.compose.experimental.wasm.enabled=true 25 | 26 | SONATYPE_HOST=S01 27 | RELEASE_SIGNING_ENABLED=true 28 | 29 | GROUP=io.github.dokar3 30 | VERSION_NAME=0.7.0-alpha05 31 | 32 | POM_NAME=ChipTextField 33 | POM_DESCRIPTION=Editable chip layout in Jetpack Compose. 34 | POM_INCEPTION_YEAR=2021 35 | POM_URL=https://github.com/dokar3/ChipTextField 36 | 37 | POM_LICENSE_NAME=The Apache Software License, Version 2.0 38 | POM_LICENSE_URL=https://www.apache.org/licenses/LICENSE-2.0.txt 39 | POM_LICENSE_DIST=repo 40 | 41 | POM_SCM_URL=https://github.com/dokar3/ChipTextField 42 | POM_SCM_CONNECTION=scm:git:git://github.com/dokar3/ChipTextField.git 43 | POM_SCM_DEV_CONNECTION=scm:git:ssh://git@github.com/dokar3/ChipTextField.git 44 | 45 | POM_DEVELOPER_ID=dokar3 46 | POM_DEVELOPER_NAME=Dokar 47 | POM_DEVELOPER_URL=https://github.com/dokar3/ -------------------------------------------------------------------------------- /gradle/libs.versions.toml: -------------------------------------------------------------------------------- 1 | [versions] 2 | androidCompileSdk = "34" 3 | androidTargetSdk = "34" 4 | kotlin = "2.0.0" 5 | coil = "3.0.0-alpha01" 6 | compose-multiplatform = "1.6.11" 7 | coroutines = "1.8.1" 8 | agp = "8.5.1" 9 | maven-publish = "0.29.0" 10 | ktor = "2.3.12" 11 | 12 | [libraries] 13 | kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" } 14 | kotlinx-coroutines-swing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "coroutines" } 15 | coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" } 16 | coil-network = { module = "io.coil-kt.coil3:coil-network", version.ref = "coil" } 17 | ktor-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" } 18 | ktor-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" } 19 | 20 | [plugins] 21 | android-application = { id = "com.android.application", version.ref = "agp" } 22 | android-library = { id = "com.android.library", version.ref = "agp" } 23 | kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" } 24 | compose-multiplatform = { id = "org.jetbrains.compose", version.ref = "compose-multiplatform" } 25 | compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" } 26 | mavenpublish = { id = "com.vanniktech.maven.publish", version.ref = "maven-publish" } 27 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri May 24 14:27:48 CST 2024 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-bin.zip 5 | zipStoreBase=GRADLE_USER_HOME 6 | zipStorePath=wrapper/dists 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /images/screenshot_avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/images/screenshot_avatar.png -------------------------------------------------------------------------------- /images/screenshot_checkable.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/images/screenshot_checkable.jpg -------------------------------------------------------------------------------- /images/screenshot_filled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/images/screenshot_filled.jpg -------------------------------------------------------------------------------- /images/screenshot_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/images/screenshot_light.png -------------------------------------------------------------------------------- /images/screenshot_m3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/images/screenshot_m3.jpg -------------------------------------------------------------------------------- /images/screenshot_outlined.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/images/screenshot_outlined.jpg -------------------------------------------------------------------------------- /sample/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /sample/android/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /sample/android/build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'com.android.application' 3 | id 'kotlin-android' 4 | alias(libs.plugins.compose.compiler) 5 | } 6 | 7 | android { 8 | namespace 'com.dokar.chiptextfield.sample' 9 | 10 | compileSdk libs.versions.androidCompileSdk.get().toInteger() 11 | 12 | defaultConfig { 13 | applicationId "com.dokar.chiptextfield.sample" 14 | minSdk 21 15 | targetSdk libs.versions.androidTargetSdk.get().toInteger() 16 | versionCode 1 17 | versionName "1.0" 18 | 19 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 20 | vectorDrawables { 21 | useSupportLibrary true 22 | } 23 | } 24 | 25 | buildTypes { 26 | release { 27 | minifyEnabled false 28 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 29 | } 30 | } 31 | buildFeatures { 32 | compose true 33 | } 34 | packagingOptions { 35 | resources { 36 | excludes += '/META-INF/{AL2.0,LGPL2.1}' 37 | } 38 | } 39 | compileOptions { 40 | sourceCompatibility = JavaVersion.VERSION_11 41 | targetCompatibility = JavaVersion.VERSION_11 42 | } 43 | kotlin { 44 | jvmToolchain(11) 45 | } 46 | } 47 | 48 | dependencies { 49 | 50 | implementation project(':chiptextfield') 51 | implementation project(':chiptextfield-m3') 52 | implementation project(':sample:shared') 53 | implementation 'androidx.core:core-ktx:1.12.0' 54 | implementation platform("androidx.compose:compose-bom:$composeBomVersion") 55 | implementation "androidx.compose.ui:ui" 56 | implementation "androidx.compose.material:material" 57 | implementation "androidx.compose.material3:material3" 58 | implementation "androidx.compose.ui:ui-tooling-preview" 59 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0' 60 | implementation 'androidx.activity:activity-compose:1.8.2' 61 | 62 | implementation "io.coil-kt:coil-compose:2.6.0" 63 | 64 | testImplementation 'junit:junit:4.13.2' 65 | androidTestImplementation 'androidx.test.ext:junit:1.1.5' 66 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1' 67 | androidTestImplementation platform("androidx.compose:compose-bom:$composeBomVersion") 68 | androidTestImplementation "androidx.compose.ui:ui-test-junit4" 69 | debugImplementation "androidx.compose.ui:ui-tooling" 70 | } -------------------------------------------------------------------------------- /sample/android/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /sample/android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 14 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /sample/android/src/main/java/com/dokar/chiptextfield/sample/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | 7 | class MainActivity : ComponentActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContent { 11 | SampleScreen() 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /sample/android/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /sample/android/src/main/res/drawable/ic_baseline_check_24.xml: -------------------------------------------------------------------------------- 1 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /sample/android/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dokar3/ChipTextField/a656149b29a7cf83d028bbecaaa6378f962e4c01/sample/android/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /sample/android/src/main/res/values-night/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | -------------------------------------------------------------------------------- /sample/android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /sample/android/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ChipTextField 3 | -------------------------------------------------------------------------------- /sample/android/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 15 | -------------------------------------------------------------------------------- /sample/desktop/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /sample/desktop/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | id("kotlin-multiplatform") 3 | id("org.jetbrains.compose") 4 | alias(libs.plugins.compose.compiler) 5 | } 6 | 7 | kotlin { 8 | jvmToolchain(11) 9 | 10 | jvm() 11 | 12 | sourceSets { 13 | val jvmMain by getting { 14 | dependencies { 15 | implementation(project(":sample:shared")) 16 | implementation(compose.desktop.currentOs) 17 | implementation(libs.kotlinx.coroutines.swing) 18 | } 19 | } 20 | } 21 | } 22 | 23 | compose.desktop { 24 | application { 25 | mainClass = "com.dokar.chiptextfield.sample.MainKt" 26 | } 27 | } -------------------------------------------------------------------------------- /sample/desktop/src/jvmMain/kotlin/com/dokar/chiptextfield/sample/Main.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.ui.window.Window 4 | import androidx.compose.ui.window.application 5 | 6 | fun main() = application { 7 | Window( 8 | title = "ChipTextField Sample", 9 | onCloseRequest = ::exitApplication, 10 | ) { 11 | SampleScreen() 12 | } 13 | } -------------------------------------------------------------------------------- /sample/shared/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /sample/shared/build.gradle.kts: -------------------------------------------------------------------------------- 1 | import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl 2 | 3 | plugins { 4 | id("com.android.library") 5 | id("kotlin-multiplatform") 6 | id("org.jetbrains.compose") 7 | alias(libs.plugins.compose.compiler) 8 | } 9 | 10 | android { 11 | namespace = "com.dokar.chiptextfield.sample.shared" 12 | compileSdk = libs.versions.androidCompileSdk.get().toInt() 13 | } 14 | 15 | kotlin { 16 | jvmToolchain(11) 17 | 18 | jvm() 19 | 20 | js(IR) { 21 | browser() 22 | } 23 | @OptIn(ExperimentalWasmDsl::class) 24 | wasmJs { 25 | binaries.executable() 26 | } 27 | 28 | androidTarget() 29 | 30 | applyDefaultHierarchyTemplate() 31 | 32 | sourceSets { 33 | val commonMain by getting { 34 | dependencies { 35 | api(project(":chiptextfield-core")) 36 | api(project(":chiptextfield")) 37 | api(project(":chiptextfield-m3")) 38 | api(compose.material) 39 | api(compose.material3) 40 | } 41 | } 42 | 43 | val nonWasmJsMain by creating { 44 | dependencies { 45 | implementation(libs.coil.compose) 46 | implementation(libs.coil.network) 47 | } 48 | } 49 | 50 | val jvmMain by getting { 51 | dependencies { 52 | dependsOn(nonWasmJsMain) 53 | implementation(libs.ktor.okhttp) 54 | } 55 | } 56 | 57 | val androidMain by getting { 58 | dependencies { 59 | dependsOn(nonWasmJsMain) 60 | implementation(libs.ktor.okhttp) 61 | } 62 | } 63 | 64 | val jsMain by getting { 65 | dependencies { 66 | dependsOn(nonWasmJsMain) 67 | implementation(libs.ktor.js) 68 | } 69 | } 70 | 71 | val wasmJs by creating { } 72 | } 73 | } -------------------------------------------------------------------------------- /sample/shared/src/androidMain/kotlin/com/dokar/chiptextfield/sample/Platform.android.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.ui.Modifier 5 | import coil3.ImageLoader 6 | import coil3.annotation.ExperimentalCoilApi 7 | import coil3.compose.setSingletonImageLoaderFactory 8 | import coil3.fetch.NetworkFetcher 9 | 10 | @OptIn(ExperimentalCoilApi::class) 11 | @Composable 12 | actual fun setupImageLoader() { 13 | setSingletonImageLoaderFactory { context -> 14 | ImageLoader.Builder(context) 15 | .components { 16 | add(NetworkFetcher.Factory()) 17 | } 18 | .build() 19 | } 20 | } 21 | 22 | @Composable 23 | actual fun AsyncImage( 24 | model: Any, 25 | contentDescription: String?, 26 | modifier: Modifier, 27 | ) { 28 | coil3.compose.AsyncImage(model, contentDescription, modifier) 29 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/Platform.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.ui.Modifier 5 | 6 | @Composable 7 | expect fun setupImageLoader() 8 | 9 | @Composable 10 | expect fun AsyncImage( 11 | model: Any, 12 | contentDescription: String?, 13 | modifier: Modifier = Modifier, 14 | ) 15 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/SampleScreen.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.foundation.layout.Box 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.foundation.layout.fillMaxWidth 7 | import androidx.compose.material.Text 8 | import androidx.compose.material3.NavigationBar 9 | import androidx.compose.material3.NavigationBarItem 10 | import androidx.compose.material3.NavigationBarItemDefaults 11 | import androidx.compose.runtime.Composable 12 | import androidx.compose.runtime.getValue 13 | import androidx.compose.runtime.mutableStateOf 14 | import androidx.compose.runtime.remember 15 | import androidx.compose.runtime.setValue 16 | import androidx.compose.ui.Modifier 17 | import androidx.compose.ui.graphics.Color 18 | import com.dokar.chiptextfield.sample.m2.M2ChipScreen 19 | import com.dokar.chiptextfield.sample.m3.M3ChipsScreen 20 | 21 | @Composable 22 | fun SampleScreen(modifier: Modifier = Modifier) { 23 | setupImageLoader() 24 | 25 | var sampleType by remember { mutableStateOf(SampleType.Material2) } 26 | 27 | Column(modifier = modifier.fillMaxSize()) { 28 | Box(modifier = Modifier.weight(1f)) { 29 | when (sampleType) { 30 | SampleType.Material2 -> M2ChipScreen() 31 | SampleType.Material3 -> M3ChipsScreen() 32 | } 33 | } 34 | 35 | SampleTabLayout( 36 | type = sampleType, 37 | onSelectTab = { sampleType = it }, 38 | ) 39 | } 40 | } 41 | 42 | @Composable 43 | private fun SampleTabLayout( 44 | type: SampleType, 45 | onSelectTab: (SampleType) -> Unit, 46 | modifier: Modifier = Modifier 47 | ) { 48 | val types = SampleType.entries 49 | 50 | val selectedIndex = types.indexOf(type) 51 | 52 | NavigationBar( 53 | modifier = modifier.fillMaxWidth(), 54 | containerColor = Color(0xFF5DA25D), 55 | ) { 56 | types.forEachIndexed { index, sampleType -> 57 | val isSelected = index == selectedIndex 58 | NavigationBarItem( 59 | selected = isSelected, 60 | onClick = { onSelectTab(sampleType) }, 61 | colors = NavigationBarItemDefaults.colors( 62 | indicatorColor = Color(0xFF70B670), 63 | ), 64 | icon = { 65 | Text( 66 | text = sampleType.name, 67 | color = Color.White, 68 | ) 69 | }, 70 | ) 71 | } 72 | } 73 | } 74 | 75 | enum class SampleType { 76 | Material2, 77 | Material3, 78 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/ThemeColorSelector.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.border 5 | import androidx.compose.foundation.clickable 6 | import androidx.compose.foundation.layout.Arrangement 7 | import androidx.compose.foundation.layout.Box 8 | import androidx.compose.foundation.layout.Row 9 | import androidx.compose.foundation.layout.padding 10 | import androidx.compose.foundation.layout.size 11 | import androidx.compose.foundation.shape.CircleShape 12 | import androidx.compose.material.MaterialTheme 13 | import androidx.compose.runtime.Composable 14 | import androidx.compose.runtime.Immutable 15 | import androidx.compose.runtime.MutableState 16 | import androidx.compose.ui.Modifier 17 | import androidx.compose.ui.draw.clip 18 | import androidx.compose.ui.graphics.Color 19 | import androidx.compose.ui.unit.dp 20 | 21 | @Immutable 22 | internal data class ChipFieldStyle( 23 | val textColor: Color, 24 | val borderColor: Color, 25 | val backgroundColor: Color, 26 | val cursorColor: Color 27 | ) 28 | 29 | internal val CHIP_TEXT_FILED_STYLES = listOf( 30 | ChipFieldStyle( 31 | textColor = Color.Black, 32 | borderColor = Color.Black, 33 | backgroundColor = Color.Transparent, 34 | cursorColor = Color.Black 35 | ), 36 | ChipFieldStyle( 37 | textColor = Color.White, 38 | borderColor = Color(0xff94d2bd), 39 | backgroundColor = Color(0xff94d2bd), 40 | cursorColor = Color(0xff94d2bd) 41 | ), 42 | ChipFieldStyle( 43 | textColor = Color.White, 44 | borderColor = Color(0xffe85d04), 45 | backgroundColor = Color(0xffe85d04), 46 | cursorColor = Color(0xffe85d04) 47 | ), 48 | ChipFieldStyle( 49 | textColor = Color.White, 50 | borderColor = Color(0xff9fa0ff), 51 | backgroundColor = Color(0xff9fa0ff), 52 | cursorColor = Color(0xff9fa0ff) 53 | ) 54 | ) 55 | 56 | @Composable 57 | internal fun ThemeColorSelector( 58 | selectedPosition: MutableState, 59 | modifier: Modifier = Modifier 60 | ) { 61 | Row( 62 | modifier = modifier, 63 | horizontalArrangement = Arrangement.SpaceAround 64 | ) { 65 | for ((index, colors) in CHIP_TEXT_FILED_STYLES.withIndex()) { 66 | val chipColors = if (index == 0) { 67 | getDefaultChipFieldStyle() 68 | } else { 69 | colors 70 | } 71 | ColorItem( 72 | color = chipColors.borderColor, 73 | isSelected = index == selectedPosition.value, 74 | modifier = Modifier.clickable { selectedPosition.value = index } 75 | ) 76 | } 77 | } 78 | } 79 | 80 | @Composable 81 | private fun ColorItem( 82 | color: Color, 83 | isSelected: Boolean, 84 | modifier: Modifier = Modifier 85 | ) { 86 | val borderColor = if (isSelected) { 87 | color 88 | } else { 89 | Color.Transparent 90 | } 91 | Box( 92 | modifier = modifier.size(32.dp) 93 | .clip(CircleShape) 94 | .border(width = 2.dp, color = borderColor, shape = CircleShape) 95 | .padding(4.dp) 96 | .background(color = color, shape = CircleShape) 97 | ) 98 | } 99 | 100 | @Composable 101 | internal fun getDefaultChipFieldStyle(): ChipFieldStyle { 102 | return CHIP_TEXT_FILED_STYLES[0].copy( 103 | textColor = MaterialTheme.colors.onBackground, 104 | borderColor = MaterialTheme.colors.onBackground, 105 | cursorColor = MaterialTheme.colors.primary 106 | ) 107 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/data/AvatarChip.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.data 2 | 3 | import com.dokar.chiptextfield.Chip 4 | 5 | class AvatarChip(text: String, val avatarUrl: String) : Chip(text) 6 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/data/CheckableChip.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.data 2 | 3 | import androidx.compose.runtime.getValue 4 | import androidx.compose.runtime.mutableStateOf 5 | import androidx.compose.runtime.setValue 6 | import com.dokar.chiptextfield.Chip 7 | 8 | class CheckableChip(text: String, isChecked: Boolean = false) : Chip(text) { 9 | var isChecked by mutableStateOf(isChecked) 10 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/data/SampleChips.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.data 2 | 3 | import com.dokar.chiptextfield.Chip 4 | import kotlin.random.Random 5 | 6 | object SampleChips { 7 | private const val LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipisicing elit" 8 | 9 | private const val PICSUM_SEED_URL = "https://picsum.photos/seed/{seed}/100/100" 10 | 11 | val text: List get() = LOREM_IPSUM.split(" ").map(::Chip) 12 | 13 | val checkable: List 14 | get() = LOREM_IPSUM 15 | .split(" ") 16 | .map { CheckableChip(text = it, isChecked = Random.nextBoolean()) } 17 | 18 | val avatar: List 19 | get() = LOREM_IPSUM 20 | .split(" ") 21 | .mapIndexed { index, it -> AvatarChip(it, randomAvatarUrl(index.toLong())) } 22 | 23 | fun randomAvatarUrl(seed: Long = Random.nextLong()): String { 24 | return PICSUM_SEED_URL.replace("{seed}", seed.toString()) 25 | } 26 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m2/AvatarChips.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m2 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.layout.PaddingValues 6 | import androidx.compose.foundation.layout.fillMaxWidth 7 | import androidx.compose.foundation.layout.padding 8 | import androidx.compose.foundation.layout.size 9 | import androidx.compose.foundation.shape.CircleShape 10 | import androidx.compose.material.MaterialTheme 11 | import androidx.compose.material.TextFieldDefaults 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.ui.ExperimentalComposeUiApi 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.draw.clip 16 | import androidx.compose.ui.graphics.Color 17 | import androidx.compose.ui.unit.dp 18 | import com.dokar.chiptextfield.ChipTextField 19 | import com.dokar.chiptextfield.ChipTextFieldDefaults 20 | import com.dokar.chiptextfield.rememberChipTextFieldState 21 | import com.dokar.chiptextfield.sample.AsyncImage 22 | import com.dokar.chiptextfield.sample.ChipFieldStyle 23 | import com.dokar.chiptextfield.sample.data.AvatarChip 24 | import com.dokar.chiptextfield.sample.data.SampleChips 25 | 26 | @ExperimentalComposeUiApi 27 | @ExperimentalFoundationApi 28 | @Composable 29 | internal fun AvatarChips( 30 | chipFieldStyle: ChipFieldStyle 31 | ) { 32 | val state = rememberChipTextFieldState(chips = SampleChips.avatar) 33 | 34 | ChipsHeader("Avatar chips") 35 | 36 | ChipTextField( 37 | state = state, 38 | onSubmit = { AvatarChip(it, SampleChips.randomAvatarUrl()) }, 39 | modifier = Modifier 40 | .fillMaxWidth() 41 | .padding(8.dp), 42 | colors = TextFieldDefaults.textFieldColors( 43 | cursorColor = chipFieldStyle.cursorColor, 44 | backgroundColor = Color.Transparent, 45 | focusedIndicatorColor = chipFieldStyle.cursorColor, 46 | ), 47 | chipStyle = ChipTextFieldDefaults.chipStyle( 48 | focusedTextColor = chipFieldStyle.textColor, 49 | focusedBorderColor = chipFieldStyle.borderColor, 50 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 51 | ), 52 | chipLeadingIcon = { Avatar(it) }, 53 | contentPadding = PaddingValues(bottom = 8.dp), 54 | ) 55 | } 56 | 57 | @Composable 58 | private fun Avatar( 59 | chip: AvatarChip, 60 | modifier: Modifier = Modifier 61 | ) { 62 | AsyncImage( 63 | model = chip.avatarUrl, 64 | contentDescription = null, 65 | modifier = modifier 66 | .size(32.dp) 67 | .clip(shape = CircleShape) 68 | .background(MaterialTheme.colors.onBackground.copy(alpha = 0.2f)) 69 | ) 70 | } 71 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m2/CheckableChips.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m2 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.Image 5 | import androidx.compose.foundation.layout.fillMaxWidth 6 | import androidx.compose.foundation.layout.padding 7 | import androidx.compose.foundation.layout.size 8 | import androidx.compose.material.TextFieldDefaults 9 | import androidx.compose.material.icons.Icons 10 | import androidx.compose.material.icons.outlined.Check 11 | import androidx.compose.runtime.Composable 12 | import androidx.compose.ui.ExperimentalComposeUiApi 13 | import androidx.compose.ui.Modifier 14 | import androidx.compose.ui.graphics.ColorFilter 15 | import androidx.compose.ui.graphics.vector.rememberVectorPainter 16 | import androidx.compose.ui.unit.dp 17 | import com.dokar.chiptextfield.BasicChipTextField 18 | import com.dokar.chiptextfield.ChipTextFieldDefaults 19 | import com.dokar.chiptextfield.rememberChipTextFieldState 20 | import com.dokar.chiptextfield.sample.ChipFieldStyle 21 | import com.dokar.chiptextfield.sample.data.CheckableChip 22 | import com.dokar.chiptextfield.sample.data.SampleChips 23 | import com.dokar.chiptextfield.toChipTextFieldColors 24 | 25 | @ExperimentalComposeUiApi 26 | @ExperimentalFoundationApi 27 | @Composable 28 | internal fun CheckableChips( 29 | chipFieldStyle: ChipFieldStyle 30 | ) { 31 | val state = rememberChipTextFieldState(chips = SampleChips.checkable) 32 | 33 | ChipsHeader("Checkable chips") 34 | 35 | BasicChipTextField( 36 | state = state, 37 | onSubmit = { null }, 38 | modifier = Modifier 39 | .fillMaxWidth() 40 | .padding(8.dp), 41 | readOnly = true, 42 | colors = TextFieldDefaults.textFieldColors( 43 | cursorColor = chipFieldStyle.cursorColor 44 | ).toChipTextFieldColors(), 45 | chipStyle = ChipTextFieldDefaults.chipStyle( 46 | focusedTextColor = chipFieldStyle.textColor, 47 | focusedBorderColor = chipFieldStyle.borderColor, 48 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 49 | ), 50 | chipLeadingIcon = { CheckIcon(it, chipFieldStyle) }, 51 | chipTrailingIcon = {}, 52 | onChipClick = { it.isChecked = !it.isChecked }, 53 | ) 54 | } 55 | 56 | @Composable 57 | private fun CheckIcon( 58 | chip: CheckableChip, 59 | chipFieldStyle: ChipFieldStyle, 60 | modifier: Modifier = Modifier 61 | ) { 62 | if (chip.isChecked) { 63 | Image( 64 | painter = rememberVectorPainter(Icons.Outlined.Check), 65 | contentDescription = null, 66 | modifier = modifier 67 | .size(24.dp) 68 | .padding(start = 6.dp), 69 | colorFilter = ColorFilter.tint(chipFieldStyle.textColor) 70 | ) 71 | } 72 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m2/ChipsHeader.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m2 2 | 3 | import androidx.compose.foundation.layout.padding 4 | import androidx.compose.material.MaterialTheme 5 | import androidx.compose.material.Text 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.ui.Modifier 8 | import androidx.compose.ui.text.font.FontWeight 9 | import androidx.compose.ui.unit.dp 10 | 11 | @Composable 12 | internal fun ChipsHeader( 13 | name: String, 14 | modifier: Modifier = Modifier 15 | ) { 16 | Text( 17 | text = name, 18 | modifier = modifier.padding(8.dp, 4.dp), 19 | fontWeight = FontWeight.Bold, 20 | color = MaterialTheme.colors.primary, 21 | ) 22 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m2/M2ChipsScreen.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m2 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.Spacer 6 | import androidx.compose.foundation.layout.fillMaxSize 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.layout.height 9 | import androidx.compose.foundation.rememberScrollState 10 | import androidx.compose.foundation.verticalScroll 11 | import androidx.compose.material.MaterialTheme 12 | import androidx.compose.material.Surface 13 | import androidx.compose.runtime.Composable 14 | import androidx.compose.runtime.mutableIntStateOf 15 | import androidx.compose.runtime.remember 16 | import androidx.compose.ui.ExperimentalComposeUiApi 17 | import androidx.compose.ui.Modifier 18 | import androidx.compose.ui.unit.dp 19 | import com.dokar.chiptextfield.sample.CHIP_TEXT_FILED_STYLES 20 | import com.dokar.chiptextfield.sample.ChipFieldStyle 21 | import com.dokar.chiptextfield.sample.ThemeColorSelector 22 | import com.dokar.chiptextfield.sample.getDefaultChipFieldStyle 23 | import com.dokar.chiptextfield.sample.theme.ChipTextFieldTheme 24 | 25 | @OptIn(ExperimentalComposeUiApi::class, ExperimentalFoundationApi::class) 26 | @Composable 27 | fun M2ChipScreen(modifier: Modifier = Modifier) { 28 | ChipTextFieldTheme { 29 | // A surface container using the 'background' color from the theme 30 | Surface( 31 | color = MaterialTheme.colors.background, 32 | modifier = modifier.fillMaxSize() 33 | ) { 34 | val selectedColorPosition = remember { mutableIntStateOf(0) } 35 | 36 | val chipFieldStyle = getChipFieldStyle(selectedColorPosition.intValue) 37 | Column( 38 | modifier = Modifier 39 | .fillMaxSize() 40 | .verticalScroll(state = rememberScrollState()) 41 | ) { 42 | Spacer(modifier = Modifier.height(32.dp)) 43 | 44 | ThemeColorSelector( 45 | selectedPosition = selectedColorPosition, 46 | modifier = Modifier.fillMaxWidth() 47 | ) 48 | 49 | Spacer(modifier = Modifier.height(32.dp)) 50 | 51 | TextChips(chipFieldStyle = chipFieldStyle) 52 | 53 | Spacer(modifier = Modifier.height(32.dp)) 54 | 55 | CheckableChips(chipFieldStyle = chipFieldStyle) 56 | 57 | Spacer(modifier = Modifier.height(32.dp)) 58 | 59 | AvatarChips(chipFieldStyle = chipFieldStyle) 60 | 61 | Spacer(modifier = Modifier.height(32.dp)) 62 | 63 | ManualFocusChips(chipFieldStyle = chipFieldStyle) 64 | 65 | Spacer(modifier = Modifier.height(32.dp)) 66 | } 67 | } 68 | } 69 | } 70 | 71 | @Composable 72 | private fun getChipFieldStyle(selectedPos: Int): ChipFieldStyle { 73 | return when (selectedPos) { 74 | 0 -> { 75 | getDefaultChipFieldStyle() 76 | } 77 | 78 | else -> { 79 | CHIP_TEXT_FILED_STYLES[selectedPos] 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m2/ManualFocusChips.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m2 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.layout.Arrangement 5 | import androidx.compose.foundation.layout.PaddingValues 6 | import androidx.compose.foundation.layout.Row 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.material.Button 10 | import androidx.compose.material.Text 11 | import androidx.compose.material.TextFieldDefaults 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.ui.ExperimentalComposeUiApi 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.graphics.Color 16 | import androidx.compose.ui.unit.dp 17 | import com.dokar.chiptextfield.ChipTextField 18 | import com.dokar.chiptextfield.ChipTextFieldDefaults 19 | import com.dokar.chiptextfield.rememberChipTextFieldState 20 | import com.dokar.chiptextfield.sample.ChipFieldStyle 21 | import com.dokar.chiptextfield.sample.data.AvatarChip 22 | import com.dokar.chiptextfield.sample.data.SampleChips 23 | 24 | @ExperimentalComposeUiApi 25 | @ExperimentalFoundationApi 26 | @Composable 27 | internal fun ManualFocusChips( 28 | chipFieldStyle: ChipFieldStyle, 29 | ) { 30 | val state = rememberChipTextFieldState(chips = SampleChips.text) 31 | 32 | ChipsHeader("Request focus") 33 | 34 | Row( 35 | modifier = Modifier.padding(8.dp), 36 | horizontalArrangement = Arrangement.spacedBy(8.dp), 37 | ) { 38 | Button( 39 | onClick = { 40 | if (state.focusedChipIndex > 0) { 41 | state.focusChip(state.focusedChipIndex - 1) 42 | } else { 43 | state.clearChipFocus(0) 44 | } 45 | } 46 | ) { 47 | Text("Prev chip") 48 | } 49 | 50 | Button( 51 | onClick = { 52 | if (state.focusedChipIndex < state.chips.size - 1) { 53 | state.focusChip(state.focusedChipIndex + 1) 54 | } 55 | }, 56 | ) { 57 | Text("Next chip") 58 | } 59 | 60 | Button( 61 | onClick = { 62 | if (state.isTextFieldFocused) { 63 | state.clearTextFieldFocus() 64 | } else { 65 | state.focusTextField() 66 | } 67 | }, 68 | ) { 69 | Text("Text field") 70 | } 71 | } 72 | 73 | ChipTextField( 74 | state = state, 75 | onSubmit = { AvatarChip(it, SampleChips.randomAvatarUrl()) }, 76 | modifier = Modifier 77 | .fillMaxWidth() 78 | .padding(8.dp), 79 | colors = TextFieldDefaults.textFieldColors( 80 | cursorColor = chipFieldStyle.cursorColor, 81 | backgroundColor = Color.Transparent, 82 | focusedIndicatorColor = chipFieldStyle.cursorColor, 83 | ), 84 | chipStyle = ChipTextFieldDefaults.chipStyle( 85 | focusedTextColor = chipFieldStyle.textColor, 86 | focusedBorderColor = chipFieldStyle.borderColor, 87 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 88 | ), 89 | contentPadding = PaddingValues(bottom = 8.dp), 90 | ) 91 | } 92 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m2/TextChips.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m2 2 | 3 | import androidx.compose.foundation.ExperimentalFoundationApi 4 | import androidx.compose.foundation.layout.PaddingValues 5 | import androidx.compose.foundation.layout.Spacer 6 | import androidx.compose.foundation.layout.height 7 | import androidx.compose.foundation.layout.heightIn 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.foundation.rememberScrollState 10 | import androidx.compose.foundation.verticalScroll 11 | import androidx.compose.material.Text 12 | import androidx.compose.material.TextFieldDefaults 13 | import androidx.compose.runtime.Composable 14 | import androidx.compose.runtime.getValue 15 | import androidx.compose.runtime.mutableStateOf 16 | import androidx.compose.runtime.remember 17 | import androidx.compose.runtime.setValue 18 | import androidx.compose.ui.ExperimentalComposeUiApi 19 | import androidx.compose.ui.Modifier 20 | import androidx.compose.ui.graphics.Color 21 | import androidx.compose.ui.unit.dp 22 | import com.dokar.chiptextfield.Chip 23 | import com.dokar.chiptextfield.ChipTextField 24 | import com.dokar.chiptextfield.ChipTextFieldDefaults 25 | import com.dokar.chiptextfield.OutlinedChipTextField 26 | import com.dokar.chiptextfield.rememberChipTextFieldState 27 | import com.dokar.chiptextfield.sample.ChipFieldStyle 28 | import com.dokar.chiptextfield.sample.data.SampleChips 29 | 30 | @ExperimentalComposeUiApi 31 | @ExperimentalFoundationApi 32 | @Composable 33 | internal fun TextChips(chipFieldStyle: ChipFieldStyle) { 34 | ChipsHeader("Text chips") 35 | Underline(chipFieldStyle) 36 | 37 | Spacer(modifier = Modifier.height(8.dp)) 38 | 39 | ChipsHeader("Material outlined") 40 | MaterialOutlined(chipFieldStyle) 41 | 42 | Spacer(modifier = Modifier.height(8.dp)) 43 | 44 | ChipsHeader("Material filled") 45 | MaterialFilled(chipFieldStyle) 46 | 47 | ChipsHeader("Scrollable") 48 | Scrollable(chipFieldStyle) 49 | } 50 | 51 | @Composable 52 | private fun Underline(chipFieldStyle: ChipFieldStyle) { 53 | var value by remember { mutableStateOf("") } 54 | val state = rememberChipTextFieldState(chips = emptyList()) 55 | ChipTextField( 56 | state = state, 57 | value = value, 58 | onValueChange = { value = it }, 59 | onSubmit = ::Chip, 60 | modifier = Modifier.padding(8.dp), 61 | placeholder = { Text("Enter to submit a chip") }, 62 | chipStyle = ChipTextFieldDefaults.chipStyle( 63 | focusedTextColor = chipFieldStyle.textColor, 64 | focusedBorderColor = chipFieldStyle.borderColor, 65 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 66 | ), 67 | colors = TextFieldDefaults.textFieldColors( 68 | cursorColor = chipFieldStyle.cursorColor, 69 | focusedIndicatorColor = chipFieldStyle.cursorColor, 70 | backgroundColor = Color.Transparent, 71 | ), 72 | contentPadding = PaddingValues(bottom = 8.dp), 73 | ) 74 | } 75 | 76 | @Composable 77 | private fun MaterialOutlined(chipFieldStyle: ChipFieldStyle) { 78 | val state = rememberChipTextFieldState(chips = SampleChips.text) 79 | OutlinedChipTextField( 80 | state = state, 81 | onSubmit = ::Chip, 82 | modifier = Modifier.padding(8.dp), 83 | chipStyle = ChipTextFieldDefaults.chipStyle( 84 | focusedTextColor = chipFieldStyle.textColor, 85 | focusedBorderColor = chipFieldStyle.borderColor, 86 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 87 | ), 88 | label = { Text("Label here") }, 89 | colors = TextFieldDefaults.outlinedTextFieldColors( 90 | cursorColor = chipFieldStyle.cursorColor, 91 | focusedBorderColor = chipFieldStyle.cursorColor, 92 | focusedLabelColor = chipFieldStyle.cursorColor, 93 | ), 94 | ) 95 | } 96 | 97 | @Composable 98 | private fun MaterialFilled(chipFieldStyle: ChipFieldStyle) { 99 | val state = rememberChipTextFieldState(chips = SampleChips.text) 100 | ChipTextField( 101 | state = state, 102 | modifier = Modifier.padding(8.dp), 103 | onSubmit = ::Chip, 104 | chipStyle = ChipTextFieldDefaults.chipStyle( 105 | focusedTextColor = chipFieldStyle.textColor, 106 | focusedBorderColor = chipFieldStyle.borderColor, 107 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 108 | ), 109 | label = { Text("Label here") }, 110 | colors = TextFieldDefaults.textFieldColors( 111 | cursorColor = chipFieldStyle.cursorColor, 112 | focusedIndicatorColor = chipFieldStyle.cursorColor, 113 | focusedLabelColor = chipFieldStyle.cursorColor, 114 | ), 115 | ) 116 | } 117 | 118 | @Composable 119 | internal fun Scrollable(chipFieldStyle: ChipFieldStyle) { 120 | val initialChips = remember { SampleChips.text + SampleChips.text } 121 | 122 | val filledState = rememberChipTextFieldState(chips = initialChips) 123 | 124 | val outlinedState = rememberChipTextFieldState(chips = initialChips) 125 | 126 | ChipTextField( 127 | state = filledState, 128 | modifier = Modifier.padding(8.dp), 129 | innerModifier = Modifier 130 | .heightIn(max = 100.dp) 131 | .verticalScroll(state = rememberScrollState()), 132 | onSubmit = ::Chip, 133 | chipStyle = ChipTextFieldDefaults.chipStyle( 134 | focusedTextColor = chipFieldStyle.textColor, 135 | focusedBorderColor = chipFieldStyle.borderColor, 136 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 137 | ), 138 | label = { Text("Label here") }, 139 | colors = TextFieldDefaults.textFieldColors( 140 | cursorColor = chipFieldStyle.cursorColor, 141 | focusedIndicatorColor = chipFieldStyle.cursorColor, 142 | focusedLabelColor = chipFieldStyle.cursorColor, 143 | ), 144 | ) 145 | 146 | OutlinedChipTextField( 147 | state = outlinedState, 148 | onSubmit = ::Chip, 149 | modifier = Modifier.padding(8.dp), 150 | innerModifier = Modifier 151 | .heightIn(max = 100.dp) 152 | .verticalScroll(state = rememberScrollState()), 153 | chipStyle = ChipTextFieldDefaults.chipStyle( 154 | focusedTextColor = chipFieldStyle.textColor, 155 | focusedBorderColor = chipFieldStyle.borderColor, 156 | focusedBackgroundColor = chipFieldStyle.backgroundColor, 157 | ), 158 | label = { Text("Label here") }, 159 | colors = TextFieldDefaults.outlinedTextFieldColors( 160 | cursorColor = chipFieldStyle.cursorColor, 161 | focusedBorderColor = chipFieldStyle.cursorColor, 162 | focusedLabelColor = chipFieldStyle.cursorColor, 163 | ), 164 | ) 165 | } 166 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m3/ChipsHeader.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m3 2 | 3 | import androidx.compose.foundation.layout.padding 4 | import androidx.compose.material.Text 5 | import androidx.compose.material3.MaterialTheme 6 | import androidx.compose.runtime.Composable 7 | import androidx.compose.ui.Modifier 8 | import androidx.compose.ui.text.font.FontWeight 9 | import androidx.compose.ui.unit.dp 10 | 11 | @Composable 12 | internal fun ChipsHeader( 13 | name: String, 14 | modifier: Modifier = Modifier 15 | ) { 16 | Text( 17 | text = name, 18 | modifier = modifier.padding(8.dp, 4.dp), 19 | fontWeight = FontWeight.Bold, 20 | color = MaterialTheme.colorScheme.primary, 21 | ) 22 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/m3/M3ChipsScreen.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.m3 2 | 3 | import androidx.compose.foundation.isSystemInDarkTheme 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.Spacer 6 | import androidx.compose.foundation.layout.fillMaxSize 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.layout.height 9 | import androidx.compose.foundation.layout.padding 10 | import androidx.compose.foundation.rememberScrollState 11 | import androidx.compose.foundation.verticalScroll 12 | import androidx.compose.material3.MaterialTheme 13 | import androidx.compose.material3.Surface 14 | import androidx.compose.material3.Text 15 | import androidx.compose.material3.darkColorScheme 16 | import androidx.compose.material3.lightColorScheme 17 | import androidx.compose.runtime.Composable 18 | import androidx.compose.ui.Modifier 19 | import androidx.compose.ui.unit.dp 20 | import com.dokar.chiptextfield.Chip 21 | import com.dokar.chiptextfield.m3.ChipTextField 22 | import com.dokar.chiptextfield.m3.OutlinedChipTextField 23 | import com.dokar.chiptextfield.rememberChipTextFieldState 24 | import com.dokar.chiptextfield.sample.data.SampleChips 25 | 26 | @Composable 27 | fun M3ChipsScreen(modifier: Modifier = Modifier) { 28 | MaterialTheme( 29 | colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme(), 30 | ) { 31 | Surface( 32 | color = MaterialTheme.colorScheme.surface, 33 | modifier = modifier.fillMaxSize() 34 | ) { 35 | Column( 36 | modifier = Modifier 37 | .fillMaxWidth() 38 | .verticalScroll(state = rememberScrollState()), 39 | ) { 40 | Spacer(modifier = Modifier.height(32.dp)) 41 | 42 | ChipsHeader(name = "Filled") 43 | MaterialFilled() 44 | 45 | Spacer(modifier = Modifier.height(32.dp)) 46 | 47 | ChipsHeader(name = "Outlined") 48 | MaterialOutlined() 49 | } 50 | } 51 | } 52 | } 53 | 54 | @Composable 55 | private fun MaterialFilled(modifier: Modifier = Modifier) { 56 | val state = rememberChipTextFieldState(chips = SampleChips.text) 57 | ChipTextField( 58 | state = state, 59 | modifier = modifier.padding(8.dp), 60 | onSubmit = ::Chip, 61 | label = { Text("Label here") }, 62 | ) 63 | } 64 | 65 | @Composable 66 | private fun MaterialOutlined(modifier: Modifier = Modifier) { 67 | val state = rememberChipTextFieldState(chips = SampleChips.text) 68 | OutlinedChipTextField( 69 | state = state, 70 | onSubmit = ::Chip, 71 | modifier = modifier.padding(8.dp), 72 | label = { Text("Label here") }, 73 | ) 74 | } 75 | -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple200 = Color(0xFFBB86FC) 6 | val Purple500 = Color(0xFF6200EE) 7 | val Purple700 = Color(0xFF3700B3) 8 | val Teal200 = Color(0xFF03DAC5) -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/theme/Shape.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.theme 2 | 3 | import androidx.compose.foundation.shape.RoundedCornerShape 4 | import androidx.compose.material.Shapes 5 | import androidx.compose.ui.unit.dp 6 | 7 | val Shapes = Shapes( 8 | small = RoundedCornerShape(4.dp), 9 | medium = RoundedCornerShape(4.dp), 10 | large = RoundedCornerShape(0.dp) 11 | ) -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.theme 2 | 3 | import androidx.compose.foundation.isSystemInDarkTheme 4 | import androidx.compose.material.MaterialTheme 5 | import androidx.compose.material.darkColors 6 | import androidx.compose.material.lightColors 7 | import androidx.compose.runtime.Composable 8 | 9 | private val DarkColorPalette = darkColors( 10 | primary = Purple200, 11 | primaryVariant = Purple700, 12 | secondary = Teal200 13 | ) 14 | 15 | private val LightColorPalette = lightColors( 16 | primary = Purple500, 17 | primaryVariant = Purple700, 18 | secondary = Teal200 19 | 20 | /* Other default colors to override 21 | background = Color.White, 22 | surface = Color.White, 23 | onPrimary = Color.White, 24 | onSecondary = Color.Black, 25 | onBackground = Color.Black, 26 | onSurface = Color.Black, 27 | */ 28 | ) 29 | 30 | @Composable 31 | fun ChipTextFieldTheme( 32 | darkTheme: Boolean = isSystemInDarkTheme(), 33 | content: @Composable() () -> Unit 34 | ) { 35 | val colors = if (darkTheme) { 36 | DarkColorPalette 37 | } else { 38 | LightColorPalette 39 | } 40 | 41 | MaterialTheme( 42 | colors = colors, 43 | typography = Typography, 44 | shapes = Shapes, 45 | content = content 46 | ) 47 | } -------------------------------------------------------------------------------- /sample/shared/src/commonMain/kotlin/com/dokar/chiptextfield/sample/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample.theme 2 | 3 | import androidx.compose.material.Typography 4 | import androidx.compose.ui.text.TextStyle 5 | import androidx.compose.ui.text.font.FontFamily 6 | import androidx.compose.ui.text.font.FontWeight 7 | import androidx.compose.ui.unit.sp 8 | 9 | // Set of Material typography styles to start with 10 | val Typography = Typography( 11 | body1 = TextStyle( 12 | fontFamily = FontFamily.Default, 13 | fontWeight = FontWeight.Normal, 14 | fontSize = 16.sp 15 | ) 16 | /* Other default text styles to override 17 | button = TextStyle( 18 | fontFamily = FontFamily.Default, 19 | fontWeight = FontWeight.W500, 20 | fontSize = 14.sp 21 | ), 22 | caption = TextStyle( 23 | fontFamily = FontFamily.Default, 24 | fontWeight = FontWeight.Normal, 25 | fontSize = 12.sp 26 | ) 27 | */ 28 | ) -------------------------------------------------------------------------------- /sample/shared/src/jsMain/kotlin/com/dokar/chiptextfield/sample/Platform.js.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.ui.Modifier 5 | import coil3.ImageLoader 6 | import coil3.annotation.ExperimentalCoilApi 7 | import coil3.compose.setSingletonImageLoaderFactory 8 | import coil3.fetch.NetworkFetcher 9 | 10 | @OptIn(ExperimentalCoilApi::class) 11 | @Composable 12 | actual fun setupImageLoader() { 13 | setSingletonImageLoaderFactory { context -> 14 | ImageLoader.Builder(context) 15 | .components { 16 | add(NetworkFetcher.Factory()) 17 | } 18 | .build() 19 | } 20 | } 21 | 22 | @Composable 23 | actual fun AsyncImage( 24 | model: Any, 25 | contentDescription: String?, 26 | modifier: Modifier, 27 | ) { 28 | coil3.compose.AsyncImage(model, contentDescription, modifier) 29 | } -------------------------------------------------------------------------------- /sample/shared/src/jvmMain/kotlin/com/dokar/chiptextfield/sample/Platform.jvm.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.ui.Modifier 5 | import coil3.ImageLoader 6 | import coil3.annotation.ExperimentalCoilApi 7 | import coil3.compose.setSingletonImageLoaderFactory 8 | import coil3.fetch.NetworkFetcher 9 | 10 | @OptIn(ExperimentalCoilApi::class) 11 | @Composable 12 | actual fun setupImageLoader() { 13 | setSingletonImageLoaderFactory { context -> 14 | ImageLoader.Builder(context) 15 | .components { 16 | add(NetworkFetcher.Factory()) 17 | } 18 | .build() 19 | } 20 | } 21 | 22 | @Composable 23 | actual fun AsyncImage( 24 | model: Any, 25 | contentDescription: String?, 26 | modifier: Modifier, 27 | ) { 28 | coil3.compose.AsyncImage(model, contentDescription, modifier) 29 | } -------------------------------------------------------------------------------- /sample/shared/src/wasmJsMain/kotlin/com/dokar/chiptextfield/sample/Platform.wasmJs.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.foundation.layout.Box 4 | import androidx.compose.runtime.Composable 5 | import androidx.compose.ui.Modifier 6 | 7 | @Composable 8 | actual fun setupImageLoader() { 9 | } 10 | 11 | @Composable 12 | actual fun AsyncImage( 13 | model: Any, 14 | contentDescription: String?, 15 | modifier: Modifier, 16 | ) { 17 | // Until coil3 has the wasm target 18 | Box(modifier = modifier) 19 | } -------------------------------------------------------------------------------- /sample/webApp/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /sample/webApp/build.gradle.kts: -------------------------------------------------------------------------------- 1 | import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl 2 | import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig 3 | 4 | plugins { 5 | id("kotlin-multiplatform") 6 | id("org.jetbrains.compose") 7 | alias(libs.plugins.compose.compiler) 8 | } 9 | 10 | kotlin { 11 | js(IR) { 12 | moduleName = "chiptextfield-sample" 13 | browser { 14 | commonWebpackConfig { 15 | outputFileName = "chiptextfield-sample.js" 16 | } 17 | } 18 | binaries.executable() 19 | } 20 | 21 | @OptIn(ExperimentalWasmDsl::class) 22 | wasmJs { 23 | moduleName = "chiptextfield-wasmjs-sample" 24 | binaries.executable() 25 | browser { 26 | commonWebpackConfig { 27 | devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply { 28 | // Uncomment and configure this if you want to open a browser different from the system default 29 | // open = mapOf( 30 | // "app" to mapOf( 31 | // "name" to "google chrome" 32 | // ) 33 | // ) 34 | 35 | static = (static ?: mutableListOf()).apply { 36 | // Serve sources to debug inside browser 37 | add(project.rootDir.path) 38 | } 39 | } 40 | } 41 | 42 | // Uncomment the next line to apply Binaryen and get optimized wasm binaries 43 | // applyBinaryen() 44 | } 45 | } 46 | 47 | sourceSets { 48 | val commonMain by getting { 49 | dependencies { 50 | implementation(project(":sample:shared")) 51 | @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class) 52 | implementation(compose.components.resources) 53 | } 54 | } 55 | } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /sample/webApp/src/jsMain/kotlin/com/dokar/chiptextfield/sample/Main.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.ui.ExperimentalComposeUiApi 4 | import androidx.compose.ui.window.CanvasBasedWindow 5 | import org.jetbrains.skiko.wasm.onWasmReady 6 | 7 | @OptIn(ExperimentalComposeUiApi::class) 8 | fun main() { 9 | onWasmReady { 10 | CanvasBasedWindow("ChipTextField Sample") { 11 | SampleScreen() 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /sample/webApp/src/jsMain/resources/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ChipTextField Sample 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /sample/webApp/src/wasmJsMain/kotlin/com/dokar/chiptextfield/sample/Main.kt: -------------------------------------------------------------------------------- 1 | package com.dokar.chiptextfield.sample 2 | 3 | import androidx.compose.ui.ExperimentalComposeUiApi 4 | import androidx.compose.ui.window.CanvasBasedWindow 5 | 6 | @OptIn(ExperimentalComposeUiApi::class) 7 | fun main() { 8 | CanvasBasedWindow("ChipTextField Sample") { 9 | SampleScreen() 10 | } 11 | } -------------------------------------------------------------------------------- /sample/webApp/src/wasmJsMain/resources/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChipTextField Sample (Kotlin/Wasm) 7 | 8 | 9 | 42 | 43 | 44 | 45 | 46 |
47 | ⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals. 48 | For more information, see https://kotl.in/wasm-help. 49 |
50 |
51 |
    52 |
  • For Chrome and Chromium-based browsers (Edge, Brave etc.), it should just work since version 119.
    • 53 |
  • For Firefox 120 it should just work.
    • 54 |
  • For Firefox 119: 55 |
      56 |
    1. Open about:config in the browser.
      2. 57 |
    2. Enable javascript.options.wasm_gc.
      3. 58 |
    3. Refresh this page.
      4. 59 |
    60 |
    • 61 |
62 |
63 | 64 | -------------------------------------------------------------------------------- /sample/webApp/src/wasmJsMain/resources/load.mjs: -------------------------------------------------------------------------------- 1 | import { instantiate } from './chiptextfield-sample.uninstantiated.mjs'; 2 | 3 | await wasmSetup; 4 | 5 | instantiate({ skia: Module['asm'] }); -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | import org.gradle.api.initialization.resolve.RepositoriesMode 2 | 3 | pluginManagement { 4 | repositories { 5 | mavenCentral() 6 | google() 7 | gradlePluginPortal() 8 | } 9 | } 10 | 11 | dependencyResolutionManagement { 12 | repositoriesMode.set(RepositoriesMode.PREFER_PROJECT) 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | } 18 | 19 | rootProject.name = "ChipTextField" 20 | 21 | include ':chiptextfield-core' 22 | include ':chiptextfield' 23 | include ':chiptextfield-m3' 24 | include ':sample:shared' 25 | include ':sample:android' 26 | include ':sample:desktop' 27 | include ':sample:webApp' 28 | --------------------------------------------------------------------------------