@@ -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);
+ }
+ }
}