lino-react 26.3.2__tar.gz → 26.4.0__tar.gz

{lino_react-26.3.2 → lino_react-26.4.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: lino_react
-Version: 26.3.2
+Version: 26.4.0
 Summary: The React front end for Lino
 Project-URL: Homepage, https://react.lino-framework.org
 Project-URL: Repository, https://gitlab.com/lino-framework/react

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/__init__.py

@@ -3,7 +3,7 @@
 # License: GNU Affero General Public License v3 (see file COPYING for details)
 # Source documentation see https://react.lino-framework.org/dev
 
-__version__ = '26.3.2'
+__version__ = '26.4.0'
 
 srcref_url = 'https://gitlab.com/lino-framework/react/blob/master/%s'
 # doc_trees = []

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/__init__.py

@@ -46,8 +46,30 @@ class Plugin(Plugin):
     app_link_fix_button_label = _("Fix app link settings")
     app_link_dismiss_button_label = _("Dismiss")
 
+    users_themes = None
+    """Themes that are available for users to choose from.
+
+    If set to 'all', all themes from `PrimeReactThemes` will be available.
+    If set to a whitespace-separated string of theme names, those themes will be available.
+    If set to a list of `PrimeReactTheme` values, those themes will be available.
+    If set to None, users cannot choose a theme and the default theme will be used.
+    """
+
     # media_base_url = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/"
 
+    def before_analyze(self):
+        if self.users_themes is not None:
+            PrimeReactThemes = self.site.models.react.PrimeReactThemes
+            if self.users_themes == 'all':
+                self.users_themes = list(PrimeReactThemes.get_list_items())
+            elif isinstance(self.users_themes, str):
+                self.users_themes = [
+                    PrimeReactThemes.get_by_value(tn) for tn in self.users_themes.split() if tn]
+            else:
+                self.users_themes = [PrimeReactThemes.get_by_value(tn) for tn in self.users_themes]
+
+        return super().before_analyze()
+
     def on_ui_init(self, kernel):
         from .renderer import Renderer
         self.renderer = Renderer(self)

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/ActionHandler.tsx

@@ -327,6 +327,8 @@ export class ActionHandler extends DynDep implements ActionHandler {
     ): t.QueryParams | t.StateClone => {
         holder[constants.URL_PARAM_SUBST_USER] = this.context.value[
             constants.URL_PARAM_SUBST_USER];
+        // holder[constants.URL_PARAM_COLOR_SCHEME] = this.context.value[
+        //     constants.URL_PARAM_COLOR_SCHEME];
         holder[constants.URL_PARAM_USER_LANGUAGE] = this.context.value[
             constants.URL_PARAM_USER_LANGUAGE];
         holder[constants.URL_PARAM_LINO_VERSION] = window.Lino[
@@ -414,14 +416,16 @@ export class ActionHandler extends DynDep implements ActionHandler {
         return queryParams;
     }
 
-    getAction = (
+    getAction = async (
         action_full_name: string, preprocess: boolean = true
-    ): {action: t.Action, preprocessedStack: t.PreprocessedStack} => {
+    ): Promise<{action: t.Action, preprocessedStack: t.PreprocessedStack}> => {
         const action: t.Action = this.context.APP.state.site_data.action_definitions[action_full_name];
         const preprocessedStack: t.PreprocessedStack = {
             [constants.URL_PARAM_ACTION_NAME]: action[constants.URL_PARAM_ACTION_NAME]};
-        if (preprocess) this.preprocess(action.preprocessor, preprocessedStack);
-        return {action: action, preprocessedStack: preprocessedStack}
+        if (preprocess) await this.preprocess(action.preprocessor, preprocessedStack);
+        constants.debugMessage("ActionHandler.getAction(); action_full_name", action_full_name,
+            "action", action, "preprocessedStack", preprocessedStack);
+        return {action, preprocessedStack};
     }
 
     getCallback = (action_name: string): t.ResponseCallback => {
@@ -672,11 +676,9 @@ export class ActionHandler extends DynDep implements ActionHandler {
         }
 
         if (response_callback) {
-            let ret;
-            if (this.ex.u.isAwaitable(response_callback)) {
-                ret = await response_callback.call(this, response);
-            } else {
-                ret = response_callback.call(this, response);
+            let ret = response_callback.call(this, response);
+            if (this.ex.u.isAwaitable(ret)) {
+                ret = await ret;
             }
             if (ret) return;
         }
@@ -905,14 +907,22 @@ export class ActionHandler extends DynDep implements ActionHandler {
         return this.parser.parse(clone) as t.StateClone;
     }
 
-    preprocess = (
+    preprocess = async (
         preprocessor: string, preprocessedStack: t.PreprocessedStack = {}
-    ): t.QueryParams => {
+    ): Promise<t.QueryParams> => {
         if (!this.context.filled(preprocessor)) return preprocessedStack;
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         Lino;
         const fn = eval(preprocessor);
         let ret: t.QueryParams;
-        if (this.context.filled(fn)) ret = fn(this.context, preprocessedStack);
+        if (this.context.filled(fn)) {
+            ret = fn(this.context, preprocessedStack);
+            if (this.ex.u.isAwaitable(ret)) {
+                this.context.APP.setLoadMask();
+                ret = await ret;
+                this.context.APP.unsetLoadMask();
+            }
+        }
         if (this.context.filled(ret) && ret instanceof Object) Object.assign(
             preprocessedStack, ret);
         return preprocessedStack;
@@ -954,7 +964,7 @@ export class ActionHandler extends DynDep implements ActionHandler {
     }
 
     checkAndRunAction = async (kwargs: t.ArgsRunAction): Promise<void> => {
-        const { action } = this.getAction(kwargs.action_full_name, false);
+        const { action } = await this.getAction(kwargs.action_full_name, false);
         if (this.context.isModified() && action.auto_save)
             await this.saveModifiedContent();
 
@@ -975,7 +985,37 @@ export class ActionHandler extends DynDep implements ActionHandler {
     runAction = async ({action_full_name, actorId, status, sr = [], rowIndex, default_record_id,
         response_callback, clickCatch = false, pollContext = false
     }: t.ArgsRunAction): Promise<void> => {
-        const {action, preprocessedStack} = this.getAction(action_full_name);
+        const {action, preprocessedStack} = await this.getAction(action_full_name);
+        if (action.beforeshow && !eval(action.beforeshow)) {
+            this.context.APP.toast.show({
+                severity: "warn",
+                summary: this.ex.i18n.t("Action cannot be performed"),
+                detail: this.ex.i18n.t("Does NOT have required frontend features."),
+            });
+            this.context.APP.unsetLoadMask();
+            return;
+        }
+
+        if (constants.isAndroidWebView()
+            && action[constants.URL_PARAM_ACTION_NAME] === "switch_color_scheme") {
+            try {
+                const currentScheme = window.Lino.color_scheme;
+                const nextScheme = currentScheme === "dark" ? "light" : "dark";
+                window.AndroidBridge?.setColorSchemeMode?.(nextScheme);
+                if (nextScheme === window.Lino.users_color_scheme) {
+                    await this.context.history.replaceByType(
+                        {[constants.URL_PARAM_COLOR_SCHEME]: nextScheme},
+                        constants.PARAM_TYPE_WINDOW,
+                        false,
+                        true,
+                    );
+                    await this.context.APP.reset();
+                    return;
+                }
+            } catch (error) {
+                console.error("Failed to sync Android color scheme for switch_color_scheme", error);
+            }
+        }
 
         const execute_args: t.ArgsExecute = {
             action: action,
@@ -1128,7 +1168,7 @@ export class ActionHandler extends DynDep implements ActionHandler {
         } else
         if (this.context.contextType === constants.CONTEXT_TYPE_TEXT_FIELD) {
             let resp_data;
-            const { action } = this.getAction(ad.submit_detail);
+            const { action } = await this.getAction(ad.submit_detail);
             await this.XHRPutPost({path: this.context.value.path.slice(1),
                 body: Object.assign(this.commonParams(), {[constants.URL_PARAM_ACTION_NAME]: action[constants.URL_PARAM_ACTION_NAME]},
                 dataContext.mutableContext.data), response_callback: (data) => {
@@ -1161,7 +1201,8 @@ export class ActionHandler extends DynDep implements ActionHandler {
             Object.values(dataContext.refStore.virtualLeaves).forEach(elem => (
                 (elem as React.Component).setState(
                     {key: this.context.newSlug().toString()})));
-            this.context.history.replaceState({editing_mode: false});
+            const disabledFields = dataContext.mutableContext.data.disabled_fields || {};
+            this.context.history.replaceState({editing_mode: false, disabledFields});
         }
         dataContext.root.setState({loading: false});
         // consider this situation as signIn since user language may have been changed

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/App.jsx

@@ -117,6 +117,11 @@ class App extends Component {
                     {[constants.URL_PARAM_SUBST_USER]: params[constants.URL_PARAM_SUBST_USER]},
                     constants.PARAM_TYPE_WINDOW, false, true);
             }
+            if (["light", "dark"].includes(params[constants.URL_PARAM_COLOR_SCHEME])) {
+                await this.URLContext.history.replaceByType(
+                    {[constants.URL_PARAM_COLOR_SCHEME]: params[constants.URL_PARAM_COLOR_SCHEME]},
+                    constants.PARAM_TYPE_WINDOW, false, true);
+            }
 
             this.storageName = `lino-${window.Lino.site_name}-json-cache`;
             const request = window.indexedDB.open(this.storageName, 1);
@@ -301,11 +306,15 @@ class App extends Component {
             }
 
             if (!navigated) {
-                // Navigate using history API
-                this.URLContext.history.pushPath({
-                    pathname: pathname,
-                    params: params
-                });
+                if (pathname === this.URLContext.value.path) {
+                    this.URLContext.actionHandler.refreshChildren([this.URLContext]);
+                } else {
+                    // Navigate using history API
+                    this.URLContext.history.pushPath({
+                        pathname: pathname,
+                        params: params
+                    });
+                }
             }
 
             constants.debugMessage('navigateFromNative: Navigated to', pathname, 'with params', params);
@@ -396,6 +405,25 @@ class App extends Component {
         this.setState({showFixAppLinksCta: false}, this.notifyAppLinkBannerLayoutChanged);
     }
 
+    async syncAndroidColorSchemeToWindowGlobals() {
+        if (!constants.isAndroidWebView()) {
+            return;
+        }
+        try {
+            const colorScheme = window.AndroidBridge?.getEffectiveColorScheme?.();
+            if (["light", "dark"].includes(colorScheme)) {
+                await this.URLContext.history.replaceByType(
+                    {[constants.URL_PARAM_COLOR_SCHEME]: colorScheme},
+                    constants.PARAM_TYPE_WINDOW,
+                    false,
+                    true,
+                );
+            }
+        } catch (error) {
+            console.error("Failed to sync Android color scheme", error);
+        }
+    }
+
     /**
      * Executes when the browser's reload button is clicked.
      *
@@ -761,6 +789,32 @@ class App extends Component {
             children: <LinoProgressBar loading={true} progress={10}/>
         })
         this.setInitProgress(20);
+
+        await this.syncAndroidColorSchemeToWindowGlobals();
+
+        // reload with substitute user if su_id in URL doesn't match current substitute user
+        const su_id = this.URLContext.value[constants.URL_PARAM_SUBST_USER];
+        const color_scheme = this.URLContext.value[constants.URL_PARAM_COLOR_SCHEME];
+        const shouldReloadForSubstUser = su_id != window.Lino.subst_user_id;
+        const shouldReloadForColorScheme = ["light", "dark"].includes(color_scheme)
+            && color_scheme !== window.Lino.color_scheme;
+        if (shouldReloadForSubstUser || shouldReloadForColorScheme) {
+            const url = new URL(window.location.href);
+            if (this.URLContext.filled(su_id)) {
+                url.searchParams.set(constants.URL_PARAM_SUBST_USER, su_id);
+            } else {
+                url.searchParams.delete(constants.URL_PARAM_SUBST_USER);
+            }
+            if (["light", "dark"].includes(color_scheme)) {
+                url.searchParams.set(constants.URL_PARAM_COLOR_SCHEME, color_scheme);
+            } else {
+                url.searchParams.delete(constants.URL_PARAM_COLOR_SCHEME);
+            }
+            window.history.replaceState({}, '', url);
+            window.location.reload();
+            return
+        }
+
         await this.fetch_user_settings(signIn);
         if (signIn) {
             // Check if we're running in Android WebView
@@ -960,8 +1014,19 @@ class App extends Component {
     }
 
     async reload() {
+        // const su_id = this.URLContext.value[constants.URL_PARAM_SUBST_USER];
+
         await this.URLContext.iDBclear();
         window.localStorage.clear();
+
+        // if (this.URLContext.filled(su_id)) {
+        //     const url = new URL(window.location.href);
+        //     url.searchParams.set(constants.URL_PARAM_SUBST_USER, su_id);
+        //     window.history.replaceState({}, '', url);
+        // }
+        const url = new URL(window.location.href);
+        url.searchParams.set("timestamp", Date.now().toString());
+        window.history.replaceState({}, '', url);
         window.location.reload();
     }
 

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/AppTopbar.jsx

@@ -75,6 +75,14 @@ export class AppTopbar extends Component {
         );
         const scrollY = window.scrollY || window.pageYOffset || 0;
         const topOffset = Math.max(0, bannersHeight - scrollY);
+        const { APP } = this.upController;
+        if (APP.tbContainer) {
+            const topbarHeight = APP.tbContainer.offsetHeight;
+            const totalHeight = topOffset + topbarHeight;
+            document.documentElement.style.setProperty('--topbar-offset', `${topOffset}px`);
+            document.documentElement.style.setProperty('--topbar-height', `${topbarHeight}px`);
+            document.documentElement.style.setProperty('--topbar-total-height', `${totalHeight}px`);
+        }
         if (this.state.topOffset !== topOffset) {
             this.setState({topOffset});
         }

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/AutoComplete.tsx

@@ -24,7 +24,7 @@ export class AutoComplete extends LeafComponentInput {
     hasClearButton: boolean;
     clear?: () => void;
     props: t.LeafInputProps;
-    choicesURL?(query: string, start: number, limit: number): string;
+    choicesURL?(query: string, start: number, limit: number): Promise<string>;
     clearButton?: HTMLElement | null;
     onSelect?(e: { value: { text: string; value: string | number | null } }): void;
     scroller: { getElementRef: () => React.RefObject<HTMLElement> } | null;
@@ -32,6 +32,29 @@ export class AutoComplete extends LeafComponentInput {
     controller: any;
     state: t.ObjectAny & {textSelected: boolean; initialHang?: boolean;};
 
+    getDynamicDropdownWidthCh = (): number => {
+        const rowTexts = (this.state.rows || []).map(row => {
+            if (!row) return "";
+            if (typeof row === "string") return row;
+            return row.text || "";
+        });
+        const longestText = Math.max(
+            0,
+            this.state.value?.text?.length || 0,
+            ...rowTexts.map(text => text.length)
+        );
+        return Math.min(Math.max(longestText + 4, 30), 120);
+    }
+
+    getDynamicDropdownStyle = (): React.CSSProperties => {
+        const widthCh = this.getDynamicDropdownWidthCh();
+        return {
+            minWidth: '30ch',
+            width: `${widthCh}ch`,
+            maxWidth: '90vw',
+        };
+    }
+
     constructor(props: t.LeafInputProps) {
         super(props);
         this.state = {
@@ -65,13 +88,13 @@ export class AutoComplete extends LeafComponentInput {
         this.controller = new this.ex.AbortController.default();
     }
 
-    onKeyDown = (event) => {
+    onKeyDown = async (event) => {
         super.onKeyDown(event);
         if (["Enter", "NumpadEnter"].includes(event.code) && this.inputEl.getOverlay())
             event.stopPropagation();
         if (['ArrowDown', 'ArrowUp'].includes(event.code)) {
             if (this.inputEl && !this.inputEl.getOverlay()) {
-                if (!this.state.rows.length) this.getChoices(this.state[constants.URL_PARAM_FILTER]);
+                if (!this.state.rows.length) await this.getChoices(this.state[constants.URL_PARAM_FILTER]);
                 this.inputEl.show();
             } else if (!this.state.lazyLoading) {
                 const sItem = this.scroller.getElementRef().current.querySelector('li.p-highlight');
@@ -92,15 +115,16 @@ export class AutoComplete extends LeafComponentInput {
         return <div>{i || "\u00a0"}</div>
     }
 
-    getChoices = (query: string, limit?: number) => {
+    getChoices = async (query: string, limit?: number) => {
         this.controller.abort();
         this.controller = new this.ex.AbortController.default();
         limit = limit || this.state[constants.URL_PARAM_LIMIT];
         const start = limit === this.state[constants.URL_PARAM_LIMIT]
             ? this.state[constants.URL_PARAM_START]
             : this.state[constants.URL_PARAM_LIMIT];
+        const path = await this.choicesURL(query, start, limit);
         this.upController.actionHandler.silentFetch({
-            path: this.choicesURL(query, start, limit),
+            path: path,
             signal: this.controller.signal
         }).then((data) => {
             let rows = data.rows;
@@ -132,16 +156,17 @@ export class AutoComplete extends LeafComponentInput {
         if (this.state.value === null) return null;
         return <React.Fragment><this.ex.prAutoComplete.AutoComplete
             autoFocus={!this.props.urlParams.controller.globals.isMobile && this.leafIndexMatch()}
-            completeMethod={(e) => {
+            completeMethod={async (e) => {
                 if (e.originalEvent.type === 'click' && this.state.rows.length) {
                     this.inputEl.show();
                     return;
                 }
                 this.state.rows = [];
-                this.getChoices(e.query, this.state[constants.URL_PARAM_LIMIT]);
+                await this.getChoices(e.query, this.state[constants.URL_PARAM_LIMIT]);
             }}
             dropdown={true}
             field="text"
+            inputStyle={{background: "transparent"}}
             itemTemplate={this.itemTemplate}
             onChange={e => this.setState({
                 value: Object.assign(this.state.value, {
@@ -160,6 +185,7 @@ export class AutoComplete extends LeafComponentInput {
                 }
             }}
             ref={this.onInputRef}
+            panelStyle={this.getDynamicDropdownStyle()}
             scrollHeight="200px"
             suggestions={this.state.rows}
             tabIndex={this.props.tabIndex}
@@ -168,19 +194,19 @@ export class AutoComplete extends LeafComponentInput {
                 itemSize: 35,
                 lazy: true,
                 loading: this.state.lazyLoading,
-                onScrollIndexChange: (event) => {
+                onScrollIndexChange: async (event) => {
                     const l = this.state[constants.URL_PARAM_LIMIT];
                     if (l - event.first < 15 && !this.state.lazyLoading
                         && this.state.count > l
                     ) {
                         this.setState({lazyLoading: true});
-                        this.getChoices(
+                        await this.getChoices(
                             this.state[constants.URL_PARAM_FILTER], l + 15);
                     }
                 },
                 ref: el => this.scroller = el,
                 scrollHeight: "195px",
-                style: {minWidth: '30ch'},
+                style: this.getDynamicDropdownStyle(),
             }}
             {...customProps}/>
             {this.hasClearButton && this.props.elem.field_options.allowBlank
@@ -251,7 +277,7 @@ export class QuickFilter extends AutoComplete {
             value: null}
     }
 
-    choicesURL(query, start, limit) {
+    async choicesURL(query, start, limit) {
         return `choices/${this.props.urlParams.packId}/${this.props.urlParams.actorId}?${
             this.ex.queryString.default.stringify(Object.assign(this.upController
                 .actionHandler.defaultStaticParams(), {

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/ForeignKeyElement.jsx

@@ -80,7 +80,7 @@ export class ForeignKeyElement extends AutoComplete {
                 currentValue: snapshot.contextUpdate});
     }
 
-    choicesURL(query, start, limit) {
+    async choicesURL(query, start, limit) {
         let uc = this.props.urlParams;
         let actorData = uc.controller.static.actorData,
             // context_fields = actorData.choosers_dict && actorData.choosers_dict[this.props.elem.name],
@@ -106,7 +106,7 @@ export class ForeignKeyElement extends AutoComplete {
         let aH = uc.controller.actionHandler;
         let finalSlug = "";
         if (uc.action_full_name) {
-            const { action } = aH.getAction(uc.action_full_name, false)
+            const { action } = await aH.getAction(uc.action_full_name, false)
             if (action.has_parameters) finalSlug = `/${action[constants.URL_PARAM_ACTION_NAME]}`;
             if (action.select_rows) dataParams[constants.URL_PARAM_SELECTED] = uc[constants.URL_PARAM_SELECTED];
         }
@@ -140,7 +140,7 @@ export class ForeignKeyElement extends AutoComplete {
 
     onSelect(e) {
         this.setState({value: e.value});
-        this.update({[this.dataKey]: e.value.text,
+        this.update({[this.dataKey]: e.value.text || null,
             [this.dataKeyHidden]: e.value.value});
     }
 

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/LinoBbar.jsx

@@ -41,15 +41,26 @@ export class LinoBbar extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {...this.state, overflowShow: false};
+        this.state = {...this.state, overflowShow: false, buttons: null};
+        this._buttonsSignature = null;
+        this._buttonsUpdateSeq = 0;
         this.action2buttonProps = this.action2buttonProps.bind(this);
-        this.render_buttons = this.render_buttons.bind(this);
+        this.set_buttons = this.set_buttons.bind(this);
         this.render_overflow = this.render_overflow.bind(this);
         this.render_actionbutton = this.render_actionbutton.bind(this);
         this.render_splitActionButton = this.render_splitActionButton.bind(this);
         this.runAction = this.runAction.bind(this);
     }
 
+    onReady() {
+        this.set_buttons();
+    }
+
+    componentDidUpdate() {
+        if (!this.state.ready) return;
+        this.set_buttons();
+    }
+
     runAction(action, tba, event) {
         if (tba.js_handler) {
             eval(tba.js_handler);
@@ -96,6 +107,7 @@ export class LinoBbar extends Component {
             (action.select_rows && this.context[constants.URL_PARAM_SELECTED]
                 && this.context[constants.URL_PARAM_SELECTED].length === 0
             )
+            || (action.beforeshow && !eval(action.beforeshow))
             || this.context.controller.disabled(action[constants.URL_PARAM_ACTION_NAME])
             || (action[constants.URL_PARAM_ACTION_NAME] === 'submit_detail' && !this.context.editing_mode)
             || (this.props.onSide && !action.show_in_side_toolbar && action[constants.URL_PARAM_ACTION_NAME] !== 'submit_detail')
@@ -103,12 +115,14 @@ export class LinoBbar extends Component {
         );
         icon_and_label.tooltip = tba.help_text || action.label;
         icon_and_label.tooltipOptions = {position: this.props.onSide ? 'left' : 'bottom'};
+        constants.debugMessage("Button (on: %s) %s: %o", this.props.action_full_name,
+            action[constants.URL_PARAM_ACTION_NAME], icon_and_label);
 
         return icon_and_label;
     }
 
-    render_actionbutton(tba) {
-        let {action} = this.context.controller.actionHandler.getAction(tba[constants.URL_PARAM_ACTION_NAME], false);
+    async render_actionbutton(tba) {
+        let {action} = await this.context.controller.actionHandler.getAction(tba[constants.URL_PARAM_ACTION_NAME], false);
         if (action) {
             let icon_and_label = this.action2buttonProps(tba, action, true);
             if (icon_and_label.disabled) return
@@ -118,9 +132,11 @@ export class LinoBbar extends Component {
         }
     }
 
-    render_splitActionButton(combo) {
-        let actionArray = combo.menu.map(
-            n => this.context.controller.actionHandler.getAction(n[constants.URL_PARAM_ACTION_NAME], false).action);
+    async render_splitActionButton(combo) {
+        constants.debugMessage("Rendering split button %s: %o", combo.combo, combo);
+        let actionArray = await Promise.all(combo.menu.map(
+            async (n) => (await this.context.controller.actionHandler.getAction(n[constants.URL_PARAM_ACTION_NAME], false)).action));
+        constants.debugMessage("Split button %s: actions: %o", combo.combo, actionArray);
         if (actionArray[0]) {
             let model = actionArray.map((action, i) => {
                 let props = this.action2buttonProps(combo.menu[i], action, i === 0);
@@ -143,19 +159,46 @@ export class LinoBbar extends Component {
         }
     }
 
-    render_buttons() {
+    async set_buttons() {
+        const seq = ++this._buttonsUpdateSeq;
         let ba = this.context.controller.static.actorData.actions_list.find(ba => ba[constants.URL_PARAM_ACTION_NAME] === this.props.action_full_name);
-        if (!ba) return;
+        constants.debugMessage("Setting buttons for %s: %o", this.props.action_full_name, ba);
+        if (!ba) {
+            if (this.state.buttons !== null) this.setState({buttons: null});
+            this._buttonsSignature = null;
+            return;
+        }
         let tbas = ba.toolbarActions;
-        return tbas && tbas.map((tba) => {
+        if (!tbas || tbas.length === 0) {
+            if (this.state.buttons !== null) this.setState({buttons: null});
+            this._buttonsSignature = null;
+            return;
+        }
+        const buttons = await Promise.all(tbas.map(async (tba) => {
             if (tba.combo && tba.menu.length > 1) {
-                return this.render_splitActionButton(tba);
+                return await this.render_splitActionButton(tba);
             } else if (tba.combo) {
-                return this.render_actionbutton(tba.menu[0]);
+                return await this.render_actionbutton(tba.menu[0]);
             } else {
-                return this.render_actionbutton(tba);
+                return await this.render_actionbutton(tba);
             }
-        })
+        }));
+
+        if (seq !== this._buttonsUpdateSeq) return;
+
+        const signature = buttons
+            .filter(Boolean)
+            .map((button) => {
+                const props = button.props || {};
+                const modelCount = Array.isArray(props.model) ? props.model.length : 0;
+                return [props.className || '', props.label || '', props.icon || '', modelCount].join('|');
+            })
+            .join('||');
+
+        if (signature === this._buttonsSignature) return;
+
+        this._buttonsSignature = signature;
+        this.setState({buttons});
     }
 
     render() {
@@ -169,7 +212,7 @@ export class LinoBbar extends Component {
                 }}
                 tooltip={this.ex.i18n.t("Reload this view from the underlying database")}
                 tooltipOptions={{position: "bottom"}}/>}
-            {this.render_buttons()}
+            {this.state.buttons}
         </React.Fragment>
     }
 };

{lino_react-26.3.2 → lino_react-26.4.0}/lino_react/react/components/LinoBody.jsx

@@ -314,7 +314,7 @@ export class LinoBody extends Component {
                         maxWidth: '40px',
                         background: '#2255AA40',
                         borderRadius: '3px',
-                        zIndex: 999999
+                        zIndex: 999
                     }}>
                     <LinoToolbar
                         ref={ref => this.sideToolbar = ref}