tycho-components 0.36.5 → 0.36.7

package/dist/common/AppForm/AppForm.js

@@ -59,7 +59,7 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
                 return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, height: "100%", infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
             }
             if (field.type === 'color') {
-                return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText }, name));
+                return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
             }
             const handleBlur = getOnBlurFn(field.attr);
             return (_jsx(TextField, { attr: name, label: field.size === 'small' ? undefined : field.name, placeholder: field.size === 'small' ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === 'small' ? '32px' : undefined, onBlur: handleBlur, infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));

package/dist/common/AppForm/FormColorField.d.ts

@@ -6,6 +6,7 @@ type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTran
     form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     disabled?: boolean;
     tooltipText?: string;
+    onChange?: (value: string) => void;
 };
-export default function FormColorField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ attr, label, form, disabled, tooltipText, }: Props<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+export default function FormColorField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ attr, label, form, disabled, tooltipText, onChange, }: Props<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/common/AppForm/FormColorField.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Icon, Tooltip } from 'tycho-storybook';
 import '../AppColorpicker/style.scss';
 const defaultColor = '#FFFFFF';
-export default function FormColorField({ attr, label, form, disabled, tooltipText, }) {
+export default function FormColorField({ attr, label, form, disabled, tooltipText, onChange, }) {
     const fieldName = attr;
     const { t } = useTranslation('common');
     const formValue = form.watch(fieldName);
@@ -16,6 +16,7 @@ export default function FormColorField({ attr, label, form, disabled, tooltipTex
     }, [formValue]);
     const handleConfirm = () => {
         form.setValue(fieldName, color, { shouldDirty: true });
+        onChange?.(color);
         setOpenColor(false);
     };
     return (_jsxs("div", { className: "form-color-field", children: [_jsxs("div", { className: "form-color-field-label", children: [_jsx("span", { children: label }), tooltipText && (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) }))] }), _jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => !disabled && setOpenColor(!openColor), onKeyDown: () => !disabled && setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: disabled ? -1 : 0 }), openColor && !disabled && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: handleConfirm, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] })] }));

package/dist/features/TreeView/TreeView.d.ts

@@ -1,6 +1,6 @@
-import { Core } from "cytoscape";
-import { Struct } from "../../configs/types/Struct";
-import "./style.scss";
+import { Core } from 'cytoscape';
+import { Struct } from '../../configs/types/Struct';
+import './style.scss';
 type Props = {
     struct?: Struct;
     expression?: string;

package/dist/features/TreeView/TreeView.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { saveAs } from "file-saver";
-import html2canvas from "html2canvas";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { IconButton } from "tycho-storybook";
-import AppPlaceholder from "../../common/AppPlaceholder";
-import DateUtils from "../../functions/DateUtils";
-import SentenceUtils from "../../functions/SentenceUtils";
-import TreeViewSearch from "./TreeViewSearch/TreeViewSearch";
-import CytoscapeTreeConverter from "./cytoscape/CytoscapeTreeConverter";
-import SyntreesCytoscape from "./cytoscape/SyntreesCytoscape";
-import "./style.scss";
-export default function TreeView({ struct, expression, selector = "canvas-tree", translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
-    const { t } = useTranslation("tree");
+import { saveAs } from 'file-saver';
+import html2canvas from 'html2canvas';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import AppPlaceholder from '../../common/AppPlaceholder';
+import DateUtils from '../../functions/DateUtils';
+import SentenceUtils from '../../functions/SentenceUtils';
+import TreeViewSearch from './TreeViewSearch/TreeViewSearch';
+import CytoscapeTreeConverter from './cytoscape/CytoscapeTreeConverter';
+import SyntreesCytoscape from './cytoscape/SyntreesCytoscape';
+import './style.scss';
+export default function TreeView({ struct, expression, selector = 'canvas-tree', translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
+    const { t } = useTranslation('tree');
     const [cy, setCy] = useState(null);
     const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
@@ -27,7 +27,7 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
         setCy(null);
         const element = document.getElementById(selector);
         if (element)
-            element.innerHTML = "";
+            element.innerHTML = '';
         if (!struct)
             return;
         let tree;
@@ -60,8 +60,8 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
     const downloadPsd = () => {
         if (!expression)
             return;
-        const blob = new Blob([expression], { type: "text/plain;charset=utf-8" });
-        saveAs(blob, "sentence.psd");
+        const blob = new Blob([expression], { type: 'text/plain;charset=utf-8' });
+        saveAs(blob, 'sentence.psd');
     };
     const generateImage = () => {
         if (!cy)
@@ -70,13 +70,13 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
         if (!cyContainer)
             return;
         html2canvas(cyContainer, {
-            backgroundColor: "white",
+            backgroundColor: 'white',
         }).then((canvas) => {
             canvas.toBlob((blob) => {
                 if (blob === null)
                     return;
-                saveAs(blob, "tree.jpg");
-            }, "image/jpeg", 1.0);
+                saveAs(blob, 'tree.jpg');
+            }, 'image/jpeg', 1.0);
         });
     };
     const reset = () => {
@@ -92,9 +92,9 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
             if (!token.ec) {
                 const leafId = token.p?.toString();
                 const converter = new CytoscapeTreeConverter();
-                converter["extraInfo"] = extraInfo;
+                converter['extraInfo'] = extraInfo;
                 const newLabel = converter.getLabelLeaf(token);
-                thisCy.$id(leafId).data("label", newLabel);
+                thisCy.$id(leafId).data('label', newLabel);
             }
         });
     };
@@ -116,51 +116,51 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
         load();
     }, [struct]);
     if (!struct) {
-        return (_jsx(AppPlaceholder, { text: placeholder || t("placeholder.sentence.notparsed") }));
+        return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
     }
