@amaui/ui-react
Version:
UI for React
159 lines (158 loc) • 9.75 kB
JavaScript
"use strict";
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 });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const Path_1 = __importDefault(require("../Path"));
const Line_1 = __importDefault(require("../Line"));
const Type_1 = __importDefault(require("../Type"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {},
legend_item: {
userSelect: 'none'
},
legend_icon: {
width: '8px',
height: '8px',
borderRadius: theme.methods.shape.radius.value(40, 'px')
}
}), { name: 'amaui-ScatterChartItem' });
const ScatterChartItem = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiScatterChartItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const { tonal = true, color = 'primary', name, values, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, PathProps, BackgroundProps, BorderProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"]);
const { classes } = useStyle();
const refs = {
minMax: react_1.default.useRef(undefined),
path: react_1.default.useRef(undefined),
theme: react_1.default.useRef(undefined),
pathStyle: react_1.default.useRef({}),
animate: react_1.default.useRef(undefined),
animateTimeout: react_1.default.useRef(),
init: react_1.default.useRef(undefined)
};
const keys = react_1.default.useMemo(() => {
const result = [];
const items = [animate_, animateTimeout_];
items.forEach(item => {
if ((0, utils_1.is)('object', item))
Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return (0, utils_1.unique)(result);
}, [animate_, animateTimeout_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.path.current });
});
const animate = (0, utils_2.valueBreakpoints)(animate_, true, breakpoints, theme);
const animateTimeout = (0, utils_2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
const [value, setValue] = react_1.default.useState();
const [init, setInit] = react_1.default.useState();
refs.theme.current = theme;
refs.animate.current = animate;
refs.animateTimeout.current = animateTimeout;
refs.init.current = init;
const LegendItem = react_1.default.useCallback(() => {
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, LegendItemProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ScatterChartItem', theme) && [
'amaui-ScatterChartItem-legend-item'
],
LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className,
classes.legend_item
]) }, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ScatterChartItem', theme) && [
'amaui-ScatterChartItem-legend-icon'
],
classes.legend_icon
]), style: {
background: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']
} }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: name }))] })));
}, [theme]);
const make = () => {
// Make values into x, y, coordinates
// normalized in rect width, height values
// invert y so 0, 0 is at bottom left
if ((rects === null || rects === void 0 ? void 0 : rects.wrapper) && values) {
const { width, height } = rects.wrapper;
const values_ = values
// Sort for x from smallest to largest
.sort((a, b) => a[0] - b[0])
.map(itemValue => {
const [x, y] = itemValue;
const values__ = {
x: (0, utils_1.percentageFromValueWithinRange)(x, minMax.min.x, minMax.max.x),
y: (0, utils_1.percentageFromValueWithinRange)(y, minMax.min.y, minMax.max.y)
};
values__.x = (0, utils_1.valueFromPercentageWithinRange)(values__.x, 0, width);
values__.y = (0, utils_1.valueFromPercentageWithinRange)(values__.y, 0, height);
return [values__.x, height - values__.y].map(item_ => Math.abs(item_));
});
const element = ((0, jsx_runtime_1.jsx)("g", Object.assign({ ref: refs.path }, { children: values_.map((item, index) => ((0, jsx_runtime_1.jsx)(Path, Object.assign({ cx: item[0], cy: item[1], r: 4, fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'], stroke: 'none' }, PathProps, { Component: 'circle', style: Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), ((refs.animate.current && refs.init.current !== 'animated') && {
opacity: 0,
transform: 'scale(0)'
})), { transformBox: 'fill-box', transformOrigin: 'center' }), refs.pathStyle.current) }), index))) })));
// Legend item
if ((0, utils_1.is)('function', updateLegend)) {
updateLegend(previous => {
const newValues = [...(previous || [])];
if (!newValues.find(itemLegend => { var _a; return ((_a = itemLegend.item) === null || _a === void 0 ? void 0 : _a.name) === name; })) {
newValues.push({
item: {
name,
values
},
element: (0, jsx_runtime_1.jsx)(LegendItem, {})
});
}
return newValues;
});
}
// Value
setValue(element);
}
};
const initMethod = react_1.default.useCallback(() => {
if (animate) {
if (!init) {
refs.pathStyle.current = {
transition: theme.methods.transitions.make(['transform', 'opacity'], { timing_function: 'decelerated' })
};
setInit(true);
setTimeout(() => {
refs.pathStyle.current = Object.assign(Object.assign({}, refs.pathStyle.current), { opacity: 1, transform: 'scale(1)' });
setInit('animated');
}, refs.animateTimeout.current);
}
}
}, [init, animate]);
react_1.default.useEffect(() => {
make();
initMethod();
}, [values, theme, animate, init]);
react_1.default.useEffect(() => {
make();
}, [rects === null || rects === void 0 ? void 0 : rects.wrapper]);
return (value && react_1.default.cloneElement(value, Object.assign({ className }, other)));
});
ScatterChartItem.displayName = 'amaui-ScatterChartItem';
exports.default = ScatterChartItem;