lucid-ui
Version:
A UI component library from Xandr.
154 lines (153 loc) • 6.96 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);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Legend = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importStar(require("prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var Point_1 = __importDefault(require("../Point/Point"));
var Line_1 = __importDefault(require("../Line/Line"));
var cx = style_helpers_1.lucidClassNames.bind('&-Legend');
var POINT_SIZE = 12;
var LINE_WIDTH = 22;
var number = prop_types_1.default.number, string = prop_types_1.default.string, oneOf = prop_types_1.default.oneOf, node = prop_types_1.default.node, bool = prop_types_1.default.bool, func = prop_types_1.default.func;
var defaultProps = {
orient: 'vertical',
hasBorders: true,
isReversed: false,
};
var LegendItem = function (_props) { return null; };
var handleItemClick = function (index, props, event) {
var onClick = props.onClick;
if (!onClick) {
return;
}
onClick(index, { props: props, event: event });
};
var Legend = function (props) {
var className = props.className, orient = props.orient, hasBorders = props.hasBorders, isReversed = props.isReversed, passThroughs = __rest(props, ["className", "orient", "hasBorders", "isReversed"]);
var isHorizontal = orient === 'horizontal';
var isVertical = orient === 'vertical';
var itemProps = lodash_1.default.map((0, component_types_1.findTypes)(props, LegendItem), 'props');
var hasSomeLines = isVertical && lodash_1.default.some(itemProps, function (_a) {
var hasLine = _a.hasLine;
return hasLine;
});
return (react_1.default.createElement("ul", __assign({}, passThroughs, { className: cx('&', {
'&-is-horizontal': isHorizontal,
'&-is-vertical': isVertical,
'&-has-borders': hasBorders,
'&-is-reversed': isReversed,
}, className) }), lodash_1.default.map(itemProps, function (_a, index) {
var hasLine = _a.hasLine, hasPoint = _a.hasPoint, _b = _a.pointKind, pointKind = _b === void 0 ? 1 : _b, color = _a.color, children = _a.children, itemClass = _a.className;
return (react_1.default.createElement("li", { key: index, className: cx(itemClass, '&-Item'), onClick: lodash_1.default.partial(handleItemClick, index, itemProps[index]) },
hasPoint || hasLine ? (react_1.default.createElement("svg", { className: cx('&-Item-indicator'), width: hasLine || hasSomeLines ? LINE_WIDTH : POINT_SIZE, height: POINT_SIZE },
hasPoint ? (react_1.default.createElement(Point_1.default, { x: hasLine || hasSomeLines ? LINE_WIDTH / 2 : POINT_SIZE / 2, y: POINT_SIZE / 2, color: color, kind: pointKind })) : null,
hasLine ? (react_1.default.createElement(Line_1.default, { d: "M0,".concat(POINT_SIZE / 2, " L").concat(LINE_WIDTH, ",").concat(POINT_SIZE / 2), color: color })) : null)) : null,
children));
})));
};
exports.Legend = Legend;
exports.Legend.defaultProps = defaultProps;
exports.Legend.displayName = 'Legend';
exports.Legend.peek = {
description: "Contrary to the other chart primitives, this component is not rendered in `svg`. In order to sanely render horizontal legends, we need to know the width of the text elements ahead of rendering time. Since we're using a variable width font, the only way I know of to correctly get the width is with the `DOM` function `getComputedTextLength`. Variable widths are much more easy to implement outside of `svg`.",
categories: ['visualizations', 'chart primitives'],
};
exports.Legend.HEIGHT = 28; // exposed for consumer convenience
exports.Legend.propTypes = {
/**
Child element whose children represent content to be shown inside Legend.
*/
Item: node,
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
/**
Determine orientation of the legend.
*/
orient: oneOf(['horizontal', 'vertical']),
/**
Show the legend borders. Turn this off if you want to put the legend in a
\`ToolTip\` for example.
*/
hasBorders: bool,
/**
Reverse the order of items in the legend.
*/
isReversed: bool,
};
LegendItem.displayName = 'Legend.Item';
exports.Legend.Item = LegendItem;
LegendItem.peek = {
description: "Renders a `<li>` that describes the data series.\n\t",
};
LegendItem.propName = 'Item';
LegendItem.propTypes = {
children: prop_types_1.any,
};
LegendItem.propTypes = {
hasPoint: bool,
hasLine: bool,
/**
Strings should match an existing color class unless they start with a '#' for specific colors. E.g.:
- \`COLOR_0\`
- \`COLOR_GOOD\`
- \`'#123abc'\`
*/
color: string,
pointKind: number,
onClick: func,
/**
Class names that are appended to the defaults.
*/
className: string,
};
exports.default = exports.Legend;
//# sourceMappingURL=Legend.js.map