├── .config └── dotnet-tools.json ├── .editorconfig ├── .gitignore ├── Build.fs ├── Build.fsproj ├── Feliz.ReactSpectrum.sln ├── Helpers.fs ├── LICENSE ├── NuGet.config ├── README.md ├── RELEASE_NOTES.md ├── docs ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.png ├── publish.js ├── src │ ├── App.fsproj │ ├── AppShell.fs │ ├── Main.fs │ ├── Pages │ │ ├── ApplicationDocs.fs │ │ ├── ButtonsDocs.fs │ │ ├── CollectionsDocs.fs │ │ ├── ContentDocs.fs │ │ ├── FormsDocs.fs │ │ ├── GeneralDocs.fs │ │ ├── IconsDocs.fs │ │ ├── LayoutDocs.fs │ │ ├── NavigationDocs.fs │ │ ├── OverlaysDocs.fs │ │ ├── PickersDocs.fs │ │ ├── Shared.fs │ │ ├── SlidersDocs.fs │ │ └── StatusDocs.fs │ └── css │ │ ├── main.css │ │ └── reset.css └── vite.config.js └── src └── Feliz.ReactSpectrum ├── BaseComponents.fs ├── Buttons.fs ├── Collections.fs ├── Common.fs ├── Content.fs ├── Feliz.ReactSpectrum.fsproj ├── Forms.fs ├── Icon.fs ├── Layout.fs ├── Navigation.fs ├── Overlays.fs ├── Pickers.fs ├── Provider.fs ├── Sliders.fs ├── Spectrum.fs └── Status.fs /.config/dotnet-tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "isRoot": true, 4 | "tools": { 5 | "fable": { 6 | "version": "3.7.3", 7 | "commands": [ 8 | "fable" 9 | ] 10 | }, 11 | "femto": { 12 | "version": "0.12.0", 13 | "commands": [ 14 | "femto" 15 | ] 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = false 9 | 10 | [src/*.fs] 11 | [tests/*.fs] 12 | # Feliz style 13 | fsharp_single_argument_web_mode=true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Fable generated files 2 | .fable 3 | fable_modules 4 | *.fs.js 5 | bundle.js 6 | temp/** 7 | build/client 8 | build/tests 9 | dist/** 10 | 11 | ## Ignore Visual Studio temporary files, build results, and 12 | ## files generated by popular Visual Studio add-ons. 13 | ## 14 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 15 | 16 | # User-specific files 17 | *.suo 18 | *.user 19 | *.userosscache 20 | *.sln.docstates 21 | 22 | # User-specific files (MonoDevelop/Xamarin Studio) 23 | *.userprefs 24 | 25 | # Build results 26 | [Dd]ebug/ 27 | [Dd]ebugPublic/ 28 | [Rr]elease/ 29 | [Rr]eleases/ 30 | x64/ 31 | x86/ 32 | bld/ 33 | [Bb]in/ 34 | [Oo]bj/ 35 | [Ll]og/ 36 | 37 | # Visual Studio 2015 cache/options directory 38 | .vs/ 39 | # Uncomment if you have tasks that create the project's static files in wwwroot 40 | #wwwroot/ 41 | 42 | # MSTest test Results 43 | [Tt]est[Rr]esult*/ 44 | [Bb]uild[Ll]og.* 45 | 46 | # NUNIT 47 | *.VisualState.xml 48 | TestResult.xml 49 | 50 | # Build Results of an ATL Project 51 | [Dd]ebugPS/ 52 | [Rr]eleasePS/ 53 | dlldata.c 54 | 55 | # .NET Core 56 | project.lock.json 57 | project.fragment.lock.json 58 | artifacts/ 59 | **/Properties/launchSettings.json 60 | 61 | *_i.c 62 | *_p.c 63 | *_i.h 64 | *.ilk 65 | *.meta 66 | *.obj 67 | *.pch 68 | *.pdb 69 | *.pgc 70 | *.pgd 71 | *.rsp 72 | *.sbr 73 | *.tlb 74 | *.tli 75 | *.tlh 76 | *.tmp 77 | *.tmp_proj 78 | *.log 79 | *.vspscc 80 | *.vssscc 81 | .builds 82 | *.pidb 83 | *.svclog 84 | *.scc 85 | 86 | # Chutzpah Test files 87 | _Chutzpah* 88 | 89 | # Visual C++ cache files 90 | ipch/ 91 | *.aps 92 | *.ncb 93 | *.opendb 94 | *.opensdf 95 | *.sdf 96 | *.cachefile 97 | *.VC.db 98 | *.VC.VC.opendb 99 | 100 | # Visual Studio profiler 101 | *.psess 102 | *.vsp 103 | *.vspx 104 | *.sap 105 | 106 | # TFS 2012 Local Workspace 107 | $tf/ 108 | 109 | # Guidance Automation Toolkit 110 | *.gpState 111 | 112 | # ReSharper is a .NET coding add-in 113 | _ReSharper*/ 114 | *.[Rr]e[Ss]harper 115 | *.DotSettings.user 116 | 117 | # JustCode is a .NET coding add-in 118 | .JustCode 119 | 120 | # TeamCity is a build add-in 121 | _TeamCity* 122 | 123 | # DotCover is a Code Coverage Tool 124 | *.dotCover 125 | 126 | # Visual Studio code coverage results 127 | *.coverage 128 | *.coveragexml 129 | 130 | # NCrunch 131 | _NCrunch_* 132 | .*crunch*.local.xml 133 | nCrunchTemp_* 134 | 135 | # MightyMoose 136 | *.mm.* 137 | AutoTest.Net/ 138 | 139 | # Web workbench (sass) 140 | .sass-cache/ 141 | 142 | # Installshield output folder 143 | [Ee]xpress/ 144 | 145 | # DocProject is a documentation generator add-in 146 | DocProject/buildhelp/ 147 | DocProject/Help/*.HxT 148 | DocProject/Help/*.HxC 149 | DocProject/Help/*.hhc 150 | DocProject/Help/*.hhk 151 | DocProject/Help/*.hhp 152 | DocProject/Help/Html2 153 | DocProject/Help/html 154 | 155 | # Click-Once directory 156 | publish/ 157 | 158 | # Publish Web Output 159 | *.[Pp]ublish.xml 160 | *.azurePubxml 161 | # TODO: Comment the next line if you want to checkin your web deploy settings 162 | # but database connection strings (with potential passwords) will be unencrypted 163 | *.pubxml 164 | *.publishproj 165 | 166 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 167 | # checkin your Azure Web App publish settings, but sensitive information contained 168 | # in these scripts will be unencrypted 169 | PublishScripts/ 170 | 171 | # NuGet Packages 172 | *.nupkg 173 | # The packages folder can be ignored because of Package Restore 174 | **/packages/* 175 | # except build/, which is used as an MSBuild target. 176 | !**/packages/build/ 177 | # Uncomment if necessary however generally it will be regenerated when needed 178 | #!**/packages/repositories.config 179 | # NuGet v3's project.json files produces more ignorable files 180 | *.nuget.props 181 | *.nuget.targets 182 | 183 | # Microsoft Azure Build Output 184 | csx/ 185 | *.build.csdef 186 | 187 | # Microsoft Azure Emulator 188 | ecf/ 189 | rcf/ 190 | 191 | # Windows Store app package directories and files 192 | AppPackages/ 193 | BundleArtifacts/ 194 | Package.StoreAssociation.xml 195 | _pkginfo.txt 196 | 197 | # Visual Studio cache files 198 | # files ending in .cache can be ignored 199 | *.[Cc]ache 200 | # but keep track of directories ending in .cache 201 | !*.[Cc]ache/ 202 | 203 | # Others 204 | ClientBin/ 205 | ~$* 206 | *~ 207 | *.dbmdl 208 | *.dbproj.schemaview 209 | *.jfm 210 | *.pfx 211 | *.publishsettings 212 | orleans.codegen.cs 213 | 214 | # Since there are multiple workflows, uncomment next line to ignore bower_components 215 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 216 | #bower_components/ 217 | 218 | # RIA/Silverlight projects 219 | Generated_Code/ 220 | 221 | # Backup & report files from converting an old project file 222 | # to a newer Visual Studio version. Backup files are not needed, 223 | # because we have git ;-) 224 | _UpgradeReport_Files/ 225 | Backup*/ 226 | UpgradeLog*.XML 227 | UpgradeLog*.htm 228 | 229 | # SQL Server files 230 | *.mdf 231 | *.ldf 232 | *.ndf 233 | 234 | # Business Intelligence projects 235 | *.rdl.data 236 | *.bim.layout 237 | *.bim_*.settings 238 | 239 | # Microsoft Fakes 240 | FakesAssemblies/ 241 | 242 | # GhostDoc plugin setting file 243 | *.GhostDoc.xml 244 | 245 | # Node.js Tools for Visual Studio 246 | .ntvs_analysis.dat 247 | node_modules/ 248 | 249 | # Typescript v1 declaration files 250 | typings/ 251 | 252 | # Visual Studio 6 build log 253 | *.plg 254 | 255 | # Visual Studio 6 workspace options file 256 | *.opt 257 | 258 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 259 | *.vbw 260 | 261 | # Visual Studio LightSwitch build output 262 | **/*.HTMLClient/GeneratedArtifacts 263 | **/*.DesktopClient/GeneratedArtifacts 264 | **/*.DesktopClient/ModelManifest.xml 265 | **/*.Server/GeneratedArtifacts 266 | **/*.Server/ModelManifest.xml 267 | _Pvt_Extensions 268 | 269 | # Paket dependency manager 270 | .paket/paket.exe 271 | paket-files/ 272 | 273 | # FAKE - F# Make 274 | .fake/ 275 | 276 | # JetBrains Rider 277 | .idea/ 278 | *.sln.iml 279 | 280 | # CodeRush 281 | .cr/ 282 | 283 | # Python Tools for Visual Studio (PTVS) 284 | __pycache__/ 285 | *.pyc 286 | 287 | # Cake - Uncomment if you are using it 288 | # tools/** 289 | # !tools/packages.config 290 | 291 | # Telerik's JustMock configuration file 292 | *.jmconfig 293 | 294 | # BizTalk build output 295 | *.btp.cs 296 | *.btm.cs 297 | *.odx.cs 298 | *.xsd.cs 299 | 300 | .ionide 301 | .ba 302 | docs/dist -------------------------------------------------------------------------------- /Build.fs: -------------------------------------------------------------------------------- 1 | open Fake.Core 2 | open Fake.IO 3 | 4 | open Helpers 5 | 6 | initializeContext() 7 | 8 | open Fake.Core.TargetOperators 9 | 10 | let () = Path.combine 11 | let libPath = "./src/Feliz.ReactSpectrum" 12 | let docsPath = "./docs" 13 | let docsSrcPath = docsPath "src" 14 | let docsPublishPath = docsSrcPath "dist" 15 | 16 | let cleanCacheDirs () = 17 | [ libPath "bin" 18 | libPath "obj" 19 | docsSrcPath "bin" 20 | docsSrcPath "obj" ] 21 | |> Shell.cleanDirs 22 | 23 | let cleanFableFiles () = 24 | // Delete *.fs.js files created by Fable 25 | run dotnet "fable clean --yes" libPath 26 | run dotnet "fable clean --yes" docsSrcPath 27 | 28 | let validateFemto projectPath = 29 | run dotnet "femto --validate" projectPath 30 | 31 | let publish projectPath = 32 | [ projectPath "bin" 33 | projectPath "obj" ] |> Shell.cleanDirs 34 | validateFemto projectPath 35 | run dotnet "restore --no-cache" projectPath 36 | run dotnet "pack -c Release" projectPath 37 | let nugetKey = 38 | match Environment.environVarOrNone "NUGET_KEY" with 39 | | Some nugetKey -> nugetKey 40 | | None -> failwith "The Nuget API key must be set in a NUGET_KEY environmental variable" 41 | 42 | let nupkg = 43 | projectPath "bin" "Release" 44 | |> DirectoryInfo.ofPath 45 | |> DirectoryInfo.getFiles 46 | |> Seq.head 47 | |> (fun x -> x.FullName) 48 | 49 | let pushCmd = sprintf "nuget push %s -s nuget.org -k %s" nupkg nugetKey 50 | run dotnet pushCmd projectPath 51 | 52 | Target.create "Clean" <| fun _ -> 53 | cleanFableFiles() 54 | cleanCacheDirs() 55 | 56 | Target.create "InstallNpmPackages" <| fun _ -> 57 | run npm "install" docsPath 58 | 59 | Target.create "BuildDocs" <| fun _ -> 60 | run npm "run build" docsPath 61 | 62 | Target.create "RunDocs" <| fun _ -> 63 | run npm "run start" docsPath 64 | 65 | Target.create "PublishDocs" <| fun _ -> 66 | run npm "run publish-docs" docsPath 67 | 68 | Target.create "PublishNuget" <| fun _ -> 69 | publish libPath 70 | 71 | open Fake.Core.TargetOperators 72 | 73 | let dependencies = [ 74 | "Clean" 75 | ==> "InstallNpmPackages" 76 | ==> "BuildDocs" 77 | 78 | "InstallNpmPackages" 79 | ==> "RunDocs" 80 | 81 | "Clean" 82 | ==> "InstallNpmPackages" 83 | ==> "BuildDocs" 84 | ==> "PublishDocs" 85 | 86 | "Clean" 87 | ==> "PublishNuget" 88 | ] 89 | 90 | [] 91 | let main args = runOrDefault args 92 | -------------------------------------------------------------------------------- /Build.fsproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | Exe 4 | net6.0 5 | 6 | 7 | 8 | 9 | 10 | 11 | $(NoWarn);NU1701 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Feliz.ReactSpectrum.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 16 4 | VisualStudioVersion = 16.0.30114.105 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{81482EC1-BD40-4AD1-9B0D-2F4853DCFA33}" 7 | EndProject 8 | Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "Feliz.ReactSpectrum", "src\Feliz.ReactSpectrum\Feliz.ReactSpectrum.fsproj", "{0305AE00-1EE4-4275-BB06-C3909A10962F}" 9 | EndProject 10 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{725FE22D-455D-4974-8D40-7DE2081AA627}" 11 | EndProject 12 | Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "App", "docs\src\App.fsproj", "{9659F009-C395-4997-A781-95FBA7831DD5}" 13 | EndProject 14 | Global 15 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 16 | Debug|Any CPU = Debug|Any CPU 17 | Release|Any CPU = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 23 | {0305AE00-1EE4-4275-BB06-C3909A10962F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 24 | {0305AE00-1EE4-4275-BB06-C3909A10962F}.Debug|Any CPU.Build.0 = Debug|Any CPU 25 | {0305AE00-1EE4-4275-BB06-C3909A10962F}.Release|Any CPU.ActiveCfg = Release|Any CPU 26 | {0305AE00-1EE4-4275-BB06-C3909A10962F}.Release|Any CPU.Build.0 = Release|Any CPU 27 | {9659F009-C395-4997-A781-95FBA7831DD5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 28 | {9659F009-C395-4997-A781-95FBA7831DD5}.Debug|Any CPU.Build.0 = Debug|Any CPU 29 | {9659F009-C395-4997-A781-95FBA7831DD5}.Release|Any CPU.ActiveCfg = Release|Any CPU 30 | {9659F009-C395-4997-A781-95FBA7831DD5}.Release|Any CPU.Build.0 = Release|Any CPU 31 | EndGlobalSection 32 | GlobalSection(NestedProjects) = preSolution 33 | {0305AE00-1EE4-4275-BB06-C3909A10962F} = {81482EC1-BD40-4AD1-9B0D-2F4853DCFA33} 34 | {9659F009-C395-4997-A781-95FBA7831DD5} = {725FE22D-455D-4974-8D40-7DE2081AA627} 35 | EndGlobalSection 36 | EndGlobal 37 | -------------------------------------------------------------------------------- /Helpers.fs: -------------------------------------------------------------------------------- 1 | // https://github.com/SAFE-Stack/SAFE-template/blob/master/Content/default/Helpers.fs 2 | module Helpers 3 | 4 | open Fake.Core 5 | 6 | let initializeContext () = 7 | let execContext = Context.FakeExecutionContext.Create false "build.fsx" [ ] 8 | Context.setExecutionContext (Context.RuntimeContext.Fake execContext) 9 | 10 | module Proc = 11 | module Parallel = 12 | open System 13 | 14 | let locker = obj() 15 | 16 | let colors = 17 | [| ConsoleColor.Blue 18 | ConsoleColor.Yellow 19 | ConsoleColor.Magenta 20 | ConsoleColor.Cyan 21 | ConsoleColor.DarkBlue 22 | ConsoleColor.DarkYellow 23 | ConsoleColor.DarkMagenta 24 | ConsoleColor.DarkCyan |] 25 | 26 | let print color (colored: string) (line: string) = 27 | lock locker 28 | (fun () -> 29 | let currentColor = Console.ForegroundColor 30 | Console.ForegroundColor <- color 31 | Console.Write colored 32 | Console.ForegroundColor <- currentColor 33 | Console.WriteLine line) 34 | 35 | let onStdout index name (line: string) = 36 | let color = colors.[index % colors.Length] 37 | if isNull line then 38 | print color $"{name}: --- END ---" "" 39 | else if String.isNotNullOrEmpty line then 40 | print color $"{name}: " line 41 | 42 | let onStderr name (line: string) = 43 | let color = ConsoleColor.Red 44 | if isNull line |> not then 45 | print color $"{name}: " line 46 | 47 | let redirect (index, (name, createProcess)) = 48 | createProcess 49 | |> CreateProcess.redirectOutputIfNotRedirected 50 | |> CreateProcess.withOutputEvents (onStdout index name) (onStderr name) 51 | 52 | let printStarting indexed = 53 | for (index, (name, c: CreateProcess<_>)) in indexed do 54 | let color = colors.[index % colors.Length] 55 | let wd = 56 | c.WorkingDirectory 57 | |> Option.defaultValue "" 58 | let exe = c.Command.Executable 59 | let args = c.Command.Arguments.ToStartInfo 60 | print color $"{name}: {wd}> {exe} {args}" "" 61 | 62 | let run cs = 63 | cs 64 | |> Seq.toArray 65 | |> Array.indexed 66 | |> fun x -> printStarting x; x 67 | |> Array.map redirect 68 | |> Array.Parallel.map Proc.run 69 | 70 | let createProcess exe arg dir = 71 | CreateProcess.fromRawCommandLine exe arg 72 | |> CreateProcess.withWorkingDirectory dir 73 | |> CreateProcess.ensureExitCode 74 | 75 | let dotnet = createProcess "dotnet" 76 | let npm = 77 | let npmPath = 78 | match ProcessUtils.tryFindFileOnPath "npm" with 79 | | Some path -> path 80 | | None -> 81 | "npm was not found in path. Please install it and make sure it's available from your path. " + 82 | "See https://safe-stack.github.io/docs/quickstart/#install-pre-requisites for more info" 83 | |> failwith 84 | 85 | createProcess npmPath 86 | 87 | let run proc arg dir = 88 | proc arg dir 89 | |> Proc.run 90 | |> ignore 91 | 92 | let runParallel processes = 93 | processes 94 | |> Proc.Parallel.run 95 | |> ignore 96 | 97 | let runOrDefault args = 98 | try 99 | match args with 100 | | [| "help" |] -> Target.listAvailable() 101 | | [| target |] -> Target.runOrDefault target 102 | | _ -> Target.runOrDefault "RunDocs" 103 | 0 104 | with e -> 105 | printfn "%A" e 106 | 1 107 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Danila George 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /NuGet.config: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Feliz.ReactSpectrum [](https://www.nuget.org/packages/Feliz.ReactSpectrum/) 2 | Feliz-style Fable bindings for Adobe's [React Spectrum components](https://react-spectrum.adobe.com/react-spectrum/getting-started.html) 3 | 4 | # Installing 5 | - Using the [Femto](https://github.com/zaid-ajaj/femto) dotnet tool makes sure the required npm dependencies are correctly installed: 6 | ``` 7 | dotnet femto install Feliz.ReactSpectrum 8 | ``` 9 | - Using NuGet: 10 | ``` 11 | dotnet add package Feliz.ReactSpectrum 12 | ``` 13 | - Don't forget to also install the npm dependencies manually if you're not using Femto: 14 | ``` 15 | npm install @adobe/react-spectrum 16 | npm install @spectrum-icons/illustrations 17 | npm install @spectrum-icons/workflow 18 | ``` 19 | 20 | # Documentation 21 | See it in action here: https://geodanila.github.io/Feliz.ReactSpectrum/ 22 | 23 | # Running the docs locally 24 | - Make sure you have the [.NET 6 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) installed 25 | - Run a `dotnet tool restore` in order to restore the tools required for building the bindings library and docs app 26 | - Run `dotnet run RunDocs` - wait a bit and a browser window will open showing the docs app. The app will run in development mode, with hot module reloading enabled 27 | -------------------------------------------------------------------------------- /RELEASE_NOTES.md: -------------------------------------------------------------------------------- 1 | ### 0.2.0 - Wednesday, February 23, 2022 2 | - Updated to the latest React Spectrum release ([15 February 2022](https://react-spectrum.adobe.com/releases/2022-02-15.html)) 3 | - Ensure you're using the following npm package versions: 4 | - @adobe/react-spectrum: 3.16.3 5 | - @spectrum-icons/illustrations: 3.2.4 6 | - @spectrum-icons/workflow: 3.2.3 7 | - Added support for the ContextualHelp and ActionMenu components 8 | - Added support for the 'useProvider' hook 9 | - Removed hacks from the ToggleButton and NumberField components that are no longer needed 10 | 11 | ### 0.1.1 - Tuesday, January 18, 2022 12 | - Added support for the the Provider.breakpoints prop 13 | 14 | ### 0.1.0 - Monday, January 17, 2022 15 | - Initial release. Supports all of the components listed on the [React Spectrum website](https://react-spectrum.adobe.com/react-spectrum/index.html) as of @adobe/react-spectrum [v3.15.1](https://www.npmjs.com/package/@adobe/react-spectrum/v/3.15.1) 16 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Feliz.ReactSpectrum documentation 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "postinstall": "dotnet tool restore", 5 | "build": "dotnet fable src --run vite build", 6 | "publish-docs": "node publish.js", 7 | "start": "dotnet fable watch src --run vite --open --host", 8 | "serve": "vite preview" 9 | }, 10 | "devDependencies": { 11 | "gh-pages": "^3.2.3", 12 | "vite": "^2.8.4" 13 | }, 14 | "dependencies": { 15 | "@adobe/react-spectrum": "^3.16.3", 16 | "@spectrum-icons/illustrations": "^3.2.4", 17 | "@spectrum-icons/workflow": "^3.2.3", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geodanila/Feliz.ReactSpectrum/80199588fd0bdcc0ce00d73f46de0216d2bd1326/docs/public/favicon.png -------------------------------------------------------------------------------- /docs/publish.js: -------------------------------------------------------------------------------- 1 | var ghPages = require("gh-pages"); 2 | 3 | var packageUrl = "https://github.com/geodanila/Feliz.ReactSpectrum.git"; 4 | 5 | console.log("Publishing to ", packageUrl); 6 | 7 | ghPages.publish("dist", { 8 | repo: packageUrl 9 | }, function (e) { 10 | if (e === undefined) { 11 | console.log("Finished publishing succesfully"); 12 | } else { 13 | console.log("Error occured while publishing :(", e); 14 | } 15 | }); -------------------------------------------------------------------------------- /docs/src/App.fsproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | net6.0 4 | FABLE_COMPILER 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/src/AppShell.fs: -------------------------------------------------------------------------------- 1 | module AppShell 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Feliz.Router 6 | open Fable.Core 7 | open Fable.Core.JsInterop 8 | open Pages 9 | open Elmish 10 | open Elmish.React 11 | 12 | [] 13 | type SectionId = 14 | | General 15 | | Application 16 | | Layout 17 | | Buttons 18 | | Collections 19 | | Forms 20 | | Icons 21 | | Navigation 22 | | Overlays 23 | | Pickers 24 | | Sliders 25 | | Status 26 | | Content' 27 | 28 | [] 29 | type DocsId = 30 | | Overview 31 | | Installation 32 | | Provider 33 | | Flex 34 | | Grid 35 | | ActionMenu 36 | | ActionButton 37 | | ActionGroup 38 | | Button 39 | | ButtonGroup 40 | | LogicButton 41 | | ToggleButton 42 | | ListBox 43 | | Menu 44 | | MenuTrigger 45 | | TableView 46 | | Checkbox 47 | | CheckboxGroup 48 | | Form 49 | | NumberField 50 | | RadioGroup 51 | | SearchField 52 | | Switch 53 | | TextArea 54 | | TextField 55 | | WorkflowIcons 56 | | Breadcrumbs 57 | | Link 58 | | Tabs 59 | | AlertDialog 60 | | Dialog 61 | | DialogContainer 62 | | DialogTrigger 63 | | Tooltip 64 | | ContextualHelp 65 | | ComboBox 66 | | Picker 67 | | RangeSlider 68 | | Slider 69 | | Meter 70 | | ProgressBar 71 | | ProgressCircle 72 | | StatusLight 73 | | Content 74 | | Divider 75 | | Footer 76 | | Header 77 | | Heading 78 | | IllustratedMessage 79 | | Image 80 | | Keyboard 81 | | Text 82 | | View 83 | | Well 84 | 85 | let makeNavSection (id: SectionId) title navItems = 86 | Spectrum.Section [ 87 | Section.key (id |> string) 88 | Section.title title 89 | Section.children navItems 90 | ] 91 | 92 | let makeNavItem (id: DocsId) title = 93 | Spectrum.Item [ 94 | Item.key (id |> string) 95 | Item.textValue title 96 | Item.title title 97 | ] 98 | 99 | let buildNavSections () = 100 | [ 101 | makeNavSection SectionId.General "General" [ 102 | makeNavItem DocsId.Overview "Overview" 103 | makeNavItem DocsId.Installation "Installation" 104 | ] 105 | makeNavSection SectionId.Application "Application" [ 106 | makeNavItem DocsId.Provider "Provider" 107 | ] 108 | makeNavSection SectionId.Layout "Layout" [ 109 | makeNavItem DocsId.Flex "Flex" 110 | makeNavItem DocsId.Grid "Grid" 111 | ] 112 | makeNavSection SectionId.Buttons "Buttons" [ 113 | makeNavItem DocsId.ActionButton "ActionButton" 114 | makeNavItem DocsId.ActionGroup "ActionGroup" 115 | makeNavItem DocsId.Button "Button" 116 | makeNavItem DocsId.ButtonGroup "ButtonGroup" 117 | makeNavItem DocsId.LogicButton "LogicButton" 118 | makeNavItem DocsId.ToggleButton "ToggleButton" 119 | ] 120 | makeNavSection SectionId.Collections "Collections" [ 121 | makeNavItem DocsId.ActionMenu "ActionMenu" 122 | makeNavItem DocsId.ListBox "ListBox" 123 | makeNavItem DocsId.Menu "Menu" 124 | makeNavItem DocsId.MenuTrigger "MenuTrigger" 125 | makeNavItem DocsId.TableView "TableView" 126 | ] 127 | makeNavSection SectionId.Forms "Forms" [ 128 | makeNavItem DocsId.Checkbox "Checkbox" 129 | makeNavItem DocsId.CheckboxGroup "CheckboxGroup" 130 | makeNavItem DocsId.Form "Form" 131 | makeNavItem DocsId.NumberField "NumberField" 132 | makeNavItem DocsId.RadioGroup "RadioGroup" 133 | makeNavItem DocsId.SearchField "SearchField" 134 | makeNavItem DocsId.Switch "Switch" 135 | makeNavItem DocsId.TextArea "TextArea" 136 | makeNavItem DocsId.TextField "TextField" 137 | ] 138 | makeNavSection SectionId.Icons "Icons" [ 139 | makeNavItem DocsId.WorkflowIcons "Workflow Icons" 140 | ] 141 | makeNavSection SectionId.Navigation "Navigation" [ 142 | makeNavItem DocsId.Breadcrumbs "Breadcrumbs" 143 | makeNavItem DocsId.Link "Link" 144 | makeNavItem DocsId.Tabs "Tabs" 145 | ] 146 | makeNavSection SectionId.Overlays "Overlays" [ 147 | makeNavItem DocsId.AlertDialog "AlertDialog" 148 | makeNavItem DocsId.Dialog "Dialog" 149 | makeNavItem DocsId.DialogContainer "DialogContainer" 150 | makeNavItem DocsId.DialogTrigger "DialogTrigger" 151 | makeNavItem DocsId.Tooltip "Tooltip" 152 | makeNavItem DocsId.ContextualHelp "ContextualHelp" 153 | ] 154 | makeNavSection SectionId.Pickers "Pickers" [ 155 | makeNavItem DocsId.ComboBox "ComboBox" 156 | makeNavItem DocsId.Picker "Picker" 157 | ] 158 | makeNavSection SectionId.Sliders "Sliders" [ 159 | makeNavItem DocsId.RangeSlider "RangeSlider" 160 | makeNavItem DocsId.Slider "Slider" 161 | ] 162 | makeNavSection SectionId.Status "Status" [ 163 | makeNavItem DocsId.Meter "Meter" 164 | makeNavItem DocsId.ProgressBar "ProgressBar" 165 | makeNavItem DocsId.ProgressCircle "ProgressCircle" 166 | makeNavItem DocsId.StatusLight "StatusLight" 167 | ] 168 | makeNavSection SectionId.Content' "Content" [ 169 | makeNavItem DocsId.Content "Content" 170 | makeNavItem DocsId.Divider "Divider" 171 | makeNavItem DocsId.Footer "Footer" 172 | makeNavItem DocsId.Header "Header" 173 | makeNavItem DocsId.Heading "Heading" 174 | makeNavItem DocsId.IllustratedMessage "IllustratedMessage" 175 | makeNavItem DocsId.Image "Image" 176 | makeNavItem DocsId.Keyboard "Keyboard" 177 | makeNavItem DocsId.Text "Text" 178 | makeNavItem DocsId.View "View" 179 | makeNavItem DocsId.Well "Well" 180 | ] 181 | ] 182 | 183 | let getDocs = function 184 | | DocsId.Overview -> OverviewDocs () 185 | | DocsId.Installation -> InstallationDocs () 186 | | DocsId.ActionButton -> ActionButtonDocs () 187 | | DocsId.ActionGroup -> ActionGroupDocs () 188 | | DocsId.Button -> ButtonDocs () 189 | | DocsId.ButtonGroup -> ButtonGroupDocs () 190 | | DocsId.ToggleButton -> ToggleButtonDocs () 191 | | DocsId.Provider -> ProviderDocs () 192 | | DocsId.Flex -> FlexDocs () 193 | | DocsId.Grid -> GridDocs () 194 | | DocsId.LogicButton -> LogicButtonDocs () 195 | | DocsId.ActionMenu -> ActionMenuDocs () 196 | | DocsId.ListBox -> ListBoxDocs () 197 | | DocsId.Menu -> MenuDocs () 198 | | DocsId.MenuTrigger -> MenuTriggerDocs () 199 | | DocsId.TableView -> TableViewDocs () 200 | | DocsId.Checkbox -> CheckboxDocs () 201 | | DocsId.CheckboxGroup -> CheckboxGroupDocs () 202 | | DocsId.Form -> FormDocs () 203 | | DocsId.NumberField -> NumberFieldDocs () 204 | | DocsId.RadioGroup -> RadioGroupDocs () 205 | | DocsId.SearchField -> SearchFieldDocs () 206 | | DocsId.Switch -> SwitchDocs () 207 | | DocsId.TextArea -> TextAreaDocs () 208 | | DocsId.TextField -> TextFieldDocs () 209 | | DocsId.WorkflowIcons -> WorkflowIconsDocs () 210 | | DocsId.Breadcrumbs -> BreadcrumbsDocs () 211 | | DocsId.Link -> LinkDocs () 212 | | DocsId.Tabs -> TabsDocs () 213 | | DocsId.AlertDialog -> AlertDialogDocs () 214 | | DocsId.Dialog -> DialogDocs () 215 | | DocsId.DialogContainer -> DialogContainerDocs () 216 | | DocsId.DialogTrigger -> DialogTriggerDocs () 217 | | DocsId.Tooltip -> TooltipDocs () 218 | | DocsId.ContextualHelp -> ContextualHelpDocs () 219 | | DocsId.ComboBox -> ComboBoxDocs () 220 | | DocsId.Picker -> PickerDocs () 221 | | DocsId.RangeSlider -> RangeSliderDocs () 222 | | DocsId.Slider -> SliderDocs () 223 | | DocsId.Meter -> MeterDocs () 224 | | DocsId.ProgressBar -> ProgressBarDocs () 225 | | DocsId.ProgressCircle -> ProgressCircleDocs () 226 | | DocsId.StatusLight -> StatusLightDocs () 227 | | DocsId.Content -> ContentDocs () 228 | | DocsId.Divider -> DividerDocs () 229 | | DocsId.Footer -> FooterDocs () 230 | | DocsId.Header -> HeaderDocs () 231 | | DocsId.Heading -> HeadingDocs () 232 | | DocsId.IllustratedMessage -> IllustratedMessageDocs () 233 | | DocsId.Image -> ImageDocs () 234 | | DocsId.Keyboard -> KeyboardDocs () 235 | | DocsId.Text -> TextDocs () 236 | | DocsId.View -> ViewDocs () 237 | | DocsId.Well -> WellDocs () 238 | 239 | let parseUrl = function 240 | | [ "" ] -> DocsId.Overview 241 | | [ "installation" ] -> DocsId.Installation 242 | | [ "provider" ] -> DocsId.Provider 243 | | [ "flex" ] -> DocsId.Flex 244 | | [ "grid" ] -> DocsId.Grid 245 | | [ "actionbutton" ] -> DocsId.ActionButton 246 | | [ "actiongroup" ] -> DocsId.ActionGroup 247 | | [ "button" ] -> DocsId.Button 248 | | [ "buttongroup" ] -> DocsId.ButtonGroup 249 | | [ "logicbutton" ] -> DocsId.LogicButton 250 | | [ "togglebutton" ] -> DocsId.ToggleButton 251 | | [ "actionmenu" ] -> DocsId.ActionMenu 252 | | [ "listbox" ] -> DocsId.ListBox 253 | | [ "menu" ] -> DocsId.Menu 254 | | [ "menutrigger" ] -> DocsId.MenuTrigger 255 | | [ "tableview" ] -> DocsId.TableView 256 | | [ "checkbox" ] -> DocsId.Checkbox 257 | | [ "checkboxgroup" ] -> DocsId.CheckboxGroup 258 | | [ "form" ] -> DocsId.Form 259 | | [ "numberfield" ] -> DocsId.NumberField 260 | | [ "radiogroup" ] -> DocsId.RadioGroup 261 | | [ "searchfield" ] -> DocsId.SearchField 262 | | [ "switch" ] -> DocsId.Switch 263 | | [ "textarea" ] -> DocsId.TextArea 264 | | [ "textfield" ] -> DocsId.TextField 265 | | [ "icons" ] -> DocsId.WorkflowIcons 266 | | [ "breadcrumbs" ] -> DocsId.Breadcrumbs 267 | | [ "link" ] -> DocsId.Link 268 | | [ "tabs" ] -> DocsId.Tabs 269 | | [ "alertdialog" ] -> DocsId.AlertDialog 270 | | [ "dialog" ] -> DocsId.Dialog 271 | | [ "dialogcontainer" ] -> DocsId.DialogContainer 272 | | [ "dialogtrigger" ] -> DocsId.DialogTrigger 273 | | [ "tooltip" ] -> DocsId.Tooltip 274 | | [ "contextualhelp" ] -> DocsId.ContextualHelp 275 | | [ "combobox" ] -> DocsId.ComboBox 276 | | [ "picker" ] -> DocsId.Picker 277 | | [ "rangeslider" ] -> DocsId.RangeSlider 278 | | [ "slider" ] -> DocsId.Slider 279 | | [ "meter" ] -> DocsId.Meter 280 | | [ "progressbar" ] -> DocsId.ProgressBar 281 | | [ "progresscircle" ] -> DocsId.ProgressCircle 282 | | [ "statuslight" ] -> DocsId.StatusLight 283 | | [ "content" ] -> DocsId.Content 284 | | [ "divider" ] -> DocsId.Divider 285 | | [ "footer" ] -> DocsId.Footer 286 | | [ "header" ] -> DocsId.Header 287 | | [ "heading" ] -> DocsId.Heading 288 | | [ "illustratedmessage" ] -> DocsId.IllustratedMessage 289 | | [ "image" ] -> DocsId.Image 290 | | [ "keyboard" ] -> DocsId.Keyboard 291 | | [ "text" ] -> DocsId.Text 292 | | [ "view" ] -> DocsId.View 293 | | [ "well" ] -> DocsId.Well 294 | | _ -> DocsId.Overview 295 | 296 | let makeUrl = function 297 | | DocsId.Overview -> Router.format "" 298 | | DocsId.Installation -> Router.format "installation" 299 | | DocsId.Provider -> Router.format "provider" 300 | | DocsId.Flex -> Router.format "flex" 301 | | DocsId.Grid -> Router.format "grid" 302 | | DocsId.ActionButton -> Router.format "actionbutton" 303 | | DocsId.ActionGroup -> Router.format "actiongroup" 304 | | DocsId.Button -> Router.format "button" 305 | | DocsId.ButtonGroup -> Router.format "buttongroup" 306 | | DocsId.LogicButton -> Router.format "logicbutton" 307 | | DocsId.ToggleButton -> Router.format "togglebutton" 308 | | DocsId.ActionMenu -> Router.format "actionmenu" 309 | | DocsId.ListBox -> Router.format "listbox" 310 | | DocsId.Menu -> Router.format "menu" 311 | | DocsId.MenuTrigger -> Router.format "menutrigger" 312 | | DocsId.TableView -> Router.format "tableview" 313 | | DocsId.Checkbox -> Router.format "checkbox" 314 | | DocsId.CheckboxGroup -> Router.format "checkboxgroup" 315 | | DocsId.Form -> Router.format "form" 316 | | DocsId.NumberField -> Router.format "numberfield" 317 | | DocsId.RadioGroup -> Router.format "radiogroup" 318 | | DocsId.SearchField -> Router.format "searchfield" 319 | | DocsId.Switch -> Router.format "switch" 320 | | DocsId.TextArea -> Router.format "textarea" 321 | | DocsId.TextField -> Router.format "textfield" 322 | | DocsId.WorkflowIcons -> Router.format "icons" 323 | | DocsId.Breadcrumbs -> Router.format "breadcrumbs" 324 | | DocsId.Link -> Router.format "link" 325 | | DocsId.Tabs -> Router.format "tabs" 326 | | DocsId.AlertDialog -> Router.format "alertdialog" 327 | | DocsId.Dialog -> Router.format "dialog" 328 | | DocsId.DialogContainer -> Router.format "dialogcontainer" 329 | | DocsId.DialogTrigger -> Router.format "dialogtrigger" 330 | | DocsId.Tooltip -> Router.format "tooltip" 331 | | DocsId.ContextualHelp -> Router.format "contextualhelp" 332 | | DocsId.ComboBox -> Router.format "combobox" 333 | | DocsId.Picker -> Router.format "picker" 334 | | DocsId.RangeSlider -> Router.format "rangeslider" 335 | | DocsId.Slider -> Router.format "slider" 336 | | DocsId.Meter -> Router.format "meter" 337 | | DocsId.ProgressBar -> Router.format "progressbar" 338 | | DocsId.ProgressCircle -> Router.format "progresscircle" 339 | | DocsId.StatusLight -> Router.format "statuslight" 340 | | DocsId.Content -> Router.format "content" 341 | | DocsId.Divider -> Router.format "divider" 342 | | DocsId.Footer -> Router.format "footer" 343 | | DocsId.Header -> Router.format "header" 344 | | DocsId.Heading -> Router.format "heading" 345 | | DocsId.IllustratedMessage -> Router.format "illustratedmessage" 346 | | DocsId.Image -> Router.format "image" 347 | | DocsId.Keyboard -> Router.format "keyboard" 348 | | DocsId.Text -> Router.format "text" 349 | | DocsId.View -> Router.format "view" 350 | | DocsId.Well -> Router.format "well" 351 | 352 | type Model = 353 | { 354 | SelectedDoc: DocsId 355 | } 356 | 357 | type Msg = 358 | | SelectDocsId of DocsId 359 | 360 | let init () : Model * Cmd = 361 | let model = { SelectedDoc = Router.currentUrl () |> parseUrl } 362 | model, Cmd.Empty 363 | 364 | let update (msg: Msg) (model: Model) : Model * Cmd = 365 | match msg with 366 | | SelectDocsId id -> { model with SelectedDoc = id }, Cmd.Empty 367 | 368 | [] 369 | let Shell model dispatch = 370 | let navSections = buildNavSections() 371 | let isToggled, setIsToggled = React.useState(false) 372 | 373 | Spectrum.Flex [ 374 | Flex.id "main" 375 | Flex.direction FlexDirection.Column 376 | Flex.alignItems FlexAlignItems.Center 377 | Flex.children [ 378 | Spectrum.View [ 379 | View.id "toggle-host" 380 | View.borderBottomColor BorderColorValue.Dark 381 | View.borderBottomWidth BorderSizeValue.Thin 382 | View.alignSelf FlexAlignSelf.Stretch 383 | View.children [ 384 | Spectrum.ToggleButton [ 385 | ToggleButton.isSelected isToggled 386 | ToggleButton.onChange setIsToggled 387 | ToggleButton.children [ 388 | if isToggled then Spectrum.Icon.Menu [] 389 | else Spectrum.Icon.ShowMenu [] 390 | ] 391 | View.alignSelf FlexAlignSelf.Start 392 | ] 393 | ] 394 | ] 395 | Spectrum.Flex [ 396 | Flex.id "main-content" 397 | Flex.flex 1 398 | Flex.columnGap (DimValue.Size Size300) 399 | Flex.direction FlexDirection.Row 400 | Flex.children [ 401 | Spectrum.View [ 402 | View.id "navigation-list-host" 403 | if not isToggled then View.UNSAFE_className "collapsed" 404 | View.backgroundColor (BackgroundColorValue.Color Gray200) 405 | View.children [ 406 | Spectrum.ListBox [ 407 | ListBox.id "navigation-list" 408 | ListBox.children navSections 409 | ListBox.ariaLabel "Navigation panel" 410 | ListBox.selectionMode SelectionMode.Single 411 | ListBox.disallowEmptySelection true 412 | ListBox.selectedKeys [ model.SelectedDoc ] 413 | ListBox.onSelectionChange ( 414 | function 415 | | [ newSelection ] -> 416 | (makeUrl newSelection |> Router.navigate) 417 | setIsToggled(false) 418 | Browser.Dom.document.getElementById("content-host") 419 | |> (fun x -> x.scrollTo(0, 0)) 420 | | _ -> () 421 | ) 422 | ] 423 | ] 424 | ] 425 | Spectrum.View [ 426 | View.id "content-host" 427 | View.children [ 428 | Html.div [ 429 | React.router [ 430 | router.onUrlChanged (parseUrl >> SelectDocsId >> dispatch) 431 | router.children [ 432 | getDocs model.SelectedDoc 433 | ] 434 | ] 435 | ] 436 | ] 437 | ] 438 | ] 439 | ] 440 | ] 441 | ] 442 | 443 | let view (model: Model) dispatch = 444 | Spectrum.Provider [ 445 | Provider.defaultTheme 446 | Provider.colorScheme ColorScheme.Light 447 | Provider.locale "en-US" 448 | Provider.id "spectrum-provider" 449 | Provider.children [ 450 | Shell model dispatch 451 | ] 452 | ] 453 | -------------------------------------------------------------------------------- /docs/src/Main.fs: -------------------------------------------------------------------------------- 1 | module Main 2 | 3 | open Browser.Dom 4 | open Feliz 5 | open Fable.Core.JsInterop 6 | open AppShell 7 | 8 | open Elmish 9 | open Elmish.React 10 | open Elmish.HMR 11 | 12 | importSideEffects "./css/main.css" 13 | 14 | Program.mkProgram AppShell.init AppShell.update AppShell.view 15 | |> Program.withReactSynchronous "app-root" 16 | |> Program.run -------------------------------------------------------------------------------- /docs/src/Pages/ApplicationDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module ApplicationDocs = 10 | 11 | [] 12 | let ProviderExample1 () = 13 | let code = """Spectrum.Provider [ 14 | Provider.defaultTheme 15 | Provider.colorScheme ColorScheme.Light 16 | Provider.locale "en-US" 17 | Provider.scale Scale.Medium 18 | Provider.children [ 19 | Spectrum.ActionButton [ 20 | ActionButton.content "Spectrum button" 21 | ] 22 | ] 23 | ]""" 24 | Example "Using the Provider component" code [] [ 25 | Spectrum.Provider [ 26 | Provider.defaultTheme 27 | Provider.colorScheme ColorScheme.Light 28 | Provider.locale "en-US" 29 | Provider.scale Scale.Medium 30 | Provider.children [ 31 | Spectrum.ActionButton [ 32 | ActionButton.content "Spectrum button" 33 | ] 34 | ] 35 | ] 36 | ] 37 | 38 | [] 39 | let ProviderExample2 () = 40 | let code = """Spectrum.Provider [ 41 | Provider.defaultTheme 42 | Provider.colorScheme ColorScheme.Light 43 | Provider.breakpoints(M = 640, L = 1024) 44 | Provider.children [ 45 | Spectrum.View [ 46 | View.height (DimValue.Size Size2000) 47 | View.backgroundColor (ResponsiveProp.make( 48 | base' = (BackgroundColorValue.Color Celery600), 49 | M = (BackgroundColorValue.Color Blue600), 50 | L = (BackgroundColorValue.Color Magenta600)) 51 | ) 52 | ] 53 | ] 54 | ]""" 55 | let description = [ 56 | Html.p [ 57 | prop.className "paragraph" 58 | prop.children [ Html.text "You can override the default screen breakpoints as follows. Resize the browser window to see the effects." ] 59 | ] 60 | ] 61 | 62 | Example "Provider screen breakpoints" code description [ 63 | Spectrum.Provider [ 64 | Provider.defaultTheme 65 | Provider.colorScheme ColorScheme.Light 66 | Provider.breakpoints(M = 640, L = 1024) 67 | Provider.children [ 68 | Spectrum.View [ 69 | View.height (DimValue.Size Size2000) 70 | View.backgroundColor (ResponsiveProp.make( 71 | base' = (BackgroundColorValue.Color Celery600), 72 | M = (BackgroundColorValue.Color Blue600), 73 | L = (BackgroundColorValue.Color Magenta600)) 74 | ) 75 | ] 76 | ] 77 | ] 78 | ] 79 | 80 | [] 81 | let ProviderExample3 () = 82 | let code = """Spectrum.Provider [ 83 | Provider.defaultTheme 84 | Provider.colorScheme ColorScheme.Dark 85 | Provider.children [ 86 | Spectrum.View [ 87 | View.padding 20 88 | View.children [ 89 | Spectrum.ActionButton [ 90 | ActionButton.content "Dark mode!" 91 | ] 92 | ] 93 | ] 94 | ] 95 | ] 96 | """ 97 | Example "Color scheme" code [] [ 98 | Spectrum.Provider [ 99 | Provider.defaultTheme 100 | Provider.colorScheme ColorScheme.Dark 101 | Provider.children [ 102 | Spectrum.View [ 103 | View.padding 20 104 | View.children [ 105 | Spectrum.ActionButton [ 106 | ActionButton.content "Dark mode!" 107 | ] 108 | ] 109 | ] 110 | ] 111 | ] 112 | ] 113 | 114 | [] 115 | let ProviderExample4 () = 116 | let code = """// Note: You still need to define an app-level Provider for themeing. 117 | Spectrum.Flex [ 118 | Flex.direction FlexDirection.Column 119 | Flex.gap (DimValue.Size Size100) 120 | Flex.alignItems FlexAlignItems.Start 121 | Flex.children [ 122 | Spectrum.Provider [ 123 | Provider.isDisabled true 124 | Provider.children [ 125 | Spectrum.RadioGroup [ 126 | RadioGroup.label "Favorite animal" 127 | RadioGroup.children [ 128 | Spectrum.Radio [ 129 | Radio.value "dogs" 130 | Radio.content "Dogs" 131 | ] 132 | Spectrum.Radio [ 133 | Radio.value "cats" 134 | Radio.content "Cats" 135 | ] 136 | Spectrum.Radio [ 137 | Radio.value "horses" 138 | Radio.content "Horses" 139 | ] 140 | ] 141 | ] 142 | Spectrum.Checkbox [ 143 | Checkbox.content "I agree" 144 | ] 145 | Spectrum.Button [ 146 | Button.variant ButtonVariant.Primary 147 | Button.content "Submit" 148 | ] 149 | ] 150 | ] 151 | ] 152 | ]""" 153 | let description = [ 154 | Html.p [ 155 | prop.className "paragraph" 156 | prop.children [ Html.text "You can use a Provider component to define common properties for a group of components within. For example, you can disable multiple components as follows:" ] 157 | ] 158 | ] 159 | 160 | Example "Property groups" code description [ 161 | // Note: You still need to define an app-level Provider for themeing. 162 | Spectrum.Flex [ 163 | Flex.direction FlexDirection.Column 164 | Flex.gap (DimValue.Size Size100) 165 | Flex.alignItems FlexAlignItems.Start 166 | Flex.children [ 167 | Spectrum.Provider [ 168 | Provider.isDisabled true 169 | Provider.children [ 170 | Spectrum.RadioGroup [ 171 | RadioGroup.label "Favorite animal" 172 | RadioGroup.children [ 173 | Spectrum.Radio [ 174 | Radio.value "dogs" 175 | Radio.content "Dogs" 176 | ] 177 | Spectrum.Radio [ 178 | Radio.value "cats" 179 | Radio.content "Cats" 180 | ] 181 | Spectrum.Radio [ 182 | Radio.value "horses" 183 | Radio.content "Horses" 184 | ] 185 | ] 186 | ] 187 | Spectrum.Checkbox [ 188 | Checkbox.content "I agree" 189 | ] 190 | Spectrum.Button [ 191 | Button.variant ButtonVariant.Primary 192 | Button.content "Submit" 193 | ] 194 | ] 195 | ] 196 | ] 197 | ] 198 | ] 199 | 200 | [] 201 | let DynamicIcon () = 202 | let providerContext = Spectrum.useProvider() 203 | let colorScheme = providerContext.colorScheme 204 | if colorScheme = ColorScheme.Dark 205 | then Spectrum.Icon.Moon [ prop.ariaLabel "In dark theme" ] 206 | else Spectrum.Icon.Light [ prop.ariaLabel "In light theme" ] 207 | 208 | [] 209 | let ProviderExample5 () = 210 | let code = """// DynamicIcon defined as a separate ReactComponent 211 | // Adjusts automatically based on the colorScheme of its' parent Provider 212 | [] 213 | let DynamicIcon () = 214 | let providerContext = Spectrum.useProvider() 215 | let colorScheme = providerContext.colorScheme 216 | if colorScheme = ColorScheme.Dark 217 | then Spectrum.Icon.Moon [ prop.ariaLabel "In dark theme" ] 218 | else Spectrum.Icon.Light [ prop.ariaLabel "In light theme" ] 219 | 220 | // ... 221 | Spectrum.Flex [ 222 | Flex.direction FlexDirection.Row 223 | Flex.gap (DimValue.Size Size200) 224 | Flex.children [ 225 | Spectrum.Provider [ 226 | Provider.defaultTheme 227 | Provider.colorScheme ColorScheme.Light 228 | Provider.locale "en-US" 229 | Provider.children [ 230 | DynamicIcon () 231 | ] 232 | ] 233 | Spectrum.Provider [ 234 | Provider.defaultTheme 235 | Provider.colorScheme ColorScheme.Dark 236 | Provider.locale "en-US" 237 | Provider.children [ 238 | DynamicIcon () 239 | ] 240 | ] 241 | ] 242 | ] 243 | """ 244 | Example "Using the useProvider hook" code [] [ 245 | Spectrum.Flex [ 246 | Flex.direction FlexDirection.Row 247 | Flex.gap (DimValue.Size Size200) 248 | Flex.children [ 249 | Spectrum.Provider [ 250 | Provider.defaultTheme 251 | Provider.colorScheme ColorScheme.Light 252 | Provider.locale "en-US" 253 | Provider.children [ 254 | DynamicIcon () 255 | ] 256 | ] 257 | Spectrum.Provider [ 258 | Provider.defaultTheme 259 | Provider.colorScheme ColorScheme.Dark 260 | Provider.locale "en-US" 261 | Provider.children [ 262 | DynamicIcon () 263 | ] 264 | ] 265 | ] 266 | ] 267 | ] 268 | 269 | [] 270 | let ProviderDocs () = 271 | let description = [ 272 | Html.text "Provider is the container for all React Spectrum applications. It defines the theme, locale, and other application level settings, and can also be used to provide common properties to a group of components." 273 | Html.br [] 274 | Html.br [] 275 | Html.text " Check the official " 276 | Html.a [ 277 | prop.children [ Html.text "documentation" ] 278 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Provider.html" 279 | ] 280 | Html.text " for more details." 281 | ] 282 | 283 | ExampleGroup "Provider" description [ 284 | ProviderExample1 () 285 | ProviderExample2 () 286 | ProviderExample3 () 287 | ProviderExample4 () 288 | ProviderExample5 () 289 | ] -------------------------------------------------------------------------------- /docs/src/Pages/ContentDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module ContentDocs = 10 | 11 | [] 12 | let ContentExample1 () = 13 | let code = """Spectrum.Content "Content is king" 14 | """ 15 | 16 | Example "Default example" code [] [ 17 | Spectrum.Content "Content is king" 18 | ] 19 | 20 | [] 21 | let ContentDocs () = 22 | let description = [ 23 | Html.text "Content represents the primary content within a Spectrum container." 24 | Html.br [] 25 | Html.br [] 26 | Html.text " Check the official " 27 | Html.a [ 28 | prop.children [ Html.text "documentation" ] 29 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Content.html" 30 | ] 31 | Html.text " for more details." 32 | ] 33 | 34 | ExampleGroup "Content" description [ 35 | ContentExample1 () 36 | ] 37 | 38 | [] 39 | let DividerExample1 () = 40 | let code = """Spectrum.Flex [ 41 | Flex.direction FlexDirection.Column 42 | Flex.gap (DimValue.Size Size125) 43 | Flex.children [ 44 | Spectrum.Text "Content above" 45 | Spectrum.Divider () 46 | Spectrum.Text "Content below" 47 | ] 48 | ]""" 49 | 50 | Example "Default example" code [] [ 51 | Spectrum.Flex [ 52 | Flex.direction FlexDirection.Column 53 | Flex.gap (DimValue.Size Size125) 54 | Flex.children [ 55 | Spectrum.Text "Content above" 56 | Spectrum.Divider () 57 | Spectrum.Text "Content below" 58 | ] 59 | ] 60 | ] 61 | 62 | [] 63 | let DividerExample2 () = 64 | let code = """Spectrum.Flex [ 65 | Flex.direction FlexDirection.Row 66 | Flex.gap (DimValue.Size Size125) 67 | Flex.children [ 68 | Spectrum.Text "Content left" 69 | Spectrum.Divider [ 70 | Divider.orientation Orientation.Vertical 71 | ] 72 | Spectrum.Text "Content right" 73 | ] 74 | ]""" 75 | 76 | Example "Vertical" code [] [ 77 | Spectrum.Flex [ 78 | Flex.direction FlexDirection.Row 79 | Flex.gap (DimValue.Size Size125) 80 | Flex.children [ 81 | Spectrum.Text "Content left" 82 | Spectrum.Divider [ 83 | Divider.orientation Orientation.Vertical 84 | ] 85 | Spectrum.Text "Content right" 86 | ] 87 | ] 88 | ] 89 | 90 | [] 91 | let DividerExample3 () = 92 | let code = """Spectrum.Flex [ 93 | Flex.direction FlexDirection.Column 94 | Flex.gap (DimValue.Size Size125) 95 | Flex.children [ 96 | Spectrum.Text "Content above large Divider" 97 | Spectrum.Divider [ Divider.size DividerSize.L ] 98 | Spectrum.Text "Content above medium Divider" 99 | Spectrum.Divider [ Divider.size DividerSize.M ] 100 | Spectrum.Text "Content above small Divider" 101 | Spectrum.Divider [ Divider.size DividerSize.S ] 102 | ] 103 | ]""" 104 | 105 | Example "Size" code [] [ 106 | Spectrum.Flex [ 107 | Flex.direction FlexDirection.Column 108 | Flex.gap (DimValue.Size Size125) 109 | Flex.children [ 110 | Spectrum.Text "Content above large Divider" 111 | Spectrum.Divider [ Divider.size DividerSize.L ] 112 | Spectrum.Text "Content above medium Divider" 113 | Spectrum.Divider [ Divider.size DividerSize.M ] 114 | Spectrum.Text "Content above small Divider" 115 | Spectrum.Divider [ Divider.size DividerSize.S ] 116 | ] 117 | ] 118 | ] 119 | 120 | [] 121 | let DividerDocs () = 122 | let description = [ 123 | Html.text "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy." 124 | Html.br [] 125 | Html.br [] 126 | Html.text " Check the official " 127 | Html.a [ 128 | prop.children [ Html.text "documentation" ] 129 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Divider.html" 130 | ] 131 | Html.text " for more details." 132 | ] 133 | 134 | ExampleGroup "Divider" description [ 135 | DividerExample1 () 136 | DividerExample2 () 137 | DividerExample3 () 138 | ] 139 | 140 | [] 141 | let FooterExample1 () = 142 | let code = """Spectrum.Footer "© All rights reserved." 143 | """ 144 | 145 | Example "Default example" code [] [ 146 | Spectrum.Footer "© All rights reserved." 147 | ] 148 | 149 | [] 150 | let FooterDocs () = 151 | let description = [ 152 | Html.text "Footer represents a footer within a Spectrum container." 153 | Html.br [] 154 | Html.br [] 155 | Html.text " Check the official " 156 | Html.a [ 157 | prop.children [ Html.text "documentation" ] 158 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Footer.html" 159 | ] 160 | Html.text " for more details." 161 | ] 162 | 163 | ExampleGroup "Footer" description [ 164 | FooterExample1 () 165 | ] 166 | 167 | [] 168 | let HeaderExample1 () = 169 | let code = """Spectrum.Header "Header example..." 170 | """ 171 | 172 | Example "Default example" code [] [ 173 | Spectrum.Header "Header example..." 174 | ] 175 | 176 | [] 177 | let HeaderDocs () = 178 | let description = [ 179 | Html.text "Header represents a header within a Spectrum container." 180 | Html.br [] 181 | Html.br [] 182 | Html.text " Check the official " 183 | Html.a [ 184 | prop.children [ Html.text "documentation" ] 185 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Header.html" 186 | ] 187 | Html.text " for more details." 188 | ] 189 | 190 | ExampleGroup "Header" description [ 191 | HeaderExample1 () 192 | ] 193 | 194 | [] 195 | let HeadingExample1 () = 196 | let code = """Spectrum.Heading [ 197 | Heading.level 4 198 | Heading.content "A level 4 heading..." 199 | ]""" 200 | 201 | Example "Default example" code [] [ 202 | Spectrum.Heading [ 203 | Heading.level 4 204 | Heading.content "A level 4 heading..." 205 | ] 206 | ] 207 | 208 | [] 209 | let HeadingDocs () = 210 | let description = [ 211 | Html.text "Heading is used to create various levels of typographic hierarchies." 212 | Html.br [] 213 | Html.br [] 214 | Html.text " Check the official " 215 | Html.a [ 216 | prop.children [ Html.text "documentation" ] 217 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Heading.html" 218 | ] 219 | Html.text " for more details." 220 | ] 221 | 222 | ExampleGroup "Heading" description [ 223 | HeadingExample1 () 224 | ] 225 | 226 | [] 227 | let IllustratedMessageExample1 () = 228 | let code = """Spectrum.IllustratedMessage [ 229 | Spectrum.Illustrations.NoSearchResults [] 230 | Spectrum.Heading "No matching results" 231 | Spectrum.Content "Try another search" 232 | ]""" 233 | 234 | Example "No search results" code [] [ 235 | Spectrum.IllustratedMessage [ 236 | Spectrum.Illustrations.NoSearchResults [] 237 | Spectrum.Heading "No matching results" 238 | Spectrum.Content "Try another search" 239 | ] 240 | ] 241 | 242 | [] 243 | let IllustratedMessageExample2 () = 244 | let code = """Spectrum.IllustratedMessage [ 245 | Spectrum.Illustrations.Unauthorized [] 246 | Spectrum.Heading "Error 403: Access not allowed" 247 | Spectrum.Content "You do not have permission to access this page. Try checking the URL or visit a different page." 248 | ]""" 249 | 250 | Example "403 forbidden" code [] [ 251 | Spectrum.IllustratedMessage [ 252 | Spectrum.Illustrations.Unauthorized [] 253 | Spectrum.Heading "Error 403: Access not allowed" 254 | Spectrum.Content "You do not have permission to access this page. Try checking the URL or visit a different page." 255 | ] 256 | ] 257 | 258 | [] 259 | let IllustratedMessageExample3 () = 260 | let code = """Spectrum.IllustratedMessage [ 261 | Spectrum.Illustrations.NotFound [] 262 | Spectrum.Heading "Error 404: Page not found" 263 | Spectrum.Content "This page isn't available. Try checking the URL or visit a different page." 264 | ]""" 265 | 266 | Example "404 not found" code [] [ 267 | Spectrum.IllustratedMessage [ 268 | Spectrum.Illustrations.NotFound [] 269 | Spectrum.Heading "Error 404: Page not found" 270 | Spectrum.Content "This page isn't available. Try checking the URL or visit a different page." 271 | ] 272 | ] 273 | 274 | [] 275 | let IllustratedMessageExample4 () = 276 | let code = """Spectrum.IllustratedMessage [ 277 | Spectrum.Illustrations.Error [] 278 | Spectrum.Heading "Error 500: Internal server error" 279 | Spectrum.Content "Something went wrong. Please try again later." 280 | ]""" 281 | 282 | Example "500 internal server error" code [] [ 283 | Spectrum.IllustratedMessage [ 284 | Spectrum.Illustrations.Error [] 285 | Spectrum.Heading "Error 500: Internal server error" 286 | Spectrum.Content "Something went wrong. Please try again later." 287 | ] 288 | ] 289 | 290 | [] 291 | let IllustratedMessageExample5 () = 292 | let code = """Spectrum.IllustratedMessage [ 293 | Spectrum.Illustrations.Unavailable [] 294 | Spectrum.Heading "Error 503: Service unavailble" 295 | Spectrum.Content "This page isn't working. Try a different page or try again later." 296 | ]""" 297 | 298 | Example "503 service unavailable" code [] [ 299 | Spectrum.IllustratedMessage [ 300 | Spectrum.Illustrations.Unavailable [] 301 | Spectrum.Heading "Error 503: Service unavailble" 302 | Spectrum.Content "This page isn't working. Try a different page or try again later." 303 | ] 304 | ] 305 | 306 | [] 307 | let IllustratedMessageExample6 () = 308 | let code = """Spectrum.IllustratedMessage [ 309 | Spectrum.Illustrations.Timeout [] 310 | Spectrum.Heading "Error 504: Server timeout" 311 | Spectrum.Content "The server took too long. Please try again later." 312 | ]""" 313 | 314 | Example "504 server timeout" code [] [ 315 | Spectrum.IllustratedMessage [ 316 | Spectrum.Illustrations.Timeout [] 317 | Spectrum.Heading "Error 504: Server timeout" 318 | Spectrum.Content "The server took too long. Please try again later." 319 | ] 320 | ] 321 | 322 | [] 323 | let IllustratedMessageDocs () = 324 | let description = [ 325 | Html.text "An IllustratedMessage displays an illustration and a message, usually for an empty state or an error page." 326 | Html.br [] 327 | Html.br [] 328 | Html.text " Check the official " 329 | Html.a [ 330 | prop.children [ Html.text "documentation" ] 331 | prop.href "https://react-spectrum.adobe.com/react-spectrum/IllustratedMessage.html" 332 | ] 333 | Html.text " for more details." 334 | ] 335 | 336 | ExampleGroup "IllustratedMessage" description [ 337 | IllustratedMessageExample1 () 338 | IllustratedMessageExample2 () 339 | IllustratedMessageExample3 () 340 | IllustratedMessageExample4 () 341 | IllustratedMessageExample5 () 342 | IllustratedMessageExample6 () 343 | ] 344 | 345 | [] 346 | let ImageExample1 () = 347 | let code = """Spectrum.Image [ 348 | Image.src "https://i.imgur.com/Z7AzH2c.png" 349 | Image.alt "Sky and roof" 350 | ]""" 351 | 352 | Example "Default example" code [] [ 353 | Spectrum.Image [ 354 | Image.src "https://i.imgur.com/Z7AzH2c.png" 355 | Image.alt "Sky and roof" 356 | ] 357 | ] 358 | 359 | [] 360 | let ImageDocs () = 361 | let description = [ 362 | Html.text "Image is used to insert and display an image within a component." 363 | Html.br [] 364 | Html.br [] 365 | Html.text " Check the official " 366 | Html.a [ 367 | prop.children [ Html.text "documentation" ] 368 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Image.html" 369 | ] 370 | Html.text " for more details." 371 | ] 372 | 373 | ExampleGroup "Image" description [ 374 | ImageExample1 () 375 | ] 376 | 377 | [] 378 | let KeyboardExample1 () = 379 | let code = """Spectrum.Keyboard "⌘V" 380 | """ 381 | 382 | Example "Default example" code [] [ 383 | Spectrum.Keyboard "⌘V" 384 | ] 385 | 386 | [] 387 | let KeyboardDocs () = 388 | let description = [ 389 | Html.text "Keyboard represents text that specifies a keyboard command." 390 | Html.br [] 391 | Html.br [] 392 | Html.text " Check the official " 393 | Html.a [ 394 | prop.children [ Html.text "documentation" ] 395 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Keyboard.html" 396 | ] 397 | Html.text " for more details." 398 | ] 399 | 400 | ExampleGroup "Keyboard" description [ 401 | KeyboardExample1 () 402 | ] 403 | 404 | [] 405 | let TextExample1 () = 406 | let code = """Spectrum.Text "A piece of text..." 407 | """ 408 | 409 | Example "Default example" code [] [ 410 | Spectrum.Text "A piece of text..." 411 | ] 412 | 413 | [] 414 | let TextDocs () = 415 | let description = [ 416 | Html.text "Text represents text with no specific semantic meaning." 417 | Html.br [] 418 | Html.br [] 419 | Html.text " Check the official " 420 | Html.a [ 421 | prop.children [ Html.text "documentation" ] 422 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Text.html" 423 | ] 424 | Html.text " for more details." 425 | ] 426 | 427 | ExampleGroup "Text" description [ 428 | TextExample1 () 429 | ] 430 | 431 | [] 432 | let ViewExample1 () = 433 | let code = """Spectrum.View [ 434 | View.width 200 435 | View.borderColor BorderColorValue.Hover 436 | View.borderWidth BorderSizeValue.Thicker 437 | View.padding (DimValue.Size Size250) 438 | View.borderRadius BorderRadiusValue.Medium 439 | View.backgroundColor ( 440 | ResponsiveProp.make( 441 | base' = BackgroundColorValue.Color StaticGreen400, 442 | S = BackgroundColorValue.LabelGray, 443 | M = BackgroundColorValue.Color StaticBlue300, 444 | L = BackgroundColorValue.Color StaticRed400 445 | ) 446 | ) 447 | View.children [ 448 | Spectrum.ActionButton [ 449 | ActionButton.content "Click me!" 450 | ] 451 | ] 452 | ]""" 453 | 454 | Example "Default example" code [] [ 455 | Spectrum.View [ 456 | View.width 200 457 | View.borderColor BorderColorValue.Hover 458 | View.borderWidth BorderSizeValue.Thicker 459 | View.padding (DimValue.Size Size250) 460 | View.borderRadius BorderRadiusValue.Medium 461 | View.backgroundColor ( 462 | ResponsiveProp.make( 463 | base' = BackgroundColorValue.Color StaticGreen400, 464 | S = BackgroundColorValue.LabelGray, 465 | M = BackgroundColorValue.Color StaticBlue300, 466 | L = BackgroundColorValue.Color StaticRed400 467 | ) 468 | ) 469 | View.children [ 470 | Spectrum.ActionButton [ 471 | ActionButton.content "Click me!" 472 | ] 473 | ] 474 | ] 475 | ] 476 | 477 | [] 478 | let ViewDocs () = 479 | let description = [ 480 | Html.text "View is a general purpose container with no specific semantics that can be used for custom styling purposes. It supports Spectrum style props to ensure consistency with other Spectrum components." 481 | Html.br [] 482 | Html.br [] 483 | Html.text " Check the official " 484 | Html.a [ 485 | prop.children [ Html.text "documentation" ] 486 | prop.href "https://react-spectrum.adobe.com/react-spectrum/View.html" 487 | ] 488 | Html.text " for more details." 489 | ] 490 | 491 | ExampleGroup "View" description [ 492 | ViewExample1 () 493 | ] 494 | 495 | [] 496 | let WellExample1 () = 497 | let code = """Spectrum.Well [ 498 | Well.content "Better a little which is well done, than a great deal imperfectly." 499 | ]""" 500 | 501 | Example "Default example" code [] [ 502 | Spectrum.Well [ 503 | Well.content "Better a little which is well done, than a great deal imperfectly." 504 | ] 505 | ] 506 | 507 | [] 508 | let WellExample2 () = 509 | let code = """Spectrum.Well [ 510 | Well.role "region" 511 | Well.ariaLabeledBy "well-label" 512 | Well.children [ 513 | Html.h3 [ 514 | prop.id "well-label" 515 | prop.children [ Html.text "Shipping Address" ] 516 | ] 517 | Html.p [ 518 | Html.text "601 Townsend Street" 519 | Html.br [] 520 | Html.text " San Francisco, CA 94103" 521 | ] 522 | ] 523 | ]""" 524 | 525 | Example "Another example" code [] [ 526 | Spectrum.Well [ 527 | Well.role "region" 528 | Well.ariaLabeledBy "well-label" 529 | Well.children [ 530 | Html.h3 [ 531 | prop.id "well-label" 532 | prop.children [ Html.text "Shipping Address" ] 533 | ] 534 | Html.p [ 535 | Html.text "601 Townsend Street" 536 | Html.br [] 537 | Html.text " San Francisco, CA 94103" 538 | ] 539 | ] 540 | ] 541 | ] 542 | 543 | [] 544 | let WellDocs () = 545 | let description = [ 546 | Html.text "A Well is a content container that displays non-editable content separate from other content on the screen. Often this is used to display preformatted text, such as code/markup examples on a documentation page." 547 | Html.br [] 548 | Html.br [] 549 | Html.text " Check the official " 550 | Html.a [ 551 | prop.children [ Html.text "documentation" ] 552 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Well.html" 553 | ] 554 | Html.text " for more details." 555 | ] 556 | 557 | ExampleGroup "Well" description [ 558 | WellExample1 () 559 | WellExample2 () 560 | ] -------------------------------------------------------------------------------- /docs/src/Pages/GeneralDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module GeneralDocs = 10 | 11 | [] 12 | let OverviewDocs () = 13 | React.fragment [ 14 | Html.h1 [ 15 | prop.className "title" 16 | prop.children [ 17 | Html.text "Feliz.ReactSpectrum" 18 | Html.a [ 19 | prop.href "https://www.nuget.org/packages/Feliz.ReactSpectrum/" 20 | prop.children [ 21 | Html.img [ 22 | prop.alt "NuGet badge" 23 | prop.src "https://img.shields.io/nuget/v/Feliz.ReactSpectrum.svg?style=square" 24 | ] 25 | ] 26 | ] 27 | ] 28 | ] 29 | Html.h2 [ 30 | prop.className "subtitle" 31 | prop.children [ 32 | Html.text "Feliz-style Fable bindings for Adobe's React Spectrum components" 33 | ] 34 | ] 35 | Spectrum.Divider [ 36 | Divider.size DividerSize.M 37 | Divider.marginTop 10 38 | Divider.marginBottom 10 39 | ] 40 | Html.p [ 41 | prop.children [ 42 | Html.text "Fable bindings for " 43 | Html.a [ 44 | prop.href "https://react-spectrum.adobe.com/react-spectrum/" 45 | prop.children [ 46 | Html.text "Adobe's React Spectrum components" 47 | ] 48 | ] 49 | Html.text ", written in the excelent " 50 | Html.a [ 51 | prop.href "https://github.com/Zaid-Ajaj/Feliz" 52 | prop.children [ 53 | Html.text "Feliz DSL style" 54 | ] 55 | ] 56 | Html.text "." 57 | ] 58 | ] 59 | Html.h2 [ 60 | prop.className "subtitle paragraph" 61 | prop.children [ Html.text "Features" ] 62 | ] 63 | Html.ul [ 64 | prop.className "bullet-list" 65 | prop.children [ 66 | Html.li [ 67 | Html.text "Covers React Spectrum components featured in the " 68 | Html.a [ 69 | prop.href "https://react-spectrum.adobe.com/react-spectrum/index.html" 70 | prop.text "official documentation" 71 | ] 72 | ] 73 | Html.li "Fully erased - the generated JS is zero size" 74 | Html.li [ 75 | prop.children [ 76 | Html.text "Compatible with the " 77 | Html.a [ 78 | prop.href "https://github.com/zaid-ajaj/femto" 79 | prop.children [ Html.text "Femto dotnet tool" ] 80 | ] 81 | ] 82 | ] 83 | ] 84 | ] 85 | ] 86 | 87 | [] 88 | let InstallationDocs () = 89 | React.fragment [ 90 | Html.h2 [ 91 | prop.className "subtitle" 92 | prop.children [ 93 | Html.text "Using the Femto dotnet tool" 94 | ] 95 | ] 96 | Html.p [ 97 | prop.className "paragraph" 98 | prop.children [ 99 | Html.text "The easiest way to install the package is using the " 100 | Html.a [ 101 | prop.href "https://github.com/zaid-ajaj/femto" 102 | prop.children [ Html.text "Femto dotnet tool" ] 103 | ] 104 | Html.text " since this will also take care of installing the correct npm dependencies." 105 | ] 106 | ] 107 | Code Bash "dotnet femto install Feliz.ReactSpectrum" 108 | Html.h2 [ 109 | prop.className "subtitle" 110 | prop.children [ 111 | Html.text "Manual installation" 112 | ] 113 | ] 114 | Html.p [ 115 | prop.className "paragraph" 116 | prop.children [ Html.text "You can install the package using NuGet:" ] 117 | ] 118 | Code Bash "dotnet add package Feliz.ReactSpectrum" 119 | Html.p [ 120 | prop.className "paragraph" 121 | prop.children [ Html.text "Or in case you use Paket:" ] 122 | ] 123 | Code Bash "dotnet paket add Feliz.ReactSpectrum" 124 | Html.p [ 125 | prop.className "paragraph" 126 | prop.children [ Html.text "Don't forget to also install the npm dependencies:" ] 127 | ] 128 | Code Bash """npm install @adobe/react-spectrum 129 | npm install @spectrum-icons/illustrations 130 | npm install @spectrum-icons/workflow""" 131 | ] -------------------------------------------------------------------------------- /docs/src/Pages/IconsDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module IconsDocs = 10 | 11 | [] 12 | let IconsExample1 () = 13 | let code = """Spectrum.Flex [ 14 | Flex.gap (DimValue.Size Size100) 15 | Flex.children [ 16 | Spectrum.Icon.Beaker [ 17 | prop.ariaLabel "XXS Beaker" 18 | Icon.size IconSize.XXS 19 | ] 20 | Spectrum.Icon.Beaker [ 21 | prop.ariaLabel "XS Beaker" 22 | Icon.size IconSize.XS 23 | ] 24 | Spectrum.Icon.Beaker [ 25 | prop.ariaLabel "S Beaker" 26 | Icon.size IconSize.S 27 | ] 28 | Spectrum.Icon.Beaker [ 29 | prop.ariaLabel "M Beaker" 30 | Icon.size IconSize.M 31 | ] 32 | Spectrum.Icon.Beaker [ 33 | prop.ariaLabel "L Beaker" 34 | Icon.size IconSize.L 35 | ] 36 | Spectrum.Icon.Beaker [ 37 | prop.ariaLabel "XL Beaker" 38 | Icon.size IconSize.XL 39 | ] 40 | Spectrum.Icon.Beaker [ 41 | prop.ariaLabel "XXL Beaker" 42 | Icon.size IconSize.XXL 43 | ] 44 | ] 45 | ]""" 46 | 47 | Example "Icon size" code [] [ 48 | Spectrum.Flex [ 49 | Flex.gap (DimValue.Size Size100) 50 | Flex.children [ 51 | Spectrum.Icon.Beaker [ 52 | prop.ariaLabel "XXS Beaker" 53 | Icon.size IconSize.XXS 54 | ] 55 | Spectrum.Icon.Beaker [ 56 | prop.ariaLabel "XS Beaker" 57 | Icon.size IconSize.XS 58 | ] 59 | Spectrum.Icon.Beaker [ 60 | prop.ariaLabel "S Beaker" 61 | Icon.size IconSize.S 62 | ] 63 | Spectrum.Icon.Beaker [ 64 | prop.ariaLabel "M Beaker" 65 | Icon.size IconSize.M 66 | ] 67 | Spectrum.Icon.Beaker [ 68 | prop.ariaLabel "L Beaker" 69 | Icon.size IconSize.L 70 | ] 71 | Spectrum.Icon.Beaker [ 72 | prop.ariaLabel "XL Beaker" 73 | Icon.size IconSize.XL 74 | ] 75 | Spectrum.Icon.Beaker [ 76 | prop.ariaLabel "XXL Beaker" 77 | Icon.size IconSize.XXL 78 | ] 79 | ] 80 | ] 81 | ] 82 | 83 | [] 84 | let IconsExample2 () = 85 | let code = """Spectrum.Flex [ 86 | Flex.gap (DimValue.Size Size100) 87 | Flex.children [ 88 | Spectrum.Icon.Alert [ 89 | prop.ariaLabel "Default Alert" 90 | ] 91 | Spectrum.Icon.Alert [ 92 | prop.ariaLabel "Negative Alert" 93 | Icon.color SemanticColor.Negative 94 | ] 95 | Spectrum.Icon.Alert [ 96 | prop.ariaLabel "Notification Alert" 97 | Icon.color SemanticColor.Notice 98 | ] 99 | Spectrum.Icon.Alert [ 100 | prop.ariaLabel "Positive Alert" 101 | Icon.color SemanticColor.Positive 102 | ] 103 | Spectrum.Icon.Alert [ 104 | prop.ariaLabel "Informative Alert" 105 | Icon.color SemanticColor.Informative 106 | ] 107 | ] 108 | ]""" 109 | 110 | Example "Coloring" code [] [ 111 | Spectrum.Flex [ 112 | Flex.gap (DimValue.Size Size100) 113 | Flex.children [ 114 | Spectrum.Icon.Alert [ 115 | prop.ariaLabel "Default Alert" 116 | ] 117 | Spectrum.Icon.Alert [ 118 | prop.ariaLabel "Negative Alert" 119 | Icon.color SemanticColor.Negative 120 | ] 121 | Spectrum.Icon.Alert [ 122 | prop.ariaLabel "Notification Alert" 123 | Icon.color SemanticColor.Notice 124 | ] 125 | Spectrum.Icon.Alert [ 126 | prop.ariaLabel "Positive Alert" 127 | Icon.color SemanticColor.Positive 128 | ] 129 | Spectrum.Icon.Alert [ 130 | prop.ariaLabel "Informative Alert" 131 | Icon.color SemanticColor.Informative 132 | ] 133 | ] 134 | ] 135 | ] 136 | 137 | [] 138 | let WorkflowIconsDocs () = 139 | let description = [ 140 | Html.text "Workflow icons are graphical metaphors or symbols that can be used to compliment existing experiences." 141 | Html.br [] 142 | Html.br [] 143 | Html.text " Check the official " 144 | Html.a [ 145 | prop.children [ Html.text "documentation" ] 146 | prop.href "https://react-spectrum.adobe.com/react-spectrum/workflow-icons.html" 147 | ] 148 | Html.text " for more details." 149 | ] 150 | 151 | ExampleGroup "Workflow Icons" description [ 152 | IconsExample1 () 153 | IconsExample2 () 154 | ] -------------------------------------------------------------------------------- /docs/src/Pages/LayoutDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module LayoutDocs = 10 | 11 | [] 12 | let FlexExample1 () = 13 | let code = """Spectrum.Flex [ 14 | Flex.direction FlexDirection.Column 15 | Flex.width (DimValue.Size Size2000) 16 | Flex.gap (DimValue.Size Size100) 17 | Flex.children [ 18 | Spectrum.View [ 19 | View.backgroundColor (BackgroundColorValue.Color Celery600) 20 | View.height (DimValue.Size Size800) 21 | ] 22 | Spectrum.View [ 23 | View.backgroundColor (BackgroundColorValue.Color Blue600) 24 | View.height (DimValue.Size Size800) 25 | ] 26 | Spectrum.View [ 27 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 28 | View.height (DimValue.Size Size800) 29 | ] 30 | ] 31 | ]""" 32 | let description = [] 33 | 34 | Example "Vertical stack" code description [ 35 | Spectrum.Flex [ 36 | Flex.direction FlexDirection.Column 37 | Flex.width (DimValue.Size Size2000) 38 | Flex.gap (DimValue.Size Size100) 39 | Flex.children [ 40 | Spectrum.View [ 41 | View.backgroundColor (BackgroundColorValue.Color Celery600) 42 | View.height (DimValue.Size Size800) 43 | ] 44 | Spectrum.View [ 45 | View.backgroundColor (BackgroundColorValue.Color Blue600) 46 | View.height (DimValue.Size Size800) 47 | ] 48 | Spectrum.View [ 49 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 50 | View.height (DimValue.Size Size800) 51 | ] 52 | ] 53 | ] 54 | ] 55 | 56 | [] 57 | let FlexExample2 () = 58 | let code = """Spectrum.Flex [ 59 | Flex.direction FlexDirection.Row 60 | Flex.height (DimValue.Size Size800) 61 | Flex.gap (DimValue.Size Size100) 62 | Flex.children [ 63 | Spectrum.View [ 64 | View.backgroundColor (BackgroundColorValue.Color Celery600) 65 | View.width (DimValue.Size Size800) 66 | ] 67 | Spectrum.View [ 68 | View.backgroundColor (BackgroundColorValue.Color Blue600) 69 | View.width (DimValue.Size Size800) 70 | ] 71 | Spectrum.View [ 72 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 73 | View.width (DimValue.Size Size800) 74 | ] 75 | ] 76 | ]""" 77 | let description = [] 78 | 79 | Example "Horizontal stack" code description [ 80 | Spectrum.Flex [ 81 | Flex.direction FlexDirection.Row 82 | Flex.height (DimValue.Size Size800) 83 | Flex.gap (DimValue.Size Size100) 84 | Flex.children [ 85 | Spectrum.View [ 86 | View.backgroundColor (BackgroundColorValue.Color Celery600) 87 | View.width (DimValue.Size Size800) 88 | ] 89 | Spectrum.View [ 90 | View.backgroundColor (BackgroundColorValue.Color Blue600) 91 | View.width (DimValue.Size Size800) 92 | ] 93 | Spectrum.View [ 94 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 95 | View.width (DimValue.Size Size800) 96 | ] 97 | ] 98 | ] 99 | ] 100 | 101 | [] 102 | let FlexExample3 () = 103 | let code = """Spectrum.Flex [ 104 | Flex.direction FlexDirection.Column 105 | Flex.gap (DimValue.Size Size100) 106 | Flex.children [ 107 | Spectrum.View [ 108 | View.backgroundColor (BackgroundColorValue.Color Celery600) 109 | View.height (DimValue.Size Size800) 110 | ] 111 | Spectrum.Flex [ 112 | Flex.direction FlexDirection.Row 113 | Flex.height (DimValue.Size Size3000) 114 | Flex.gap (DimValue.Size Size100) 115 | Flex.children [ 116 | Spectrum.View [ 117 | View.backgroundColor (BackgroundColorValue.Color Indigo600) 118 | View.width (DimValue.Size Size2000) 119 | ] 120 | Spectrum.View [ 121 | View.backgroundColor (BackgroundColorValue.Color Seafoam600) 122 | View.flex true 123 | ] 124 | ] 125 | ] 126 | Spectrum.View [ 127 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 128 | View.height (DimValue.Size Size800) 129 | ] 130 | ] 131 | ]""" 132 | let description = [ 133 | Html.p [ 134 | prop.className "paragraph" 135 | prop.children [ Html.text "This example shows how you can nest flexboxes to create more complicated layouts. It also uses the flex prop on one of the children to expand it to fill the repaining space." ] 136 | ] 137 | ] 138 | 139 | Example "Nesting" code description [ 140 | Spectrum.Flex [ 141 | Flex.direction FlexDirection.Column 142 | Flex.gap (DimValue.Size Size100) 143 | Flex.children [ 144 | Spectrum.View [ 145 | View.backgroundColor (BackgroundColorValue.Color Celery600) 146 | View.height (DimValue.Size Size800) 147 | ] 148 | Spectrum.Flex [ 149 | Flex.direction FlexDirection.Row 150 | Flex.height (DimValue.Size Size3000) 151 | Flex.gap (DimValue.Size Size100) 152 | Flex.children [ 153 | Spectrum.View [ 154 | View.backgroundColor (BackgroundColorValue.Color Indigo600) 155 | View.width (DimValue.Size Size2000) 156 | ] 157 | Spectrum.View [ 158 | View.backgroundColor (BackgroundColorValue.Color Seafoam600) 159 | View.flex true 160 | ] 161 | ] 162 | ] 163 | Spectrum.View [ 164 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 165 | View.height (DimValue.Size Size800) 166 | ] 167 | ] 168 | ] 169 | ] 170 | 171 | [] 172 | let FlexExample4 () = 173 | let colors = SharedModule.colorsList 174 | 175 | let code = """Spectrum.Flex [ 176 | Flex.direction FlexDirection.Row 177 | Flex.gap (DimValue.Size Size100) 178 | Flex.wrap true 179 | Flex.children [ 180 | for color in colors do 181 | Spectrum.View [ 182 | View.key (unbox color) 183 | View.backgroundColor (BackgroundColorValue.Color color) 184 | View.width (DimValue.Size Size800) 185 | View.height (DimValue.Size Size800) 186 | ] 187 | ] 188 | ]""" 189 | let description = [ 190 | Html.p [ 191 | prop.className "paragraph" 192 | prop.children [ Html.text "This example shows how to enable wrapping of items into multiple rows. Resize your browser window to see the items reflow." ] 193 | ] 194 | ] 195 | 196 | Example "Wrapping" code description [ 197 | Spectrum.Flex [ 198 | Flex.direction FlexDirection.Row 199 | Flex.gap (DimValue.Size Size100) 200 | Flex.wrap true 201 | Flex.children [ 202 | for color in colors do 203 | Spectrum.View [ 204 | View.key (unbox color) 205 | View.backgroundColor (BackgroundColorValue.Color color) 206 | View.width (DimValue.Size Size800) 207 | View.height (DimValue.Size Size800) 208 | ] 209 | ] 210 | ] 211 | ] 212 | 213 | [] 214 | let FlexExample5 () = 215 | let code = """Spectrum.Flex [ 216 | Flex.direction FlexDirection.Column 217 | Flex.gap (DimValue.Size Size100) 218 | Flex.alignItems FlexAlignItems.Center 219 | Flex.children [ 220 | Spectrum.View [ 221 | View.backgroundColor (BackgroundColorValue.Color Celery600) 222 | View.width (DimValue.Size Size800) 223 | View.height (DimValue.Size Size800) 224 | ] 225 | Spectrum.View [ 226 | View.backgroundColor (BackgroundColorValue.Color Blue600) 227 | View.width (DimValue.Size Size2000) 228 | View.height (DimValue.Size Size800) 229 | ] 230 | Spectrum.View [ 231 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 232 | View.width (DimValue.Size Size800) 233 | View.height (DimValue.Size Size800) 234 | ] 235 | ] 236 | ]""" 237 | let description = [] 238 | 239 | Example "Alignment" code description [ 240 | Spectrum.Flex [ 241 | Flex.direction FlexDirection.Column 242 | Flex.gap (DimValue.Size Size100) 243 | Flex.alignItems FlexAlignItems.Center 244 | Flex.children [ 245 | Spectrum.View [ 246 | View.backgroundColor (BackgroundColorValue.Color Celery600) 247 | View.width (DimValue.Size Size800) 248 | View.height (DimValue.Size Size800) 249 | ] 250 | Spectrum.View [ 251 | View.backgroundColor (BackgroundColorValue.Color Blue600) 252 | View.width (DimValue.Size Size2000) 253 | View.height (DimValue.Size Size800) 254 | ] 255 | Spectrum.View [ 256 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 257 | View.width (DimValue.Size Size800) 258 | View.height (DimValue.Size Size800) 259 | ] 260 | ] 261 | ] 262 | ] 263 | 264 | [] 265 | let FlexExample6 () = 266 | let code = """Spectrum.View [ 267 | View.height (DimValue.Size Size3000) 268 | View.borderWidth BorderSizeValue.Thin 269 | View.borderColor BorderColorValue.Dark 270 | View.children [ 271 | Spectrum.Flex [ 272 | Flex.direction FlexDirection.Column 273 | Flex.gap (DimValue.Size Size100) 274 | Flex.justifyContent FlexJustifyContent.Center 275 | Flex.height "100%" 276 | Flex.children [ 277 | Spectrum.View [ 278 | View.backgroundColor (BackgroundColorValue.Color Celery600) 279 | View.width (DimValue.Size Size800) 280 | View.height (DimValue.Size Size800) 281 | ] 282 | Spectrum.View [ 283 | View.backgroundColor (BackgroundColorValue.Color Blue600) 284 | View.width (DimValue.Size Size2000) 285 | View.height (DimValue.Size Size800) 286 | ] 287 | Spectrum.View [ 288 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 289 | View.width (DimValue.Size Size800) 290 | View.height (DimValue.Size Size800) 291 | ] 292 | ] 293 | ] 294 | ] 295 | ]""" 296 | let description = [] 297 | 298 | Example "Justification" code description [ 299 | Spectrum.View [ 300 | View.height (DimValue.Size Size3000) 301 | View.borderWidth BorderSizeValue.Thin 302 | View.borderColor BorderColorValue.Dark 303 | View.children [ 304 | Spectrum.Flex [ 305 | Flex.direction FlexDirection.Column 306 | Flex.gap (DimValue.Size Size100) 307 | Flex.justifyContent FlexJustifyContent.Center 308 | Flex.height "100%" 309 | Flex.children [ 310 | Spectrum.View [ 311 | View.backgroundColor (BackgroundColorValue.Color Celery600) 312 | View.width (DimValue.Size Size800) 313 | View.height (DimValue.Size Size800) 314 | ] 315 | Spectrum.View [ 316 | View.backgroundColor (BackgroundColorValue.Color Blue600) 317 | View.width (DimValue.Size Size2000) 318 | View.height (DimValue.Size Size800) 319 | ] 320 | Spectrum.View [ 321 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 322 | View.width (DimValue.Size Size800) 323 | View.height (DimValue.Size Size800) 324 | ] 325 | ] 326 | ] 327 | ] 328 | ] 329 | ] 330 | 331 | 332 | [] 333 | let FlexDocs () = 334 | let description = [ 335 | Html.text "A layout container using flexbox. Provides Spectrum dimension values, and supports the gap property to define consistent spacing between items." 336 | Html.br [] 337 | Html.br [] 338 | Html.text " Check the official " 339 | Html.a [ 340 | prop.children [ Html.text "documentation" ] 341 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Flex.html" 342 | ] 343 | Html.text " for more details." 344 | ] 345 | 346 | ExampleGroup "Flex" description [ 347 | FlexExample1 () 348 | FlexExample2 () 349 | FlexExample3 () 350 | FlexExample4 () 351 | FlexExample5 () 352 | FlexExample6 () 353 | ] 354 | 355 | [] 356 | let GridExample1 () = 357 | let code = """Spectrum.Grid [ 358 | Grid.areas [ "header header"; "sidebar content"; "footer footer" ] 359 | Grid.columns [ "1fr"; "3fr" ] 360 | Grid.rows [ 361 | DimValue.Size Size1000 362 | DimValue.String "auto" 363 | DimValue.Size Size1000 364 | ] 365 | Grid.height (DimValue.Size Size6000) 366 | Grid.width "80%" 367 | Grid.gap (DimValue.Size Size100) 368 | Grid.children [ 369 | Spectrum.View [ 370 | View.backgroundColor (BackgroundColorValue.Color Celery600) 371 | View.gridArea "header" 372 | ] 373 | Spectrum.View [ 374 | View.backgroundColor (BackgroundColorValue.Color Blue600) 375 | View.gridArea "sidebar" 376 | ] 377 | Spectrum.View [ 378 | View.backgroundColor (BackgroundColorValue.Color Purple600) 379 | View.gridArea "content" 380 | ] 381 | Spectrum.View [ 382 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 383 | View.gridArea "footer" 384 | ] 385 | ] 386 | ]""" 387 | let description = [] 388 | 389 | Example "Explicit grid" code description [ 390 | Spectrum.Grid [ 391 | Grid.areas [ "header header"; "sidebar content"; "footer footer" ] 392 | Grid.columns [ "1fr"; "3fr" ] 393 | Grid.rows [ 394 | DimValue.Size Size1000 395 | DimValue.String "auto" 396 | DimValue.Size Size1000 397 | ] 398 | Grid.height (DimValue.Size Size6000) 399 | Grid.width "80%" 400 | Grid.gap (DimValue.Size Size100) 401 | Grid.children [ 402 | Spectrum.View [ 403 | View.backgroundColor (BackgroundColorValue.Color Celery600) 404 | View.gridArea "header" 405 | ] 406 | Spectrum.View [ 407 | View.backgroundColor (BackgroundColorValue.Color Blue600) 408 | View.gridArea "sidebar" 409 | ] 410 | Spectrum.View [ 411 | View.backgroundColor (BackgroundColorValue.Color Purple600) 412 | View.gridArea "content" 413 | ] 414 | Spectrum.View [ 415 | View.backgroundColor (BackgroundColorValue.Color Magenta600) 416 | View.gridArea "footer" 417 | ] 418 | ] 419 | ] 420 | ] 421 | 422 | [] 423 | let GridExample2 () = 424 | let code = """Spectrum.Grid [ 425 | Grid.height (DimValue.Size Size6000) 426 | Grid.width "100%" 427 | Grid.columns (Spectrum.repeat(AutoFit, DimValue.Size Size800)) 428 | Grid.autoRows (DimValue.Size Size800) 429 | Grid.justifyContent GridJustifyContent.Center 430 | Grid.gap (DimValue.Size Size200) 431 | Grid.children [ 432 | for color in colors do 433 | Spectrum.View [ 434 | View.key (unbox color) 435 | View.backgroundColor (BackgroundColorValue.Color color) 436 | ] 437 | ] 438 | ]""" 439 | let description = [] 440 | 441 | let colors = SharedModule.colorsList 442 | 443 | Example "Implicit grid" code description [ 444 | Spectrum.Grid [ 445 | Grid.height (DimValue.Size Size6000) 446 | Grid.width "100%" 447 | Grid.columns (Spectrum.repeat(AutoFit, DimValue.Size Size800)) 448 | Grid.autoRows (DimValue.Size Size800) 449 | Grid.justifyContent GridJustifyContent.Center 450 | Grid.gap (DimValue.Size Size200) 451 | Grid.children [ 452 | for color in colors do 453 | Spectrum.View [ 454 | View.key (unbox color) 455 | View.backgroundColor (BackgroundColorValue.Color color) 456 | ] 457 | ] 458 | ] 459 | ] 460 | 461 | [] 462 | let GridDocs () = 463 | let description = [ 464 | Html.text "A layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing." 465 | Html.br [] 466 | Html.br [] 467 | Html.text " Check the official " 468 | Html.a [ 469 | prop.children [ Html.text "documentation" ] 470 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Grid.html" 471 | ] 472 | Html.text " for more details." 473 | ] 474 | 475 | ExampleGroup "Grid" description [ 476 | GridExample1 () 477 | GridExample2 () 478 | ] -------------------------------------------------------------------------------- /docs/src/Pages/Shared.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module Libraries = 10 | 11 | type IPrism = 12 | abstract highlightAll: unit -> unit 13 | abstract highlightAllUnder: Browser.Types.HTMLElement -> unit 14 | 15 | [] 16 | let Prism: IPrism = jsNative 17 | 18 | [] 19 | module SharedModule = 20 | 21 | type CodeType = 22 | | FSharp 23 | | Bash 24 | 25 | [] 26 | let Code (lang: CodeType) (text: string) = 27 | let elementRef = React.useElementRef() 28 | 29 | React.useEffectOnce(fun () -> 30 | match elementRef.current with 31 | | Some element -> Libraries.Prism.highlightAllUnder(element) 32 | | None -> Browser.Dom.console.warn("Failed to find element")) 33 | 34 | let className = 35 | match lang with 36 | | FSharp -> "language-fsharp" 37 | | Bash -> "language-bash" 38 | 39 | Html.pre [ 40 | prop.ref elementRef 41 | prop.className className 42 | prop.children [ 43 | Html.code text 44 | ] 45 | ] 46 | 47 | [] 48 | let CodeResult (elements: ReactElement list) = 49 | Spectrum.Well [ 50 | Well.UNSAFE_className "example-result" 51 | Well.children elements 52 | ] 53 | 54 | [] 55 | let ExampleGroup (title: string) (description: ReactElement list) (examples: ReactElement list) = 56 | React.fragment [ 57 | Html.h1 [ 58 | prop.className "title example-group-title" 59 | prop.children [ Html.text title ] 60 | ] 61 | Html.p [ 62 | prop.className "example-group-description" 63 | prop.children description 64 | ] 65 | 66 | for i, example in List.indexed examples do 67 | example 68 | if i <> examples.Length - 1 then 69 | Html.br [] 70 | Spectrum.Divider [ 71 | Divider.size DividerSize.S 72 | ] 73 | Html.br [] 74 | ] 75 | 76 | [] 77 | let Example (title: string) (code: string) (description: ReactElement list) (elements: ReactElement list) = 78 | React.fragment [ 79 | Html.h2 [ 80 | prop.className "subtitle" 81 | prop.children [ Html.text title ] 82 | ] 83 | for el in description do el 84 | Spectrum.Flex [ 85 | Flex.direction FlexDirection.Column 86 | Flex.gap (DimValue.Size Size100) 87 | Flex.children [ 88 | Code FSharp code 89 | CodeResult elements 90 | ] 91 | ] 92 | ] 93 | 94 | let colorsList = [ 95 | ColorValue.Blue400 96 | ColorValue.Blue500 97 | ColorValue.Blue600 98 | ColorValue.Blue700 99 | ColorValue.Celery400 100 | ColorValue.Celery500 101 | ColorValue.Celery600 102 | ColorValue.Celery700 103 | ColorValue.Chartreuse400 104 | ColorValue.Chartreuse500 105 | ColorValue.Chartreuse600 106 | ColorValue.Chartreuse700 107 | ColorValue.Fuchsia400 108 | ColorValue.Fuchsia500 109 | ColorValue.Fuchsia600 110 | ColorValue.Fuchsia700 111 | ColorValue.Gray50 112 | ColorValue.Gray75 113 | ColorValue.Gray100 114 | ColorValue.Gray200 115 | ColorValue.Gray300 116 | ColorValue.Gray400 117 | ColorValue.Gray500 118 | ColorValue.Gray600 119 | ColorValue.Gray700 120 | ColorValue.Gray800 121 | ColorValue.Gray900 122 | ColorValue.Green400 123 | ColorValue.Green500 124 | ColorValue.Green600 125 | ColorValue.Green700 126 | ColorValue.Indigo400 127 | ColorValue.Indigo500 128 | ColorValue.Indigo600 129 | ColorValue.Indigo700 130 | ColorValue.Informative 131 | ColorValue.Magenta400 132 | ColorValue.Magenta500 133 | ColorValue.Magenta600 134 | ColorValue.Magenta700 135 | ColorValue.Negative 136 | ColorValue.Notice 137 | ColorValue.Orange400 138 | ColorValue.Orange500 139 | ] -------------------------------------------------------------------------------- /docs/src/Pages/SlidersDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module SliderDocs = 10 | 11 | [] 12 | let RangeSliderExample1 () = 13 | let code = """Spectrum.RangeSlider [ 14 | RangeSlider.label "Range" 15 | RangeSlider.defaultValue {| start = 12; ``end`` = 36 |} 16 | ]""" 17 | 18 | Example "Default example" code [] [ 19 | Spectrum.RangeSlider [ 20 | RangeSlider.label "Range" 21 | RangeSlider.defaultValue {| start = 12; ``end`` = 36 |} 22 | ] 23 | ] 24 | 25 | [] 26 | let RangeSliderExample2 () = 27 | let code = """let value, setValue = React.useState({| start = 25; ``end`` = 75 |}) 28 | Spectrum.Flex [ 29 | Flex.gap (DimValue.Size Size150) 30 | Flex.wrap true 31 | Flex.children [ 32 | Spectrum.RangeSlider [ 33 | RangeSlider.label "Range (Uncontrolled)" 34 | RangeSlider.defaultValue {| start = 25; ``end`` = 75 |} 35 | ] 36 | Spectrum.RangeSlider [ 37 | RangeSlider.label "Range (Controlled)" 38 | RangeSlider.value {| start = value.start; ``end`` = value.``end`` |} 39 | RangeSlider.onChange (fun x -> setValue {| start = x.start; ``end`` = x.``end`` |}) 40 | ] 41 | ] 42 | ]""" 43 | 44 | Example "Value" code [] [ 45 | let value, setValue = React.useState({| start = 25; ``end`` = 75 |}) 46 | Spectrum.Flex [ 47 | Flex.gap (DimValue.Size Size150) 48 | Flex.wrap true 49 | Flex.children [ 50 | Spectrum.RangeSlider [ 51 | RangeSlider.label "Range (Uncontrolled)" 52 | RangeSlider.defaultValue {| start = 25; ``end`` = 75 |} 53 | ] 54 | Spectrum.RangeSlider [ 55 | RangeSlider.label "Range (Controlled)" 56 | RangeSlider.value {| start = value.start; ``end`` = value.``end`` |} 57 | RangeSlider.onChange (fun x -> setValue {| start = x.start; ``end`` = x.``end`` |}) 58 | ] 59 | ] 60 | ] 61 | ] 62 | 63 | [] 64 | let RangeSliderExample3 () = 65 | let code = """Spectrum.RangeSlider [ 66 | RangeSlider.label "Range" 67 | RangeSlider.minValue 50 68 | RangeSlider.maxValue 150 69 | RangeSlider.defaultValue {| start = 75; ``end`` = 100 |} 70 | ]""" 71 | 72 | Example "Different scale" code [] [ 73 | Spectrum.RangeSlider [ 74 | RangeSlider.label "Range" 75 | RangeSlider.minValue 50 76 | RangeSlider.maxValue 150 77 | RangeSlider.defaultValue {| start = 75; ``end`` = 100 |} 78 | ] 79 | ] 80 | 81 | [] 82 | let RangeSliderExample4 () = 83 | let code = """Spectrum.RangeSlider [ 84 | RangeSlider.label "Price range" 85 | RangeSlider.formatOptions <| NumberFormat.make(style = NumberFormatStyle.Currency, currency = "JPY") 86 | RangeSlider.defaultValue {| start = 75; ``end`` = 100 |} 87 | ]""" 88 | 89 | Example "Number format" code [] [ 90 | Spectrum.RangeSlider [ 91 | RangeSlider.label "Price range" 92 | RangeSlider.formatOptions <| NumberFormat.make(style = NumberFormatStyle.Currency, currency = "JPY") 93 | RangeSlider.defaultValue {| start = 75; ``end`` = 100 |} 94 | ] 95 | ] 96 | 97 | [] 98 | let RangeSliderExample5 () = 99 | let code = """Spectrum.RangeSlider [ 100 | RangeSlider.label "Search radius" 101 | RangeSlider.maxValue 200 102 | RangeSlider.defaultValue {| start = 15; ``end`` = 60 |} 103 | RangeSlider.getValueLabel (fun m -> $"{m.start}m to {m.``end``}m away") 104 | ]""" 105 | 106 | Example "Using the getValueLabel prop" code [] [ 107 | Spectrum.RangeSlider [ 108 | RangeSlider.label "Search radius" 109 | RangeSlider.maxValue 200 110 | RangeSlider.defaultValue {| start = 15; ``end`` = 60 |} 111 | RangeSlider.getValueLabel (fun m -> $"{m.start}m to {m.``end``}m away") 112 | ] 113 | ] 114 | 115 | [] 116 | let RangeSliderDocs () = 117 | let description = [ 118 | Html.text "RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable." 119 | Html.br [] 120 | Html.br [] 121 | Html.text " Check the official " 122 | Html.a [ 123 | prop.children [ Html.text "documentation" ] 124 | prop.href "https://react-spectrum.adobe.com/react-spectrum/RangeSlider.html" 125 | ] 126 | Html.text " for more details." 127 | ] 128 | 129 | ExampleGroup "RangeSlider" description [ 130 | RangeSliderExample1 () 131 | RangeSliderExample2 () 132 | RangeSliderExample3 () 133 | RangeSliderExample4 () 134 | RangeSliderExample5 () 135 | ] 136 | 137 | [] 138 | let SliderExample1 () = 139 | let code = """Spectrum.Slider [ 140 | Slider.label "Cookies to buy" 141 | Slider.defaultValue 12 142 | ]""" 143 | 144 | Example "Default example" code [] [ 145 | Spectrum.Slider [ 146 | Slider.label "Cookies to buy" 147 | Slider.defaultValue 12 148 | ] 149 | ] 150 | 151 | [] 152 | let SliderExample2 () = 153 | let code = """let value, setValue = React.useState(25) 154 | Spectrum.Flex [ 155 | Flex.gap (DimValue.Size Size150) 156 | Flex.wrap true 157 | Flex.children [ 158 | Spectrum.Slider [ 159 | Slider.label "Cookies to buy (Uncontrolled)" 160 | Slider.defaultValue 25 161 | ] 162 | Spectrum.Slider [ 163 | Slider.label "Cookies to buy (Controlled)" 164 | Slider.value value 165 | Slider.onChange setValue 166 | ] 167 | ] 168 | ]""" 169 | 170 | Example "Value" code [] [ 171 | let value, setValue = React.useState(25) 172 | Spectrum.Flex [ 173 | Flex.gap (DimValue.Size Size150) 174 | Flex.wrap true 175 | Flex.children [ 176 | Spectrum.Slider [ 177 | Slider.label "Cookies to buy (Uncontrolled)" 178 | Slider.defaultValue 25 179 | ] 180 | Spectrum.Slider [ 181 | Slider.label "Cookies to buy (Controlled)" 182 | Slider.value value 183 | Slider.onChange setValue 184 | ] 185 | ] 186 | ] 187 | ] 188 | 189 | [] 190 | let SliderExample3 () = 191 | let code = """Spectrum.Slider [ 192 | Slider.label "Currency" 193 | Slider.formatOptions <| NumberFormat.make(style = NumberFormatStyle.Currency, currency = "USD") 194 | Slider.defaultValue 60 195 | ]""" 196 | 197 | Example "Number format" code [] [ 198 | Spectrum.Slider [ 199 | Slider.label "Currency" 200 | Slider.formatOptions <| NumberFormat.make(style = NumberFormatStyle.Currency, currency = "USD") 201 | Slider.defaultValue 60 202 | ] 203 | ] 204 | 205 | [] 206 | let SliderDocs () = 207 | let description = [ 208 | Html.text "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable." 209 | Html.br [] 210 | Html.br [] 211 | Html.text " Check the official " 212 | Html.a [ 213 | prop.children [ Html.text "documentation" ] 214 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Slider.html" 215 | ] 216 | Html.text " for more details." 217 | ] 218 | 219 | ExampleGroup "Slider" description [ 220 | SliderExample1 () 221 | SliderExample2 () 222 | SliderExample3 () 223 | ] -------------------------------------------------------------------------------- /docs/src/Pages/StatusDocs.fs: -------------------------------------------------------------------------------- 1 | namespace Pages 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | module StatusDocs = 10 | 11 | [] 12 | let MeterExample1 () = 13 | let code = """Spectrum.Meter [ 14 | Meter.label "Storage space" 15 | Meter.variant MeterVariant.Positive 16 | Meter.value 35 17 | ]""" 18 | 19 | Example "Default example" code [] [ 20 | Spectrum.Meter [ 21 | Meter.label "Storage space" 22 | Meter.variant MeterVariant.Positive 23 | Meter.value 35 24 | ] 25 | ] 26 | 27 | [] 28 | let MeterExample2 () = 29 | let code = """Spectrum.Meter [ 30 | Meter.label "Progress" 31 | Meter.marginBottom (DimValue.Size Size300) 32 | Meter.value 25 33 | Meter.valueLabel "1 of 4" 34 | Meter.variant MeterVariant.Warning 35 | ]""" 36 | 37 | Example "Warning example" code [] [ 38 | Spectrum.Meter [ 39 | Meter.label "Progress" 40 | Meter.marginBottom (DimValue.Size Size300) 41 | Meter.value 25 42 | Meter.valueLabel "1 of 4" 43 | Meter.variant MeterVariant.Warning 44 | ] 45 | ] 46 | 47 | [] 48 | let MeterExample3 () = 49 | let code = """Spectrum.Flex [ 50 | Flex.direction FlexDirection.Column 51 | Flex.maxWidth (DimValue.Size Size3000) 52 | Flex.gap (DimValue.Size Size300) 53 | Flex.children [ 54 | Spectrum.Meter [ 55 | Meter.label "Space used" 56 | Meter.showValueLabel false 57 | Meter.value 90 58 | Meter.variant MeterVariant.Critical 59 | ] 60 | Spectrum.Meter [ 61 | Meter.label "Space used" 62 | Meter.valueLabel "54 of 60GB" 63 | Meter.value 90 64 | Meter.variant MeterVariant.Critical 65 | ] 66 | Spectrum.Meter [ 67 | Meter.label "Space used" 68 | Meter.value 89.123 69 | Meter.formatOptions <| NumberFormat.make(style = NumberFormatStyle.Percent, minimumFractionDigits = 2) 70 | Meter.variant MeterVariant.Critical 71 | ] 72 | ] 73 | ]""" 74 | 75 | Example "Labels and formatting" code [] [ 76 | Spectrum.Flex [ 77 | Flex.direction FlexDirection.Column 78 | Flex.maxWidth (DimValue.Size Size3000) 79 | Flex.gap (DimValue.Size Size300) 80 | Flex.children [ 81 | Spectrum.Meter [ 82 | Meter.label "Space used" 83 | Meter.showValueLabel false 84 | Meter.value 90 85 | Meter.variant MeterVariant.Critical 86 | ] 87 | Spectrum.Meter [ 88 | Meter.label "Space used" 89 | Meter.valueLabel "54 of 60GB" 90 | Meter.value 90 91 | Meter.variant MeterVariant.Critical 92 | ] 93 | Spectrum.Meter [ 94 | Meter.label "Space used" 95 | Meter.value 89.123 96 | Meter.formatOptions <| NumberFormat.make(style = NumberFormatStyle.Percent, minimumFractionDigits = 2) 97 | Meter.variant MeterVariant.Critical 98 | ] 99 | ] 100 | ] 101 | ] 102 | 103 | [] 104 | let MeterDocs () = 105 | let description = [ 106 | Html.text "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions." 107 | Html.br [] 108 | Html.br [] 109 | Html.text " Check the official " 110 | Html.a [ 111 | prop.children [ Html.text "documentation" ] 112 | prop.href "https://react-spectrum.adobe.com/react-spectrum/Meter.html" 113 | ] 114 | Html.text " for more details." 115 | ] 116 | 117 | ExampleGroup "Meter" description [ 118 | MeterExample1 () 119 | MeterExample2 () 120 | MeterExample3 () 121 | ] 122 | 123 | [] 124 | let ProgressBarExample1 () = 125 | let code = """Spectrum.ProgressBar [ 126 | ProgressBar.label "Loading..." 127 | ProgressBar.value 50 128 | ]""" 129 | 130 | Example "Default example" code [] [ 131 | Spectrum.ProgressBar [ 132 | ProgressBar.label "Loading..." 133 | ProgressBar.value 50 134 | ] 135 | ] 136 | 137 | [] 138 | let ProgressBarExample2 () = 139 | let code = """Spectrum.ProgressBar [ 140 | ProgressBar.label "Loading..." 141 | ProgressBar.isIndeterminate true 142 | ]""" 143 | 144 | Example "Indeterminate" code [] [ 145 | Spectrum.ProgressBar [ 146 | ProgressBar.label "Loading..." 147 | ProgressBar.isIndeterminate true 148 | ] 149 | ] 150 | 151 | [] 152 | let ProgressBarExample3 () = 153 | let code = """Spectrum.View [ 154 | View.backgroundColor (BackgroundColorValue.Color Positive) 155 | View.padding (DimValue.Size Size300) 156 | View.children [ 157 | Spectrum.ProgressBar [ 158 | ProgressBar.overBackgroundVariant 159 | ProgressBar.label "Loading..." 160 | ProgressBar.value 5 161 | ] 162 | ] 163 | ]""" 164 | 165 | Example "Over background" code [] [ 166 | Spectrum.View [ 167 | View.backgroundColor (BackgroundColorValue.Color Positive) 168 | View.padding (DimValue.Size Size300) 169 | View.children [ 170 | Spectrum.ProgressBar [ 171 | ProgressBar.overBackgroundVariant 172 | ProgressBar.label "Loading..." 173 | ProgressBar.value 5 174 | ] 175 | ] 176 | ] 177 | ] 178 | 179 | [] 180 | let ProgressBarDocs () = 181 | let description = [ 182 | Html.text "ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress." 183 | Html.br [] 184 | Html.br [] 185 | Html.text " Check the official " 186 | Html.a [ 187 | prop.children [ Html.text "documentation" ] 188 | prop.href "https://react-spectrum.adobe.com/react-spectrum/ProgressBar.html" 189 | ] 190 | Html.text " for more details." 191 | ] 192 | 193 | ExampleGroup "ProgressBar" description [ 194 | ProgressBarExample1 () 195 | ProgressBarExample2 () 196 | ProgressBarExample3 () 197 | ] 198 | 199 | [] 200 | let ProgressCircleExample1 () = 201 | let code = """Spectrum.ProgressCircle [ 202 | ProgressCircle.ariaLabel "Loading..." 203 | ProgressCircle.value 50 204 | ]""" 205 | 206 | Example "Default example" code [] [ 207 | Spectrum.ProgressCircle [ 208 | ProgressCircle.ariaLabel "Loading..." 209 | ProgressCircle.value 50 210 | ] 211 | ] 212 | 213 | [] 214 | let ProgressCircleExample2 () = 215 | let code = """Spectrum.ProgressCircle [ 216 | ProgressCircle.ariaLabel "Loading..." 217 | ProgressCircle.isIndeterminate true 218 | ]""" 219 | 220 | Example "Indeterminate" code [] [ 221 | Spectrum.ProgressCircle [ 222 | ProgressCircle.ariaLabel "Loading..." 223 | ProgressCircle.isIndeterminate true 224 | ] 225 | ] 226 | 227 | [] 228 | let ProgressCircleExample3 () = 229 | let code = """Spectrum.View [ 230 | View.backgroundColor (BackgroundColorValue.Color Positive) 231 | View.padding (DimValue.Size Size300) 232 | View.children [ 233 | Spectrum.ProgressCircle [ 234 | ProgressCircle.overBackgroundVariant 235 | ProgressCircle.isIndeterminate true 236 | ProgressCircle.ariaLabel "Loading..." 237 | ] 238 | ] 239 | ]""" 240 | 241 | Example "Over background" code [] [ 242 | Spectrum.View [ 243 | View.backgroundColor (BackgroundColorValue.Color Positive) 244 | View.padding (DimValue.Size Size300) 245 | View.children [ 246 | Spectrum.ProgressCircle [ 247 | ProgressCircle.overBackgroundVariant 248 | ProgressCircle.isIndeterminate true 249 | ProgressCircle.ariaLabel "Loading..." 250 | ] 251 | ] 252 | ] 253 | ] 254 | 255 | [] 256 | let ProgressCircleDocs () = 257 | let description = [ 258 | Html.text "ProgressCircles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress." 259 | Html.br [] 260 | Html.br [] 261 | Html.text " Check the official " 262 | Html.a [ 263 | prop.children [ Html.text "documentation" ] 264 | prop.href "https://react-spectrum.adobe.com/react-spectrum/ProgressCircle.html" 265 | ] 266 | Html.text " for more details." 267 | ] 268 | 269 | ExampleGroup "ProgressCircle" description [ 270 | ProgressCircleExample1 () 271 | ProgressCircleExample2 () 272 | ProgressCircleExample3 () 273 | ] 274 | 275 | [] 276 | let StatusLightExample1 () = 277 | let code = """Spectrum.StatusLight [ 278 | StatusLight.variant StatusLightVariant.Positive 279 | StatusLight.content "Ready" 280 | ]""" 281 | 282 | Example "Default example" code [] [ 283 | Spectrum.StatusLight [ 284 | StatusLight.variant StatusLightVariant.Positive 285 | StatusLight.content "Ready" 286 | ] 287 | ] 288 | 289 | [] 290 | let StatusLightDocs () = 291 | let description = [ 292 | Html.text "Status lights are used to color code categories and labels commonly found in data visualization. When status lights have a semantic meaning, they should use semantic variant colors." 293 | Html.br [] 294 | Html.br [] 295 | Html.text " Check the official " 296 | Html.a [ 297 | prop.children [ Html.text "documentation" ] 298 | prop.href "https://react-spectrum.adobe.com/react-spectrum/StatusLight.html" 299 | ] 300 | Html.text " for more details." 301 | ] 302 | 303 | ExampleGroup "StatusLight" description [ 304 | StatusLightExample1 () 305 | ] -------------------------------------------------------------------------------- /docs/src/css/main.css: -------------------------------------------------------------------------------- 1 | @import url("reset.css"); 2 | 3 | html, body, #app-root, #spectrum-provider { 4 | width: 100%; 5 | height: 100%; 6 | font-size: 16px; 7 | overflow-y: hidden; 8 | } 9 | 10 | #main { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | 15 | #main-content { 16 | width: 70%; 17 | min-width: 900px; 18 | max-width: 1600px; 19 | height: 100%; 20 | overflow-y: hidden 21 | } 22 | 23 | #navigation-list-host { 24 | width: 200px; 25 | min-width: 200px; 26 | max-width: 200px; 27 | } 28 | 29 | #navigation-list { 30 | height: 100%; 31 | } 32 | 33 | #content-host { 34 | width: 100%; 35 | height: 100%; 36 | overflow-x: hidden; 37 | overflow-y: auto; 38 | } 39 | 40 | #content-host > div { 41 | padding: 20px 20px 20px 0; 42 | } 43 | 44 | #toggle-host { 45 | display: none; 46 | } 47 | 48 | body { 49 | font-family: monospace; 50 | font-size: 20px; 51 | margin: 0; 52 | } 53 | 54 | code { 55 | font-family: monospace; 56 | font-size: 14px; 57 | } 58 | 59 | pre.language-fsharp > code.language-fsharp, 60 | pre.language-fsharp::after, 61 | pre.language-fsharp::before, 62 | pre.language-bash > code.language-bash, 63 | pre.language-bash::after, 64 | pre.language-bash::before { 65 | box-shadow: none; 66 | } 67 | 68 | pre.language-fsharp > code.language-fsharp, 69 | pre.language-bash > code.language-bash { 70 | border-top: 1px solid rgb(209, 209, 209); 71 | border-bottom: 1px solid rgb(209, 209, 209); 72 | border-right: 1px solid rgb(209, 209, 209); 73 | font-size: 14px; 74 | } 75 | 76 | .title { 77 | font-size: 26px; 78 | } 79 | 80 | .title > a { 81 | margin-left: 8px; 82 | } 83 | 84 | .subtitle { 85 | font-size: 20px; 86 | } 87 | 88 | .subtitle+p.paragraph { 89 | margin-top: 12px; 90 | } 91 | 92 | .example-group-title { 93 | margin-bottom: 10px; 94 | } 95 | 96 | .example-group-description { 97 | margin-bottom: 20px; 98 | } 99 | 100 | .paragraph { 101 | margin-top: 22px; 102 | margin-bottom: 10px; 103 | } 104 | 105 | ul.bullet-list { 106 | list-style-type: disc; 107 | padding-left: 24px; 108 | } 109 | 110 | .example-result { 111 | background-color: #e9e8e8; 112 | } 113 | 114 | em { 115 | font-weight: 600; 116 | font-family: monospace; 117 | } 118 | 119 | @media screen and (max-width: 1024px) { 120 | #main-content { 121 | width: 100%; 122 | min-width: auto; 123 | max-width: auto; 124 | } 125 | 126 | #toggle-host { 127 | display: inherit; 128 | padding-left: 4px; 129 | padding-top: 4px; 130 | padding-bottom: 4px; 131 | } 132 | 133 | #navigation-list-host { 134 | width: 200px; 135 | min-width: 200px; 136 | max-width: 200px; 137 | position: absolute; 138 | height: calc(100vh - 41px); 139 | z-index: 2; 140 | } 141 | 142 | #navigation-list-host.collapsed { 143 | visibility: collapse; 144 | } 145 | 146 | #content-host > div { 147 | padding: 20px; 148 | } 149 | 150 | body { 151 | -webkit-text-size-adjust: none; 152 | } 153 | } -------------------------------------------------------------------------------- /docs/src/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /docs/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | 3 | export default defineConfig({ 4 | build: { 5 | rollupOptions: { 6 | treeshake: true 7 | } 8 | }, 9 | base: "./" 10 | }); -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/BaseComponents.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Browser.Types 4 | open Feliz 5 | open Fable.Core 6 | open Fable.Core.JsInterop 7 | 8 | [] 9 | type BaseComponent = 10 | static member inline key (value: 'a) = Interop.mkAttr "key" value 11 | static member inline slot (value: string) = Interop.mkAttr "slot" value 12 | static member inline ref (value: Fable.React.IRefValue<_>) = prop.ref value 13 | 14 | // ----------- Layout ----------- 15 | static member inline flex (value: int) = Interop.mkAttr "flex" value 16 | static member inline flex (value: float) = Interop.mkAttr "flex" value 17 | static member inline flex (value: string) = Interop.mkAttr "flex" value 18 | static member inline flex (value: bool) = Interop.mkAttr "flex" value 19 | static member inline flex (value: DimValue) = Interop.mkAttr "flex" value 20 | static member inline flex (value: ResponsivePropOptions) = Interop.mkAttr "flex" value 21 | 22 | static member inline flexGrow (value: int) = Interop.mkAttr "flexGrow" value 23 | static member inline flexGrow (value: float) = Interop.mkAttr "flexGrow" value 24 | static member inline flexGrow (value: DimValue) = Interop.mkAttr "flexGrow" value 25 | static member inline flexGrow (value: ResponsivePropOptions) = Interop.mkAttr "flexGrow" value 26 | 27 | static member inline flexShrink (value: int) = Interop.mkAttr "flexShrink" value 28 | static member inline flexShrink (value: float) = Interop.mkAttr "flexShrink" value 29 | static member inline flexShrink (value: DimValue) = Interop.mkAttr "flexShrink" value 30 | static member inline flexShrink (value: ResponsivePropOptions) = Interop.mkAttr "flexShrink" value 31 | 32 | static member inline flexBasis (value: int) = Interop.mkAttr "flexBasis" value 33 | static member inline flexBasis (value: float) = Interop.mkAttr "flexBasis" value 34 | static member inline flexBasis (value: string) = Interop.mkAttr "flexBasis" value 35 | static member inline flexBasis (value: DimValue) = Interop.mkAttr "flexBasis" value 36 | static member inline flexBasis (value: ResponsivePropOptions) = Interop.mkAttr "flexBasis" value 37 | 38 | static member inline alignSelf (value: FlexAlignSelf) = Interop.mkAttr "alignSelf" value 39 | static member inline alignSelf (value: ResponsivePropOptions) = Interop.mkAttr "alignSelf" value 40 | 41 | static member inline justifySelf (value: FlexJustifySelf) = Interop.mkAttr "justifySelf" value 42 | static member inline justifySelf (value: ResponsivePropOptions) = Interop.mkAttr "justifySelf" value 43 | 44 | static member inline order (value: int) = Interop.mkAttr "order" value 45 | static member inline order (value: float) = Interop.mkAttr "order" value 46 | static member inline order (value: DimValue) = Interop.mkAttr "order" value 47 | static member inline order (value: ResponsivePropOptions) = Interop.mkAttr "order" value 48 | 49 | static member inline gridArea (value: string) = Interop.mkAttr "gridArea" value 50 | static member inline gridArea (value: ResponsivePropOptions) = Interop.mkAttr "gridArea" value 51 | 52 | static member inline gridColumn (value: string) = Interop.mkAttr "gridColumn" value 53 | static member inline gridColumn (value: ResponsivePropOptions) = Interop.mkAttr "gridColumn" value 54 | 55 | static member inline gridRow (value: string) = Interop.mkAttr "gridRow" value 56 | static member inline gridRow (value: ResponsivePropOptions) = Interop.mkAttr "gridRow" value 57 | 58 | static member inline gridColumnStart (value: string) = Interop.mkAttr "gridColumnStart" value 59 | static member inline gridColumnStart (value: ResponsivePropOptions) = Interop.mkAttr "gridColumnStart" value 60 | 61 | static member inline gridColumnEnd (value: string) = Interop.mkAttr "gridColumnEnd" value 62 | static member inline gridColumnEnd (value: ResponsivePropOptions) = Interop.mkAttr "gridColumnEnd" value 63 | 64 | static member inline gridRowStart (value: string) = Interop.mkAttr "gridRowStart" value 65 | static member inline gridRowStart (value: ResponsivePropOptions) = Interop.mkAttr "gridRowStart" value 66 | 67 | static member inline gridRowEnd (value: string) = Interop.mkAttr "gridRowEnd" value 68 | static member inline gridRowEnd (value: ResponsivePropOptions) = Interop.mkAttr "gridRowEnd" value 69 | 70 | static member inline overflow (value: Overflow) = Interop.mkAttr "overflow" value 71 | static member inline overflow (value: ResponsivePropOptions) = Interop.mkAttr "overflow" value 72 | 73 | // ----------- Spacing ----------- 74 | static member inline margin (value: int) = Interop.mkAttr "margin" value 75 | static member inline margin (value: float) = Interop.mkAttr "margin" value 76 | static member inline margin (value: string) = Interop.mkAttr "margin" value 77 | static member inline margin (value: DimValue) = Interop.mkAttr "margin" value 78 | static member inline margin (value: ResponsivePropOptions) = Interop.mkAttr "margin" value 79 | 80 | static member inline marginTop (value: int) = Interop.mkAttr "marginTop" value 81 | static member inline marginTop (value: float) = Interop.mkAttr "marginTop" value 82 | static member inline marginTop (value: string) = Interop.mkAttr "marginTop" value 83 | static member inline marginTop (value: DimValue) = Interop.mkAttr "marginTop" value 84 | static member inline marginTop (value: ResponsivePropOptions) = Interop.mkAttr "marginTop" value 85 | 86 | static member inline marginBottom (value: int) = Interop.mkAttr "marginBottom" value 87 | static member inline marginBottom (value: float) = Interop.mkAttr "marginBottom" value 88 | static member inline marginBottom (value: string) = Interop.mkAttr "marginBottom" value 89 | static member inline marginBottom (value: DimValue) = Interop.mkAttr "marginBottom" value 90 | static member inline marginBottom (value: ResponsivePropOptions) = Interop.mkAttr "marginBottom" value 91 | 92 | static member inline marginStart (value: int) = Interop.mkAttr "marginStart" value 93 | static member inline marginStart (value: float) = Interop.mkAttr "marginStart" value 94 | static member inline marginStart (value: string) = Interop.mkAttr "marginStart" value 95 | static member inline marginStart (value: DimValue) = Interop.mkAttr "marginStart" value 96 | static member inline marginStart (value: ResponsivePropOptions) = Interop.mkAttr "marginStart" value 97 | 98 | static member inline marginEnd (value: int) = Interop.mkAttr "marginEnd" value 99 | static member inline marginEnd (value: float) = Interop.mkAttr "marginEnd" value 100 | static member inline marginEnd (value: string) = Interop.mkAttr "marginEnd" value 101 | static member inline marginEnd (value: DimValue) = Interop.mkAttr "marginEnd" value 102 | static member inline marginEnd (value: ResponsivePropOptions) = Interop.mkAttr "marginEnd" value 103 | 104 | static member inline marginX (value: int) = Interop.mkAttr "marginX" value 105 | static member inline marginX (value: float) = Interop.mkAttr "marginX" value 106 | static member inline marginX (value: string) = Interop.mkAttr "marginX" value 107 | static member inline marginX (value: DimValue) = Interop.mkAttr "marginX" value 108 | static member inline marginX (value: ResponsivePropOptions) = Interop.mkAttr "marginX" value 109 | 110 | static member inline marginY (value: int) = Interop.mkAttr "marginY" value 111 | static member inline marginY (value: float) = Interop.mkAttr "marginY" value 112 | static member inline marginY (value: string) = Interop.mkAttr "marginY" value 113 | static member inline marginY (value: DimValue) = Interop.mkAttr "marginY" value 114 | static member inline marginY (value: ResponsivePropOptions) = Interop.mkAttr "marginY" value 115 | 116 | // ----------- Sizing ----------- 117 | static member inline width (value: int) = Interop.mkAttr "width" value 118 | static member inline width (value: float) = Interop.mkAttr "width" value 119 | static member inline width (value: string) = Interop.mkAttr "width" value 120 | static member inline width (value: DimValue) = Interop.mkAttr "width" value 121 | static member inline width (value: ResponsivePropOptions) = Interop.mkAttr "width" value 122 | 123 | static member inline minWidth (value: int) = Interop.mkAttr "minWidth" value 124 | static member inline minWidth (value: float) = Interop.mkAttr "minWidth" value 125 | static member inline minWidth (value: string) = Interop.mkAttr "minWidth" value 126 | static member inline minWidth (value: DimValue) = Interop.mkAttr "minWidth" value 127 | static member inline minWidth (value: ResponsivePropOptions) = Interop.mkAttr "minWidth" value 128 | 129 | static member inline maxWidth (value: int) = Interop.mkAttr "maxWidth" value 130 | static member inline maxWidth (value: float) = Interop.mkAttr "maxWidth" value 131 | static member inline maxWidth (value: string) = Interop.mkAttr "maxWidth" value 132 | static member inline maxWidth (value: DimValue) = Interop.mkAttr "maxWidth" value 133 | static member inline maxWidth (value: ResponsivePropOptions) = Interop.mkAttr "maxWidth" value 134 | 135 | static member inline height (value: int) = Interop.mkAttr "height" value 136 | static member inline height (value: float) = Interop.mkAttr "height" value 137 | static member inline height (value: string) = Interop.mkAttr "height" value 138 | static member inline height (value: DimValue) = Interop.mkAttr "height" value 139 | static member inline height (value: ResponsivePropOptions) = Interop.mkAttr "height" value 140 | 141 | static member inline minHeight (value: int) = Interop.mkAttr "minHeight" value 142 | static member inline minHeight (value: float) = Interop.mkAttr "minHeight" value 143 | static member inline minHeight (value: string) = Interop.mkAttr "minHeight" value 144 | static member inline minHeight (value: DimValue) = Interop.mkAttr "minHeight" value 145 | static member inline minHeight (value: ResponsivePropOptions) = Interop.mkAttr "minHeight" value 146 | 147 | static member inline maxHeight (value: int) = Interop.mkAttr "maxHeight" value 148 | static member inline maxHeight (value: float) = Interop.mkAttr "maxHeight" value 149 | static member inline maxHeight (value: string) = Interop.mkAttr "maxHeight" value 150 | static member inline maxHeight (value: DimValue) = Interop.mkAttr "maxHeight" value 151 | static member inline maxHeight (value: ResponsivePropOptions) = Interop.mkAttr "maxHeight" value 152 | 153 | // ----------- Positioning ----------- 154 | static member inline position (value: PositionValue) = Interop.mkAttr "position" value 155 | static member inline position (value: ResponsivePropOptions) = Interop.mkAttr "position" value 156 | 157 | static member inline top (value: int) = Interop.mkAttr "top" value 158 | static member inline top (value: float) = Interop.mkAttr "top" value 159 | static member inline top (value: string) = Interop.mkAttr "top" value 160 | static member inline top (value: DimValue) = Interop.mkAttr "top" value 161 | static member inline top (value: ResponsivePropOptions) = Interop.mkAttr "top" value 162 | 163 | static member inline bottom (value: int) = Interop.mkAttr "bottom" value 164 | static member inline bottom (value: float) = Interop.mkAttr "bottom" value 165 | static member inline bottom (value: string) = Interop.mkAttr "bottom" value 166 | static member inline bottom (value: DimValue) = Interop.mkAttr "bottom" value 167 | static member inline bottom (value: ResponsivePropOptions) = Interop.mkAttr "bottom" value 168 | 169 | static member inline left (value: int) = Interop.mkAttr "left" value 170 | static member inline left (value: float) = Interop.mkAttr "left" value 171 | static member inline left (value: string) = Interop.mkAttr "left" value 172 | static member inline left (value: DimValue) = Interop.mkAttr "left" value 173 | static member inline left (value: ResponsivePropOptions) = Interop.mkAttr "left" value 174 | 175 | static member inline right (value: int) = Interop.mkAttr "right" value 176 | static member inline right (value: float) = Interop.mkAttr "right" value 177 | static member inline right (value: string) = Interop.mkAttr "right" value 178 | static member inline right (value: DimValue) = Interop.mkAttr "right" value 179 | static member inline right (value: ResponsivePropOptions) = Interop.mkAttr "right" value 180 | 181 | static member inline start (value: int) = Interop.mkAttr "start" value 182 | static member inline start (value: float) = Interop.mkAttr "start" value 183 | static member inline start (value: string) = Interop.mkAttr "start" value 184 | static member inline start (value: DimValue) = Interop.mkAttr "start" value 185 | static member inline start (value: ResponsivePropOptions) = Interop.mkAttr "start" value 186 | 187 | static member inline end' (value: int) = Interop.mkAttr "end" value 188 | static member inline end' (value: float) = Interop.mkAttr "end" value 189 | static member inline end' (value: string) = Interop.mkAttr "end" value 190 | static member inline end' (value: DimValue) = Interop.mkAttr "end" value 191 | static member inline end' (value: ResponsivePropOptions) = Interop.mkAttr "end" value 192 | 193 | static member inline zIndex (value: int) = Interop.mkAttr "zIndex" value 194 | static member inline zIndex (value: float) = Interop.mkAttr "zIndex" value 195 | static member inline zIndex (value: DimValue) = Interop.mkAttr "zIndex" value 196 | static member inline zIndex (value: ResponsivePropOptions) = Interop.mkAttr "zIndex" value 197 | 198 | static member inline isHidden (value: bool) = Interop.mkAttr "isHidden" value 199 | static member inline isHidden (value: DimValue) = Interop.mkAttr "isHidden" value 200 | static member inline isHidden (value: ResponsivePropOptions) = Interop.mkAttr "isHidden" value 201 | 202 | // ----------- Accessibility ----------- 203 | static member inline id (value: string) = Interop.mkAttr "id" value 204 | static member inline excludeFromTabOrder (value: bool) = Interop.mkAttr "excludeFromTabOrder" value 205 | static member inline ariaExpanded (value: bool) = Interop.mkAttr "aria-expanded" value 206 | static member inline ariaHasPopup (value: bool) = Interop.mkAttr "aria-haspopup" value 207 | static member inline ariaHasPopup (value: AriaHasPopupValue) = Interop.mkAttr "aria-haspopup" value 208 | static member inline ariaControls (value: string) = Interop.mkAttr "aria-controls" value 209 | static member inline ariaPressed (value: bool) = Interop.mkAttr "aria-pressed" value 210 | static member inline ariaLabel (value: string) = Interop.mkAttr "aria-label" value 211 | static member inline ariaLabeledBy (value: string) = Interop.mkAttr "aria-labelledby" value 212 | static member inline ariaDescribedBy (value: string) = Interop.mkAttr "aria-describedby" value 213 | static member inline ariaDetails (value: string) = Interop.mkAttr "aria-details" value 214 | static member inline role (value: string) = Interop.mkAttr "role" value 215 | 216 | // ----------- Advanced ----------- 217 | static member inline UNSAFE_className (value: string) = Interop.mkAttr "UNSAFE_className" value 218 | static member inline UNSAFE_style (properties: #IStyleAttribute list) = Interop.mkAttr "UNSAFE_style" (createObj !!properties) 219 | 220 | [] 221 | type BaseControl = 222 | inherit BaseComponent 223 | 224 | // ----------- Events ----------- 225 | static member inline onFocus (handler: SpectrumFocusEvent -> unit) = Interop.mkAttr "onFocus" handler 226 | static member inline onBlur (handler: SpectrumFocusEvent -> unit) = Interop.mkAttr "onBlur" handler 227 | static member inline onFocusChange (handler: bool -> unit) = Interop.mkAttr "onFocusChange" handler 228 | 229 | [] 230 | type Item = 231 | static member inline key (value: 'a) = Interop.mkAttr "key" value 232 | static member inline content (value: string) = Interop.mkAttr "children" value 233 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 234 | static member inline children (elements: seq) = prop.children(elements) 235 | static member inline title (value: ReactElement) = Interop.mkAttr "title" value 236 | static member inline title (value: string) = Item.title (Html.text value) 237 | static member inline textValue (value: string) = Interop.mkAttr "textValue" value 238 | static member inline ariaLabel (value: string) = Interop.mkAttr "aria-label" value 239 | static member inline childItems (value: seq) = Interop.mkAttr "childItems" (value |> Array.ofSeq) 240 | static member inline hasChildItems (value: bool) = Interop.mkAttr "hasChildItems" value 241 | 242 | [] 243 | type Text = 244 | inherit BaseComponent 245 | static member inline content (value: string) = prop.children [ Html.text value ] -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Buttons.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz 4 | open Fable.Core 5 | open Fable.Core.JsInterop 6 | open Fable.React 7 | 8 | [] 9 | type ButtonVariant = 10 | | [] CTA 11 | | OverBackground 12 | | Primary 13 | | Secondary 14 | | Negative 15 | 16 | [] 17 | type LogicButtonVariant = 18 | | And 19 | | Or 20 | 21 | [] 22 | type ButtonBase = 23 | inherit BaseControl 24 | static member inline content (value: string) = Interop.mkAttr "children" value 25 | static member inline type' (buttonType: ButtonType) = Interop.mkAttr "type" buttonType 26 | static member inline children (node: ReactElement) = prop.children(node) 27 | static member inline children (elements: seq) = prop.children(elements) 28 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 29 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 30 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 31 | 32 | // ----------- Events ----------- 33 | static member inline onKeyDown (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyDown" handler 34 | static member inline onKeyUp (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyUp" handler 35 | 36 | static member inline onPress (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPress" handler 37 | static member inline onPressStart (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPressStart" handler 38 | static member inline onPressEnd (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPressEnd" handler 39 | static member inline onPressChange (handler: bool -> unit) = Interop.mkAttr "onPressChange" handler 40 | static member inline onPressUp (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPressUp" handler 41 | 42 | [] 43 | type Button = 44 | inherit ButtonBase 45 | static member inline variant (value: ButtonVariant) = Interop.mkAttr "variant" value 46 | static member inline href (value: string) = Interop.mkAttr "href" value 47 | static member inline target (value: string) = Interop.mkAttr "target" value 48 | static member inline rel (value: string) = Interop.mkAttr "rel" value 49 | static member inline elementType (value: string) = Interop.mkAttr "elementType" value 50 | 51 | [] 52 | type ActionButton = 53 | inherit ButtonBase 54 | static member inline staticColor (value: StaticColorValue) = Interop.mkAttr "staticColor" value 55 | 56 | [] 57 | type LogicButton = 58 | inherit ButtonBase 59 | static member inline variant (value: LogicButtonVariant) = Interop.mkAttr "variant" value 60 | 61 | [] 62 | type ToggleButton = 63 | inherit ButtonBase 64 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 65 | static member inline isSelected (value: bool) = Interop.mkAttr "isSelected" value 66 | static member inline defaultSelected (value: bool) = Interop.mkAttr "defaultSelected" value 67 | static member inline staticColor (value: StaticColorValue) = Interop.mkAttr "staticColor" value 68 | static member inline onChange (handler: bool -> unit) = Interop.mkAttr "onChange" handler 69 | 70 | [] 71 | type ActionGroup = 72 | inherit BaseComponent 73 | 74 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 75 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 76 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 77 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 78 | static member inline density (value: Density) = Interop.mkAttr "density" value 79 | static member inline isJustified (value: bool) = Interop.mkAttr "isJustified" value 80 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 81 | static member inline staticColor (value: StaticColorValue) = Interop.mkAttr "staticColor" value 82 | static member inline overflowMode (value: ActionGroupOverflowMode) = Interop.mkAttr "overflowMode" value 83 | static member inline buttonLabelBehavior (value: ButtonLabelBehavior) = Interop.mkAttr "buttonLabelBehavior" value 84 | static member inline summaryIcon (value: ReactElement) = Interop.mkAttr "summaryIcon" value 85 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 86 | static member inline disabledKeys (value: seq<'a>) = Interop.mkAttr "disabledKeys" (value |> Array.ofSeq) 87 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 88 | static member inline selectionMode (value: SelectionMode) = Interop.mkAttr "selectionMode" value 89 | static member inline disallowEmptySelection (value: bool) = Interop.mkAttr "disallowEmptySelection" value 90 | static member inline selectedKeys (value: seq<'a>) = Interop.mkAttr "selectedKeys" (value |> Array.ofSeq) 91 | static member inline defaultSelectedKeys (value: seq<'a>) = Interop.mkAttr "defaultSelectedKeys" (value |> Array.ofSeq) 92 | static member inline onAction (value: 'a -> unit) = Interop.mkAttr "onAction" value 93 | static member inline onSelectionChange (handler: ActionGroupSelection<'a> -> unit) = 94 | let callback = fun x -> 95 | match !!x with 96 | | "all" -> handler ActionGroupSelection.All 97 | | set -> 98 | let set': Fable.Core.JS.Set<'a> = !!set 99 | let values = set'.values() |> List.ofSeq 100 | handler (Set values) 101 | Interop.mkAttr "onSelectionChange" callback 102 | 103 | [] 104 | type ButtonGroup = 105 | inherit BaseComponent 106 | 107 | static member inline children (elements: seq) = prop.children (elements) 108 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 109 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 110 | static member inline align (value: ButtonGroupAlignment) = Interop.mkAttr "align" value -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Collections.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.React 7 | 8 | [] 9 | type SelectableBase = 10 | inherit BaseComponent 11 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 12 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 13 | static member inline autoFocus (value: FocusStrategy) = Interop.mkAttr "autoFocus" value 14 | static member inline shouldFocusWrap (value: bool) = Interop.mkAttr "shouldFocusWrap" value 15 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 16 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 17 | static member inline disabledKeys (value: seq<'a>) = Interop.mkAttr "disabledKeys" value 18 | static member inline selectionMode (value: SelectionMode) = Interop.mkAttr "selectionMode" value 19 | static member inline disallowEmptySelection (value: bool) = Interop.mkAttr "disallowEmptySelection" value 20 | static member inline selectedKeys (value: seq<'a>) = Interop.mkAttr "selectedKeys" value 21 | static member inline defaultSelectedKeys (value: seq<'a>) = Interop.mkAttr "defaultSelectedKeys" value 22 | static member inline onSelectionChange (handler: 'a list -> unit) = 23 | let handler' = fun (selection: Fable.Core.JS.Set<'a>) -> 24 | let items = selection.values() |> List.ofSeq 25 | handler items 26 | 27 | Interop.mkAttr "onSelectionChange" handler' 28 | 29 | [] 30 | type ListBox = 31 | inherit SelectableBase 32 | static member inline isLoading (value: bool) = Interop.mkAttr "isLoading" value 33 | static member inline onLoadMore (handler: unit -> 'a) = Interop.mkAttr "onLoadMore" handler 34 | 35 | [] 36 | type ActionMenu = 37 | inherit BaseComponent 38 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 39 | static member inline align (value: Alignment) = Interop.mkAttr "align" value 40 | static member inline direction (value: ActionMenuDirection) = Interop.mkAttr "direction" value 41 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 42 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 43 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 44 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 45 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 46 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 47 | static member inline disabledKeys (value: seq<'a>) = Interop.mkAttr "disabledKeys" value 48 | static member inline trigger (value: MenuTriggerType) = Interop.mkAttr "trigger" value 49 | static member inline closeOnSelect (value: bool) = Interop.mkAttr "closeOnSelect" value 50 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 51 | static member inline defaultOpen (value: bool) = Interop.mkAttr "defaultOpen" value 52 | static member inline onAction (handler: 'a -> unit) = Interop.mkAttr "onAction" handler 53 | static member inline onOpenChange (handler: bool -> unit) = Interop.mkAttr "onOpenChange" handler 54 | 55 | [] 56 | type Section = 57 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 58 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 59 | static member inline key (value: string) = Interop.mkAttr "key" value 60 | static member inline title (value: string) = Interop.mkAttr "title" value 61 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 62 | static member inline ariaLabel (value: string) = Interop.mkAttr "ariaLabel" value 63 | 64 | [] 65 | type Menu = 66 | inherit SelectableBase 67 | static member inline onAction (handler: 'a -> unit) = Interop.mkAttr "onAction" handler 68 | 69 | [] 70 | type MenuTrigger = 71 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 72 | static member inline trigger (value: MenuTriggerType) = Interop.mkAttr "trigger" value 73 | static member inline closeOnSelected (value: bool) = Interop.mkAttr "closeOnSelect" value 74 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 75 | static member inline align (value: Alignment) = Interop.mkAttr "align" value 76 | static member inline direction (value: MenuDirection) = Interop.mkAttr "direction" value 77 | static member inline onOpenChange (handler: bool -> unit) = Interop.mkAttr "onOpenChange" handler 78 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 79 | static member inline defaultOpen (value: bool) = Interop.mkAttr "defaultOpen" value 80 | 81 | [] 82 | type TableView = 83 | inherit BaseComponent 84 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 85 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 86 | static member inline density (value: TableViewDensity) = Interop.mkAttr "density" value 87 | static member inline overflowMode (value: TableViewOverflowMode) = Interop.mkAttr "overflowMode" value 88 | static member inline renderEmptyState (handler: unit -> ReactElement) = Interop.mkAttr "renderEmptyState" handler 89 | static member inline sortDescriptor (column: 'a, direction: SortDirection) = Interop.mkAttr "sortDescriptor" {| column = column; direction = direction |} 90 | static member inline selectionStyle (value: TableViewSelectionStyle) = Interop.mkAttr "selectionStyle" value 91 | static member inline disabledKeys (value: seq<'a>) = Interop.mkAttr "disabledKeys" value 92 | static member inline selectionMode (value: SelectionMode) = Interop.mkAttr "selectionMode" value 93 | static member inline disallowEmptySelection (value: bool) = Interop.mkAttr "disallowEmptySelection" value 94 | static member inline selectedKeys (value: seq<'a>) = Interop.mkAttr "selectedKeys" value 95 | static member inline defaultSelectedKeys (value: seq<'a>) = Interop.mkAttr "defaultSelectedKeys" value 96 | static member inline onSelectionChange (handler: 'a list -> unit) = 97 | let handler' = fun (selection: Fable.Core.JS.Set<'a>) -> 98 | let items = selection.values() |> List.ofSeq 99 | handler items 100 | Interop.mkAttr "onSelectionChange" handler' 101 | static member inline onAction (handler: 'a -> unit) = Interop.mkAttr "onAction" handler 102 | static member inline onSortChange (handler: {| column: 'a; direction: SortDirection |} -> 'b) = Interop.mkAttr "onSortChange" handler 103 | 104 | [] 105 | type TableHeader = 106 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 107 | static member inline columns (values: seq<'a>) = Interop.mkAttr "columns" (values |> Array.ofSeq) 108 | static member inline columnTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 109 | 110 | [] 111 | type Column = 112 | static member inline key (value: 'a) = Interop.mkAttr "key" value 113 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 114 | static member inline content (value: string) = Column.children [ Html.text value ] 115 | static member inline content (value: ReactElement) = Column.children [ value ] 116 | static member inline align (value: ColumnAlignment) = Interop.mkAttr "align" value 117 | static member inline showDivider (value: bool) = Interop.mkAttr "showDivider" value 118 | static member inline hideHeader (value: bool) = Interop.mkAttr "hideHeader" value 119 | static member inline title (element: ReactElement) = Interop.mkAttr "title" element 120 | static member inline childColumns (xs: seq<'a>) = Interop.mkAttr "childColumns" (xs |> Array.ofSeq) 121 | static member inline allowsSorting (value: bool) = Interop.mkAttr "allowsSorting" value 122 | static member inline isRowHeader (value: bool) = Interop.mkAttr "isRowHeader" value 123 | static member inline textValue (value: string) = Interop.mkAttr "textValue" value 124 | static member inline width (value: int) = Interop.mkAttr "width" value 125 | static member inline width (value: float) = Interop.mkAttr "width" value 126 | static member inline width (value: string) = Interop.mkAttr "width" value 127 | static member inline minWidth (value: int) = Interop.mkAttr "minWidth" value 128 | static member inline minWidth (value: float) = Interop.mkAttr "minWidth" value 129 | static member inline minWidth (value: string) = Interop.mkAttr "minWidth" value 130 | static member inline maxWidth (value: int) = Interop.mkAttr "maxWidth" value 131 | static member inline maxWidth (value: float) = Interop.mkAttr "maxWidth" value 132 | static member inline maxWidth (value: string) = Interop.mkAttr "maxWidth" value 133 | 134 | [] 135 | type TableBody = 136 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 137 | static member inline items (value: seq<'a>) = Interop.mkAttr "items" value 138 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 139 | static member inline loadingState (value: LoadingState) = Interop.mkAttr "loadingState" value 140 | static member inline onLoadMore (handler: unit -> 'a) = Interop.mkAttr "onLoadMore" handler 141 | 142 | [] 143 | type Row = 144 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 145 | static member inline cellTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 146 | static member inline textValue (value: string) = Interop.mkAttr "textValue" value 147 | 148 | [] 149 | type Cell = 150 | static member inline content (element: ReactElement) = Interop.mkAttr "children" element 151 | static member inline textValue (value: string) = Interop.mkAttr "textValue" value -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Content.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Browser.Types 5 | open Feliz 6 | open Fable.Core 7 | open Fable.Core.JsInterop 8 | open Fable.React 9 | 10 | [] 11 | type Content = 12 | inherit BaseComponent 13 | static member inline children (xs: seq) = prop.children(xs) 14 | 15 | [] 16 | type View = 17 | inherit BaseComponent 18 | static member inline elementType (value: string) = Interop.mkAttr "elementType" value 19 | static member inline children (xs: seq) = prop.children(xs) 20 | 21 | // ----------- Background ----------- 22 | static member inline backgroundColor (value: BackgroundColorValue) = Interop.mkAttr "backgroundColor" value 23 | static member inline backgroundColor (value: ResponsivePropOptions) = Interop.mkAttr "backgroundColor" value 24 | 25 | // ----------- Spacing ----------- 26 | static member inline padding (value: int) = Interop.mkAttr "padding" value 27 | static member inline padding (value: float) = Interop.mkAttr "padding" value 28 | static member inline padding (value: string) = Interop.mkAttr "padding" value 29 | static member inline padding (value: DimValue) = Interop.mkAttr "padding" value 30 | static member inline padding (value: ResponsivePropOptions) = Interop.mkAttr "padding" value 31 | 32 | static member inline paddingTop (value: int) = Interop.mkAttr "paddingTop" value 33 | static member inline paddingTop (value: float) = Interop.mkAttr "paddingTop" value 34 | static member inline paddingTop (value: string) = Interop.mkAttr "paddingTop" value 35 | static member inline paddingTop (value: DimValue) = Interop.mkAttr "paddingTop" value 36 | static member inline paddingTop (value: ResponsivePropOptions) = Interop.mkAttr "paddingTop" value 37 | 38 | static member inline paddingBottom (value: int) = Interop.mkAttr "paddingBottom" value 39 | static member inline paddingBottom (value: float) = Interop.mkAttr "paddingBottom" value 40 | static member inline paddingBottom (value: string) = Interop.mkAttr "paddingBottom" value 41 | static member inline paddingBottom (value: DimValue) = Interop.mkAttr "paddingBottom" value 42 | static member inline paddingBottom (value: ResponsivePropOptions) = Interop.mkAttr "paddingBottom" value 43 | 44 | static member inline paddingStart (value: int) = Interop.mkAttr "paddingStart" value 45 | static member inline paddingStart (value: float) = Interop.mkAttr "paddingStart" value 46 | static member inline paddingStart (value: string) = Interop.mkAttr "paddingStart" value 47 | static member inline paddingStart (value: DimValue) = Interop.mkAttr "paddingStart" value 48 | static member inline paddingStart (value: ResponsivePropOptions) = Interop.mkAttr "paddingStart" value 49 | 50 | static member inline paddingEnd (value: int) = Interop.mkAttr "paddingEnd" value 51 | static member inline paddingEnd (value: float) = Interop.mkAttr "paddingEnd" value 52 | static member inline paddingEnd (value: string) = Interop.mkAttr "paddingEnd" value 53 | static member inline paddingEnd (value: DimValue) = Interop.mkAttr "paddingEnd" value 54 | static member inline paddingEnd (value: ResponsivePropOptions) = Interop.mkAttr "paddingEnd" value 55 | 56 | static member inline paddingX (value: int) = Interop.mkAttr "paddingX" value 57 | static member inline paddingX (value: float) = Interop.mkAttr "paddingX" value 58 | static member inline paddingX (value: string) = Interop.mkAttr "paddingX" value 59 | static member inline paddingX (value: DimValue) = Interop.mkAttr "paddingX" value 60 | static member inline paddingX (value: ResponsivePropOptions) = Interop.mkAttr "paddingX" value 61 | 62 | static member inline paddingY (value: int) = Interop.mkAttr "paddingY" value 63 | static member inline paddingY (value: float) = Interop.mkAttr "paddingY" value 64 | static member inline paddingY (value: string) = Interop.mkAttr "paddingY" value 65 | static member inline paddingY (value: DimValue) = Interop.mkAttr "paddingY" value 66 | static member inline paddingY (value: ResponsivePropOptions) = Interop.mkAttr "paddingY" value 67 | 68 | // ----------- Borders ----------- 69 | static member inline borderWidth (value: BorderSizeValue) = Interop.mkAttr "borderWidth" value 70 | static member inline borderWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderWidth" value 71 | 72 | static member inline borderStartWidth (value: BorderSizeValue) = Interop.mkAttr "borderStartWidth" value 73 | static member inline borderStartWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderStartWidth" value 74 | 75 | static member inline borderEndWidth (value: BorderSizeValue) = Interop.mkAttr "borderEndWidth" value 76 | static member inline borderEndWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderEndWidth" value 77 | 78 | static member inline borderTopWidth (value: BorderSizeValue) = Interop.mkAttr "borderTopWidth" value 79 | static member inline borderTopWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderTopWidth" value 80 | 81 | static member inline borderBottomWidth (value: BorderSizeValue) = Interop.mkAttr "borderBottomWidth" value 82 | static member inline borderBottomWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderBottomWidth" value 83 | 84 | static member inline borderXWidth (value: BorderSizeValue) = Interop.mkAttr "borderXWidth" value 85 | static member inline borderXWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderXWidth" value 86 | 87 | static member inline borderYWidth (value: BorderSizeValue) = Interop.mkAttr "borderYWidth" value 88 | static member inline borderYWidth (value: ResponsivePropOptions) = Interop.mkAttr "borderYWidth" value 89 | 90 | static member inline borderColor (value: BorderColorValue) = Interop.mkAttr "borderColor" value 91 | static member inline borderColor (value: ResponsivePropOptions) = Interop.mkAttr "borderColor" value 92 | 93 | static member inline borderStartColor (value: BorderColorValue) = Interop.mkAttr "borderStartColor" value 94 | static member inline borderStartColor (value: ResponsivePropOptions) = Interop.mkAttr "borderStartColor" value 95 | 96 | static member inline borderEndColor (value: BorderColorValue) = Interop.mkAttr "borderEndColor" value 97 | static member inline borderEndColor (value: ResponsivePropOptions) = Interop.mkAttr "borderEndColor" value 98 | 99 | static member inline borderTopColor (value: BorderColorValue) = Interop.mkAttr "borderTopColor" value 100 | static member inline borderTopColor (value: ResponsivePropOptions) = Interop.mkAttr "borderTopColor" value 101 | 102 | static member inline borderBottomColor (value: BorderColorValue) = Interop.mkAttr "borderBottomColor" value 103 | static member inline borderBottomColor (value: ResponsivePropOptions) = Interop.mkAttr "borderBottomColor" value 104 | 105 | static member inline borderXColor (value: BorderColorValue) = Interop.mkAttr "borderXColor" value 106 | static member inline borderXColor (value: ResponsivePropOptions) = Interop.mkAttr "borderXColor" value 107 | 108 | static member inline borderYColor (value: BorderColorValue) = Interop.mkAttr "borderYColor" value 109 | static member inline borderYColor (value: ResponsivePropOptions) = Interop.mkAttr "borderYColor" value 110 | 111 | static member inline borderRadius (value: BorderRadiusValue) = Interop.mkAttr "borderRadius" value 112 | static member inline borderRadius (value: ResponsivePropOptions) = Interop.mkAttr "borderRadius" value 113 | 114 | static member inline borderTopStartRadius (value: BorderRadiusValue) = Interop.mkAttr "borderTopStartRadius" value 115 | static member inline borderTopStartRadius (value: ResponsivePropOptions) = Interop.mkAttr "borderTopStartRadius" value 116 | 117 | static member inline borderTopEndRadius (value: BorderRadiusValue) = Interop.mkAttr "borderTopEndRadius" value 118 | static member inline borderTopEndRadius (value: ResponsivePropOptions) = Interop.mkAttr "borderTopEndRadius" value 119 | 120 | static member inline borderBottomStartRadius (value: BorderRadiusValue) = Interop.mkAttr "borderBottomStartRadius" value 121 | static member inline borderBottomStartRadius (value: ResponsivePropOptions) = Interop.mkAttr "borderBottomStartRadius" value 122 | 123 | static member inline borderBottomEndRadius (value: BorderRadiusValue) = Interop.mkAttr "borderBottomEndRadius" value 124 | static member inline borderBottomEndRadius (value: ResponsivePropOptions) = Interop.mkAttr "borderBottomEndRadius" value 125 | 126 | [] 127 | type Divider = 128 | inherit BaseComponent 129 | static member inline size (value: DividerSize) = Interop.mkAttr "size" value 130 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 131 | 132 | [] 133 | type Header = 134 | inherit BaseComponent 135 | static member inline content (value: string) = Interop.mkAttr "children" value 136 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 137 | static member inline children (xs: seq) = prop.children(xs) 138 | 139 | [] 140 | type Footer = 141 | inherit BaseComponent 142 | static member inline content (value: string) = Interop.mkAttr "children" value 143 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 144 | static member inline children (xs: seq) = prop.children(xs) 145 | 146 | [] 147 | type Heading = 148 | inherit BaseComponent 149 | static member inline content (value: string) = Interop.mkAttr "children" value 150 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 151 | static member inline children (xs: seq) = prop.children(xs) 152 | static member inline level (value: int) = Interop.mkAttr "level" value 153 | 154 | [] 155 | type Image = 156 | inherit BaseComponent 157 | static member inline src (value: string) = Interop.mkAttr "src" value 158 | static member inline alt (value: string) = Interop.mkAttr "alt" value 159 | static member inline objectFit (value: ImageObjectFit) = Interop.mkAttr "objectFit" value 160 | 161 | [] 162 | type IllustratedMessage = 163 | inherit BaseComponent 164 | static member inline children (xs: seq) = prop.children(xs) 165 | 166 | [] 167 | type Well = 168 | inherit BaseComponent 169 | static member inline children (xs: seq) = prop.children(xs) 170 | static member inline content (value: string) = Interop.mkAttr "children" value 171 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Feliz.ReactSpectrum.fsproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | Feliz.ReactSpectrum 7 | https://github.com/geodanila/Feliz.ReactSpectrum 8 | https://github.com/geodanila/Feliz.ReactSpectrum 9 | https://github.com/geodanila/Feliz.ReactSpectrum/blob/main/LICENSE 10 | https://github.com/geodanila/Feliz.ReactSpectrum/blob/main/RELEASE_NOTES.md 11 | 12 | fsharp;fable;spectrum;feliz;react;html 13 | Feliz-style Fable bindings for Adobe's React Spectrum components. 14 | George Danila 15 | 0.2.0 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Forms.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.React 7 | 8 | [] 9 | type FormControl = 10 | inherit BaseControl 11 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 12 | static member inline isReadOnly (value: bool) = Interop.mkAttr "isReadOnly" value 13 | static member inline isRequired (value: bool) = Interop.mkAttr "isRequired" value 14 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 15 | static member inline value (value: string) = Interop.mkAttr "value" value 16 | static member inline defaultValue (value: string) = Interop.mkAttr "defaultValue" value 17 | static member inline validationState (value: ValidationState) = Interop.mkAttr "validationState" value 18 | static member inline validationState (value: bool) = 19 | match value with 20 | | true -> Interop.mkAttr "validationState" ValidationState.Valid 21 | | false -> Interop.mkAttr "validationState" ValidationState.Invalid 22 | static member inline onKeyDown (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyDown" handler 23 | static member inline onKeyUp (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyUp" handler 24 | static member inline name (value: string) = Interop.mkAttr "name" value 25 | 26 | [] 27 | type Checkbox = 28 | inherit FormControl 29 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 30 | static member inline isIndeterminate (value: bool) = Interop.mkAttr "isIndeterminate" value 31 | static member inline content (value: string) = prop.children([ Html.text value ]) 32 | static member inline content (value: ReactElement) = prop.children([ value ]) 33 | static member inline defaultSelected (value: bool) = Interop.mkAttr "defaultSelected" value 34 | static member inline isSelected (value: bool) = Interop.mkAttr "isSelected" value 35 | static member inline onChange (handler: bool -> unit) = Interop.mkAttr "onChange" handler 36 | 37 | [] 38 | type CheckboxGroup = 39 | inherit BaseComponent 40 | static member inline children (xs: seq) = prop.children(xs) 41 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 42 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 43 | static member inline name (value: string) = Interop.mkAttr "name" value 44 | static member inline value (value: seq) = Interop.mkAttr "value" (value |> Array.ofSeq) 45 | static member inline defaultValue (value: seq) = Interop.mkAttr "defaultValue" (value |> Array.ofSeq) 46 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 47 | static member inline isReadOnly (value: bool) = Interop.mkAttr "isReadOnly" value 48 | static member inline label (element: ReactElement) = Interop.mkAttr "label" element 49 | static member inline label (element: string) = Interop.mkAttr "label" element 50 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 51 | static member inline labelAlign (value: Alignment) = Interop.mkAttr "labelAlign" value 52 | static member inline necessityIndicator (value: NecessityIndicator) = Interop.mkAttr "necessityIndicator" value 53 | static member inline isRequired (value: bool) = Interop.mkAttr "isRequired" value 54 | static member inline validationState (value: ValidationState) = Interop.mkAttr "validationState" value 55 | static member inline validationState (value: bool) = 56 | match value with 57 | | true -> Interop.mkAttr "validationState" ValidationState.Valid 58 | | false -> Interop.mkAttr "validationState" ValidationState.Invalid 59 | static member inline onChange (handler: seq<'a> -> unit) = Interop.mkAttr "onChange" handler 60 | 61 | [] 62 | type TextFormControl = 63 | inherit FormControl 64 | static member inline icon (element: ReactElement) = Interop.mkAttr "icon" element 65 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 66 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 67 | static member inline description (value: string) = Interop.mkAttr "description" value 68 | static member inline description (element: ReactElement) = Interop.mkAttr "description" element 69 | static member inline errorMessage (value: string) = Interop.mkAttr "errorMessage" value 70 | static member inline errorMessage (element: ReactElement) = Interop.mkAttr "errorMessage" element 71 | static member inline placeholder (value: string) = Interop.mkAttr "placeholder" value 72 | static member inline defaultValue (value: string) = Interop.mkAttr "defaultValue" value 73 | static member inline label (value: string) = Interop.mkAttr "label" value 74 | static member inline autoComplete (value: string) = Interop.mkAttr "autoComplete" value 75 | static member inline maxLength (value: int) = Interop.mkAttr "maxLength" value 76 | static member inline minLength (value: int) = Interop.mkAttr "minLength" value 77 | static member inline pattern (value: string) = Interop.mkAttr "pattern" value 78 | static member inline type' (value: TextFieldType) = Interop.mkAttr "type" value 79 | static member inline type' (value: string) = Interop.mkAttr "type" value 80 | static member inline inputMode (value: TextInputMode) = Interop.mkAttr "inputMode" value 81 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 82 | static member inline labelAlign (value: Alignment) = Interop.mkAttr "labelAlign" value 83 | static member inline necessityIndicator (value: NecessityIndicator) = Interop.mkAttr "necessityIndicator" value 84 | 85 | // ----------- Events ----------- 86 | static member inline onCopy (handler: SpectrumClipboardEvent -> unit) = Interop.mkAttr "onCopy" handler 87 | static member inline onCut (handler: SpectrumClipboardEvent -> unit) = Interop.mkAttr "onCut" handler 88 | static member inline onPaste (handler: SpectrumClipboardEvent -> unit) = Interop.mkAttr "onPaste" handler 89 | static member inline onCompositionStart (handler: SpectrumCompositionEvent -> unit) = Interop.mkAttr "onCompositionStart" handler 90 | static member inline onCompositionEnd (handler: SpectrumCompositionEvent -> unit) = Interop.mkAttr "onCompositionEnd" handler 91 | static member inline onCompositionUpdate (handler: SpectrumCompositionEvent -> unit) = Interop.mkAttr "onCompositionUpdate" handler 92 | static member inline onSelect (handler: SpectrumEvent -> unit) = Interop.mkAttr "onSelect" handler 93 | static member inline onBeforeInput (handler: SpectrumInputEvent -> unit) = Interop.mkAttr "onBeforeInput" handler 94 | static member inline onInput (handler: SpectrumInputEvent -> unit) = Interop.mkAttr "onInput" handler 95 | static member inline onChange (handler: 'a -> unit) = Interop.mkAttr "onChange" handler 96 | 97 | [] 98 | type TextField = 99 | class 100 | inherit TextFormControl 101 | end 102 | 103 | 104 | [] 105 | type TextArea = 106 | class 107 | inherit TextFormControl 108 | end 109 | 110 | [] 111 | type Switch = 112 | inherit FormControl 113 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 114 | static member inline content (value: string) = Interop.mkAttr "children" value 115 | static member inline content (element: ReactElement) = Interop.mkAttr "children" element 116 | static member inline defaultSelected (value: bool) = Interop.mkAttr "defaultSelected" value 117 | static member inline isSelected (value: bool) = Interop.mkAttr "isSelected" value 118 | static member inline onChange (handler: bool -> unit) = Interop.mkAttr "onChange" handler 119 | 120 | [] 121 | type SearchField = 122 | inherit TextFormControl 123 | static member inline onSubmit (handler: string -> unit) = Interop.mkAttr "onSubmit" handler 124 | static member inline onClear (handler: unit -> unit) = Interop.mkAttr "onClear" handler 125 | 126 | [] 127 | type NumberField = 128 | inherit TextFormControl 129 | static member inline hideStepper (value: bool) = Interop.mkAttr "hideStepper" value 130 | static member inline decrementAriaLabel (value: string) = Interop.mkAttr "decrementAriaLabel" value 131 | static member inline incrementAriaLabel (value: string) = Interop.mkAttr "incrementAriaLabel" value 132 | static member inline formatOptions (value: NumberFormatOptions) = Interop.mkAttr "formatOptions" value 133 | static member inline minValue (value: int) = Interop.mkAttr "minValue" value 134 | static member inline minValue (value: float) = Interop.mkAttr "minValue" value 135 | static member inline maxValue (value: int) = Interop.mkAttr "maxValue" value 136 | static member inline maxValue (value: float) = Interop.mkAttr "maxValue" value 137 | static member inline defaultValue (value: int) = Interop.mkAttr "defaultValue" value 138 | static member inline defaultValue (value: float) = Interop.mkAttr "defaultValue" value 139 | static member inline value (value: int) = Interop.mkAttr "value" value 140 | static member inline value (value: float) = Interop.mkAttr "value" value 141 | static member inline step (value: int) = Interop.mkAttr "step" value 142 | static member inline step (value: float) = Interop.mkAttr "step" value 143 | static member inline onChange (handler: 'a -> unit) = Interop.mkAttr "onChange" handler 144 | 145 | [] 146 | type Radio = 147 | inherit BaseControl 148 | static member inline value (value: string) = Interop.mkAttr "value" value 149 | static member inline content (value: string) = Interop.mkAttr "children" value 150 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 151 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 152 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 153 | static member inline onKeyDown (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyDown" handler 154 | static member inline onKeyUp (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyUp" handler 155 | 156 | [] 157 | type RadioGroup = 158 | inherit FormControl 159 | static member inline children (xs: seq) = prop.children(xs) 160 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 161 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 162 | static member inline label (element: ReactElement) = Interop.mkAttr "label" element 163 | static member inline label (element: string) = Interop.mkAttr "label" element 164 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 165 | static member inline labelAlign (value: Alignment) = Interop.mkAttr "labelAlign" value 166 | static member inline necessityIndicator (value: NecessityIndicator) = Interop.mkAttr "necessityIndicator" value 167 | static member inline onChange (handler: string -> unit) = Interop.mkAttr "onChange" handler 168 | 169 | [] 170 | type Form = 171 | inherit BaseControl 172 | static member inline children (xs: seq) = prop.children(xs) 173 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 174 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 175 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 176 | static member inline isRequired (value: bool) = Interop.mkAttr "isRequired" value 177 | static member inline isReadOnly (value: bool) = Interop.mkAttr "isReadOnly" value 178 | static member inline validationState (value: ValidationState) = Interop.mkAttr "validationState" value 179 | static member inline validationState (value: bool) = 180 | match value with 181 | | true -> Interop.mkAttr "validationState" ValidationState.Valid 182 | | false -> Interop.mkAttr "validationState" ValidationState.Invalid 183 | static member inline action (value: string) = Interop.mkAttr "action" value 184 | static member inline encType (value: FormEncodingType) = Interop.mkAttr "encType" value 185 | static member inline method (value: FormMethod) = Interop.mkAttr "method" value 186 | static member inline target (value: FormTarget) = Interop.mkAttr "target" value 187 | static member inline label (element: ReactElement) = Interop.mkAttr "label" element 188 | static member inline label (element: string) = Interop.mkAttr "label" element 189 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 190 | static member inline labelAlign (value: Alignment) = Interop.mkAttr "labelAlign" value 191 | static member inline necessityIndicator (value: NecessityIndicator) = Interop.mkAttr "necessityIndicator" value -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Icon.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz 4 | open Fable.Core 5 | open Fable.Core.JsInterop 6 | open Fable.React 7 | 8 | [] 9 | type Icon = 10 | static member inline size (value: IconSize) = Interop.mkAttr "size" value 11 | static member inline color (value: SemanticColor) = Interop.mkAttr "color" value -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Layout.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz 4 | open Fable.Core 5 | open Fable.React 6 | 7 | [] 8 | type Flex = 9 | inherit BaseComponent 10 | static member inline children (elements: seq) = prop.children(elements) 11 | 12 | static member inline direction (value: FlexDirection) = Interop.mkAttr "direction" value 13 | static member inline direction (value: ResponsivePropOptions) = Interop.mkAttr "direction" value 14 | 15 | static member inline wrap (value: bool) = Interop.mkAttr "wrap" value 16 | static member inline wrap (value: FlexWrap) = Interop.mkAttr "wrap" value 17 | static member inline wrap (value: ResponsivePropOptions) = Interop.mkAttr "wrap" value 18 | 19 | static member inline justifyContent (value: FlexJustifyContent) = Interop.mkAttr "justifyContent" value 20 | static member inline justifyContent (value: ResponsivePropOptions) = Interop.mkAttr "justifyContent" value 21 | 22 | static member inline alignContent (value: FlexAlignContent) = Interop.mkAttr "alignContent" value 23 | static member inline alignContent (value: ResponsivePropOptions) = Interop.mkAttr "alignContent" value 24 | 25 | static member inline alignItems (value: FlexAlignItems) = Interop.mkAttr "alignItems" value 26 | static member inline alignItems (value: ResponsivePropOptions) = Interop.mkAttr "alignItems" value 27 | 28 | static member inline gap (value: DimValue) = Interop.mkAttr "gap" value 29 | static member inline gap (value: ResponsivePropOptions) = Interop.mkAttr "gap" value 30 | 31 | static member inline columnGap (value: DimValue) = Interop.mkAttr "columnGap" value 32 | static member inline columnGap (value: ResponsivePropOptions) = Interop.mkAttr "columnGap" value 33 | 34 | static member inline rowGap (value: DimValue) = Interop.mkAttr "rowGap" value 35 | static member inline rowGap (value: ResponsivePropOptions) = Interop.mkAttr "rowGap" value 36 | 37 | [] 38 | type Grid = 39 | inherit BaseComponent 40 | 41 | static member inline children (elements: seq) = prop.children(elements) 42 | 43 | static member inline areas (value: string list) = Interop.mkAttr "areas" (value |> Array.ofList) 44 | static member inline areas (value: ResponsivePropOptions) = Interop.mkAttr "areas" (value |> ResponsiveProp.map Array.ofList) 45 | 46 | static member inline rows (value: string) = Interop.mkAttr "rows" value 47 | static member inline rows (value: string list) = Interop.mkAttr "rows" (value |> Array.ofList) 48 | static member inline rows (value: DimValue list) = Interop.mkAttr "rows" (value |> Array.ofList) 49 | static member inline rows (value: ResponsivePropOptions) = Interop.mkAttr "rows" value 50 | static member inline rows (value: ResponsivePropOptions) = Interop.mkAttr "rows" (value |> ResponsiveProp.map Array.ofList) 51 | static member inline rows (value: ResponsivePropOptions) = Interop.mkAttr "rows" (value |> ResponsiveProp.map Array.ofList) 52 | 53 | static member inline columns (value: string) = Interop.mkAttr "columns" value 54 | static member inline columns (value: string list) = Interop.mkAttr "columns" (value |> Array.ofList) 55 | static member inline columns (value: DimValue list) = Interop.mkAttr "columns" (value |> Array.ofList) 56 | static member inline columns (value: ResponsivePropOptions) = Interop.mkAttr "columns" value 57 | static member inline columns (value: ResponsivePropOptions) = Interop.mkAttr "columns" (value |> ResponsiveProp.map Array.ofList) 58 | static member inline columns (value: ResponsivePropOptions) = Interop.mkAttr "columns" (value |> ResponsiveProp.map Array.ofList) 59 | 60 | static member inline autoRows (value: DimValue) = Interop.mkAttr "autoRows" value 61 | static member inline autoRows (value: ResponsivePropOptions) = Interop.mkAttr "autoRows" value 62 | 63 | static member inline autoColumns (value: DimValue) = Interop.mkAttr "autoColumns" value 64 | static member inline autoColumns (value: ResponsivePropOptions) = Interop.mkAttr "autoColumns" value 65 | 66 | static member inline autoFlow (value: GridAutoFlow) = Interop.mkAttr "autoFlow" value 67 | static member inline autoFlow (value: ResponsivePropOptions) = Interop.mkAttr "autoFlow" value 68 | 69 | static member inline justifyItems (value: GridJustifyItems) = Interop.mkAttr "justifyItems" value 70 | static member inline justifyItems (value: ResponsivePropOptions) = Interop.mkAttr "justifyItems" value 71 | 72 | static member inline justifyContent (value: GridJustifyContent) = Interop.mkAttr "justifyContent" value 73 | static member inline justifyContent (value: ResponsivePropOptions) = Interop.mkAttr "justifyContent" value 74 | 75 | static member inline alignContent (value: GridAlignContent) = Interop.mkAttr "alignContent" value 76 | static member inline alignContent (value: ResponsivePropOptions) = Interop.mkAttr "alignContent" value 77 | 78 | static member inline alignItems (value: GridAlignItems) = Interop.mkAttr "alignItems" value 79 | static member inline alignItems (value: ResponsivePropOptions) = Interop.mkAttr "alignItems" value 80 | 81 | static member inline gap (value: DimValue) = Interop.mkAttr "gap" value 82 | static member inline gap (value: ResponsivePropOptions) = Interop.mkAttr "gap" value 83 | 84 | static member inline columnGap (value: DimValue) = Interop.mkAttr "columnGap" value 85 | static member inline columnGap (value: ResponsivePropOptions) = Interop.mkAttr "columnGap" value 86 | 87 | static member inline rowGap (value: DimValue) = Interop.mkAttr "rowGap" value 88 | static member inline rowGap (value: ResponsivePropOptions) = Interop.mkAttr "rowGap" value -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Navigation.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Feliz 5 | open Fable.Core 6 | open Fable.React 7 | 8 | [] 9 | type Breadcrumbs = 10 | inherit BaseControl 11 | static member inline children (xs: seq) = Interop.mkAttr "children" xs 12 | static member inline size (value: BreadcrumbsSize) = Interop.mkAttr "size" value 13 | static member inline showRoot (value: bool) = Interop.mkAttr "showRoot" value 14 | static member inline isMultiline (value: bool) = Interop.mkAttr "isMultiline" value 15 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 16 | static member inline onAction (handler: 'a -> unit) = Interop.mkAttr "onAction" handler 17 | 18 | [] 19 | type Link = 20 | inherit BaseControl 21 | static member inline content (value: string) = Interop.mkAttr "children" value 22 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 23 | static member inline variant (value: LinkVariant) = Interop.mkAttr "variant" value 24 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 25 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 26 | 27 | static member inline onKeyDown (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyDown" handler 28 | static member inline onKeyUp (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyUp" handler 29 | 30 | static member inline onPress (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPress" handler 31 | static member inline onPressStart (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPressStart" handler 32 | static member inline onPressEnd (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPressEnd" handler 33 | static member inline onPressChange (handler: bool -> unit) = Interop.mkAttr "onPressChange" handler 34 | static member inline onPressUp (handler: SpectrumPressEvent -> unit) = Interop.mkAttr "onPressUp" handler 35 | 36 | [] 37 | type Tabs = 38 | inherit BaseControl 39 | static member inline children (xs: seq) = prop.children(xs) 40 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 41 | static member inline disabledKeys (value: seq<'a>) = Interop.mkAttr "disabledKeys" value 42 | static member inline disallowEmptySelection (value: bool) = Interop.mkAttr "disallowEmptySelection" value 43 | static member inline selectedKey (value: 'a) = Interop.mkAttr "selectedKey" value 44 | static member inline defaultSelectedKey (value: 'a) = Interop.mkAttr "defaultSelectedKey" value 45 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 46 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 47 | static member inline density (value: Density) = Interop.mkAttr "density" value 48 | static member inline onSelectionChange (handler: 'a -> unit) = Interop.mkAttr "onSelectionChange" handler 49 | 50 | [] 51 | type TabList = 52 | inherit BaseComponent 53 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 54 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 55 | 56 | [] 57 | type TabPanels = 58 | inherit BaseComponent 59 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 60 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Overlays.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Browser.Types 5 | open Feliz 6 | open Fable.Core 7 | open Fable.React 8 | 9 | [] 10 | type AlertDialog = 11 | inherit BaseComponent 12 | static member inline content (value: string) = Interop.mkAttr "children" value 13 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 14 | static member inline children (xs: seq) = prop.children(xs) 15 | static member inline title (value: string) = Interop.mkAttr "title" value 16 | static member inline primaryActionLabel (value: string) = Interop.mkAttr "primaryActionLabel" value 17 | static member inline variant (value: AlertDialogVariant) = Interop.mkAttr "variant" value 18 | static member inline cancelLabel (value: string) = Interop.mkAttr "cancelLabel" value 19 | static member inline secondaryActionLabel (value: string) = Interop.mkAttr "secondaryActionLabel" value 20 | static member inline isPrimaryActionDisabled (value: bool) = Interop.mkAttr "isPrimaryActionDisabled" value 21 | static member inline isSecondaryActionDisabled (value: bool) = Interop.mkAttr "isSecondaryActionDisabled" value 22 | static member inline autoFocusButton (value: AutoFocusButton) = Interop.mkAttr "autoFocusButton" value 23 | static member inline onCancel (handler: unit -> unit) = Interop.mkAttr "onCancel" handler 24 | static member inline onPrimaryAction (handler: unit -> unit) = Interop.mkAttr "onPrimaryAction" handler 25 | static member inline onSecondaryAction (handler: unit -> unit) = Interop.mkAttr "onSecondaryAction" handler 26 | 27 | [] 28 | type Dialog = 29 | inherit BaseComponent 30 | static member inline children (xs: seq) = prop.children(xs) 31 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 32 | static member inline size (value: DialogSize) = Interop.mkAttr "size" value 33 | static member inline isDismissable (value: bool) = Interop.mkAttr "isDismissable" value 34 | static member inline onDismiss (handler: unit -> unit) = Interop.mkAttr "onDismiss" handler 35 | 36 | [] 37 | type DialogContainer = 38 | static member inline children (xs: seq) = prop.children(xs) 39 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 40 | static member inline type' (value: DialogContainerType) = Interop.mkAttr "type" value 41 | static member inline isDimissable (value: bool) = Interop.mkAttr "isDismissable" value 42 | static member inline isKeyboardDismissDisabled (value: bool) = Interop.mkAttr "isKeyboardDismissDisabled" value 43 | static member inline onDismiss (handler: unit -> unit) = Interop.mkAttr "onDismiss" handler 44 | 45 | [] 46 | type DialogTrigger = 47 | static member inline children (xs: seq) = prop.children(xs) 48 | static member inline type' (value: DialogTriggerType) = Interop.mkAttr "type" value 49 | static member inline mobileType' (value: MobileDialogTriggerType) = Interop.mkAttr "type" value 50 | static member inline hideArrow (value: bool) = Interop.mkAttr "hideArrow" value 51 | static member inline targetRef (value: IRefValue) = Interop.mkAttr "targetRef" value 52 | static member inline isDismissable (value: bool) = Interop.mkAttr "isDismissable" value 53 | static member inline isKeyboardDismissDisabled (value: bool) = Interop.mkAttr "isKeyboardDismissDisabled" value 54 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 55 | static member inline defaultOpen (value: bool) = Interop.mkAttr "defaultOpen" value 56 | static member inline placement (value: Placement) = Interop.mkAttr "placement" value 57 | static member inline containerPadding (value: int) = Interop.mkAttr "containerPadding" value 58 | static member inline containerPadding (value: float) = Interop.mkAttr "containerPadding" value 59 | static member inline offset (value: int) = Interop.mkAttr "offset" value 60 | static member inline offset (value: float) = Interop.mkAttr "offset" value 61 | static member inline crossOffset (value: int) = Interop.mkAttr "crossOffset" value 62 | static member inline crossOffset (value: float) = Interop.mkAttr "crossOffset" value 63 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 64 | static member inline onOpenChange (handler: bool -> unit) = Interop.mkAttr "onOpenChange" handler 65 | 66 | [] 67 | type Tooltip = 68 | static member inline children (xs: seq) = prop.children(xs) 69 | static member inline content (value: string) = Interop.mkAttr "children" value 70 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 71 | static member inline variant (value: TooltipVariant) = Interop.mkAttr "variant" value 72 | static member inline placement (value: TooltipPlacement) = Interop.mkAttr "placement" value 73 | static member inline showIcon (value: bool) = Interop.mkAttr "showIcon" value 74 | 75 | [] 76 | type ContextualHelp = 77 | inherit BaseComponent 78 | static member inline children (xs: seq) = prop.children(xs) 79 | static member inline variant (value: ContextualHelpVariant) = Interop.mkAttr "variant" value 80 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 81 | static member inline defaultOpen (value: bool) = Interop.mkAttr "defaultOpen" value 82 | static member inline placement (value: Placement) = Interop.mkAttr "placement" value 83 | static member inline containerPadding (value: int) = Interop.mkAttr "containerPadding" value 84 | static member inline containerPadding (value: float) = Interop.mkAttr "containerPadding" value 85 | static member inline offset (value: int) = Interop.mkAttr "offset" value 86 | static member inline offset (value: float) = Interop.mkAttr "offset" value 87 | static member inline crossOffset (value: int) = Interop.mkAttr "crossOffset" value 88 | static member inline crossOffset (value: float) = Interop.mkAttr "crossOffset" value 89 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 90 | static member inline onOpenChange (handler: bool -> unit) = Interop.mkAttr "onOpenChange" handler 91 | 92 | [] 93 | type TooltipTrigger = 94 | static member inline children (xs: seq) = prop.children(xs) 95 | static member inline offset (value: int) = Interop.mkAttr "offset" value 96 | static member inline offset (value: float) = Interop.mkAttr "offset" value 97 | static member inline crossOffset (value: int) = Interop.mkAttr "crossOffset" value 98 | static member inline crossOffset (value: float) = Interop.mkAttr "crossOffset" value 99 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 100 | static member inline delay (value: int) = Interop.mkAttr "delay" value 101 | static member inline delay (value: float) = Interop.mkAttr "delay" value 102 | static member inline triggerOnFocus = Interop.mkAttr "trigger" "focus" 103 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 104 | static member inline defaultOpen (value: bool) = Interop.mkAttr "defaultOpen" value 105 | static member inline placement (value: TooltipPlacement) = Interop.mkAttr "placement" value 106 | static member inline containerPadding (value: int) = Interop.mkAttr "containerPadding" value 107 | static member inline containerPadding (value: float) = Interop.mkAttr "containerPadding" value 108 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 109 | static member inline onOpenChange (handler: bool -> unit) = Interop.mkAttr "onOpenChange" handler -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Pickers.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Browser.Types 5 | open Feliz 6 | open Fable.Core 7 | open Fable.React 8 | 9 | [] 10 | type Picker = 11 | inherit BaseControl 12 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 13 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 14 | static member inline align (value: Alignment) = Interop.mkAttr "align" value 15 | static member inline direction (value: PickerMenuDirection) = Interop.mkAttr "direction" value 16 | static member inline menuWidth (value: int) = Interop.mkAttr "menuWidth" value 17 | static member inline menuWidth (value: float) = Interop.mkAttr "menuWidth" value 18 | static member inline menuWidth (value: DimValue) = Interop.mkAttr "menuWidth" value 19 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 20 | static member inline autoComplete (value: string) = Interop.mkAttr "autoComplete" value 21 | static member inline name (value: string) = Interop.mkAttr "name" value 22 | static member inline isOpen (value: bool) = Interop.mkAttr "isOpen" value 23 | static member inline defaultOpen (value: bool) = Interop.mkAttr "defaultOpen" value 24 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 25 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 26 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 27 | static member inline disabledKeys (xs: seq<'a>) = Interop.mkAttr "disabledKeys" (xs |> Array.ofSeq) 28 | static member inline isLoading (value: bool) = Interop.mkAttr "isLoading" value 29 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 30 | static member inline validationState (value: ValidationState) = Interop.mkAttr "validationState" value 31 | static member inline validationState (value: bool) = 32 | match value with 33 | | true -> Interop.mkAttr "validationState" ValidationState.Valid 34 | | false -> Interop.mkAttr "validationState" ValidationState.Invalid 35 | static member inline isRequired (value: bool) = Interop.mkAttr "isRequired" value 36 | static member inline label (element: ReactElement) = Interop.mkAttr "label" element 37 | static member inline label (element: string) = Interop.mkAttr "label" element 38 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 39 | static member inline labelAlign (value: Alignment) = Interop.mkAttr "labelAlign" value 40 | static member inline description (value: string) = Interop.mkAttr "description" value 41 | static member inline description (element: ReactElement) = Interop.mkAttr "description" element 42 | static member inline errorMessage (value: string) = Interop.mkAttr "errorMessage" value 43 | static member inline errorMessage (element: ReactElement) = Interop.mkAttr "errorMessage" element 44 | static member inline necessityIndicator (value: NecessityIndicator) = Interop.mkAttr "necessityIndicator" value 45 | static member inline placeholder (value: string) = Interop.mkAttr "placeholder" value 46 | static member inline selectedKey (value: 'a) = Interop.mkAttr "selectedKey" value 47 | static member inline defaultSelectedKey (value: 'a) = Interop.mkAttr "defaultSelectedKey" value 48 | 49 | static member inline onOpenChange (handler: bool -> unit) = Interop.mkAttr "onOpenChange" handler 50 | static member inline onLoadMore (handler: unit -> 'a) = Interop.mkAttr "onLoadMore" handler 51 | static member inline onSelectionChange (handler: 'a -> 'b) = Interop.mkAttr "onSelectionChange" handler 52 | static member inline onKeyDown (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyDown" handler 53 | static member inline onKeyUp (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyUp" handler 54 | 55 | [] 56 | type ComboBox = 57 | inherit BaseControl 58 | static member inline children (xs: seq) = Interop.mkAttr "children" (xs |> Array.ofSeq) 59 | static member inline menuTrigger (value: MenuTriggerAction) = Interop.mkAttr "menuTrigger" value 60 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 61 | static member inline direction (value: PickerMenuDirection) = Interop.mkAttr "direction" value 62 | static member inline loadingState (value: LoadingState) = Interop.mkAttr "loadingState" value 63 | static member inline shouldFlip (value: bool) = Interop.mkAttr "shouldFlip" value 64 | static member inline shouldFocusWrap (value: bool) = Interop.mkAttr "shouldFocusWrap" value 65 | static member inline defaultItems (xs: seq<'a>) = Interop.mkAttr "defaultItems" (xs |> Array.ofSeq) 66 | static member inline items (xs: seq<'a>) = Interop.mkAttr "items" (xs |> Array.ofSeq) 67 | static member inline itemTemplate (template: 'a -> ReactElement) = Interop.mkAttr "children" template 68 | static member inline inputValue (value: string) = Interop.mkAttr "inputValue" value 69 | static member inline defaultInputValue (value: string) = Interop.mkAttr "defaultInputValue" value 70 | static member inline allowsCustomValue (value: bool) = Interop.mkAttr "allowsCustomValue" value 71 | static member inline disabledKeys (xs: seq<'a>) = Interop.mkAttr "disabledKeys" (xs |> Array.ofSeq) 72 | static member inline selectedKey (value: 'a) = Interop.mkAttr "selectedKey" value 73 | static member inline defaultSelectedKey (value: 'a) = Interop.mkAttr "defaultSelectedKey" value 74 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 75 | static member inline isReadOnly (value: bool) = Interop.mkAttr "isReadOnly" value 76 | static member inline placeholder (value: string) = Interop.mkAttr "placeholder" value 77 | static member inline validationState (value: ValidationState) = Interop.mkAttr "validationState" value 78 | static member inline validationState (value: bool) = 79 | match value with 80 | | true -> Interop.mkAttr "validationState" ValidationState.Valid 81 | | false -> Interop.mkAttr "validationState" ValidationState.Invalid 82 | static member inline autoFocus (value: bool) = Interop.mkAttr "autoFocus" value 83 | static member inline isRequired (value: bool) = Interop.mkAttr "isRequired" value 84 | static member inline label (element: ReactElement) = Interop.mkAttr "label" element 85 | static member inline label (element: string) = Interop.mkAttr "label" element 86 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 87 | static member inline labelAlign (value: Alignment) = Interop.mkAttr "labelAlign" value 88 | static member inline description (value: string) = Interop.mkAttr "description" value 89 | static member inline description (element: ReactElement) = Interop.mkAttr "description" element 90 | static member inline errorMessage (value: string) = Interop.mkAttr "errorMessage" value 91 | static member inline errorMessage (element: ReactElement) = Interop.mkAttr "errorMessage" element 92 | static member inline necessityIndicator (value: NecessityIndicator) = Interop.mkAttr "necessityIndicator" value 93 | 94 | static member inline onOpenChange (handler: bool -> MenuTriggerAction -> unit) = Interop.mkAttr "onOpenChange" handler 95 | static member inline onInputChange (handler: string -> unit) = Interop.mkAttr "onInputChange" handler 96 | static member inline onSelectionChange (handler: 'a -> 'b) = Interop.mkAttr "onSelectionChange" handler 97 | static member inline onKeyDown (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyDown" handler 98 | static member inline onKeyUp (handler: SpectrumKeyboardEvent -> unit) = Interop.mkAttr "onKeyUp" handler 99 | static member inline onLoadMore (handler: unit -> 'a) = Interop.mkAttr "onLoadMore" handler -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Provider.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz 4 | open Fable.Core 5 | open Fable.Core.JsInterop 6 | open Fable.React 7 | open Feliz.ReactSpectrum 8 | 9 | [] 10 | type Provider = 11 | inherit BaseComponent 12 | static member inline defaultTheme = 13 | let theme = import "defaultTheme" "@adobe/react-spectrum" 14 | Interop.mkAttr "theme" theme 15 | 16 | static member inline theme value = Interop.mkAttr "theme" value 17 | static member inline colorScheme (value: ColorScheme) = Interop.mkAttr "colorScheme" value 18 | static member inline defaultColorScheme (value: ColorScheme) = Interop.mkAttr "defaultColorScheme" value 19 | static member inline children (elements: seq) = prop.children(elements) 20 | static member inline isEmphasized (value: bool) = Interop.mkAttr "isEmphasized" value 21 | static member inline isQuiet (value: bool) = Interop.mkAttr "isQuiet" value 22 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 23 | static member inline isRequired (value: bool) = Interop.mkAttr "isRequired" value 24 | static member inline isReadOnly (value: bool) = Interop.mkAttr "isReadOnly" value 25 | static member inline validateState (value: ValidationState) = Interop.mkAttr "validationState" value 26 | static member inline locale (value: string) = Interop.mkAttr "locale" value 27 | static member inline scale (value: Scale) = Interop.mkAttr "scale" value 28 | static member inline breakpoints (?S: int, ?M: int, ?L: int) = Interop.mkAttr "breakpoints" {| S = S; M = M; L = L |} -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Sliders.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Browser.Types 5 | open Feliz 6 | open Fable.Core 7 | open Fable.React 8 | 9 | [] 10 | type RangeSlider = 11 | inherit BaseComponent 12 | static member inline formatOptions (value: NumberFormatOptions) = Interop.mkAttr "formatOptions" value 13 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 14 | static member inline showValueLabel (value: bool) = Interop.mkAttr "showValueLabel" value 15 | static member inline getValueLabel (handler: {| start: 'a; ``end``: 'a |} -> string) = Interop.mkAttr "getValueLabel" handler 16 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 17 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 18 | static member inline minValue (value: 'a) = Interop.mkAttr "minValue" value 19 | static member inline maxValue (value: 'a) = Interop.mkAttr "maxValue" value 20 | static member inline step (value: 'a) = Interop.mkAttr "step" value 21 | static member inline value (value: {| start: 'a; ``end``: 'a |}) = Interop.mkAttr "value" value 22 | static member inline defaultValue (value: {| start: 'a; ``end``: 'a |}) = Interop.mkAttr "defaultValue" value 23 | static member inline label (value: string) = Interop.mkAttr "label" value 24 | static member inline label (value: ReactElement) = Interop.mkAttr "label" value 25 | 26 | static member inline onChange (handler: {| start: 'a; ``end``: 'a |} -> unit) = Interop.mkAttr "onChange" handler 27 | static member inline onChangeEnd (handler: {| start: 'a; ``end``: 'a |} -> unit) = Interop.mkAttr "onChangeEnd" handler 28 | 29 | [] 30 | type Slider = 31 | inherit BaseComponent 32 | static member inline isFilled (value: bool) = Interop.mkAttr "isFilled" value 33 | static member inline fillOffset (value: int) = Interop.mkAttr "fillOffset" value 34 | static member inline trackGradient (xs: seq) = Interop.mkAttr "trackGradient" (xs |> Array.ofSeq) 35 | static member inline formatOptions (value: NumberFormatOptions) = Interop.mkAttr "formatOptions" value 36 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 37 | static member inline showValueLabel (value: bool) = Interop.mkAttr "showValueLabel" value 38 | static member inline getValueLabel (handler: 'a -> string) = Interop.mkAttr "getValueLabel" handler 39 | static member inline orientation (value: Orientation) = Interop.mkAttr "orientation" value 40 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value 41 | static member inline minValue (value: 'a) = Interop.mkAttr "minValue" value 42 | static member inline maxValue (value: 'a) = Interop.mkAttr "maxValue" value 43 | static member inline step (value: 'a) = Interop.mkAttr "step" value 44 | static member inline value (value: 'a) = Interop.mkAttr "value" value 45 | static member inline defaultValue (value: 'a) = Interop.mkAttr "defaultValue" value 46 | static member inline label (value: string) = Interop.mkAttr "label" value 47 | static member inline label (value: ReactElement) = Interop.mkAttr "label" value 48 | 49 | static member inline onChange (handler: 'a -> unit) = Interop.mkAttr "onChange" handler 50 | static member inline onChangeEnd (handler: 'a -> unit) = Interop.mkAttr "onChangeEnd" handler -------------------------------------------------------------------------------- /src/Feliz.ReactSpectrum/Status.fs: -------------------------------------------------------------------------------- 1 | namespace Feliz.ReactSpectrum 2 | 3 | open Feliz.ReactSpectrum 4 | open Browser.Types 5 | open Feliz 6 | open Fable.Core 7 | open Fable.React 8 | 9 | [] 10 | type Meter = 11 | inherit BaseComponent 12 | static member inline variant (value: MeterVariant) = Interop.mkAttr "variant" value 13 | static member inline size (value: MeterSize) = Interop.mkAttr "size" value 14 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 15 | static member inline label (value: string) = Interop.mkAttr "label" value 16 | static member inline label (value: ReactElement) = Interop.mkAttr "label" value 17 | static member inline showValueLabel (value: bool) = Interop.mkAttr "showValueLabel" value 18 | static member inline formatOptions (value: NumberFormatOptions) = Interop.mkAttr "formatOptions" value 19 | static member inline valueLabel (value: string) = Interop.mkAttr "valueLabel" value 20 | static member inline valueLabel (value: ReactElement) = Interop.mkAttr "valueLabel" value 21 | static member inline value (value: 'a) = Interop.mkAttr "value" value 22 | static member inline minValue (value: 'a) = Interop.mkAttr "minValue" value 23 | static member inline maxValue (value: 'a) = Interop.mkAttr "maxValue" value 24 | 25 | [] 26 | type ProgressBar = 27 | inherit BaseComponent 28 | static member inline overBackgroundVariant = Interop.mkAttr "variant" "overBackground" 29 | static member inline isIndeterminate (value: bool) = Interop.mkAttr "isIndeterminate" value 30 | static member inline size (value: ProgressBarSize) = Interop.mkAttr "size" value 31 | static member inline labelPosition (value: LabelPosition) = Interop.mkAttr "labelPosition" value 32 | static member inline label (value: string) = Interop.mkAttr "label" value 33 | static member inline label (value: ReactElement) = Interop.mkAttr "label" value 34 | static member inline showValueLabel (value: bool) = Interop.mkAttr "showValueLabel" value 35 | static member inline formatOptions (value: NumberFormatOptions) = Interop.mkAttr "formatOptions" value 36 | static member inline valueLabel (value: string) = Interop.mkAttr "valueLabel" value 37 | static member inline valueLabel (value: ReactElement) = Interop.mkAttr "valueLabel" value 38 | static member inline value (value: 'a) = Interop.mkAttr "value" value 39 | static member inline minValue (value: 'a) = Interop.mkAttr "minValue" value 40 | static member inline maxValue (value: 'a) = Interop.mkAttr "maxValue" value 41 | 42 | [] 43 | type ProgressCircle = 44 | inherit BaseComponent 45 | static member inline overBackgroundVariant = Interop.mkAttr "variant" "overBackground" 46 | static member inline isIndeterminate (value: bool) = Interop.mkAttr "isIndeterminate" value 47 | static member inline size (value: ProgressCircleSize) = Interop.mkAttr "size" value 48 | static member inline value (value: 'a) = Interop.mkAttr "value" value 49 | static member inline minValue (value: 'a) = Interop.mkAttr "minValue" value 50 | static member inline maxValue (value: 'a) = Interop.mkAttr "maxValue" value 51 | 52 | [] 53 | type StatusLight = 54 | inherit BaseComponent 55 | static member inline children (xs: seq) = prop.children(xs) 56 | static member inline content (value: string) = Interop.mkAttr "children" value 57 | static member inline content (value: ReactElement) = Interop.mkAttr "children" value 58 | static member inline variant (value: StatusLightVariant) = Interop.mkAttr "variant" value 59 | static member inline isDisabled (value: bool) = Interop.mkAttr "isDisabled" value --------------------------------------------------------------------------------