How to use @paprika/helpers - 10 common examples

children: PropTypes.node.isRequired,

  /** Control the visibility of the modal */
  isOpen: PropTypes.bool.isRequired,

  /** Callback triggered when the modal needs to be close */
  onClose: PropTypes.func,

  /** Callback once the modal has been opened event */
  onAfterOpen: PropTypes.func,

  /** Callback once the modal has been closed event */
  onAfterClose: PropTypes.func,

  /* Control the size (max-width) of the modal */
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),

  a11yText: PropTypes.string,
};

const defaultProps = {
  onAfterClose: () => {},
  onClose: () => {},
  onAfterOpen: () => {},
  size: ShirtSizes.MEDIUM,
  a11yText: null,
};

const Modal = props => {
  const { isOpen, onClose, onAfterClose, onAfterOpen, size, a11yText, ...moreProps } = props;

  const {

const renderClear = () => {
    const { hasClearButton, isDisabled, isReadOnly, size, value } = props;
    if (!hasClearButton || isDisabled || isReadOnly || !value) return null;
    const iconSize = size === ShirtSizes.LARGE ? ShirtSizes.MEDIUM : ShirtSizes.SMALL;
    return (
      
        
      
    );
  };

import classNames from "classnames";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import SpinnerStyles from "./Spinner.styles";

const propTypes = {
  a11yText: PropTypes.string,
  className: PropTypes.string,
  caption: PropTypes.string,
  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
};

const defaultProps = {
  a11yText: null,
  className: null,
  caption: null,
  size: ShirtSizes.MEDIUM,
};

const spinnerSize = {
  large: "spinner--large",
  medium: "spinner--medium",
  small: "spinner--small",
};

const Spinner = ({ a11yText, className, caption, size, ...moreProps }) => {
  const rootClasses = classNames(className, spinnerSize[size]);

  const bestAria = a11yText || caption || "Loading"; // TODO: l10n

  return (
    <div data-pka-anchor="spinner">
      <div></div></div>

`;

const activeStyles = `
  box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
  border-color: ${tokens.highlight.active.noBorder.borderColor};
`;

// Sizes

const sizeStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)};
    min-height: ${stylers.spacer(3)};
    padding: 3px ${tokens.space};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize(-1)};
    min-height: ${stylers.spacer(4)};
    padding: 6.5px ${tokens.spaceLg};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize()};
    min-height: ${stylers.spacer(5)};
    padding: 9px ${stylers.spacer(2)};
  `,
};

// Kinds

const kindStyles = props => ({
  [Kinds.DEFAULT]: `
    ${skeuomorphicStyles}

&, &:hover {
    background: none;
    border-color: transparent;
  }
`;

const activeStyles = `
  box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
  border-color: ${tokens.highlight.active.noBorder.borderColor};
`;

// Sizes

const sizeStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)};
    min-height: ${stylers.spacer(3)};
    padding: 3px ${tokens.space};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize(-1)};
    min-height: ${stylers.spacer(4)};
    padding: 6.5px ${tokens.spaceLg};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize()};
    min-height: ${stylers.spacer(5)};
    padding: 9px ${stylers.spacer(2)};
  `,
};

// injected by Dialog.js
    onClose,
    ...moreProps
  } = props;

  return (
    <div kind="{kind}" data-pka-anchor="sidepanel.header">
      <div tabindex="-1">{props.children}</div>
      <div>
        {hasCloseButton ? (
          
        ) : null}
      </div>
    </div>
  );
});

`;

// Sizes

const sizeStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)};
    min-height: ${stylers.spacer(3)};
    padding: 3px ${tokens.space};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize(-1)};
    min-height: ${stylers.spacer(4)};
    padding: 6.5px ${tokens.spaceLg};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize()};
    min-height: ${stylers.spacer(5)};
    padding: 9px ${stylers.spacer(2)};
  `,
};

// Kinds

const kindStyles = props => ({
  [Kinds.DEFAULT]: `
    ${skeuomorphicStyles}

    background-image: linear-gradient(${tokens.color.blackLighten90}, ${tokens.color.blackLighten70});
    background-color: ${tokens.color.white};
    border-color: ${tokens.border.color};
    color: ${tokens.color.black};

setRenderConfirmation(null);
    }

    if (triggerRef.current) triggerRef.current.focus();
  };

  const handleOpenMenu = () => {
    setIsOpen(true);
    // https://github.com/acl-services/paprika/issues/316
    // Todo Should focus the first item via an onAfterOpen event callback in popover
    setTimeout(() => {
      focusAndSetIndex(0);
    }, 250);
  };

  const extractedChildren = extractChildren(children, ["DropdownMenu.Trigger"]);

  const dropdownLastItemIndex =
    React.Children.toArray(
      extractedChildren.children.filter(
        child =>
          child.type &&
          (child.type.displayName === "DropdownMenu.Item" || child.type.displayName === "DropdownMenu.LinkItem")
      )
    ).length - 1;

  const onKeyDown = (event, currentIndex) => {
    if (event.key === "ArrowDown") {
      const indexToFocus = currentIndex === dropdownLastItemIndex ? 0 : currentIndex + 1;
      focusAndSetIndex(indexToFocus);
    } else if (event.key === "ArrowUp") {
      const indexToFocus = currentIndex === 0 ? dropdownLastItemIndex : currentIndex - 1;

const Takeover = props => {
  const { isOpen, onClose, onAfterClose, onAfterOpen, ...moreProps } = props;

  function handleTransitionEnter(node) {
    // https://github.com/reactjs/react-transition-group/blob/6dbadb594c7c2a2f15bc47afc6b4374cfd73c7c0/src/CSSTransition.js#L44
    // eslint-disable-next-line no-unused-expressions
    node.scrollTop;
  }

  const {
    "Takeover.FocusTrap": focusTrapExtracted,
    "Takeover.Header": headerExtracted,
    "Takeover.Content": contentExtracted,
    children,
  } = extractChildren(moreProps.children, ["Takeover.FocusTrap", "Takeover.Header", "Takeover.Content"]);

  const extendedFocusTrapOptions = focusTrapExtracted ? focusTrapExtracted.props : {};

  const focusTrapOptions = {
    fallbackFocus: () => document.createElement("div"),
    ...extendedFocusTrapOptions,
  };

  function handleEscKey(event) {
    if (event.key === "Escape") {
      event.stopPropagation();

      onClose();
    }
  }

export default function RowHeight(props) {
  const dispatch = useDispatch();
  const state = useDataTableState();
  const values = [size.XSMALL, size.SMALL, size.MEDIUM, size.LARGE];
  const heights = {
    [size.XSMALL]: 32,
    [size.SMALL]: 55,
    [size.MEDIUM]: 87,
    [size.LARGE]: 127,
  };

  // just want to fire this the first time
  React.useEffect(() => {
    if (typeof state.rowHeight === "undefined" || state.rowHeight === null) {
      const index = getIndexByValue(props.defaultHeight, values);
      dispatch({ type: "ROW_HEIGHT", payload: { index: 0, value: heights[values[index]] } || 0 });
    }
  }, []); // eslint-disable-line

  const handleClick = () => {
    const nextIndex = getNextIndex(state.rowHeight.index, values);
    dispatch({ type: "ROW_HEIGHT", payload: { index: nextIndex, value: heights[values[nextIndex]] } });