newspack-components 3.1.0 → 4.0.0

package/dist/cjs/action-card/index.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _ = require("../");
+var _actionCardD = require("./action-card.d.ts");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,200 +30,293 @@ var _jsxRuntime = require("react/jsx-runtime");
  * External dependencies
  */
 
-class ActionCard extends _element.Component {
-  state = {
-    expanded: false
-  };
-
-  /**
-   * When the collapse prop is updated to true, collapse the card if already expanded.
-   */
-  componentDidUpdate(prevProps) {
-    if (!prevProps.collapse && this.props.collapse && this.state.expanded) {
-      this.setState({
-        expanded: false
-      });
+/**
+ * ActionCard component
+ * @param {ActionCardProps} props Component props.
+ * @return {JSX.Element} ActionCard component.
+ */const ActionCard = ({
+  badge,
+  badgeLevel = 'info',
+  className,
+  checkbox,
+  children,
+  collapse,
+  disabled,
+  title,
+  description,
+  handoff,
+  editLink,
+  href,
+  notification,
+  notificationLevel,
+  notificationHTML,
+  actionContent,
+  actionText,
+  secondaryActionText,
+  secondaryDestructive,
+  id,
+  image,
+  imageLink,
+  indent,
+  isSmall,
+  isMedium,
+  simple,
+  onClick,
+  onSecondaryActionClick,
+  isWaiting,
+  titleLink,
+  toggleChecked = false,
+  toggleOnChange,
+  hasGreyHeader,
+  hasWhiteHeader,
+  noBorder,
+  isPending,
+  expandable = false,
+  isButtonEnabled = false,
+  // Draggable props. All are required to enable drag sorting.
+  draggable = false,
+  dragIndex,
+  dragWrapperRef,
+  onDragCallback
+}) => {
+  const [expanded, setExpanded] = (0, _element.useState)(false);
+  const [dragging, setDragging] = (0, _element.useState)(false);
+  const [targetIndex, setTargetIndex] = (0, _element.useState)(null);
+  const [dragRef, setDragRef] = (0, _element.useState)(null);
+  (0, _element.useEffect)(() => {
+    if (dragWrapperRef && !dragRef) {
+      setDragRef(dragWrapperRef);
     }
-  }
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      badge,
-      className,
-      checkbox,
-      children,
-      disabled,
-      title,
-      description,
-      handoff,
-      editLink,
-      href,
-      notification,
-      notificationLevel,
-      notificationHTML,
-      actionContent,
-      actionText,
-      secondaryActionText,
-      secondaryDestructive,
-      image,
-      imageLink,
-      indent,
-      isSmall,
-      isMedium,
-      simple,
-      onClick,
-      onSecondaryActionClick,
-      isWaiting,
-      titleLink,
-      toggleChecked,
-      toggleOnChange,
-      hasGreyHeader,
-      hasWhiteHeader,
-      isPending,
-      expandable = false,
-      isButtonEnabled = false
-    } = this.props;
-    const {
-      expanded
-    } = this.state;
-    const hasChildren = notification || children;
-    const classes = (0, _classnames.default)('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', actionContent && 'has-action-content', className);
-    const backgroundImageStyles = url => {
-      return url ? {
-        backgroundImage: `url(${url})`
-      } : {};
-    };
-    const titleProps = toggleOnChange && !titleLink && !disabled ? {
-      onClick: () => toggleOnChange(!toggleChecked),
-      tabIndex: '0'
+  }, [dragWrapperRef?.current]);
+  (0, _element.useEffect)(() => {
+    if (collapse && expanded) {
+      setExpanded(false);
+    }
+  }, [collapse]);
+  const hasChildren = notification || children;
+  const classes = (0, _classnames.default)('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', draggable && 'is-draggable', actionContent && 'has-action-content', className);
+  const backgroundImageStyles = url => {
+    return url ? {
+      backgroundImage: `url(${url})`
     } : {};
-    const hasInternalLink = href && href.indexOf('http') !== 0;
-    const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-    const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
-      className: classes,
-      onClick: simple && onClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "newspack-action-card__region newspack-action-card__region-top",
-        children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-          checked: toggleChecked,
-          onChange: toggleOnChange,
-          disabled: disabled
-        }), image && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-            href: imageLink,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "newspack-action-card__image",
-              style: backgroundImageStyles(image)
-            })
-          })
-        }), checkbox && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: (0, _classnames.default)('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
-            children: 'checked' === checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-              icon: _icons.check
-            })
+  };
+  const titleProps = toggleOnChange && !titleLink && !disabled ? {
+    onClick: () => toggleOnChange(!toggleChecked),
+    tabIndex: '0'
+  } : {};
+  const hasInternalLink = href && href.indexOf('http') !== 0;
+  const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
+  const badges = !Array.isArray(badge) && badge ? [badge] : badge;
+  const Component = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-action-card__region newspack-action-card__region-top",
+      children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+        checked: toggleChecked,
+        onChange: toggleOnChange,
+        disabled: disabled
+      }), image && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-action-card__region newspack-action-card__region-left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: imageLink,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-action-card__image",
+            style: backgroundImageStyles(image)
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-action-card__region newspack-action-card__region-center",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
-            columns: 1,
-            gutter: 8,
-            noMargin: true,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                className: "newspack-action-card__title",
-                ...titleProps,
-                children: [titleLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-                  href: titleLink,
-                  children: title
-                }), !titleLink && expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-                  isLink: true,
-                  onClick: () => this.setState({
-                    expanded: !expanded
-                  }),
-                  children: title
-                }), !titleLink && !expandable && title]
-              }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "newspack-action-card__badge",
-                children: badgeText
-              }, `badge-${i}`))]
-            }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-              children: [typeof description === 'string' && description, typeof description === 'function' && description()]
-            })]
+        })
+      }), checkbox && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-action-card__region newspack-action-card__region-left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
+          children: 'checked' === checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+            icon: _icons.check
           })
