DSWidgets Val Town App

\n {state.widgets.map((widget) => (\n \n setState((prev) => ({\n ...prev,\n values: {\n ...prev.values,\n [widget.id]: nextValue,\n },\n }))\n }\n />\n ))}\n

{JSON.stringify(state.values, null, 2)}

\n );\n}\n\nfunction getDefaultValues(widgets: Widget[]): Record {\n const defaults: Record = {};\n for (const widget of widgets) {\n if (widget.type === \"checkbox\") {\n defaults[widget.id] = widget.value ?? false;\n } else if (widget.type === \"radio\") {\n defaults[widget.id] = widget.selected ?? \"\";\n } else if (widget.type === \"select\") {\n defaults[widget.id] = widget.selected ?? null;\n } else if (widget.type === \"slider\") {\n defaults[widget.id] = widget.value ?? 0;\n }\n }\n return defaults;\n}\n\ninterface WidgetRendererProps {\n widget: Widget;\n value: PrimitiveValue | undefined;\n onChange: (value: PrimitiveValue) => void;\n}\n\nfunction WidgetRenderer({ widget, value, onChange }: WidgetRendererProps) {\n const rowStyles: CSSProperties = { marginBottom: \"14px\" };\n const labelStyles: CSSProperties = {\n display: \"block\",\n marginBottom: \"8px\",\n fontWeight: 600,\n };\n\n if (widget.type === \"checkbox\") {\n return (\n \n onChange(event.target.checked)}\n />{\" \"}\n {widget.label ?? widget.id}\n \n );\n }\n\n if (widget.type === \"radio\") {\n return (\n

\n {widget.label ?? widget.id}\n {widget.choices.map((choice) => (\n \n onChange(choice.value)}\n />{\" \"}\n {choice.label}\n \n ))}\n

\n );\n }\n\n if (widget.type === \"select\") {\n return (\n

\n {widget.label ?? widget.id}\n onChange(event.target.value || null)}\n >\n \n {widget.choices.map((choice) => (\n \n ))}\n \n

\n );\n }\n\n return (\n

\n \n {widget.label ?? widget.id}: {Number(value ?? 0)}\n \n onChange(Number(event.target.value))}\n />\n

\n );\n}\n","deleted","label",[176,157],"frontend","permalink","https://www.val.town/x/noche/valwidgets/code/frontend/App.tsx","extension","actionData","errors"]