react-antd-admin-panel
Version:
Easy prototyping admin panel using React and Antd
43 lines • 1.93 kB
JavaScript
import React, { useRef, useState } from "react";
import { Card, Carousel, Col, Row } from "antd";
const Alert = (props) => {
let model = props.model;
let fields = model._fields;
const carouselRef = useRef(null);
const [state, setState] = useState(fields);
let contentStyle = {
color: '#ffffff',
background: '#ebebeb',
borderRadius: '8px',
margin: '4px',
padding: '4px 4px 24px 4px',
outline: 'none'
};
contentStyle = Object.assign(Object.assign({}, contentStyle), model._style);
const chunkArray = (array, chunkSize) => {
const tempArray = [];
for (let i = 0; i < array.length; i += chunkSize) {
tempArray.push(array.slice(i, i + chunkSize));
}
return tempArray;
};
const [chunkedArray, setChunkedArray] = useState(chunkArray(fields, 3)); // Explicitly setting the type of state
model.tsxGoNext = () => {
var _a;
// @ts-ignore
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next();
};
model.tsxGoPrev = () => {
var _a;
// @ts-ignore
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev();
};
return (React.createElement(Carousel, { ref: carouselRef, draggable: true, adaptiveHeight: true, afterChange: () => { } }, chunkedArray.map((chunk, index) => (React.createElement("div", { key: index, tabIndex: -1 },
React.createElement(Row, { style: contentStyle, tabIndex: -1 }, chunk.map((e) => {
var _a;
return React.createElement(Col, { span: 8, style: { padding: 4 } },
React.createElement(Card, { title: (_a = e._title) !== null && _a !== void 0 ? _a : undefined }, e._render ? e._render(model) : 'Missing a render function'));
})))))));
};
export default Alert;
//# sourceMappingURL=Carousel.js.map