Cards
Cards are used to display a preview of the Filter
, Text Design
or Sticker
a user can apply to the image.
Exported Cards
The following card components are available in the photoeditorsdk
package and can be customised to fit your needs.
AdvancedUICategoryCard
: This is the CategoryCard which is used by default in the editor.AdvancedUIItemCard
: This is the ItemCard which is used by default in the editor.AdvancedUICardLabel
: This component is used to display the label or authorName.CardAvatar
: This component will accept an url and display an avatar.
Examples
Category Card in AdvancedUI
The CategoryCards are used to group a number of items under a specific category which can be opened or closed.
The React component will receive the following props:
{
tool: Tool
label: string
image?: string
isActive?: boolean
type: CardType
isDisabled?: boolean
onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
className?: string
style?: React.CSSProperties
children?: React.ReactNode
}
import React from "react";
import styled from "styled-components";
import { CustomCardProps, AdvancedUICategoryCard } from "photoeditorsdk";
const Card = styled(AdvancedUICategoryCard)`
height: 50px;
width: 180px;
border-radius: 16px;
margin-bottom: 16px;
`;
const Label = styled.div<{ isActive: boolean | void }>`
width: 180px;
text-align: center;
font-size: 12px;
margin-bottom: 10px;
color: ${(props) =>
props.isActive ? props.theme.primary : props.theme.card.labelForeground};
`;
const CategoryCard: React.FC<CustomCardProps> = ({
label,
isActive,
children,
...props
}) => (
<div>
<Label isActive={isActive}>{label}</Label>
<Card {...props} isActive={isActive} />
</div>
);
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
advancedUICategoryCard: CategoryCard,
},
},
});
Item Card in AdvancedUI
This will replace the item cards in the toolControlBar
.
The React component will receive the following props:
{
tool: Tool
label?: string
authorName?: string
authorAvatar?: string
image?: string
isActive?: boolean
type: CardType
isDisabled?: boolean
onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void
className?: string
style?: React.CSSProperties
children?: React.ReactNode
}
Changing the overall look of the ItemCard
import React from "react";
import styled from "styled-components";
import { CustomCardProps, AdvancedUIItemCard, Tool } from "photoeditorsdk";
const Container = styled.div`
margin-bottom: 10px;
&:nth-child(2n + 1) {
margin-right: ${(props) =>
props.theme.measurements.advancedSpacer}px !important;
}
`;
const CardStyles = styled(AdvancedUIItemCard).attrs((props) => {
const style: any = {};
if (props.image) {
style.backgroundImage = `url(${props.image})`;
}
if (props.isActive) {
style.border = `2px solid ${props.theme.primary}`;
}
return { style };
})`
height: 87px;
width: 87px;
padding: 5px;
border-radius: 50%;
margin-right: 0px !important;
background-position: center center;
background-repeat: no-repeat;
background-clip: content-box;
`;
const Label = styled.div`
max-width: 80px;
text-align: center;
font-size: 12px;
margin-bottom: 10px;
`;
const ItemCard: React.FC<CustomCardProps> = ({
label,
children,
tool,
style,
...props
}) => {
if (tool === Tool.FRAME && style) {
style.backgroundSize = "55%";
}
return (
<Container>
<CardStyles {...props} tool={tool} style={style} />
<Label>{label}</Label>
</Container>
);
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
advancedUIItemCard: ItemCard,
},
},
});
Customizing the Author Information in the Library
export const ItemCard: React.FC<CustomItemCardProps> = ({
label,
children,
tool,
style,
...props
}) => {
if (tool === Tool.LIBRARY) {
const { authorName, authorAvatar } = props as CustomItemCardProps<
Tool.LIBRARY
>;
return (
<AdvancedUIItemCard {...props} label={label} tool={tool} style={style}>
{authorAvatar && <CardAvatar url={authorAvatar} />}
{authorName && (
<AdvancedUICardLabel withBackground>{authorName}</AdvancedUICardLabel>
)}
</AdvancedUIItemCard>
);
}
return (
<AdvancedUIItemCard {...props} label={label} tool={tool} style={style}>
{children}
</AdvancedUIItemCard>
);
};
Removing the Author Information in the Library
export const ItemCard: React.FC<CustomItemCardProps> = ({
label,
children,
tool,
style,
...props
}) => {
if (tool === Tool.LIBRARY) {
const { authorName, authorAvatar } = props as CustomItemCardProps<
Tool.LIBRARY
>;
return (
<AdvancedUIItemCard {...props} label={label} tool={tool} style={style} />
);
}
return (
<AdvancedUIItemCard {...props} label={label} tool={tool} style={style}>
{children}
</AdvancedUIItemCard>
);
};
Default configuration
custom: {
components: {
advancedUICategoryCard: AdvancedUICategoryCard,
advancedUIItemCard: AdvancedUIItemCard,
}
}