Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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 (
);
};
<div>
<button data-pka-anchor="confirmation.confirm-button" size="{buttonSize}" kind="{confirmButtonType}">
{confirmLabel}
</button>
<button data-pka-anchor="confirmation.cancel-button" size="{buttonSize}" kind="{Button.Kinds.MINOR}">
{I18n.t("actions.cancel")}
</button>
</div>
);
return (
import React from "react";
import PropTypes from "prop-types";
import uuid from "uuid/v4";
import Button from "@paprika/button";
import Heading from "@paprika/heading";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import useI18n from "@paprika/l10n/lib/useI18n";
import Popover from "@paprika/popover";
import TriggerButton from "./components/TriggerButton";
import { confirmStyles, confirmBodyStyles, confirmFooterStyles } from "./Confirmation.styles";
const propTypes = {
buttonSize: PropTypes.oneOf(ShirtSizes.DEFAULT),
children: PropTypes.node,
confirmButtonType: PropTypes.oneOf([Button.Kinds.PRIMARY, Button.Kinds.DESTRUCTIVE]),
confirmLabel: PropTypes.string.isRequired,
body: PropTypes.node,
heading: PropTypes.string,
defaultIsOpen: PropTypes.bool,
isPending: PropTypes.bool,
onClose: PropTypes.func,
onConfirm: PropTypes.func.isRequired,
};
const defaultProps = {
buttonSize: ShirtSizes.MEDIUM,
children: null,
confirmButtonType: Button.Kinds.DESTRUCTIVE,
defaultIsOpen: false,
body: null,
heading: null,
import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";
import Button from "@paprika/button";
const kind = {
[Button.Kinds.DEFAULT]: `background: ${tokens.color.white}; color: ${tokens.color.black};`,
[Button.Kinds.PRIMARY]: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,
};
const compactStyles = `
height: ${spacer(7)};
padding: 0 ${spacer(2)};
[data-pka-anchor="heading"] {
${fontSize(1)};
font-weight: 700;
margin: 0;
}
`;
export const headerCSS = props => `
align-items: center;
border-bottom: 1px solid ${tokens.border.color};
<div data-pka-anchor="sortable.item.handle">
</div>
{hasNumbers && (
<div data-pka-anchor="sortable.item.number">
{index + 1}
</div>
)}
<div data-pka-anchor="sortable.item.body">
{children}
</div>
{onRemove && (
<div data-pka-anchor="sortable.item.remove">
</div>
)}
)}
function darkBackgroundProps(kind) {
if (kind === Button.Kinds.PRIMARY) {
return { isDark: true };
}
return {};
}
kindClear: PropTypes.string,
labelAccept: PropTypes.string,
labelCancel: PropTypes.string,
labelClear: PropTypes.string,
onClickAccept: PropTypes.func,
onClickCancel: PropTypes.func,
onClickClear: PropTypes.func,
size: PropTypes.string,
};
const defaultProps = {
isAcceptVisible: true,
isCancelVisible: true,
isClearVisible: true,
isDisabled: false,
kindAccept: Button.Kinds.PRIMARY,
kindCancel: Button.Kinds.MINOR,
kindClear: Button.Kinds.MINOR,
labelAccept: "Accept",
labelCancel: "Cancel",
labelClear: "Clear",
onClickAccept: null,
onClickCancel: null,
onClickClear: null,
size: ShirtSizes.SMALL,
};
export function FooterComponent(props, ref) {
const [, dispatch] = useListBox();
const {
labelCancel,
return ;
}
return (
{hasRenderTrigger ? renderChildrenProps : renderLabel()}
{state.selectedOptions.length && hasClearButton && !shouldHideClearButton ? (
) : null}
{shouldHideCaret ? null : caret}
);
}
import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";
import Button from "@paprika/button";
const kind = {
[Button.Kinds.DEFAULT]: `background: ${tokens.color.white}; color: ${tokens.color.black};`,
[Button.Kinds.PRIMARY]: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,
};
const compactStyles = `
height: ${spacer(7)};
padding: 0 ${spacer(2)};
[data-pka-anchor="heading"] {
${fontSize(1)};
font-weight: 700;
margin: 0;
}
`;
export const headerCSS = props => `
align-items: center;
buttonSize: PropTypes.oneOf(ShirtSizes.DEFAULT),
children: PropTypes.node,
confirmButtonType: PropTypes.oneOf([Button.Kinds.PRIMARY, Button.Kinds.DESTRUCTIVE]),
confirmLabel: PropTypes.string.isRequired,
body: PropTypes.node,
heading: PropTypes.string,
defaultIsOpen: PropTypes.bool,
isPending: PropTypes.bool,
onClose: PropTypes.func,
onConfirm: PropTypes.func.isRequired,
};
const defaultProps = {
buttonSize: ShirtSizes.MEDIUM,
children: null,
confirmButtonType: Button.Kinds.DESTRUCTIVE,
defaultIsOpen: false,
body: null,
heading: null,
isPending: false,
onClose: () => {},
};
const Confirmation = props => {
const [isConfirmOpen, setIsConfirmOpen] = React.useState(null);
const {
heading,
buttonSize,
children,
confirmButtonType,
confirmLabel,
body,