@nodeject/ui-components
Version:
UI library for non-trivial components
59 lines (58 loc) • 2.75 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { Typography } from 'antd';
import * as React from 'react';
var Text = Typography.Text, Title = Typography.Title;
var itemPropsAreEqual = function (prevProps, nextProps) {
// These props don't need to be compared
var strippedDown = {
children: undefined,
events: undefined,
id: undefined,
index: undefined,
isDragging: undefined
};
// Strips down objects to props that matter, and compare if needs rendering
var newPrevProps = Object.assign({}, prevProps, strippedDown);
var newNextProps = Object.assign({}, nextProps, strippedDown);
return JSON.stringify(newPrevProps) === JSON.stringify(newNextProps);
};
export var DefaultItem = React.memo(function (props) {
return React.createElement("div", { className: "defaultDraggableItem" }, props.children);
}, itemPropsAreEqual);
export var DefaultItemWithRenderWatcher = React.memo(function (props) {
var data = props.data;
var rerenderRandomNumber = parseInt(Math.random().toString(8).substr(2, 2), 10);
return (React.createElement(DefaultItem, __assign({}, props),
React.createElement("div", { style: { padding: '12px' } },
React.createElement("div", { style: {
alignItems: 'baseline',
width: '100%',
display: 'flex',
justifyContent: 'space-between'
} },
React.createElement(Title, { level: 3 }, data === null || data === void 0 ? void 0 : data.title),
React.createElement("div", { style: {
fontSize: '1.2rem',
fontWeight: 'bold',
color: 'red'
} }, data === null || data === void 0 ? void 0 : data.index),
React.createElement(Title, { level: 4, type: "secondary" }, data === null || data === void 0 ? void 0 : data.owner)),
React.createElement("div", { style: {
alignItems: 'baseline',
width: '100%',
display: 'flex',
justifyContent: 'space-between'
} },
props.children,
React.createElement(Text, { type: "secondary" }, rerenderRandomNumber)))));
}, itemPropsAreEqual);