├── .gitignore ├── .project ├── devserver.rb ├── docs.rb └── install.rb ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs └── examples │ ├── index.html │ ├── target │ └── compiled.js │ ├── webpack-deps.dev.js │ └── webpack-deps.prod.js ├── package.json ├── project.clj ├── project.rb ├── project.yaml └── src ├── bundled └── cljs │ └── dmohs │ └── react │ └── deps.cljs ├── main ├── cljs │ └── dmohs │ │ ├── react.clj │ │ ├── react.cljs │ │ └── react │ │ ├── common.cljc │ │ ├── core.clj │ │ └── core.cljs └── js │ ├── webpack-requires.js │ └── webpack.config.js ├── static └── index.html ├── test └── cljs │ └── webui │ └── main.cljs └── unbundled └── cljs └── dmohs └── react └── deps.cljs /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea/ 2 | /.lein-repl-history 3 | /.project/common 4 | /.rsync.log 5 | /pom.xml* 6 | /react.iml 7 | /src/static/webpack-deps.* 8 | /target/ 9 | -------------------------------------------------------------------------------- /.project/devserver.rb: -------------------------------------------------------------------------------- 1 | require_relative "common/common" 2 | 3 | def package_deps() 4 | c = Common.new 5 | env = c.load_env 6 | unless c.docker.image_exists?("node:alpine") 7 | c.error "Pulling nodejs image..." 8 | c.run_inline %W{docker pull node:alpine} 9 | end 10 | cname = "#{env.namespace}-node-modules" 11 | c.run_inline %W{ 12 | docker run -d --name #{cname} 13 | -v #{cname}:/w/node_modules -w /w 14 | node:alpine 15 | sleep 1d 16 | } 17 | at_exit { c.run_inline %W{docker rm -f #{cname}} } 18 | c.run_inline %W{docker cp package.json #{cname}:/w} 19 | c.run_inline %W{docker cp src/main/js/webpack.config.js #{cname}:/w} 20 | c.run_inline %W{docker cp src/main/js/webpack-requires.js #{cname}:/w} 21 | c.run_inline %W{docker start #{cname}} 22 | c.run_inline %W{docker exec #{cname} npm install} 23 | c.run_inline %W{ 24 | docker exec #{cname} ./node_modules/webpack/bin/webpack.js --config webpack.config.js 25 | } 26 | c.run_inline %W{docker cp #{cname}:/w/webpack-deps.js src/static/webpack-deps.dev.js} 27 | c.run_inline %W{ 28 | docker exec #{cname} ./node_modules/webpack/bin/webpack.js --config webpack.config.js -p 29 | } 30 | c.run_inline %W{docker cp #{cname}:/w/webpack-deps.js src/static/webpack-deps.prod.js} 31 | end 32 | 33 | def start_dev() 34 | c = Common.new 35 | env = c.load_env 36 | c.sf.maybe_start_file_syncing 37 | unless c.docker.image_exists?("dmohs/clojurescript") 38 | c.error "Pulling ClojureScript image..." 39 | c.run_inline %W{docker pull dmohs/clojurescript} 40 | end 41 | c.status "Starting figwheel. Wait for prompt before connecting with a browser..." 42 | docker_run = %W{ 43 | docker run --name #{env.namespace}-figwheel 44 | --rm -it 45 | -w /w 46 | -p 3449:3449 47 | -v jars:/root/.m2 48 | } 49 | docker_run += c.sf.get_volume_mounts 50 | cmd = "sleep 1; rlwrap lein with-profile +unbundled,+ui figwheel" 51 | docker_run += %W{dmohs/clojurescript sh -c #{cmd}} 52 | c.run_inline docker_run 53 | end 54 | 55 | Common.register_command({ 56 | :invocation => "start", 57 | :description => "Starts the development compiler and server.", 58 | :fn => Proc.new { |*args| start_dev(*args) } 59 | }) 60 | 61 | Common.register_command({ 62 | :invocation => "package-deps", 63 | :description => "Installs dependencies and packages them using webpack.", 64 | :fn => Proc.new { |*args| package_deps(*args) } 65 | }) 66 | -------------------------------------------------------------------------------- /.project/docs.rb: -------------------------------------------------------------------------------- 1 | require_relative "common/common" 2 | 3 | def build_docs_folder() 4 | c = Common.new 5 | env = c.load_env 6 | cname = "#{env.namespace}-docs-build" 7 | c.run_inline %W{ 8 | docker create --name #{cname} 9 | -w /w 10 | -v jars:/root/.m2 11 | dmohs/clojurescript 12 | lein with-profile +unbundled,+docs cljsbuild once 13 | } 14 | at_exit { c.run_inline %W{docker rm -f #{cname}} } 15 | env.source_file_paths.each do |src_path| 16 | c.pipe( 17 | %W{tar -c #{src_path}}, 18 | %W{docker cp - #{cname}:/w} 19 | ) 20 | end 21 | c.run_inline %W{docker start -a #{cname}} 22 | c.run_inline %W{rm -rf docs} 23 | c.run_inline %W{mkdir -p docs/examples/target} 24 | c.run_inline %W{docker cp #{cname}:/w/resources/public/target/compiled.js docs/examples/target} 25 | c.sf.foreach_static_file do |path, entry| 26 | c.run_inline %W{cp -R #{path}/#{entry} docs/examples/#{entry}} 27 | end 28 | end 29 | 30 | def test_docs() 31 | require "webrick" 32 | WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => "docs/examples").start 33 | end 34 | 35 | Common.register_command({ 36 | :invocation => "build-docs", 37 | :description => "(Re-)Builds the docs/ folder.", 38 | :fn => Proc.new { |*args| build_docs_folder(*args) } 39 | }) 40 | 41 | Common.register_command({ 42 | :invocation => "test-docs", 43 | :description => "Runs an HTTP server against the docs/examples folder.", 44 | :fn => Proc.new { |*args| test_docs(*args) } 45 | }) 46 | -------------------------------------------------------------------------------- /.project/install.rb: -------------------------------------------------------------------------------- 1 | require_relative "common/common" 2 | 3 | def install(local, *args) 4 | c = Common.new 5 | if not local 6 | jars_volume_name = args.shift 7 | if jars_volume_name.nil? 8 | c.error "Missing docker volume name for storing JARS (e.g. \"jars\")" 9 | exit 1 10 | end 11 | end 12 | env = c.load_env 13 | cname = "#{env.namespace}-install" 14 | if local 15 | vol = "#{ENV["HOME"]}/.m2:/root/.m2" 16 | else 17 | vol = "#{jars_volume_name}:/root/.m2" 18 | end 19 | c.run_inline %W{ 20 | docker create --name #{cname} 21 | -w /w 22 | -v #{vol} 23 | clojure:lein-alpine 24 | lein install 25 | } 26 | at_exit { c.run_inline %W{docker rm -f #{cname}} } 27 | env.source_file_paths.each do |src_path| 28 | c.pipe( 29 | %W{tar -c #{src_path}}, 30 | %W{docker cp - #{cname}:/w} 31 | ) 32 | end 33 | c.run_inline %W{docker start -a #{cname}} 34 | end 35 | 36 | Common.register_command({ 37 | :invocation => "local-install", 38 | :description => "Installs this jar into the local system repository (#{ENV["HOME"]}/.m2).", 39 | :fn => Proc.new { |*args| install(true, *args) } 40 | }) 41 | 42 | Common.register_command({ 43 | :invocation => "docker-install", 44 | :description => "Installs this jar into the named docker volume at /root/.m2.", 45 | :fn => Proc.new { |*args| install(false, *args) } 46 | }) 47 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 1.2.2+15.5.4-1 2 | 3 | - Bug fixes. 4 | - `defc-` for "private" components (Isaac Zarsky). Like `defn-`, these are not enforced in ClojureScript, but provide hints about intent. 5 | 6 | # 1.2.0+15.5.4-0 7 | 8 | - Also don't convert aria attributes to camel-case since. 9 | - `after-update` added as a function (alternative to getting through the argument map). 10 | - `method` returns the bound method of the given name. Useful for non-React event handlers since 11 | you must provide an identical function when removing. 12 | 13 | # 1.1.2+15.5.4-0 14 | 15 | - Bump React version. 16 | - Add `cljsjs/create-react-class` to silence deprecation warning of React.createClass. 17 | - Don't convert data attributes to camel-case since those need to remain kebab-case. 18 | 19 | # 1.0.2+15.0.2 20 | 21 | - Bump React to version 15. 22 | 23 | # 1.0.1+0.14.3-1 24 | 25 | - Added the React version to the "build metadata" of this library's version number. 26 | 27 | # 1.0.0 28 | 29 | - Hot reloading now replaces methods in a React component's prototype instead of saving and 30 | restoring. This is safer and doesn't cause `component-did-mount` to fire. 31 | - Components now implement the `IFn` protocol, allowing method calls, e.g., 32 | `(react/call instance :do-stuff)`, to be shortened to, e.g., `(instance :do-stuff)`. 33 | - State and props are duplicated as plain JavaScript objects to make them easy to view in React's 34 | developer tools for Chrome. 35 | - Including `:trace? true` when creating a class will cause the component to log every method call. 36 | - `create-element` will now accept a plain JavaScript React element. 37 | - Safer internal variable handling to make sure things don't break with advanced optimizations. 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 David E. Mohs 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-cljs [![Clojars Project](https://img.shields.io/clojars/v/dmohs/react.svg)](https://clojars.org/dmohs/react) 2 | 3 | A ClojureScript wrapper for React. 4 | 5 | There are a number of React-like libraries for ClojureScript (e.g., Om, Reagent, Rum). This one sets itself apart by embracing the following two philosophies: 6 | 1. React is very well-engineered. 7 | 2. Objects are an excellent abstraction for UI components. 8 | 9 | Because React is well-engineered, this wrapper aims to provide the absolute minimum interface necessary to make React usage seamless from ClojureScript. The primary benefit is that nearly every tool available to React developers in JavaScript (e.g., the full component lifecycle, refs, etc.) is available to users of this wrapper. The secondary benefit is that reading React's documentation, and using good judgement about how ClojureScript differs from JavaScript, is often enough to fully understand how to write code using this wrapper. 10 | 11 | Since objects are an excellent abstraction for UI components, this wrapper eschews the usual practice of a function-first interface. Ad-hoc component methods (e.g., `:-handle-submit-button-click`) are natural and encouraged (we tend to prefix private methods with a hyphen by convention, which is not enforced). 12 | 13 | Take a look at the [examples](http://dmohs.github.io/react-cljs/examples/) and the [examples source](https://github.com/dmohs/react-cljs/blob/master/src/test/cljs/webui/main.cljs) for usage. An understanding of React via React's excellent documentation will aid in understanding these examples. 14 | 15 | If you'd like to try out the examples yourself with Figwheel's amazing hot-reloader, you'll need ruby and docker. Then run: 16 | ```sh 17 | ./project.rb start 18 | ``` 19 | to start Figwheel. When it has finished compiling, open http://localhost:3449/. 20 | 21 | ## Goodies 22 | 23 | - **Built-in support for hot-reloading**. If you use, for example, [Figwheel](https://github.com/bhauman/lein-figwheel) to hot-reload files on change, React components created with the `defc` macro will be patched automatically. 24 | - **Method tracing**. Including `:trace? true` in the class definition map will cause every method call to emit a message to the console. This also attempts to break infinite loops by setting a ceiling on the number of traces in a short time period. 25 | - **React Developer Tools support**. Copies component state and props into plain JavaScript in non-optimized compilation modes so it is easier to use React Developer Tools (Chrome extension) to inspect components. 26 | - **Bound methods**. Call `(r/method this :your-method)` to retrieve a method from your instance. Subsequent calls return an identical (not just equal) function, so it can be used in things like `addEventListener`/`removeEventListener`. 27 | - **abind** *experimental*. Binds an atom passed as a property to a key in state. Whenever the atom's value changes, the corresponding state key will receive the new value (and cause a re-render). 28 | 29 | ### Add dependency: 30 | 31 | ```cljs 32 | [dmohs/react "1.3.0"] ; [1] 33 | ``` 34 | **or** 35 | ```cljs 36 | [dmohs/react "1.2.4+15.5.4-1"] ; [2] 37 | ``` 38 | 39 | [1] This version does not depend on React. You must bundle it separately (and include `create-react-class`) using Webpack or similar. You can get an example of this by reading the [scripts](https://github.com/dmohs/react-cljs/blob/master/.project/devserver.rb) used to start the dev environment. 40 | 41 | [2] This version bundles the specified version of React via [CLJSJS](http://cljsjs.github.io/). 42 | 43 | ## Top-Level API 44 | 45 | The Top-Level API closely follows React's Top-Level API: 46 | 47 | https://facebook.github.io/react/docs/top-level-api.html 48 | 49 | ### React.Component 50 | 51 | *Not applicable.* 52 | 53 | ### React.createClass 54 | 55 | ```cljs 56 | ;; (:require [dmohs/react :as r]) 57 | (def MyComponent 58 | (r/create-class 59 | {:get-initial-state (fn [] {:click-count 0}) 60 | :render 61 | (fn [{:keys [this props state refs]}] 62 | [:div {:style {:border "1px solid black"}} 63 | "Hello there, " (:name props) 64 | [:div {:ref "clickable-div" 65 | :on-click (fn [e] (swap! state update-in [:click-count] inc))} 66 | "I have been clicked " (:click-count @state) " times."]]) 67 | :component-did-mount 68 | (fn [{:keys [refs]}] 69 | (.focus (@refs "clickable-div")))})) 70 | ``` 71 | 72 | or, using the `defc` macro (preferred and supports hot-reloading): 73 | 74 | ```cljs 75 | (r/defc MyComponent 76 | {:get-initial-state ... 77 | :render ... 78 | ...}) 79 | ``` 80 | 81 | The `render` method can return either an element or a vector (as in the above example). Pass `:trace? true` for method tracing: 82 | 83 | ```cljs 84 | (r/defc MyComponent 85 | {:trace? true 86 | :get-initial-state ... 87 | :render ... 88 | ...}) 89 | ``` 90 | 91 | ### React.createElement 92 | 93 | ```cljs 94 | (r/defc MyComponent ...) 95 | (def PlainReactComponent (js/React.createClass ...)) 96 | (r/create-element 97 | :div {:class-name "alert" :style {:background-color "red"}} 98 | (r/create-element MyComponent {:foo "foo"}) 99 | (r/create-element PlainReactComponent {:bar "bar"})) 100 | 101 | ;; Vector syntax 102 | (r/create-element [:div {:class-name "alert"} 103 | "Child 1" "Child 2" 104 | [MyComponent {:initial-click-count 15}] 105 | [PlainReactComponent {:initial-click-count 21}]]) 106 | ``` 107 | 108 | ### React.cloneElement 109 | 110 | *Not yet implemented.* 111 | 112 | ### React.createFactory 113 | 114 | ```cljs 115 | (r/create-factory string-or-react-class) 116 | ``` 117 | 118 | ### React.isValidElement 119 | 120 | ```cljs 121 | (r/valid-element? x) 122 | ``` 123 | 124 | ### ReactDOM.render 125 | 126 | ```cljs 127 | (r/render element container callback) 128 | ``` 129 | 130 | ### ReactDOM.unmountComponentAtNode 131 | 132 | ```cljs 133 | (r/unmount-component-at-node container) 134 | ``` 135 | 136 | ### ReactDOM.findDOMNode 137 | 138 | ```cljs 139 | (r/find-dom-node element) 140 | ``` 141 | 142 | ## Component Specifications 143 | 144 | Component specifications closely follow React's Component Specifications: 145 | 146 | https://facebook.github.io/react/docs/component-specs.html 147 | 148 | React methods are defined using Clojure naming conventions (`:get-initial-state` corresponds to `getInitialState`). Additional methods become part of the object (as in React), so `:add-foo` can be called like so: 149 | ```cljs 150 | (r/call :add-foo this "argument 1" "argument 2") 151 | ;; or 152 | (r/call :add-foo (@refs "some-child") "argument 1" "argument 2") 153 | ``` 154 | 155 | Additionally, components implement `IFn`, so the above calls can be shortened to: 156 | ```cljs 157 | (this :add-foo "argument 1" "argument 2") 158 | ;; and 159 | ((@refs "some-child") :add-foo "argument 1" "argument 2") 160 | ``` 161 | 162 | Methods are passed a map with the appropriate keys defined: 163 | 164 | ```cljs 165 | {:this this ; the component instance 166 | :props props 167 | :state state ; state atom 168 | :after-update ; [1] 169 | :refs refs ; [2] 170 | :locals ; [3] 171 | :prev-props prevProps ; when applicable 172 | :prev-state prevState ; " 173 | :next-props nextProps ; " 174 | :next-state nextState ; " 175 | :abind ; [4] 176 | } 177 | ``` 178 | 179 | 1. This is used when you would pass a callback to `setState`, e.g., 180 | 181 | `(after-update #(.focus (r/find-dom-node this)))`. `after-update` is also defined as a root-level function, so this is identical: `(r/after-update this #(.focus (r/find-dom-node this)))` 182 | 2. The `refs` atom allows accessing `this.refs` as a map, e.g., `(.focus (@refs "my-text-box"))`. 183 | 3. Convenience atom for local variables. Instead of, e.g., 184 | 185 | `(set! (.-myTimer this) (js/setTimeout ...))`, you can do 186 | 187 | `(swap! locals assoc :my-timer (js/setTimeout ...))`. 188 | 4. Bind a property atom to a key in state, e.g., 189 | 190 | `(abind :foo)` or `(abind :foo :my-state-key)` 191 | 192 | Returns {state-key value-of-atom} for use in `:get-initial-state`. 193 | 194 | Note: for non-api methods (like `:add-foo` above), this map is the first argument before any arguments passed when calling the method using `r/call` or via `this`. 195 | 196 | Modifying the `state` atom implicitly calls `this.setState`. This maintains the behavior of React's `this.state` in the way that updates (via `swap!` or `reset!`) are not visible in `@state` until after the component is re-rendered. 197 | 198 | Note that `propTypes`, `statics`, and `mixins` are not yet implemented. They may never be, since Clojure to some extent obviates the need for some of these utilities. 199 | -------------------------------------------------------------------------------- /docs/examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React CLJS Test Page 7 | 8 | 9 | 10 |
Loading application...
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/examples/webpack-deps.prod.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(e,t,n){"use strict";e.exports=n(6)},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,l,u=r(e),s=1;sO.length&&O.push(e)}function d(e,t,n,o){var a=typeof e;if("undefined"!==a&&"boolean"!==a||(e=null),null===e||"string"===a||"number"===a||"object"===a&&e.$$typeof===S)return n(o,e,""===t?"."+f(e,0):t),1;var i=0;if(t=""===t?".":t+":",Array.isArray(e))for(var l=0;l=K(e.last.priorityLevel,t))n=e.last;else for(e=e.first;null!==e&&0>=K(e.priorityLevel,t);)n=e,e=e.next;return n}function q(e,t){var n=e.alternate,r=e.updateQueue;null===r&&(r=e.updateQueue=Y()),null!==n?null===(e=n.updateQueue)&&(e=n.updateQueue=Y()):e=null,Ar=r,Rr=e!==r?e:null;var o=Ar;n=Rr;var a=Q(o,t),i=null!==a?a.next:o.first;return null===n?($(o,t,a,i),null):(r=Q(n,t),e=null!==r?r.next:n.first,$(o,t,a,i),i===e&&null!==i||a===r&&null!==a?(null===r&&(n.first=t),null===e&&(n.last=null),null):(t={priorityLevel:t.priorityLevel,partialState:t.partialState,callback:t.callback,isReplace:t.isReplace,isForced:t.isForced,isTopLevelUnmount:t.isTopLevelUnmount,next:null},$(n,t,r,e),t))}function G(e,t,n,r){return e=e.partialState,"function"==typeof e?e.call(t,n,r):e}function X(e,t,n){e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=n}function Z(e){return e.tag===jr&&null!=e.type.childContextTypes}function J(e,t){var n=e.stateNode,o=e.type.childContextTypes;if("function"!=typeof n.getChildContext)return t;n=n.getChildContext();for(var a in n)a in o||r("108",d(e)||"Unknown",a);return yt({},t,n)}function ee(e,t,n){this.tag=e,this.key=t,this.stateNode=this.type=null,this.sibling=this.child=this.return=null,this.index=0,this.memoizedState=this.updateQueue=this.memoizedProps=this.pendingProps=this.ref=null,this.internalContextTag=n,this.effectTag=so,this.lastEffect=this.firstEffect=this.nextEffect=null,this.pendingWorkPriority=lo,this.alternate=null}function te(e,t,n){var o=void 0;return"function"==typeof e?(o=e.prototype&&e.prototype.isReactComponent?new ee(Jr,t,n):new ee(Zr,t,n),o.type=e):"string"==typeof e?(o=new ee(to,t,n),o.type=e):"object"==typeof e&&null!==e&&"number"==typeof e.tag?o=e:r("130",null==e?e:typeof e,""),o}function ne(e){return null===e||void 0===e?null:(e=Vo&&e[Vo]||e["@@iterator"],"function"==typeof e?e:null)}function re(e,t){var n=t.ref;if(null!==n&&"function"!=typeof n){if(t._owner){t=t._owner;var o=void 0;t&&("number"==typeof t.tag?(t.tag!==Fo&&r("110"),o=t.stateNode):o=t.getPublicInstance()),o||r("147",n);var a=""+n;return null!==e&&null!==e.ref&&e.ref._stringRef===a?e.ref:(e=function(e){var t=o.refs===Ct?o.refs={}:o.refs;null===e?delete t[a]:t[a]=e},e._stringRef=a,e)}"string"!=typeof n&&r("148"),t._owner||r("149",n)}return n}function oe(e,t){"textarea"!==e.type&&r("31","[object Object]"===Object.prototype.toString.call(t)?"object with keys {"+Object.keys(t).join(", ")+"}":t,"")}function ae(e,t){function n(n,r){if(t){if(!e){if(null===r.alternate)return;r=r.alternate}var o=n.lastEffect;null!==o?(o.nextEffect=r,n.lastEffect=r):n.firstEffect=n.lastEffect=r,r.nextEffect=null,r.effectTag=Wo}}function o(e,r){if(!t)return null;for(;null!==r;)n(e,r),r=r.sibling;return null}function a(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function i(t,n){return e?(t=Po(t,n),t.index=0,t.sibling=null,t):(t.pendingWorkPriority=n,t.effectTag=Lo,t.index=0,t.sibling=null,t)}function l(e,n,r){return e.index=r,t?null!==(r=e.alternate)?(r=r.index,rd?(f=p,p=null):f=p.sibling;var h=g(e,p,i[d],u);if(null===h){null===p&&(p=f);break}t&&p&&null===h.alternate&&n(e,p),r=l(h,r,d),null===c?s=h:c.sibling=h,c=h,p=f}if(d===i.length)return o(e,p),s;if(null===p){for(;df?(h=d,d=null):h=d.sibling;var b=g(e,d,v.value,s);if(null===b){d||(d=h);break}t&&d&&null===b.alternate&&n(e,d),i=l(b,i,f),null===p?c=b:p.sibling=b,p=b,d=h}if(v.done)return o(e,d),c;if(null===d){for(;!v.done;f++,v=u.next())null!==(v=m(e,v.value,s))&&(i=l(v,i,f),null===p?c=v:p.sibling=v,p=v);return c}for(d=a(e,d);!v.done;f++,v=u.next())null!==(v=y(d,e,f,v.value,s))&&(t&&null!==v.alternate&&d.delete(null===v.key?f:v.key),i=l(v,i,f),null===p?c=v:p.sibling=v,p=v);return t&&d.forEach(function(t){return n(e,t)}),c}return function(e,t,a,l){var s="object"==typeof a&&null!==a;if(s)switch(a.$$typeof){case jo:e:{var c=a.key;for(s=t;null!==s;){if(s.key===c){if(s.type===a.type){o(e,s.sibling),t=i(s,l),t.ref=re(s,a),t.pendingProps=a.props,t.return=e,e=t;break e}o(e,s);break}n(e,s),s=s.sibling}l=To(a,e.internalContextTag,l),l.ref=re(t,a),l.return=e,e=l}return u(e);case Co:e:{for(s=a.key;null!==t;){if(t.key===s){if(t.tag===Ao){o(e,t.sibling),t=i(t,l),t.pendingProps=a,t.return=e,e=t;break e}o(e,t);break}n(e,t),t=t.sibling}a=_o(a,e.internalContextTag,l),a.return=e,e=a}return u(e);case Eo:e:{if(null!==t){if(t.tag===Ro){o(e,t.sibling),t=i(t,l),t.type=a.value,t.return=e,e=t;break e}o(e,t)}t=xo(a,e.internalContextTag,l),t.type=a.value,t.return=e,e=t}return u(e);case ko:e:{for(s=a.key;null!==t;){if(t.key===s){if(t.tag===Mo&&t.stateNode.containerInfo===a.containerInfo&&t.stateNode.implementation===a.implementation){o(e,t.sibling),t=i(t,l),t.pendingProps=a.children||[],t.return=e,e=t;break e}o(e,t);break}n(e,t),t=t.sibling}a=So(a,e.internalContextTag,l),a.return=e,e=a}return u(e)}if("string"==typeof a||"number"==typeof a)return a=""+a,null!==t&&t.tag===Do?(o(e,t.sibling),t=i(t,l),t.pendingProps=a,t.return=e,e=t):(o(e,t),a=No(a,e.internalContextTag,l),a.return=e,e=a),u(e);if(Io(a))return v(e,t,a,l);if(ne(a))return b(e,t,a,l);if(s&&oe(e,a),void 0===a)switch(e.tag){case Fo:case Oo:a=e.type,r("152",a.displayName||a.name||"Component")}return o(e,t)}}function ie(e,t,n,o){function a(e,t){t.updater=i,e.stateNode=t,Qt.set(t,e)}var i={isMounted:oa,enqueueSetState:function(n,r,o){n=Qt.get(n);var a=t(n,!1);Jo(n,r,void 0===o?null:o,a),e(n,a)},enqueueReplaceState:function(n,r,o){n=Qt.get(n);var a=t(n,!1);ea(n,r,void 0===o?null:o,a),e(n,a)},enqueueForceUpdate:function(n,r){n=Qt.get(n);var o=t(n,!1);ta(n,void 0===r?null:r,o),e(n,o)}};return{adoptClassInstance:a,constructClassInstance:function(e,t){var n=e.type,r=Xo(e),o=Zo(e),i=o?Go(e,r):Ct;return t=new n(t,i),a(e,t),o&&qo(e,r,i),t},mountClassInstance:function(e,t){var n=e.alternate,o=e.stateNode,a=o.state||null,l=e.pendingProps;l||r("158");var u=Xo(e);o.props=l,o.state=a,o.refs=Ct,o.context=Go(e,u),_r.enableAsyncSubtreeAPI&&null!=e.type&&null!=e.type.prototype&&!0===e.type.prototype.unstable_isAsyncReactComponent&&(e.internalContextTag|=Qo),"function"==typeof o.componentWillMount&&(u=o.state,o.componentWillMount(),u!==o.state&&i.enqueueReplaceState(o,o.state,null),null!==(u=e.updateQueue)&&(o.state=na(n,e,u,o,a,l,t))),"function"==typeof o.componentDidMount&&(e.effectTag|=$o)},updateClassInstance:function(e,t,a){var l=t.stateNode;l.props=t.memoizedProps,l.state=t.memoizedState;var u=t.memoizedProps,s=t.pendingProps;s||null==(s=u)&&r("159");var c=l.context,p=Xo(t);if(p=Go(t,p),"function"!=typeof l.componentWillReceiveProps||u===s&&c===p||(c=l.state,l.componentWillReceiveProps(s,p),l.state!==c&&i.enqueueReplaceState(l,l.state,null)),c=t.memoizedState,a=null!==t.updateQueue?na(e,t,t.updateQueue,l,c,s,a):c,!(u!==s||c!==a||ra()||null!==t.updateQueue&&t.updateQueue.hasForceUpdate))return"function"!=typeof l.componentDidUpdate||u===e.memoizedProps&&c===e.memoizedState||(t.effectTag|=$o),!1;var d=s;if(null===u||null!==t.updateQueue&&t.updateQueue.hasForceUpdate)d=!0;else{var f=t.stateNode,h=t.type;d="function"==typeof f.shouldComponentUpdate?f.shouldComponentUpdate(d,a,p):!h.prototype||!h.prototype.isPureReactComponent||(!Et(u,d)||!Et(c,a))}return d?("function"==typeof l.componentWillUpdate&&l.componentWillUpdate(s,a,p),"function"==typeof l.componentDidUpdate&&(t.effectTag|=$o)):("function"!=typeof l.componentDidUpdate||u===e.memoizedProps&&c===e.memoizedState||(t.effectTag|=$o),n(t,s),o(t,a)),l.props=s,l.state=a,l.context=p,d}}}function le(e,t,n,o,a){function i(e,t,n){l(e,t,n,t.pendingWorkPriority)}function l(e,t,n,r){t.child=null===e?aa(t,t.child,n,r):e.child===t.child?ia(t,t.child,n,r):la(t,t.child,n,r)}function u(e,t){var n=t.ref;null===n||e&&e.ref===n||(t.effectTag|=Da)}function s(e,t,n,r){if(u(e,t),!n)return r&&ma(t,!1),p(e,t);n=t.stateNode,Ma.current=t;var o=n.render();return t.effectTag|=Sa,i(e,t,o),t.memoizedState=n.state,t.memoizedProps=n.props,r&&ma(t,!0),t.child}function c(e){var t=e.stateNode;t.pendingContext?ha(e,t.pendingContext,t.pendingContext!==t.context):t.context&&ha(e,t.context,!1),y(e,t.containerInfo)}function p(e,t){return ua(e,t),t.child}function d(e,t){switch(t.tag){case ba:c(t);break;case va:fa(t);break;case ka:y(t,t.stateNode.containerInfo)}return null}var f=e.shouldSetTextContent,h=e.useSyncScheduling,m=e.shouldDeprioritizeSubtree,g=t.pushHostContext,y=t.pushHostContainer,v=n.enterHydrationState,b=n.resetHydrationState,C=n.tryToClaimNextHydratableInstance;e=ie(o,a,function(e,t){e.memoizedProps=t},function(e,t){e.memoizedState=t});var E=e.adoptClassInstance,k=e.constructClassInstance,P=e.mountClassInstance,T=e.updateClassInstance;return{beginWork:function(e,t,n){if(t.pendingWorkPriority===_a||t.pendingWorkPriority>n)return d(e,t);switch(t.tag){case ga:null!==e&&r("155");var o=t.type,a=t.pendingProps,l=pa(t);return l=ca(t,l),o=o(a,l),t.effectTag|=Sa,"object"==typeof o&&null!==o&&"function"==typeof o.render?(t.tag=va,a=fa(t),E(t,o),P(t,n),t=s(e,t,!0,a)):(t.tag=ya,i(e,t,o),t.memoizedProps=a,t=t.child),t;case ya:e:{if(a=t.type,n=t.pendingProps,o=t.memoizedProps,da())null===n&&(n=o);else if(null===n||o===n){t=p(e,t);break e}o=pa(t),o=ca(t,o),a=a(n,o),t.effectTag|=Sa,i(e,t,a),t.memoizedProps=n,t=t.child}return t;case va:return a=fa(t),o=void 0,null===e?t.stateNode?r("153"):(k(t,t.pendingProps),P(t,n),o=!0):o=T(e,t,n),s(e,t,o,a);case ba:return c(t),o=t.updateQueue,null!==o?(a=t.memoizedState,o=sa(e,t,o,null,a,null,n),a===o?(b(),t=p(e,t)):(a=o.element,null!==e&&null!==e.child||!v(t)?(b(),i(e,t,a)):(t.effectTag|=Ia,t.child=aa(t,t.child,a,n)),t.memoizedState=o,t=t.child)):(b(),t=p(e,t)),t;case Ca:g(t),null===e&&C(t),a=t.type;var w=t.memoizedProps;return o=t.pendingProps,null===o&&null===(o=w)&&r("154"),l=null!==e?e.memoizedProps:null,da()||null!==o&&w!==o?(w=o.children,f(a,o)?w=null:l&&f(a,l)&&(t.effectTag|=Oa),u(e,t),n!==xa&&!h&&m(a,o)?(t.pendingWorkPriority=xa,t=null):(i(e,t,w),t.memoizedProps=o,t=t.child)):t=p(e,t),t;case Ea:return null===e&&C(t),e=t.pendingProps,null===e&&(e=t.memoizedProps),t.memoizedProps=e,null;case Ta:t.tag=Pa;case Pa:return n=t.pendingProps,da()?null===n&&null===(n=e&&e.memoizedProps)&&r("154"):null!==n&&t.memoizedProps!==n||(n=t.memoizedProps),a=n.children,o=t.pendingWorkPriority,t.stateNode=null===e?aa(t,t.stateNode,a,o):e.child===t.child?ia(t,t.stateNode,a,o):la(t,t.stateNode,a,o),t.memoizedProps=n,t.stateNode;case wa:return null;case ka:e:{if(y(t,t.stateNode.containerInfo),n=t.pendingWorkPriority,a=t.pendingProps,da())null===a&&null==(a=e&&e.memoizedProps)&&r("154");else if(null===a||t.memoizedProps===a){t=p(e,t);break e}null===e?t.child=la(t,t.child,a,n):i(e,t,a),t.memoizedProps=a,t=t.child}return t;case Na:e:{if(n=t.pendingProps,da())null===n&&(n=t.memoizedProps);else if(null===n||t.memoizedProps===n){t=p(e,t);break e}i(e,t,n),t.memoizedProps=n,t=t.child}return t;default:r("156")}},beginFailedWork:function(e,t,n){switch(t.tag){case va:fa(t);break;case ba:c(t);break;default:r("157")}return t.effectTag|=Fa,null===e?t.child=null:t.child!==e.child&&(t.child=e.child),t.pendingWorkPriority===_a||t.pendingWorkPriority>n?d(e,t):(t.firstEffect=null,t.lastEffect=null,l(e,t,null,n),t.tag===va&&(e=t.stateNode,t.memoizedProps=e.props,t.memoizedState=e.state),t.child)}}}function ue(e,t,n){var o=e.createInstance,a=e.createTextInstance,i=e.appendInitialChild,l=e.finalizeInitialChildren,u=e.prepareUpdate,s=t.getRootHostContainer,c=t.popHostContext,p=t.getHostContext,d=t.popHostContainer,f=n.prepareToHydrateHostInstance,h=n.prepareToHydrateHostTextInstance,m=n.popHydrationState;return{completeWork:function(e,t,n){var g=t.pendingProps;switch(null===g?g=t.memoizedProps:t.pendingWorkPriority===Za&&n!==Za||(t.pendingProps=null),t.tag){case Ha:return null;case Wa:return Ra(t),null;case Va:return d(t),Ua(t),g=t.stateNode,g.pendingContext&&(g.context=g.pendingContext,g.pendingContext=null),null!==e&&null!==e.child||(m(t),t.effectTag&=~qa),null;case ja:c(t),n=s();var y=t.type;if(null!==e&&null!=t.stateNode){var v=e.memoizedProps,b=t.stateNode,C=p();g=u(b,y,v,g,n,C),(t.updateQueue=g)&&(t.effectTag|=Xa),e.ref!==t.ref&&(t.effectTag|=Ga)}else{if(!g)return null===t.stateNode&&r("166"),null;if(e=p(),m(t))f(t,n,e)&&(t.effectTag|=Xa);else{e=o(y,g,n,e,t);e:for(v=t.child;null!==v;){if(v.tag===ja||v.tag===Ba)i(e,v.stateNode);else if(v.tag!==za&&null!==v.child){v=v.child;continue}if(v===t)break e;for(;null===v.sibling;){if(null===v.return||v.return===t)break e;v=v.return}v=v.sibling}l(e,y,g,n)&&(t.effectTag|=Xa),t.stateNode=e}null!==t.ref&&(t.effectTag|=Ga)}return null;case Ba:if(e&&null!=t.stateNode)e.memoizedProps!==g&&(t.effectTag|=Xa);else{if("string"!=typeof g)return null===t.stateNode&&r("166"),null;e=s(),n=p(),m(t)?h(t)&&(t.effectTag|=Xa):t.stateNode=a(g,e,n,t)}return null;case Ka:(g=t.memoizedProps)||r("165"),t.tag=Ya,n=[];e:for((y=t.stateNode)&&(y.return=t);null!==y;){if(y.tag===ja||y.tag===Ba||y.tag===za)r("164");else if(y.tag===$a)n.push(y.type);else if(null!==y.child){y.child.return=y,y=y.child;continue}for(;null===y.sibling;){if(null===y.return||y.return===t)break e;y=y.return}y.sibling.return=y.return,y=y.sibling}return y=g.handler,g=y(g.props,n),t.child=Aa(t,null!==e?e.child:null,g,t.pendingWorkPriority),t.child;case Ya:return t.tag=Ka,null;case $a:case Qa:return null;case za:return t.effectTag|=Xa,d(t),null;case La:r("167");default:r("156")}}}}function se(e){return function(t){try{return e(t)}catch(e){}}}function ce(e,t){function n(e){var n=e.ref;if(null!==n)try{n(null)}catch(n){t(e,n)}}function o(e){return e.tag===oi||e.tag===ri||e.tag===ii}function a(e){for(var t=e;;)if(l(t),null!==t.child&&t.tag!==ii)t.child.return=t,t=t.child;else{if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return}t.sibling.return=t.return,t=t.sibling}}function i(e){for(var t=e,n=!1,o=void 0,i=void 0;;){if(!n){n=t.return;e:for(;;){switch(null===n&&r("160"),n.tag){case oi:o=n.stateNode,i=!1;break e;case ri:case ii:o=n.stateNode.containerInfo,i=!0;break e}n=n.return}n=!0}if(t.tag===oi||t.tag===ai)a(t),i?y(o,t.stateNode):g(o,t.stateNode);else if(t.tag===ii?o=t.stateNode.containerInfo:l(t),null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return,t.tag===ii&&(n=!1)}t.sibling.return=t.return,t=t.sibling}}function l(e){switch("function"==typeof si&&si(e),e.tag){case ni:n(e);var r=e.stateNode;if("function"==typeof r.componentWillUnmount)try{r.props=e.memoizedProps,r.state=e.memoizedState,r.componentWillUnmount()}catch(n){t(e,n)}break;case oi:n(e);break;case li:a(e.stateNode);break;case ii:i(e)}}var u=e.commitMount,s=e.commitUpdate,c=e.resetTextContent,p=e.commitTextUpdate,d=e.appendChild,f=e.appendChildToContainer,h=e.insertBefore,m=e.insertInContainerBefore,g=e.removeChild,y=e.removeChildFromContainer,v=e.getPublicInstance;return{commitPlacement:function(e){e:{for(var t=e.return;null!==t;){if(o(t)){var n=t;break e}t=t.return}r("160"),n=void 0}var a=t=void 0;switch(n.tag){case oi:t=n.stateNode,a=!1;break;case ri:case ii:t=n.stateNode.containerInfo,a=!0;break;default:r("161")}n.effectTag&fi&&(c(t),n.effectTag&=~fi);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||o(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;n.tag!==oi&&n.tag!==ai;){if(n.effectTag&ci)continue t;if(null===n.child||n.tag===ii)continue t;n.child.return=n,n=n.child}if(!(n.effectTag&ci)){n=n.stateNode;break e}}for(var i=e;;){if(i.tag===oi||i.tag===ai)n?a?m(t,i.stateNode,n):h(t,i.stateNode,n):a?f(t,i.stateNode):d(t,i.stateNode);else if(i.tag!==ii&&null!==i.child){i.child.return=i,i=i.child;continue}if(i===e)break;for(;null===i.sibling;){if(null===i.return||i.return===e)return;i=i.return}i.sibling.return=i.return,i=i.sibling}},commitDeletion:function(e){i(e),e.return=null,e.child=null,e.alternate&&(e.alternate.child=null,e.alternate.return=null)},commitWork:function(e,t){switch(t.tag){case ni:break;case oi:var n=t.stateNode;if(null!=n){var o=t.memoizedProps;e=null!==e?e.memoizedProps:o;var a=t.type,i=t.updateQueue;t.updateQueue=null,null!==i&&s(n,i,a,e,o,t)}break;case ai:null===t.stateNode&&r("162"),n=t.memoizedProps,p(t.stateNode,null!==e?e.memoizedProps:n,n);break;case ri:case ii:break;default:r("163")}},commitLifeCycles:function(e,t){switch(t.tag){case ni:var n=t.stateNode;if(t.effectTag&pi)if(null===e)n.props=t.memoizedProps,n.state=t.memoizedState,n.componentDidMount();else{var o=e.memoizedProps;e=e.memoizedState,n.props=t.memoizedProps,n.state=t.memoizedState,n.componentDidUpdate(o,e)}t.effectTag&di&&null!==t.updateQueue&&ui(t,t.updateQueue,n);break;case ri:e=t.updateQueue,null!==e&&ui(t,e,t.child&&t.child.stateNode);break;case oi:n=t.stateNode,null===e&&t.effectTag&pi&&u(n,t.type,t.memoizedProps,t);break;case ai:case ii:break;default:r("163")}},commitAttachRef:function(e){var t=e.ref;if(null!==t){var n=e.stateNode;switch(e.tag){case oi:t(v(n));break;default:t(n)}}},commitDetachRef:function(e){null!==(e=e.ref)&&e(null)}}}function pe(e){function t(e){return e===yi&&r("174"),e}var n=e.getChildHostContext,o=e.getRootHostContext,a=hi(yi),i=hi(yi),l=hi(yi);return{getHostContext:function(){return t(a.current)},getRootHostContainer:function(){return t(l.current)},popHostContainer:function(e){mi(a,e),mi(i,e),mi(l,e)},popHostContext:function(e){i.current===e&&(mi(a,e),mi(i,e))},pushHostContainer:function(e,t){gi(l,t,e),t=o(t),gi(i,e,e),gi(a,t,e)},pushHostContext:function(e){var r=t(l.current),o=t(a.current);r=n(o,e.type,r),o!==r&&(gi(i,e,e),gi(a,r,e))},resetHostContainer:function(){a.current=yi,l.current=yi}}}function de(e){function t(e,t){var n=Pi();n.stateNode=t,n.return=e,n.effectTag=Ei,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function n(e,t){switch(e.tag){case vi:return i(t,e.type,e.pendingProps);case bi:return l(t,e.pendingProps);default:return!1}}function o(e){for(e=e.return;null!==e&&e.tag!==vi&&e.tag!==Ci;)e=e.return;h=e}var a=e.shouldSetTextContent,i=e.canHydrateInstance,l=e.canHydrateTextInstance,u=e.getNextHydratableSibling,s=e.getFirstHydratableChild,c=e.hydrateInstance,p=e.hydrateTextInstance,d=e.didNotHydrateInstance,f=e.didNotFindHydratableInstance;if(e=e.didNotFindHydratableTextInstance,!(i&&l&&u&&s&&c&&p&&d&&f&&e))return{enterHydrationState:function(){return!1},resetHydrationState:function(){},tryToClaimNextHydratableInstance:function(){},prepareToHydrateHostInstance:function(){r("175")},prepareToHydrateHostTextInstance:function(){r("176")},popHydrationState:function(){return!1}};var h=null,m=null,g=!1;return{enterHydrationState:function(e){return m=s(e.stateNode.containerInfo),h=e,g=!0},resetHydrationState:function(){m=h=null,g=!1},tryToClaimNextHydratableInstance:function(e){if(g){var r=m;if(r){if(!n(e,r)){if(!(r=u(r))||!n(e,r))return e.effectTag|=ki,g=!1,void(h=e);t(h,m)}e.stateNode=r,h=e,m=s(r)}else e.effectTag|=ki,g=!1,h=e}},prepareToHydrateHostInstance:function(e,t,n){return t=c(e.stateNode,e.type,e.memoizedProps,t,n,e),e.updateQueue=t,null!==t},prepareToHydrateHostTextInstance:function(e){return p(e.stateNode,e.memoizedProps,e)},popHydrationState:function(e){if(e!==h)return!1;if(!g)return o(e),g=!0,!1;var n=e.type;if(e.tag!==vi||"head"!==n&&"body"!==n&&!a(n,e.memoizedProps))for(n=m;n;)t(e,n),n=u(n);return o(e),m=h?u(e.stateNode):null,!0}}}function fe(e){function t(){for(;null!==Y&&Y.current.pendingWorkPriority===Ii;){Y.isScheduled=!1;var e=Y.nextScheduledRoot;if(Y.nextScheduledRoot=null,Y===$)return $=Y=null,B=Ii,null;Y=e}e=Y;for(var t=null,n=Ii;null!==e;)e.current.pendingWorkPriority!==Ii&&(n===Ii||n>e.current.pendingWorkPriority)&&(n=e.current.pendingWorkPriority,t=e),e=e.nextScheduledRoot;null!==t?(B=n,wi(),Xi(),k(),j=_i(t.current,n),t!==oe&&(re=0,oe=t)):(B=Ii,oe=j=null)}function n(n){ee=!0,K=null;var o=n.stateNode;if(o.current===n&&r("177"),B!==Oi&&B!==Fi||re++,Ni.current=null,n.effectTag>Ui)if(null!==n.lastEffect){n.lastEffect.nextEffect=n;var a=n.firstEffect}else a=n;else a=n.firstEffect;for(A(),z=a;null!==z;){var i=!1,l=void 0;try{for(;null!==z;){var u=z.effectTag;if(u&ji&&e.resetTextContent(z.stateNode),u&Ki){var s=z.alternate;null!==s&&F(s)}switch(u&~(Bi|zi|ji|Ki|Ui)){case Li:_(z),z.effectTag&=~Li;break;case Wi:_(z),z.effectTag&=~Li,S(z.alternate,z);break;case Hi:S(z.alternate,z);break;case Vi:te=!0,x(z),te=!1}z=z.nextEffect}}catch(e){i=!0,l=e}i&&(null===z&&r("178"),p(z,l),null!==z&&(z=z.nextEffect))}for(R(),o.current=n,z=a;null!==z;){o=!1,a=void 0;try{for(;null!==z;){var c=z.effectTag;if(c&(Hi|Bi)&&I(z.alternate,z),c&Ki&&O(z),c&zi)switch(i=z,l=void 0,null!==q&&(l=q.get(i),q.delete(i),null==l&&null!==i.alternate&&(i=i.alternate,l=q.get(i),q.delete(i))),null==l&&r("184"),i.tag){case qi:i.stateNode.componentDidCatch(l.error,{componentStack:l.componentStack});break;case Yi:null===Z&&(Z=l.error);break;default:r("157")}var d=z.nextEffect;z.nextEffect=null,z=d}}catch(e){o=!0,a=e}o&&(null===z&&r("178"),p(z,a),null!==z&&(z=z.nextEffect))}ee=!1,"function"==typeof Si&&Si(n.stateNode),X&&(X.forEach(y),X=null),t()}function o(e){for(;;){var t=N(e.alternate,e,B),n=e.return,r=e.sibling,o=e;if(!(o.pendingWorkPriority!==Ii&&o.pendingWorkPriority>B)){for(var a=Gi(o),i=o.child;null!==i;)a=xi(a,i.pendingWorkPriority),i=i.sibling;o.pendingWorkPriority=a}if(null!==t)return t;if(null!==n&&(null===n.firstEffect&&(n.firstEffect=e.firstEffect),null!==e.lastEffect&&(null!==n.lastEffect&&(n.lastEffect.nextEffect=e.firstEffect),n.lastEffect=e.lastEffect),e.effectTag>Ui&&(null!==n.lastEffect?n.lastEffect.nextEffect=e:n.firstEffect=e,n.lastEffect=e)),null!==r)return r;if(null===n){K=e;break}e=n}return null}function a(e){var t=T(e.alternate,e,B);return null===t&&(t=o(e)),Ni.current=null,t}function i(e){var t=w(e.alternate,e,B);return null===t&&(t=o(e)),Ni.current=null,t}function l(e){c(Ai,e)}function u(){if(null!==q&&0e)){U=B;e:for(;;){if(B<=Fi)for(;null!==j&&!(null===(j=a(j))&&(null===K&&r("179"),U=Fi,n(K),U=B,u(),B===Ii||B>e||B>Fi)););else if(null!==o)for(;null!==j&&!H;)if(1e||BFi&&!Q&&(D(l),Q=!0),e=Z,J=H=L=!1,oe=G=q=Z=null,re=0,null!==e)throw e}function p(e,t){var n=Ni.current=null,r=!1,o=!1,a=null;if(e.tag===Yi)n=e,f(e)&&(J=!0);else for(var i=e.return;null!==i&&null===n;){if(i.tag===qi?"function"==typeof i.stateNode.componentDidCatch&&(r=!0,a=d(i),n=i,o=!0):i.tag===Yi&&(n=i),f(i)){if(te||null!==X&&(X.has(i)||null!==i.alternate&&X.has(i.alternate)))return null;n=null,o=!1}i=i.return}if(null!==n){null===G&&(G=new Set),G.add(n);var l="";i=e;do{e:switch(i.tag){case fo:case ho:case mo:case go:var u=i._debugOwner,s=i._debugSource,c=d(i),p=null;u&&(p=d(u)),u=s,c="\n in "+(c||"Unknown")+(u?" (at "+u.fileName.replace(/^.*[\\\/]/,"")+":"+u.lineNumber+")":p?" (created by "+p+")":"");break e;default:c=""}l+=c,i=i.return}while(i);i=l,e=d(e),null===q&&(q=new Map),t={componentName:e,componentStack:i,error:t,errorBoundary:r?n.stateNode:null,errorBoundaryFound:r,errorBoundaryName:a,willRetry:o},q.set(n,t);try{console.error(t.error)}catch(e){console.error(e)}return ee?(null===X&&(X=new Set),X.add(n)):y(n),n}return null===Z&&(Z=t),null}function f(e){return null!==G&&(G.has(e)||null!==e.alternate&&G.has(e.alternate))}function h(e,t){return m(e,t,!1)}function m(e,t){re>ne&&(J=!0,r("185")),!L&&t<=B&&(j=null);for(var n=!0;null!==e&&n;){if(n=!1,(e.pendingWorkPriority===Ii||e.pendingWorkPriority>t)&&(n=!0,e.pendingWorkPriority=t),null!==e.alternate&&(e.alternate.pendingWorkPriority===Ii||e.alternate.pendingWorkPriority>t)&&(n=!0,e.alternate.pendingWorkPriority=t),null===e.return){if(e.tag!==Yi)break;var o=e.stateNode;if(t===Ii||o.isScheduled||(o.isScheduled=!0,$?$.nextScheduledRoot=o:Y=o,$=o),!L)switch(t){case Oi:V?c(Oi,null):c(Fi,null);break;case Fi:W||r("186");break;default:Q||(D(l),Q=!0)}}e=e.return}}function g(e,t){var n=U;return n===Ii&&(n=!M||e.internalContextTag&Ri||t?Mi:Oi),n===Oi&&(L||W)?Fi:n}function y(e){m(e,Fi,!0)}var v=pe(e),b=de(e),C=v.popHostContainer,E=v.popHostContext,k=v.resetHostContainer,P=le(e,v,b,h,g),T=P.beginWork,w=P.beginFailedWork,N=ue(e,v,b).completeWork;v=ce(e,p);var _=v.commitPlacement,x=v.commitDeletion,S=v.commitWork,I=v.commitLifeCycles,O=v.commitAttachRef,F=v.commitDetachRef,D=e.scheduleDeferredCallback,M=e.useSyncScheduling,A=e.prepareForCommit,R=e.resetAfterCommit,U=Ii,L=!1,H=!1,W=!1,V=!1,j=null,B=Ii,z=null,K=null,Y=null,$=null,Q=!1,q=null,G=null,X=null,Z=null,J=!1,ee=!1,te=!1,ne=1e3,re=0,oe=null;return{scheduleUpdate:h,getPriorityContext:g,batchedUpdates:function(e,t){var n=W;W=!0;try{return e(t)}finally{W=n,L||W||c(Fi,null)}},unbatchedUpdates:function(e){var t=V,n=W;V=W,W=!1;try{return e()}finally{W=n,V=t}},flushSync:function(e){var t=W,n=U;W=!0,U=Oi;try{return e()}finally{W=t,U=n,L&&r("187"),c(Fi,null)}},deferredUpdates:function(e){var t=U;U=Mi;try{return e()}finally{U=t}}}}function he(){r("196")}function me(e){return e?(e=Qt.get(e),"number"==typeof e.tag?he(e):e._processChildContext(e._context)):Ct}function ge(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function ye(e,t){var n=ge(e);e=0;for(var r;n;){if(n.nodeType===al){if(r=e+n.textContent.length,e<=t&&r>=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=ge(n)}}function ve(){return!il&>.canUseDOM&&(il="textContent"in document.documentElement?"textContent":"innerText"),il}function be(){r("211")}function Ce(){r("212")}function Ee(e){if(null==e)return null;if(e.nodeType===pl)return e;var t=Qt.get(e);if(t)return"number"==typeof t.tag?be(t):Ce(t);"function"==typeof e.render?r("188"):r("213",Object.keys(e))}function ke(e){if(void 0!==e._hostParent)return e._hostParent;if("number"==typeof e.tag){do{e=e.return}while(e&&e.tag!==dl);if(e)return e}return null}function Pe(e,t){for(var n=0,r=e;r;r=ke(r))n++;r=0;for(var o=t;o;o=ke(o))r++;for(;0this.eventPool.length&&this.eventPool.push(e)}function Fe(e){e.eventPool=[],e.getPooled=Ie,e.release=Oe}function De(e,t,n,r){return Se.call(this,e,t,n,r)}function Me(e,t,n,r){return Se.call(this,e,t,n,r)}function Ae(e,t){switch(e){case"topKeyUp":return-1!==El.indexOf(t.keyCode);case"topKeyDown":return 229!==t.keyCode;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function Re(e){return e=e.detail,"object"==typeof e&&"data"in e?e.data:null}function Ue(e,t){switch(e){case"topCompositionEnd":return Re(t);case"topKeyPress":return 32!==t.which?null:(Il=!0,xl);case"topTextInput":return e=t.data,e===xl&&Il?null:e;default:return null}}function Le(e,t){if(Ol)return"topCompositionEnd"===e||!kl&&Ae(e,t)?(e=vl.getData(),vl.reset(),Ol=!1,e):null;switch(e){case"topPaste":return null;case"topKeyPress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1=u.hasBooleanValue+u.hasNumericValue+u.hasOverloadedBooleanValue||r("50",i),a.hasOwnProperty(i)&&(u.attributeName=a[i]),o.hasOwnProperty(i)&&(u.attributeNamespace=o[i]),e.hasOwnProperty(i)&&(u.mutationMethod=e[i]),Mt.properties[i]=u}}},Mt={ID_ATTRIBUTE_NAME:"data-reactid",ROOT_ATTRIBUTE_NAME:"data-reactroot",ATTRIBUTE_NAME_START_CHAR:":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD",ATTRIBUTE_NAME_CHAR:":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040",properties:{},shouldSetAttribute:function(e,t){if(Mt.isReservedProp(e)||!("o"!==e[0]&&"O"!==e[0]||"n"!==e[1]&&"N"!==e[1]))return!1;if(null===t)return!0;switch(typeof t){case"boolean":return Mt.shouldAttributeAcceptBooleanValue(e);case"undefined":case"number":case"string":case"object":return!0;default:return!1}},getPropertyInfo:function(e){return Mt.properties.hasOwnProperty(e)?Mt.properties[e]:null},shouldAttributeAcceptBooleanValue:function(e){if(Mt.isReservedProp(e))return!0;var t=Mt.getPropertyInfo(e);return t?t.hasBooleanValue||t.hasStringBooleanValue||t.hasOverloadedBooleanValue:"data-"===(e=e.toLowerCase().slice(0,5))||"aria-"===e},isReservedProp:function(e){return Ft.hasOwnProperty(e)},injection:Dt},At=Mt,Rt={IndeterminateComponent:0,FunctionalComponent:1,ClassComponent:2,HostRoot:3,HostPortal:4,HostComponent:5,HostText:6,CoroutineComponent:7,CoroutineHandlerPhase:8,YieldComponent:9,Fragment:10},Ut={ELEMENT_NODE:1,TEXT_NODE:3,COMMENT_NODE:8,DOCUMENT_NODE:9,DOCUMENT_FRAGMENT_NODE:11},Lt=Rt.HostComponent,Ht=Rt.HostText,Wt=Ut.ELEMENT_NODE,Vt=Ut.COMMENT_NODE,jt=At.ID_ATTRIBUTE_NAME,Bt={hasCachedChildNodes:1},zt=Math.random().toString(36).slice(2),Kt="__reactInternalInstance$"+zt,Yt="__reactEventHandlers$"+zt,$t={getClosestInstanceFromNode:p,getInstanceFromNode:function(e){var t=e[Kt];return t?t.tag===Lt||t.tag===Ht?t:t._hostNode===e?t:null:(t=p(e),null!=t&&t._hostNode===e?t:null)},getNodeFromInstance:function(e){if(e.tag===Lt||e.tag===Ht)return e.stateNode;if(void 0===e._hostNode&&r("33"),e._hostNode)return e._hostNode;for(var t=[];!e._hostNode;)t.push(e),e._hostParent||r("34"),e=e._hostParent;for(;t.length;e=t.pop())c(e,e._hostNode);return e._hostNode},precacheChildNodes:c,precacheNode:s,uncacheNode:function(e){var t=e._hostNode;t&&(delete t[Kt],e._hostNode=null)},precacheFiberNode:function(e,t){t[Kt]=e},getFiberCurrentPropsFromNode:function(e){return e[Yt]||null},updateFiberProps:function(e,t){e[Yt]=t}},Qt={remove:function(e){e._reactInternalFiber=void 0},get:function(e){return e._reactInternalFiber},has:function(e){return void 0!==e._reactInternalFiber},set:function(e,t){e._reactInternalFiber=t}},qt={ReactCurrentOwner:mt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner},Gt={NoEffect:0,PerformedWork:1,Placement:2,Update:4,PlacementAndUpdate:6,Deletion:8,ContentReset:16,Callback:32,Err:64,Ref:128},Xt=Rt.HostComponent,Zt=Rt.HostRoot,Jt=Rt.HostPortal,en=Rt.HostText,tn=Gt.NoEffect,nn=Gt.Placement,rn={isFiberMounted:function(e){return 2===f(e)},isMounted:function(e){return!!(e=Qt.get(e))&&2===f(e)},findCurrentFiberUsingSlowPath:m,findCurrentHostFiber:function(e){if(!(e=m(e)))return null;for(var t=e;;){if(t.tag===Xt||t.tag===en)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null},findCurrentHostFiberWithNoPortals:function(e){if(!(e=m(e)))return null;for(var t=e;;){if(t.tag===Xt||t.tag===en)return t;if(t.child&&t.tag!==Jt)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}},on={_caughtError:null,_hasCaughtError:!1,_rethrowError:null,_hasRethrowError:!1,injection:{injectErrorUtils:function(e){"function"!=typeof e.invokeGuardedCallback&&r("197"),g=e.invokeGuardedCallback}},invokeGuardedCallback:function(e,t,n,r,o,a,i,l,u){g.apply(on,arguments)},invokeGuardedCallbackAndCatchFirstError:function(e,t,n,r,o,a,i,l,u){if(on.invokeGuardedCallback.apply(this,arguments),on.hasCaughtError()){var s=on.clearCaughtError();on._hasRethrowError||(on._hasRethrowError=!0,on._rethrowError=s)}},rethrowCaughtError:function(){return y.apply(on,arguments)},hasCaughtError:function(){return on._hasCaughtError},clearCaughtError:function(){if(on._hasCaughtError){var e=on._caughtError;return on._caughtError=null,on._hasCaughtError=!1,e}r("198")}},an=on,ln={isEndish:function(e){return"topMouseUp"===e||"topTouchEnd"===e||"topTouchCancel"===e},isMoveish:function(e){return"topMouseMove"===e||"topTouchMove"===e},isStartish:function(e){return"topMouseDown"===e||"topTouchStart"===e},executeDirectDispatch:function(e){var t=e._dispatchListeners,n=e._dispatchInstances;return Array.isArray(t)&&r("103"),e.currentTarget=t?ln.getNodeFromInstance(n):null,t=t?t(e):null,e.currentTarget=null,e._dispatchListeners=null,e._dispatchInstances=null,t},executeDispatchesInOrder:function(e,t){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var o=0;oyn.length&&yn.push(e)}}}},bn=vn,Cn=null,En={injection:{injectEventPluginOrder:Ot.injectEventPluginOrder,injectEventPluginsByName:Ot.injectEventPluginsByName},getListener:function(e,t){if("number"==typeof e.tag){var n=e.stateNode;if(!n)return null;var o=un.getFiberCurrentPropsFromNode(n);if(!o)return null;if(n=o[t],I(t,e.type,o))return null}else{if("string"==typeof(o=e._currentElement)||"number"==typeof o||!e._rootNodeID)return null;if(e=o.props,n=e[t],I(t,o.type,e))return null}return n&&"function"!=typeof n&&r("231",t,typeof n),n},extractEvents:function(e,t,n,r){for(var o,a=Ot.plugins,i=0;in||r.hasOverloadedBooleanValue&&!1===n?Vn.deleteValueForProperty(e,t):r.mustUseProperty?e[r.propertyName]=n:(t=r.attributeName,(o=r.attributeNamespace)?e.setAttributeNS(o,t,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&!0===n?e.setAttribute(t,""):e.setAttribute(t,""+n))}else Vn.setValueForAttribute(e,t,At.shouldSetAttribute(t,n)?n:null)},setValueForAttribute:function(e,t,n){A(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))},deleteValueForAttribute:function(e,t){e.removeAttribute(t)},deleteValueForProperty:function(e,t){var n=At.getPropertyInfo(t);n?(t=n.mutationMethod)?t(e,void 0):n.mustUseProperty?e[n.propertyName]=!n.hasBooleanValue&&"":e.removeAttribute(n.attributeName):e.removeAttribute(t)}},jn=Vn,Bn=qt.ReactDebugCurrentFrame,zn={current:null,phase:null,resetCurrentFiber:function(){Bn.getCurrentStack=null,zn.current=null,zn.phase=null},setCurrentFiber:function(e,t){Bn.getCurrentStack=R,zn.current=e,zn.phase=t},getCurrentFiberOwnerName:function(){return null},getCurrentFiberStackAddendum:R},Kn=zn,Yn={getHostProps:function(e,t){var n=t.value,r=t.checked;return yt({type:void 0,step:void 0,min:void 0,max:void 0},t,{defaultChecked:void 0,defaultValue:void 0,value:null!=n?n:e._wrapperState.initialValue,checked:null!=r?r:e._wrapperState.initialChecked})},initWrapperState:function(e,t){var n=t.defaultValue;e._wrapperState={initialChecked:null!=t.checked?t.checked:t.defaultChecked,initialValue:null!=t.value?t.value:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}},updateWrapper:function(e,t){var n=t.checked;null!=n&&jn.setValueForProperty(e,"checked",n||!1),n=t.value,null!=n?0===n&&""===e.value?e.value="0":"number"===t.type?(t=parseFloat(e.value)||0,(n!=t||n==t&&e.value!=n)&&(e.value=""+n)):e.value!==""+n&&(e.value=""+n):(null==t.value&&null!=t.defaultValue&&e.defaultValue!==""+t.defaultValue&&(e.defaultValue=""+t.defaultValue),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked))},postMountWrapper:function(e,t){switch(t.type){case"submit":case"reset":break;case"color":case"date":case"datetime":case"datetime-local":case"month":case"time":case"week":e.value="",e.value=e.defaultValue;break;default:e.value=e.value}t=e.name,""!==t&&(e.name=""),e.defaultChecked=!e.defaultChecked,e.defaultChecked=!e.defaultChecked,""!==t&&(e.name=t)},restoreControlledState:function(e,t){Yn.updateWrapper(e,t);var n=t.name;if("radio"===t.type&&null!=n){for(t=e;t.parentNode;)t=t.parentNode;for(n=t.querySelectorAll("input[name="+JSON.stringify(""+n)+'][type="radio"]'),t=0;t=t.length||r("93"),t=t[0]),n=""+t),null==n&&(n=""),o=n),e._wrapperState={initialValue:""+o}},updateWrapper:function(e,t){var n=t.value;null!=n&&(n=""+n,n!==e.value&&(e.value=n),null==t.defaultValue&&(e.defaultValue=n)),null!=t.defaultValue&&(e.defaultValue=t.defaultValue)},postMountWrapper:function(e){var t=e.textContent;t===e._wrapperState.initialValue&&(e.value=t)},restoreControlledState:function(e,t){Gn.updateWrapper(e,t)}},Xn=Gn,Zn=yt({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),Jn={_getTrackerFromNode:function(e){return e._valueTracker},track:function(e){e._valueTracker||(e._valueTracker=V(e))},updateValueIfChanged:function(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=W(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)},stopTracking:function(e){(e=e._valueTracker)&&e.stopTracking()}},er=_t.Namespaces,tr=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,o){MSApp.execUnsafeLocalFunction(function(){return e(t,n)})}:e}(function(e,t){if(e.namespaceURI!==er.svg||"innerHTML"in e)e.innerHTML=t;else for(Rn=Rn||document.createElement("div"),Rn.innerHTML=""+t+"",t=Rn.firstChild;t.firstChild;)e.appendChild(t.firstChild)}),nr=/["'&<>]/,rr=Ut.TEXT_NODE;gt.canUseDOM&&("textContent"in document.documentElement||(B=function(e,t){if(e.nodeType===rr)e.nodeValue=t;else{if("boolean"==typeof t||"number"==typeof t)t=""+t;else{t=""+t;var n=nr.exec(t);if(n){var r,o="",a=0;for(r=n.index;r<\/script>",e=e.removeChild(e.firstChild)):e="string"==typeof t.is?n.createElement(e,{is:t.is}):n.createElement(e):e=n.createElementNS(r,e),e},createTextNode:function(e,t){return(t.nodeType===ar?t:t.ownerDocument).createTextNode(e)},setInitialProperties:function(e,t,n,r){var o=j(t,n);switch(t){case"iframe":case"object":Sn.trapBubbledEvent("topLoad","load",e);var a=n;break;case"video":case"audio":for(a in pr)pr.hasOwnProperty(a)&&Sn.trapBubbledEvent(a,pr[a],e);a=n;break;case"source":Sn.trapBubbledEvent("topError","error",e),a=n;break;case"img":case"image":Sn.trapBubbledEvent("topError","error",e),Sn.trapBubbledEvent("topLoad","load",e),a=n;break;case"form":Sn.trapBubbledEvent("topReset","reset",e),Sn.trapBubbledEvent("topSubmit","submit",e),a=n;break;case"details":Sn.trapBubbledEvent("topToggle","toggle",e),a=n;break;case"input":$n.initWrapperState(e,n),a=$n.getHostProps(e,n),Sn.trapBubbledEvent("topInvalid","invalid",e),z(r,"onChange");break;case"option":Qn.validateProps(e,n),a=Qn.getHostProps(e,n);break;case"select":qn.initWrapperState(e,n),a=qn.getHostProps(e,n),Sn.trapBubbledEvent("topInvalid","invalid",e),z(r,"onChange");break;case"textarea":Xn.initWrapperState(e,n),a=Xn.getHostProps(e,n),Sn.trapBubbledEvent("topInvalid","invalid",e),z(r,"onChange");break;default:a=n}H(t,a);var i,l=a;for(i in l)if(l.hasOwnProperty(i)){var u=l[i];"style"===i?Un.setValueForStyles(e,u):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&tr(e,u):"children"===i?"string"==typeof u?or(e,u):"number"==typeof u&&or(e,""+u):"suppressContentEditableWarning"!==i&&(ur.hasOwnProperty(i)?null!=u&&z(r,i):o?jn.setValueForAttribute(e,i,u):null!=u&&jn.setValueForProperty(e,i,u))}switch(t){case"input":Jn.track(e),$n.postMountWrapper(e,n);break;case"textarea":Jn.track(e),Xn.postMountWrapper(e,n);break;case"option":Qn.postMountWrapper(e,n);break;case"select":qn.postMountWrapper(e,n);break;default:"function"==typeof a.onClick&&(e.onclick=bt)}},diffProperties:function(e,t,n,r,o){var a=null;switch(t){case"input":n=$n.getHostProps(e,n),r=$n.getHostProps(e,r),a=[];break;case"option":n=Qn.getHostProps(e,n),r=Qn.getHostProps(e,r),a=[];break;case"select":n=qn.getHostProps(e,n),r=qn.getHostProps(e,r),a=[];break;case"textarea":n=Xn.getHostProps(e,n),r=Xn.getHostProps(e,r),a=[];break;default:"function"!=typeof n.onClick&&"function"==typeof r.onClick&&(e.onclick=bt)}H(t,r);var i,l;e=null;for(i in n)if(!r.hasOwnProperty(i)&&n.hasOwnProperty(i)&&null!=n[i])if("style"===i)for(l in t=n[i])t.hasOwnProperty(l)&&(e||(e={}),e[l]="");else"dangerouslySetInnerHTML"!==i&&"children"!==i&&"suppressContentEditableWarning"!==i&&(ur.hasOwnProperty(i)?a||(a=[]):(a=a||[]).push(i,null));for(i in r){var u=r[i];if(t=null!=n?n[i]:void 0,r.hasOwnProperty(i)&&u!==t&&(null!=u||null!=t))if("style"===i)if(t){for(l in t)!t.hasOwnProperty(l)||u&&u.hasOwnProperty(l)||(e||(e={}),e[l]="");for(l in u)u.hasOwnProperty(l)&&t[l]!==u[l]&&(e||(e={}),e[l]=u[l])}else e||(a||(a=[]),a.push(i,e)),e=u;else"dangerouslySetInnerHTML"===i?(u=u?u.__html:void 0,t=t?t.__html:void 0,null!=u&&t!==u&&(a=a||[]).push(i,""+u)):"children"===i?t===u||"string"!=typeof u&&"number"!=typeof u||(a=a||[]).push(i,""+u):"suppressContentEditableWarning"!==i&&(ur.hasOwnProperty(i)?(null!=u&&z(o,i),a||t===u||(a=[])):(a=a||[]).push(i,u))}return e&&(a=a||[]).push("style",e),a},updateProperties:function(e,t,n,r,o){j(n,r),r=j(n,o);for(var a=0;at&&(t=8),Cr=t=K(s.priorityLevel,i);){n.first=s.next,null===n.first&&(n.last=null);var c;s.isReplace?(o=G(s,r,o,a),u=!0):(c=G(s,r,o,a))&&(o=u?yt({},o,c):yt(o,c),u=!1),s.isForced&&(l=!0),null===s.callback||s.isTopLevelUnmount&&null!==s.next||(e=null!==e?e:[],e.push(s.callback),t.effectTag|=Sr),s=s.next}return n.callbackList=e,n.hasForceUpdate=l,null!==n.first||null!==e||l||(t.updateQueue=null),o},commitCallbacks:function(e,t,n){if(null!==(e=t.callbackList))for(t.callbackList=null,t=0;tHr||(e.current=Lr[Hr],Lr[Hr]=null,Hr--)},push:function(e,t){Hr++,Lr[Hr]=e.current,e.current=t},reset:function(){for(;-1e)?e:t}},po=co.createHostRootFiber,fo=Rt.IndeterminateComponent,ho=Rt.FunctionalComponent,mo=Rt.ClassComponent,go=Rt.HostComponent;"function"==typeof Symbol&&Symbol.for?(Tr=Symbol.for("react.coroutine"),wr=Symbol.for("react.yield")):(Tr=60104,wr=60105);var yo={createCoroutine:function(e,t,n){var r=3t&&(r=t,t=o,o=r),r=ye(e,o),e=ye(e,t),r&&e){var a=document.createRange();a.setStart(r.node,r.offset),n.removeAllRanges(),o>t?(n.addRange(a),n.extend(e.node,e.offset)):(a.setEnd(e.node,e.offset),n.addRange(a))}}}},ul=Ut.ELEMENT_NODE,sl={hasSelectionCapabilities:function(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)},getSelectionInformation:function(){var e=Tt();return{focusedElem:e,selectionRange:sl.hasSelectionCapabilities(e)?sl.getSelection(e):null}},restoreSelection:function(e){var t=Tt(),n=e.focusedElem;if(e=e.selectionRange,t!==n&&kt(document.documentElement,n)){for(sl.hasSelectionCapabilities(n)&&sl.setSelection(n,e),t=[],e=n;e=e.parentNode;)e.nodeType===ul&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(Pt(n),n=0;n=parseInt(wl.version(),10))}var Nl=Tl,_l=gt.canUseDOM&&(!kl||Pl&&8=Pl),xl=String.fromCharCode(32),Sl={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"topBlur topCompositionEnd topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"topBlur topCompositionStart topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"topBlur topCompositionUpdate topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")}},Il=!1,Ol=!1,Fl={eventTypes:Sl,extractEvents:function(e,t,n,r){var o;if(kl)e:{switch(e){case"topCompositionStart":var a=Sl.compositionStart;break e;case"topCompositionEnd":a=Sl.compositionEnd;break e;case"topCompositionUpdate":a=Sl.compositionUpdate;break e}a=void 0}else Ol?Ae(e,n)&&(a=Sl.compositionEnd):"topKeyDown"===e&&229===n.keyCode&&(a=Sl.compositionStart);return a?(_l&&(Ol||a!==Sl.compositionStart?a===Sl.compositionEnd&&Ol&&(o=vl.getData()):Ol=vl.initialize(r)),a=De.getPooled(a,t,n,r),o?a.data=o:null!==(o=Re(n))&&(a.data=o),ml.accumulateTwoPhaseDispatches(a),o=a):o=null,(e=Nl?Ue(e,n):Le(e,n))?(t=Me.getPooled(Sl.beforeInput,t,n,r),t.data=e,ml.accumulateTwoPhaseDispatches(t)):t=null,[o,t]}},Dl={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},Ml={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"topBlur topChange topClick topFocus topInput topKeyDown topKeyUp topSelectionChange".split(" ")}},Al=null,Rl=null,Ul=!1;gt.canUseDOM&&(Ul=O("input")&&(!document.documentMode||9=document.documentMode,zl={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"topBlur topContextMenu topFocus topKeyDown topKeyUp topMouseDown topMouseUp topSelectionChange".split(" ")}},Kl=null,Yl=null,$l=null,Ql=!1,ql=Sn.isListeningToAllDependencies,Gl={eventTypes:zl,extractEvents:function(e,t,n,r){var o=r.window===r?r.document:r.nodeType===jl?r:r.ownerDocument;if(!o||!ql("onSelect",o))return null;switch(o=t?$t.getNodeFromInstance(t):window,e){case"topFocus":(He(o)||"true"===o.contentEditable)&&(Kl=o,Yl=t,$l=null);break;case"topBlur":$l=Yl=Kl=null;break;case"topMouseDown":Ql=!0;break;case"topContextMenu":case"topMouseUp":return Ql=!1,et(n,r);case"topSelectionChange":if(Bl)break;case"topKeyDown":case"topKeyUp":return et(n,r)}return null}};Se.augmentClass(tt,{animationName:null,elapsedTime:null,pseudoElement:null}),Se.augmentClass(nt,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),Ge.augmentClass(rt,{relatedTarget:null});var Xl={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},Zl={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"};Ge.augmentClass(at,{key:function(e){if(e.key){var t=Xl[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?(e=ot(e),13===e?"Enter":String.fromCharCode(e)):"keydown"===e.type||"keyup"===e.type?Zl[e.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Ze,charCode:function(e){return"keypress"===e.type?ot(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?ot(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),Je.augmentClass(it,{dataTransfer:null}),Ge.augmentClass(lt,{touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Ze}),Se.augmentClass(ut,{propertyName:null,elapsedTime:null,pseudoElement:null}),Je.augmentClass(st,{deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null});var Jl={},eu={};"abort animationEnd animationIteration animationStart blur cancel canPlay canPlayThrough click close contextMenu copy cut doubleClick drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error focus input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing progress rateChange reset scroll seeked seeking stalled submit suspend timeUpdate toggle touchCancel touchEnd touchMove touchStart transitionEnd volumeChange waiting wheel".split(" ").forEach(function(e){var t=e[0].toUpperCase()+e.slice(1),n="on"+t;t="top"+t,n={phasedRegistrationNames:{bubbled:n,captured:n+"Capture"},dependencies:[t]},Jl[e]=n,eu[t]=n});var tu={eventTypes:Jl,extractEvents:function(e,t,n,o){var a=eu[e];if(!a)return null;switch(e){case"topAbort":case"topCancel":case"topCanPlay":case"topCanPlayThrough":case"topClose":case"topDurationChange":case"topEmptied":case"topEncrypted":case"topEnded":case"topError":case"topInput":case"topInvalid":case"topLoad":case"topLoadedData":case"topLoadedMetadata":case"topLoadStart":case"topPause":case"topPlay":case"topPlaying":case"topProgress":case"topRateChange":case"topReset":case"topSeeked":case"topSeeking":case"topStalled":case"topSubmit":case"topSuspend":case"topTimeUpdate":case"topToggle":case"topVolumeChange":case"topWaiting":var i=Se;break;case"topKeyPress":if(0===ot(n))return null;case"topKeyDown":case"topKeyUp":i=at;break;case"topBlur":case"topFocus":i=rt;break;case"topClick":if(2===n.button)return null;case"topDoubleClick":case"topMouseDown":case"topMouseMove":case"topMouseUp":case"topMouseOut":case"topMouseOver":case"topContextMenu":i=Je;break;case"topDrag":case"topDragEnd":case"topDragEnter":case"topDragExit":case"topDragLeave":case"topDragOver":case"topDragStart":case"topDrop":i=it;break;case"topTouchCancel":case"topTouchEnd":case"topTouchMove":case"topTouchStart":i=lt;break;case"topAnimationEnd":case"topAnimationIteration":case"topAnimationStart":i=tt;break;case"topTransitionEnd":i=ut;break;case"topScroll":i=Ge;break;case"topWheel":i=st;break;case"topCopy":case"topCut":case"topPaste":i=nt}return i||r("86",e),e=i.getPooled(a,t,n,o),ml.accumulateTwoPhaseDispatches(e),e}};bn.setHandleTopLevel(Sn.handleTopLevel),En.injection.injectEventPluginOrder("ResponderEventPlugin SimpleEventPlugin TapEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin".split(" ")),un.injection.injectComponentTree($t),En.injection.injectEventPluginsByName({SimpleEventPlugin:tu,EnterLeaveEventPlugin:Vl,ChangeEventPlugin:Ll,SelectEventPlugin:Gl,BeforeInputEventPlugin:Fl});var nu=At.injection.MUST_USE_PROPERTY,ru=At.injection.HAS_BOOLEAN_VALUE,ou=At.injection.HAS_NUMERIC_VALUE,au=At.injection.HAS_POSITIVE_NUMERIC_VALUE,iu=At.injection.HAS_STRING_BOOLEAN_VALUE,lu={Properties:{allowFullScreen:ru,allowTransparency:iu,async:ru,autoPlay:ru,capture:ru,checked:nu|ru,cols:au,contentEditable:iu,controls:ru,default:ru,defer:ru,disabled:ru,download:At.injection.HAS_OVERLOADED_BOOLEAN_VALUE,draggable:iu,formNoValidate:ru,hidden:ru,loop:ru,multiple:nu|ru,muted:nu|ru,noValidate:ru,open:ru,playsInline:ru,readOnly:ru,required:ru,reversed:ru,rows:au,rowSpan:ou,scoped:ru,seamless:ru,selected:nu|ru,size:au,start:ou,span:au,spellCheck:iu,style:0,itemScope:ru,acceptCharset:0,className:0,htmlFor:0,httpEquiv:0,value:iu},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMMutationMethods:{value:function(e,t){if(null==t)return e.removeAttribute("value");"number"!==e.type||!1===e.hasAttribute("value")?e.setAttribute("value",""+t):e.validity&&!e.validity.badInput&&e.ownerDocument.activeElement!==e&&e.setAttribute("value",""+t)}}},uu=At.injection.HAS_STRING_BOOLEAN_VALUE,su={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},cu={Properties:{autoReverse:uu,externalResourcesRequired:uu,preserveAlpha:uu},DOMAttributeNames:{autoReverse:"autoReverse",externalResourcesRequired:"externalResourcesRequired",preserveAlpha:"preserveAlpha"},DOMAttributeNamespaces:{xlinkActuate:su.xlink,xlinkArcrole:su.xlink,xlinkHref:su.xlink,xlinkRole:su.xlink,xlinkShow:su.xlink,xlinkTitle:su.xlink,xlinkType:su.xlink,xmlBase:su.xml,xmlLang:su.xml,xmlSpace:su.xml}},pu=/[\-\:]([a-z])/g;"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode x-height xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xmlns:xlink xml:lang xml:space".split(" ").forEach(function(e){var t=e.replace(pu,ct);cu.Properties[t]=0,cu.DOMAttributeNames[t]=e}),At.injection.injectDOMPropertyConfig(lu),At.injection.injectDOMPropertyConfig(cu);var du=ti.injectInternals,fu=Ut.ELEMENT_NODE,hu=Ut.TEXT_NODE,mu=Ut.COMMENT_NODE,gu=Ut.DOCUMENT_NODE,yu=Ut.DOCUMENT_FRAGMENT_NODE,vu=At.ROOT_ATTRIBUTE_NAME,bu=_t.getChildNamespace,Cu=dr.createElement,Eu=dr.createTextNode,ku=dr.setInitialProperties,Pu=dr.diffProperties,Tu=dr.updateProperties,wu=dr.diffHydratedProperties,Nu=dr.diffHydratedText,_u=dr.warnForDeletedHydratableElement,xu=dr.warnForDeletedHydratableText,Su=dr.warnForInsertedHydratedElement,Iu=dr.warnForInsertedHydratedText,Ou=$t.precacheFiberNode,Fu=$t.updateFiberProps;dn.injection.injectFiberControlledHostComponent(dr),Ee._injectFiber(function(e){return Au.findHostInstance(e)});var Du=null,Mu=null,Au=function(e){var t=e.getPublicInstance;e=fe(e);var n=e.scheduleUpdate,r=e.getPriorityContext;return{createContainer:function(e){var t=po();return e={current:t,containerInfo:e,isScheduled:!1,nextScheduledRoot:null,context:null,pendingContext:null},t.stateNode=e},updateContainer:function(e,t,o,a){var i=t.current;o=me(o),null===t.context?t.context=o:t.pendingContext=o,t=a,a=r(i,_r.enableAsyncSubtreeAPI&&null!=e&&null!=e.type&&null!=e.type.prototype&&!0===e.type.prototype.unstable_isAsyncReactComponent),e={element:e},Zi(i,e,void 0===t?null:t,a),n(i,a)},batchedUpdates:e.batchedUpdates,unbatchedUpdates:e.unbatchedUpdates,deferredUpdates:e.deferredUpdates,flushSync:e.flushSync,getPublicRootInstance:function(e){if(e=e.current,!e.child)return null;switch(e.child.tag){case nl:return t(e.child.stateNode);default:return e.child.stateNode}},findHostInstance:function(e){return e=rl(e),null===e?null:e.stateNode},findHostInstanceWithNoPortals:function(e){return e=ol(e),null===e?null:e.stateNode}}}({getRootHostContext:function(e){if(e.nodeType===gu)e=(e=e.documentElement)?e.namespaceURI:bu(null,"");else{var t=e.nodeType===mu?e.parentNode:e;e=t.namespaceURI||null,t=t.tagName,e=bu(e,t)}return e},getChildHostContext:function(e,t){return bu(e,t)},getPublicInstance:function(e){return e},prepareForCommit:function(){Du=Sn.isEnabled(),Mu=cl.getSelectionInformation(),Sn.setEnabled(!1)},resetAfterCommit:function(){cl.restoreSelection(Mu),Mu=null,Sn.setEnabled(Du),Du=null},createInstance:function(e,t,n,r,o){return e=Cu(e,t,n,r),Ou(o,e),Fu(e,t),e},appendInitialChild:function(e,t){e.appendChild(t)},finalizeInitialChildren:function(e,t,n,r){ku(e,t,n,r);e:{switch(t){case"button":case"input":case"select":case"textarea":e=!!n.autoFocus;break e}e=!1}return e},prepareUpdate:function(e,t,n,r,o){return Pu(e,t,n,r,o)},commitMount:function(e){e.focus()},commitUpdate:function(e,t,n,r,o){Fu(e,o),Tu(e,t,n,r,o)},shouldSetTextContent:function(e,t){return"textarea"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&"string"==typeof t.dangerouslySetInnerHTML.__html},resetTextContent:function(e){e.textContent=""},shouldDeprioritizeSubtree:function(e,t){return!!t.hidden},createTextInstance:function(e,t,n,r){return e=Eu(e,t),Ou(r,e),e},commitTextUpdate:function(e,t,n){e.nodeValue=n},appendChild:function(e,t){e.appendChild(t)},appendChildToContainer:function(e,t){e.nodeType===mu?e.parentNode.insertBefore(t,e):e.appendChild(t)},insertBefore:function(e,t,n){e.insertBefore(t,n)},insertInContainerBefore:function(e,t,n){e.nodeType===mu?e.parentNode.insertBefore(t,n):e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},removeChildFromContainer:function(e,t){e.nodeType===mu?e.parentNode.removeChild(t):e.removeChild(t)},canHydrateInstance:function(e,t){return e.nodeType===fu&&t===e.nodeName.toLowerCase()},canHydrateTextInstance:function(e,t){return""!==t&&e.nodeType===hu},getNextHydratableSibling:function(e){for(e=e.nextSibling;e&&e.nodeType!==fu&&e.nodeType!==hu;)e=e.nextSibling;return e},getFirstHydratableChild:function(e){for(e=e.firstChild;e&&e.nodeType!==fu&&e.nodeType!==hu;)e=e.nextSibling;return e},hydrateInstance:function(e,t,n,r,o,a){return Ou(a,e),Fu(e,n),wu(e,t,n,o,r)},hydrateTextInstance:function(e,t,n){return Ou(n,e),Nu(e,t)},didNotHydrateInstance:function(e,t){1===t.nodeType?_u(e,t):xu(e,t)},didNotFindHydratableInstance:function(e,t,n){Su(e,t,n)},didNotFindHydratableTextInstance:function(e,t){Iu(e,t)},scheduleDeferredCallback:Nr.rIC,useSyncScheduling:!0});hn.injection.injectFiberBatchedUpdates(Au.batchedUpdates);var Ru={createPortal:ht,hydrate:function(e,t,n){return ft(null,e,t,!0,n)},render:function(e,t,n){return ft(null,e,t,!1,n)},unstable_renderSubtreeIntoContainer:function(e,t,n,o){return null!=e&&Qt.has(e)||r("38"),ft(e,t,n,!1,o)},unmountComponentAtNode:function(e){return pt(e)||r("40"),!!e._reactRootContainer&&(Au.unbatchedUpdates(function(){ft(null,null,e,!1,function(){e._reactRootContainer=null})}),!0)},findDOMNode:Ee,unstable_createPortal:ht,unstable_batchedUpdates:hn.batchedUpdates,unstable_deferredUpdates:Au.deferredUpdates,flushSync:Au.flushSync,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{EventPluginHub:En,EventPluginRegistry:Ot,EventPropagators:ml,ReactControlledComponent:dn,ReactDOMComponentTree:$t,ReactDOMEventListener:bn}};du({findFiberByHostInstance:$t.getClosestInstanceFromNode,findHostInstanceByFiber:Au.findHostInstance,bundleType:0,version:"16.0.0",rendererPackageName:"react-dom"}),e.exports=Ru},function(e,t,n){"use strict";var r=!("undefined"==typeof window||!window.document||!window.document.createElement),o={canUseDOM:r,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:r&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:r&&!!window.screen,isInWorker:!r};e.exports=o},function(e,t,n){"use strict";var r=n(4),o={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=o},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!==e&&t!==t}function o(e,t){if(r(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),o=Object.keys(t);if(n.length!==o.length)return!1;for(var i=0;icamel ~'k) 33 | (if (contains? api-keys-used# ~'k) 34 | (dmohs.react.core/create-camel-cased-react-method-wrapper ~'k) 35 | nil)))))))) 36 | 37 | (defmacro defc- [& args] 38 | `(defc ~@args)) 39 | -------------------------------------------------------------------------------- /src/main/cljs/dmohs/react.cljs: -------------------------------------------------------------------------------- 1 | (ns dmohs.react 2 | (:require-macros [dmohs.react :refer [defc defc-]]) 3 | (:require [dmohs.react.core :as core])) 4 | 5 | 6 | (defn create-class [fn-map] 7 | "See: https://github.com/dmohs/react-cljs#reactcreateclass 8 | If :trace? is true, component method calls will be printed to the console." 9 | (core/create-class (core/wrap-fn-defs fn-map))) 10 | 11 | 12 | (defn set-trace-count-limit! [limit] 13 | "If this limit is exceeded while tracing, an error will be thrown. Set to nil for no limit." 14 | (set! core/trace-count-limit limit)) 15 | 16 | 17 | (defn create-element 18 | "See: https://github.com/dmohs/react-cljs#reactcreateelement" 19 | ([type-or-vec] (create-element type-or-vec nil)) 20 | ([type-or-vec props & children] 21 | (apply core/create-element type-or-vec props children))) 22 | 23 | 24 | (defn clone-element 25 | "TODO" 26 | [element props & children] 27 | (assert false "Not yet implemented.")) 28 | 29 | 30 | (defn create-factory 31 | "Similar to React.createFactory." 32 | [type] 33 | (core/create-factory type)) 34 | 35 | 36 | (defn valid-element? 37 | "See: https://facebook.github.io/react/docs/top-level-api.html#react.isvalidelement" 38 | [x] 39 | (core/valid-element? x)) 40 | 41 | 42 | ;; 43 | ;; ReactDOM 44 | ;; 45 | 46 | 47 | (defn render 48 | "Similar to React.render." 49 | ([element container] (core/render element container)) 50 | ([element container callback] (core/render element container callback))) 51 | 52 | 53 | (defn unmount-component-at-node 54 | "Similar to React.unmountComponentAtNode." 55 | [container] 56 | (core/unmount-component-at-node container)) 57 | 58 | 59 | (defn find-dom-node 60 | "See: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode" 61 | [instance] 62 | (core/find-dom-node instance)) 63 | 64 | 65 | (defn call 66 | "Calls a method on a component instance." 67 | [method-key instance & method-args] 68 | (assert (keyword? method-key) (str "Not a keyword: " method-key)) 69 | (apply core/call method-key instance method-args)) 70 | 71 | 72 | (defn get-display-name [instance] 73 | (core/get-display-name instance)) 74 | 75 | 76 | ;; 77 | ;; Extra Goodies 78 | ;; 79 | 80 | (defn after-update 81 | "Calls the function with any given args directly after the component has been updated from the 82 | last state change. Causes an update if no state change is pending." 83 | [instance f & args] 84 | (apply core/after-update instance f args)) 85 | 86 | (defn method 87 | "Returns the method with the given key. Subsequent calls return the same (identical) function." 88 | [instance method-key] 89 | (assert (keyword? method-key) (str "Not a keyword: " method-key)) 90 | (core/get-bound-method instance method-key)) 91 | 92 | 93 | ;; 94 | ;; Devcards Helpers 95 | ;; 96 | 97 | 98 | (defc DevcardsComponent 99 | "Protects children from getting re-rendered when reporting state via the data-atom." 100 | {:render 101 | (fn [{:keys [props locals]}] 102 | (let [data-atom (:data-atom props) 103 | f (:render-fn props)] 104 | (f data-atom (:owner props) {:initial-state-override (:state @data-atom) 105 | :on-state-change 106 | (fn [new-state] 107 | (swap! locals assoc :suppress-next-update? true) 108 | (swap! data-atom assoc :state new-state))}))) 109 | :should-component-update 110 | (fn [{:keys [locals]}] 111 | (if (:suppress-next-update? @locals) 112 | (do 113 | (swap! locals assoc :suppress-next-update? false) 114 | false) 115 | true))}) 116 | 117 | 118 | (defn wrap-devcard-fn [f] 119 | "Pass a single function that takes three parameters: data-atom, owner, and devcard-props. Merge 120 | devcard-props with your component's props to preserve and view the component's state, even across 121 | figwheel reloads." 122 | (fn [data-atom owner] 123 | (create-element DevcardsComponent {:data-atom data-atom :owner owner :render-fn f}))) 124 | -------------------------------------------------------------------------------- /src/main/cljs/dmohs/react/common.cljc: -------------------------------------------------------------------------------- 1 | (ns dmohs.react.common 2 | (:require clojure.string)) 3 | 4 | 5 | (def react-component-api-method-keys 6 | #{:render 7 | :get-initial-state 8 | :get-default-props 9 | :display-name 10 | :component-will-mount 11 | :component-did-mount 12 | :component-will-receive-props 13 | :should-component-update 14 | :component-will-update 15 | :component-did-update 16 | :component-will-unmount}) 17 | 18 | 19 | (defn kw->camel [k] 20 | (clojure.string/replace 21 | (name k) #"[-]([a-z])" #(clojure.string/upper-case (second %)))) 22 | -------------------------------------------------------------------------------- /src/main/cljs/dmohs/react/core.clj: -------------------------------------------------------------------------------- 1 | (ns dmohs.react.core 2 | (:require 3 | [cljs.env :as env])) 4 | 5 | 6 | (defmacro if-not-optimized [true-form false-form] 7 | (if (and env/*compiler* 8 | (let [{:keys [optimizations]} (get @env/*compiler* :options)] 9 | (or (nil? optimizations) (= optimizations :none)))) 10 | true-form 11 | false-form)) 12 | -------------------------------------------------------------------------------- /src/main/cljs/dmohs/react/core.cljs: -------------------------------------------------------------------------------- 1 | (ns dmohs.react.core 2 | (:require-macros [dmohs.react.core :refer [if-not-optimized]]) 3 | (:require 4 | clojure.string 5 | [dmohs.react.common :as common] 6 | dmohs.react.deps)) 7 | 8 | 9 | (defn get-display-name [instance] 10 | (.. instance -constructor -displayName)) 11 | 12 | 13 | (defn- props [instance] 14 | (aget (.. instance -props) "cljs")) 15 | 16 | 17 | (defn- maybe-report-state-change [instance new-state] 18 | (when-let [on-state-change (:on-state-change (props instance))] 19 | ;; This is sometimes called during a render and often called by something that will update its 20 | ;; own state (causing a re-render), so to be safe we report it after the event loop. 21 | (js/setTimeout #(on-state-change new-state) 0))) 22 | 23 | 24 | (defn- atom-like-state-swap! [instance & swap-args] 25 | (let [new-value (apply swap! (aget instance "cljsState") swap-args)] 26 | (.setState instance (if-not-optimized 27 | #js{:cljs new-value :js (clj->js new-value)} 28 | #js{:cljs new-value})) 29 | (maybe-report-state-change instance new-value) 30 | new-value)) 31 | 32 | 33 | (deftype AtomLikeState [instance] 34 | IDeref 35 | (-deref [this] 36 | (when-let [state (.. instance -state)] 37 | (aget state "cljs"))) 38 | ISwap 39 | (-swap! [this f] (atom-like-state-swap! instance f)) 40 | (-swap! [this f a] (atom-like-state-swap! instance f a)) 41 | (-swap! [this f a b] (atom-like-state-swap! instance f a b)) 42 | (-swap! [this f a b xs] (apply atom-like-state-swap! instance f a b xs)) 43 | IReset 44 | (-reset! [this new-value] 45 | (reset! (aget instance "cljsState") new-value) 46 | (.setState instance (if-not-optimized 47 | #js{:cljs new-value :js (clj->js new-value)} 48 | #js{:cljs new-value})) 49 | (maybe-report-state-change instance new-value) 50 | new-value)) 51 | 52 | 53 | (defn- state [instance] 54 | (AtomLikeState. instance)) 55 | 56 | 57 | (deftype Refs->Clj [instance] 58 | IDeref 59 | (-deref [this] 60 | (js->clj (.. instance -refs)))) 61 | 62 | 63 | (defn- refs [instance] 64 | (Refs->Clj. instance)) 65 | 66 | 67 | (defn- locals [instance] 68 | (aget instance "cljsLocals")) 69 | 70 | 71 | (defn- transform-keys [keyfn xs] 72 | ;; Structure taken from js->clj source. 73 | (let [f (fn thisfn [x] 74 | (cond 75 | (map? x) 76 | (reduce-kv (fn [r k v] (assoc r (keyfn k) (thisfn v))) {} x) 77 | (seq? x) 78 | (doall (map thisfn x)) 79 | (coll? x) 80 | (into (empty x) (map thisfn x)) 81 | :else x))] 82 | (f xs))) 83 | 84 | 85 | (defn- camel-case-keys [m] 86 | (transform-keys 87 | (fn [k] 88 | (if (and (keyword? k) 89 | (let [n (name k)] 90 | (and 91 | (not (clojure.string/starts-with? n "data-")) 92 | (not (clojure.string/starts-with? n "aria-"))))) 93 | (let [words (clojure.string/split (name k) #"-") 94 | cased (map #(str (clojure.string/upper-case (subs % 0 1)) (subs % 1)) (rest words))] 95 | (keyword (apply str (first words) cased))) 96 | k)) 97 | m)) 98 | 99 | 100 | (defn create-element 101 | [type-or-vec props & children] 102 | (if (vector? type-or-vec) 103 | (apply create-element type-or-vec) 104 | (letfn [(flatten-children [children] 105 | (reduce 106 | (fn [r c] 107 | (if (seq? c) (vec (concat r (flatten-children c))) (conj r c))) 108 | [] 109 | children))] 110 | (let [tag? (keyword? type-or-vec) 111 | type (if tag? (name type-or-vec) type-or-vec) 112 | children (flatten-children children) 113 | children (map (fn [x] 114 | (if (vector? x) 115 | (apply create-element x) 116 | x)) 117 | children)] 118 | (if (or tag? (not (aget (.-prototype type) "react-cljs?"))) 119 | (apply js/React.createElement type (clj->js (camel-case-keys props)) children) 120 | (let [js-props #js{} 121 | {:keys [ref key]} props 122 | default-props (aget (.-constructor (.-prototype type)) "defaultProps") 123 | props (merge (when default-props (aget default-props "cljsDefault")) 124 | (dissoc props :ref :key))] 125 | (aset js-props "cljs" props) 126 | (if-not-optimized 127 | (aset js-props "js" 128 | (clj->js (merge {:.ns (aget (.-prototype type) "namespace")} props))) 129 | nil) 130 | (when ref (aset js-props "ref" ref)) 131 | (when key (aset js-props "key" key)) 132 | (apply js/React.createElement type js-props children))))))) 133 | 134 | 135 | (defn call [k instance & args] 136 | (let [m (aget instance (name k))] 137 | (when-not m 138 | (throw (js/Error. (str "Method " k " not found on component " (get-display-name instance))))) 139 | (.apply m instance (to-array args)))) 140 | 141 | (defn get-bound-method [instance k] 142 | (let [method-name (name k) 143 | bound-method-name (str method-name "__bound") 144 | bound-method (aget instance bound-method-name)] 145 | (or bound-method 146 | (let [method (or (aget instance method-name) 147 | (throw 148 | (js/Error. (str "Method " k " not found on component " 149 | (get-display-name instance))))) 150 | bound-method (fn [& args] (apply instance k args))] 151 | (aset instance bound-method-name bound-method) 152 | bound-method)))) 153 | 154 | (defn after-update [instance f & args] 155 | (.setState instance #js{} (fn [] (apply f args)))) 156 | 157 | (defn- bind-prop-atom 158 | ([this prop-key] (bind-prop-atom this prop-key prop-key)) 159 | ([this prop-key state-key] 160 | (let [props (props this) 161 | _ (assert (contains? props prop-key) (str "No prop found at key: " prop-key)) 162 | a (get props prop-key)] 163 | (assert (satisfies? IWatchable a) (str "No watchable atom found at key: " prop-key)) 164 | (add-watch a this (fn [_ _ old-value new-value] 165 | (swap! (state this) assoc state-key new-value))) 166 | (let [bound-props (or (aget this "cljsBoundProps") {})] 167 | (aset this "cljsBoundProps" (assoc bound-props prop-key state-key))) 168 | {state-key @a}))) 169 | 170 | 171 | (defn- default-arg-map [this] 172 | {:this this :props (props this) :state (state this) :refs (refs this) :locals (locals this) 173 | :after-update (partial after-update this) 174 | :abind (partial bind-prop-atom this)}) 175 | 176 | 177 | (defn- arg-map->js [arg-map] 178 | (clj->js (merge arg-map 179 | (when-let [x (:state arg-map)] {:state @x}) 180 | (when-let [x (:refs arg-map)] {:refs @x}) 181 | (when-let [x (:locals arg-map)] {:locals @x})))) 182 | 183 | 184 | (def trace-count-limit 1000) 185 | 186 | 187 | (defn- log-start [display-name k arg-map args] 188 | (let [this (:this arg-map) 189 | trace-count (when this (or (aget this "internal-trace-count") 1)) 190 | formatted-trace-count (when trace-count (str ":" trace-count)) 191 | log-args [(str "<" display-name k (or formatted-trace-count ""))] 192 | log-args (if (empty? arg-map) log-args (conj log-args "\n" (arg-map->js arg-map))) 193 | log-args (if (empty? args) log-args (conj log-args "\n" (clj->js args))) 194 | log-args (if (= (count log-args) 1) [(str (log-args 0) ">")] (conj log-args "\n>"))] 195 | (.apply (.-log js/console) js/console (to-array log-args)) 196 | (when trace-count 197 | (if (and (not (nil? trace-count-limit)) (> trace-count trace-count-limit)) 198 | (throw "Trace count limit exceeded") 199 | (do 200 | (aset this "internal-trace-count" (inc trace-count)) 201 | (js/clearTimeout (aget this "internal-trace-timeout")) 202 | (aset this "internal-trace-timeout" 203 | (js/setTimeout #(aset this "internal-trace-count" nil) 200))))))) 204 | 205 | 206 | (defn- log-end [display-name k result] 207 | (let [log-result? (when (contains? #{:get-default-props :get-initial-state 208 | :should-component-update} k) 209 | true) 210 | log-args [(str "js result) "\n") log-args) 212 | log-args (if log-result? (conj log-args ">") [(str (log-args 0) ">")])] 213 | (.apply (.-log js/console) js/console (to-array log-args)))) 214 | 215 | 216 | (defn- call-fn [_ f arg-map & [args]] 217 | (apply f arg-map args)) 218 | 219 | 220 | (defn- call-fn-with-trace [display-name k f arg-map & [args]] 221 | (log-start display-name k arg-map args) 222 | (let [result (apply f arg-map args)] 223 | (log-end display-name k result) 224 | result)) 225 | 226 | 227 | (defn- wrap-non-react-methods [fn-map call-fn] 228 | (let [non-react-methods (apply dissoc fn-map :namespace 229 | common/react-component-api-method-keys)] 230 | (reduce-kv 231 | (fn [r k f] 232 | (assoc r k (fn [& args] (this-as this (call-fn k f (default-arg-map this) args))))) 233 | fn-map 234 | non-react-methods))) 235 | 236 | 237 | (defn- wrap-get-initial-state [fn-map call-fn] 238 | ;; Initialize the component here since this is the first method called. 239 | (let [{:keys [get-initial-state]} fn-map 240 | wrapped (fn [] 241 | (this-as 242 | this 243 | (let [state (when get-initial-state 244 | (call-fn 245 | :get-initial-state get-initial-state (default-arg-map this))) 246 | state (merge state (:initial-state-override (props this)))] 247 | (if (aget this "cljsState") 248 | ;; State already exists. Component was probably hot-reloaded, 249 | ;; so don't initialize. 250 | (if-not-optimized 251 | #js{:cljs state :js (clj->js state)} 252 | #js{:cljs state}) 253 | (let [locals-atom (atom nil)] 254 | (aset this "cljsLocals" locals-atom) 255 | (aset this "cljsState" (atom state)) 256 | (maybe-report-state-change this state) 257 | (if-not-optimized 258 | #js{:cljs state :js (clj->js state)} 259 | #js{:cljs state}))))))] 260 | (assoc fn-map :get-initial-state wrapped))) 261 | 262 | 263 | (defn- wrap-component-will-receive-props [fn-map call-fn] 264 | (let [{:keys [component-will-receive-props]} fn-map 265 | wrapped (fn [next-props] 266 | (let [next-props (aget next-props "cljs")] 267 | (this-as 268 | this 269 | (when-let [bound-props (aget this "cljsBoundProps")] 270 | (doseq [[prop-key state-key] bound-props] 271 | (let [a (get next-props prop-key)] 272 | (swap! (state this) assoc state-key @a) 273 | (add-watch a this (fn [_ _ old-value new-value] 274 | (swap! (state this) assoc state-key new-value)))))) 275 | (when component-will-receive-props 276 | (call-fn :component-will-receive-props component-will-receive-props 277 | (assoc (default-arg-map this) 278 | :next-props next-props))))))] 279 | (assoc fn-map :component-will-receive-props wrapped))) 280 | 281 | 282 | (defn- wrap-render [fn-map call-fn] 283 | (let [{:keys [render]} fn-map 284 | wrapped (fn [] 285 | (this-as 286 | this 287 | (let [rendered (try 288 | (call-fn :render render (default-arg-map this)) 289 | (catch js/Object e 290 | (.log js/window.console (.-stack e)) 291 | (create-element :div {:style {:color "red"}} 292 | "Render failed. See console for details.")))] 293 | (if (vector? rendered) 294 | (apply create-element rendered) 295 | rendered))))] 296 | (assoc fn-map :render wrapped))) 297 | 298 | 299 | (defn- create-default-wrapper [call-fn] 300 | (fn [k f] (fn [] (this-as this (call-fn k f (default-arg-map this)))))) 301 | 302 | 303 | (defn- wrap-if-present [fn-map k create-wrapper] 304 | (if-let [f (get fn-map k)] 305 | (assoc fn-map k (create-wrapper k f)) 306 | fn-map)) 307 | 308 | 309 | (defn wrap-fn-defs [fn-map] 310 | ;; TODO: propTypes, mixins, statics 311 | (let [trace? (:trace? fn-map) 312 | fn-map (dissoc fn-map :trace?) 313 | call-fn (if trace? 314 | (partial call-fn-with-trace (get fn-map :display-name "UnnamedComponent")) 315 | call-fn) 316 | render-fn (:render fn-map)] 317 | (assert (fn? render-fn) 318 | (str "render is required and must be a function. render is: " (pr-str render-fn))) 319 | (-> fn-map 320 | (wrap-non-react-methods call-fn) 321 | (wrap-get-initial-state call-fn) 322 | (wrap-render call-fn) 323 | (wrap-if-present 324 | :get-default-props 325 | (fn [k f] 326 | (fn [] 327 | #js{:cljsDefault (call-fn k f {})}))) 328 | (wrap-if-present :component-will-mount (create-default-wrapper call-fn)) 329 | (wrap-if-present :component-did-mount (create-default-wrapper call-fn)) 330 | (wrap-component-will-receive-props call-fn) 331 | (wrap-if-present 332 | :should-component-update 333 | (fn [k f] 334 | (fn [next-props next-state] 335 | (this-as 336 | this 337 | (call-fn k f (assoc (default-arg-map this) 338 | :next-props (aget next-props "cljs") 339 | :next-state (aget next-state "cljs"))))))) 340 | (wrap-if-present 341 | :component-will-update 342 | (fn [k f] 343 | (fn [next-props next-state] 344 | (this-as 345 | this 346 | (call-fn k f (assoc (default-arg-map this) 347 | :next-props (aget next-props "cljs") 348 | :next-state (aget next-state "cljs"))))))) 349 | (wrap-if-present 350 | :component-did-update 351 | (fn [k f] 352 | (fn [prev-props prev-state] 353 | (this-as 354 | this 355 | (call-fn k f (assoc (default-arg-map this) 356 | :prev-props (aget prev-props "cljs") 357 | :prev-state (aget prev-state "cljs"))))))) 358 | (wrap-if-present :component-will-unmount (create-default-wrapper call-fn))))) 359 | 360 | 361 | (defn create-camel-cased-react-method-wrapper [k] 362 | ;; For the normal lifecycle methods, we just bounce the call to the similarly-named instance 363 | ;; method. 364 | (fn [& args] 365 | (this-as 366 | this 367 | (let [proto (if (= k :get-default-props) 368 | (.-prototype this) 369 | (.getPrototypeOf js/Object this))] 370 | (.apply (aget proto (name k)) this (to-array args)))))) 371 | 372 | 373 | (defn- extend-react-class-with-ifn [react-class] 374 | (extend-type react-class 375 | IFn 376 | (-invoke ([this method-keyword] (call method-keyword this)) 377 | ([this method-keyword a] (call method-keyword this a)) 378 | ([this method-keyword a b] (call method-keyword this a b)) 379 | ([this method-keyword a b c] (call method-keyword this a b c)) 380 | ([this method-keyword a b c d] (call method-keyword this a b c d)) 381 | ([this method-keyword a b c d e] (call method-keyword this a b c d e)) 382 | ([this method-keyword a b c d e f] (call method-keyword this a b c d e f)) 383 | ([this method-keyword a b c d e f g] (call method-keyword this a b c d e f g)) 384 | ([this method-keyword a b c d e f g h] (call method-keyword this a b c d e f g h)) 385 | ([this method-keyword a b c d e f g h i] 386 | (call method-keyword this a b c d e f g h i)) 387 | ([this method-keyword a b c d e f g h i j] 388 | (call method-keyword this a b c d e f g h i j)) 389 | ([this method-keyword a b c d e f g h i j k] 390 | (call method-keyword this a b c d e f g h i j k)) 391 | ([this method-keyword a b c d e f g h i j k l] 392 | (call method-keyword this a b c d e f g h i j k l)) 393 | ([this method-keyword a b c d e f g h i j k l m] 394 | (call method-keyword this a b c d e f g h i j k l m)) 395 | ([this method-keyword a b c d e f g h i j k l m n] 396 | (call method-keyword this a b c d e f g h i j k l m n)) 397 | ([this method-keyword a b c d e f g h i j k l m n o] 398 | (call method-keyword this a b c d e f g h i j k l m n o)) 399 | ([this method-keyword a b c d e f g h i j k l m n o p] 400 | (call method-keyword this a b c d e f g h i j k l m n o p)) 401 | ([this method-keyword a b c d e f g h i j k l m n o p q] 402 | (call method-keyword this a b c d e f g h i j k l m n o p q)) 403 | ([this method-keyword a b c d e f g h i j k l m n o p q r] 404 | (call method-keyword this a b c d e f g h i j k l m n o p q r)) 405 | ([this method-keyword a b c d e f g h i j k l m n o p q r s] 406 | (call method-keyword this a b c d e f g h i j k l m n o p q r s)) 407 | ([this method-keyword a b c d e f g h i j k l m n o p q r s rest] 408 | (apply call method-keyword this a b c d e f g h i j k l m n o p q r s rest))))) 409 | 410 | 411 | (defn create-class [fn-map] 412 | (let [class-def #js{:autobind false :react-cljs? true}] 413 | (doseq [[k f] fn-map] 414 | (aset class-def (name k) f) 415 | ;; React, being Javascript, likes camel-case. 416 | (when (contains? (disj common/react-component-api-method-keys :render) k) 417 | (aset class-def (common/kw->camel k) 418 | (if (= k :display-name) 419 | f 420 | (create-camel-cased-react-method-wrapper k))))) 421 | (let [class (js/createReactClass class-def)] 422 | (extend-react-class-with-ifn class) 423 | class))) 424 | 425 | (defn create-factory [type] 426 | (js/React.createFactory type)) 427 | 428 | 429 | (defn valid-element? [x] 430 | (js/React.isValidElement x)) 431 | 432 | 433 | (defn render 434 | ([element container] (js/ReactDOM.render element container)) 435 | ([element container callback] (js/ReactDOM.render element container callback))) 436 | 437 | 438 | (defn unmount-component-at-node [container] 439 | (js/ReactDOM.unmountComponentAtNode container)) 440 | 441 | 442 | (defn find-dom-node [instance] 443 | (js/ReactDOM.findDOMNode instance)) 444 | 445 | 446 | ;; (defn pass-to [component property & prepended-arg-fns] 447 | ;; (when-let [f (pval component property)] 448 | ;; (fn [& args] 449 | ;; (apply f (concat (map (fn [f] (f)) prepended-arg-fns) args))))) 450 | -------------------------------------------------------------------------------- /src/main/js/webpack-requires.js: -------------------------------------------------------------------------------- 1 | window.React = require('react'); 2 | window.ReactDOM = require('react-dom'); 3 | window.createReactClass = require('create-react-class'); 4 | -------------------------------------------------------------------------------- /src/main/js/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: "./webpack-requires.js", 5 | output: { 6 | path: path.resolve(__dirname), 7 | filename: 'webpack-deps.js' 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /src/static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React CLJS Test Page 7 | 8 | 9 | 10 |
Loading application...
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/test/cljs/webui/main.cljs: -------------------------------------------------------------------------------- 1 | (ns webui.main 2 | (:require 3 | [dmohs.react :as r] 4 | )) 5 | 6 | (r/defc ComponentWithProps 7 | {:render 8 | (fn [{:keys [this props]}] 9 | [:div {} 10 | [:h2 {} (r/get-display-name this)] 11 | "Hello there, " (:name props) "!"])}) 12 | 13 | (r/defc ComponentWithState 14 | {:get-initial-state (constantly {:click-count 0}) 15 | :render 16 | (fn [{:keys [this state]}] 17 | [:div {} 18 | [:h2 {} (r/get-display-name this)] 19 | [:div {:style {:border "1px solid black" :padding "1rem"} 20 | :on-click (fn [event] (swap! state update-in [:click-count] inc))} 21 | "I have been clicked " (:click-count @state) " times."]])}) 22 | 23 | (r/defc ComponentWithRefs 24 | {:get-initial-state (constantly {:text "Some text"}) 25 | :render 26 | (fn [{:keys [this state locals]}] 27 | [:div {} 28 | [:h2 {} (r/get-display-name this)] 29 | [:input {:style {:width "30ex"} 30 | :value (:text @state) 31 | :on-change #(swap! state assoc :text (-> % .-target .-value)) 32 | :ref (fn [element] 33 | (swap! locals assoc :input element))}] 34 | " " [:button {:on-click #(.select (:input @locals))} "Select"]])}) 35 | 36 | (r/defc ComponentWithSize 37 | {:render 38 | (fn [{:keys [this state]}] 39 | (let [{:keys [rect]} @state] 40 | [:div {} 41 | [:h2 {} (r/get-display-name this)] 42 | "I am this big: " 43 | (if rect 44 | (str (aget rect "height") " pixels tall and " (aget rect "width") " pixels wide!") 45 | "(not sure yet)")])) 46 | :component-did-mount 47 | (fn [{:keys [this state]}] 48 | (swap! state assoc :rect (-> this r/find-dom-node .getBoundingClientRect)))}) 49 | 50 | (r/defc ComponentWithReactWeirdness 51 | {:get-initial-state (constantly {:real-count 0}) 52 | :render 53 | (fn [{:keys [this state]}] 54 | (let [{:keys [rect]} @state] 55 | [:div {:data-foo "bar" :aria-label "bar"} 56 | [:h2 {} (r/get-display-name this)] 57 | [:div {} 58 | "Real count: " (:real-count @state) [:br] 59 | "Read directly after setting state: " (or (:read-after-set @state) "?") [:br] 60 | "Read after calling after-update: " (or (:after-update @state) "?")] 61 | [:div {} 62 | [:button {:on-click #(this :-handle-click)} "Click Me"]]])) 63 | :-handle-click 64 | (fn [{:keys [this state]}] 65 | (swap! state update :real-count inc) 66 | (swap! state assoc :read-after-set (:real-count @state)) 67 | (r/after-update this #(swap! state assoc :after-update (:real-count @state))))}) 68 | 69 | (r/defc FunWithEventHandlers 70 | {:get-initial-state (constantly {:not-equal-count 0 :saved-count 0 :bound-count 0}) 71 | :render 72 | (fn [{:keys [this state locals]}] 73 | [:div {} 74 | [:h2 {} (r/get-display-name this)] 75 | [:div {:style {:margin-bottom "1em"}} 76 | "All of these add and remove a click handler to/from the window."] 77 | [:div {} "This doesn't work: " (:not-equal-count @state) 78 | " " [:button {:on-click #(this :-toggle-anonymous)} "Toggle"]] 79 | [:div {} "This does: " (:saved-count @state) 80 | " " [:button {:on-click #(this :-toggle-saved)} "Toggle"]] 81 | [:div {} "This is cleaner: " (:bound-count @state) 82 | " " [:button {:on-click #(this :-toggle-bound)} "Toggle"]]]) 83 | :-toggle-anonymous 84 | (fn [{:keys [state locals]}] 85 | (let [handler (fn [] (swap! state update :not-equal-count inc))] 86 | (if (:anonymous @locals) 87 | (do 88 | ;; This doesn't work because functions are not equal even if they have the same 89 | ;; definition. 90 | (.removeEventListener js/window "click" handler) 91 | (swap! locals dissoc :anonymous)) 92 | (do 93 | (.addEventListener js/window "click" handler) 94 | (swap! locals assoc :anonymous true))))) 95 | :-toggle-saved 96 | (fn [{:keys [state locals]}] 97 | (when (nil? (:saved-handler @locals)) 98 | (swap! locals assoc :saved-handler (fn [] (swap! state update :saved-count inc)))) 99 | (if (:saved @locals) 100 | (do 101 | (.removeEventListener js/window "click" (:saved-handler @locals)) 102 | (swap! locals dissoc :saved)) 103 | (do 104 | (.addEventListener js/window "click" (:saved-handler @locals)) 105 | (swap! locals assoc :saved true)))) 106 | :-toggle-bound 107 | (fn [{:keys [this state locals]}] 108 | (if (:bound @locals) 109 | (do 110 | (.removeEventListener js/window "click" (r/method this :-increment-bound)) 111 | (swap! locals dissoc :bound)) 112 | (do 113 | (.addEventListener js/window "click" (r/method this :-increment-bound)) 114 | (swap! locals assoc :bound true)))) 115 | :-increment-bound 116 | (fn [{:keys [state]}] 117 | (swap! state update :bound-count inc))}) 118 | 119 | (r/defc ListUnwrapping 120 | {:render 121 | (fn [{:keys [this]}] 122 | [:div {} 123 | [:h2 {} (r/get-display-name this)] 124 | (for [i (range 3)] 125 | (map (fn [j] [:div {} "I am div " i ", " j]) (range 3)))])}) 126 | 127 | (r/defc- App "The app." 128 | {:render 129 | (fn [] 130 | [:div {} 131 | [:h1 {} "React CLJS Examples"] 132 | [:ul {} 133 | [:li {} [:a {:href "https://github.com/dmohs/react-cljs"} "Project"]] 134 | [:li {} 135 | [:a {:href "https://github.com/dmohs/react-cljs/blob/master/src/test/cljs/webui/main.cljs"} 136 | "Examples Source"]]] 137 | [ComponentWithProps {:name "Friendly ClojureScript Developer"}] 138 | [ComponentWithState] 139 | [ComponentWithRefs] 140 | [ComponentWithSize] 141 | [ComponentWithReactWeirdness] 142 | [FunWithEventHandlers] 143 | [ListUnwrapping]])}) 144 | 145 | (defn render-application [] 146 | (r/render 147 | (r/create-element App) 148 | (.. js/document (getElementById "app")))) 149 | 150 | (render-application) 151 | -------------------------------------------------------------------------------- /src/unbundled/cljs/dmohs/react/deps.cljs: -------------------------------------------------------------------------------- 1 | (ns dmohs.react.deps) 2 | --------------------------------------------------------------------------------