Merge pull request #11 from blackary/add-more-args

Add max_chars, type, placeholder, disabled and label_visibility arguments

setup.py

@@ -7,7 +7,7 @@
 
 setuptools.setup(
     name="streamlit-keyup",
-    version="0.1.9",
+    version="0.2.0",
     author="Zachary Blackwood",
     author_email="[email protected]",
     description="Text input that renders on keyup",

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"

src/st_keyup/frontend/index.html

@@ -13,7 +13,7 @@
     <div id="root">
       <label id="label" for="text_input">This is a label</label>
       <div class="input">
-        <input type="text" name="text_input" id="input_box" />
+        <input name="text_input" id="input_box" />
       </div>
     </div>
   </body>

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)
+Streamlit.setFrameHeight(73)

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;
+}