-    return (_jsxs("div", { className: "tree-view-container", children: [invalid && (_jsx("div", { className: "tree-placeholder-overlay", children: _jsx(AppPlaceholder, { text: placeholder || t("placeholder.sentence.notparsed") }) })), _jsx("div", { className: "floating-buttons", children: cy &&
+    return (_jsxs("div", { className: "tree-view-container", children: [invalid && (_jsx("div", { className: "tree-placeholder-overlay", children: _jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }) })), _jsx("div", { className: "floating-buttons", children: cy &&
                     getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
                         .filter((btn) => btn.condition)
                         .map((btn, i) => {
-                        return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "small", mode: "ghost" }, i));
+                        return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "medium", iconSize: "medium", mode: "ghost" }, i));
                     }) }), showSearchModal && cy && (_jsx(TreeViewSearch, { struct: struct, cy: cy, onClose: closeSearchModal, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria })), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
-                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t("date.parsed"), " ", DateUtils.formatDateTime(struct.parsed, "dd/MM/yyyy HH:mm:ss")] }))] }))] }));
+                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
 }
 const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression, openSearchModal) => [
     {
         condition: true,
-        title: "button.download.tree",
+        title: 'button.download.tree',
         onClick: generateImage,
-        icon: "download",
+        icon: 'download',
     },
     {
         condition: true,
-        title: "button.recenter.tree",
+        title: 'button.recenter.tree',
         onClick: reset,
-        icon: "center_focus_weak",
+        icon: 'center_focus_weak',
     },
     {
         condition: !!expression,
-        title: "button.download.penn",
+        title: 'button.download.penn',
         onClick: downloadPsd,
-        icon: "graph_4",
+        icon: 'graph_4',
     },
     {
         condition: !!onExpand,
-        title: "button.expand.tree",
+        title: 'button.expand.tree',
         onClick: onExpand || (() => { }),
-        icon: "open_in_full",
+        icon: 'open_in_full',
     },
     {
         condition: true,
-        title: "button.info",
+        title: 'button.info',
         onClick: toggleInfo,
-        icon: "info",
+        icon: 'info',
     },
     {
         condition: true,
-        title: "button.search",
+        title: 'button.search',
         onClick: openSearchModal || (() => { }),
-        icon: "search",
+        icon: 'search',
     },
 ];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.36.5",
+  "version": "0.36.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {