├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── config.js ├── dist ├── react-icheck.js └── react-icheck.js.map ├── esdoc.json ├── examples ├── dist │ └── .gitkeep └── src │ ├── index.html │ ├── js │ ├── app.js │ └── components │ │ ├── App.js │ │ ├── GettingStarted.js │ │ ├── Home.js │ │ ├── PageNotFound.js │ │ └── examples │ │ ├── Basic.js │ │ ├── ColorSchemes.js │ │ ├── Demo.js │ │ ├── FuturicoSkin.js │ │ ├── LineSkin.js │ │ ├── PolarisSkin.js │ │ ├── SkinDemo.js │ │ └── style.scss │ └── scss │ └── index.scss ├── gulpfile.js ├── lib ├── Checkbox.js ├── CheckboxGroup.js ├── EnhancedSwitch.js ├── Radio.js ├── RadioGroup.js └── index.js ├── package.json └── src ├── Checkbox.js ├── CheckboxGroup.js ├── EnhancedSwitch.js ├── Radio.js ├── RadioGroup.js └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0, 3 | "optional": ["runtime"], 4 | "plugins": ["object-assign"] 5 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "onefe", 4 | "globals": { 5 | "__DEV__": true 6 | }, 7 | "rules": { 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Dependency directory 11 | # Commenting this out is preferred by some people, see 12 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 13 | node_modules 14 | 15 | # Users Environment Variables 16 | .lock-wscript 17 | 18 | # ========================= 19 | # Operating System Files 20 | # ========================= 21 | 22 | # OSX 23 | # ========================= 24 | 25 | .DS_Store 26 | .AppleDouble 27 | .LSOverride 28 | 29 | # Thumbnails 30 | ._* 31 | 32 | # Files that might appear on external disk 33 | .Spotlight-V100 34 | .Trashes 35 | 36 | # Directories potentially created on remote AFP share 37 | .AppleDB 38 | .AppleDesktop 39 | Network Trash Folder 40 | Temporary Items 41 | .apdisk 42 | 43 | # Windows 44 | # ========================= 45 | 46 | # Windows image file caches 47 | Thumbs.db 48 | ehthumbs.db 49 | 50 | # Folder config file 51 | Desktop.ini 52 | 53 | # Recycle Bin used on file shares 54 | $RECYCLE.BIN/ 55 | 56 | # Windows Installer files 57 | *.cab 58 | *.msi 59 | *.msm 60 | *.msp 61 | 62 | # Windows shortcuts 63 | *.lnk 64 | 65 | # IDEA 66 | .idea 67 | 68 | .publish/ 69 | examples/dist/ 70 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.idea 2 | .publish 3 | examples/ 4 | src/ 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5" 4 | 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v0.3.1 2 | - Fixed small bug with having the defaultValue always set even when the checked property is provided. 3 | 4 | ## v0.3.0 5 | 6 | - **Feature:** Support React v15 7 | 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-iCheck 2 | 3 | [![NPM version][npm-badge]][npm] [![Build Status][travis-ci-image]][travis-ci-url] 4 | 5 | [![Dependency Status][deps-badge]][deps] 6 | [![devDependency Status][dev-deps-badge]][dev-deps] 7 | [![peerDependency Status][peer-deps-badge]][peer-deps] 8 | 9 | [iCheck](https://github.com/fronteed/icheck) components built with [React](http://facebook.github.io/react/). **No jQuery and Zepto** 10 | 11 | Online demo: http://luqin.github.io/react-icheck 12 | 13 | **Note: React-iCheck still in development** 14 | 15 | ![Skins](http://fronteed.com/iCheck/examples.png) 16 | 17 | 18 | ## Features 19 | 20 | * **Identical inputs across different browsers and devices** — both [desktop and mobile](#browser-support) 21 | * **Touch devices support** — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle 22 | * **Keyboard accessible inputs** — `Tab`, `Spacebar`, `Arrow up/down` and other shortcuts 23 | * **Customization freedom** — use any HTML and CSS to style inputs (try [6 Retina-ready skins](http://fronteed.com/iCheck/)) 24 | * **No jQuery and Zepto** 25 | * **Screenreader accessible inputs** — [ARIA](https://developer.mozilla.org/en-US/docs/Accessibility/ARIA) attributes for VoiceOver and others 26 | * **Lightweight size** 27 | 28 | 29 | **By default, iCheck doesn't provide any CSS styles for wrapper divs** (if you don't use [skins](http://fronteed.com/iCheck/)). 30 | 31 | 32 | ## Usage 33 | 34 | ```sh 35 | npm install react-icheck icheck --save 36 | ``` 37 | 38 | ```js 39 | import 'icheck/skins/all.css'; // or single skin css 40 | 41 | import {Checkbox, Radio} from 'react-icheck'; 42 | 43 | // Checkbox with label 44 | 49 | 50 | // without label 51 | 56 | 57 | 58 | // Radio 59 | 65 | ``` 66 | 67 | ```js 68 | import {Radio, RadioGroup} from 'react-icheck'; 69 | 70 | 71 | 77 | 83 | 90 | 91 | ``` 92 | 93 | More examples: [Online demo](http://luqin.github.io/react-icheck), [Source](https://github.com/luqin/react-icheck/tree/master/examples) 94 | 95 | ## Browser support 96 | 97 | iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others. 98 | 99 | Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices. 100 | 101 | ## Contribute 102 | 103 | Dev base on [react-component-tools](https://github.com/luqin/react-component-tools) 104 | 105 | ```sh 106 | $ git clone https://github.com/luqin/react-icheck.git 107 | $ cd react-icheck 108 | $ npm install 109 | $ npm start # Run the docs site in development mode. This will watch for file changes as you work. And auto refresh the page to see the updates. 110 | ``` 111 | 112 | [npm-badge]: http://badge.fury.io/js/react-icheck.svg 113 | [npm]: https://www.npmjs.com/package/react-icheck 114 | 115 | [deps-badge]: https://david-dm.org/luqin/react-icheck.svg 116 | [deps]: https://david-dm.org/luqin/react-icheck 117 | 118 | [dev-deps-badge]: https://david-dm.org/luqin/react-icheck/dev-status.svg 119 | [dev-deps]: https://david-dm.org/luqin/react-icheck#info=devDependencies 120 | 121 | [peer-deps-badge]: https://david-dm.org/luqin/react-icheck/peer-status.svg 122 | [peer-deps]: https://david-dm.org/luqin/react-icheck#info=peerDependencies 123 | 124 | [travis-ci-image]: https://travis-ci.org/luqin/react-icheck.svg 125 | [travis-ci-url]: https://travis-ci.org/luqin/react-icheck 126 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var taskConfig = { 4 | 5 | component: { 6 | name: 'ReactIcheck' 7 | }, 8 | 9 | alias: { 10 | 'react-icheck': path.resolve(__dirname, './src') 11 | }, 12 | 13 | example: { 14 | src: './examples/src', 15 | dist: './examples/dist', 16 | entry: './examples/src/js/app.js', 17 | html: './examples/src/index.html' 18 | } 19 | 20 | }; 21 | 22 | module.exports = taskConfig; 23 | -------------------------------------------------------------------------------- /dist/react-icheck.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react"), require("classnames")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["react", "classnames"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactIcheck"] = factory(require("react"), require("classnames")); 8 | else 9 | root["ReactIcheck"] = factory(root["react"], root["classnames"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_38__, __WEBPACK_EXTERNAL_MODULE_42__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | /******/ 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | var _interopRequireDefault = __webpack_require__(1)['default']; 60 | 61 | Object.defineProperty(exports, '__esModule', { 62 | value: true 63 | }); 64 | 65 | var _Checkbox = __webpack_require__(2); 66 | 67 | var _Checkbox2 = _interopRequireDefault(_Checkbox); 68 | 69 | var _Radio = __webpack_require__(43); 70 | 71 | var _Radio2 = _interopRequireDefault(_Radio); 72 | 73 | var _RadioGroup = __webpack_require__(44); 74 | 75 | var _RadioGroup2 = _interopRequireDefault(_RadioGroup); 76 | 77 | exports['default'] = { 78 | Checkbox: _Checkbox2['default'], 79 | Radio: _Radio2['default'], 80 | RadioGroup: _RadioGroup2['default'] 81 | }; 82 | module.exports = exports['default']; 83 | 84 | /***/ }, 85 | /* 1 */ 86 | /***/ function(module, exports) { 87 | 88 | "use strict"; 89 | 90 | exports["default"] = function (obj) { 91 | return obj && obj.__esModule ? obj : { 92 | "default": obj 93 | }; 94 | }; 95 | 96 | exports.__esModule = true; 97 | 98 | /***/ }, 99 | /* 2 */ 100 | /***/ function(module, exports, __webpack_require__) { 101 | 102 | 'use strict'; 103 | 104 | var _get = __webpack_require__(3)['default']; 105 | 106 | var _inherits = __webpack_require__(19)['default']; 107 | 108 | var _createClass = __webpack_require__(28)['default']; 109 | 110 | var _classCallCheck = __webpack_require__(31)['default']; 111 | 112 | var _extends = __webpack_require__(32)['default']; 113 | 114 | var _interopRequireDefault = __webpack_require__(1)['default']; 115 | 116 | Object.defineProperty(exports, '__esModule', { 117 | value: true 118 | }); 119 | 120 | var _react = __webpack_require__(38); 121 | 122 | var _react2 = _interopRequireDefault(_react); 123 | 124 | var _EnhancedSwitch = __webpack_require__(39); 125 | 126 | var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); 127 | 128 | var Checkbox = (function (_React$Component) { 129 | _inherits(Checkbox, _React$Component); 130 | 131 | function Checkbox(props) { 132 | _classCallCheck(this, Checkbox); 133 | 134 | _get(Object.getPrototypeOf(Checkbox.prototype), 'constructor', this).call(this, props); 135 | this.state = {}; 136 | } 137 | 138 | _createClass(Checkbox, [{ 139 | key: 'getValue', 140 | value: function getValue() { 141 | return this.refs.enhancedSwitch.getValue(); 142 | } 143 | }, { 144 | key: 'setChecked', 145 | value: function setChecked(newCheckedValue) { 146 | this.refs.enhancedSwitch.setChecked(newCheckedValue); 147 | } 148 | }, { 149 | key: 'isChecked', 150 | value: function isChecked() { 151 | return this.refs.enhancedSwitch.isChecked(); 152 | } 153 | }, { 154 | key: 'render', 155 | value: function render() { 156 | return _react2['default'].createElement(_EnhancedSwitch2['default'], _extends({ ref: 'enhancedSwitch' }, this.props, { inputType: 'checkbox' })); 157 | } 158 | }]); 159 | 160 | return Checkbox; 161 | })(_react2['default'].Component); 162 | 163 | exports['default'] = Checkbox; 164 | module.exports = exports['default']; 165 | 166 | /***/ }, 167 | /* 3 */ 168 | /***/ function(module, exports, __webpack_require__) { 169 | 170 | "use strict"; 171 | 172 | var _Object$getOwnPropertyDescriptor = __webpack_require__(4)["default"]; 173 | 174 | exports["default"] = function get(_x, _x2, _x3) { 175 | var _again = true; 176 | 177 | _function: while (_again) { 178 | var object = _x, 179 | property = _x2, 180 | receiver = _x3; 181 | _again = false; 182 | if (object === null) object = Function.prototype; 183 | 184 | var desc = _Object$getOwnPropertyDescriptor(object, property); 185 | 186 | if (desc === undefined) { 187 | var parent = Object.getPrototypeOf(object); 188 | 189 | if (parent === null) { 190 | return undefined; 191 | } else { 192 | _x = parent; 193 | _x2 = property; 194 | _x3 = receiver; 195 | _again = true; 196 | desc = parent = undefined; 197 | continue _function; 198 | } 199 | } else if ("value" in desc) { 200 | return desc.value; 201 | } else { 202 | var getter = desc.get; 203 | 204 | if (getter === undefined) { 205 | return undefined; 206 | } 207 | 208 | return getter.call(receiver); 209 | } 210 | } 211 | }; 212 | 213 | exports.__esModule = true; 214 | 215 | /***/ }, 216 | /* 4 */ 217 | /***/ function(module, exports, __webpack_require__) { 218 | 219 | module.exports = { "default": __webpack_require__(5), __esModule: true }; 220 | 221 | /***/ }, 222 | /* 5 */ 223 | /***/ function(module, exports, __webpack_require__) { 224 | 225 | var $ = __webpack_require__(6); 226 | __webpack_require__(7); 227 | module.exports = function getOwnPropertyDescriptor(it, key){ 228 | return $.getDesc(it, key); 229 | }; 230 | 231 | /***/ }, 232 | /* 6 */ 233 | /***/ function(module, exports) { 234 | 235 | var $Object = Object; 236 | module.exports = { 237 | create: $Object.create, 238 | getProto: $Object.getPrototypeOf, 239 | isEnum: {}.propertyIsEnumerable, 240 | getDesc: $Object.getOwnPropertyDescriptor, 241 | setDesc: $Object.defineProperty, 242 | setDescs: $Object.defineProperties, 243 | getKeys: $Object.keys, 244 | getNames: $Object.getOwnPropertyNames, 245 | getSymbols: $Object.getOwnPropertySymbols, 246 | each: [].forEach 247 | }; 248 | 249 | /***/ }, 250 | /* 7 */ 251 | /***/ function(module, exports, __webpack_require__) { 252 | 253 | // 19.1.2.6 Object.getOwnPropertyDescriptor(O, P) 254 | var toIObject = __webpack_require__(8); 255 | 256 | __webpack_require__(12)('getOwnPropertyDescriptor', function($getOwnPropertyDescriptor){ 257 | return function getOwnPropertyDescriptor(it, key){ 258 | return $getOwnPropertyDescriptor(toIObject(it), key); 259 | }; 260 | }); 261 | 262 | /***/ }, 263 | /* 8 */ 264 | /***/ function(module, exports, __webpack_require__) { 265 | 266 | // to indexed object, toObject with fallback for non-array-like ES3 strings 267 | var IObject = __webpack_require__(9) 268 | , defined = __webpack_require__(11); 269 | module.exports = function(it){ 270 | return IObject(defined(it)); 271 | }; 272 | 273 | /***/ }, 274 | /* 9 */ 275 | /***/ function(module, exports, __webpack_require__) { 276 | 277 | // fallback for non-array-like ES3 and non-enumerable old V8 strings 278 | var cof = __webpack_require__(10); 279 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){ 280 | return cof(it) == 'String' ? it.split('') : Object(it); 281 | }; 282 | 283 | /***/ }, 284 | /* 10 */ 285 | /***/ function(module, exports) { 286 | 287 | var toString = {}.toString; 288 | 289 | module.exports = function(it){ 290 | return toString.call(it).slice(8, -1); 291 | }; 292 | 293 | /***/ }, 294 | /* 11 */ 295 | /***/ function(module, exports) { 296 | 297 | // 7.2.1 RequireObjectCoercible(argument) 298 | module.exports = function(it){ 299 | if(it == undefined)throw TypeError("Can't call method on " + it); 300 | return it; 301 | }; 302 | 303 | /***/ }, 304 | /* 12 */ 305 | /***/ function(module, exports, __webpack_require__) { 306 | 307 | // most Object methods by ES6 should accept primitives 308 | var $export = __webpack_require__(13) 309 | , core = __webpack_require__(15) 310 | , fails = __webpack_require__(18); 311 | module.exports = function(KEY, exec){ 312 | var fn = (core.Object || {})[KEY] || Object[KEY] 313 | , exp = {}; 314 | exp[KEY] = exec(fn); 315 | $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp); 316 | }; 317 | 318 | /***/ }, 319 | /* 13 */ 320 | /***/ function(module, exports, __webpack_require__) { 321 | 322 | var global = __webpack_require__(14) 323 | , core = __webpack_require__(15) 324 | , ctx = __webpack_require__(16) 325 | , PROTOTYPE = 'prototype'; 326 | 327 | var $export = function(type, name, source){ 328 | var IS_FORCED = type & $export.F 329 | , IS_GLOBAL = type & $export.G 330 | , IS_STATIC = type & $export.S 331 | , IS_PROTO = type & $export.P 332 | , IS_BIND = type & $export.B 333 | , IS_WRAP = type & $export.W 334 | , exports = IS_GLOBAL ? core : core[name] || (core[name] = {}) 335 | , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE] 336 | , key, own, out; 337 | if(IS_GLOBAL)source = name; 338 | for(key in source){ 339 | // contains in native 340 | own = !IS_FORCED && target && key in target; 341 | if(own && key in exports)continue; 342 | // export native or passed 343 | out = own ? target[key] : source[key]; 344 | // prevent global pollution for namespaces 345 | exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key] 346 | // bind timers to global for call from export context 347 | : IS_BIND && own ? ctx(out, global) 348 | // wrap global constructors for prevent change them in library 349 | : IS_WRAP && target[key] == out ? (function(C){ 350 | var F = function(param){ 351 | return this instanceof C ? new C(param) : C(param); 352 | }; 353 | F[PROTOTYPE] = C[PROTOTYPE]; 354 | return F; 355 | // make static versions for prototype methods 356 | })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; 357 | if(IS_PROTO)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out; 358 | } 359 | }; 360 | // type bitmap 361 | $export.F = 1; // forced 362 | $export.G = 2; // global 363 | $export.S = 4; // static 364 | $export.P = 8; // proto 365 | $export.B = 16; // bind 366 | $export.W = 32; // wrap 367 | module.exports = $export; 368 | 369 | /***/ }, 370 | /* 14 */ 371 | /***/ function(module, exports) { 372 | 373 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 374 | var global = module.exports = typeof window != 'undefined' && window.Math == Math 375 | ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')(); 376 | if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef 377 | 378 | /***/ }, 379 | /* 15 */ 380 | /***/ function(module, exports) { 381 | 382 | var core = module.exports = {version: '1.2.6'}; 383 | if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef 384 | 385 | /***/ }, 386 | /* 16 */ 387 | /***/ function(module, exports, __webpack_require__) { 388 | 389 | // optional / simple context binding 390 | var aFunction = __webpack_require__(17); 391 | module.exports = function(fn, that, length){ 392 | aFunction(fn); 393 | if(that === undefined)return fn; 394 | switch(length){ 395 | case 1: return function(a){ 396 | return fn.call(that, a); 397 | }; 398 | case 2: return function(a, b){ 399 | return fn.call(that, a, b); 400 | }; 401 | case 3: return function(a, b, c){ 402 | return fn.call(that, a, b, c); 403 | }; 404 | } 405 | return function(/* ...args */){ 406 | return fn.apply(that, arguments); 407 | }; 408 | }; 409 | 410 | /***/ }, 411 | /* 17 */ 412 | /***/ function(module, exports) { 413 | 414 | module.exports = function(it){ 415 | if(typeof it != 'function')throw TypeError(it + ' is not a function!'); 416 | return it; 417 | }; 418 | 419 | /***/ }, 420 | /* 18 */ 421 | /***/ function(module, exports) { 422 | 423 | module.exports = function(exec){ 424 | try { 425 | return !!exec(); 426 | } catch(e){ 427 | return true; 428 | } 429 | }; 430 | 431 | /***/ }, 432 | /* 19 */ 433 | /***/ function(module, exports, __webpack_require__) { 434 | 435 | "use strict"; 436 | 437 | var _Object$create = __webpack_require__(20)["default"]; 438 | 439 | var _Object$setPrototypeOf = __webpack_require__(22)["default"]; 440 | 441 | exports["default"] = function (subClass, superClass) { 442 | if (typeof superClass !== "function" && superClass !== null) { 443 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 444 | } 445 | 446 | subClass.prototype = _Object$create(superClass && superClass.prototype, { 447 | constructor: { 448 | value: subClass, 449 | enumerable: false, 450 | writable: true, 451 | configurable: true 452 | } 453 | }); 454 | if (superClass) _Object$setPrototypeOf ? _Object$setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 455 | }; 456 | 457 | exports.__esModule = true; 458 | 459 | /***/ }, 460 | /* 20 */ 461 | /***/ function(module, exports, __webpack_require__) { 462 | 463 | module.exports = { "default": __webpack_require__(21), __esModule: true }; 464 | 465 | /***/ }, 466 | /* 21 */ 467 | /***/ function(module, exports, __webpack_require__) { 468 | 469 | var $ = __webpack_require__(6); 470 | module.exports = function create(P, D){ 471 | return $.create(P, D); 472 | }; 473 | 474 | /***/ }, 475 | /* 22 */ 476 | /***/ function(module, exports, __webpack_require__) { 477 | 478 | module.exports = { "default": __webpack_require__(23), __esModule: true }; 479 | 480 | /***/ }, 481 | /* 23 */ 482 | /***/ function(module, exports, __webpack_require__) { 483 | 484 | __webpack_require__(24); 485 | module.exports = __webpack_require__(15).Object.setPrototypeOf; 486 | 487 | /***/ }, 488 | /* 24 */ 489 | /***/ function(module, exports, __webpack_require__) { 490 | 491 | // 19.1.3.19 Object.setPrototypeOf(O, proto) 492 | var $export = __webpack_require__(13); 493 | $export($export.S, 'Object', {setPrototypeOf: __webpack_require__(25).set}); 494 | 495 | /***/ }, 496 | /* 25 */ 497 | /***/ function(module, exports, __webpack_require__) { 498 | 499 | // Works with __proto__ only. Old v8 can't work with null proto objects. 500 | /* eslint-disable no-proto */ 501 | var getDesc = __webpack_require__(6).getDesc 502 | , isObject = __webpack_require__(26) 503 | , anObject = __webpack_require__(27); 504 | var check = function(O, proto){ 505 | anObject(O); 506 | if(!isObject(proto) && proto !== null)throw TypeError(proto + ": can't set as prototype!"); 507 | }; 508 | module.exports = { 509 | set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line 510 | function(test, buggy, set){ 511 | try { 512 | set = __webpack_require__(16)(Function.call, getDesc(Object.prototype, '__proto__').set, 2); 513 | set(test, []); 514 | buggy = !(test instanceof Array); 515 | } catch(e){ buggy = true; } 516 | return function setPrototypeOf(O, proto){ 517 | check(O, proto); 518 | if(buggy)O.__proto__ = proto; 519 | else set(O, proto); 520 | return O; 521 | }; 522 | }({}, false) : undefined), 523 | check: check 524 | }; 525 | 526 | /***/ }, 527 | /* 26 */ 528 | /***/ function(module, exports) { 529 | 530 | module.exports = function(it){ 531 | return typeof it === 'object' ? it !== null : typeof it === 'function'; 532 | }; 533 | 534 | /***/ }, 535 | /* 27 */ 536 | /***/ function(module, exports, __webpack_require__) { 537 | 538 | var isObject = __webpack_require__(26); 539 | module.exports = function(it){ 540 | if(!isObject(it))throw TypeError(it + ' is not an object!'); 541 | return it; 542 | }; 543 | 544 | /***/ }, 545 | /* 28 */ 546 | /***/ function(module, exports, __webpack_require__) { 547 | 548 | "use strict"; 549 | 550 | var _Object$defineProperty = __webpack_require__(29)["default"]; 551 | 552 | exports["default"] = (function () { 553 | function defineProperties(target, props) { 554 | for (var i = 0; i < props.length; i++) { 555 | var descriptor = props[i]; 556 | descriptor.enumerable = descriptor.enumerable || false; 557 | descriptor.configurable = true; 558 | if ("value" in descriptor) descriptor.writable = true; 559 | 560 | _Object$defineProperty(target, descriptor.key, descriptor); 561 | } 562 | } 563 | 564 | return function (Constructor, protoProps, staticProps) { 565 | if (protoProps) defineProperties(Constructor.prototype, protoProps); 566 | if (staticProps) defineProperties(Constructor, staticProps); 567 | return Constructor; 568 | }; 569 | })(); 570 | 571 | exports.__esModule = true; 572 | 573 | /***/ }, 574 | /* 29 */ 575 | /***/ function(module, exports, __webpack_require__) { 576 | 577 | module.exports = { "default": __webpack_require__(30), __esModule: true }; 578 | 579 | /***/ }, 580 | /* 30 */ 581 | /***/ function(module, exports, __webpack_require__) { 582 | 583 | var $ = __webpack_require__(6); 584 | module.exports = function defineProperty(it, key, desc){ 585 | return $.setDesc(it, key, desc); 586 | }; 587 | 588 | /***/ }, 589 | /* 31 */ 590 | /***/ function(module, exports) { 591 | 592 | "use strict"; 593 | 594 | exports["default"] = function (instance, Constructor) { 595 | if (!(instance instanceof Constructor)) { 596 | throw new TypeError("Cannot call a class as a function"); 597 | } 598 | }; 599 | 600 | exports.__esModule = true; 601 | 602 | /***/ }, 603 | /* 32 */ 604 | /***/ function(module, exports, __webpack_require__) { 605 | 606 | "use strict"; 607 | 608 | var _Object$assign = __webpack_require__(33)["default"]; 609 | 610 | exports["default"] = _Object$assign || function (target) { 611 | for (var i = 1; i < arguments.length; i++) { 612 | var source = arguments[i]; 613 | 614 | for (var key in source) { 615 | if (Object.prototype.hasOwnProperty.call(source, key)) { 616 | target[key] = source[key]; 617 | } 618 | } 619 | } 620 | 621 | return target; 622 | }; 623 | 624 | exports.__esModule = true; 625 | 626 | /***/ }, 627 | /* 33 */ 628 | /***/ function(module, exports, __webpack_require__) { 629 | 630 | module.exports = { "default": __webpack_require__(34), __esModule: true }; 631 | 632 | /***/ }, 633 | /* 34 */ 634 | /***/ function(module, exports, __webpack_require__) { 635 | 636 | __webpack_require__(35); 637 | module.exports = __webpack_require__(15).Object.assign; 638 | 639 | /***/ }, 640 | /* 35 */ 641 | /***/ function(module, exports, __webpack_require__) { 642 | 643 | // 19.1.3.1 Object.assign(target, source) 644 | var $export = __webpack_require__(13); 645 | 646 | $export($export.S + $export.F, 'Object', {assign: __webpack_require__(36)}); 647 | 648 | /***/ }, 649 | /* 36 */ 650 | /***/ function(module, exports, __webpack_require__) { 651 | 652 | // 19.1.2.1 Object.assign(target, source, ...) 653 | var $ = __webpack_require__(6) 654 | , toObject = __webpack_require__(37) 655 | , IObject = __webpack_require__(9); 656 | 657 | // should work with symbols and should have deterministic property order (V8 bug) 658 | module.exports = __webpack_require__(18)(function(){ 659 | var a = Object.assign 660 | , A = {} 661 | , B = {} 662 | , S = Symbol() 663 | , K = 'abcdefghijklmnopqrst'; 664 | A[S] = 7; 665 | K.split('').forEach(function(k){ B[k] = k; }); 666 | return a({}, A)[S] != 7 || Object.keys(a({}, B)).join('') != K; 667 | }) ? function assign(target, source){ // eslint-disable-line no-unused-vars 668 | var T = toObject(target) 669 | , $$ = arguments 670 | , $$len = $$.length 671 | , index = 1 672 | , getKeys = $.getKeys 673 | , getSymbols = $.getSymbols 674 | , isEnum = $.isEnum; 675 | while($$len > index){ 676 | var S = IObject($$[index++]) 677 | , keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S) 678 | , length = keys.length 679 | , j = 0 680 | , key; 681 | while(length > j)if(isEnum.call(S, key = keys[j++]))T[key] = S[key]; 682 | } 683 | return T; 684 | } : Object.assign; 685 | 686 | /***/ }, 687 | /* 37 */ 688 | /***/ function(module, exports, __webpack_require__) { 689 | 690 | // 7.1.13 ToObject(argument) 691 | var defined = __webpack_require__(11); 692 | module.exports = function(it){ 693 | return Object(defined(it)); 694 | }; 695 | 696 | /***/ }, 697 | /* 38 */ 698 | /***/ function(module, exports) { 699 | 700 | module.exports = __WEBPACK_EXTERNAL_MODULE_38__; 701 | 702 | /***/ }, 703 | /* 39 */ 704 | /***/ function(module, exports, __webpack_require__) { 705 | 706 | 'use strict'; 707 | 708 | var _get = __webpack_require__(3)['default']; 709 | 710 | var _inherits = __webpack_require__(19)['default']; 711 | 712 | var _createClass = __webpack_require__(28)['default']; 713 | 714 | var _classCallCheck = __webpack_require__(31)['default']; 715 | 716 | var _defineProperty = __webpack_require__(40)['default']; 717 | 718 | var _objectWithoutProperties = __webpack_require__(41)['default']; 719 | 720 | var _extends = __webpack_require__(32)['default']; 721 | 722 | var _interopRequireDefault = __webpack_require__(1)['default']; 723 | 724 | Object.defineProperty(exports, '__esModule', { 725 | value: true 726 | }); 727 | 728 | var _react = __webpack_require__(38); 729 | 730 | var _react2 = _interopRequireDefault(_react); 731 | 732 | var _classnames2 = __webpack_require__(42); 733 | 734 | var _classnames3 = _interopRequireDefault(_classnames2); 735 | 736 | var _iCheck = 'iCheck'; 737 | var _iCheckHelper = _iCheck + '-helper'; 738 | 739 | var EnhancedSwitch = (function (_React$Component) { 740 | _inherits(EnhancedSwitch, _React$Component); 741 | 742 | _createClass(EnhancedSwitch, null, [{ 743 | key: 'propTypes', 744 | value: { 745 | inputType: _react2['default'].PropTypes.string.isRequired, 746 | 747 | checked: _react2['default'].PropTypes.bool, 748 | defaultChecked: _react2['default'].PropTypes.bool, 749 | 750 | label: _react2['default'].PropTypes.node, 751 | 752 | disabled: _react2['default'].PropTypes.bool, 753 | 754 | indeterminate: _react2['default'].PropTypes.bool, 755 | 756 | onChange: _react2['default'].PropTypes.func, 757 | onBlur: _react2['default'].PropTypes.func, 758 | onFocus: _react2['default'].PropTypes.func, 759 | 760 | // base class added to customized checkboxes 761 | checkboxClass: _react2['default'].PropTypes.string, 762 | 763 | // base class added to customized radio buttons 764 | radioClass: _react2['default'].PropTypes.string, 765 | 766 | // class added on checked state (input.checked = true) 767 | checkedClass: _react2['default'].PropTypes.string, 768 | 769 | // if not empty, used instead of 'checkedClass' option (input type specific) 770 | checkedCheckboxClass: _react2['default'].PropTypes.string, 771 | checkedRadioClass: _react2['default'].PropTypes.string, 772 | 773 | // if not empty, added as class name on unchecked state (input.checked = false) 774 | uncheckedClass: _react2['default'].PropTypes.string, 775 | 776 | // if not empty, used instead of 'uncheckedClass' option (input type specific) 777 | uncheckedCheckboxClass: _react2['default'].PropTypes.string, 778 | uncheckedRadioClass: _react2['default'].PropTypes.string, 779 | 780 | // class added on disabled state (input.disabled = true) 781 | disabledClass: _react2['default'].PropTypes.string, 782 | 783 | // if not empty, used instead of 'disabledClass' option (input type specific) 784 | disabledCheckboxClass: _react2['default'].PropTypes.string, 785 | disabledRadioClass: _react2['default'].PropTypes.string, 786 | 787 | // if not empty, added as class name on enabled state (input.disabled = false) 788 | enabledClass: _react2['default'].PropTypes.string, 789 | 790 | // if not empty, used instead of 'enabledClass' option (input type specific) 791 | enabledCheckboxClass: _react2['default'].PropTypes.string, 792 | enabledRadioClass: _react2['default'].PropTypes.string, 793 | 794 | // class added on indeterminate state (input.indeterminate = true) 795 | indeterminateClass: _react2['default'].PropTypes.string, 796 | 797 | // if not empty, used instead of 'indeterminateClass' option (input type specific) 798 | indeterminateCheckboxClass: _react2['default'].PropTypes.string, 799 | indeterminateRadioClass: _react2['default'].PropTypes.string, 800 | 801 | // if not empty, added as class name on determinate state (input.indeterminate = false) 802 | determinateClass: _react2['default'].PropTypes.string, 803 | 804 | // if not empty, used instead of 'determinateClass' option (input type specific) 805 | determinateCheckboxClass: _react2['default'].PropTypes.string, 806 | determinateRadioClass: _react2['default'].PropTypes.string, 807 | 808 | // class added on hover state (pointer is moved onto input) 809 | hoverClass: _react2['default'].PropTypes.string, 810 | 811 | // class added on focus state (input has gained focus) 812 | focusClass: _react2['default'].PropTypes.string, 813 | 814 | // class added on active state (mouse button is pressed on input) 815 | activeClass: _react2['default'].PropTypes.string, 816 | 817 | // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover 818 | labelHover: _react2['default'].PropTypes.bool, 819 | 820 | // class added to label if labelHover set to true 821 | labelHoverClass: _react2['default'].PropTypes.string, 822 | 823 | // increase clickable area by given % (negative number to decrease) 824 | increaseArea: _react2['default'].PropTypes.string, 825 | 826 | // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled 827 | cursor: _react2['default'].PropTypes.bool, 828 | 829 | // set true to inherit original input's class name 830 | inheritClass: _react2['default'].PropTypes.bool, 831 | 832 | // if set to true, input's id is prefixed with 'iCheck-' and attached 833 | inheritID: _react2['default'].PropTypes.bool, 834 | 835 | // set true to activate ARIA support 836 | aria: _react2['default'].PropTypes.bool, 837 | 838 | // add HTML code or text inside customized input 839 | insert: _react2['default'].PropTypes.node, 840 | 841 | children: _react2['default'].PropTypes.node 842 | }, 843 | enumerable: true 844 | }, { 845 | key: 'defaultProps', 846 | value: { 847 | 848 | checkboxClass: 'icheckbox', 849 | 850 | // base class added to customized radio buttons 851 | radioClass: 'iradio', 852 | 853 | // class added on checked state (input.checked = true) 854 | checkedClass: 'checked', 855 | 856 | // class added on disabled state (input.disabled = true) 857 | disabledClass: 'disabled', 858 | 859 | // class added on indeterminate state (input.indeterminate = true) 860 | indeterminateClass: 'indeterminate', 861 | 862 | // class added on hover state (pointer is moved onto input) 863 | hoverClass: 'hover', 864 | 865 | // class added on focus state (input has gained focus) 866 | focusClass: 'focus', 867 | 868 | // class added on active state (mouse button is pressed on input) 869 | activeClass: 'active', 870 | 871 | // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover 872 | labelHover: true, 873 | 874 | // class added to label if labelHover set to true 875 | labelHoverClass: 'hover', 876 | 877 | // increase clickable area by given % (negative number to decrease) 878 | increaseArea: '', 879 | 880 | // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled 881 | cursor: false, 882 | 883 | // set true to inherit original input's class name 884 | inheritClass: false, 885 | 886 | // if set to true, input's id is prefixed with 'iCheck-' and attached 887 | inheritID: false, 888 | 889 | // set true to activate ARIA support 890 | aria: false 891 | }, 892 | enumerable: true 893 | }]); 894 | 895 | function EnhancedSwitch(props) { 896 | _classCallCheck(this, EnhancedSwitch); 897 | 898 | _get(Object.getPrototypeOf(EnhancedSwitch.prototype), 'constructor', this).call(this, props); 899 | var checked = false; 900 | if ('checked' in props) { 901 | checked = props.checked; 902 | } else { 903 | checked = props.defaultChecked; 904 | } 905 | // Assume we aren't on a mobile for server-side-rendering 906 | this._mobile = false; 907 | this.state = { 908 | checked: checked, 909 | focused: false, 910 | hovered: false, 911 | active: false 912 | }; 913 | } 914 | 915 | _createClass(EnhancedSwitch, [{ 916 | key: 'componentDidMount', 917 | value: function componentDidMount() { 918 | if (typeof navigator !== 'undefined') { 919 | this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent); 920 | } 921 | this.adjustStyle(); 922 | this.setIndeterminate(); 923 | this.forceUpdate(); 924 | } 925 | }, { 926 | key: 'componentWillReceiveProps', 927 | value: function componentWillReceiveProps(nextProps) { 928 | if ('checked' in nextProps) { 929 | this.setState({ 930 | checked: nextProps.checked 931 | }); 932 | } 933 | } 934 | }, { 935 | key: 'componentDidUpdate', 936 | value: function componentDidUpdate() { 937 | this.adjustStyle(); 938 | this.setIndeterminate(); 939 | } 940 | }, { 941 | key: 'getValue', 942 | value: function getValue() { 943 | return this.refs.checkbox.value; 944 | } 945 | }, { 946 | key: 'setChecked', 947 | value: function setChecked(newCheckedValue) { 948 | if (!this.props.hasOwnProperty('checked') || this.props.checked === false) { 949 | // TODO: this.props.onParentShouldUpdate(newSwitchedValue); 950 | this.refs.checkbox.checked = newCheckedValue; 951 | } else { 952 | if (false) { 953 | var message = 'Cannot call set method while checked is defined as a property.'; 954 | console.error(message); // eslint-disable-line 955 | } 956 | } 957 | } 958 | }, { 959 | key: 'setIndeterminate', 960 | value: function setIndeterminate() { 961 | if (this.props.indeterminate) { 962 | this.refs.checkbox.indeterminate = true; 963 | } 964 | } 965 | }, { 966 | key: 'adjustStyle', 967 | value: function adjustStyle() { 968 | var inputContainer = this.refs.inputContainer; 969 | 970 | var _window$getComputedStyle = window.getComputedStyle(inputContainer); 971 | 972 | var position = _window$getComputedStyle.position; 973 | 974 | if (position === 'static') { 975 | inputContainer.style.position = 'relative'; 976 | } 977 | } 978 | }, { 979 | key: 'isChecked', 980 | value: function isChecked() { 981 | return this.refs.checkbox.checked; 982 | } 983 | }, { 984 | key: 'handleChange', 985 | value: function handleChange(e) { 986 | var checked = e.target.checked; 987 | if (!('checked' in this.props)) { 988 | this.setState({ 989 | checked: checked 990 | }); 991 | } 992 | 993 | if (this.props.onChange) { 994 | this.props.onChange(e, checked); 995 | } 996 | } 997 | }, { 998 | key: 'handleBlur', 999 | value: function handleBlur(e) { 1000 | this.setState({ 1001 | focused: false 1002 | }); 1003 | 1004 | if (this.props.onBlur) { 1005 | this.props.onBlur(e); 1006 | } 1007 | } 1008 | }, { 1009 | key: 'handleFocus', 1010 | value: function handleFocus(e) { 1011 | this.setState({ 1012 | focused: true 1013 | }); 1014 | 1015 | if (this.props.onFocus) { 1016 | this.props.onFocus(e); 1017 | } 1018 | } 1019 | }, { 1020 | key: 'handleHelperClick', 1021 | value: function handleHelperClick(event) { 1022 | if (this.props.label) { 1023 | return; 1024 | } 1025 | 1026 | if (this.props.disabled) { 1027 | return; 1028 | } 1029 | 1030 | var newChecked = !this.refs.checkbox.checked; 1031 | 1032 | if (!('checked' in this.props)) { 1033 | this.refs.checkbox.checked = newChecked; 1034 | this.setState({ 1035 | checked: newChecked 1036 | }); 1037 | } 1038 | 1039 | event.preventDefault(); 1040 | event.stopPropagation(); 1041 | 1042 | if (this.props.onChange) { 1043 | // make sure element is not target 1044 | event.target = this.refs.checkbox; 1045 | this.props.onChange(event, newChecked); 1046 | } 1047 | } 1048 | }, { 1049 | key: 'render', 1050 | value: function render() { 1051 | var _classnames; 1052 | 1053 | var props = this.props; 1054 | var disabled = props.disabled; 1055 | var type = props.type; 1056 | var name = props.name; 1057 | var value = props.value; 1058 | var label = props.label; 1059 | var onBlur = props.onBlur; 1060 | var onFocus = props.onFocus; 1061 | var onMouseUp = props.onMouseUp; 1062 | var onMouseDown = props.onMouseDown; 1063 | var onMouseLeave = props.onMouseLeave; 1064 | var onTouchStart = props.onTouchStart; 1065 | var onTouchEnd = props.onTouchEnd; 1066 | var className = props.className; 1067 | 1068 | var other = _objectWithoutProperties(props, ['type', 'name', 'value', 'label', 'onBlur', 'onFocus', 'onMouseUp', 'onMouseDown', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'className']); 1069 | 1070 | var checked = this.state.checked; 1071 | 1072 | // Setup clickable area 1073 | var area = ('' + props.increaseArea).replace('%', '') | 0; 1074 | 1075 | // Clickable area limit 1076 | if (area < -50) { 1077 | area = -50; 1078 | } 1079 | 1080 | var id = props.id; 1081 | 1082 | // Layer styles 1083 | var offset = -area + '%'; 1084 | var size = 100 + area * 2 + '%'; 1085 | var layer = { 1086 | position: 'absolute', 1087 | top: offset, 1088 | left: offset, 1089 | display: 'block', 1090 | width: size, 1091 | height: size, 1092 | margin: 0, 1093 | padding: 0, 1094 | background: '#fff', 1095 | border: 0, 1096 | opacity: 0, 1097 | cursor: disabled ? 'default' : 'pointer' 1098 | }; 1099 | 1100 | // Choose how to hide input 1101 | var hide = undefined; 1102 | if (this._mobile) { 1103 | hide = { 1104 | position: 'absolute', 1105 | visibility: 'hidden' 1106 | }; 1107 | } else if (area) { 1108 | hide = layer; 1109 | } else { 1110 | hide = { 1111 | position: 'absolute', 1112 | opacity: 0 1113 | }; 1114 | } 1115 | 1116 | // Check ARIA option 1117 | var aria = !!props.aria; 1118 | 1119 | // TODO: Set ARIA placeholder 1120 | // let ariaID = _iCheck + '-' + Math.random().toString(36).substr(2, 6); 1121 | 1122 | var helper = undefined; 1123 | var indeterminateClass = props.indeterminateClass; 1124 | if (props.inputType === 'checkbox' && typeof props.indeterminateCheckboxClass !== 'undefined') { 1125 | indeterminateClass = props.indeterminateCheckboxClass; 1126 | } else if (props.inputType === 'radio' && typeof props.indeterminateRadioClass !== 'undefined') { 1127 | indeterminateClass = props.indeterminateRadioClass; 1128 | } 1129 | 1130 | var wrapProps = { 1131 | className: (0, _classnames3['default'])((_classnames = {}, _defineProperty(_classnames, props.checkboxClass, props.inputType === 'checkbox'), _defineProperty(_classnames, props.radioClass, props.inputType === 'radio'), _defineProperty(_classnames, indeterminateClass, props.indeterminate), _defineProperty(_classnames, props.checkedClass, checked), _defineProperty(_classnames, props.disabledClass, disabled), _defineProperty(_classnames, props.hoverClass, this.state.hovered), _defineProperty(_classnames, props.focusClass, this.state.focused), _defineProperty(_classnames, props.activeClass, this.state.active), _classnames)) 1132 | }; 1133 | 1134 | if (aria) { 1135 | wrapProps.role = props.inputType; 1136 | // Set ARIA "labelledby" 1137 | wrapProps['aria-labelledby'] = ''; 1138 | } 1139 | 1140 | if (props.inheritClass) { 1141 | wrapProps.className = (0, _classnames3['default'])(wrapProps.className, props.className); 1142 | } 1143 | 1144 | if (props.inheritID && id) { 1145 | wrapProps.id = _iCheck + '-' + id; 1146 | } 1147 | 1148 | var helperProps = { 1149 | className: _iCheckHelper, 1150 | style: layer, 1151 | onClick: this.handleHelperClick.bind(this) 1152 | }; 1153 | 1154 | // Layer addition 1155 | helper = _react2['default'].createElement('ins', helperProps); 1156 | 1157 | var inputProps = { 1158 | ref: 'checkbox', 1159 | type: props.inputType, 1160 | style: hide, 1161 | name: name, 1162 | value: value, 1163 | defaultChecked: props.defaultChecked, 1164 | onChange: this.handleChange.bind(this), 1165 | onBlur: this.handleBlur.bind(this), 1166 | onFocus: this.handleFocus.bind(this) 1167 | }; 1168 | 1169 | var inputElement = _react2['default'].createElement('input', inputProps); 1170 | 1171 | var insertElement = props.insert || undefined; 1172 | if (insertElement && !_react2['default'].isValidElement(insertElement)) { 1173 | insertElement = _react2['default'].createElement('div', { dangerouslySetInnerHTML: { __html: insertElement } }); 1174 | } 1175 | 1176 | var inputContainer = _react2['default'].createElement( 1177 | 'div', 1178 | _extends({ ref: 'inputContainer' }, wrapProps), 1179 | inputElement, 1180 | insertElement, 1181 | helper 1182 | ); 1183 | 1184 | var labelElement = props.label; 1185 | if (!labelElement) { 1186 | return inputContainer; 1187 | } 1188 | if (!_react2['default'].isValidElement(labelElement)) { 1189 | labelElement = _react2['default'].createElement('span', { dangerouslySetInnerHTML: { __html: labelElement } }); 1190 | } 1191 | 1192 | // Label events 1193 | function handleLabelEvent(event) { 1194 | // Do nothing if input is disabled 1195 | if (disabled) { 1196 | return; 1197 | } 1198 | 1199 | var etype = event.type; 1200 | 1201 | // Click 1202 | if (etype === 'click') { 1203 | // FIXME 1204 | // if ($(event.target).is('a')) { 1205 | // return; 1206 | // } 1207 | // Hover state 1208 | } else if (props.labelHover) { 1209 | // mouseout|touchend false 1210 | this.setState({ 1211 | hovered: !/ut|nd/.test(etype) 1212 | }); 1213 | } 1214 | 1215 | if (this._mobile) { 1216 | event.stopPropagation(); 1217 | } 1218 | // return false; 1219 | } 1220 | 1221 | var labelProps = { 1222 | // onClick: handleLabelEvent.bind(this), 1223 | onMouseOver: handleLabelEvent.bind(this), 1224 | onMouseOut: handleLabelEvent.bind(this), 1225 | onTouchStart: handleLabelEvent.bind(this), 1226 | onTouchEnd: handleLabelEvent.bind(this) 1227 | }; 1228 | 1229 | return _react2['default'].createElement( 1230 | 'label', 1231 | labelProps, 1232 | inputContainer, 1233 | labelElement 1234 | ); 1235 | } 1236 | }]); 1237 | 1238 | return EnhancedSwitch; 1239 | })(_react2['default'].Component); 1240 | 1241 | exports['default'] = EnhancedSwitch; 1242 | module.exports = exports['default']; 1243 | 1244 | /***/ }, 1245 | /* 40 */ 1246 | /***/ function(module, exports, __webpack_require__) { 1247 | 1248 | "use strict"; 1249 | 1250 | var _Object$defineProperty = __webpack_require__(29)["default"]; 1251 | 1252 | exports["default"] = function (obj, key, value) { 1253 | if (key in obj) { 1254 | _Object$defineProperty(obj, key, { 1255 | value: value, 1256 | enumerable: true, 1257 | configurable: true, 1258 | writable: true 1259 | }); 1260 | } else { 1261 | obj[key] = value; 1262 | } 1263 | 1264 | return obj; 1265 | }; 1266 | 1267 | exports.__esModule = true; 1268 | 1269 | /***/ }, 1270 | /* 41 */ 1271 | /***/ function(module, exports) { 1272 | 1273 | "use strict"; 1274 | 1275 | exports["default"] = function (obj, keys) { 1276 | var target = {}; 1277 | 1278 | for (var i in obj) { 1279 | if (keys.indexOf(i) >= 0) continue; 1280 | if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; 1281 | target[i] = obj[i]; 1282 | } 1283 | 1284 | return target; 1285 | }; 1286 | 1287 | exports.__esModule = true; 1288 | 1289 | /***/ }, 1290 | /* 42 */ 1291 | /***/ function(module, exports) { 1292 | 1293 | module.exports = __WEBPACK_EXTERNAL_MODULE_42__; 1294 | 1295 | /***/ }, 1296 | /* 43 */ 1297 | /***/ function(module, exports, __webpack_require__) { 1298 | 1299 | 'use strict'; 1300 | 1301 | var _get = __webpack_require__(3)['default']; 1302 | 1303 | var _inherits = __webpack_require__(19)['default']; 1304 | 1305 | var _createClass = __webpack_require__(28)['default']; 1306 | 1307 | var _classCallCheck = __webpack_require__(31)['default']; 1308 | 1309 | var _extends = __webpack_require__(32)['default']; 1310 | 1311 | var _interopRequireDefault = __webpack_require__(1)['default']; 1312 | 1313 | Object.defineProperty(exports, '__esModule', { 1314 | value: true 1315 | }); 1316 | 1317 | var _react = __webpack_require__(38); 1318 | 1319 | var _react2 = _interopRequireDefault(_react); 1320 | 1321 | var _EnhancedSwitch = __webpack_require__(39); 1322 | 1323 | var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); 1324 | 1325 | var Radio = (function (_React$Component) { 1326 | _inherits(Radio, _React$Component); 1327 | 1328 | function Radio() { 1329 | _classCallCheck(this, Radio); 1330 | 1331 | _get(Object.getPrototypeOf(Radio.prototype), 'constructor', this).apply(this, arguments); 1332 | } 1333 | 1334 | _createClass(Radio, [{ 1335 | key: 'getValue', 1336 | value: function getValue() { 1337 | return this.refs.enhancedSwitch.getValue(); 1338 | } 1339 | }, { 1340 | key: 'setChecked', 1341 | value: function setChecked(newCheckedValue) { 1342 | this.refs.enhancedSwitch.setSwitched(newCheckedValue); 1343 | } 1344 | }, { 1345 | key: 'isChecked', 1346 | value: function isChecked() { 1347 | return this.refs.enhancedSwitch.isSwitched(); 1348 | } 1349 | }, { 1350 | key: 'render', 1351 | value: function render() { 1352 | var enhancedSwitchProps = { 1353 | ref: 'enhancedSwitch', 1354 | inputType: 'radio' 1355 | }; 1356 | 1357 | // labelClassName 1358 | return _react2['default'].createElement(_EnhancedSwitch2['default'], _extends({}, this.props, enhancedSwitchProps)); 1359 | } 1360 | }]); 1361 | 1362 | return Radio; 1363 | })(_react2['default'].Component); 1364 | 1365 | exports['default'] = Radio; 1366 | module.exports = exports['default']; 1367 | 1368 | /***/ }, 1369 | /* 44 */ 1370 | /***/ function(module, exports, __webpack_require__) { 1371 | 1372 | 'use strict'; 1373 | 1374 | var _get = __webpack_require__(3)['default']; 1375 | 1376 | var _inherits = __webpack_require__(19)['default']; 1377 | 1378 | var _createClass = __webpack_require__(28)['default']; 1379 | 1380 | var _classCallCheck = __webpack_require__(31)['default']; 1381 | 1382 | var _objectWithoutProperties = __webpack_require__(41)['default']; 1383 | 1384 | var _extends = __webpack_require__(32)['default']; 1385 | 1386 | var _interopRequireDefault = __webpack_require__(1)['default']; 1387 | 1388 | Object.defineProperty(exports, '__esModule', { 1389 | value: true 1390 | }); 1391 | 1392 | var _react = __webpack_require__(38); 1393 | 1394 | var _react2 = _interopRequireDefault(_react); 1395 | 1396 | var _Radio = __webpack_require__(43); 1397 | 1398 | var _Radio2 = _interopRequireDefault(_Radio); 1399 | 1400 | var RadioGroup = (function (_React$Component) { 1401 | _inherits(RadioGroup, _React$Component); 1402 | 1403 | _createClass(RadioGroup, null, [{ 1404 | key: 'propTypes', 1405 | value: { 1406 | /** 1407 | * The name that will be applied to all radio buttons inside it. 1408 | */ 1409 | name: _react2['default'].PropTypes.string.isRequired, 1410 | 1411 | /** 1412 | * Sets the default radio button to be the one whose 1413 | * value matches defaultValue (case-sensitive). 1414 | * This will override any individual radio button with 1415 | * the defaultChecked or checked property stated. 1416 | */ 1417 | defaultValue: _react2['default'].PropTypes.string, 1418 | 1419 | /** 1420 | * The value of the currently selected radio button. 1421 | */ 1422 | value: _react2['default'].PropTypes.string, 1423 | 1424 | /** 1425 | * Callback function that is fired when a radio button has 1426 | * been clicked. Returns the event and the value of the radio 1427 | * button that has been selected. 1428 | */ 1429 | onChange: _react2['default'].PropTypes.func, 1430 | 1431 | /** 1432 | * Should be used to pass `Radio` components. 1433 | */ 1434 | children: _react2['default'].PropTypes.node, 1435 | 1436 | /** 1437 | * The css class name of the root element. 1438 | */ 1439 | className: _react2['default'].PropTypes.string 1440 | }, 1441 | enumerable: true 1442 | }]); 1443 | 1444 | function RadioGroup(props) { 1445 | _classCallCheck(this, RadioGroup); 1446 | 1447 | _get(Object.getPrototypeOf(RadioGroup.prototype), 'constructor', this).call(this, props); 1448 | this.state = { 1449 | numberCheckedRadioButtons: 0, 1450 | value: this.props.value || this.props.defaultValue || '' 1451 | }; 1452 | } 1453 | 1454 | _createClass(RadioGroup, [{ 1455 | key: 'componentWillMount', 1456 | value: function componentWillMount() { 1457 | var _this = this; 1458 | 1459 | var cnt = 0; 1460 | 1461 | _react2['default'].Children.forEach(this.props.children, function (option) { 1462 | if (_this.hasCheckAttribute(option)) cnt++; 1463 | }, this); 1464 | 1465 | this.setState({ numberCheckedRadioButtons: cnt }); 1466 | } 1467 | }, { 1468 | key: 'componentWillReceiveProps', 1469 | value: function componentWillReceiveProps(nextProps) { 1470 | if (nextProps.hasOwnProperty('value')) { 1471 | this.setState({ 1472 | value: nextProps.value 1473 | }); 1474 | } 1475 | } 1476 | }, { 1477 | key: 'getValue', 1478 | value: function getValue() { 1479 | return this.state.value; 1480 | } 1481 | }, { 1482 | key: 'setValue', 1483 | value: function setValue(newValue) { 1484 | this.updateRadioButtons(newValue); 1485 | } 1486 | }, { 1487 | key: 'clearValue', 1488 | value: function clearValue() { 1489 | this.setValue(''); 1490 | } 1491 | }, { 1492 | key: 'hasCheckAttribute', 1493 | value: function hasCheckAttribute(radioButton) { 1494 | return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; 1495 | } 1496 | }, { 1497 | key: 'updateRadioButtons', 1498 | value: function updateRadioButtons(newValue) { 1499 | if (this.state.numberCheckedRadioButtons === 0) { 1500 | this.setState({ value: newValue }); 1501 | } else { 1502 | if (false) { 1503 | var message = 'Cannot select a different radio button while another radio button ' + 'has the \'checked\' property set to true.'; 1504 | console.error(message); // eslint-disable-line 1505 | } 1506 | } 1507 | } 1508 | }, { 1509 | key: 'handleChange', 1510 | value: function handleChange(e /* TODO , newValue */) { 1511 | var newValue = e.target.value; 1512 | 1513 | this.updateRadioButtons(newValue); 1514 | 1515 | // Successful update 1516 | if (this.state.numberCheckedRadioButtons === 0) { 1517 | if (this.props.onChange) { 1518 | this.props.onChange(e, newValue); 1519 | } 1520 | } 1521 | } 1522 | }, { 1523 | key: 'render', 1524 | value: function render() { 1525 | var _this2 = this; 1526 | 1527 | var options = _react2['default'].Children.map(this.props.children, function (option) { 1528 | var _option$props = option.props; 1529 | var name = _option$props.name; 1530 | var value = _option$props.value; 1531 | var label = _option$props.label; 1532 | var onChange = _option$props.onChange; 1533 | 1534 | var other = _objectWithoutProperties(_option$props, ['name', 'value', 'label', 'onChange']); 1535 | 1536 | return _react2['default'].createElement(_Radio2['default'], _extends({}, other, { 1537 | ref: option.props.value, 1538 | name: _this2.props.name, 1539 | key: option.props.value, 1540 | value: option.props.value, 1541 | label: option.props.label, 1542 | onChange: _this2.handleChange.bind(_this2), 1543 | checked: option.props.value === _this2.state.value 1544 | })); 1545 | }, this); 1546 | 1547 | return _react2['default'].createElement( 1548 | 'div', 1549 | { className: this.props.className }, 1550 | options 1551 | ); 1552 | } 1553 | }]); 1554 | 1555 | return RadioGroup; 1556 | })(_react2['default'].Component); 1557 | 1558 | exports['default'] = RadioGroup; 1559 | module.exports = exports['default']; 1560 | 1561 | /***/ } 1562 | /******/ ]) 1563 | }); 1564 | ; 1565 | //# sourceMappingURL=react-icheck.js.map -------------------------------------------------------------------------------- /dist/react-icheck.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap c2f56958e0fe546834ce","webpack:///./src/index.js","webpack:///./~/babel-runtime/helpers/interop-require-default.js","webpack:///./src/Checkbox.js","webpack:///./~/babel-runtime/helpers/get.js","webpack:///./~/babel-runtime/core-js/object/get-own-property-descriptor.js","webpack:///./~/core-js/library/fn/object/get-own-property-descriptor.js","webpack:///./~/core-js/library/modules/$.js","webpack:///./~/core-js/library/modules/es6.object.get-own-property-descriptor.js","webpack:///./~/core-js/library/modules/$.to-iobject.js","webpack:///./~/core-js/library/modules/$.iobject.js","webpack:///./~/core-js/library/modules/$.cof.js","webpack:///./~/core-js/library/modules/$.defined.js","webpack:///./~/core-js/library/modules/$.object-sap.js","webpack:///./~/core-js/library/modules/$.export.js","webpack:///./~/core-js/library/modules/$.global.js","webpack:///./~/core-js/library/modules/$.core.js","webpack:///./~/core-js/library/modules/$.ctx.js","webpack:///./~/core-js/library/modules/$.a-function.js","webpack:///./~/core-js/library/modules/$.fails.js","webpack:///./~/babel-runtime/helpers/inherits.js","webpack:///./~/babel-runtime/core-js/object/create.js","webpack:///./~/core-js/library/fn/object/create.js","webpack:///./~/babel-runtime/core-js/object/set-prototype-of.js","webpack:///./~/core-js/library/fn/object/set-prototype-of.js","webpack:///./~/core-js/library/modules/es6.object.set-prototype-of.js","webpack:///./~/core-js/library/modules/$.set-proto.js","webpack:///./~/core-js/library/modules/$.is-object.js","webpack:///./~/core-js/library/modules/$.an-object.js","webpack:///./~/babel-runtime/helpers/create-class.js","webpack:///./~/babel-runtime/core-js/object/define-property.js","webpack:///./~/core-js/library/fn/object/define-property.js","webpack:///./~/babel-runtime/helpers/class-call-check.js","webpack:///./~/babel-runtime/helpers/extends.js","webpack:///./~/babel-runtime/core-js/object/assign.js","webpack:///./~/core-js/library/fn/object/assign.js","webpack:///./~/core-js/library/modules/es6.object.assign.js","webpack:///./~/core-js/library/modules/$.object-assign.js","webpack:///./~/core-js/library/modules/$.to-object.js","webpack:///external \"react\"","webpack:///./src/EnhancedSwitch.js","webpack:///./~/babel-runtime/helpers/define-property.js","webpack:///./~/babel-runtime/helpers/object-without-properties.js","webpack:///external \"classnames\"","webpack:///./src/Radio.js","webpack:///./src/RadioGroup.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;qCCtCqB,CAAY;;;;kCACf,EAAS;;;;uCACJ,EAAc;;;;sBAEtB;AACb,WAAQ;AACR,QAAK;AACL,aAAU;EACX;;;;;;;ACRD;;AAEA;AACA;AACA;AACA;AACA;;AAEA,2B;;;;;;;;;;;;;;;;;;;;;;;;kCCRkB,EAAO;;;;2CAEE,EAAkB;;;;KAEvC,QAAQ;aAAR,QAAQ;;AAED,YAFP,QAAQ,CAEA,KAAK,EAAE;2BAFf,QAAQ;;AAGV,gCAHE,QAAQ,6CAGJ,KAAK,EAAE;AACb,SAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IACjB;;gBALG,QAAQ;;YAOJ,oBAAG;AACT,cAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;MAC5C;;;YAES,oBAAC,eAAe,EAAE;AAC1B,WAAI,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;MACtD;;;YAEQ,qBAAG;AACV,cAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;MAC7C;;;YAEK,kBAAG;AACP,cACE,yEAAgB,GAAG,EAAC,gBAAgB,IAAK,IAAI,CAAC,KAAK,IAAE,SAAS,EAAC,UAAU,IAAE,CAC3E;MACH;;;UAvBG,QAAQ;IAAS,mBAAM,SAAS;;sBA0BvB,QAAQ;;;;;;;AC9BvB;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA,QAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA,MAAK;AACL;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,2B;;;;;;AC3CA,mBAAkB,uD;;;;;;ACAlB;AACA;AACA;AACA;AACA,G;;;;;;ACJA;AACA;AACA;AACA;AACA,iBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;;;;;;ACZA;AACA;;AAEA;AACA;AACA;AACA;AACA,EAAC,E;;;;;;ACPD;AACA;AACA;AACA;AACA;AACA,G;;;;;;ACLA;AACA;AACA;AACA;AACA,G;;;;;;ACJA,kBAAiB;;AAEjB;AACA;AACA,G;;;;;;ACJA;AACA;AACA;AACA;AACA,G;;;;;;ACJA;AACA;AACA;AACA;AACA;AACA,+BAA8B;AAC9B;AACA;AACA,oDAAmD,OAAO,EAAE;AAC5D,G;;;;;;ACTA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAmE;AACnE,sFAAqF;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL,gEAA+D;AAC/D;AACA;AACA;AACA,eAAc;AACd,eAAc;AACd,eAAc;AACd,eAAc;AACd,gBAAe;AACf,gBAAe;AACf,0B;;;;;;AC7CA;AACA;AACA;AACA,wCAAuC,gC;;;;;;ACHvC,8BAA6B;AAC7B,sCAAqC,gC;;;;;;ACDrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;;;;;;ACnBA;AACA;AACA;AACA,G;;;;;;ACHA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA,G;;;;;;ACNA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;;AAEA,2B;;;;;;ACtBA,mBAAkB,wD;;;;;;ACAlB;AACA;AACA;AACA,G;;;;;;ACHA,mBAAkB,wD;;;;;;ACAlB;AACA,gE;;;;;;ACDA;AACA;AACA,+BAA8B,4CAA6C,E;;;;;;ACF3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAkD;AAClD;AACA;AACA;AACA;AACA;AACA,QAAO,UAAU,cAAc;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA,MAAK,GAAG;AACR;AACA,G;;;;;;ACzBA;AACA;AACA,G;;;;;;ACFA;AACA;AACA;AACA;AACA,G;;;;;;ACJA;;AAEA;;AAEA;AACA;AACA,oBAAmB,kBAAkB;AACrC;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED,2B;;;;;;ACvBA,mBAAkB,wD;;;;;;ACAlB;AACA;AACA;AACA,G;;;;;;ACHA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,2B;;;;;;ACRA;;AAEA;;AAEA;AACA,kBAAiB,sBAAsB;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,2B;;;;;;AClBA,mBAAkB,wD;;;;;;ACAlB;AACA,wD;;;;;;ACDA;AACA;;AAEA,2CAA0C,gCAAqC,E;;;;;;ACH/E;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAkC,UAAU,EAAE;AAC9C,cAAa,gCAAgC;AAC7C,EAAC,oCAAoC;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC,iB;;;;;;AChCD;AACA;AACA;AACA;AACA,G;;;;;;ACJA,iD;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCCAkB,EAAO;;;;wCACF,EAAY;;;;AAEnC,KAAM,OAAO,GAAG,QAAQ,CAAC;AACzB,KAAM,aAAa,GAAG,OAAO,GAAG,SAAS,CAAC;;KAEpC,cAAc;aAAd,cAAc;;gBAAd,cAAc;;YAEC;AACjB,gBAAS,EAAE,mBAAM,SAAS,CAAC,MAAM,CAAC,UAAU;;AAE5C,cAAO,EAAE,mBAAM,SAAS,CAAC,IAAI;AAC7B,qBAAc,EAAE,mBAAM,SAAS,CAAC,IAAI;;AAEpC,YAAK,EAAE,mBAAM,SAAS,CAAC,IAAI;;AAE3B,eAAQ,EAAE,mBAAM,SAAS,CAAC,IAAI;;AAE9B,oBAAa,EAAE,mBAAM,SAAS,CAAC,IAAI;;AAEnC,eAAQ,EAAE,mBAAM,SAAS,CAAC,IAAI;AAC9B,aAAM,EAAE,mBAAM,SAAS,CAAC,IAAI;AAC5B,cAAO,EAAE,mBAAM,SAAS,CAAC,IAAI;;;AAG7B,oBAAa,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGrC,iBAAU,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGlC,mBAAY,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGpC,2BAAoB,EAAE,mBAAM,SAAS,CAAC,MAAM;AAC5C,wBAAiB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGzC,qBAAc,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGtC,6BAAsB,EAAE,mBAAM,SAAS,CAAC,MAAM;AAC9C,0BAAmB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAG3C,oBAAa,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGrC,4BAAqB,EAAE,mBAAM,SAAS,CAAC,MAAM;AAC7C,yBAAkB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAG1C,mBAAY,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGpC,2BAAoB,EAAE,mBAAM,SAAS,CAAC,MAAM;AAC5C,wBAAiB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGzC,yBAAkB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAG1C,iCAA0B,EAAE,mBAAM,SAAS,CAAC,MAAM;AAClD,8BAAuB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAG/C,uBAAgB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGxC,+BAAwB,EAAE,mBAAM,SAAS,CAAC,MAAM;AAChD,4BAAqB,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAG7C,iBAAU,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGlC,iBAAU,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGlC,kBAAW,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGnC,iBAAU,EAAE,mBAAM,SAAS,CAAC,IAAI;;;AAGhC,sBAAe,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGvC,mBAAY,EAAE,mBAAM,SAAS,CAAC,MAAM;;;AAGpC,aAAM,EAAE,mBAAM,SAAS,CAAC,IAAI;;;AAG5B,mBAAY,EAAE,mBAAM,SAAS,CAAC,IAAI;;;AAGlC,gBAAS,EAAE,mBAAM,SAAS,CAAC,IAAI;;;AAG/B,WAAI,EAAE,mBAAM,SAAS,CAAC,IAAI;;;AAG1B,aAAM,EAAE,mBAAM,SAAS,CAAC,IAAI;;AAE5B,eAAQ,EAAE,mBAAM,SAAS,CAAC,IAAI;MAC/B;;;;YAEqB;;AAEpB,oBAAa,EAAE,WAAW;;;AAG1B,iBAAU,EAAE,QAAQ;;;AAGpB,mBAAY,EAAE,SAAS;;;AAGvB,oBAAa,EAAE,UAAU;;;AAGzB,yBAAkB,EAAE,eAAe;;;AAGnC,iBAAU,EAAE,OAAO;;;AAGnB,iBAAU,EAAE,OAAO;;;AAGnB,kBAAW,EAAE,QAAQ;;;AAGrB,iBAAU,EAAE,IAAI;;;AAGhB,sBAAe,EAAE,OAAO;;;AAGxB,mBAAY,EAAE,EAAE;;;AAGhB,aAAM,EAAE,KAAK;;;AAGb,mBAAY,EAAE,KAAK;;;AAGnB,gBAAS,EAAE,KAAK;;;AAGhB,WAAI,EAAE,KAAK;MACZ;;;;AAEU,YArJP,cAAc,CAqJN,KAAK,EAAE;2BArJf,cAAc;;AAsJhB,gCAtJE,cAAc,6CAsJV,KAAK,EAAE;AACb,SAAI,OAAO,GAAG,KAAK,CAAC;AACpB,SAAI,SAAS,IAAI,KAAK,EAAE;AACtB,cAAO,GAAG,KAAK,CAAC,OAAO,CAAC;MACzB,MAAM;AACL,cAAO,GAAG,KAAK,CAAC,cAAc,CAAC;MAChC;;AAED,SAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACrB,SAAI,CAAC,KAAK,GAAG;AACX,cAAO,EAAP,OAAO;AACP,cAAO,EAAE,KAAK;AACd,cAAO,EAAE,KAAK;AACd,aAAM,EAAE,KAAK;MACd,CAAC;IACH;;gBArKG,cAAc;;YAuKD,6BAAG;AAClB,WAAI,OAAO,SAAS,KAAK,WAAW,EAAE;AACpC,aAAI,CAAC,OAAO,GAAG,oEAAoE,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/G;AACD,WAAI,CAAC,WAAW,EAAE,CAAC;AACnB,WAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,WAAI,CAAC,WAAW,EAAE,CAAC;MACpB;;;YAEwB,mCAAC,SAAS,EAAE;AACnC,WAAI,SAAS,IAAI,SAAS,EAAE;AAC1B,aAAI,CAAC,QAAQ,CAAC;AACZ,kBAAO,EAAE,SAAS,CAAC,OAAO;UAC3B,CAAC,CAAC;QACJ;MACF;;;YAEiB,8BAAG;AACnB,WAAI,CAAC,WAAW,EAAE,CAAC;AACnB,WAAI,CAAC,gBAAgB,EAAE,CAAC;MACzB;;;YAEO,oBAAG;AACT,cAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;MACjC;;;YAES,oBAAC,eAAe,EAAE;AAC1B,WAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,KAAK,EAAE;;AAEzE,aAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC;QAC9C,MAAM;AACL,aAAI,KAAqC,EAAE;AACzC,eAAI,OAAO,GAAG,gEAAgE,CAAC;AAC/E,kBAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;UACxB;QACF;MACF;;;YAEe,4BAAG;AACjB,WAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;AAC5B,aAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;QACzC;MACF;;;YAEU,uBAAG;WACJ,cAAc,GAAK,IAAI,CAAC,IAAI,CAA5B,cAAc;;sCACD,MAAM,CAAC,gBAAgB,CAAC,cAAc,CAAC;;WAApD,QAAQ,4BAAR,QAAQ;;AAEhB,WAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,uBAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC5C;MACF;;;YAEQ,qBAAG;AACV,cAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;MACnC;;;YAEW,sBAAC,CAAC,EAAE;AACd,WAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;AACjC,WAAI,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE;AAC9B,aAAI,CAAC,QAAQ,CAAC;AACZ,kBAAO,EAAP,OAAO;UACR,CAAC,CAAC;QACJ;;AAED,WAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACvB,aAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;QACjC;MACF;;;YAES,oBAAC,CAAC,EAAE;AACZ,WAAI,CAAC,QAAQ,CAAC;AACZ,gBAAO,EAAE,KAAK;QACf,CAAC,CAAC;;AAEH,WAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACrB,aAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtB;MACF;;;YAEU,qBAAC,CAAC,EAAE;AACb,WAAI,CAAC,QAAQ,CAAC;AACZ,gBAAO,EAAE,IAAI;QACd,CAAC,CAAC;;AAEH,WAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;AACtB,aAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACvB;MACF;;;YAEgB,2BAAC,KAAK,EAAE;AACvB,WAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AACpB,gBAAO;QACR;;AAED,WAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACvB,gBAAO;QACR;;AAED,WAAI,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;;AAE7C,WAAI,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE;AAC9B,aAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC;AACxC,aAAI,CAAC,QAAQ,CAAC;AACZ,kBAAO,EAAE,UAAU;UACpB,CAAC,CAAC;QACJ;;AAED,YAAK,CAAC,cAAc,EAAE,CAAC;AACvB,YAAK,CAAC,eAAe,EAAE,CAAC;;AAExB,WAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;;AAEvB,cAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AAClC,aAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QACxC;MACF;;;YAEK,kBAAG;;;AACP,WAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;WACjB,QAAQ,GAAK,KAAK,CAAlB,QAAQ;WAEZ,IAAI,GAaA,KAAK,CAbT,IAAI;WACJ,IAAI,GAYA,KAAK,CAZT,IAAI;WACJ,KAAK,GAWD,KAAK,CAXT,KAAK;WACL,KAAK,GAUD,KAAK,CAVT,KAAK;WACL,MAAM,GASF,KAAK,CATT,MAAM;WACN,OAAO,GAQH,KAAK,CART,OAAO;WACP,SAAS,GAOL,KAAK,CAPT,SAAS;WACT,WAAW,GAMP,KAAK,CANT,WAAW;WACX,YAAY,GAKR,KAAK,CALT,YAAY;WACZ,YAAY,GAIR,KAAK,CAJT,YAAY;WACZ,UAAU,GAGN,KAAK,CAHT,UAAU;WACV,SAAS,GAEL,KAAK,CAFT,SAAS;;WACN,KAAK,4BACJ,KAAK;;WAEL,OAAO,GAAK,IAAI,CAAC,KAAK,CAAtB,OAAO;;;AAGb,WAAI,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;;;AAG1D,WAAI,IAAI,GAAG,CAAC,EAAE,EAAE;AACd,aAAI,GAAG,CAAC,EAAE,CAAC;QACZ;;AAED,WAAI,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC;;;AAGlB,WAAI,MAAM,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC;AACzB,WAAI,IAAI,GAAG,GAAG,GAAI,IAAI,GAAG,CAAE,GAAG,GAAG,CAAC;AAClC,WAAI,KAAK,GAAG;AACV,iBAAQ,EAAE,UAAU;AACpB,YAAG,EAAE,MAAM;AACX,aAAI,EAAE,MAAM;AACZ,gBAAO,EAAE,OAAO;AAChB,cAAK,EAAE,IAAI;AACX,eAAM,EAAE,IAAI;AACZ,eAAM,EAAE,CAAC;AACT,gBAAO,EAAE,CAAC;AACV,mBAAU,EAAE,MAAM;AAClB,eAAM,EAAE,CAAC;AACT,gBAAO,EAAE,CAAC;AACV,eAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS;QACzC,CAAC;;;AAGF,WAAI,IAAI,aAAC;AACT,WAAI,IAAI,CAAC,OAAO,EAAE;AAChB,aAAI,GAAG;AACL,mBAAQ,EAAE,UAAU;AACpB,qBAAU,EAAE,QAAQ;UACrB,CAAC;QACH,MAAM,IAAI,IAAI,EAAE;AACf,aAAI,GAAG,KAAK,CAAC;QACd,MAAM;AACL,aAAI,GAAG;AACL,mBAAQ,EAAE,UAAU;AACpB,kBAAO,EAAE,CAAC;UACX,CAAC;QACH;;;AAGD,WAAI,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;;;;;AAKxB,WAAI,MAAM,aAAC;AACX,WAAI,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;AAClD,WAAI,KAAK,CAAC,SAAS,KAAK,UAAU,IAAI,OAAO,KAAK,CAAC,0BAA0B,KAAK,WAAW,EAAE;AAC7F,2BAAkB,GAAG,KAAK,CAAC,0BAA0B,CAAC;QACvD,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,OAAO,IAAI,OAAO,KAAK,CAAC,uBAAuB,KAAK,WAAW,EAAE;AAC9F,2BAAkB,GAAG,KAAK,CAAC,uBAAuB,CAAC;QACpD;;AAED,WAAM,SAAS,GAAG;AAChB,kBAAS,EAAE,6EACR,KAAK,CAAC,aAAa,EAAG,KAAK,CAAC,SAAS,KAAK,UAAU,gCACpD,KAAK,CAAC,UAAU,EAAG,KAAK,CAAC,SAAS,KAAK,OAAO,gCAC9C,kBAAkB,EAAG,KAAK,CAAC,aAAa,gCACxC,KAAK,CAAC,YAAY,EAAG,OAAO,gCAC5B,KAAK,CAAC,aAAa,EAAG,QAAQ,gCAC9B,KAAK,CAAC,UAAU,EAAG,IAAI,CAAC,KAAK,CAAC,OAAO,gCACrC,KAAK,CAAC,UAAU,EAAG,IAAI,CAAC,KAAK,CAAC,OAAO,gCACrC,KAAK,CAAC,WAAW,EAAG,IAAI,CAAC,KAAK,CAAC,MAAM,gBACtC;QACH,CAAC;;AAEF,WAAI,IAAI,EAAE;AACR,kBAAS,CAAC,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;;AAEjC,kBAAS,CAAC,iBAAiB,CAAC,GAAG,EAAE,CAAC;QACnC;;AAED,WAAI,KAAK,CAAC,YAAY,EAAE;AACtB,kBAAS,CAAC,SAAS,GAAG,6BAAW,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACxE;;AAED,WAAI,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE;AACzB,kBAAS,CAAC,EAAE,GAAG,OAAO,GAAG,GAAG,GAAG,EAAE,CAAC;QACnC;;AAED,WAAM,WAAW,GAAG;AAClB,kBAAS,EAAE,aAAa;AACxB,cAAK,EAAE,KAAK;AACZ,gBAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3C,CAAC;;;AAGF,aAAM,GAAG,wCAAS,WAAW,CAAG,CAAC;;AAEjC,WAAM,UAAU,GAAG;AACjB,YAAG,EAAE,UAAU;AACf,aAAI,EAAE,KAAK,CAAC,SAAS;AACrB,cAAK,EAAE,IAAI;AACX,aAAI,EAAJ,IAAI;AACJ,cAAK,EAAL,KAAK;AACL,uBAAc,EAAE,KAAK,CAAC,cAAc;AACpC,iBAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AACtC,eAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;AAClC,gBAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,CAAC;;AAEF,WAAM,YAAY,GAChB,0CACM,UAAU,CAEjB,CAAC;;AAEF,WAAI,aAAa,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,CAAC;AAC9C,WAAI,aAAa,IAAI,CAAC,mBAAM,cAAc,CAAC,aAAa,CAAC,EAAE;AACzD,sBAAa,GAAG,0CAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAG,GAAO,CAAC;QACjF;;AAED,WAAM,cAAc,GAClB;;oBAAK,GAAG,EAAC,gBAAgB,IAAK,SAAS;SACpC,YAAY;SACZ,aAAa;SACb,MAAM;QAEV,CAAC;;AAEF,WAAI,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC;AAC/B,WAAI,CAAC,YAAY,EAAE;AACjB,gBAAO,cAAc,CAAC;QACvB;AACD,WAAI,CAAC,mBAAM,cAAc,CAAC,YAAY,CAAC,EAAE;AACvC,qBAAY,GAAG,2CAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAG,GAAE,CAAC;QAC3E;;;AAGD,gBAAS,gBAAgB,CAAC,KAAK,EAAE;;AAE/B,aAAI,QAAQ,EAAE;AACZ,kBAAO;UACR;;AAED,aAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;;;AAGzB,aAAI,KAAK,KAAK,OAAO,EAAE;;;;;;UAMtB,MAAM,IAAI,KAAK,CAAC,UAAU,EAAE;;AAE3B,iBAAI,CAAC,QAAQ,CAAC;AACZ,sBAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;cAC9B,CAAC,CAAC;YACJ;;AAED,aAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAK,CAAC,eAAe,EAAE,CAAC;UACzB;;QAEF;;AAED,WAAM,UAAU,GAAG;;AAEjB,oBAAW,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AACxC,mBAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AACvC,qBAAY,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AACzC,mBAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;QACxC,CAAC;;AAEF,cACE;;SAAW,UAAU;SAClB,cAAc;SACd,YAAY;QACP,CACR;MACH;;;UAleG,cAAc;IAAS,mBAAM,SAAS;;sBAqe7B,cAAc;;;;;;;AC3e7B;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL,IAAG;AACH;AACA;;AAEA;AACA;;AAEA,2B;;;;;;ACnBA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,2B;;;;;;ACdA,iD;;;;;;;;;;;;;;;;;;;;;;;;kCCAkB,EAAO;;;;2CAEE,EAAkB;;;;KAEvC,KAAK;aAAL,KAAK;;YAAL,KAAK;2BAAL,KAAK;;gCAAL,KAAK;;;gBAAL,KAAK;;YAED,oBAAG;AACT,cAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;MAC5C;;;YAES,oBAAC,eAAe,EAAE;AAC1B,WAAI,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;MACvD;;;YAEQ,qBAAG;AACV,cAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;MAC9C;;;YAEK,kBAAG;AACP,WAAI,mBAAmB,GAAG;AACxB,YAAG,EAAE,gBAAgB;AACrB,kBAAS,EAAE,OAAO;QAEnB,CAAC;;;AAEF,cACE,2EAAoB,IAAI,CAAC,KAAK,EAAM,mBAAmB,EAAG,CAC1D;MACH;;;UAxBG,KAAK;IAAS,mBAAM,SAAS;;sBA2BpB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;kCC/BF,EAAO;;;;kCACD,EAAS;;;;KAE3B,UAAU;aAAV,UAAU;;gBAAV,UAAU;;YAEK;;;;AAIjB,WAAI,EAAE,mBAAM,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;;;;AAQvC,mBAAY,EAAE,mBAAM,SAAS,CAAC,MAAM;;;;;AAKpC,YAAK,EAAE,mBAAM,SAAS,CAAC,MAAM;;;;;;;AAO7B,eAAQ,EAAE,mBAAM,SAAS,CAAC,IAAI;;;;;AAK9B,eAAQ,EAAE,mBAAM,SAAS,CAAC,IAAI;;;;;AAK9B,gBAAS,EAAE,mBAAM,SAAS,CAAC,MAAM;MAClC;;;;AAEU,YAvCP,UAAU,CAuCF,KAAK,EAAE;2BAvCf,UAAU;;AAwCZ,gCAxCE,UAAU,6CAwCN,KAAK,EAAE;AACb,SAAI,CAAC,KAAK,GAAG;AACX,gCAAyB,EAAE,CAAC;AAC5B,YAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE;MACzD,CAAC;IACH;;gBA7CG,UAAU;;YA+CI,8BAAG;;;AACnB,WAAI,GAAG,GAAG,CAAC,CAAC;;AAEZ,0BAAM,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAC,MAAM,EAAK;AACtD,aAAI,MAAK,iBAAiB,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;QAC3C,EAAE,IAAI,CAAC,CAAC;;AAET,WAAI,CAAC,QAAQ,CAAC,EAAE,yBAAyB,EAAE,GAAG,EAAE,CAAC,CAAC;MACnD;;;YAEwB,mCAAC,SAAS,EAAE;AACnC,WAAI,SAAS,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;AACrC,aAAI,CAAC,QAAQ,CAAC;AACZ,gBAAK,EAAE,SAAS,CAAC,KAAK;UACvB,CAAC,CAAC;QACJ;MACF;;;YAEO,oBAAG;AACT,cAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MACzB;;;YAEO,kBAAC,QAAQ,EAAE;AACjB,WAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;MACnC;;;YAES,sBAAG;AACX,WAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;MACnB;;;YAEgB,2BAAC,WAAW,EAAE;AAC7B,cAAO,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;MACjF;;;YAEiB,4BAAC,QAAQ,EAAE;AAC3B,WAAI,IAAI,CAAC,KAAK,CAAC,yBAAyB,KAAK,CAAC,EAAE;AAC9C,aAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QACpC,MAAM;AACL,aAAI,KAAqC,EAAE;AACzC,eAAI,OAAO,GAAG,oEAAoE,GAChF,2CAA2C,CAAC;AAC9C,kBAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;UACxB;QACF;MACF;;;YAEW,sBAAC,CAAC,wBAAwB;AACpC,WAAI,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;AAE9B,WAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;;;AAGlC,WAAI,IAAI,CAAC,KAAK,CAAC,yBAAyB,KAAK,CAAC,EAAE;AAC9C,aAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACvB,eAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;UAClC;QACF;MACF;;;YAEK,kBAAG;;;AACP,WAAI,OAAO,GAAG,mBAAM,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAC,MAAM,EAAK;6BAO5D,MAAM,CAAC,KAAK;aALd,IAAI,iBAAJ,IAAI;aACJ,KAAK,iBAAL,KAAK;aACL,KAAK,iBAAL,KAAK;aACL,QAAQ,iBAAR,QAAQ;;aACL,KAAK;;AAGV,gBACE,kEACM,KAAK;AACT,cAAG,EAAE,MAAM,CAAC,KAAK,CAAC,KAAM;AACxB,eAAI,EAAE,OAAK,KAAK,CAAC,IAAK;AACtB,cAAG,EAAE,MAAM,CAAC,KAAK,CAAC,KAAM;AACxB,gBAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAM;AAC1B,gBAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAM;AAC1B,mBAAQ,EAAE,OAAK,YAAY,CAAC,IAAI,QAAO;AACvC,kBAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,OAAK,KAAK,CAAC,KAAM;YACjD,CACF;QACH,EAAE,IAAI,CAAC,CAAC;;AAET,cACE;;WAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAU;SAClC,OAAO;QACJ,CACN;MACH;;;UAvIG,UAAU;IAAS,mBAAM,SAAS;;sBA0IzB,UAAU","file":"react-icheck.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"), require(\"classnames\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\", \"classnames\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactIcheck\"] = factory(require(\"react\"), require(\"classnames\"));\n\telse\n\t\troot[\"ReactIcheck\"] = factory(root[\"react\"], root[\"classnames\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_38__, __WEBPACK_EXTERNAL_MODULE_42__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap c2f56958e0fe546834ce\n **/","import Checkbox from './Checkbox';\nimport Radio from './Radio';\nimport RadioGroup from './RadioGroup';\n\nexport default {\n Checkbox,\n Radio,\n RadioGroup,\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","\"use strict\";\n\nexports[\"default\"] = function (obj) {\n return obj && obj.__esModule ? obj : {\n \"default\": obj\n };\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/interop-require-default.js\n ** module id = 1\n ** module chunks = 0\n **/","import React from 'react';\n\nimport EnhancedSwitch from './EnhancedSwitch';\n\nclass Checkbox extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {};\n }\n\n getValue() {\n return this.refs.enhancedSwitch.getValue();\n }\n\n setChecked(newCheckedValue) {\n this.refs.enhancedSwitch.setChecked(newCheckedValue);\n }\n\n isChecked() {\n return this.refs.enhancedSwitch.isChecked();\n }\n\n render() {\n return (\n \n );\n }\n}\n\nexport default Checkbox;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/Checkbox.js\n **/","\"use strict\";\n\nvar _Object$getOwnPropertyDescriptor = require(\"babel-runtime/core-js/object/get-own-property-descriptor\")[\"default\"];\n\nexports[\"default\"] = function get(_x, _x2, _x3) {\n var _again = true;\n\n _function: while (_again) {\n var object = _x,\n property = _x2,\n receiver = _x3;\n _again = false;\n if (object === null) object = Function.prototype;\n\n var desc = _Object$getOwnPropertyDescriptor(object, property);\n\n if (desc === undefined) {\n var parent = Object.getPrototypeOf(object);\n\n if (parent === null) {\n return undefined;\n } else {\n _x = parent;\n _x2 = property;\n _x3 = receiver;\n _again = true;\n desc = parent = undefined;\n continue _function;\n }\n } else if (\"value\" in desc) {\n return desc.value;\n } else {\n var getter = desc.get;\n\n if (getter === undefined) {\n return undefined;\n }\n\n return getter.call(receiver);\n }\n }\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/get.js\n ** module id = 3\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/get-own-property-descriptor\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/get-own-property-descriptor.js\n ** module id = 4\n ** module chunks = 0\n **/","var $ = require('../../modules/$');\nrequire('../../modules/es6.object.get-own-property-descriptor');\nmodule.exports = function getOwnPropertyDescriptor(it, key){\n return $.getDesc(it, key);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/get-own-property-descriptor.js\n ** module id = 5\n ** module chunks = 0\n **/","var $Object = Object;\nmodule.exports = {\n create: $Object.create,\n getProto: $Object.getPrototypeOf,\n isEnum: {}.propertyIsEnumerable,\n getDesc: $Object.getOwnPropertyDescriptor,\n setDesc: $Object.defineProperty,\n setDescs: $Object.defineProperties,\n getKeys: $Object.keys,\n getNames: $Object.getOwnPropertyNames,\n getSymbols: $Object.getOwnPropertySymbols,\n each: [].forEach\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.js\n ** module id = 6\n ** module chunks = 0\n **/","// 19.1.2.6 Object.getOwnPropertyDescriptor(O, P)\nvar toIObject = require('./$.to-iobject');\n\nrequire('./$.object-sap')('getOwnPropertyDescriptor', function($getOwnPropertyDescriptor){\n return function getOwnPropertyDescriptor(it, key){\n return $getOwnPropertyDescriptor(toIObject(it), key);\n };\n});\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/es6.object.get-own-property-descriptor.js\n ** module id = 7\n ** module chunks = 0\n **/","// to indexed object, toObject with fallback for non-array-like ES3 strings\nvar IObject = require('./$.iobject')\n , defined = require('./$.defined');\nmodule.exports = function(it){\n return IObject(defined(it));\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.to-iobject.js\n ** module id = 8\n ** module chunks = 0\n **/","// fallback for non-array-like ES3 and non-enumerable old V8 strings\nvar cof = require('./$.cof');\nmodule.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){\n return cof(it) == 'String' ? it.split('') : Object(it);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.iobject.js\n ** module id = 9\n ** module chunks = 0\n **/","var toString = {}.toString;\n\nmodule.exports = function(it){\n return toString.call(it).slice(8, -1);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.cof.js\n ** module id = 10\n ** module chunks = 0\n **/","// 7.2.1 RequireObjectCoercible(argument)\nmodule.exports = function(it){\n if(it == undefined)throw TypeError(\"Can't call method on \" + it);\n return it;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.defined.js\n ** module id = 11\n ** module chunks = 0\n **/","// most Object methods by ES6 should accept primitives\nvar $export = require('./$.export')\n , core = require('./$.core')\n , fails = require('./$.fails');\nmodule.exports = function(KEY, exec){\n var fn = (core.Object || {})[KEY] || Object[KEY]\n , exp = {};\n exp[KEY] = exec(fn);\n $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.object-sap.js\n ** module id = 12\n ** module chunks = 0\n **/","var global = require('./$.global')\n , core = require('./$.core')\n , ctx = require('./$.ctx')\n , PROTOTYPE = 'prototype';\n\nvar $export = function(type, name, source){\n var IS_FORCED = type & $export.F\n , IS_GLOBAL = type & $export.G\n , IS_STATIC = type & $export.S\n , IS_PROTO = type & $export.P\n , IS_BIND = type & $export.B\n , IS_WRAP = type & $export.W\n , exports = IS_GLOBAL ? core : core[name] || (core[name] = {})\n , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE]\n , key, own, out;\n if(IS_GLOBAL)source = name;\n for(key in source){\n // contains in native\n own = !IS_FORCED && target && key in target;\n if(own && key in exports)continue;\n // export native or passed\n out = own ? target[key] : source[key];\n // prevent global pollution for namespaces\n exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]\n // bind timers to global for call from export context\n : IS_BIND && own ? ctx(out, global)\n // wrap global constructors for prevent change them in library\n : IS_WRAP && target[key] == out ? (function(C){\n var F = function(param){\n return this instanceof C ? new C(param) : C(param);\n };\n F[PROTOTYPE] = C[PROTOTYPE];\n return F;\n // make static versions for prototype methods\n })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;\n if(IS_PROTO)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out;\n }\n};\n// type bitmap\n$export.F = 1; // forced\n$export.G = 2; // global\n$export.S = 4; // static\n$export.P = 8; // proto\n$export.B = 16; // bind\n$export.W = 32; // wrap\nmodule.exports = $export;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.export.js\n ** module id = 13\n ** module chunks = 0\n **/","// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\nvar global = module.exports = typeof window != 'undefined' && window.Math == Math\n ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();\nif(typeof __g == 'number')__g = global; // eslint-disable-line no-undef\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.global.js\n ** module id = 14\n ** module chunks = 0\n **/","var core = module.exports = {version: '1.2.6'};\nif(typeof __e == 'number')__e = core; // eslint-disable-line no-undef\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.core.js\n ** module id = 15\n ** module chunks = 0\n **/","// optional / simple context binding\nvar aFunction = require('./$.a-function');\nmodule.exports = function(fn, that, length){\n aFunction(fn);\n if(that === undefined)return fn;\n switch(length){\n case 1: return function(a){\n return fn.call(that, a);\n };\n case 2: return function(a, b){\n return fn.call(that, a, b);\n };\n case 3: return function(a, b, c){\n return fn.call(that, a, b, c);\n };\n }\n return function(/* ...args */){\n return fn.apply(that, arguments);\n };\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.ctx.js\n ** module id = 16\n ** module chunks = 0\n **/","module.exports = function(it){\n if(typeof it != 'function')throw TypeError(it + ' is not a function!');\n return it;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.a-function.js\n ** module id = 17\n ** module chunks = 0\n **/","module.exports = function(exec){\n try {\n return !!exec();\n } catch(e){\n return true;\n }\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.fails.js\n ** module id = 18\n ** module chunks = 0\n **/","\"use strict\";\n\nvar _Object$create = require(\"babel-runtime/core-js/object/create\")[\"default\"];\n\nvar _Object$setPrototypeOf = require(\"babel-runtime/core-js/object/set-prototype-of\")[\"default\"];\n\nexports[\"default\"] = function (subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n }\n\n subClass.prototype = _Object$create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) _Object$setPrototypeOf ? _Object$setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/inherits.js\n ** module id = 19\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/create\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/create.js\n ** module id = 20\n ** module chunks = 0\n **/","var $ = require('../../modules/$');\nmodule.exports = function create(P, D){\n return $.create(P, D);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/create.js\n ** module id = 21\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/set-prototype-of\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/set-prototype-of.js\n ** module id = 22\n ** module chunks = 0\n **/","require('../../modules/es6.object.set-prototype-of');\nmodule.exports = require('../../modules/$.core').Object.setPrototypeOf;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/set-prototype-of.js\n ** module id = 23\n ** module chunks = 0\n **/","// 19.1.3.19 Object.setPrototypeOf(O, proto)\nvar $export = require('./$.export');\n$export($export.S, 'Object', {setPrototypeOf: require('./$.set-proto').set});\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/es6.object.set-prototype-of.js\n ** module id = 24\n ** module chunks = 0\n **/","// Works with __proto__ only. Old v8 can't work with null proto objects.\n/* eslint-disable no-proto */\nvar getDesc = require('./$').getDesc\n , isObject = require('./$.is-object')\n , anObject = require('./$.an-object');\nvar check = function(O, proto){\n anObject(O);\n if(!isObject(proto) && proto !== null)throw TypeError(proto + \": can't set as prototype!\");\n};\nmodule.exports = {\n set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line\n function(test, buggy, set){\n try {\n set = require('./$.ctx')(Function.call, getDesc(Object.prototype, '__proto__').set, 2);\n set(test, []);\n buggy = !(test instanceof Array);\n } catch(e){ buggy = true; }\n return function setPrototypeOf(O, proto){\n check(O, proto);\n if(buggy)O.__proto__ = proto;\n else set(O, proto);\n return O;\n };\n }({}, false) : undefined),\n check: check\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.set-proto.js\n ** module id = 25\n ** module chunks = 0\n **/","module.exports = function(it){\n return typeof it === 'object' ? it !== null : typeof it === 'function';\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.is-object.js\n ** module id = 26\n ** module chunks = 0\n **/","var isObject = require('./$.is-object');\nmodule.exports = function(it){\n if(!isObject(it))throw TypeError(it + ' is not an object!');\n return it;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.an-object.js\n ** module id = 27\n ** module chunks = 0\n **/","\"use strict\";\n\nvar _Object$defineProperty = require(\"babel-runtime/core-js/object/define-property\")[\"default\"];\n\nexports[\"default\"] = (function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n\n _Object$defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n})();\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/create-class.js\n ** module id = 28\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/define-property\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/define-property.js\n ** module id = 29\n ** module chunks = 0\n **/","var $ = require('../../modules/$');\nmodule.exports = function defineProperty(it, key, desc){\n return $.setDesc(it, key, desc);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/define-property.js\n ** module id = 30\n ** module chunks = 0\n **/","\"use strict\";\n\nexports[\"default\"] = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/class-call-check.js\n ** module id = 31\n ** module chunks = 0\n **/","\"use strict\";\n\nvar _Object$assign = require(\"babel-runtime/core-js/object/assign\")[\"default\"];\n\nexports[\"default\"] = _Object$assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/extends.js\n ** module id = 32\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/assign\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/assign.js\n ** module id = 33\n ** module chunks = 0\n **/","require('../../modules/es6.object.assign');\nmodule.exports = require('../../modules/$.core').Object.assign;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/assign.js\n ** module id = 34\n ** module chunks = 0\n **/","// 19.1.3.1 Object.assign(target, source)\nvar $export = require('./$.export');\n\n$export($export.S + $export.F, 'Object', {assign: require('./$.object-assign')});\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/es6.object.assign.js\n ** module id = 35\n ** module chunks = 0\n **/","// 19.1.2.1 Object.assign(target, source, ...)\nvar $ = require('./$')\n , toObject = require('./$.to-object')\n , IObject = require('./$.iobject');\n\n// should work with symbols and should have deterministic property order (V8 bug)\nmodule.exports = require('./$.fails')(function(){\n var a = Object.assign\n , A = {}\n , B = {}\n , S = Symbol()\n , K = 'abcdefghijklmnopqrst';\n A[S] = 7;\n K.split('').forEach(function(k){ B[k] = k; });\n return a({}, A)[S] != 7 || Object.keys(a({}, B)).join('') != K;\n}) ? function assign(target, source){ // eslint-disable-line no-unused-vars\n var T = toObject(target)\n , $$ = arguments\n , $$len = $$.length\n , index = 1\n , getKeys = $.getKeys\n , getSymbols = $.getSymbols\n , isEnum = $.isEnum;\n while($$len > index){\n var S = IObject($$[index++])\n , keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S)\n , length = keys.length\n , j = 0\n , key;\n while(length > j)if(isEnum.call(S, key = keys[j++]))T[key] = S[key];\n }\n return T;\n} : Object.assign;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.object-assign.js\n ** module id = 36\n ** module chunks = 0\n **/","// 7.1.13 ToObject(argument)\nvar defined = require('./$.defined');\nmodule.exports = function(it){\n return Object(defined(it));\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.to-object.js\n ** module id = 37\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_38__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"react\"\n ** module id = 38\n ** module chunks = 0\n **/","import React from 'react';\nimport classnames from 'classnames';\n\nconst _iCheck = 'iCheck';\nconst _iCheckHelper = _iCheck + '-helper';\n\nclass EnhancedSwitch extends React.Component {\n\n static propTypes = {\n inputType: React.PropTypes.string.isRequired,\n\n checked: React.PropTypes.bool,\n defaultChecked: React.PropTypes.bool,\n\n label: React.PropTypes.node,\n\n disabled: React.PropTypes.bool,\n\n indeterminate: React.PropTypes.bool,\n\n onChange: React.PropTypes.func,\n onBlur: React.PropTypes.func,\n onFocus: React.PropTypes.func,\n\n // base class added to customized checkboxes\n checkboxClass: React.PropTypes.string,\n\n // base class added to customized radio buttons\n radioClass: React.PropTypes.string,\n\n // class added on checked state (input.checked = true)\n checkedClass: React.PropTypes.string,\n\n // if not empty, used instead of 'checkedClass' option (input type specific)\n checkedCheckboxClass: React.PropTypes.string,\n checkedRadioClass: React.PropTypes.string,\n\n // if not empty, added as class name on unchecked state (input.checked = false)\n uncheckedClass: React.PropTypes.string,\n\n // if not empty, used instead of 'uncheckedClass' option (input type specific)\n uncheckedCheckboxClass: React.PropTypes.string,\n uncheckedRadioClass: React.PropTypes.string,\n\n // class added on disabled state (input.disabled = true)\n disabledClass: React.PropTypes.string,\n\n // if not empty, used instead of 'disabledClass' option (input type specific)\n disabledCheckboxClass: React.PropTypes.string,\n disabledRadioClass: React.PropTypes.string,\n\n // if not empty, added as class name on enabled state (input.disabled = false)\n enabledClass: React.PropTypes.string,\n\n // if not empty, used instead of 'enabledClass' option (input type specific)\n enabledCheckboxClass: React.PropTypes.string,\n enabledRadioClass: React.PropTypes.string,\n\n // class added on indeterminate state (input.indeterminate = true)\n indeterminateClass: React.PropTypes.string,\n\n // if not empty, used instead of 'indeterminateClass' option (input type specific)\n indeterminateCheckboxClass: React.PropTypes.string,\n indeterminateRadioClass: React.PropTypes.string,\n\n // if not empty, added as class name on determinate state (input.indeterminate = false)\n determinateClass: React.PropTypes.string,\n\n // if not empty, used instead of 'determinateClass' option (input type specific)\n determinateCheckboxClass: React.PropTypes.string,\n determinateRadioClass: React.PropTypes.string,\n\n // class added on hover state (pointer is moved onto input)\n hoverClass: React.PropTypes.string,\n\n // class added on focus state (input has gained focus)\n focusClass: React.PropTypes.string,\n\n // class added on active state (mouse button is pressed on input)\n activeClass: React.PropTypes.string,\n\n // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover\n labelHover: React.PropTypes.bool,\n\n // class added to label if labelHover set to true\n labelHoverClass: React.PropTypes.string,\n\n // increase clickable area by given % (negative number to decrease)\n increaseArea: React.PropTypes.string,\n\n // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled\n cursor: React.PropTypes.bool,\n\n // set true to inherit original input's class name\n inheritClass: React.PropTypes.bool,\n\n // if set to true, input's id is prefixed with 'iCheck-' and attached\n inheritID: React.PropTypes.bool,\n\n // set true to activate ARIA support\n aria: React.PropTypes.bool,\n\n // add HTML code or text inside customized input\n insert: React.PropTypes.node,\n\n children: React.PropTypes.node,\n };\n\n static defaultProps = {\n\n checkboxClass: 'icheckbox',\n\n // base class added to customized radio buttons\n radioClass: 'iradio',\n\n // class added on checked state (input.checked = true)\n checkedClass: 'checked',\n\n // class added on disabled state (input.disabled = true)\n disabledClass: 'disabled',\n\n // class added on indeterminate state (input.indeterminate = true)\n indeterminateClass: 'indeterminate',\n\n // class added on hover state (pointer is moved onto input)\n hoverClass: 'hover',\n\n // class added on focus state (input has gained focus)\n focusClass: 'focus',\n\n // class added on active state (mouse button is pressed on input)\n activeClass: 'active',\n\n // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover\n labelHover: true,\n\n // class added to label if labelHover set to true\n labelHoverClass: 'hover',\n\n // increase clickable area by given % (negative number to decrease)\n increaseArea: '',\n\n // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled\n cursor: false,\n\n // set true to inherit original input's class name\n inheritClass: false,\n\n // if set to true, input's id is prefixed with 'iCheck-' and attached\n inheritID: false,\n\n // set true to activate ARIA support\n aria: false,\n };\n\n constructor(props) {\n super(props);\n let checked = false;\n if ('checked' in props) {\n checked = props.checked;\n } else {\n checked = props.defaultChecked;\n }\n // Assume we aren't on a mobile for server-side-rendering\n this._mobile = false;\n this.state = {\n checked,\n focused: false,\n hovered: false,\n active: false,\n };\n }\n\n componentDidMount() {\n if (typeof navigator !== 'undefined') {\n this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);\n }\n this.adjustStyle();\n this.setIndeterminate();\n this.forceUpdate();\n }\n\n componentWillReceiveProps(nextProps) {\n if ('checked' in nextProps) {\n this.setState({\n checked: nextProps.checked,\n });\n }\n }\n\n componentDidUpdate() {\n this.adjustStyle();\n this.setIndeterminate();\n }\n\n getValue() {\n return this.refs.checkbox.value;\n }\n\n setChecked(newCheckedValue) {\n if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {\n // TODO: this.props.onParentShouldUpdate(newSwitchedValue);\n this.refs.checkbox.checked = newCheckedValue;\n } else {\n if (process.env.NODE_ENV !== 'production') {\n let message = 'Cannot call set method while checked is defined as a property.';\n console.error(message); // eslint-disable-line\n }\n }\n }\n\n setIndeterminate() {\n if (this.props.indeterminate) {\n this.refs.checkbox.indeterminate = true;\n }\n }\n\n adjustStyle() {\n const { inputContainer } = this.refs;\n const { position } = window.getComputedStyle(inputContainer);\n\n if (position === 'static') {\n inputContainer.style.position = 'relative';\n }\n }\n\n isChecked() {\n return this.refs.checkbox.checked;\n }\n\n handleChange(e) {\n const checked = e.target.checked;\n if (!('checked' in this.props)) {\n this.setState({\n checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(e, checked);\n }\n }\n\n handleBlur(e) {\n this.setState({\n focused: false,\n });\n\n if (this.props.onBlur) {\n this.props.onBlur(e);\n }\n }\n\n handleFocus(e) {\n this.setState({\n focused: true,\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n\n handleHelperClick(event) {\n if (this.props.label) {\n return;\n }\n\n if (this.props.disabled) {\n return;\n }\n\n let newChecked = !this.refs.checkbox.checked;\n\n if (!('checked' in this.props)) {\n this.refs.checkbox.checked = newChecked;\n this.setState({\n checked: newChecked,\n });\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (this.props.onChange) {\n // make sure element is not target\n event.target = this.refs.checkbox;\n this.props.onChange(event, newChecked);\n }\n }\n\n render() {\n let props = this.props;\n let { disabled } = props;\n let {\n type,\n name,\n value,\n label,\n onBlur,\n onFocus,\n onMouseUp,\n onMouseDown,\n onMouseLeave,\n onTouchStart,\n onTouchEnd,\n className,\n ...other,\n } = props;\n\n let { checked } = this.state;\n\n // Setup clickable area\n let area = ('' + props.increaseArea).replace('%', '') | 0;\n\n // Clickable area limit\n if (area < -50) {\n area = -50;\n }\n\n let id = props.id;\n\n // Layer styles\n let offset = -area + '%';\n let size = 100 + (area * 2) + '%';\n let layer = {\n position: 'absolute',\n top: offset,\n left: offset,\n display: 'block',\n width: size,\n height: size,\n margin: 0,\n padding: 0,\n background: '#fff',\n border: 0,\n opacity: 0,\n cursor: disabled ? 'default' : 'pointer',\n };\n\n // Choose how to hide input\n let hide;\n if (this._mobile) {\n hide = {\n position: 'absolute',\n visibility: 'hidden',\n };\n } else if (area) {\n hide = layer;\n } else {\n hide = {\n position: 'absolute',\n opacity: 0,\n };\n }\n\n // Check ARIA option\n let aria = !!props.aria;\n\n // TODO: Set ARIA placeholder\n // let ariaID = _iCheck + '-' + Math.random().toString(36).substr(2, 6);\n\n let helper;\n let indeterminateClass = props.indeterminateClass;\n if (props.inputType === 'checkbox' && typeof props.indeterminateCheckboxClass !== 'undefined') {\n indeterminateClass = props.indeterminateCheckboxClass;\n } else if (props.inputType === 'radio' && typeof props.indeterminateRadioClass !== 'undefined') {\n indeterminateClass = props.indeterminateRadioClass;\n }\n\n const wrapProps = {\n className: classnames({\n [props.checkboxClass]: props.inputType === 'checkbox',\n [props.radioClass]: props.inputType === 'radio',\n [indeterminateClass]: props.indeterminate,\n [props.checkedClass]: checked,\n [props.disabledClass]: disabled,\n [props.hoverClass]: this.state.hovered,\n [props.focusClass]: this.state.focused,\n [props.activeClass]: this.state.active,\n }),\n };\n\n if (aria) {\n wrapProps.role = props.inputType;\n // Set ARIA \"labelledby\"\n wrapProps['aria-labelledby'] = '';\n }\n\n if (props.inheritClass) {\n wrapProps.className = classnames(wrapProps.className, props.className);\n }\n\n if (props.inheritID && id) {\n wrapProps.id = _iCheck + '-' + id;\n }\n\n const helperProps = {\n className: _iCheckHelper,\n style: layer,\n onClick: this.handleHelperClick.bind(this),\n };\n\n // Layer addition\n helper = ;\n\n const inputProps = {\n ref: 'checkbox',\n type: props.inputType,\n style: hide,\n name,\n value,\n defaultChecked: props.defaultChecked,\n onChange: this.handleChange.bind(this),\n onBlur: this.handleBlur.bind(this),\n onFocus: this.handleFocus.bind(this),\n };\n\n const inputElement = (\n \n );\n\n let insertElement = props.insert || undefined;\n if (insertElement && !React.isValidElement(insertElement)) {\n insertElement =
;\n }\n\n const inputContainer = (\n
\n {inputElement}\n {insertElement}\n {helper}\n
\n );\n\n let labelElement = props.label;\n if (!labelElement) {\n return inputContainer;\n }\n if (!React.isValidElement(labelElement)) {\n labelElement = ;\n }\n\n // Label events\n function handleLabelEvent(event) {\n // Do nothing if input is disabled\n if (disabled) {\n return;\n }\n\n const etype = event.type;\n\n // Click\n if (etype === 'click') {\n // FIXME\n // if ($(event.target).is('a')) {\n // return;\n // }\n // Hover state\n } else if (props.labelHover) {\n // mouseout|touchend false\n this.setState({\n hovered: !/ut|nd/.test(etype),\n });\n }\n\n if (this._mobile) {\n event.stopPropagation();\n }\n // return false;\n }\n\n const labelProps = {\n // onClick: handleLabelEvent.bind(this),\n onMouseOver: handleLabelEvent.bind(this),\n onMouseOut: handleLabelEvent.bind(this),\n onTouchStart: handleLabelEvent.bind(this),\n onTouchEnd: handleLabelEvent.bind(this),\n };\n\n return (\n \n );\n }\n}\n\nexport default EnhancedSwitch;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/EnhancedSwitch.js\n **/","\"use strict\";\n\nvar _Object$defineProperty = require(\"babel-runtime/core-js/object/define-property\")[\"default\"];\n\nexports[\"default\"] = function (obj, key, value) {\n if (key in obj) {\n _Object$defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/define-property.js\n ** module id = 40\n ** module chunks = 0\n **/","\"use strict\";\n\nexports[\"default\"] = function (obj, keys) {\n var target = {};\n\n for (var i in obj) {\n if (keys.indexOf(i) >= 0) continue;\n if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n target[i] = obj[i];\n }\n\n return target;\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/object-without-properties.js\n ** module id = 41\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_42__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"classnames\"\n ** module id = 42\n ** module chunks = 0\n **/","import React from 'react';\n\nimport EnhancedSwitch from './EnhancedSwitch';\n\nclass Radio extends React.Component {\n\n getValue() {\n return this.refs.enhancedSwitch.getValue();\n }\n\n setChecked(newCheckedValue) {\n this.refs.enhancedSwitch.setSwitched(newCheckedValue);\n }\n\n isChecked() {\n return this.refs.enhancedSwitch.isSwitched();\n }\n\n render() {\n let enhancedSwitchProps = {\n ref: 'enhancedSwitch',\n inputType: 'radio',\n // labelClassName\n };\n\n return (\n \n );\n }\n}\n\nexport default Radio;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/Radio.js\n **/","import React from 'react';\nimport RadioButton from './Radio';\n\nclass RadioGroup extends React.Component {\n\n static propTypes = {\n /**\n * The name that will be applied to all radio buttons inside it.\n */\n name: React.PropTypes.string.isRequired,\n\n /**\n * Sets the default radio button to be the one whose\n * value matches defaultValue (case-sensitive).\n * This will override any individual radio button with\n * the defaultChecked or checked property stated.\n */\n defaultValue: React.PropTypes.string,\n\n /**\n * The value of the currently selected radio button.\n */\n value: React.PropTypes.string,\n\n /**\n * Callback function that is fired when a radio button has\n * been clicked. Returns the event and the value of the radio\n * button that has been selected.\n */\n onChange: React.PropTypes.func,\n\n /**\n * Should be used to pass `Radio` components.\n */\n children: React.PropTypes.node,\n\n /**\n * The css class name of the root element.\n */\n className: React.PropTypes.string,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n numberCheckedRadioButtons: 0,\n value: this.props.value || this.props.defaultValue || '',\n };\n }\n\n componentWillMount() {\n let cnt = 0;\n\n React.Children.forEach(this.props.children, (option) => {\n if (this.hasCheckAttribute(option)) cnt++;\n }, this);\n\n this.setState({ numberCheckedRadioButtons: cnt });\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.hasOwnProperty('value')) {\n this.setState({\n value: nextProps.value,\n });\n }\n }\n\n getValue() {\n return this.state.value;\n }\n\n setValue(newValue) {\n this.updateRadioButtons(newValue);\n }\n\n clearValue() {\n this.setValue('');\n }\n\n hasCheckAttribute(radioButton) {\n return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked;\n }\n\n updateRadioButtons(newValue) {\n if (this.state.numberCheckedRadioButtons === 0) {\n this.setState({ value: newValue });\n } else {\n if (process.env.NODE_ENV !== 'production') {\n let message = 'Cannot select a different radio button while another radio button ' +\n 'has the \\'checked\\' property set to true.';\n console.error(message); // eslint-disable-line\n }\n }\n }\n\n handleChange(e /* TODO , newValue */) {\n let newValue = e.target.value;\n\n this.updateRadioButtons(newValue);\n\n // Successful update\n if (this.state.numberCheckedRadioButtons === 0) {\n if (this.props.onChange) {\n this.props.onChange(e, newValue);\n }\n }\n }\n\n render() {\n let options = React.Children.map(this.props.children, (option) => {\n let {\n name,\n value,\n label,\n onChange,\n ...other,\n } = option.props;\n\n return (\n \n );\n }, this);\n\n return (\n
\n {options}\n
\n );\n }\n}\n\nexport default RadioGroup;\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/RadioGroup.js\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /esdoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": "src", 3 | "destination": "./examples/dist/api", 4 | "plugins": [ 5 | { 6 | "name": "esdoc-es7-plugin" 7 | } 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /examples/dist/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luqin/react-icheck/4b5a3a5b04f5c0ea986d622bb74ac3c7987e3db1/examples/dist/.gitkeep -------------------------------------------------------------------------------- /examples/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React-iCheck 7 | 8 | 9 | 10 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/src/js/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import { hashHistory, IndexRoute, Router, Route } from 'react-router'; 5 | 6 | import App from './components/App'; 7 | import GettingStarted from 'react-router!./components/GettingStarted'; 8 | import PageNotFound from 'react-router!./components/PageNotFound'; 9 | import Basic from 'react-router!./components/examples/Basic'; 10 | 11 | const routes = ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | ReactDOM.render(routes, document.querySelector('#app')); 23 | -------------------------------------------------------------------------------- /examples/src/js/components/App.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.css'; 2 | import 'icheck/skins/all.css'; 3 | 4 | import React from 'react'; 5 | import { 6 | Navbar, 7 | Nav, 8 | NavItem, 9 | Grid, 10 | Row, 11 | Col, 12 | } from 'react-bootstrap'; 13 | import { LinkContainer } from 'react-router-bootstrap'; 14 | 15 | class App extends React.Component { 16 | 17 | static propTypes = { 18 | children: React.PropTypes.node, 19 | }; 20 | 21 | render() { 22 | return ( 23 |
24 | 25 | 26 | 27 | React-iCheck 28 | 29 | 30 | 37 | 38 | 39 | 40 | 41 | {this.props.children} 42 | 43 | 44 | 45 |
46 | ); 47 | } 48 | } 49 | 50 | export default App; 51 | -------------------------------------------------------------------------------- /examples/src/js/components/GettingStarted.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class GettingStarted extends React.Component { 4 | render() { 5 | return ( 6 |
7 |

Getting started

8 | npm i react-icheck --save 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default GettingStarted; 15 | -------------------------------------------------------------------------------- /examples/src/js/components/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return ( 6 |
7 |

React-icheck

8 |

icheck components built with React

9 |
10 | ); 11 | } 12 | } 13 | 14 | export default Home; 15 | -------------------------------------------------------------------------------- /examples/src/js/components/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class PageNotFound extends React.Component { 4 | render() { 5 | return ( 6 |
Page Not Found
7 | ); 8 | } 9 | } 10 | 11 | export default PageNotFound; 12 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/Basic.js: -------------------------------------------------------------------------------- 1 | import './style.scss'; 2 | 3 | import React from 'react'; 4 | import { PageHeader } from 'react-bootstrap'; 5 | import Demo from './Demo'; 6 | import SkinDemo from './SkinDemo'; 7 | import LineSkin from './LineSkin'; 8 | import PolarisSkin from './PolarisSkin'; 9 | import FuturicoSkin from './FuturicoSkin'; 10 | 11 | class Basic extends React.Component { 12 | 13 | static propTypes = {}; 14 | 15 | static defaultProps = {}; 16 | 17 | constructor(props) { 18 | super(props); 19 | this.state = {}; 20 | } 21 | 22 | componentDidMount() { 23 | } 24 | 25 | render() { 26 | return ( 27 |
28 | Examples 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 | ); 40 | } 41 | } 42 | 43 | export default Basic; 44 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/ColorSchemes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class ColorSchemes extends React.Component { 4 | 5 | static propTypes = { 6 | color: React.PropTypes.string, 7 | onChange: React.PropTypes.func, 8 | }; 9 | 10 | static defaultProps = { 11 | color: '', 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | color: props.color, 18 | }; 19 | } 20 | 21 | componentWillReceiveProps(nextProps) { 22 | this.setState({ color: nextProps.color }); 23 | } 24 | 25 | handleColor(color) { 26 | this.setState({ color }); 27 | if (this.props.onChange) { 28 | this.props.onChange(color); 29 | } 30 | } 31 | 32 | render() { 33 | const colors = 'Black Red Green Blue Aero Grey Orange Yellow Pink Purple'.split(' '); 34 | 35 | const lis = colors.map(color => { 36 | let newColor = color.toLowerCase(); 37 | if (newColor === 'black') { 38 | newColor = ''; 39 | } 40 | return ( 41 |
  • 47 | ); 48 | }); 49 | 50 | return ( 51 |
    52 | Color schemes 53 |
      54 | {lis} 55 |
    56 |
    57 | ); 58 | } 59 | } 60 | 61 | export default ColorSchemes; 62 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/Demo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Panel, Row, Col } from 'react-bootstrap'; 3 | import { Checkbox, Radio, RadioGroup } from 'react-icheck'; 4 | 5 | class Demo extends React.Component { 6 | 7 | static propTypes = {}; 8 | 9 | static defaultProps = {}; 10 | 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | i1checked: false, 15 | i3checked: false, 16 | i2disabled: false, 17 | i4disabled: false, 18 | radioValue: '3', 19 | }; 20 | 21 | this.handle1 = this.handle1.bind(this); 22 | this.handle2 = this.handle2.bind(this); 23 | this.handle3 = this.handle3.bind(this); 24 | this.handle4 = this.handle4.bind(this); 25 | this.handle1Change = this.handle1Change.bind(this); 26 | this.handle3Change = this.handle3Change.bind(this); 27 | this.handleRadioChange = this.handleRadioChange.bind(this); 28 | } 29 | 30 | componentDidMount() { 31 | } 32 | 33 | handle1() { 34 | this.setState({ 35 | i1checked: true, 36 | i3checked: true, 37 | radioValue: '3', 38 | }); 39 | } 40 | 41 | handle2() { 42 | this.setState({ 43 | i1checked: false, 44 | i3checked: false, 45 | radioValue: this.state.radioValue === '3' ? null : this.state.radioValue, 46 | }); 47 | } 48 | 49 | handle3() { 50 | this.setState({ 51 | i2disabled: true, 52 | i4disabled: true, 53 | }); 54 | } 55 | 56 | handle4() { 57 | this.setState({ 58 | i2disabled: false, 59 | i4disabled: false, 60 | }); 61 | } 62 | 63 | handle1Change(e, checked) { 64 | this.setState({ 65 | i1checked: checked, 66 | }); 67 | } 68 | 69 | handle3Change(e, checked) { 70 | this.setState({ 71 | i3checked: checked, 72 | }); 73 | } 74 | 75 | handleRadioChange(event, value) { 76 | this.setState({ 77 | radioValue: value, 78 | }); 79 | } 80 | 81 | render() { 82 | return ( 83 |
    84 |

    DEMO

    85 | 86 | 87 | 88 | 95 |
    96 | 103 |
    104 | 110 | 111 | 112 | 113 | 119 | 126 | 133 | 134 | 135 |     136 | 137 |
    138 |
    139 | Add checked state to 1 and 3 inputs 140 |
    141 |
    142 | Remove checked state from 1 and 3 inputs 143 |
    144 |
    145 | Add disabled state to 2 and 4 inputs 146 |
    147 |
    148 | Remove disabled state from 2 and 4 inputs 149 |
    150 |
    151 |     152 |
    153 | ); 154 | } 155 | } 156 | 157 | export default Demo; 158 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/FuturicoSkin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Panel, Row, Col } from 'react-bootstrap'; 3 | import { Checkbox, Radio } from 'react-icheck'; 4 | 5 | class FuturicoSkin extends React.Component { 6 | 7 | static propTypes = { 8 | color: React.PropTypes.string, 9 | }; 10 | 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | skin: 'futurico', 15 | color: props.color, 16 | }; 17 | } 18 | 19 | getCheckboxClass() { 20 | const { skin, color } = this.state; 21 | if (color) { 22 | return `icheckbox_${skin}-${color}`; 23 | } 24 | return `icheckbox_${skin}`; 25 | } 26 | 27 | getRadioClass() { 28 | const { skin, color } = this.state; 29 | if (color) { 30 | return `iradio_${skin}-${color}`; 31 | } 32 | return `iradio_${skin}`; 33 | } 34 | 35 | render() { 36 | return ( 37 |
    38 |

    Futurico skin

    39 | 40 | 41 | 42 | 47 |
    48 | 54 |
    55 | 61 |
    62 | 69 | 70 | 71 | 76 |
    77 | 83 |
    84 | 90 |
    91 | 98 | 99 |     100 |     101 | 102 |
    103 | ); 104 | } 105 | } 106 | 107 | export default FuturicoSkin; 108 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/LineSkin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Panel, Row, Col } from 'react-bootstrap'; 3 | import { Checkbox, Radio } from 'react-icheck'; 4 | import ColorSchemes from './ColorSchemes'; 5 | 6 | class LineSkin extends React.Component { 7 | 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | skin: 'line', 12 | color: 'blue', 13 | }; 14 | } 15 | 16 | componentWillReceiveProps(nextProps) { 17 | this.setState({ 18 | color: nextProps.color, 19 | }); 20 | } 21 | 22 | getCheckboxClass() { 23 | const { skin, color } = this.state; 24 | if (color) { 25 | return `icheckbox_${skin}-${color}`; 26 | } 27 | return `icheckbox_${skin}`; 28 | } 29 | 30 | getRadioClass() { 31 | const { skin, color } = this.state; 32 | if (color) { 33 | return `iradio_${skin}-${color}`; 34 | } 35 | return `iradio_${skin}`; 36 | } 37 | 38 | handleColor(color) { 39 | this.setState({ color }); 40 | } 41 | 42 | render() { 43 | return ( 44 |
    45 |

    Line skin

    46 | 47 | 48 | 49 |
    Checkbox'} 52 | /> 53 |
    54 |
    Checkbox, defaultChecked} 57 | defaultChecked 58 | /> 59 |
    60 | Checkbox, disabled'} 63 | disabled 64 | /> 65 |
    66 | Checkbox, defaultChecked disabled'} 69 | defaultChecked 70 | disabled 71 | /> 72 | 73 | 74 | 75 | Radio'} 78 | /> 79 |
    80 |
    Radio, defaultChecked
    } 83 | defaultChecked 84 | /> 85 |
    86 | Radio, disabled'} 89 | disabled 90 | /> 91 |
    92 | Radio, defaultChecked disabled'} 95 | defaultChecked 96 | disabled 97 | /> 98 | 99 | 100 | 101 | 102 | 103 | 104 | ); 105 | } 106 | } 107 | 108 | export default LineSkin; 109 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/PolarisSkin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Panel, Row, Col } from 'react-bootstrap'; 3 | import { Checkbox, Radio } from 'react-icheck'; 4 | 5 | class PolarisSkin extends React.Component { 6 | 7 | static propTypes = { 8 | color: React.PropTypes.string, 9 | }; 10 | 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | skin: 'polaris', 15 | color: props.color, 16 | }; 17 | } 18 | 19 | getCheckboxClass() { 20 | const { skin, color } = this.state; 21 | if (color) { 22 | return `icheckbox_${skin}-${color}`; 23 | } 24 | return `icheckbox_${skin}`; 25 | } 26 | 27 | getRadioClass() { 28 | const { skin, color } = this.state; 29 | if (color) { 30 | return `iradio_${skin}-${color}`; 31 | } 32 | return `iradio_${skin}`; 33 | } 34 | 35 | render() { 36 | return ( 37 |
    38 |

    Polaris skin

    39 | 40 | 41 | 42 | 47 |
    48 | 54 |
    55 | 61 |
    62 | 69 | 70 | 71 | 76 |
    77 | 83 |
    84 | 90 |
    91 | 98 | 99 |     100 |     101 | 102 |
    103 | ); 104 | } 105 | } 106 | 107 | export default PolarisSkin; 108 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/SkinDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Panel, Row, Col } from 'react-bootstrap'; 3 | import { Checkbox, Radio } from 'react-icheck'; 4 | import ColorSchemes from './ColorSchemes'; 5 | 6 | class SkinDemo extends React.Component { 7 | 8 | static propTypes = { 9 | color: React.PropTypes.string, 10 | skin: React.PropTypes.string, 11 | title: React.PropTypes.string, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | skin: props.skin, 18 | color: props.color, 19 | }; 20 | } 21 | 22 | componentWillReceiveProps(nextProps) { 23 | this.setState({ 24 | skin: nextProps.skin, 25 | color: nextProps.color, 26 | }); 27 | } 28 | 29 | getCheckboxClass() { 30 | const { skin, color } = this.state; 31 | if (color) { 32 | return `icheckbox_${skin}-${color}`; 33 | } 34 | return `icheckbox_${skin}`; 35 | } 36 | 37 | getRadioClass() { 38 | const { skin, color } = this.state; 39 | if (color) { 40 | return `iradio_${skin}-${color}`; 41 | } 42 | return `iradio_${skin}`; 43 | } 44 | 45 | handleColor(color) { 46 | this.setState({ color }); 47 | } 48 | 49 | render() { 50 | return ( 51 |
    52 |

    {this.props.title}

    53 | 54 | 55 | 56 | 61 |
    62 | 68 |
    69 | 75 |
    76 | 83 | 84 | 85 | 90 |
    91 | 97 |
    98 | 104 |
    105 | 112 | 113 |     114 | 115 |     116 | 117 |
    118 | ); 119 | } 120 | } 121 | 122 | export default SkinDemo; 123 | -------------------------------------------------------------------------------- /examples/src/js/components/examples/style.scss: -------------------------------------------------------------------------------- 1 | .icheckbox_minimal, .icheckbox_minimal-red, .icheckbox_minimal-green, .icheckbox_minimal-blue, .icheckbox_minimal-aero, .icheckbox_minimal-grey, .icheckbox_minimal-orange, .icheckbox_minimal-yellow, .icheckbox_minimal-pink, .icheckbox_minimal-purple, .iradio_minimal, .iradio_minimal-red, .iradio_minimal-green, .iradio_minimal-blue, .iradio_minimal-aero, .iradio_minimal-grey, .iradio_minimal-orange, .iradio_minimal-yellow, .iradio_minimal-pink, .iradio_minimal-purple { 2 | + span { 3 | padding-left: 18px; 4 | } 5 | } 6 | 7 | .icheckbox_square, .icheckbox_square-red, .icheckbox_square-green, .icheckbox_square-blue, .icheckbox_square-aero, .icheckbox_square-grey, .icheckbox_square-orange, .icheckbox_square-yellow, .icheckbox_square-pink, .icheckbox_square-purple, .iradio_square, .iradio_square-red, .iradio_square-green, .iradio_square-blue, .iradio_square-aero, .iradio_square-grey, .iradio_square-orange, .iradio_square-yellow, .iradio_square-pink, .iradio_square-purple { 8 | + span { 9 | padding-left: 18px; 10 | } 11 | } 12 | 13 | .icheckbox_flat, .icheckbox_flat-red, .icheckbox_flat-green, .icheckbox_flat-blue, .icheckbox_flat-aero, .icheckbox_flat-grey, .icheckbox_flat-orange, .icheckbox_flat-yellow, .icheckbox_flat-pink, .icheckbox_flat-purple, .iradio_flat, .iradio_flat-red, .iradio_flat-green, .iradio_flat-blue, .iradio_flat-aero, .iradio_flat-grey, .iradio_flat-orange, .iradio_flat-yellow, .iradio_flat-pink, .iradio_flat-purple { 14 | + span { 15 | padding-left: 18px; 16 | } 17 | } 18 | 19 | .icheckbox_polaris, .iradio_polaris { 20 | + span { 21 | padding-left: 18px; 22 | } 23 | } 24 | 25 | .icheckbox_futurico, .iradio_futurico { 26 | + span { 27 | padding-left: 18px; 28 | } 29 | } 30 | 31 | .skin.skin-polaris { 32 | .panel { 33 | color: #7a828b; 34 | background: #2c323c; 35 | } 36 | } 37 | 38 | .skin.skin-futurico panel { 39 | color: #888; 40 | background: #2e3035; 41 | } 42 | 43 | .demo { 44 | .label1 { 45 | color:#bbb; 46 | padding-right: 15px; 47 | } 48 | } 49 | 50 | .demo-methods { 51 | padding: 21px 0px 0 0; 52 | } 53 | 54 | .demo-methods .mark { 55 | background: #d3cfc6 56 | } 57 | 58 | .demo-methods dt { 59 | position: relative; 60 | padding: 17px 0px 18px 0; 61 | font: 16px/24px 'MontserratRegular', Helvetica, Arial, sans-serif; 62 | color: #444; 63 | border-bottom: 1px solid #ddd8ce; 64 | } 65 | 66 | .demo-methods dt .self { 67 | cursor: pointer; 68 | } 69 | 70 | .demo-methods dt .self:hover { 71 | color: #222 72 | } 73 | 74 | .demo-methods dt .code { 75 | position: absolute; 76 | right: 0; 77 | bottom: 18px; 78 | color: #777; 79 | } 80 | 81 | .demo-methods dt .code .self:hover { 82 | color: #444 83 | } 84 | 85 | .demo-methods dd { 86 | position: relative; 87 | display: none; 88 | margin: 0; 89 | background: #fff; 90 | border: 1px solid #ddd8ce; 91 | border-top: none; 92 | } 93 | 94 | .demo-methods dd:before { 95 | content: ''; 96 | position: absolute; 97 | top: -13px; 98 | left: 0; 99 | width: 0; 100 | height: 0; 101 | border: 1px solid transparent; 102 | border-bottom-color: #ddd8ce; 103 | border-left-color: #ddd8ce 104 | } 105 | 106 | .demo-methods dd .markup { 107 | margin: 0; 108 | color: #888; 109 | background: #f5f3ef; 110 | border: none; 111 | } 112 | 113 | .demo-methods dd .markup .comment { 114 | color: #aaa 115 | } 116 | 117 | .colors { 118 | strong { 119 | float: left; 120 | line-height: 20px; 121 | margin-right: 20px 122 | } 123 | 124 | li { 125 | list-style: none; 126 | } 127 | } 128 | 129 | .colors { 130 | clear: both; 131 | padding: 24px 0 9px; 132 | } 133 | 134 | .colors li { 135 | position: relative; 136 | float: left; 137 | width: 16px; 138 | height: 16px; 139 | margin: 2px 1px 0 0; 140 | background: #000; 141 | cursor: pointer; 142 | filter: alpha(opacity=50); 143 | opacity: .5; 144 | -webkit-transition: opacity .2s; 145 | -moz-transition: opacity .2s; 146 | -ms-transition: opacity .2s; 147 | -o-transition: opacity .2s; 148 | transition: opacity .2s; 149 | } 150 | 151 | .colors li:hover { 152 | filter: alpha(opacity=100); 153 | opacity: 1 154 | } 155 | 156 | .colors li.active { 157 | height: 20px; 158 | margin-top: 0; 159 | filter: alpha(opacity=75); 160 | opacity: .75 161 | } 162 | 163 | .colors li.red { 164 | background: #d54e21 165 | } 166 | 167 | .colors li.green { 168 | background: #78a300 169 | } 170 | 171 | .colors li.blue { 172 | background: #0e76a8 173 | } 174 | 175 | .colors li.aero { 176 | background: #9cc2cb 177 | } 178 | 179 | .colors li.grey { 180 | background: #73716e 181 | } 182 | 183 | .colors li.orange { 184 | background: #f70 185 | } 186 | 187 | .colors li.yellow { 188 | background: #fc0 189 | } 190 | 191 | .colors li.pink { 192 | background: #ff66b5 193 | } 194 | 195 | .colors li.purple { 196 | background: #6a5a8c 197 | } 198 | -------------------------------------------------------------------------------- /examples/src/scss/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luqin/react-icheck/4b5a3a5b04f5c0ea986d622bb74ac3c7987e3db1/examples/src/scss/index.scss -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var initGulpTasks = require('react-component-tools'); 3 | var taskConfig = require('./config'); 4 | 5 | initGulpTasks(gulp, taskConfig); 6 | -------------------------------------------------------------------------------- /lib/Checkbox.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _get = require('babel-runtime/helpers/get')['default']; 4 | 5 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 6 | 7 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 8 | 9 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 10 | 11 | var _extends = require('babel-runtime/helpers/extends')['default']; 12 | 13 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 14 | 15 | Object.defineProperty(exports, '__esModule', { 16 | value: true 17 | }); 18 | 19 | var _react = require('react'); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | var _EnhancedSwitch = require('./EnhancedSwitch'); 24 | 25 | var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); 26 | 27 | var Checkbox = (function (_React$Component) { 28 | _inherits(Checkbox, _React$Component); 29 | 30 | function Checkbox(props) { 31 | _classCallCheck(this, Checkbox); 32 | 33 | _get(Object.getPrototypeOf(Checkbox.prototype), 'constructor', this).call(this, props); 34 | this.state = {}; 35 | } 36 | 37 | _createClass(Checkbox, [{ 38 | key: 'getValue', 39 | value: function getValue() { 40 | return this.refs.enhancedSwitch.getValue(); 41 | } 42 | }, { 43 | key: 'setChecked', 44 | value: function setChecked(newCheckedValue) { 45 | this.refs.enhancedSwitch.setChecked(newCheckedValue); 46 | } 47 | }, { 48 | key: 'isChecked', 49 | value: function isChecked() { 50 | return this.refs.enhancedSwitch.isChecked(); 51 | } 52 | }, { 53 | key: 'render', 54 | value: function render() { 55 | return _react2['default'].createElement(_EnhancedSwitch2['default'], _extends({ ref: 'enhancedSwitch' }, this.props, { inputType: 'checkbox' })); 56 | } 57 | }]); 58 | 59 | return Checkbox; 60 | })(_react2['default'].Component); 61 | 62 | exports['default'] = Checkbox; 63 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/CheckboxGroup.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /lib/EnhancedSwitch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _get = require('babel-runtime/helpers/get')['default']; 4 | 5 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 6 | 7 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 8 | 9 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 10 | 11 | var _defineProperty = require('babel-runtime/helpers/define-property')['default']; 12 | 13 | var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default']; 14 | 15 | var _extends = require('babel-runtime/helpers/extends')['default']; 16 | 17 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 18 | 19 | Object.defineProperty(exports, '__esModule', { 20 | value: true 21 | }); 22 | 23 | var _react = require('react'); 24 | 25 | var _react2 = _interopRequireDefault(_react); 26 | 27 | var _propTypes = require('prop-types'); 28 | 29 | var _propTypes2 = _interopRequireDefault(_propTypes); 30 | 31 | var _classnames2 = require('classnames'); 32 | 33 | var _classnames3 = _interopRequireDefault(_classnames2); 34 | 35 | var _iCheck = 'iCheck'; 36 | var _iCheckHelper = _iCheck + '-helper'; 37 | 38 | var EnhancedSwitch = (function (_React$Component) { 39 | _inherits(EnhancedSwitch, _React$Component); 40 | 41 | _createClass(EnhancedSwitch, null, [{ 42 | key: 'propTypes', 43 | value: { 44 | inputType: _propTypes2['default'].string.isRequired, 45 | 46 | checked: _propTypes2['default'].bool, 47 | defaultChecked: _propTypes2['default'].bool, 48 | 49 | label: _propTypes2['default'].node, 50 | 51 | disabled: _propTypes2['default'].bool, 52 | 53 | indeterminate: _propTypes2['default'].bool, 54 | 55 | onChange: _propTypes2['default'].func, 56 | onBlur: _propTypes2['default'].func, 57 | onFocus: _propTypes2['default'].func, 58 | 59 | // base class added to customized checkboxes 60 | checkboxClass: _propTypes2['default'].string, 61 | 62 | // base class added to customized radio buttons 63 | radioClass: _propTypes2['default'].string, 64 | 65 | // class added on checked state (input.checked = true) 66 | checkedClass: _propTypes2['default'].string, 67 | 68 | // if not empty, used instead of 'checkedClass' option (input type specific) 69 | checkedCheckboxClass: _propTypes2['default'].string, 70 | checkedRadioClass: _propTypes2['default'].string, 71 | 72 | // if not empty, added as class name on unchecked state (input.checked = false) 73 | uncheckedClass: _propTypes2['default'].string, 74 | 75 | // if not empty, used instead of 'uncheckedClass' option (input type specific) 76 | uncheckedCheckboxClass: _propTypes2['default'].string, 77 | uncheckedRadioClass: _propTypes2['default'].string, 78 | 79 | // class added on disabled state (input.disabled = true) 80 | disabledClass: _propTypes2['default'].string, 81 | 82 | // if not empty, used instead of 'disabledClass' option (input type specific) 83 | disabledCheckboxClass: _propTypes2['default'].string, 84 | disabledRadioClass: _propTypes2['default'].string, 85 | 86 | // if not empty, added as class name on enabled state (input.disabled = false) 87 | enabledClass: _propTypes2['default'].string, 88 | 89 | // if not empty, used instead of 'enabledClass' option (input type specific) 90 | enabledCheckboxClass: _propTypes2['default'].string, 91 | enabledRadioClass: _propTypes2['default'].string, 92 | 93 | // class added on indeterminate state (input.indeterminate = true) 94 | indeterminateClass: _propTypes2['default'].string, 95 | 96 | // if not empty, used instead of 'indeterminateClass' option (input type specific) 97 | indeterminateCheckboxClass: _propTypes2['default'].string, 98 | indeterminateRadioClass: _propTypes2['default'].string, 99 | 100 | // if not empty, added as class name on determinate state (input.indeterminate = false) 101 | determinateClass: _propTypes2['default'].string, 102 | 103 | // if not empty, used instead of 'determinateClass' option (input type specific) 104 | determinateCheckboxClass: _propTypes2['default'].string, 105 | determinateRadioClass: _propTypes2['default'].string, 106 | 107 | // class added on hover state (pointer is moved onto input) 108 | hoverClass: _propTypes2['default'].string, 109 | 110 | // class added on focus state (input has gained focus) 111 | focusClass: _propTypes2['default'].string, 112 | 113 | // class added on active state (mouse button is pressed on input) 114 | activeClass: _propTypes2['default'].string, 115 | 116 | // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover 117 | labelHover: _propTypes2['default'].bool, 118 | 119 | // class added to label if labelHover set to true 120 | labelHoverClass: _propTypes2['default'].string, 121 | 122 | // increase clickable area by given % (negative number to decrease) 123 | increaseArea: _propTypes2['default'].string, 124 | 125 | // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled 126 | cursor: _propTypes2['default'].bool, 127 | 128 | // set true to inherit original input's class name 129 | inheritClass: _propTypes2['default'].bool, 130 | 131 | // if set to true, input's id is prefixed with 'iCheck-' and attached 132 | inheritID: _propTypes2['default'].bool, 133 | 134 | // set true to activate ARIA support 135 | aria: _propTypes2['default'].bool, 136 | 137 | // add HTML code or text inside customized input 138 | insert: _propTypes2['default'].node, 139 | 140 | children: _propTypes2['default'].node, 141 | 142 | // class added for outer label 143 | labelClassName: _propTypes2['default'].string 144 | }, 145 | enumerable: true 146 | }, { 147 | key: 'defaultProps', 148 | value: { 149 | 150 | checkboxClass: 'icheckbox', 151 | 152 | // base class added to customized radio buttons 153 | radioClass: 'iradio', 154 | 155 | // class added on checked state (input.checked = true) 156 | checkedClass: 'checked', 157 | 158 | // class added on disabled state (input.disabled = true) 159 | disabledClass: 'disabled', 160 | 161 | // class added on indeterminate state (input.indeterminate = true) 162 | indeterminateClass: 'indeterminate', 163 | 164 | // class added on hover state (pointer is moved onto input) 165 | hoverClass: 'hover', 166 | 167 | // class added on focus state (input has gained focus) 168 | focusClass: 'focus', 169 | 170 | // class added on active state (mouse button is pressed on input) 171 | activeClass: 'active', 172 | 173 | // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover 174 | labelHover: true, 175 | 176 | // class added to label if labelHover set to true 177 | labelHoverClass: 'hover', 178 | 179 | // increase clickable area by given % (negative number to decrease) 180 | increaseArea: '', 181 | 182 | // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled 183 | cursor: false, 184 | 185 | // set true to inherit original input's class name 186 | inheritClass: false, 187 | 188 | // if set to true, input's id is prefixed with 'iCheck-' and attached 189 | inheritID: false, 190 | 191 | // set true to activate ARIA support 192 | aria: false 193 | }, 194 | enumerable: true 195 | }]); 196 | 197 | function EnhancedSwitch(props) { 198 | _classCallCheck(this, EnhancedSwitch); 199 | 200 | _get(Object.getPrototypeOf(EnhancedSwitch.prototype), 'constructor', this).call(this, props); 201 | var checked = false; 202 | if ('checked' in props) { 203 | checked = props.checked; 204 | } else { 205 | checked = props.defaultChecked; 206 | } 207 | // Assume we aren't on a mobile for server-side-rendering 208 | this._mobile = false; 209 | this.state = { 210 | checked: checked, 211 | focused: false, 212 | hovered: false, 213 | active: false 214 | }; 215 | } 216 | 217 | _createClass(EnhancedSwitch, [{ 218 | key: 'componentDidMount', 219 | value: function componentDidMount() { 220 | if (typeof navigator !== 'undefined') { 221 | this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent); 222 | } 223 | this.adjustStyle(); 224 | this.setIndeterminate(); 225 | this.forceUpdate(); 226 | } 227 | }, { 228 | key: 'componentWillReceiveProps', 229 | value: function componentWillReceiveProps(nextProps) { 230 | if ('checked' in nextProps) { 231 | this.setState({ 232 | checked: nextProps.checked 233 | }); 234 | } 235 | } 236 | }, { 237 | key: 'componentDidUpdate', 238 | value: function componentDidUpdate() { 239 | this.adjustStyle(); 240 | this.setIndeterminate(); 241 | } 242 | }, { 243 | key: 'getValue', 244 | value: function getValue() { 245 | return this.refs.checkbox.value; 246 | } 247 | }, { 248 | key: 'setChecked', 249 | value: function setChecked(newCheckedValue) { 250 | if (!this.props.hasOwnProperty('checked') || this.props.checked === false) { 251 | // TODO: this.props.onParentShouldUpdate(newSwitchedValue); 252 | this.refs.checkbox.checked = newCheckedValue; 253 | } else { 254 | if (process.env.NODE_ENV !== 'production') { 255 | var message = 'Cannot call set method while checked is defined as a property.'; 256 | console.error(message); // eslint-disable-line 257 | } 258 | } 259 | } 260 | }, { 261 | key: 'setIndeterminate', 262 | value: function setIndeterminate() { 263 | if (this.props.indeterminate) { 264 | this.refs.checkbox.indeterminate = true; 265 | } 266 | } 267 | }, { 268 | key: 'adjustStyle', 269 | value: function adjustStyle() { 270 | var inputContainer = this.refs.inputContainer; 271 | 272 | var _window$getComputedStyle = window.getComputedStyle(inputContainer); 273 | 274 | var position = _window$getComputedStyle.position; 275 | 276 | if (position === 'static') { 277 | inputContainer.style.position = 'relative'; 278 | } 279 | } 280 | }, { 281 | key: 'isChecked', 282 | value: function isChecked() { 283 | return this.refs.checkbox.checked; 284 | } 285 | }, { 286 | key: 'handleChange', 287 | value: function handleChange(e) { 288 | var checked = e.target.checked; 289 | if (!('checked' in this.props)) { 290 | this.setState({ 291 | checked: checked 292 | }); 293 | } 294 | 295 | if (this.props.onChange) { 296 | this.props.onChange(e, checked); 297 | } 298 | } 299 | }, { 300 | key: 'handleBlur', 301 | value: function handleBlur(e) { 302 | this.setState({ 303 | focused: false 304 | }); 305 | 306 | if (this.props.onBlur) { 307 | this.props.onBlur(e); 308 | } 309 | } 310 | }, { 311 | key: 'handleFocus', 312 | value: function handleFocus(e) { 313 | this.setState({ 314 | focused: true 315 | }); 316 | 317 | if (this.props.onFocus) { 318 | this.props.onFocus(e); 319 | } 320 | } 321 | }, { 322 | key: 'handleHelperClick', 323 | value: function handleHelperClick(event) { 324 | if (this.props.label) { 325 | return; 326 | } 327 | 328 | if (this.props.disabled) { 329 | return; 330 | } 331 | 332 | var newChecked = !this.refs.checkbox.checked; 333 | 334 | if (!('checked' in this.props)) { 335 | this.refs.checkbox.checked = newChecked; 336 | this.setState({ 337 | checked: newChecked 338 | }); 339 | } 340 | 341 | event.preventDefault(); 342 | event.stopPropagation(); 343 | 344 | if (this.props.onChange) { 345 | // make sure element is not target 346 | event.target = this.refs.checkbox; 347 | this.props.onChange(event, newChecked); 348 | } 349 | } 350 | }, { 351 | key: 'render', 352 | value: function render() { 353 | var _classnames; 354 | 355 | var props = this.props; 356 | var disabled = props.disabled; 357 | var type = props.type; 358 | var name = props.name; 359 | var value = props.value; 360 | var label = props.label; 361 | var onBlur = props.onBlur; 362 | var onFocus = props.onFocus; 363 | var onMouseUp = props.onMouseUp; 364 | var onMouseDown = props.onMouseDown; 365 | var onMouseLeave = props.onMouseLeave; 366 | var onTouchStart = props.onTouchStart; 367 | var onTouchEnd = props.onTouchEnd; 368 | var className = props.className; 369 | var checkboxClass = props.checkboxClass; 370 | var increaseArea = props.increaseArea; 371 | var inputType = props.inputType; 372 | var radioClass = props.radioClass; 373 | var checkedClass = props.checkedClass; 374 | var disabledClass = props.disabledClass; 375 | var indeterminate = props.indeterminate; 376 | var indeterminateClass = props.indeterminateClass; 377 | var hoverClass = props.hoverClass; 378 | var focusClass = props.focusClass; 379 | var activeClass = props.activeClass; 380 | var labelHover = props.labelHover; 381 | var labelHoverClass = props.labelHoverClass; 382 | var labelClassName = props.labelClassName; 383 | var inheritClass = props.inheritClass; 384 | var inheritID = props.inheritID; 385 | var aria = props.aria; 386 | var insert = props.insert; 387 | 388 | var other = _objectWithoutProperties(props, ['type', 'name', 'value', 'label', 'onBlur', 'onFocus', 'onMouseUp', 'onMouseDown', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'className', 'checkboxClass', 'increaseArea', 'inputType', 'radioClass', 'checkedClass', 'disabledClass', 'indeterminate', 'indeterminateClass', 'hoverClass', 'focusClass', 'activeClass', 'labelHover', 'labelHoverClass', 'labelClassName', 'inheritClass', 'inheritID', 'aria', 'insert']); 389 | 390 | var checked = this.state.checked; 391 | 392 | // Setup clickable area 393 | var area = ('' + props.increaseArea).replace('%', '') | 0; 394 | 395 | // Clickable area limit 396 | if (area < -50) { 397 | area = -50; 398 | } 399 | 400 | var id = props.id; 401 | 402 | // Layer styles 403 | var offset = -area + '%'; 404 | var size = 100 + area * 2 + '%'; 405 | var layer = { 406 | position: 'absolute', 407 | top: offset, 408 | left: offset, 409 | display: 'block', 410 | width: size, 411 | height: size, 412 | margin: 0, 413 | padding: 0, 414 | background: '#fff', 415 | border: 0, 416 | opacity: 0, 417 | cursor: disabled ? 'default' : 'pointer' 418 | }; 419 | 420 | // Choose how to hide input 421 | var hide = undefined; 422 | if (this._mobile) { 423 | hide = { 424 | position: 'absolute', 425 | visibility: 'hidden' 426 | }; 427 | } else if (area) { 428 | hide = layer; 429 | } else { 430 | hide = { 431 | position: 'absolute', 432 | opacity: 0 433 | }; 434 | } 435 | 436 | // Check ARIA option 437 | aria = !!props.aria; 438 | 439 | // TODO: Set ARIA placeholder 440 | // let ariaID = _iCheck + '-' + Math.random().toString(36).substr(2, 6); 441 | 442 | var helper = undefined; 443 | if (props.inputType === 'checkbox' && typeof props.indeterminateCheckboxClass !== 'undefined') { 444 | indeterminateClass = props.indeterminateCheckboxClass; 445 | } else if (props.inputType === 'radio' && typeof props.indeterminateRadioClass !== 'undefined') { 446 | indeterminateClass = props.indeterminateRadioClass; 447 | } 448 | 449 | var wrapProps = { 450 | className: (0, _classnames3['default'])((_classnames = {}, _defineProperty(_classnames, props.checkboxClass, props.inputType === 'checkbox'), _defineProperty(_classnames, props.radioClass, props.inputType === 'radio'), _defineProperty(_classnames, indeterminateClass, indeterminate), _defineProperty(_classnames, props.checkedClass, checked), _defineProperty(_classnames, props.disabledClass, disabled), _defineProperty(_classnames, props.hoverClass, this.state.hovered), _defineProperty(_classnames, props.focusClass, this.state.focused), _defineProperty(_classnames, props.activeClass, this.state.active), _classnames)) 451 | }; 452 | 453 | if (props.inheritClass) { 454 | wrapProps.className = (0, _classnames3['default'])(wrapProps.className, props.className); 455 | } 456 | 457 | if (props.inheritID && id) { 458 | wrapProps.id = _iCheck + '-' + id; 459 | } 460 | 461 | if (aria) { 462 | wrapProps.role = props.inputType; 463 | // Set ARIA "labelledby" 464 | wrapProps['aria-labelledby'] = wrapProps.id; 465 | wrapProps['aria-checked'] = checked; 466 | } 467 | 468 | // Layer addition 469 | helper = _react2['default'].createElement('ins', { 470 | className: _iCheckHelper, 471 | style: layer, 472 | onClick: this.handleHelperClick.bind(this) 473 | }); 474 | 475 | var inputElement = _react2['default'].createElement('input', _extends({}, other, { 476 | 477 | ref: 'checkbox', 478 | type: props.inputType, 479 | style: hide, 480 | name: name, 481 | value: value, 482 | defaultChecked: props.defaultChecked, 483 | onChange: this.handleChange.bind(this), 484 | onBlur: this.handleBlur.bind(this), 485 | onFocus: this.handleFocus.bind(this) 486 | })); 487 | 488 | var insertElement = props.insert; 489 | if (insertElement && !_react2['default'].isValidElement(insertElement)) { 490 | insertElement = _react2['default'].createElement('div', { dangerouslySetInnerHTML: { __html: insertElement } }); 491 | } 492 | 493 | var inputContainer = _react2['default'].createElement( 494 | 'div', 495 | _extends({ ref: 'inputContainer' }, wrapProps), 496 | inputElement, 497 | insertElement, 498 | helper 499 | ); 500 | 501 | var labelElement = props.label; 502 | if (!labelElement) { 503 | return inputContainer; 504 | } 505 | if (!_react2['default'].isValidElement(labelElement)) { 506 | labelElement = _react2['default'].createElement('span', { dangerouslySetInnerHTML: { __html: labelElement } }); 507 | } 508 | 509 | // Label events 510 | function handleLabelEvent(event) { 511 | // Do nothing if input is disabled 512 | if (disabled) { 513 | return; 514 | } 515 | 516 | var etype = event.type; 517 | 518 | // Click 519 | if (etype === 'click') { 520 | // FIXME 521 | // if ($(event.target).is('a')) { 522 | // return; 523 | // } 524 | // Hover state 525 | } else if (props.labelHover) { 526 | // mouseout|touchend false 527 | this.setState({ 528 | hovered: !/ut|nd/.test(etype) 529 | }); 530 | } 531 | 532 | if (this._mobile) { 533 | event.stopPropagation(); 534 | } 535 | // return false; 536 | } 537 | 538 | var labelProps = { 539 | // onClick: handleLabelEvent.bind(this), 540 | onMouseOver: handleLabelEvent.bind(this), 541 | onMouseOut: handleLabelEvent.bind(this), 542 | onTouchStart: handleLabelEvent.bind(this), 543 | onTouchEnd: handleLabelEvent.bind(this) 544 | }; 545 | 546 | // add className prop for outer label 547 | if (labelClassName) { 548 | labelProps.className = labelClassName; 549 | } 550 | 551 | return _react2['default'].createElement( 552 | 'label', 553 | labelProps, 554 | inputContainer, 555 | labelElement 556 | ); 557 | } 558 | }]); 559 | 560 | return EnhancedSwitch; 561 | })(_react2['default'].Component); 562 | 563 | exports['default'] = EnhancedSwitch; 564 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/Radio.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _get = require('babel-runtime/helpers/get')['default']; 4 | 5 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 6 | 7 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 8 | 9 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 10 | 11 | var _extends = require('babel-runtime/helpers/extends')['default']; 12 | 13 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 14 | 15 | Object.defineProperty(exports, '__esModule', { 16 | value: true 17 | }); 18 | 19 | var _react = require('react'); 20 | 21 | var _react2 = _interopRequireDefault(_react); 22 | 23 | var _EnhancedSwitch = require('./EnhancedSwitch'); 24 | 25 | var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); 26 | 27 | var Radio = (function (_React$Component) { 28 | _inherits(Radio, _React$Component); 29 | 30 | function Radio() { 31 | _classCallCheck(this, Radio); 32 | 33 | _get(Object.getPrototypeOf(Radio.prototype), 'constructor', this).apply(this, arguments); 34 | } 35 | 36 | _createClass(Radio, [{ 37 | key: 'getValue', 38 | value: function getValue() { 39 | return this.refs.enhancedSwitch.getValue(); 40 | } 41 | }, { 42 | key: 'setChecked', 43 | value: function setChecked(newCheckedValue) { 44 | this.refs.enhancedSwitch.setSwitched(newCheckedValue); 45 | } 46 | }, { 47 | key: 'isChecked', 48 | value: function isChecked() { 49 | return this.refs.enhancedSwitch.isSwitched(); 50 | } 51 | }, { 52 | key: 'render', 53 | value: function render() { 54 | var enhancedSwitchProps = { 55 | ref: 'enhancedSwitch', 56 | inputType: 'radio' 57 | }; 58 | 59 | // labelClassName 60 | return _react2['default'].createElement(_EnhancedSwitch2['default'], _extends({}, this.props, enhancedSwitchProps)); 61 | } 62 | }]); 63 | 64 | return Radio; 65 | })(_react2['default'].Component); 66 | 67 | exports['default'] = Radio; 68 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/RadioGroup.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _get = require('babel-runtime/helpers/get')['default']; 4 | 5 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 6 | 7 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 8 | 9 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 10 | 11 | var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default']; 12 | 13 | var _extends = require('babel-runtime/helpers/extends')['default']; 14 | 15 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 16 | 17 | Object.defineProperty(exports, '__esModule', { 18 | value: true 19 | }); 20 | 21 | var _react = require('react'); 22 | 23 | var _react2 = _interopRequireDefault(_react); 24 | 25 | var _propTypes = require('prop-types'); 26 | 27 | var _propTypes2 = _interopRequireDefault(_propTypes); 28 | 29 | var _Radio = require('./Radio'); 30 | 31 | var _Radio2 = _interopRequireDefault(_Radio); 32 | 33 | var RadioGroup = (function (_React$Component) { 34 | _inherits(RadioGroup, _React$Component); 35 | 36 | _createClass(RadioGroup, null, [{ 37 | key: 'propTypes', 38 | value: { 39 | /** 40 | * The name that will be applied to all radio buttons inside it. 41 | */ 42 | name: _propTypes2['default'].string.isRequired, 43 | 44 | /** 45 | * Sets the default radio button to be the one whose 46 | * value matches defaultValue (case-sensitive). 47 | * This will override any individual radio button with 48 | * the defaultChecked or checked property stated. 49 | */ 50 | defaultValue: _propTypes2['default'].string, 51 | 52 | /** 53 | * The value of the currently selected radio button. 54 | */ 55 | value: _propTypes2['default'].string, 56 | 57 | /** 58 | * Callback function that is fired when a radio button has 59 | * been clicked. Returns the event and the value of the radio 60 | * button that has been selected. 61 | */ 62 | onChange: _propTypes2['default'].func, 63 | 64 | /** 65 | * Should be used to pass `Radio` components. 66 | */ 67 | children: _propTypes2['default'].node, 68 | 69 | /** 70 | * The css class name of the root element. 71 | */ 72 | className: _propTypes2['default'].string 73 | }, 74 | enumerable: true 75 | }]); 76 | 77 | function RadioGroup(props) { 78 | _classCallCheck(this, RadioGroup); 79 | 80 | _get(Object.getPrototypeOf(RadioGroup.prototype), 'constructor', this).call(this, props); 81 | this.state = { 82 | numberCheckedRadioButtons: 0, 83 | value: this.props.value || this.props.defaultValue || '' 84 | }; 85 | } 86 | 87 | _createClass(RadioGroup, [{ 88 | key: 'componentWillMount', 89 | value: function componentWillMount() { 90 | var _this = this; 91 | 92 | var cnt = 0; 93 | 94 | _react2['default'].Children.forEach(this.props.children, function (option) { 95 | if (_this.hasCheckAttribute(option)) cnt++; 96 | }, this); 97 | 98 | this.setState({ numberCheckedRadioButtons: cnt }); 99 | } 100 | }, { 101 | key: 'componentWillReceiveProps', 102 | value: function componentWillReceiveProps(nextProps) { 103 | if (nextProps.hasOwnProperty('value')) { 104 | this.setState({ 105 | value: nextProps.value 106 | }); 107 | } 108 | } 109 | }, { 110 | key: 'getValue', 111 | value: function getValue() { 112 | return this.state.value; 113 | } 114 | }, { 115 | key: 'setValue', 116 | value: function setValue(newValue) { 117 | this.updateRadioButtons(newValue); 118 | } 119 | }, { 120 | key: 'clearValue', 121 | value: function clearValue() { 122 | this.setValue(''); 123 | } 124 | }, { 125 | key: 'hasCheckAttribute', 126 | value: function hasCheckAttribute(radioButton) { 127 | return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; 128 | } 129 | }, { 130 | key: 'updateRadioButtons', 131 | value: function updateRadioButtons(newValue) { 132 | if (this.state.numberCheckedRadioButtons === 0) { 133 | this.setState({ value: newValue }); 134 | } else { 135 | if (process.env.NODE_ENV !== 'production') { 136 | var message = 'Cannot select a different radio button while another radio button ' + 'has the \'checked\' property set to true.'; 137 | console.error(message); // eslint-disable-line 138 | } 139 | } 140 | } 141 | }, { 142 | key: 'handleChange', 143 | value: function handleChange(e /* TODO , newValue */) { 144 | var newValue = e.target.value; 145 | 146 | this.updateRadioButtons(newValue); 147 | 148 | // Successful update 149 | if (this.state.numberCheckedRadioButtons === 0) { 150 | if (this.props.onChange) { 151 | this.props.onChange(e, newValue); 152 | } 153 | } 154 | } 155 | }, { 156 | key: 'render', 157 | value: function render() { 158 | var _this2 = this; 159 | 160 | var options = _react2['default'].Children.map(this.props.children, function (option) { 161 | var _option$props = option.props; 162 | var name = _option$props.name; 163 | var value = _option$props.value; 164 | var label = _option$props.label; 165 | var onChange = _option$props.onChange; 166 | 167 | var other = _objectWithoutProperties(_option$props, ['name', 'value', 'label', 'onChange']); 168 | 169 | return _react2['default'].createElement(_Radio2['default'], _extends({}, other, { 170 | ref: option.props.value, 171 | name: _this2.props.name, 172 | key: option.props.value, 173 | value: option.props.value, 174 | label: option.props.label, 175 | onChange: _this2.handleChange.bind(_this2), 176 | checked: option.props.value === _this2.state.value 177 | })); 178 | }, this); 179 | 180 | return _react2['default'].createElement( 181 | 'div', 182 | { className: this.props.className }, 183 | options 184 | ); 185 | } 186 | }]); 187 | 188 | return RadioGroup; 189 | })(_react2['default'].Component); 190 | 191 | exports['default'] = RadioGroup; 192 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 4 | 5 | Object.defineProperty(exports, '__esModule', { 6 | value: true 7 | }); 8 | 9 | var _Checkbox = require('./Checkbox'); 10 | 11 | var _Checkbox2 = _interopRequireDefault(_Checkbox); 12 | 13 | var _Radio = require('./Radio'); 14 | 15 | var _Radio2 = _interopRequireDefault(_Radio); 16 | 17 | var _RadioGroup = require('./RadioGroup'); 18 | 19 | var _RadioGroup2 = _interopRequireDefault(_RadioGroup); 20 | 21 | exports['default'] = { 22 | Checkbox: _Checkbox2['default'], 23 | Radio: _Radio2['default'], 24 | RadioGroup: _RadioGroup2['default'] 25 | }; 26 | module.exports = exports['default']; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-icheck", 3 | "version": "0.3.8", 4 | "description": "iCheck components built with React. Highly customizable checkboxes and radio buttons", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "babel ./src -d lib", 8 | "gh-pages": "gulp publish:examples", 9 | "lint": "eslint src examples/src", 10 | "prepublish": "npm run build", 11 | "start": "gulp dev", 12 | "test": "npm run lint && gulp build --p" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/luqin/react-icheck" 17 | }, 18 | "license": "ISC", 19 | "files": [ 20 | "lib", 21 | "CHANGELOG.md", 22 | "README.md" 23 | ], 24 | "peerDependencies": { 25 | "react": "^15 || ^16" 26 | }, 27 | "dependencies": { 28 | "babel-runtime": "^5.8.38", 29 | "classnames": "^2.2.3", 30 | "icheck": "^1.0.2", 31 | "prop-types": "^15.5.8" 32 | }, 33 | "devDependencies": { 34 | "babel": "^5.8.38", 35 | "babel-core": "^5.8.38", 36 | "babel-eslint": "^4.1.1", 37 | "babel-plugin-object-assign": "^1.2.1", 38 | "eslint": "^1.10.3", 39 | "bootstrap": "^3.3.7", 40 | "eslint-config-airbnb": "^2.1.1", 41 | "eslint-config-onefe": "^0.2.0", 42 | "eslint-plugin-react": "^3.11.3", 43 | "gulp": "^3.9.1", 44 | "react": "^15.4.2", 45 | "react-dom": "^15.4.2", 46 | "react-bootstrap": "^0.30.3", 47 | "react-component-tools": "^1.0.2", 48 | "react-router": "^2.8.1", 49 | "react-router-bootstrap": "^0.22.1", 50 | "react-router-loader": "^0.5.4", 51 | "webpack": "^1.13.0", 52 | "webpack-dev-server": "^1.14.1" 53 | }, 54 | "keywords": [ 55 | "react", 56 | "icheck", 57 | "radio", 58 | "checkbox", 59 | "toggle", 60 | "switch", 61 | "radioGroup", 62 | "form", 63 | "input", 64 | "ui", 65 | "react-dom", 66 | "react-icheck", 67 | "react-component" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /src/Checkbox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import EnhancedSwitch from './EnhancedSwitch'; 4 | 5 | class Checkbox extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | this.state = {}; 10 | } 11 | 12 | getValue() { 13 | return this.refs.enhancedSwitch.getValue(); 14 | } 15 | 16 | setChecked(newCheckedValue) { 17 | this.refs.enhancedSwitch.setChecked(newCheckedValue); 18 | } 19 | 20 | isChecked() { 21 | return this.refs.enhancedSwitch.isChecked(); 22 | } 23 | 24 | render() { 25 | return ( 26 | 27 | ); 28 | } 29 | } 30 | 31 | export default Checkbox; 32 | -------------------------------------------------------------------------------- /src/CheckboxGroup.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luqin/react-icheck/4b5a3a5b04f5c0ea986d622bb74ac3c7987e3db1/src/CheckboxGroup.js -------------------------------------------------------------------------------- /src/EnhancedSwitch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames'; 4 | 5 | const _iCheck = 'iCheck'; 6 | const _iCheckHelper = _iCheck + '-helper'; 7 | 8 | class EnhancedSwitch extends React.Component { 9 | 10 | static propTypes = { 11 | inputType: PropTypes.string.isRequired, 12 | 13 | checked: PropTypes.bool, 14 | defaultChecked: PropTypes.bool, 15 | 16 | label: PropTypes.node, 17 | 18 | disabled: PropTypes.bool, 19 | 20 | indeterminate: PropTypes.bool, 21 | 22 | onChange: PropTypes.func, 23 | onBlur: PropTypes.func, 24 | onFocus: PropTypes.func, 25 | 26 | // base class added to customized checkboxes 27 | checkboxClass: PropTypes.string, 28 | 29 | // base class added to customized radio buttons 30 | radioClass: PropTypes.string, 31 | 32 | // class added on checked state (input.checked = true) 33 | checkedClass: PropTypes.string, 34 | 35 | // if not empty, used instead of 'checkedClass' option (input type specific) 36 | checkedCheckboxClass: PropTypes.string, 37 | checkedRadioClass: PropTypes.string, 38 | 39 | // if not empty, added as class name on unchecked state (input.checked = false) 40 | uncheckedClass: PropTypes.string, 41 | 42 | // if not empty, used instead of 'uncheckedClass' option (input type specific) 43 | uncheckedCheckboxClass: PropTypes.string, 44 | uncheckedRadioClass: PropTypes.string, 45 | 46 | // class added on disabled state (input.disabled = true) 47 | disabledClass: PropTypes.string, 48 | 49 | // if not empty, used instead of 'disabledClass' option (input type specific) 50 | disabledCheckboxClass: PropTypes.string, 51 | disabledRadioClass: PropTypes.string, 52 | 53 | // if not empty, added as class name on enabled state (input.disabled = false) 54 | enabledClass: PropTypes.string, 55 | 56 | // if not empty, used instead of 'enabledClass' option (input type specific) 57 | enabledCheckboxClass: PropTypes.string, 58 | enabledRadioClass: PropTypes.string, 59 | 60 | // class added on indeterminate state (input.indeterminate = true) 61 | indeterminateClass: PropTypes.string, 62 | 63 | // if not empty, used instead of 'indeterminateClass' option (input type specific) 64 | indeterminateCheckboxClass: PropTypes.string, 65 | indeterminateRadioClass: PropTypes.string, 66 | 67 | // if not empty, added as class name on determinate state (input.indeterminate = false) 68 | determinateClass: PropTypes.string, 69 | 70 | // if not empty, used instead of 'determinateClass' option (input type specific) 71 | determinateCheckboxClass: PropTypes.string, 72 | determinateRadioClass: PropTypes.string, 73 | 74 | // class added on hover state (pointer is moved onto input) 75 | hoverClass: PropTypes.string, 76 | 77 | // class added on focus state (input has gained focus) 78 | focusClass: PropTypes.string, 79 | 80 | // class added on active state (mouse button is pressed on input) 81 | activeClass: PropTypes.string, 82 | 83 | // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover 84 | labelHover: PropTypes.bool, 85 | 86 | // class added to label if labelHover set to true 87 | labelHoverClass: PropTypes.string, 88 | 89 | // increase clickable area by given % (negative number to decrease) 90 | increaseArea: PropTypes.string, 91 | 92 | // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled 93 | cursor: PropTypes.bool, 94 | 95 | // set true to inherit original input's class name 96 | inheritClass: PropTypes.bool, 97 | 98 | // if set to true, input's id is prefixed with 'iCheck-' and attached 99 | inheritID: PropTypes.bool, 100 | 101 | // set true to activate ARIA support 102 | aria: PropTypes.bool, 103 | 104 | // add HTML code or text inside customized input 105 | insert: PropTypes.node, 106 | 107 | children: PropTypes.node, 108 | 109 | // class added for outer label 110 | labelClassName: PropTypes.string, 111 | }; 112 | 113 | static defaultProps = { 114 | 115 | checkboxClass: 'icheckbox', 116 | 117 | // base class added to customized radio buttons 118 | radioClass: 'iradio', 119 | 120 | // class added on checked state (input.checked = true) 121 | checkedClass: 'checked', 122 | 123 | // class added on disabled state (input.disabled = true) 124 | disabledClass: 'disabled', 125 | 126 | // class added on indeterminate state (input.indeterminate = true) 127 | indeterminateClass: 'indeterminate', 128 | 129 | // class added on hover state (pointer is moved onto input) 130 | hoverClass: 'hover', 131 | 132 | // class added on focus state (input has gained focus) 133 | focusClass: 'focus', 134 | 135 | // class added on active state (mouse button is pressed on input) 136 | activeClass: 'active', 137 | 138 | // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover 139 | labelHover: true, 140 | 141 | // class added to label if labelHover set to true 142 | labelHoverClass: 'hover', 143 | 144 | // increase clickable area by given % (negative number to decrease) 145 | increaseArea: '', 146 | 147 | // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled 148 | cursor: false, 149 | 150 | // set true to inherit original input's class name 151 | inheritClass: false, 152 | 153 | // if set to true, input's id is prefixed with 'iCheck-' and attached 154 | inheritID: false, 155 | 156 | // set true to activate ARIA support 157 | aria: false, 158 | }; 159 | 160 | constructor(props) { 161 | super(props); 162 | let checked = false; 163 | if ('checked' in props) { 164 | checked = props.checked; 165 | } else { 166 | checked = props.defaultChecked; 167 | } 168 | // Assume we aren't on a mobile for server-side-rendering 169 | this._mobile = false; 170 | this.state = { 171 | checked, 172 | focused: false, 173 | hovered: false, 174 | active: false, 175 | }; 176 | } 177 | 178 | componentDidMount() { 179 | if (typeof navigator !== 'undefined') { 180 | this._mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent); 181 | } 182 | this.adjustStyle(); 183 | this.setIndeterminate(); 184 | this.forceUpdate(); 185 | } 186 | 187 | componentWillReceiveProps(nextProps) { 188 | if ('checked' in nextProps) { 189 | this.setState({ 190 | checked: nextProps.checked, 191 | }); 192 | } 193 | } 194 | 195 | componentDidUpdate() { 196 | this.adjustStyle(); 197 | this.setIndeterminate(); 198 | } 199 | 200 | getValue() { 201 | return this.refs.checkbox.value; 202 | } 203 | 204 | setChecked(newCheckedValue) { 205 | if (!this.props.hasOwnProperty('checked') || this.props.checked === false) { 206 | // TODO: this.props.onParentShouldUpdate(newSwitchedValue); 207 | this.refs.checkbox.checked = newCheckedValue; 208 | } else { 209 | if (process.env.NODE_ENV !== 'production') { 210 | let message = 'Cannot call set method while checked is defined as a property.'; 211 | console.error(message); // eslint-disable-line 212 | } 213 | } 214 | } 215 | 216 | setIndeterminate() { 217 | if (this.props.indeterminate) { 218 | this.refs.checkbox.indeterminate = true; 219 | } 220 | } 221 | 222 | adjustStyle() { 223 | const { inputContainer } = this.refs; 224 | const { position } = window.getComputedStyle(inputContainer); 225 | 226 | if (position === 'static') { 227 | inputContainer.style.position = 'relative'; 228 | } 229 | } 230 | 231 | isChecked() { 232 | return this.refs.checkbox.checked; 233 | } 234 | 235 | handleChange(e) { 236 | const checked = e.target.checked; 237 | if (!('checked' in this.props)) { 238 | this.setState({ 239 | checked, 240 | }); 241 | } 242 | 243 | if (this.props.onChange) { 244 | this.props.onChange(e, checked); 245 | } 246 | } 247 | 248 | handleBlur(e) { 249 | this.setState({ 250 | focused: false, 251 | }); 252 | 253 | if (this.props.onBlur) { 254 | this.props.onBlur(e); 255 | } 256 | } 257 | 258 | handleFocus(e) { 259 | this.setState({ 260 | focused: true, 261 | }); 262 | 263 | if (this.props.onFocus) { 264 | this.props.onFocus(e); 265 | } 266 | } 267 | 268 | handleHelperClick(event) { 269 | if (this.props.label) { 270 | return; 271 | } 272 | 273 | if (this.props.disabled) { 274 | return; 275 | } 276 | 277 | let newChecked = !this.refs.checkbox.checked; 278 | 279 | if (!('checked' in this.props)) { 280 | this.refs.checkbox.checked = newChecked; 281 | this.setState({ 282 | checked: newChecked, 283 | }); 284 | } 285 | 286 | event.preventDefault(); 287 | event.stopPropagation(); 288 | 289 | if (this.props.onChange) { 290 | // make sure element is not target 291 | event.target = this.refs.checkbox; 292 | this.props.onChange(event, newChecked); 293 | } 294 | } 295 | 296 | render() { 297 | let props = this.props; 298 | let { disabled } = props; 299 | let { 300 | type, 301 | name, 302 | value, 303 | label, 304 | onBlur, 305 | onFocus, 306 | onMouseUp, 307 | onMouseDown, 308 | onMouseLeave, 309 | onTouchStart, 310 | onTouchEnd, 311 | className, 312 | 313 | checkboxClass, 314 | increaseArea, 315 | inputType, 316 | radioClass, 317 | checkedClass, 318 | disabledClass, 319 | indeterminate, 320 | indeterminateClass, 321 | hoverClass, 322 | focusClass, 323 | activeClass, 324 | labelHover, 325 | labelHoverClass, 326 | labelClassName, 327 | inheritClass, 328 | inheritID, 329 | aria, 330 | insert, 331 | 332 | ...other, 333 | } = props; 334 | 335 | let { checked } = this.state; 336 | 337 | // Setup clickable area 338 | let area = ('' + props.increaseArea).replace('%', '') | 0; 339 | 340 | // Clickable area limit 341 | if (area < -50) { 342 | area = -50; 343 | } 344 | 345 | let id = props.id; 346 | 347 | // Layer styles 348 | let offset = -area + '%'; 349 | let size = 100 + (area * 2) + '%'; 350 | let layer = { 351 | position: 'absolute', 352 | top: offset, 353 | left: offset, 354 | display: 'block', 355 | width: size, 356 | height: size, 357 | margin: 0, 358 | padding: 0, 359 | background: '#fff', 360 | border: 0, 361 | opacity: 0, 362 | cursor: disabled ? 'default' : 'pointer', 363 | }; 364 | 365 | // Choose how to hide input 366 | let hide; 367 | if (this._mobile) { 368 | hide = { 369 | position: 'absolute', 370 | visibility: 'hidden', 371 | }; 372 | } else if (area) { 373 | hide = layer; 374 | } else { 375 | hide = { 376 | position: 'absolute', 377 | opacity: 0, 378 | }; 379 | } 380 | 381 | // Check ARIA option 382 | aria = !!props.aria; 383 | 384 | // TODO: Set ARIA placeholder 385 | // let ariaID = _iCheck + '-' + Math.random().toString(36).substr(2, 6); 386 | 387 | let helper; 388 | if (props.inputType === 'checkbox' && typeof props.indeterminateCheckboxClass !== 'undefined') { 389 | indeterminateClass = props.indeterminateCheckboxClass; 390 | } else if (props.inputType === 'radio' && typeof props.indeterminateRadioClass !== 'undefined') { 391 | indeterminateClass = props.indeterminateRadioClass; 392 | } 393 | 394 | const wrapProps = { 395 | className: classnames({ 396 | [props.checkboxClass]: props.inputType === 'checkbox', 397 | [props.radioClass]: props.inputType === 'radio', 398 | [indeterminateClass]: indeterminate, 399 | [props.checkedClass]: checked, 400 | [props.disabledClass]: disabled, 401 | [props.hoverClass]: this.state.hovered, 402 | [props.focusClass]: this.state.focused, 403 | [props.activeClass]: this.state.active, 404 | }), 405 | }; 406 | 407 | if (props.inheritClass) { 408 | wrapProps.className = classnames(wrapProps.className, props.className); 409 | } 410 | 411 | if (props.inheritID && id) { 412 | wrapProps.id = _iCheck + '-' + id; 413 | } 414 | 415 | if (aria) { 416 | wrapProps.role = props.inputType; 417 | // Set ARIA "labelledby" 418 | wrapProps['aria-labelledby'] = wrapProps.id; 419 | wrapProps['aria-checked'] = checked; 420 | } 421 | 422 | // Layer addition 423 | helper = ( 424 | 429 | ); 430 | 431 | const inputElement = ( 432 | 445 | ); 446 | 447 | let insertElement = props.insert; 448 | if (insertElement && !React.isValidElement(insertElement)) { 449 | insertElement =
    ; 450 | } 451 | 452 | const inputContainer = ( 453 |
    454 | {inputElement} 455 | {insertElement} 456 | {helper} 457 |
    458 | ); 459 | 460 | let labelElement = props.label; 461 | if (!labelElement) { 462 | return inputContainer; 463 | } 464 | if (!React.isValidElement(labelElement)) { 465 | labelElement = ; 466 | } 467 | 468 | // Label events 469 | function handleLabelEvent(event) { 470 | // Do nothing if input is disabled 471 | if (disabled) { 472 | return; 473 | } 474 | 475 | const etype = event.type; 476 | 477 | // Click 478 | if (etype === 'click') { 479 | // FIXME 480 | // if ($(event.target).is('a')) { 481 | // return; 482 | // } 483 | // Hover state 484 | } else if (props.labelHover) { 485 | // mouseout|touchend false 486 | this.setState({ 487 | hovered: !/ut|nd/.test(etype), 488 | }); 489 | } 490 | 491 | if (this._mobile) { 492 | event.stopPropagation(); 493 | } 494 | // return false; 495 | } 496 | 497 | const labelProps = { 498 | // onClick: handleLabelEvent.bind(this), 499 | onMouseOver: handleLabelEvent.bind(this), 500 | onMouseOut: handleLabelEvent.bind(this), 501 | onTouchStart: handleLabelEvent.bind(this), 502 | onTouchEnd: handleLabelEvent.bind(this), 503 | }; 504 | 505 | // add className prop for outer label 506 | if (labelClassName) { 507 | labelProps.className = labelClassName; 508 | } 509 | 510 | return ( 511 | 515 | ); 516 | } 517 | } 518 | 519 | export default EnhancedSwitch; 520 | -------------------------------------------------------------------------------- /src/Radio.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import EnhancedSwitch from './EnhancedSwitch'; 4 | 5 | class Radio extends React.Component { 6 | 7 | getValue() { 8 | return this.refs.enhancedSwitch.getValue(); 9 | } 10 | 11 | setChecked(newCheckedValue) { 12 | this.refs.enhancedSwitch.setSwitched(newCheckedValue); 13 | } 14 | 15 | isChecked() { 16 | return this.refs.enhancedSwitch.isSwitched(); 17 | } 18 | 19 | render() { 20 | let enhancedSwitchProps = { 21 | ref: 'enhancedSwitch', 22 | inputType: 'radio', 23 | // labelClassName 24 | }; 25 | 26 | return ( 27 | 28 | ); 29 | } 30 | } 31 | 32 | export default Radio; 33 | -------------------------------------------------------------------------------- /src/RadioGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import RadioButton from './Radio'; 4 | 5 | class RadioGroup extends React.Component { 6 | 7 | static propTypes = { 8 | /** 9 | * The name that will be applied to all radio buttons inside it. 10 | */ 11 | name: PropTypes.string.isRequired, 12 | 13 | /** 14 | * Sets the default radio button to be the one whose 15 | * value matches defaultValue (case-sensitive). 16 | * This will override any individual radio button with 17 | * the defaultChecked or checked property stated. 18 | */ 19 | defaultValue: PropTypes.string, 20 | 21 | /** 22 | * The value of the currently selected radio button. 23 | */ 24 | value: PropTypes.string, 25 | 26 | /** 27 | * Callback function that is fired when a radio button has 28 | * been clicked. Returns the event and the value of the radio 29 | * button that has been selected. 30 | */ 31 | onChange: PropTypes.func, 32 | 33 | /** 34 | * Should be used to pass `Radio` components. 35 | */ 36 | children: PropTypes.node, 37 | 38 | /** 39 | * The css class name of the root element. 40 | */ 41 | className: PropTypes.string, 42 | }; 43 | 44 | constructor(props) { 45 | super(props); 46 | this.state = { 47 | numberCheckedRadioButtons: 0, 48 | value: this.props.value || this.props.defaultValue || '', 49 | }; 50 | } 51 | 52 | componentWillMount() { 53 | let cnt = 0; 54 | 55 | React.Children.forEach(this.props.children, (option) => { 56 | if (this.hasCheckAttribute(option)) cnt++; 57 | }, this); 58 | 59 | this.setState({ numberCheckedRadioButtons: cnt }); 60 | } 61 | 62 | componentWillReceiveProps(nextProps) { 63 | if (nextProps.hasOwnProperty('value')) { 64 | this.setState({ 65 | value: nextProps.value, 66 | }); 67 | } 68 | } 69 | 70 | getValue() { 71 | return this.state.value; 72 | } 73 | 74 | setValue(newValue) { 75 | this.updateRadioButtons(newValue); 76 | } 77 | 78 | clearValue() { 79 | this.setValue(''); 80 | } 81 | 82 | hasCheckAttribute(radioButton) { 83 | return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; 84 | } 85 | 86 | updateRadioButtons(newValue) { 87 | if (this.state.numberCheckedRadioButtons === 0) { 88 | this.setState({ value: newValue }); 89 | } else { 90 | if (process.env.NODE_ENV !== 'production') { 91 | let message = 'Cannot select a different radio button while another radio button ' + 92 | 'has the \'checked\' property set to true.'; 93 | console.error(message); // eslint-disable-line 94 | } 95 | } 96 | } 97 | 98 | handleChange(e /* TODO , newValue */) { 99 | let newValue = e.target.value; 100 | 101 | this.updateRadioButtons(newValue); 102 | 103 | // Successful update 104 | if (this.state.numberCheckedRadioButtons === 0) { 105 | if (this.props.onChange) { 106 | this.props.onChange(e, newValue); 107 | } 108 | } 109 | } 110 | 111 | render() { 112 | let options = React.Children.map(this.props.children, (option) => { 113 | let { 114 | name, 115 | value, 116 | label, 117 | onChange, 118 | ...other, 119 | } = option.props; 120 | 121 | return ( 122 | 132 | ); 133 | }, this); 134 | 135 | return ( 136 |
    137 | {options} 138 |
    139 | ); 140 | } 141 | } 142 | 143 | export default RadioGroup; 144 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox'; 2 | import Radio from './Radio'; 3 | import RadioGroup from './RadioGroup'; 4 | 5 | export default { 6 | Checkbox, 7 | Radio, 8 | RadioGroup, 9 | }; 10 | --------------------------------------------------------------------------------