From 4f6e6a6c80cc7ca01da27a0cdb4047f275f719db Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Fri, 4 Nov 2022 10:35:07 -0400 Subject: [PATCH 1/2] Add max_chars, type, placeholder, disabled and label_visibility --- src/st_keyup/__init__.py | 35 ++++++++++++++++++++++--- src/st_keyup/frontend/index.html | 2 +- src/st_keyup/frontend/main.js | 45 ++++++++++++++++++++++++++++++-- src/st_keyup/frontend/style.css | 25 ++++++++++++++++-- 4 files changed, 98 insertions(+), 9 deletions(-) diff --git a/src/st_keyup/__init__.py b/src/st_keyup/__init__.py index 7f9a2ec..0ece9bc 100644 --- a/src/st_keyup/__init__.py +++ b/src/st_keyup/__init__.py @@ -11,11 +11,17 @@ def st_keyup( label: str, value: str = "", + max_chars: Optional[int] = None, key: Optional[str] = None, + type: str = "default", debounce: Optional[int] = None, on_change: Optional[Callable] = None, args: Optional[Tuple[Any, ...]] = None, kwargs: Optional[Dict[str, Any]] = None, + *, + placeholder: str = "", + disabled: bool = False, + label_visibility: str = "visible", ): """ Generate a text input that renders on keyup, debouncing the input by the @@ -42,6 +48,11 @@ def st_keyup( key=key, debounce=debounce, default=value, + max_chars=max_chars, + type=type, + placeholder=placeholder, + disabled=disabled, + label_visibility=label_visibility, ) if on_change is not None: @@ -69,10 +80,26 @@ def main(): st.write(value) + "## Keyup input with hidden label" + value = st_keyup("You can't see this", label_visibility="hidden") + + "## Keyup input with collapsed label" + value = st_keyup("This either", label_visibility="collapsed") + + "## Keyup with max_chars 5" + value = st_keyup("Keyup with max chars", max_chars=5) + + "## Keyup input with password type" + value = st_keyup("Password", value="Hello World", type="password") + + "## Keyup input with disabled" + value = st_keyup("Disabled", value="Hello World", disabled=True) + "## Keyup input with default value" - value = st_keyup("Enter a second value", value="Hello World") + value = st_keyup("Default value", value="Hello World") - st.write(value) + "## Keyup input with placeholder" + value = st_keyup("Has placeholder", placeholder="A placeholder") "## Keyup input with 500 millesecond debounce" value = st_keyup("Enter a second value debounced", debounce=500) @@ -86,10 +113,10 @@ def on_change2(*args, **kwargs): st.write("Value changed!", args, kwargs) "## Keyup input with on_change callback" - value = st_keyup("Enter a third value", on_change=on_change) + value = st_keyup("Has an on_change", on_change=on_change) "## Keyup input with on_change callback and debounce" - value = st_keyup("Enter a third value...", on_change=on_change, debounce=1000) + value = st_keyup("On_change + debounce", on_change=on_change, debounce=1000) st.write(value) "## Keyup input with args" diff --git a/src/st_keyup/frontend/index.html b/src/st_keyup/frontend/index.html index fee62d8..48a9be1 100644 --- a/src/st_keyup/frontend/index.html +++ b/src/st_keyup/frontend/index.html @@ -13,7 +13,7 @@
- +
diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js index de4ff6d..16a1e82 100644 --- a/src/st_keyup/frontend/main.js +++ b/src/st_keyup/frontend/main.js @@ -20,9 +20,20 @@ const debounce = (callback, wait) => { function onRender(event) { // Get the RenderData from the event if (!window.rendered) { - const {label, value, debounce: debounce_time } = event.detail.args; + const { + label, + value, + debounce: debounce_time, + max_chars, + type, + placeholder, + disabled, + label_visibility + } = event.detail.args; + const input = document.getElementById("input_box"); const label_el = document.getElementById("label") + const root = document.getElementById("root") if (label_el) { label_el.innerText = label @@ -32,6 +43,36 @@ function onRender(event) { input.value = value } + if (type == "password") { + input.type = "password" + } + else { + input.type = "text" + } + + if (max_chars) { + input.maxLength = max_chars + } + + if (placeholder) { + input.placeholder = placeholder + } + + if (disabled) { + input.disabled = true + label.disabled = true + // Add "disabled" class to root element + root.classList.add("disabled") + } + + if (label_visibility == "hidden") { + root.classList.add("label-hidden") + } + else if (label_visibility == "collapsed") { + root.classList.add("label-collapsed") + Streamlit.setFrameHeight(45) + } + if (debounce_time > 0) { // is false if debounce_time is 0 or undefined input.onkeyup = debounce(onKeyUp, debounce_time) } @@ -46,4 +87,4 @@ function onRender(event) { Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender) Streamlit.setComponentReady() // Render with the correct height -Streamlit.setFrameHeight(85) \ No newline at end of file +Streamlit.setFrameHeight(73) \ No newline at end of file diff --git a/src/st_keyup/frontend/style.css b/src/st_keyup/frontend/style.css index 243151a..1756324 100644 --- a/src/st_keyup/frontend/style.css +++ b/src/st_keyup/frontend/style.css @@ -8,7 +8,7 @@ label { box-sizing: border-box; font-size: 13px; color: rgb(49 51 63 / 95%); - margin-bottom: 7px; + margin-bottom: 0.5rem; height: auto; min-height: 1.5rem; vertical-align: middle; @@ -18,6 +18,7 @@ label { align-items: center; position: absolute; left: 0; + top: 2px; } .input { text-size-adjust: 100%; @@ -56,7 +57,7 @@ label { left: 0; right: 0; bottom: 0; - top: 38px; + top: 33px; } input { text-size-adjust: 100%; @@ -126,3 +127,23 @@ input { border-top-color: rgb(255, 75, 75); border-bottom-color: rgb(255, 75, 75); } +.disabled label { + color: rgba(49, 51, 63, 0.4) !important; +} + +.disabled input { + cursor: not-allowed; + color: rgba(49, 51, 63, 0.4) !important; +} + +.label-hidden label { + display: none !important; +} + +.label-collapsed label { + display: none !important; +} + +.label-collapsed .input { + top: 0 !important; +} From df6e8bf1e1fb85d4411cc6f8a893b180aa2ee3e9 Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Fri, 4 Nov 2022 10:35:48 -0400 Subject: [PATCH 2/2] Bump version --- setup.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup.py b/setup.py index 597e795..e6d5e60 100644 --- a/setup.py +++ b/setup.py @@ -7,7 +7,7 @@ setuptools.setup( name="streamlit-keyup", - version="0.1.9", + version="0.2.0", author="Zachary Blackwood", author_email="zachary@streamlit.io", description="Text input that renders on keyup",