@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
105 lines • 5.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Input, Label, Link, makeStyles, mergeClasses, Textarea } from '@fluentui/react-components';
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
import React, { useCallback, useEffect } from 'react';
import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { useCommonStyles } from '../styles/styles';
import { Horizontal } from './horizontal';
import { MenuEx } from './menu';
import { Section } from './section';
import { Vertical } from './vertical';
export const InputEx = (props) => {
const ctx = useKWIZFluentContext();
const input = _jsx(Input, Object.assign({ appearance: ctx.inputAppearance }, props, { onKeyDown: isFunction(props.onOK) || isFunction(props.onCancel)
? e => {
var _a, _b;
if (e.key === "Enter")
(_a = props.onOK) === null || _a === void 0 ? void 0 : _a.call(props);
if (e.key === "Escape")
(_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
}
: undefined }));
return (isNotEmptyArray(props.tokens)
? _jsxs(Vertical, { nogap: true, children: [input, _jsxs(Horizontal, { nogap: true, children: [_jsx(Section, { main: true }), _jsx(MenuEx, { trigger: _jsx(Link, { children: props.tokenMenuLabel || "tokens" }), items: props.tokens.map(token => ({
title: token.title, onClick: () => {
let newValue = props.value || "";
if (token.replace) {
newValue = token.value;
}
else {
if (isNullOrEmptyString(props.value))
newValue = token.value;
else
newValue += ` ${token.value}`;
}
props.onChange(null, {
value: newValue
});
}
})) })] })] })
: input);
};
const fullSize = {
width: '100% !important',
maxHeight: '100% !important'
};
const useStyles = makeStyles({
fullSizeTextArea: Object.assign(Object.assign({}, fullSize), { ['& > textarea']: fullSize }),
});
export const TextAreaEx = (props) => {
const cssNames = useStyles();
let css = [];
if (props.fullSize)
css.push(cssNames.fullSizeTextArea);
const textAreaRef = useRefWithState(null);
const recalcHeight = React.useCallback(() => {
if (textAreaRef.ref.current && props.growNoShrink) {
if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
}
}, useEffectOnlyOnMount);
useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
const onChange = useCallback((e, d) => {
var _a;
(_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, e, { value: d.value, elm: textAreaRef.ref.current });
recalcHeight();
}, [props.onChange]);
const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
let style = Object.assign({ height: '100%' }, props.style);
return (_jsx(Textarea, Object.assign({ ref: textAreaRef.set, className: mergeClasses(...css) }, props, { style: style, onKeyDown: needOnKeyDown ? (e) => {
var _a, _b, _c;
if (props.allowTab && e.key === "Tab") {
stopEvent(e);
const textArea = e.target;
pasteTextAtCursor(textArea, "\t");
onChange(e, { value: textArea.value });
return;
}
if (e.key === "Enter")
(_a = props.onOK) === null || _a === void 0 ? void 0 : _a.call(props);
if (e.key === "Escape")
(_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
(_c = props.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(props, e);
} : props.onKeyDown, onChange: (e, d) => {
var _a;
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e, d);
onChange(e, d);
} })));
};
export const InputNumberEx = (props) => {
const commonStyles = useCommonStyles();
const [valueStr, setValueStr] = React.useState(isNumber(props.defaultValue) ? `${props.defaultValue}` : '');
const [isValid, setIsValid] = React.useState(true);
const onChange = React.useCallback((ev, data) => {
const newValue = data.value;
setValueStr(newValue); //update text box anyways
const asNumber = props.allowDecimals ? parseFloat(newValue) : parseInt(newValue, 10);
const isValid = props.required ? !isNullOrNaN(asNumber) : isNullOrUndefined(asNumber) || !isNaN(asNumber);
setIsValid(isValid);
props.onChange(isValid ? asNumber : null);
}, [props.allowDecimals, props.onChange, props.required]);
const passProps = Object.assign(Object.assign({}, props), { defaultValue: undefined, value: undefined, onChange: undefined });
return (_jsxs(Vertical, { nogap: true, children: [_jsx(InputEx, Object.assign({ inputMode: props.allowDecimals ? "decimal" : "numeric" }, passProps, { value: valueStr, onChange: onChange })), !isValid && _jsx(Label, { className: commonStyles.validationLabel, children: "this is not a valid value" })] }));
};
//# sourceMappingURL=input.js.map