-        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-action-card__region newspack-action-card__region-right",
-          children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
-            plugin: handoff,
-            editLink: editLink,
-            compact: true,
-            isLink: true,
-            children: actionText
-          }) : onClick || hasInternalLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-            disabled: disabled && !isButtonEnabled,
-            isLink: true,
-            href: href,
-            onClick: onClick,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : href ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
-            href: href,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-action-card__container",
-            children: [actionText, isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
-              isRight: true
-            })]
-          })), isDisplayingSecondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-            isLink: true,
-            onClick: onSecondaryActionClick,
-            className: "newspack-action-card__secondary_button",
-            isDestructive: secondaryDestructive,
-            children: secondaryActionText
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-action-card__region newspack-action-card__region-center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+          columns: 1,
+          gutter: 8,
+          noMargin: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              className: "newspack-action-card__title",
+              ...titleProps,
+              children: [titleLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                href: titleLink,
+                children: title
+              }), !titleLink && expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                isLink: true,
+                onClick: () => setExpanded(!expanded),
+                children: title
+              }), !titleLink && !expandable && title]
+            }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: `newspack-action-card__badge newspack-action-card__badge-level-${badgeLevel}`,
+              children: badgeText
+            }, `badge-${i}`))]
+          }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            children: [typeof description === 'string' && description, typeof description === 'function' && description()]
           })]
-        }), expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-          onClick: () => this.setState({
-            expanded: !expanded
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-            icon: expanded ? _icons.chevronUp : _icons.chevronDown,
-            height: 24,
-            width: 24
-          })
-        })]
-      }), notification && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "newspack-action-card__notification newspack-action-card__region-children",
-        children: ['error' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          noticeText: notification,
-          isError: true,
-          rawHTML: notificationHTML
-        }), 'info' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          noticeText: notification,
-          rawHTML: notificationHTML
-        }), 'success' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          noticeText: notification,
-          isSuccess: true,
-          rawHTML: notificationHTML
-        }), 'warning' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
-          noticeText: notification,
-          isWarning: true,
-          rawHTML: notificationHTML
+        })
+      }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-action-card__region newspack-action-card__region-right",
+        children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
+          plugin: handoff,
+          editLink: editLink,
+          compact: true,
+          isLink: true,
+          children: actionText
+        }) : onClick || hasInternalLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+          disabled: disabled && !isButtonEnabled,
+          isLink: true,
+          href: href,
+          onClick: onClick,
+          className: "newspack-action-card__primary_button",
+          children: actionText
+        }) : href ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
+          href: href,
+          className: "newspack-action-card__primary_button",
+          children: actionText
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-action-card__container",
+          children: [actionText, isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+            isRight: true
+          })]
+        })), isDisplayingSecondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+          isLink: true,
+          onClick: onSecondaryActionClick,
+          className: "newspack-action-card__secondary_button",
+          isDestructive: secondaryDestructive,
+          children: secondaryActionText
         })]
