diff --git a/gooey_ui/components.py b/gooey_ui/components.py index 6878b1764..f9edd0323 100644 --- a/gooey_ui/components.py +++ b/gooey_ui/components.py @@ -157,6 +157,32 @@ def tabs(labels: list[str]) -> list[state.NestingCtx]: return [state.NestingCtx(tab) for tab in parent.children] +def controllable_tabs( + labels: list[str], key: str +) -> tuple[list[state.NestingCtx], int]: + index = state.session_state.get(key, 0) + for i, label in enumerate(labels): + if button( + label, + key=f"tab-{i}", + type="primary", + className="replicate-nav", + style={ + "background": "black" if i == index else "white", + "color": "white" if i == index else "black", + }, + ): + state.session_state[key] = index = i + state.experimental_rerun() + ctxs = [] + for i, label in enumerate(labels): + if i == index: + ctxs += [div(className="tab-content")] + else: + ctxs += [div(className="tab-content", style={"display": "none"})] + return ctxs, index + + def columns( spec, *, diff --git a/recipes/QRCodeGenerator.py b/recipes/QRCodeGenerator.py index c63af9888..4a50f3078 100644 --- a/recipes/QRCodeGenerator.py +++ b/recipes/QRCodeGenerator.py @@ -155,25 +155,18 @@ def render_form_v2(self): st.session_state.setdefault( "__qr_input_type_index", - "0" + 0 if st.session_state.get("qr_code_data") - else "1" + else 1 if st.session_state.get("vcard_data") - else "2", + else 2, ) - st.radio( - "", - options=["0", "1", "2"], + (url, vCard, existing), index = st.controllable_tabs( + ["🖊️ Link or Text", "📇 Contact vCard", "📷 Existing QR Code"], key="__qr_input_type_index", - format_func=lambda x: [ - "🖊️ Link or Text", - "📇 Contact vCard", - "📷 Existing QR Code", - ][int(x)], ) - index = st.session_state.get("__qr_input_type_index", "0") - if index == "0": + with url: st.text_area( """ ### 🔗 URL @@ -187,7 +180,7 @@ def render_form_v2(self): 'A shortened URL enables the QR code to be more beautiful and less "QR-codey" with fewer blocky pixels.' ) - if index == "2": + with existing: st.file_uploader( """ ### 📷 QR Code Image @@ -201,8 +194,7 @@ def render_form_v2(self): 'A shortened URL enables the QR code to be more beautiful and less "QR-codey" with fewer blocky pixels.' ) - if index == "1": - print("hi") + with vCard: st.caption( "We'll use the prompt above to create a beautiful QR code that when scanned on a phone, will add the info below as a contact. Great for conferences and geeky parties." )