feat: multi widgets (#99)

* Update theme * Remove conditional from HelpButton * wip: installedWidgets and WidgetActions * Add, remove, activate methods, wip: activate * Add confirmation modal to widget deletion * refactor installed widgets * clean up: widget add & delete, refact Layer code * Update toggleButton theme * update toggleButton component * Add layers.highlight to theme * Fix activation, fix ToggleButton styles * Remove Widget toggling from right panel * add singleOnly support to limit widget instances * changes based on PR * refactor type * replace limitReached with disabled * installableWidgets -> widgetTypes Co-authored-by: KaWaite <flippindaisy@gmail.com> Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · Oct 21, 2021 · bea1a32 · bea1a32
1 parent 25a2171
commit bea1a32
Show file tree

Hide file tree

Showing 21 changed files with 550 additions and 180 deletions.
diff --git a/src/components/atoms/ConfirmationModal/index.tsx b/src/components/atoms/ConfirmationModal/index.tsx
@@ -8,7 +8,7 @@ export type Props = {
   title?: string;
   buttonAction?: string;
   body: React.ReactNode;
-  onCancel: () => void;
+  onCancel?: () => void;
   onProceed: () => void;
   onClose: () => void;
   isOpen: boolean;
@@ -24,6 +24,12 @@ const ConfirmationModal: React.FC<Props> = ({
   onClose,
 }) => {
   const intl = useIntl();
+
+  const handleProceed = () => {
+    onProceed();
+    onCancel?.() ?? onClose();
+  };
+
   return (
     <Modal
       title={title}
@@ -33,14 +39,14 @@ const ConfirmationModal: React.FC<Props> = ({
       button1={
         <Button
           text={buttonAction || intl.formatMessage({ defaultMessage: "Continue" })}
-          onClick={onProceed}
+          onClick={handleProceed}
           buttonType="danger"
         />
       }
       button2={
         <Button
           text={intl.formatMessage({ defaultMessage: "Cancel" })}
-          onClick={onCancel}
+          onClick={onCancel ?? onClose}
           buttonType="secondary"
         />
       }>

diff --git a/src/components/atoms/HelpButton/index.tsx b/src/components/atoms/HelpButton/index.tsx
@@ -68,35 +68,31 @@ const HelpButton: React.FC<Props> = ({
   }, [isMouseEnter]);
 
   return (
-    <>
-      {descriptionTitle || description ? (
-        <div ref={wrapperRef} className={className}>
-          <div ref={referenceRef}>
-            <HelpArea
-              onMouseEnter={() => {
-                setIsMouseEnter(true);
-              }}
-              onMouseLeave={() => setIsMouseEnter(false)}>
-              {children}
-            </HelpArea>
-          </div>
-          <BalloonWrapper
-            ref={popperRef}
-            visible={visible}
-            direction={balloonDirection}
-            style={styles.popper}
-            {...attributes.popper}>
-            <BalloonArrow
-              ref={arrowRef}
-              style={styles.arrow}
-              className="arrow"
-              data-placement={balloonDirection}
-            />
-            <Balloon title={descriptionTitle} description={description} img={img} />
-          </BalloonWrapper>
-        </div>
-      ) : undefined}
-    </>
+    <div ref={wrapperRef} className={className}>
+      <div ref={referenceRef}>
+        <HelpArea
+          onMouseEnter={() => {
+            setIsMouseEnter(true);
+          }}
+          onMouseLeave={() => setIsMouseEnter(false)}>
+          {children}
+        </HelpArea>
+      </div>
+      <BalloonWrapper
+        ref={popperRef}
+        visible={visible}
+        direction={balloonDirection}
+        style={styles.popper}
+        {...attributes.popper}>
+        <BalloonArrow
+          ref={arrowRef}
+          style={styles.arrow}
+          className="arrow"
+          data-placement={balloonDirection}
+        />
+        <Balloon title={descriptionTitle} description={description} img={img} />
+      </BalloonWrapper>
+    </div>
   );
 };
 

diff --git a/src/components/atoms/ToggleButton/index.tsx b/src/components/atoms/ToggleButton/index.tsx
@@ -3,20 +3,36 @@ import React from "react";
 import Text from "@reearth/components/atoms/Text";
 import { styled, useTheme } from "@reearth/theme";
 
+export type ToggleSize = "sm" | "md";
+
 interface ToggleButtonProps {
   checked?: boolean;
   disabled?: boolean;
+  parentSelected?: boolean;
   onChange?: (checked: boolean) => void;
   label?: string;
+  size?: ToggleSize;
 }
 
-const ToggleButton: React.FC<ToggleButtonProps> = ({ checked, disabled, onChange, label }) => {
+const ToggleButton: React.FC<ToggleButtonProps> = ({
+  checked,
+  disabled,
+  parentSelected,
+  onChange,
+  label,
+  size = "md",
+}) => {
   const handleClick = !disabled && onChange ? () => onChange(!checked) : undefined;
   const theme = useTheme();
   return (
     <>
-      <Switch checked={checked} disabled={disabled} onClick={handleClick}>
-        <TopSlider checked={checked} disabled={disabled} onClick={handleClick} />
+      <Switch
+        size={size}
+        checked={checked}
+        disabled={disabled}
+        selected={parentSelected}
+        onClick={handleClick}>
+        <TopSlider size={size} checked={checked} disabled={disabled} selected={parentSelected} />
       </Switch>
       {label && (
         <Label size="2xs" color={theme.main.text}>
@@ -29,30 +45,46 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({ checked, disabled, onChange
 
 export default ToggleButton;
 
-const Switch = styled.label<{ checked?: boolean; disabled?: boolean }>`
+const Switch = styled.label<{
+  size?: ToggleSize;
+  checked?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+}>`
   display: inline-block;
-  width: 36px;
-  height: 18px;
+  cursor: pointer;
+  width: ${({ size }) => (size === "sm" ? "24px" : "36px")};
+  height: ${({ size }) => (size === "sm" ? "12px" : "18px")};
   border-radius: 11px;
   border: 1px solid
-    ${props =>
-      props.checked ? props.theme.toggleButton.activeBgBorder : props.theme.toggleButton.bgBorder};
-  background-color: ${props =>
-    props.checked ? props.theme.toggleButton.activeBg : props.theme.toggleButton.bg};
-  opacity: ${props => (props.checked ? 1 : 0.35)};
+    ${({ checked, selected, theme }) =>
+      selected
+        ? theme.toggleButton.highlight
+        : checked
+        ? theme.toggleButton.activeBgBorder
+        : theme.toggleButton.bgBorder};
+  opacity: ${({ checked, selected }) => (checked || selected ? 1 : 0.35)};
   transition: 0.4s;
   vertical-align: middle;
 `;
 
-const TopSlider = styled.div<{ checked?: boolean; disabled?: boolean }>`
-  cursor: pointer;
-  height: 18px;
-  width: 18px;
-  background-color: ${props =>
-    props.checked ? props.theme.toggleButton.activeToggle : props.theme.toggleButton.toggle};
+const TopSlider = styled.div<{
+  size?: ToggleSize;
+  checked?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+}>`
+  width: ${({ size }) => (size === "sm" ? "12px" : "18px")};
+  height: ${({ size }) => (size === "sm" ? "12px" : "18px")};
+  background-color: ${({ checked, selected, theme }) =>
+    selected
+      ? theme.toggleButton.highlight
+      : checked
+      ? theme.toggleButton.activeToggle
+      : theme.toggleButton.toggle};
   transition: 0.4s;
   border-radius: 50%;
-  transform: ${props => props.checked && "translateX(100%)"};
+  transform: ${({ checked }) => checked && "translateX(100%)"};
   vertical-align: middle;
 `;
 

diff --git a/src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/hooks.ts b/src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/hooks.ts
@@ -4,14 +4,18 @@ export default function ({
   group,
   visible,
   visibilityChangeable,
+  deactivated,
   onExpand,
   onVisibilityChange,
+  onActivationChange,
 }: {
   group?: boolean;
   visible?: boolean;
+  deactivated?: boolean;
   visibilityChangeable?: boolean;
   onExpand?: () => void;
   onVisibilityChange?: (visible: boolean) => void;
+  onActivationChange?: (active: boolean) => void;
 }) {
   const [isHover, toggleHover] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
@@ -26,6 +30,16 @@ export default function ({
     [visible, onVisibilityChange, visibilityChangeable],
   );
 
+  const handleActivationChange = useCallback(
+    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (!!deactivated === false) {
+        event.stopPropagation();
+      }
+      onActivationChange?.(!!deactivated);
+    },
+    [deactivated, onActivationChange],
+  );
+
   const handleExpand = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       if (!group) return;
@@ -51,6 +65,7 @@ export default function ({
     showHelp,
     toggleHover,
     handleVisibilityChange,
+    handleActivationChange,
     handleExpand,
   };
 }