Skip to content

Instantly share code, notes, and snippets.

@PavelLaptev
Created October 4, 2018 18:42
Show Gist options
  • Save PavelLaptev/b6a77a451ed1e5e4b6c91edf8f1facfd to your computer and use it in GitHub Desktop.
Save PavelLaptev/b6a77a451ed1e5e4b6c91edf8f1facfd to your computer and use it in GitHub Desktop.
import * as React from "react";
import { Stack, PropertyControls, ControlType, Override } from "framer";
import { cardsData } from "./data/cards-data";
// Define type of property
interface Props {
width: number;
height: number;
itemsAmount: number;
}
export class DesignCompAndJSON extends React.Component<Props> {
// Set default properties
static defaultProps = {
width: 375,
height: 600,
itemsAmount: 3,
...Stack.defaultProps
};
static propertyControls: PropertyControls = {
itemsAmount: {
type: ControlType.Number,
max: cardsData.length,
min: 1,
title: "Items"
},
...Stack.propertyControls
};
render() {
return (
<Stack {...this.props}>
{Array(this.props.itemsAmount)
.fill(0)
.map(() => this.props.children)}
</Stack>
);
}
}
let counter = 0;
const numGen = amount => {
if (counter < amount) {
return counter++;
} else {
counter = 0;
return counter++;
}
};
export const ProductName: Override = () => {
console.log(numGen(cardsData.length));
return {
text: cardsData[numGen(cardsData.length)].product.toUpperCase()
};
};
export const Price: Override = () => {
return {
text: cardsData[numGen(cardsData.length)].price
};
};
export const Image: Override = props => {
return {
background: {
src: cardsData[numGen(cardsData.length)].image,
fit: "fit"
}
};
};
export const BackgroundColor: Override = () => {
return {
background: cardsData[numGen(cardsData.length)].background
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment