diff --git a/package.json b/package.json index 9f764b5f..b67e8a8d 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "react-router-dom": "^4.2.2", "react-router-redux": "next", "react-scale-text": "^1.2.2", - "react-select": "^1.2.1", + "react-select": "1.2.1", "react-transition-group": "^2.2.1", "redux": "4.0.0", "redux-logger": "^3.0.6", diff --git a/src/js/components/Select/index.js b/src/js/components/Select/index.js new file mode 100644 index 00000000..589b184e --- /dev/null +++ b/src/js/components/Select/index.js @@ -0,0 +1,432 @@ +import React from 'react'; +import Select from 'react-select'; +import styled from 'styled-components'; + +const SelectWrapper = styled(Select)` + .Select { + position: relative; + } + .Select input::-webkit-contacts-auto-fill-button, + .Select input::-webkit-credentials-auto-fill-button { + display: none !important; + } + .Select input::-ms-clear { + display: none !important; + } + .Select input::-ms-reveal { + display: none !important; + } + .Select, + .Select div, + .Select input, + .Select span { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .Select.is-disabled .Select-arrow-zone { + cursor: default; + pointer-events: none; + opacity: 0.35; + } + .Select.is-disabled > .Select-control { + background-color: #f9f9f9; + } + .Select.is-disabled > .Select-control:hover { + box-shadow: none; + } + .Select.is-open > .Select-control { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + background: #fff; + border-color: #b3b3b3 #ccc #d9d9d9; + } + .Select.is-open > .Select-control .Select-arrow { + top: -2px; + border-color: transparent transparent #999; + border-width: 0 5px 5px; + } + .Select.is-searchable.is-open > .Select-control { + cursor: text; + } + .Select.is-searchable.is-focused:not(.is-open) > .Select-control { + cursor: text; + } + .Select.is-focused > .Select-control { + background: #fff; + } + .Select.is-focused:not(.is-open) > .Select-control { + border-color: #007eff; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1); + background: #fff; + } + .Select.has-value.is-clearable.Select--single > .Select-control .Select-value { + padding-right: 42px; + } + .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, + .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { + color: #333; + } + .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label, + .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { + cursor: pointer; + text-decoration: none; + } + .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, + .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, + .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, + .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { + color: #007eff; + outline: none; + text-decoration: underline; + } + .Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, + .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { + background: #fff; + } + .Select.has-value.is-pseudo-focused .Select-input { + opacity: 0; + } + .Select.is-open .Select-arrow, + .Select .Select-arrow-zone:hover > .Select-arrow { + border-top-color: #666; + } + .Select.Select--rtl { + direction: rtl; + text-align: right; + } + .Select-control { + background-color: #fff; + border-color: #d9d9d9 #ccc #b3b3b3; + border-radius: 4px; + border: 1px solid #ccc; + color: #333; + cursor: default; + display: table; + border-spacing: 0; + border-collapse: separate; + height: 36px; + outline: none; + overflow: hidden; + position: relative; + width: 100%; + } + .Select-control:hover { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + } + .Select-control .Select-input:focus { + outline: none; + background: #fff; + } + .Select-placeholder, + .Select--single > .Select-control .Select-value { + bottom: 0; + color: #aaa; + left: 0; + line-height: 34px; + padding-left: 10px; + padding-right: 10px; + position: absolute; + right: 0; + top: 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .Select-input { + height: 34px; + padding-left: 10px; + padding-right: 10px; + vertical-align: middle; + } + .Select-input > input { + width: 100%; + background: none transparent; + border: 0 none; + box-shadow: none; + cursor: default; + display: inline-block; + font-family: inherit; + font-size: inherit; + margin: 0; + outline: none; + line-height: 17px; + /* For IE 8 compatibility */ + padding: 8px 0 12px; + /* For IE 8 compatibility */ + -webkit-appearance: none; + } + .is-focused .Select-input > input { + cursor: text; + } + .has-value.is-pseudo-focused .Select-input { + opacity: 0; + } + .Select-control:not(.is-searchable) > .Select-input { + outline: none; + } + .Select-loading-zone { + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 16px; + } + .Select-loading { + -webkit-animation: Select-animation-spin 400ms infinite linear; + -o-animation: Select-animation-spin 400ms infinite linear; + animation: Select-animation-spin 400ms infinite linear; + width: 16px; + height: 16px; + box-sizing: border-box; + border-radius: 50%; + border: 2px solid #ccc; + border-right-color: #333; + display: inline-block; + position: relative; + vertical-align: middle; + } + .Select-clear-zone { + -webkit-animation: Select-animation-fadeIn 200ms; + -o-animation: Select-animation-fadeIn 200ms; + animation: Select-animation-fadeIn 200ms; + color: #999; + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 17px; + } + .Select-clear-zone:hover { + color: #D0021B; + } + .Select-clear { + display: inline-block; + font-size: 18px; + line-height: 1; + } + .Select--multi .Select-clear-zone { + width: 17px; + } + .Select-arrow-zone { + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 25px; + padding-right: 5px; + } + .Select--rtl .Select-arrow-zone { + padding-right: 0; + padding-left: 5px; + } + .Select-arrow { + border-color: #999 transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + display: inline-block; + height: 0; + width: 0; + position: relative; + } + .Select-control > *:last-child { + padding-right: 5px; + } + .Select--multi .Select-multi-value-wrapper { + display: inline-block; + } + .Select .Select-aria-only { + position: absolute; + display: inline-block; + height: 1px; + width: 1px; + margin: -1px; + clip: rect(0, 0, 0, 0); + overflow: hidden; + float: left; + } + @-webkit-keyframes Select-animation-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + @keyframes Select-animation-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + .Select-menu-outer { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + background-color: #fff; + border: 1px solid #ccc; + border-top-color: #e6e6e6; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-sizing: border-box; + margin-top: -1px; + max-height: 200px; + position: absolute; + left: 0; + top: 100%; + width: 100%; + z-index: 1; + -webkit-overflow-scrolling: touch; + } + .Select-menu { + max-height: 198px; + overflow-y: auto; + } + .Select-option { + box-sizing: border-box; + background-color: #fff; + color: #666666; + cursor: pointer; + display: block; + padding: 8px 10px; + } + .Select-option:last-child { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + } + .Select-option.is-selected { + background-color: #f5faff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.04); + color: #333; + } + .Select-option.is-focused { + background-color: #ebf5ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.08); + color: #333; + } + .Select-option.is-disabled { + color: #cccccc; + cursor: default; + } + .Select-noresults { + box-sizing: border-box; + color: #999999; + cursor: default; + display: block; + padding: 8px 10px; + } + .Select--multi .Select-input { + vertical-align: middle; + margin-left: 10px; + padding: 0; + } + .Select--multi.Select--rtl .Select-input { + margin-left: 0; + margin-right: 10px; + } + .Select--multi.has-value .Select-input { + margin-left: 5px; + } + .Select--multi .Select-value { + background-color: #ebf5ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.08); + border-radius: 2px; + border: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border: 1px solid rgba(0, 126, 255, 0.24); + color: #007eff; + display: inline-block; + font-size: 0.9em; + line-height: 1.4; + margin-left: 5px; + margin-top: 5px; + vertical-align: top; + } + .Select--multi .Select-value-icon, + .Select--multi .Select-value-label { + display: inline-block; + vertical-align: middle; + } + .Select--multi .Select-value-label { + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; + cursor: default; + padding: 2px 5px; + } + .Select--multi a.Select-value-label { + color: #007eff; + cursor: pointer; + text-decoration: none; + } + .Select--multi a.Select-value-label:hover { + text-decoration: underline; + } + .Select--multi .Select-value-icon { + cursor: pointer; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + border-right: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border-right: 1px solid rgba(0, 126, 255, 0.24); + padding: 1px 5px 3px; + } + .Select--multi .Select-value-icon:hover, + .Select--multi .Select-value-icon:focus { + background-color: #d8eafd; + /* Fallback color for IE 8 */ + background-color: rgba(0, 113, 230, 0.08); + color: #0071e6; + } + .Select--multi .Select-value-icon:active { + background-color: #c2e0ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.24); + } + .Select--multi.Select--rtl .Select-value { + margin-left: 0; + margin-right: 5px; + } + .Select--multi.Select--rtl .Select-value-icon { + border-right: none; + border-left: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border-left: 1px solid rgba(0, 126, 255, 0.24); + } + .Select--multi.is-disabled .Select-value { + background-color: #fcfcfc; + border: 1px solid #e3e3e3; + color: #333; + } + .Select--multi.is-disabled .Select-value-icon { + cursor: not-allowed; + border-right: 1px solid #e3e3e3; + } + .Select--multi.is-disabled .Select-value-icon:hover, + .Select--multi.is-disabled .Select-value-icon:focus, + .Select--multi.is-disabled .Select-value-icon:active { + background-color: #fcfcfc; + } + @keyframes Select-animation-spin { + to { + transform: rotate(1turn); + } + } + @-webkit-keyframes Select-animation-spin { + to { + -webkit-transform: rotate(1turn); + } + } +`; + +const wrapper2 = styled(Select)` + @import "~react-select/dist/react-select.css"; +`; + +export default wrapper2; diff --git a/yarn.lock b/yarn.lock index 3076e96f..9bfc6fc7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2187,7 +2187,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.4, classnames@^2.2.5: +classnames@^2.2.4: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + +classnames@^2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" @@ -7919,7 +7923,7 @@ react-scale-text@^1.2.2: shortid "^2.2.8" warning "^3.0.0" -react-select@^1.2.1: +react-select@1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1" dependencies: