From 81eddd6b974f7b755ccb2f2933eb92885bbd3d4b Mon Sep 17 00:00:00 2001 From: Vitalii Maslianok Date: Thu, 4 Jun 2020 11:35:08 +0300 Subject: [PATCH] Lint, componentWillReceibeProps -> getDerivedStateFromProps --- .eslintrc | 4 +- .vscode/settings.json | 3 +- lib/ReactSelectMe.css | 291 +++++++++++++++--------------- lib/ReactSelectMe.js | 34 ++-- lib/hoc/makeImmutable.js | 1 + lib/hoc/makeVirtualized.js | 1 + package.json | 3 +- src/ReactSelectMe.css | 355 +++++++++++++++++++------------------ src/ReactSelectMe.js | 66 ++++--- src/hoc/makeImmutable.js | 6 +- src/hoc/makeVirtualized.js | 4 +- yarn.lock | 13 ++ 12 files changed, 415 insertions(+), 366 deletions(-) diff --git a/.eslintrc b/.eslintrc index faa76aa..30ca115 100644 --- a/.eslintrc +++ b/.eslintrc @@ -17,7 +17,9 @@ "jsx-a11y/no-static-element-interactions": 0, "jsx-a11y/click-events-have-key-events": 0, "jsx-a11y/no-noninteractive-tabindex": 0, - "no-case-declarations": 0 + "no-case-declarations": 0, + "operator-linebreak": 0, + "implicit-arrow-linebreak": 0 }, "settings": { "import/resolve": { diff --git a/.vscode/settings.json b/.vscode/settings.json index c3e1df1..ecb5024 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,6 @@ { "prettier.eslintIntegration": true, "prettier.printWidth": 120, - "prettier.singleQuote": true + "prettier.singleQuote": true, + "css.validate": false } diff --git a/lib/ReactSelectMe.css b/lib/ReactSelectMe.css index 158fdfb..29ff371 100644 --- a/lib/ReactSelectMe.css +++ b/lib/ReactSelectMe.css @@ -4,209 +4,210 @@ .dd__opened { border-radius: 3px; - border-color: #373C43; - color: #373C43; + border-color: #373c43; + color: #373c43; } .dd__disabled { - border-color: #6D757B; - color: #6D757B; + border-color: #6d757b; + color: #6d757b; } .dd__error { - border-color: #E9596A; -} - - .dd__selectControl { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 14px; - padding: 8px; - border: 1px solid #373C43; - border-radius: 3px; - background-color: #FFF; - color: #373C43; - line-height: 20px; - cursor: pointer; - overflow: hidden - } - - .dd__error .dd__selectControl { - color: #E9596A; + border-color: #e9596a; +} + +.dd__selectControl { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 14px; + padding: 8px; + border: 1px solid #373c43; + border-radius: 3px; + background-color: #fff; + color: #373c43; + line-height: 20px; + cursor: pointer; + overflow: hidden +} + +.dd__error .dd__selectControl { + color: #e9596a; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - .dd__disabled .dd__selectControl { +.dd__disabled .dd__selectControl { cursor: default; } - .dd__selected { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - overflow: hidden - } +.dd__selected { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + overflow: hidden +} - .dd__multi .dd__selected { +.dd__multi .dd__selected { margin-top: -2px; } - .dd__search { - display: inline-block; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - border: 1px solid transparent; - outline: 0; - opacity: 0; - min-height: 20px; - word-break: break-word - } - - .dd__multi .dd__search { +.dd__search { + display: inline-block; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border: 1px solid transparent; + outline: 0; + opacity: 0; + min-height: 20px; + word-break: break-word +} + +.dd__multi .dd__search { margin-top: 2px; } - .dd__opened .dd__search { +.dd__opened .dd__search { opacity: 1; } - .dd__placeholder { - border: 1px solid transparent; - color: #6D757B - } +.dd__placeholder { + border: 1px solid transparent; + color: #6d757b +} - .dd__multi .dd__placeholder { +.dd__multi .dd__placeholder { margin-top: 2px; } - .dd__error .dd__placeholder { - color: #E9596A; +.dd__error .dd__placeholder { + color: #e9596a; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - .dd__selectedItem { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - border: 1px solid transparent - } +.dd__selectedItem { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + border: 1px solid transparent +} - .dd__multi .dd__selectedItem { - border-color: #A9B6D2; - background-color: #E3EAF6; +.dd__multi .dd__selectedItem { + border-color: #a9b6d2; + background-color: #e3eaf6; border-radius: 2px; margin-top: 2px; margin-right: 2px; padding: 0 4px; } - .dd__crossIcon { - margin-left: 5px; - } - - .dd__expandIcon { - width: 9px; - height: 15px; - -ms-flex-negative: 0; - flex-shrink: 0; - fill: #2D3136 - } - - .dd__error .dd__expandIcon { - fill: #E9596A; -} - - .dd__list { - display: none; - position: absolute !important; - background-color: #FFF; - overflow: auto; - z-index: 1; - -webkit-overflow-scrolling: touch; - min-width: 100%; - border: 1px solid #373C43; - border-radius: 3px; - -webkit-box-shadow: 0 3px 7px 0 rgba(#000, 0.08); - box-shadow: 0 3px 7px 0 rgba(#000, 0.08); - - /* Without this property, Chrome repaints the entire Grid any time a new row or column is added. - Firefox only repaints the new row or column (regardless of this property). - Safari and IE don't support the property at all. */ - will-change: transform - } - - .dd__opened .dd__list { +.dd__crossIcon { + margin-left: 5px; +} + +.dd__expandIcon { + width: 9px; + height: 15px; + -ms-flex-negative: 0; + flex-shrink: 0; + fill: #2d3136 +} + +.dd__error .dd__expandIcon { + fill: #e9596a; +} + +.dd__list { + display: none; + position: absolute !important; + background-color: #fff; + overflow: auto; + z-index: 1; + -webkit-overflow-scrolling: touch; + min-width: 100%; + border: 1px solid #373c43; + border-radius: 3px; + -webkit-box-shadow: 0 3px 7px 0 rgba(#000, 0.08); + box-shadow: 0 3px 7px 0 rgba(#000, 0.08); + + /* Without this property, Chrome repaints the entire Grid any time a new row or column is added. + Firefox only repaints the new row or column (regardless of this property). + Safari and IE don't support the property at all. + */ + will-change: transform +} + +.dd__opened .dd__list { display: block; } - .dd__opened .dd__list:empty { +.dd__opened .dd__list:empty { display: none; } - .dd__listVirtualized { - overflow-y: auto; - overflow-x: hidden; +.dd__listVirtualized { + overflow-y: auto; + overflow-x: hidden; - :global(.Grid__innerScrollContainer) { - overflow: hidden; - position: relative; - } - } + :global(.Grid__innerScrollContainer) { + overflow: hidden; + position: relative; + } +} - .dd__openTobottom { - top: 100%; - margin-top: 5px; - } +.dd__openTobottom { + top: 100%; + margin-top: 5px; +} - .dd__openTotop { - bottom: 100%; - margin-bottom: 5px; - } +.dd__openTotop { + bottom: 100%; + margin-bottom: 5px; +} - .dd__optionVirtualized { - position: absolute; - } +.dd__optionVirtualized { + position: absolute; +} - .dd__option { - padding: 10px; - line-height: 20px; - white-space: nowrap; - cursor: pointer - } +.dd__option { + padding: 10px; + line-height: 20px; + white-space: nowrap; + cursor: pointer +} - .dd__option:hover { - background-color: #F1F1F1; +.dd__option:hover { + background-color: #f1f1f1; } - .dd__selectedOption { - background-color: #F1F1F1; - } +.dd__selectedOption { + background-color: #f1f1f1; +} - .dd__optionDisabled { - cursor: default - } +.dd__optionDisabled { + cursor: default +} - .dd__optionDisabled:hover { +.dd__optionDisabled:hover { background-color: transparent; } -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9SZWFjdFNlbGVjdE1lLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXQTtFQUNFLGtCQUFrQjtBQUNwQjs7QUFFQTtFQUNFLGtCQUFrQjtFQUNsQixxQkFBK0I7RUFDL0IsY0FBd0I7QUFDMUI7O0FBRUE7RUFDRSxxQkFBbUM7RUFDbkMsY0FBNEI7QUFDOUI7O0FBRUE7Q0FDQyxxQkFBZ0M7QUFDakM7O0NBRUM7RUFDQyxvQkFBYTtFQUFiLG9CQUFhO0VBQWIsYUFBYTtFQUNiLHlCQUFtQjtNQUFuQixzQkFBbUI7VUFBbkIsbUJBQW1CO0lBQ2pCLGVBQWU7RUFDakIsWUFBWTtJQUNWLHlCQUFtQztJQUNuQyxrQkFBa0I7SUFDbEIsc0JBQW9DO0lBQ3BDLGNBQXdCO0VBQzFCLGlCQUErQjtFQUMvQixlQUFlO0VBQ2Y7Q0FVRDs7Q0FSQztFQUNDLGNBQXlCO0VBQ3pCLHlCQUFpQjtLQUFqQixzQkFBaUI7TUFBakIscUJBQWlCO1VBQWpCLGlCQUFpQjtBQUNsQjs7Q0FFQTtFQUNDLGVBQWU7QUFDaEI7O0VBR0E7R0FDQyxvQkFBYTtHQUFiLG9CQUFhO0dBQWIsYUFBYTtHQUNiLG1CQUFZO09BQVosb0JBQVk7V0FBWixZQUFZO0dBQ1osbUJBQWU7T0FBZixlQUFlO01BQ1o7RUFLSjs7RUFIQztFQUNDLGdCQUFnQjtBQUNqQjs7R0FHQTtJQUNDLHFCQUFxQjtJQUNyQix5QkFBbUI7UUFBbkIsc0JBQW1CO1lBQW5CLG1CQUFtQjtJQUNuQixtQkFBWTtRQUFaLG9CQUFZO1lBQVosWUFBWTtJQUNaLDZCQUE2QjtJQUM3QixVQUFVO1FBQ04sVUFBVTtRQUNWLGdCQUE4QjtRQUM5QjtHQVNMOztHQVBDO0VBQ0MsZUFBZTtBQUNoQjs7R0FFSTtFQUNILFVBQVU7QUFDWDs7R0FHRDtJQUNDLDZCQUE2QjtJQUM3QjtHQVVEOztHQVJDO0VBQ0MsZUFBZTtBQUNoQjs7R0FFQTtFQUNDLGNBQXlCO0VBQ3pCLHlCQUFpQjtLQUFqQixzQkFBaUI7TUFBakIscUJBQWlCO1VBQWpCLGlCQUFpQjtBQUNsQjs7R0FHRDtJQUNDLG9CQUFhO0lBQWIsb0JBQWE7SUFBYixhQUFhO0lBQ2I7R0FVRDs7R0FSQztFQUNDLHFCQUFxQjtFQUNyQix5QkFBeUI7RUFDekIsa0JBQWtCO0VBQ2xCLGVBQWU7RUFDZixpQkFBaUI7RUFDakIsY0FBYztBQUNmOztJQUdBO0tBQ0MsZ0JBQWdCO0lBQ2pCOztFQUVGO0dBQ0MsVUFBVTtHQUNWLFlBQVk7TUFDVCxvQkFBYztVQUFkLGNBQWM7R0FDakI7RUFLRDs7RUFIQztFQUNDLGFBQXdCO0FBQ3pCOztDQUdGO0VBQ0MsYUFBYTtFQUNiLDZCQUE2QjtFQUM3QixzQkFBb0M7RUFDcEMsY0FBYztFQUNkLFVBQVU7RUFDVixpQ0FBaUM7SUFDL0IsZUFBZTtJQUNmLHlCQUFtQztJQUNuQyxrQkFBa0I7SUFDbEIsZ0RBQXNEO1lBQXRELHdDQUFzRDs7RUFFeEQ7O3dEQUVzRDtHQUNyRDtDQVNGOztDQVBDO0VBQ0M7QUFLRDs7Q0FISTtFQUNFLGFBQWE7QUFDZjs7Q0FJTDtHQUNFLGdCQUFnQjtHQUNoQixrQkFBa0I7O0VBRW5CO0lBQ0UsZ0JBQWdCO0lBQ2hCLGtCQUFrQjtFQUNwQjtDQUNEOztDQUVBO0VBQ0MsU0FBUztFQUNULGVBQWU7Q0FDaEI7O0NBRUE7RUFDQyxZQUFZO0VBQ1osa0JBQWtCO0NBQ25COztFQUVDO0dBQ0Msa0JBQWtCO0VBQ25COztHQUVDO0lBQ0MsYUFBYTtRQUNULGlCQUErQjtJQUNuQyxtQkFBbUI7SUFDbkI7R0FLRDs7R0FIQztFQUNDLHlCQUF1QztBQUN4Qzs7R0FHRDtJQUNDLHlCQUF1QztHQUN4Qzs7TUFFRztRQUNFO01BS0Y7O01BSEU7RUFDSCw2QkFBNkI7QUFDOUIiLCJmaWxlIjoiUmVhY3RTZWxlY3RNZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0tY29sb3ItdHVuYTogIzM3M0M0MztcbiAgLS1jb2xvci13aGl0ZTogI0ZGRjtcbiAgLS1jb2xvci1wYWxlLXNreTogIzZENzU3QjtcbiAgLS1jb2xvci1tYW5keTogI0U5NTk2QTtcbiAgLS1jb2xvci1zaGFyazogIzJEMzEzNjtcbiAgLS1jb2xvci1ibGFjazogIzAwMDtcbiAgLS1jb2xvci1zZWFzaGVsbDogI0YxRjFGMTtcbiAgLS1saW5lLWhlaWdodDogMjBweDtcbn1cblxuLmRkX193cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4uZGRfX29wZW5lZCB7XG4gIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvci10dW5hKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXR1bmEpO1xufVxuXG4uZGRfX2Rpc2FibGVkIHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvci1wYWxlLXNreSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wYWxlLXNreSk7XG59XG5cbi5kZF9fZXJyb3Ige1xuXHRib3JkZXItY29sb3I6IHZhcigtLWNvbG9yLW1hbmR5KTtcbn1cblxuXHQuZGRfX3NlbGVjdENvbnRyb2wge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBmb250LXNpemU6IDE0cHg7XG5cdFx0cGFkZGluZzogOHB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9yLXR1bmEpO1xuICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci13aGl0ZSk7XG4gICAgY29sb3I6IHZhcigtLWNvbG9yLXR1bmEpO1xuXHRcdGxpbmUtaGVpZ2h0OiB2YXIoLS1saW5lLWhlaWdodCk7XG5cdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdG92ZXJmbG93OiBoaWRkZW47XG5cblx0XHRAbmVzdCAuZGRfX2Vycm9yICYge1xuXHRcdFx0Y29sb3I6IHZhcigtLWNvbG9yLW1hbmR5KTtcblx0XHRcdHVzZXItc2VsZWN0OiBub25lO1xuXHRcdH1cblxuXHRcdEBuZXN0IC5kZF9fZGlzYWJsZWQgJiB7XG5cdFx0XHRjdXJzb3I6IGRlZmF1bHQ7XG5cdFx0fVxuXHR9XG5cblx0XHQuZGRfX3NlbGVjdGVkIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRmbGV4LWdyb3c6IDE7XG5cdFx0XHRmbGV4LXdyYXA6IHdyYXA7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuXG5cdFx0XHRAbmVzdCAuZGRfX211bHRpICYge1xuXHRcdFx0XHRtYXJnaW4tdG9wOiAtMnB4O1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdFx0LmRkX19zZWFyY2gge1xuXHRcdFx0XHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdFx0XHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0XHRcdGZsZXgtZ3JvdzogMTtcblx0XHRcdFx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHRcdG91dGxpbmU6IDA7XG4gICAgICAgIG9wYWNpdHk6IDA7XG4gICAgICAgIG1pbi1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0KTtcbiAgICAgICAgd29yZC1icmVhazogYnJlYWstd29yZDtcblxuXHRcdFx0XHRAbmVzdCAuZGRfX211bHRpICYge1xuXHRcdFx0XHRcdG1hcmdpbi10b3A6IDJweDtcblx0XHRcdFx0fVxuXG4gICAgICAgIEBuZXN0IC5kZF9fb3BlbmVkICYge1xuXHRcdFx0XHRcdG9wYWNpdHk6IDE7XG5cdFx0XHRcdH1cblx0XHRcdH1cblxuXHRcdFx0LmRkX19wbGFjZWhvbGRlciB7XG5cdFx0XHRcdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRcdFx0XHRjb2xvcjogdmFyKC0tY29sb3ItcGFsZS1za3kpO1xuXG5cdFx0XHRcdEBuZXN0IC5kZF9fbXVsdGkgJiB7XG5cdFx0XHRcdFx0bWFyZ2luLXRvcDogMnB4O1xuXHRcdFx0XHR9XG5cblx0XHRcdFx0QG5lc3QgLmRkX19lcnJvciAmIHtcblx0XHRcdFx0XHRjb2xvcjogdmFyKC0tY29sb3ItbWFuZHkpO1xuXHRcdFx0XHRcdHVzZXItc2VsZWN0OiBub25lO1xuXHRcdFx0XHR9XG5cdFx0XHR9XG5cblx0XHRcdC5kZF9fc2VsZWN0ZWRJdGVtIHtcblx0XHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdFx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cblx0XHRcdFx0QG5lc3QgLmRkX19tdWx0aSAmIHtcblx0XHRcdFx0XHRib3JkZXItY29sb3I6ICNBOUI2RDI7XG5cdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogI0UzRUFGNjtcblx0XHRcdFx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0XHRcdFx0bWFyZ2luLXRvcDogMnB4O1xuXHRcdFx0XHRcdG1hcmdpbi1yaWdodDogMnB4O1xuXHRcdFx0XHRcdHBhZGRpbmc6IDAgNHB4O1xuXHRcdFx0XHR9XG5cdFx0XHR9XG5cblx0XHRcdFx0LmRkX19jcm9zc0ljb24ge1xuXHRcdFx0XHRcdG1hcmdpbi1sZWZ0OiA1cHg7XG5cdFx0XHRcdH1cblxuXHRcdC5kZF9fZXhwYW5kSWNvbiB7XG5cdFx0XHR3aWR0aDogOXB4O1xuXHRcdFx0aGVpZ2h0OiAxNXB4O1xuICAgICAgZmxleC1zaHJpbms6IDA7XG5cdFx0XHRmaWxsOiB2YXIoLS1jb2xvci1zaGFyayk7XG5cblx0XHRcdEBuZXN0IC5kZF9fZXJyb3IgJiB7XG5cdFx0XHRcdGZpbGw6IHZhcigtLWNvbG9yLW1hbmR5KTtcblx0XHRcdH1cblx0XHR9XG5cblx0LmRkX19saXN0IHtcblx0XHRkaXNwbGF5OiBub25lO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXdoaXRlKTtcblx0XHRvdmVyZmxvdzogYXV0bztcblx0XHR6LWluZGV4OiAxO1xuXHRcdC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICBtaW4td2lkdGg6IDEwMCU7XG4gICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tY29sb3ItdHVuYSk7XG4gICAgYm9yZGVyLXJhZGl1czogM3B4O1xuICAgIGJveC1zaGFkb3c6IDAgM3B4IDdweCAwIHJnYmEodmFyKC0tY29sb3ItYmxhY2spLCAwLjA4KTtcblxuXHRcdC8qIFdpdGhvdXQgdGhpcyBwcm9wZXJ0eSwgQ2hyb21lIHJlcGFpbnRzIHRoZSBlbnRpcmUgR3JpZCBhbnkgdGltZSBhIG5ldyByb3cgb3IgY29sdW1uIGlzIGFkZGVkLlxuXHQgICAgIEZpcmVmb3ggb25seSByZXBhaW50cyB0aGUgbmV3IHJvdyBvciBjb2x1bW4gKHJlZ2FyZGxlc3Mgb2YgdGhpcyBwcm9wZXJ0eSkuXG5cdCAgICAgU2FmYXJpIGFuZCBJRSBkb24ndCBzdXBwb3J0IHRoZSBwcm9wZXJ0eSBhdCBhbGwuICovXG5cdCAgd2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblxuXHRcdEBuZXN0IC5kZF9fb3BlbmVkICYge1xuXHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cbiAgICAgICY6ZW1wdHkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXHRcdH1cblx0fVxuXG5cdC5kZF9fbGlzdFZpcnR1YWxpemVkIHtcblx0ICBvdmVyZmxvdy15OiBhdXRvO1xuXHQgIG92ZXJmbG93LXg6IGhpZGRlbjtcblxuXHRcdDpnbG9iYWwoLkdyaWRfX2lubmVyU2Nyb2xsQ29udGFpbmVyKSB7XG5cdFx0ICBvdmVyZmxvdzogaGlkZGVuO1xuXHRcdCAgcG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdH1cblx0fVxuXG5cdC5kZF9fb3BlblRvYm90dG9tIHtcblx0XHR0b3A6IDEwMCU7XG5cdFx0bWFyZ2luLXRvcDogNXB4O1xuXHR9XG5cblx0LmRkX19vcGVuVG90b3Age1xuXHRcdGJvdHRvbTogMTAwJTtcblx0XHRtYXJnaW4tYm90dG9tOiA1cHg7XG5cdH1cblxuXHRcdC5kZF9fb3B0aW9uVmlydHVhbGl6ZWQge1xuXHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdH1cblxuXHRcdFx0LmRkX19vcHRpb24ge1xuXHRcdFx0XHRwYWRkaW5nOiAxMHB4O1xuICAgICAgICBsaW5lLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQpO1xuXHRcdFx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHRcdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cblx0XHRcdFx0Jjpob3ZlciB7XG5cdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tY29sb3Itc2Vhc2hlbGwpO1xuXHRcdFx0XHR9XG5cdFx0XHR9XG5cblx0XHRcdC5kZF9fc2VsZWN0ZWRPcHRpb24ge1xuXHRcdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1zZWFzaGVsbCk7XG5cdFx0XHR9XG5cbiAgICAgIC5kZF9fb3B0aW9uRGlzYWJsZWQge1xuICAgICAgICBjdXJzb3I6IGRlZmF1bHQ7XG5cbiAgICAgICAgJjpob3ZlciB7XG5cdFx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cdFx0XHRcdH1cbiAgICAgIH1cbiJdfQ== */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9SZWFjdFNlbGVjdE1lLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXQTtFQUNFLGtCQUFrQjtBQUNwQjs7QUFFQTtFQUNFLGtCQUFrQjtFQUNsQixxQkFBK0I7RUFDL0IsY0FBd0I7QUFDMUI7O0FBRUE7RUFDRSxxQkFBbUM7RUFDbkMsY0FBNEI7QUFDOUI7O0FBRUE7RUFDRSxxQkFBZ0M7QUFDbEM7O0FBRUE7RUFDRSxvQkFBYTtFQUFiLG9CQUFhO0VBQWIsYUFBYTtFQUNiLHlCQUFtQjtNQUFuQixzQkFBbUI7VUFBbkIsbUJBQW1CO0VBQ25CLGVBQWU7RUFDZixZQUFZO0VBQ1oseUJBQW1DO0VBQ25DLGtCQUFrQjtFQUNsQixzQkFBb0M7RUFDcEMsY0FBd0I7RUFDeEIsaUJBQStCO0VBQy9CLGVBQWU7RUFDZjtBQVVGOztBQVJFO0VBQ0UsY0FBeUI7RUFDekIseUJBQWlCO0tBQWpCLHNCQUFpQjtNQUFqQixxQkFBaUI7VUFBakIsaUJBQWlCO0FBQ25COztBQUVBO0VBQ0UsZUFBZTtBQUNqQjs7QUFHRjtFQUNFLG9CQUFhO0VBQWIsb0JBQWE7RUFBYixhQUFhO0VBQ2IsbUJBQVk7TUFBWixvQkFBWTtVQUFaLFlBQVk7RUFDWixtQkFBZTtNQUFmLGVBQWU7RUFDZjtBQUtGOztBQUhFO0VBQ0UsZ0JBQWdCO0FBQ2xCOztBQUdGO0VBQ0UscUJBQXFCO0VBQ3JCLHlCQUFtQjtNQUFuQixzQkFBbUI7VUFBbkIsbUJBQW1CO0VBQ25CLG1CQUFZO01BQVosb0JBQVk7VUFBWixZQUFZO0VBQ1osNkJBQTZCO0VBQzdCLFVBQVU7RUFDVixVQUFVO0VBQ1YsZ0JBQThCO0VBQzlCO0FBU0Y7O0FBUEU7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0UsVUFBVTtBQUNaOztBQUdGO0VBQ0UsNkJBQTZCO0VBQzdCO0FBVUY7O0FBUkU7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0UsY0FBeUI7RUFDekIseUJBQWlCO0tBQWpCLHNCQUFpQjtNQUFqQixxQkFBaUI7VUFBakIsaUJBQWlCO0FBQ25COztBQUdGO0VBQ0Usb0JBQWE7RUFBYixvQkFBYTtFQUFiLGFBQWE7RUFDYjtBQVVGOztBQVJFO0VBQ0UscUJBQXFCO0VBQ3JCLHlCQUF5QjtFQUN6QixrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixjQUFjO0FBQ2hCOztBQUdGO0VBQ0UsZ0JBQWdCO0FBQ2xCOztBQUVBO0VBQ0UsVUFBVTtFQUNWLFlBQVk7RUFDWixvQkFBYztNQUFkLGNBQWM7RUFDZDtBQUtGOztBQUhFO0VBQ0UsYUFBd0I7QUFDMUI7O0FBR0Y7RUFDRSxhQUFhO0VBQ2IsNkJBQTZCO0VBQzdCLHNCQUFvQztFQUNwQyxjQUFjO0VBQ2QsVUFBVTtFQUNWLGlDQUFpQztFQUNqQyxlQUFlO0VBQ2YseUJBQW1DO0VBQ25DLGtCQUFrQjtFQUNsQixnREFBc0Q7VUFBdEQsd0NBQXNEOztFQUV0RDs7O0VBR0E7RUFDQTtBQVNGOztBQVBFO0VBQ0U7QUFLRjs7QUFIRTtFQUNFLGFBQWE7QUFDZjs7QUFJSjtFQUNFLGdCQUFnQjtFQUNoQixrQkFBa0I7O0VBRWxCO0lBQ0UsZ0JBQWdCO0lBQ2hCLGtCQUFrQjtFQUNwQjtBQUNGOztBQUVBO0VBQ0UsU0FBUztFQUNULGVBQWU7QUFDakI7O0FBRUE7RUFDRSxZQUFZO0VBQ1osa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0Usa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0UsYUFBYTtFQUNiLGlCQUErQjtFQUMvQixtQkFBbUI7RUFDbkI7QUFLRjs7QUFIRTtFQUNFLHlCQUF1QztBQUN6Qzs7QUFHRjtFQUNFLHlCQUF1QztBQUN6Qzs7QUFFQTtFQUNFO0FBS0Y7O0FBSEU7RUFDRSw2QkFBNkI7QUFDL0IiLCJmaWxlIjoiUmVhY3RTZWxlY3RNZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0tY29sb3ItdHVuYTogIzM3M2M0MztcbiAgLS1jb2xvci13aGl0ZTogI2ZmZjtcbiAgLS1jb2xvci1wYWxlLXNreTogIzZkNzU3YjtcbiAgLS1jb2xvci1tYW5keTogI2U5NTk2YTtcbiAgLS1jb2xvci1zaGFyazogIzJkMzEzNjtcbiAgLS1jb2xvci1ibGFjazogIzAwMDtcbiAgLS1jb2xvci1zZWFzaGVsbDogI2YxZjFmMTtcbiAgLS1saW5lLWhlaWdodDogMjBweDtcbn1cblxuLmRkX193cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4uZGRfX29wZW5lZCB7XG4gIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvci10dW5hKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXR1bmEpO1xufVxuXG4uZGRfX2Rpc2FibGVkIHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvci1wYWxlLXNreSk7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wYWxlLXNreSk7XG59XG5cbi5kZF9fZXJyb3Ige1xuICBib3JkZXItY29sb3I6IHZhcigtLWNvbG9yLW1hbmR5KTtcbn1cblxuLmRkX19zZWxlY3RDb250cm9sIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZm9udC1zaXplOiAxNHB4O1xuICBwYWRkaW5nOiA4cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9yLXR1bmEpO1xuICBib3JkZXItcmFkaXVzOiAzcHg7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXdoaXRlKTtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXR1bmEpO1xuICBsaW5lLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQpO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgQG5lc3QgLmRkX19lcnJvciAmIHtcbiAgICBjb2xvcjogdmFyKC0tY29sb3ItbWFuZHkpO1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICB9XG5cbiAgQG5lc3QgLmRkX19kaXNhYmxlZCAmIHtcbiAgICBjdXJzb3I6IGRlZmF1bHQ7XG4gIH1cbn1cblxuLmRkX19zZWxlY3RlZCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIEBuZXN0IC5kZF9fbXVsdGkgJiB7XG4gICAgbWFyZ2luLXRvcDogLTJweDtcbiAgfVxufVxuXG4uZGRfX3NlYXJjaCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1ncm93OiAxO1xuICBib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgb3V0bGluZTogMDtcbiAgb3BhY2l0eTogMDtcbiAgbWluLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQpO1xuICB3b3JkLWJyZWFrOiBicmVhay13b3JkO1xuXG4gIEBuZXN0IC5kZF9fbXVsdGkgJiB7XG4gICAgbWFyZ2luLXRvcDogMnB4O1xuICB9XG5cbiAgQG5lc3QgLmRkX19vcGVuZWQgJiB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxufVxuXG4uZGRfX3BsYWNlaG9sZGVyIHtcbiAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wYWxlLXNreSk7XG5cbiAgQG5lc3QgLmRkX19tdWx0aSAmIHtcbiAgICBtYXJnaW4tdG9wOiAycHg7XG4gIH1cblxuICBAbmVzdCAuZGRfX2Vycm9yICYge1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci1tYW5keSk7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIH1cbn1cblxuLmRkX19zZWxlY3RlZEl0ZW0ge1xuICBkaXNwbGF5OiBmbGV4O1xuICBib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblxuICBAbmVzdCAuZGRfX211bHRpICYge1xuICAgIGJvcmRlci1jb2xvcjogI2E5YjZkMjtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTNlYWY2O1xuICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICBtYXJnaW4tdG9wOiAycHg7XG4gICAgbWFyZ2luLXJpZ2h0OiAycHg7XG4gICAgcGFkZGluZzogMCA0cHg7XG4gIH1cbn1cblxuLmRkX19jcm9zc0ljb24ge1xuICBtYXJnaW4tbGVmdDogNXB4O1xufVxuXG4uZGRfX2V4cGFuZEljb24ge1xuICB3aWR0aDogOXB4O1xuICBoZWlnaHQ6IDE1cHg7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmaWxsOiB2YXIoLS1jb2xvci1zaGFyayk7XG5cbiAgQG5lc3QgLmRkX19lcnJvciAmIHtcbiAgICBmaWxsOiB2YXIoLS1jb2xvci1tYW5keSk7XG4gIH1cbn1cblxuLmRkX19saXN0IHtcbiAgZGlzcGxheTogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXdoaXRlKTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHotaW5kZXg6IDE7XG4gIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgbWluLXdpZHRoOiAxMDAlO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1jb2xvci10dW5hKTtcbiAgYm9yZGVyLXJhZGl1czogM3B4O1xuICBib3gtc2hhZG93OiAwIDNweCA3cHggMCByZ2JhKHZhcigtLWNvbG9yLWJsYWNrKSwgMC4wOCk7XG5cbiAgLyogV2l0aG91dCB0aGlzIHByb3BlcnR5LCBDaHJvbWUgcmVwYWludHMgdGhlIGVudGlyZSBHcmlkIGFueSB0aW1lIGEgbmV3IHJvdyBvciBjb2x1bW4gaXMgYWRkZWQuXG5cdEZpcmVmb3ggb25seSByZXBhaW50cyB0aGUgbmV3IHJvdyBvciBjb2x1bW4gKHJlZ2FyZGxlc3Mgb2YgdGhpcyBwcm9wZXJ0eSkuXG5cdFNhZmFyaSBhbmQgSUUgZG9uJ3Qgc3VwcG9ydCB0aGUgcHJvcGVydHkgYXQgYWxsLiBcblx0Ki9cbiAgd2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcblxuICBAbmVzdCAuZGRfX29wZW5lZCAmIHtcbiAgICBkaXNwbGF5OiBibG9jaztcblxuICAgICY6ZW1wdHkge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbn1cblxuLmRkX19saXN0VmlydHVhbGl6ZWQge1xuICBvdmVyZmxvdy15OiBhdXRvO1xuICBvdmVyZmxvdy14OiBoaWRkZW47XG5cbiAgOmdsb2JhbCguR3JpZF9faW5uZXJTY3JvbGxDb250YWluZXIpIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxufVxuXG4uZGRfX29wZW5Ub2JvdHRvbSB7XG4gIHRvcDogMTAwJTtcbiAgbWFyZ2luLXRvcDogNXB4O1xufVxuXG4uZGRfX29wZW5Ub3RvcCB7XG4gIGJvdHRvbTogMTAwJTtcbiAgbWFyZ2luLWJvdHRvbTogNXB4O1xufVxuXG4uZGRfX29wdGlvblZpcnR1YWxpemVkIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xufVxuXG4uZGRfX29wdGlvbiB7XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGxpbmUtaGVpZ2h0OiB2YXIoLS1saW5lLWhlaWdodCk7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1zZWFzaGVsbCk7XG4gIH1cbn1cblxuLmRkX19zZWxlY3RlZE9wdGlvbiB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9yLXNlYXNoZWxsKTtcbn1cblxuLmRkX19vcHRpb25EaXNhYmxlZCB7XG4gIGN1cnNvcjogZGVmYXVsdDtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgfVxufVxuIl19 */ \ No newline at end of file diff --git a/lib/ReactSelectMe.js b/lib/ReactSelectMe.js index 091b632..b062bc9 100644 --- a/lib/ReactSelectMe.js +++ b/lib/ReactSelectMe.js @@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); @@ -46,10 +48,11 @@ var ReactSelectMe = function (_PureComponent) { var _this$props = _this.props, isOpened = _this$props.isOpened, beforeClose = _this$props.beforeClose; + var opened = _this.state.opened; // @maslianok: when you decide to change this, please, keep in mind, that this case should work: // Open A -> Open B -> A should be closed - if (_this.skipPropagation || !_this.state.opened) { + if (_this.skipPropagation || !opened) { _this.skipPropagation = undefined; return; } @@ -119,9 +122,10 @@ var ReactSelectMe = function (_PureComponent) { virtualized = _this$props3.virtualized, s = _this$props3.s, renderVirtualizedList = _this$props3.renderVirtualizedList; + var opened = _this.state.opened; - if (!_this.state.opened) { + if (!opened) { return undefined; } @@ -723,15 +727,6 @@ var ReactSelectMe = function (_PureComponent) { value: function componentDidMount() { document.addEventListener('click', this.closeGlobal); } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate() { - if (this.props.isOpened !== undefined && this.state.opened !== this.props.isOpened) { - this.setState({ - opened: this.props.isOpened - }); - } - } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { @@ -749,10 +744,12 @@ var ReactSelectMe = function (_PureComponent) { console.warn(msg); // eslint-disable-line no-console } } + /** ************************************** ************** Renderers ***************** **************************************** */ + /** ************************************** *************** Getters ****************** **************************************** */ @@ -765,6 +762,7 @@ var ReactSelectMe = function (_PureComponent) { }, { key: 'render', + /** ************************************** **************** Render ****************** **************************************** */ @@ -808,6 +806,20 @@ var ReactSelectMe = function (_PureComponent) { this.renderList() ); } + }], [{ + key: 'getDerivedStateFromProps', + value: function getDerivedStateFromProps(_ref3, state) { + var isOpened = _ref3.isOpened; + var opened = state.opened; + + if (isOpened !== undefined && opened !== isOpened) { + return _extends({}, state, { + opened: isOpened + }); + } + + return state; + } }]); return ReactSelectMe; diff --git a/lib/hoc/makeImmutable.js b/lib/hoc/makeImmutable.js index e947e75..3e9671e 100644 --- a/lib/hoc/makeImmutable.js +++ b/lib/hoc/makeImmutable.js @@ -45,6 +45,7 @@ var makeImmutable = function makeImmutable(ReactSelectMe) { _createClass(ReactSelectMeHOC, [{ key: 'render', value: function render() { + // eslint-disable-next-line react/jsx-props-no-spreading return _react2.default.createElement(ReactSelectMe, _extends({}, this.props, { toImmutable: this.toImmutable, immutable: true })); } }]); diff --git a/lib/hoc/makeVirtualized.js b/lib/hoc/makeVirtualized.js index 98c357d..5b01ce6 100644 --- a/lib/hoc/makeVirtualized.js +++ b/lib/hoc/makeVirtualized.js @@ -72,6 +72,7 @@ var makeVirtualized = function makeVirtualized(ReactSelectMe) { _createClass(ReactSelectMeHOC, [{ key: 'render', value: function render() { + // eslint-disable-next-line react/jsx-props-no-spreading return _react2.default.createElement(ReactSelectMe, _extends({}, this.props, { renderVirtualizedList: this.renderVirtualizedList, virtualized: true })); } }]); diff --git a/package.json b/package.json index 84b42ad..1393220 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "babel-eslint": "^10.1.0", "babel-plugin-transform-class-properties": "6.24.1", "babel-plugin-transform-object-assign": "^6.5.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "eslint": "^7.1.0", @@ -49,7 +50,7 @@ }, "scripts": { "build": "npm run build:js && npm run build:css", - "build:js": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib", + "build:js": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties,transform-object-rest-spread src --out-dir lib", "build:css": "postcss -u postcss-cssnext --postcss-cssnext.browsers \"last 2 versions\" -d lib src/ReactSelectMe.css", "clean": "rimraf lib", "lint": "eslint -c .eslintrc src", diff --git a/src/ReactSelectMe.css b/src/ReactSelectMe.css index 7516975..6c06271 100644 --- a/src/ReactSelectMe.css +++ b/src/ReactSelectMe.css @@ -1,11 +1,11 @@ :root { - --color-tuna: #373C43; - --color-white: #FFF; - --color-pale-sky: #6D757B; - --color-mandy: #E9596A; - --color-shark: #2D3136; + --color-tuna: #373c43; + --color-white: #fff; + --color-pale-sky: #6d757b; + --color-mandy: #e9596a; + --color-shark: #2d3136; --color-black: #000; - --color-seashell: #F1F1F1; + --color-seashell: #f1f1f1; --line-height: 20px; } @@ -25,174 +25,175 @@ } .dd__error { - border-color: var(--color-mandy); -} - - .dd__selectControl { - display: flex; - align-items: center; - font-size: 14px; - padding: 8px; - border: 1px solid var(--color-tuna); - border-radius: 3px; - background-color: var(--color-white); - color: var(--color-tuna); - line-height: var(--line-height); - cursor: pointer; - overflow: hidden; - - @nest .dd__error & { - color: var(--color-mandy); - user-select: none; - } - - @nest .dd__disabled & { - cursor: default; - } - } - - .dd__selected { - display: flex; - flex-grow: 1; - flex-wrap: wrap; - overflow: hidden; - - @nest .dd__multi & { - margin-top: -2px; - } - } - - .dd__search { - display: inline-block; - align-items: center; - flex-grow: 1; - border: 1px solid transparent; - outline: 0; - opacity: 0; - min-height: var(--line-height); - word-break: break-word; - - @nest .dd__multi & { - margin-top: 2px; - } - - @nest .dd__opened & { - opacity: 1; - } - } - - .dd__placeholder { - border: 1px solid transparent; - color: var(--color-pale-sky); - - @nest .dd__multi & { - margin-top: 2px; - } - - @nest .dd__error & { - color: var(--color-mandy); - user-select: none; - } - } - - .dd__selectedItem { - display: flex; - border: 1px solid transparent; - - @nest .dd__multi & { - border-color: #A9B6D2; - background-color: #E3EAF6; - border-radius: 2px; - margin-top: 2px; - margin-right: 2px; - padding: 0 4px; - } - } - - .dd__crossIcon { - margin-left: 5px; - } - - .dd__expandIcon { - width: 9px; - height: 15px; - flex-shrink: 0; - fill: var(--color-shark); - - @nest .dd__error & { - fill: var(--color-mandy); - } - } - - .dd__list { - display: none; - position: absolute !important; - background-color: var(--color-white); - overflow: auto; - z-index: 1; - -webkit-overflow-scrolling: touch; - min-width: 100%; - border: 1px solid var(--color-tuna); - border-radius: 3px; - box-shadow: 0 3px 7px 0 rgba(var(--color-black), 0.08); - - /* Without this property, Chrome repaints the entire Grid any time a new row or column is added. - Firefox only repaints the new row or column (regardless of this property). - Safari and IE don't support the property at all. */ - will-change: transform; - - @nest .dd__opened & { - display: block; - - &:empty { - display: none; - } - } - } - - .dd__listVirtualized { - overflow-y: auto; - overflow-x: hidden; - - :global(.Grid__innerScrollContainer) { - overflow: hidden; - position: relative; - } - } - - .dd__openTobottom { - top: 100%; - margin-top: 5px; - } - - .dd__openTotop { - bottom: 100%; - margin-bottom: 5px; - } - - .dd__optionVirtualized { - position: absolute; - } - - .dd__option { - padding: 10px; - line-height: var(--line-height); - white-space: nowrap; - cursor: pointer; - - &:hover { - background-color: var(--color-seashell); - } - } - - .dd__selectedOption { - background-color: var(--color-seashell); - } - - .dd__optionDisabled { - cursor: default; - - &:hover { - background-color: transparent; - } - } + border-color: var(--color-mandy); +} + +.dd__selectControl { + display: flex; + align-items: center; + font-size: 14px; + padding: 8px; + border: 1px solid var(--color-tuna); + border-radius: 3px; + background-color: var(--color-white); + color: var(--color-tuna); + line-height: var(--line-height); + cursor: pointer; + overflow: hidden; + + @nest .dd__error & { + color: var(--color-mandy); + user-select: none; + } + + @nest .dd__disabled & { + cursor: default; + } +} + +.dd__selected { + display: flex; + flex-grow: 1; + flex-wrap: wrap; + overflow: hidden; + + @nest .dd__multi & { + margin-top: -2px; + } +} + +.dd__search { + display: inline-block; + align-items: center; + flex-grow: 1; + border: 1px solid transparent; + outline: 0; + opacity: 0; + min-height: var(--line-height); + word-break: break-word; + + @nest .dd__multi & { + margin-top: 2px; + } + + @nest .dd__opened & { + opacity: 1; + } +} + +.dd__placeholder { + border: 1px solid transparent; + color: var(--color-pale-sky); + + @nest .dd__multi & { + margin-top: 2px; + } + + @nest .dd__error & { + color: var(--color-mandy); + user-select: none; + } +} + +.dd__selectedItem { + display: flex; + border: 1px solid transparent; + + @nest .dd__multi & { + border-color: #a9b6d2; + background-color: #e3eaf6; + border-radius: 2px; + margin-top: 2px; + margin-right: 2px; + padding: 0 4px; + } +} + +.dd__crossIcon { + margin-left: 5px; +} + +.dd__expandIcon { + width: 9px; + height: 15px; + flex-shrink: 0; + fill: var(--color-shark); + + @nest .dd__error & { + fill: var(--color-mandy); + } +} + +.dd__list { + display: none; + position: absolute !important; + background-color: var(--color-white); + overflow: auto; + z-index: 1; + -webkit-overflow-scrolling: touch; + min-width: 100%; + border: 1px solid var(--color-tuna); + border-radius: 3px; + box-shadow: 0 3px 7px 0 rgba(var(--color-black), 0.08); + + /* Without this property, Chrome repaints the entire Grid any time a new row or column is added. + Firefox only repaints the new row or column (regardless of this property). + Safari and IE don't support the property at all. + */ + will-change: transform; + + @nest .dd__opened & { + display: block; + + &:empty { + display: none; + } + } +} + +.dd__listVirtualized { + overflow-y: auto; + overflow-x: hidden; + + :global(.Grid__innerScrollContainer) { + overflow: hidden; + position: relative; + } +} + +.dd__openTobottom { + top: 100%; + margin-top: 5px; +} + +.dd__openTotop { + bottom: 100%; + margin-bottom: 5px; +} + +.dd__optionVirtualized { + position: absolute; +} + +.dd__option { + padding: 10px; + line-height: var(--line-height); + white-space: nowrap; + cursor: pointer; + + &:hover { + background-color: var(--color-seashell); + } +} + +.dd__selectedOption { + background-color: var(--color-seashell); +} + +.dd__optionDisabled { + cursor: default; + + &:hover { + background-color: transparent; + } +} diff --git a/src/ReactSelectMe.js b/src/ReactSelectMe.js index 78017c1..d19b660 100644 --- a/src/ReactSelectMe.js +++ b/src/ReactSelectMe.js @@ -29,12 +29,16 @@ export default class ReactSelectMe extends PureComponent { document.addEventListener('click', this.closeGlobal); } - componentDidUpdate() { - if (this.props.isOpened !== undefined && this.state.opened !== this.props.isOpened) { - this.setState({ - opened: this.props.isOpened, - }); + static getDerivedStateFromProps({ isOpened }, state) { + const { opened } = state; + if (isOpened !== undefined && opened !== isOpened) { + return { + ...state, + opened: isOpened, + }; } + + return state; } componentWillUnmount() { @@ -50,11 +54,12 @@ export default class ReactSelectMe extends PureComponent { } } - closeGlobal = e => { + closeGlobal = (e) => { const { isOpened, beforeClose } = this.props; + const { opened } = this.state; // @maslianok: when you decide to change this, please, keep in mind, that this case should work: // Open A -> Open B -> A should be closed - if (this.skipPropagation || !this.state.opened) { + if (this.skipPropagation || !opened) { this.skipPropagation = undefined; return; } @@ -68,7 +73,7 @@ export default class ReactSelectMe extends PureComponent { this.skipPropagation = true; }; - validateDataStructure = data => { + validateDataStructure = (data) => { const { toImmutable } = this.props; return typeof toImmutable === 'function' ? toImmutable(data) : data; }; @@ -78,7 +83,7 @@ export default class ReactSelectMe extends PureComponent { // search for this option in the `options` array const value = typeof selectedOption === 'object' ? selectedOption[valueKey] : selectedOption; - const option = options.find(o => this.getProp(o, valueKey) === value); + const option = options.find((o) => this.getProp(o, valueKey) === value); if (option || forbidPhantomSelection) { return option; @@ -90,7 +95,7 @@ export default class ReactSelectMe extends PureComponent { : this.validateDataStructure({ [valueKey]: selectedOption, [labelKey]: selectedOption }); }; - setSearchValue = value => { + setSearchValue = (value) => { const { onSearch } = this.props; this.setState({ search: value, @@ -105,13 +110,15 @@ export default class ReactSelectMe extends PureComponent { onSearch(value); } }; + /** ************************************** ************** Renderers ***************** **************************************** */ renderList = () => { const { addNewItem, searchable, listRenderer, virtualized, s, renderVirtualizedList } = this.props; + const { opened } = this.state; - if (!this.state.opened) { + if (!opened) { return undefined; } @@ -142,7 +149,7 @@ export default class ReactSelectMe extends PureComponent { } let listContent; if (rowCount) { - listContent = options.map(option => this.renderOption(option, selectedOptions)); + listContent = options.map((option) => this.renderOption(option, selectedOptions)); } else { listContent = addNewItem && searchable && this.getSearchString() ? this.renderAddNewItem() : this.renderNoItemsFound(); @@ -158,7 +165,7 @@ export default class ReactSelectMe extends PureComponent { renderOption = (option, selectedOptions, style) => { const { valueKey, labelKey, optionRenderer, s } = this.props; const isSelected = selectedOptions.some( - selected => this.getProp(selected, valueKey) === this.getProp(option, valueKey), + (selected) => this.getProp(selected, valueKey) === this.getProp(option, valueKey), ); const className = cs('dd__option', s.dd__option, { dd__selectedOption: isSelected, @@ -195,7 +202,7 @@ export default class ReactSelectMe extends PureComponent { let selectedElements; if (!noOptionsSelected && (multiple || !searchable || !opened)) { - selectedElements = selectedOptions.map(option => valueRenderer(option, this.onChange)); + selectedElements = selectedOptions.map((option) => valueRenderer(option, this.onChange)); } return ( @@ -227,14 +234,14 @@ export default class ReactSelectMe extends PureComponent { onClick={this.onSearch} onPaste={this.onSearch} onKeyUp={this.onSearch} - ref={e => { + ref={(e) => { this.searchInput = e; }} /> ); }; - renderSelectedItem = option => { + renderSelectedItem = (option) => { const { valueKey, labelKey, multiple, s } = this.props; const selectedOptionClasses = cs('dd__selectedItem', s.dd__selectedItem); const crossIconClasses = cs('dd__crossIcon', s.dd__crossIcon); @@ -306,6 +313,7 @@ export default class ReactSelectMe extends PureComponent { ); }; + /** ************************************** *************** Getters ****************** **************************************** */ @@ -314,7 +322,7 @@ export default class ReactSelectMe extends PureComponent { return immutable ? option.get(key) : option[key]; }; - getCount = items => { + getCount = (items) => { const { immutable } = this.props; if (!items) { return false; @@ -331,7 +339,7 @@ export default class ReactSelectMe extends PureComponent { } // options are strings or numbers - return options.map(option => this.validateDataStructure({ [labelKey]: option, [valueKey]: option })); + return options.map((option) => this.validateDataStructure({ [labelKey]: option, [valueKey]: option })); } // no options @@ -347,10 +355,10 @@ export default class ReactSelectMe extends PureComponent { } const patchedOptions = multiple - ? value.map(v => this.patchSelectedOption(v, options)) + ? value.map((v) => this.patchSelectedOption(v, options)) : [this.patchSelectedOption(value, options)]; - return this.validateDataStructure(patchedOptions.filter(option => !!option)); + return this.validateDataStructure(patchedOptions.filter((option) => !!option)); }; getListProps = () => { @@ -442,7 +450,7 @@ export default class ReactSelectMe extends PureComponent { if (multiple) { // prepare values for multiselect const values = this.getSelectedOptions(); - const selectedIndex = values.findIndex(v => this.getProp(v, valueKey) === this.getProp(option, valueKey)); + const selectedIndex = values.findIndex((v) => this.getProp(v, valueKey) === this.getProp(option, valueKey)); if (selectedIndex === -1) { // add new option to selected values selectedValue = immutable ? values.push(option) : [...values, option]; @@ -463,17 +471,20 @@ export default class ReactSelectMe extends PureComponent { } }; - onRemoveSelected = option => e => { + onRemoveSelected = (option) => (e) => { this.skipEventPropagation(); this.onChange(option, true)(e); }; - onToggle = e => { + onToggle = (e) => { if (this.skipPropagation) { return; } - const { props: { searchable, beforeOpen, beforeClose, isOpened, disabled }, state: { opened } } = this; + const { + props: { searchable, beforeOpen, beforeClose, isOpened, disabled }, + state: { opened }, + } = this; const nextState = isOpened !== undefined ? isOpened : !opened; const beforeFunc = nextState ? beforeOpen : beforeClose; @@ -493,7 +504,7 @@ export default class ReactSelectMe extends PureComponent { } }; - onSearch = evt => { + onSearch = (evt) => { // `document.documentMode` isn't undefined in IE only. // See more https://msdn.microsoft.com/library/cc196988(v=vs.85).aspx if (!this.searchInput || (evt.type === 'keyup' && !document.documentMode)) { @@ -572,7 +583,7 @@ export default class ReactSelectMe extends PureComponent { } }; - onAddNewItem = params => { + onAddNewItem = (params) => { const { onAddNewItem } = this.props; if (typeof onAddNewItem === 'function') { onAddNewItem(this.getSearchString(), this.getSelectedOptions(), params); @@ -598,6 +609,7 @@ export default class ReactSelectMe extends PureComponent { onClose(); } }; + /** ************************************** **************** Render ****************** **************************************** */ @@ -624,7 +636,7 @@ export default class ReactSelectMe extends PureComponent {
{ + ref={(el) => { this.el = el; }} > diff --git a/src/hoc/makeImmutable.js b/src/hoc/makeImmutable.js index 080d50c..dcf235e 100644 --- a/src/hoc/makeImmutable.js +++ b/src/hoc/makeImmutable.js @@ -1,10 +1,12 @@ import React, { Component } from 'react'; import { fromJS } from 'immutable'; -const makeImmutable = ReactSelectMe => +const makeImmutable = (ReactSelectMe) => class ReactSelectMeHOC extends Component { - toImmutable = data => fromJS(data); + toImmutable = (data) => fromJS(data); + render() { + // eslint-disable-next-line react/jsx-props-no-spreading return ; } }; diff --git a/src/hoc/makeVirtualized.js b/src/hoc/makeVirtualized.js index cc777f4..b8485df 100644 --- a/src/hoc/makeVirtualized.js +++ b/src/hoc/makeVirtualized.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; import List from 'react-virtualized/dist/commonjs/List'; -const makeVirtualized = ReactSelectMe => +const makeVirtualized = (ReactSelectMe) => class ReactSelectMeHOC extends Component { renderVirtualizedList = ({ rowRenderer, @@ -26,7 +26,9 @@ const makeVirtualized = ReactSelectMe => )} ); + render() { + // eslint-disable-next-line react/jsx-props-no-spreading return ; } }; diff --git a/yarn.lock b/yarn.lock index 31a0d27..a5c4ac7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -533,6 +533,11 @@ babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= +babel-plugin-syntax-object-rest-spread@^6.8.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" + integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U= + babel-plugin-transform-class-properties@6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac" @@ -748,6 +753,14 @@ babel-plugin-transform-object-assign@^6.5.0: dependencies: babel-runtime "^6.22.0" +babel-plugin-transform-object-rest-spread@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" + integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY= + dependencies: + babel-plugin-syntax-object-rest-spread "^6.8.0" + babel-runtime "^6.26.0" + babel-plugin-transform-react-display-name@^6.23.0: version "6.25.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"