@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
97 lines (96 loc) • 3.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const PartyAvatar_1 = require("./PartyAvatar");
const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
const partyMockImages = [
{
image: `${cdnPath}1199250158.png`,
name: "Comune di Milano",
},
{
image: `${cdnPath}2438750586.png`,
name: "Comune di Roma",
},
{
image: `${cdnPath}162210348.png`,
name: "Comune di Parma",
},
{
image: `${cdnPath}82003830161.png`,
name: "Comune di Sotto il Monte Giovanni XXIII",
},
{
image: `${cdnPath}172960361.png`,
name: "Comune di Castelfranco Emilia",
},
{
image: `${cdnPath}82001510492.png`,
name: "Comune di Campo nell'Elba",
},
{
image: `${cdnPath}117100537.png`,
name: "Comune di Castiglione della Pescaia",
},
{
image: `${cdnPath}142680669.png`,
name: "Comune di Pescasseroli",
},
{
image: `${cdnPath}81000410688.png`,
name: "Comune di San Valentino in Abruzzo Citeriore",
},
{
image: `${cdnPath}189800204.png`,
name: "Comune di Mantova",
},
{
image: `${cdnPath}82002590105.png`,
name: "Comune di Ne",
},
{
image: `${cdnPath}74260845.png`,
name: "Comune di Agrigento",
},
{
image: undefined,
name: "Ente senza stemma",
},
];
/* Generate random value without repeating values
Source of this snippet: https://akashmittal.com/javascript-random-array-element-no-repeat/ */
const alreadyPicked = [];
const randomValueFromArray = (array) => {
if (alreadyPicked.length === 0) {
for (const [i] of array.entries()) {
alreadyPicked.push(i);
}
}
const randomValueIndex = Math.floor(Math.random() * alreadyPicked.length);
const indexOfItemInMyArray = alreadyPicked[randomValueIndex];
alreadyPicked.splice(randomValueIndex, 1);
return array.indexOf(array[indexOfItemInMyArray]);
};
exports.default = {
title: "Components/PartyAvatar",
component: PartyAvatar_1.PartyAvatar,
decorators: [
(Story) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
padding: "1em",
backgroundColor: "#F5F5F5",
} }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))),
],
};
const Default = () => {
const [randomIndex, setRandomIndex] = (0, react_1.useState)(0);
const item = partyMockImages[randomIndex];
const getRandomParty = () => {
const randomNumber = randomValueFromArray(partyMockImages);
setRandomIndex(randomNumber);
};
return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2, alignItems: "flex-start" }, { children: [(0, jsx_runtime_1.jsx)(PartyAvatar_1.PartyAvatar, { customSrc: item.image, customAlt: item.name }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: "Party:" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: partyMockImages[randomIndex].name }))] }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: getRandomParty }, { children: "Get random Party" }))] })));
};
exports.Default = Default;