chore: remove react-toggled (#6876)

* feat: remove react-toggled wip: tests dont pass yet * fix: update snapshots
decaporg · Aug 25, 2023 · 59437d8 · 59437d8
1 parent 3acf2d3
commit 59437d8
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 41 deletions.
diff --git a/packages/decap-cms-core/src/components/Editor/EditorToolbar.js b/packages/decap-cms-core/src/components/Editor/EditorToolbar.js
@@ -451,6 +451,7 @@ export class EditorToolbar extends React.Component {
       <ToolbarDropdown
         dropdownTopOverlap="40px"
         dropdownWidth="150px"
+        key="td-publish-create"
         renderButton={() => (
           <PublishedToolbarButton>
             {isPersisting

diff --git a/...s/decap-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap b/...s/decap-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
@@ -200,7 +200,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
     class="emotion-21 emotion-22"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -463,7 +463,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
     class="emotion-21 emotion-22"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -695,7 +695,7 @@ exports[`EditorToolbar should render with default props 1`] = `
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -980,7 +980,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
     class="emotion-23 emotion-24"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -1310,7 +1310,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
     class="emotion-30 emotion-31"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -1634,7 +1634,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
     class="emotion-23 emotion-24"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -1946,7 +1946,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
     class="emotion-28 emotion-29"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -2265,7 +2265,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
     class="emotion-23 emotion-24"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -2595,7 +2595,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
     class="emotion-30 emotion-31"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -2862,7 +2862,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -3064,7 +3064,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-16 emotion-17"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -3286,7 +3286,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -3513,7 +3513,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -3740,7 +3740,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div
@@ -3967,7 +3967,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-16gdrpq-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
+      classname="css-h6rugo-ToolbarSectionBackLink-toolbarSection e1d2l9mo8"
       to=""
     >
       <div

diff --git a/packages/decap-cms-ui-default/package.json b/packages/decap-cms-ui-default/package.json
@@ -18,7 +18,6 @@
   },
   "dependencies": {
     "react-aria-menubutton": "^7.0.0",
-    "react-toggled": "^1.1.2",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {

diff --git a/packages/decap-cms-ui-default/src/Toggle.js b/packages/decap-cms-ui-default/src/Toggle.js
@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import ReactToggled from 'react-toggled';
 
 import { colors, colorsRaw, shadows, transitions } from './styles';
 
@@ -56,25 +55,29 @@ function Toggle({
   Background = ToggleBackground,
   Handle = ToggleHandle,
 }) {
+  const [isActive, setIsActive] = useState(active);
+
+  function handleToggle() {
+    setIsActive(prevIsActive => !prevIsActive);
+    if (onChange) {
+      onChange(!isActive);
+    }
+  }
+
   return (
-    <ReactToggled on={active} onToggle={onChange}>
-      {({ on, getTogglerProps }) => (
-        <Container
-          id={id}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          className={className}
-          {...getTogglerProps({
-            role: 'switch',
-            'aria-checked': on.toString(),
-            'aria-expanded': null,
-          })}
-        >
-          <Background isActive={on} />
-          <Handle isActive={on} />
-        </Container>
-      )}
-    </ReactToggled>
+    <Container
+      id={id}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      className={className}
+      onClick={handleToggle}
+      role="switch"
+      aria-checked={isActive?.toString()}
+      aria-expanded={null}
+    >
+      <Background isActive={isActive} />
+      <Handle isActive={isActive} />
+    </Container>
   );
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -16328,11 +16328,6 @@ react-toastify@^9.1.1:
   dependencies:
     clsx "^1.1.1"
 
-react-toggled@^1.1.2:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/react-toggled/-/react-toggled-1.2.7.tgz#be1b72058358dd1ffe11811e4427e5c9cf140c10"
-  integrity sha512-3am1uA5ZzDwUkReEuUkK+fJ0DAYcGiLraWEPqXfL1kKD/NHbbB7fB/t+5FflMGd+FA6n9hih1es4pui1yzKi0w==
-
 react-topbar-progress-indicator@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz#58d89114b8ddc2ec6e6235495bff7ab39900d100"