diff --git a/src/components/Proxy.js b/src/components/Proxy.js index 0a7421f..d1959d0 100644 --- a/src/components/Proxy.js +++ b/src/components/Proxy.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import cx from 'classnames'; import { useStoreState } from 'm/store'; import Icon from 'c/Icon'; @@ -49,18 +48,15 @@ const mapStateToProps = s => { }; }; -function Proxy({ now, name, isSelectable }) { +function Proxy({ now, name }) { const { proxies, delay } = useStoreState(mapStateToProps); const latency = delay[name]; const proxy = proxies[name]; const color = now ? colors[proxy.type] : '#555'; const iconId = icons[proxy.type]; - const proxyClassName = cx(s0.proxy, { - [s0.proxyNotSelectable]: !isSelectable - }); return ( -
+
@@ -73,8 +69,7 @@ function Proxy({ now, name, isSelectable }) { } Proxy.propTypes = { now: PropTypes.bool, - name: PropTypes.string, - isSelectable: PropTypes.bool + name: PropTypes.string }; export default Proxy; diff --git a/src/components/Proxy.module.scss b/src/components/Proxy.module.scss index a0389e1..b7f0c8b 100644 --- a/src/components/Proxy.module.scss +++ b/src/components/Proxy.module.scss @@ -1,27 +1,5 @@ .proxy { display: flex; - cursor: pointer; - - svg { - transition: transform 0.4s ease, color 0.4s ease; - } - &:hover { - svg { - transform: scale(1.1); - color: #aaa; - } - } -} - -.proxyNotSelectable { - // cursor: not-allowed; - cursor: auto; - &:hover { - svg { - transform: initial; - color: currentcolor; - } - } } .left { diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js index e4ac8ac..35eb660 100644 --- a/src/components/ProxyGroup.js +++ b/src/components/ProxyGroup.js @@ -1,5 +1,6 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; +import cx from 'classnames'; import { useActions, useStoreState } from 'm/store'; import Proxy from 'c/Proxy'; @@ -43,9 +44,12 @@ export default function ProxyGroup2({ name }) {
{list.map(proxyName => { const isSelectable = group.type === 'Selector'; + const proxyClassName = cx(s0.proxy, { + [s0.proxySelectable]: isSelectable + }); return (
{ if (!isSelectable) return; diff --git a/src/components/ProxyGroup.module.scss b/src/components/ProxyGroup.module.scss index 43cbdaa..017f785 100644 --- a/src/components/ProxyGroup.module.scss +++ b/src/components/ProxyGroup.module.scss @@ -17,4 +17,12 @@ .proxy { width: 300px; padding: 10px 5px; + transition: transform 0.4s ease; + // transition: transform 0.4s ease, color 0.4s ease; + &.proxySelectable { + cursor: pointer; + &:hover { + transform: scale(1.1); + } + } }