@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
103 lines • 8.97 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { MenuItem, MessageBar, Overflow, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "@fluentui/react-components";
import { AddRegular, DismissRegular, EditRegular } from "@fluentui/react-icons";
import { isNotEmptyString, isString } from "@kwiz/common";
import { useCallback, useMemo, useState } from "react";
import { useAlerts } from "../helpers";
import { useKWIZFluentContext } from "../helpers/context-internal";
import { ButtonEX, ButtonEXPrimarySubtle } from "./button";
import { InputEx } from "./input";
import { KWIZOverflowV2 } from "./kwizoverflow2";
import { Prompter } from "./prompt";
import { TagEx } from "./tag-ex";
import { Vertical } from "./vertical";
export function OptionsEditor(props) {
var _a, _b, _c, _d, _e, _f, _g;
const ctx = useKWIZFluentContext();
const alerts = useAlerts();
const [stateValues, setStateValues] = useState(props.defaultValue);
const isKeyValue = useMemo(() => {
return isString(props.newItem()) ? false : true;
}, []);
const value = useMemo(() => {
const valueArr = Array.isArray(props.value)
? props.value
: Array.isArray(props.defaultValue)
? stateValues
: [];
//normalize value to conform with newItem type
return valueArr.map(o => {
const normalized = isKeyValue
? isString(o) ? { key: o, value: o } : o
: isString(o) ? o : o.key;
return normalized;
});
}, [props.value, stateValues, isKeyValue]);
const setValue = useCallback((newValue) => {
setStateValues(newValue);
props.onChange(newValue);
}, []);
return _jsxs(_Fragment, { children: [alerts.alertPrompt, _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.lbl_value) === null || _b === void 0 ? void 0 : _b.call(_a)) || "Value" }), isKeyValue && _jsx(TableHeaderCell, { children: ((_d = (_c = ctx.strings) === null || _c === void 0 ? void 0 : _c.lbl_text) === null || _d === void 0 ? void 0 : _d.call(_c)) || "Text" }), _jsx(TableHeaderCell, {})] }) }), _jsxs(TableBody, { children: [value.map((v, i) => {
var _a, _b, _c, _d, _e, _f;
return _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(InputEx, { placeholder: ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.placeholder_input) === null || _b === void 0 ? void 0 : _b.call(_a)) || "Enter value here", value: isString(v) ? v : v.key, onChange: (e, data) => {
const newValue = value.slice();
if (isString(newValue[i]))
newValue[i] = data.value;
else
newValue[i].key = data.value;
setValue(newValue);
} }) }), (isKeyValue && !isString(v)) && _jsx(TableCell, { children: _jsx(InputEx, { placeholder: ((_d = (_c = ctx.strings) === null || _c === void 0 ? void 0 : _c.placeholder_input) === null || _d === void 0 ? void 0 : _d.call(_c, { context: "text" })) || "Enter text here", value: v.value, onChange: (e, data) => {
const newValue = value.slice();
if (isString(newValue[i]))
return; //no value
newValue[i].value = data.value;
setValue(newValue);
} }) }), _jsx(TableCell, { children: _jsx(ButtonEX, { icon: _jsx(DismissRegular, {}), title: ((_f = (_e = ctx.strings) === null || _e === void 0 ? void 0 : _e.btn_remove) === null || _f === void 0 ? void 0 : _f.call(_e)) || "Remove", onClick: () => {
var _a, _b;
return alerts.confirmEX(((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.confirm_remove) === null || _b === void 0 ? void 0 : _b.call(_a, { context: "option" })) || "Are you sure you want to remove this option?", () => {
const newValue = value.slice();
newValue.splice(i, 1);
setValue(newValue);
});
} }) })] }, i);
}), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, children: _jsx(ButtonEX, { icon: _jsx(AddRegular, {}), title: ((_f = (_e = ctx.strings) === null || _e === void 0 ? void 0 : _e.add_custom) === null || _f === void 0 ? void 0 : _f.call(_e, { cap: true, param: ((_g = ctx.strings) === null || _g === void 0 ? void 0 : _g.option()) || "option" })) || "Add option", showTitleWithIcon: true, onClick: () => {
const newValue = value.slice();
newValue.push(props.newItem());
setValue(newValue);
} }) }) })] })] })] });
}
export function OptionsEditorInDialog(props) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const ctx = useKWIZFluentContext();
const value = props.value || [];
const [showEdit, setShowEdit] = useState(false);
const [error, setError] = useState();
const [editValues, setEditValues] = useState();
const [inProgress, setInProgress] = useState(false);
return _jsxs(_Fragment, { children: [showEdit && _jsx(Prompter, { title: ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.btn_edit_param) === null || _b === void 0 ? void 0 : _b.call(_a, { param: ((_d = (_c = ctx.strings) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.call(_c)) || "options" })) || "Edit options", okButtonText: ((_f = (_e = ctx.strings) === null || _e === void 0 ? void 0 : _e.btn_save) === null || _f === void 0 ? void 0 : _f.call(_e)) || "Save", okButtonProps: { appearance: "primary", disabled: inProgress }, onCancel: () => setShowEdit(false), onOK: () => __awaiter(this, void 0, void 0, function* () {
setInProgress(true);
const result = yield props.onChange(editValues.filter(o => isString(o) ? isNotEmptyString(o) : isNotEmptyString(o.key)));
if (!result.success) {
setError(result.error || "Something went wrong");
}
else
setShowEdit(false);
setInProgress(false);
}), children: _jsxs(Vertical, { children: [isNotEmptyString(error) && _jsx(MessageBar, { intent: "error", children: error }), _jsx(OptionsEditor, { value: editValues, newItem: props.newItem, onChange: newValue => setEditValues(newValue) })] }) }), _jsx(KWIZOverflowV2, { items: value, renderItem: (item => Overflow
? _jsx(MenuItem, { children: isString(item) ? item : (item === null || item === void 0 ? void 0 : item.value) || '' })
: _jsx(TagEx, { text: isString(item) ? item : (item === null || item === void 0 ? void 0 : item.value) || '', size: "extra-small" })), children: _jsx(ButtonEXPrimarySubtle, { icon: _jsx(EditRegular, {}), title: ((_h = (_g = ctx.strings) === null || _g === void 0 ? void 0 : _g.btn_edit) === null || _h === void 0 ? void 0 : _h.call(_g)) || "Edit", onClick: () => {
setError(null);
setEditValues(value);
setShowEdit(true);
} }) })] });
}
//# sourceMappingURL=options-editor.js.map