-      }), children && (expandable && expanded || !expandable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "newspack-action-card__region-children",
-        children: children
+      }), expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        onClick: () => setExpanded(!expanded),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: expanded ? _icons.chevronUp : _icons.chevronDown,
+          height: 24,
+          width: 24
+        })
+      })]
+    }), notification && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-action-card__notification newspack-action-card__region-children",
+      children: ['error' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        noticeText: notification,
+        isError: true,
+        rawHTML: notificationHTML
+      }), 'info' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        noticeText: notification,
+        rawHTML: notificationHTML
+      }), 'success' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        noticeText: notification,
+        isSuccess: true,
+        rawHTML: notificationHTML
+      }), 'warning' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        noticeText: notification,
+        isWarning: true,
+        rawHTML: notificationHTML
       })]
+    }), children && (expandable && expanded || !expandable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-action-card__region-children",
+      children: children
+    })]
+  });
+  if (draggable && dragRef?.current && typeof dragIndex === 'number' && onDragCallback && id) {
+    let wrapperRect = dragRef.current.getBoundingClientRect();
+    let draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
+    const isFirstTarget = dragIndex === 0;
+    const isLastTarget = dragIndex === draggableCards.length - 1;
+    const handleDragStart = () => {
+      draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
+      wrapperRect = dragRef.current.getBoundingClientRect();
+      if (dragging) {
+        return;
+      }
+      setTargetIndex(dragIndex);
+      setDragging(true);
+    };
+    const handleDragEnd = () => {
+      if (targetIndex !== null && targetIndex !== dragIndex) {
+        onDragCallback(targetIndex);
+      }
+      setTargetIndex(null);
+      setDragging(false);
+    };
+    const handleDragOver = e => {
+      const isDraggingToTop = e.pageY <= wrapperRect.top + window.scrollY;
+      const isDraggingToBottom = e.pageY >= wrapperRect.bottom + window.scrollY;
+      const target = e.target.closest('.newspack-action-card__draggable-wrapper');
+      if (isDraggingToTop || isDraggingToBottom || target) {
+        setTargetIndex(draggableCards.indexOf(target));
+
+        // If dragging the element over itself or over an invalid target, cancel the drop.
+        if (0 > targetIndex || targetIndex === dragIndex + 1) {
+          setTargetIndex(dragIndex);
+        }
+
+        // Handle dropping before the first item.
+        if (isDraggingToTop) {
+          setTargetIndex(0);
+        }
+
+        // Handle dropping after the last item.
+        if (isDraggingToBottom) {
+          setTargetIndex(draggableCards.length);
+        }
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'newspack-action-card__draggable-wrapper' + (dragging ? ' is-dragging' : ''),
+      id: `draggable-card-${id}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Draggable, {
+        elementId: `draggable-card-${id}`,
+        transferData: {},
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        children: ({
+          onDraggableStart,
+          onDraggableEnd
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
+          className: classes,
+          onClick: simple && onClick,
+          id: id !== null && id !== void 0 ? id : null,
+          noBorder: noBorder,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-action-card__draggable-controls",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "drag-handle",
+              draggable: true,
+              onDragStart: onDraggableStart,
+              onDragEnd: onDraggableEnd,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                icon: _icons.dragHandle,
+                height: 18,
+                width: 18
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "movers",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                icon: _icons.chevronUp,
+                onClick: () => onDragCallback(dragIndex - 1),
+                disabled: isFirstTarget,
+                label: (0, _i18n.__)('Move one position up', 'newspack-plugin')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                icon: _icons.chevronDown,
+                onClick: () => onDragCallback(dragIndex + 1),
+                disabled: isLastTarget,
+                label: (0, _i18n.__)('Move one position down', 'newspack-plugin')
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})]
+        })
+      })
     });
   }
-}
-ActionCard.defaultProps = {
-  toggleChecked: false
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+    className: classes,
+    onClick: simple && onClick,
+    id: id !== null && id !== void 0 ? id : null,
+    noBorder: noBorder,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
+  });
 };
 var _default = exports.default = ActionCard;