nova/esp8266-react-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix issue with number inputs not serializing correctly due to setting values as strings instead of numbers (#94)

Browse Source 
consolidate number, string and checkbox value change functions

(cherry picked from commit 22c1590885db0534afabff74be7504ca9a0998b5)
This commit is contained in:
rjwats 2020-02-27 00:05:38 +00:00 committed by GitHub
parent a042633d8f
commit fb7053610f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
interface/src/components/RestController.tsx
View File

@ -5,7 +5,6 @@ import { redirectingAuthorizedFetch } from '../authentication';
export interface RestControllerProps<D> extends WithSnackbarProps {
handleValueChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => void;
handleCheckboxChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
handleSliderChange: (name: keyof D) => (event: React.ChangeEvent<{}>, value: number | number[]) => void;
setData: (data: D) => void;
@ -23,6 +22,17 @@ interface RestControllerState<D> {
errorMessage?: string;
}
const extractValue = (event: React.ChangeEvent<HTMLInputElement>) => {
switch (event.target.type) {
case "number":
return event.target.valueAsNumber;
case "checkbox":
return event.target.checked;
default:
return event.target.value
}
}
export function restController<D, P extends RestControllerProps<D>>(endpointUrl: string, RestController: React.ComponentType<P & RestControllerProps<D>>) {
return withSnackbar(
class extends React.Component<Omit<P, keyof RestControllerProps<D>> & WithSnackbarProps, RestControllerState<D>> {
@ -85,12 +95,7 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
}
handleValueChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
const data = { ...this.state.data!, [name]: event.target.value };
this.setState({ data });
}
handleCheckboxChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
const data = { ...this.state.data!, [name]: event.target.checked };
const data = { ...this.state.data!, [name]: extractValue(event) };
this.setState({ data });
}
@ -102,7 +107,6 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
render() {
return <RestController
handleValueChange={this.handleValueChange}
handleCheckboxChange={this.handleCheckboxChange}
handleSliderChange={this.handleSliderChange}
setData={this.setData}
saveData={this.saveData}

4
interface/src/ntp/NTPSettingsForm.tsx
View File

@ -28,14 +28,14 @@ class NTPSettingsForm extends React.Component<NTPSettingsFormProps> {
}
render() {
const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props;
const { data, handleValueChange, saveData, loadData } = this.props;
return (
<ValidatorForm onSubmit={saveData}>
<BlockFormControlLabel
control={
<Checkbox
checked={data.enabled}
onChange={handleCheckboxChange('enabled')}
onChange={handleValueChange('enabled')}
value="enabled"
/>
}

1
interface/src/security/ManageUsersForm.tsx
View File

@ -177,7 +177,6 @@ class ManageUsersForm extends React.Component<ManageUsersFormProps, ManageUsersF
onDoneEditing={this.doneEditingUser}
onCancelEditing={this.cancelEditingUser}
handleValueChange={this.handleUserValueChange}
handleCheckboxChange={this.handleUserCheckboxChange}
uniqueUsername={this.uniqueUsername}
/>
}

5
interface/src/security/UserForm.tsx
View File

@ -12,7 +12,6 @@ interface UserFormProps {
user: User;
uniqueUsername: (value: any) => boolean;
handleValueChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => void;
handleCheckboxChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
onDoneEditing: () => void;
onCancelEditing: () => void;
}
@ -30,7 +29,7 @@ class UserForm extends React.Component<UserFormProps> {
}
render() {
const { user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
const { user, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props;
return (
<ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
<Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open>
@ -64,7 +63,7 @@ class UserForm extends React.Component<UserFormProps> {
<Checkbox
value="admin"
checked={user.admin}
onChange={handleCheckboxChange('admin')}
onChange={handleValueChange('admin')}
/>
}
label="Admin?"

4
interface/src/system/OTASettingsForm.tsx
View File

@ -18,14 +18,14 @@ class OTASettingsForm extends React.Component<OTASettingsFormProps> {
}
render() {
const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props;
const { data, handleValueChange, saveData, loadData } = this.props;
return (
<ValidatorForm onSubmit={saveData}>
<BlockFormControlLabel
control={
<Checkbox
checked={data.enabled}
onChange={handleCheckboxChange("enabled")}
onChange={handleValueChange("enabled")}
/>
}
label="Enable OTA Updates?"

4
interface/src/wifi/WiFiSettingsForm.tsx
View File

@ -32,7 +32,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
render() {
const { selectedNetwork, deselectNetwork } = this.context;
const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props;
const { data, handleValueChange, saveData, loadData } = this.props;
return (
<ValidatorForm onSubmit={saveData} ref="WiFiSettingsForm">
{
@ -98,7 +98,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
<Checkbox
value="static_ip_config"
checked={data.static_ip_config}
onChange={handleCheckboxChange("static_ip_config")}
onChange={handleValueChange("static_ip_config")}
/>
}
label="Static IP Config?"