nudge-components-library/dist/components/reflection/MoodSlider.js

A library of nudge UI components

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useContext } from 'react';
import { Slider } from '../anchoring/Slider.js';
import { ThemeContext } from '../../theme/ThemeContext.js';
import '../../styles/tokens.css.js';
import '../../styles/globals.css.js';
import styles from './MoodSlider.module.css.js';

function MoodSlider({ moodDefinitions, onMoodChange, tooltipMode = "value", showIcon = true, min = 0, max = 100, value, onChange, onCommit, ...restProps }) {
    const theme = useContext(ThemeContext);
    const definitions = moodDefinitions && moodDefinitions.length > 0
        ? moodDefinitions
        : [
            { id: "bad", icon: "😐", label: "Bad" },
            { id: "okay", icon: "🙂", label: "Okay" },
            { id: "good", icon: "😊", label: "Good" },
        ];
    const getMoodDefinition = (currentValue) => {
        const hasThresholds = definitions.some((def) => def.threshold !== undefined);
        if (!hasThresholds) {
            const count = definitions.length;
            const segment = (max - min) / count;
            const index = Math.min(Math.floor((currentValue - min) / segment), count - 1);
            return definitions[index];
        }
        else {
            for (let i = 0; i < definitions.length; i++) {
                if (definitions[i].threshold !== undefined &&
                    currentValue <= definitions[i].threshold) {
                    return definitions[i];
                }
            }
            return definitions[definitions.length - 1];
        }
    };
    const handleChange = (newValue) => {
        const moodDef = getMoodDefinition(newValue);
        onMoodChange?.(moodDef.id);
        onChange?.(newValue);
    };
    const handleCommit = (newValue) => {
        const moodDef = getMoodDefinition(newValue);
        onMoodChange?.(moodDef.id);
        onCommit?.(newValue);
    };
    const effectiveTooltipMode = tooltipMode === "icon" && !showIcon ? "value" : tooltipMode;
    const moodTooltipStyles = theme.moodSlider && theme.moodSlider.tooltip
        ? theme.moodSlider.tooltip
        : theme.slider.tooltip;
    const moodIconStyles = theme.moodSlider && theme.moodSlider.icon ? theme.moodSlider.icon : {};
    const renderValueTooltip = (currentValue) => {
        const moodDef = getMoodDefinition(currentValue);
        const iconElement = showIcon ? (jsx("span", { style: moodIconStyles, children: moodDef.icon })) : null;
        switch (effectiveTooltipMode) {
            case "text":
                return (jsxs("div", { className: styles.tooltipContainer, children: [iconElement, jsx("span", { children: moodDef.label })] }));
            case "icon":
                return showIcon ? jsx(Fragment, { children: iconElement }) : null;
            case "value":
            default:
                return (jsxs("div", { className: styles.valueTooltip, children: [iconElement, jsx("span", { children: currentValue })] }));
        }
    };
    return (jsx(Slider, { value: value, min: min, max: max, ...restProps, onChange: handleChange, onCommit: handleCommit, renderValueTooltip: renderValueTooltip, tooltipContainerStyle: moodTooltipStyles }));
}

export { MoodSlider, MoodSlider as default };
//# sourceMappingURL=MoodSlider.js.map