laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Autofocus for components (#1053)

Browse Source
This commit is contained in:
Thomas Brandého 2023-05-18 21:44:49 +02:00 committed by GitHub
parent d1703f41b6
commit d729ba6ea6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pynecone/.templates/jinja/web/pages/index.js.jinja2
View File

@ -18,7 +18,8 @@ export default function Component() {
const {{const.socket}} = useRef(null) const {{const.socket}} = useRef(null)
const { isReady } = {{const.router}} const { isReady } = {{const.router}}
const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}() const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}()
const focusRef = useRef();
const Event = (events, _e) => { const Event = (events, _e) => {
preventDefault(_e); preventDefault(_e);
{{state_name|react_setter}}({ {{state_name|react_setter}}({
@ -55,6 +56,8 @@ export default function Component() {
await updateState({{state_name}}, {{state_name|react_setter}}, {{const.result}}, {{const.result|react_setter}}, {{const.router}}, {{const.socket}}.current) await updateState({{state_name}}, {{state_name|react_setter}}, {{const.result}}, {{const.result|react_setter}}, {{const.router}}, {{const.socket}}.current)
} }
if (focusRef.current)
focusRef.current.focus();
update() update()
}) })
useEffect(() => { useEffect(() => {

2
pynecone/.templates/jinja/web/pages/utils.js.jinja2
View File

@ -23,7 +23,7 @@
{# component: component dictionary #} {# component: component dictionary #}
{% macro render_self_close_tag(component) %} {% macro render_self_close_tag(component) %}
{%- if component.name|length %} {%- if component.name|length %}
<{{ component.name }} {{- render_props(component.props) }}/> <{{ component.name }} {{- render_props(component.props) }}{% if component.autofocus %} ref={focusRef} {% endif %}/>
{%- else %} {%- else %}
{{- component.contents }} {{- component.contents }}
{%- endif %} {%- endif %}

4
pynecone/components/component.py
View File

@ -61,6 +61,9 @@ class Component(Base, ABC):
# Special component props. # Special component props.
special_props: Set[Var] = set() special_props: Set[Var] = set()
# Whether the component should take the focus once the page is loaded
autofocus: bool = False
@classmethod @classmethod
def __init_subclass__(cls, **kwargs): def __init_subclass__(cls, **kwargs):
"""Set default properties. """Set default properties.
@ -420,6 +423,7 @@ class Component(Base, ABC):
contents=str(tag.contents), contents=str(tag.contents),
props=tag.format_props(), props=tag.format_props(),
), ),
autofocus=self.autofocus,
) )
def _get_custom_code(self) -> Optional[str]: def _get_custom_code(self) -> Optional[str]:

2
pynecone/pc.py
View File

@ -84,7 +84,7 @@ def run(
frontend_port = get_config().port if port is None else port frontend_port = get_config().port if port is None else port
backend_port = get_config().backend_port if backend_port is None else backend_port backend_port = get_config().backend_port if backend_port is None else backend_port
# If --no-frontend-only and no --backend-only, then turn on frontend and backend both # If no --frontend-only and no --backend-only, then turn on frontend and backend both
if not frontend and not backend: if not frontend and not backend:
frontend = True frontend = True
backend = True backend = True