@kwiz/fluentui/dist/controls/merge-text.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Field, Label, makeStyles, Radio, tokens } from '@fluentui/react-components';
import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
import { isNullOrUndefined, waitFor } from '@kwiz/common';
import { DefaultDarkColors, DefaultLightColors, MisMerge2 } from '@mismerge/react';
import * as React from 'react';
import '@mismerge/core/dark.css';
import '@mismerge/core/styles.css';
import { useStateEX, useWindowSize } from '../helpers';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { ButtonEX, ButtonEXPrimarySubtle } from './button';
import { Horizontal } from './horizontal';
import { Section } from './section';
import { Vertical } from './vertical';
const useStyles = makeStyles({
    root: {
        // position: 'fixed',
        // top: 0,
        // left: 0,
        // right: 0,
        // bottom: 0,
        // backgroundColor: tokens.colorNeutralBackground1,
        // zIndex: 10,
        "& .mismerge": {
            // height: "100%",
            "--background": tokens.colorNeutralBackground1,
            //line number background
            "--primary-100": tokens.colorNeutralBackground2,
            //selection background
            "--selection": tokens.colorNeutralBackground1Selected,
            //scrollbar hover
            "--primary-300": tokens.colorNeutralBackground1Hover,
            //border / scroll
            "--primary-200": tokens.colorNeutralStroke1,
            //line number color
            "--primary-400": tokens.colorNeutralForeground2,
            //button hover color
            "--primary-500": tokens.colorNeutralForeground1Hover,
            //main text color
            "--primary-600": tokens.colorNeutralForeground1,
            "& TEXTAREA": {
                lineHeight: "20px"
            }
        }
    },
    menu: {
        justifyContent: "space-between"
    }
});
export const MergeText = (props) => {
    const classes = useStyles();
    const ctx = useKWIZFluentContext();
    let size = useWindowSize();
    let wrapper = React.useRef();
    let [lhs, setLhs] = useStateEX(props.lhsValue || "", {
        skipUpdateIfSame: true, onChange: (v, changed) => {
            if (changed)
                setKeep("left");
            return v;
        }
    });
    let [rhs, setRhs] = useStateEX(props.rhsValue || "", {
        skipUpdateIfSame: true, onChange: (v, changed) => {
            if (changed)
                setKeep("right");
            return v;
        }
    });
    let [keep, setKeep] = useStateEX("cancel");
    React.useEffect(() => {
        if (wrapper.current) {
            waitFor(() => !isNullOrUndefined(wrapper.current.querySelector(".mismerge"))).then(() => {
                let mismerge = wrapper.current.querySelector(".mismerge");
                if (mismerge)
                    mismerge.style.height = `${mismerge.offsetParent.clientHeight - mismerge.offsetTop - 10}px`;
            });
        }
    }, [wrapper.current, size.height]);
    return _jsxs(Drawer, { type: 'overlay', open: true, size: 'full', className: classes.root, mountNode: ctx.mountNode, children: [_jsx(DrawerHeader, { children: _jsx(DrawerHeaderTitle, { action: _jsx(ButtonEX, { icon: _jsx(DismissRegular, {}), title: "Close", onClick: props.cancel }), children: props.title }) }), _jsx(DrawerBody, { children: _jsxs(Vertical, { children: [props.description && _jsx(Label, { children: props.description }), _jsx(Field, { label: "Which version would you like to keep?", hint: "Merge the changes to either side and save. Close this panel to keep editing the page without saving", children: _jsxs(Horizontal, { css: [classes.menu], children: [_jsxs(Horizontal, { nogap: true, children: [_jsx(Radio, { value: "left", label: props.lhsTitle, checked: keep === "left", onClick: () => setKeep("left") }), _jsx(ButtonEXPrimarySubtle, { showTitleWithIcon: true, dontCenterText: true, icon: _jsx(SaveRegular, {}), disabled: keep !== "left", title: `Save ${props.lhsTitle.toLowerCase()}`, onClick: () => props.save(lhs) })] }), _jsxs(Horizontal, { nogap: true, children: [_jsx(Radio, { value: "right", label: props.rhsTitle, checked: keep === "right", onClick: () => setKeep("right") }), _jsx(ButtonEXPrimarySubtle, { showTitleWithIcon: true, dontCenterText: true, icon: _jsx(SaveRegular, {}), disabled: keep !== "right", title: `Save ${props.rhsTitle.toLowerCase()}`, onClick: () => props.save(rhs) })] })] }) }), _jsx(Section, { main: true, ref: wrapper, children: _jsx(MisMerge2, { lhs: lhs, rhs: rhs, lhsEditable: true, rhsEditable: true, onLhsChange: v => setLhs(v), onRhsChange: v => setRhs(v), colors: props.dark ? DefaultDarkColors : DefaultLightColors }) })] }) })] });
};
//# sourceMappingURL=merge-text.js.map