grommet
Version:
focus on the essential experience
137 lines • 4.17 kB
JavaScript
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useReducer, useEffect } from 'react';
import { Box, Diagram, Stack, Text } from 'grommet';
import { Diamond } from "grommet-icons/es6/icons/Diamond";
import { data } from './data';
var connection = function connection(fromTarget, toTarget, _temp) {
var _ref = _temp === void 0 ? {} : _temp,
rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
return _extends({
fromTarget: fromTarget,
toTarget: toTarget,
anchor: 'vertical',
color: 'accent-4',
thickness: 'xsmall',
round: true,
type: 'curved'
}, rest);
};
var DiamondContainer = function DiamondContainer(_ref2) {
var carat = _ref2.carat,
color = _ref2.color,
cut = _ref2.cut,
align = _ref2.align,
id = _ref2.id,
name = _ref2.name,
textSize = _ref2.textSize;
return /*#__PURE__*/React.createElement(Box, {
align: align || 'center',
alignSelf: "center",
direction: "row",
gap: "medium",
key: id
}, /*#__PURE__*/React.createElement(Diamond, {
id: id,
size: "xlarge",
color: "neutral-3"
}), /*#__PURE__*/React.createElement(Box, {
align: align
}, /*#__PURE__*/React.createElement(Text, {
size: "medium",
weight: "bold"
}, name), carat && /*#__PURE__*/React.createElement(Text, {
size: textSize
}, " Carat: ", carat, " "), color && /*#__PURE__*/React.createElement(Text, {
size: textSize
}, " Color: ", color, " "), cut && /*#__PURE__*/React.createElement(Text, {
size: textSize
}, " Cut: ", cut, " ")));
};
var Container = function Container(_ref3) {
var node = _ref3.node,
index = _ref3.index;
return /*#__PURE__*/React.createElement(DiamondContainer, {
carat: node.carat,
color: node.color,
cut: node.cut,
id: index,
key: node.name,
name: node.name,
textSize: "small"
});
};
export var Animated = function Animated() {
var reducer = function reducer(draw) {
return !draw;
};
var _useReducer = useReducer(reducer, true),
draw = _useReducer[0],
toogleDraw = _useReducer[1];
useEffect(function () {
var timer = setInterval(function () {
toogleDraw();
}, 2000);
return function () {
return clearInterval(timer);
};
}, [toogleDraw]);
var connections = [];
if (draw) {
connections.push(connection('4', '1', {
anchor: 'vertical'
}));
connections.push(connection('4', '2', {
anchor: 'vertical'
}));
connections.push(connection('4', '3', {
anchor: 'vertical'
}));
}
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={...}>
React.createElement(Box, {
align: "center"
}, /*#__PURE__*/React.createElement(Box, {
pad: "large"
}, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
alignSelf: "center",
margin: {
bottom: 'large'
}
}, /*#__PURE__*/React.createElement(Container, {
node: data[0],
index: 1
}), /*#__PURE__*/React.createElement(Box, {
pad: "small"
}), /*#__PURE__*/React.createElement(Box, {
id: "4",
width: "xsmall",
margin: {
bottom: 'large',
top: 'xlarge'
}
})), /*#__PURE__*/React.createElement(Box, {
direction: "row",
gap: "xlarge"
}, [2, 3].map(function (id) {
return /*#__PURE__*/React.createElement(Container, {
key: id,
node: data[id - 1],
index: id
});
}))), /*#__PURE__*/React.createElement(Diagram, {
animation: {
type: 'draw',
duration: 3000
},
connections: connections
}))))
// </Grommet>
);
};
export default {
title: 'Visualizations/Diagram/Animated'
};