Format UI code.

This commit is contained in:
Orne Brocaar 2022-06-08 14:10:04 +01:00
parent fef42fa192
commit 804c876aa7
5 changed files with 176 additions and 96 deletions

View File

@ -2,7 +2,7 @@ import React, { Component } from "react";
import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
import {Buffer} from "buffer";
import { Buffer } from "buffer";
interface IProps {
formRef: React.RefObject<any>;
@ -108,13 +108,15 @@ class AesKeyInput extends Component<IProps, IState> {
const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
if (bytes !== null && navigator.clipboard !== undefined) {
navigator.clipboard.writeText(bytes.join("").toUpperCase())
navigator.clipboard
.writeText(bytes.join("").toUpperCase())
.then(() => {
notification.success({
message: "Copied to clipboard",
duration: 3,
});
}).catch((e) => {
})
.catch(e => {
notification.error({
message: "Error",
description: e,
@ -122,19 +124,26 @@ class AesKeyInput extends Component<IProps, IState> {
});
});
}
}
};
copyToClipboardHexArray = () => {
const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
if (bytes !== null && navigator.clipboard !== undefined) {
navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
navigator.clipboard
.writeText(
bytes
.join(", ")
.toUpperCase()
.replace(/[A-Fa-f0-9]{2}/g, "0x$&"),
)
.then(() => {
notification.success({
message: "Copied to clipboard",
duration: 3,
});
}).catch((e) => {
})
.catch(e => {
notification.error({
message: "Error",
description: e,
@ -142,19 +151,31 @@ class AesKeyInput extends Component<IProps, IState> {
});
});
}
}
};
render() {
const copyMenu = <Menu items={[
{
key: "1",
label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
},
{
key: "2",
label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
},
]} />;
const copyMenu = (
<Menu
items={[
{
key: "1",
label: (
<Button type="text" onClick={this.copyToClipboard}>
HEX string
</Button>
),
},
{
key: "2",
label: (
<Button type="text" onClick={this.copyToClipboardHexArray}>
HEX array
</Button>
),
},
]}
/>
);
const addon = (
<Space size="large">

View File

@ -107,18 +107,19 @@ class DevAddrInput extends Component<IProps, IState> {
});
};
copyToClipboard = () => {
const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
if (bytes !== null && navigator.clipboard !== undefined) {
navigator.clipboard.writeText(bytes.join("").toUpperCase())
navigator.clipboard
.writeText(bytes.join("").toUpperCase())
.then(() => {
notification.success({
message: "Copied to clipboard",
duration: 3,
});
}).catch((e) => {
})
.catch(e => {
notification.error({
message: "Error",
description: e,
@ -126,19 +127,26 @@ class DevAddrInput extends Component<IProps, IState> {
});
});
}
}
};
copyToClipboardHexArray = () => {
const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
if (bytes !== null && navigator.clipboard !== undefined) {
navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
navigator.clipboard
.writeText(
bytes
.join(", ")
.toUpperCase()
.replace(/[A-Fa-f0-9]{2}/g, "0x$&"),
)
.then(() => {
notification.success({
message: "Copied to clipboard",
duration: 3,
});
}).catch((e) => {
})
.catch(e => {
notification.error({
message: "Error",
description: e,
@ -146,20 +154,31 @@ class DevAddrInput extends Component<IProps, IState> {
});
});
}
}
};
render() {
const copyMenu = <Menu items={[
{
key: "1",
label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
},
{
key: "2",
label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
},
]} />;
const copyMenu = (
<Menu
items={[
{
key: "1",
label: (
<Button type="text" onClick={this.copyToClipboard}>
HEX string
</Button>
),
},
{
key: "2",
label: (
<Button type="text" onClick={this.copyToClipboardHexArray}>
HEX array
</Button>
),
},
]}
/>
);
const addon = (
<Space size="large">

View File

@ -2,7 +2,7 @@ import React, { Component } from "react";
import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd";
import { ReloadOutlined, CopyOutlined } from "@ant-design/icons";
import {Buffer} from "buffer";
import { Buffer } from "buffer";
interface IProps {
formRef: React.RefObject<any>;
@ -107,13 +107,15 @@ class EuiInput extends Component<IProps, IState> {
const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
if (bytes !== null && navigator.clipboard !== undefined) {
navigator.clipboard.writeText(bytes.join("").toUpperCase())
navigator.clipboard
.writeText(bytes.join("").toUpperCase())
.then(() => {
notification.success({
message: "Copied to clipboard",
duration: 3,
});
}).catch((e) => {
})
.catch(e => {
notification.error({
message: "Error",
description: e,
@ -121,19 +123,26 @@ class EuiInput extends Component<IProps, IState> {
});
});
}
}
};
copyToClipboardHexArray = () => {
const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g);
if (bytes !== null && navigator.clipboard !== undefined) {
navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&"))
navigator.clipboard
.writeText(
bytes
.join(", ")
.toUpperCase()
.replace(/[A-Fa-f0-9]{2}/g, "0x$&"),
)
.then(() => {
notification.success({
message: "Copied to clipboard",
duration: 3,
});
}).catch((e) => {
})
.catch(e => {
notification.error({
message: "Error",
description: e,
@ -141,19 +150,31 @@ class EuiInput extends Component<IProps, IState> {
});
});
}
}
};
render() {
const copyMenu = <Menu items={[
{
key: "1",
label: <Button type="text" onClick={this.copyToClipboard}>HEX string</Button>,
},
{
key: "2",
label: <Button type="text" onClick={this.copyToClipboardHexArray}>HEX array</Button>,
},
]} />;
const copyMenu = (
<Menu
items={[
{
key: "1",
label: (
<Button type="text" onClick={this.copyToClipboard}>
HEX string
</Button>
),
},
{
key: "2",
label: (
<Button type="text" onClick={this.copyToClipboardHexArray}>
HEX array
</Button>
),
},
]}
/>
);
const addon = (
<Space size="large">

View File

@ -237,7 +237,7 @@ class DeviceProfileForm extends Component<IProps, IState> {
this.setState({
tabActive: activeKey,
});
}
};
onFinish = (values: DeviceProfile.AsObject) => {
const v = Object.assign(this.props.initialValues.toObject(), values);
@ -280,7 +280,6 @@ class DeviceProfileForm extends Component<IProps, IState> {
dp.getTagsMap().set(elm[0], elm[1]);
}
this.props.onFinish(dp);
};
@ -348,47 +347,67 @@ class DeviceProfileForm extends Component<IProps, IState> {
const tabActive = this.state.tabActive;
this.setState({
supportsOtaa: dp.getSupportsOtaa(),
supportsClassB: dp.getSupportsClassB(),
supportsClassC: dp.getSupportsClassC(),
payloadCodecRuntime: dp.getPayloadCodecRuntime(),
}, () => {
// This is a workaround as without rendering the TabPane (e.g. the user
// does not click through the different tabs), setFieldsValue does not
// actually update the fields. For example if selecting a template with
// a codec script and immediately click the save button, no codec script
// is passed to the onFinish function. This seems to be with every field
// that is not actually rendered before clicking the Save button.
this.setState({
tabActive: "1",
}, () => {
this.setState({
tabActive: "2",
}, () => {
this.setState({
tabActive: "3",
}, () => {
this.setState({
tabActive: "4",
}, () => {
this.setState({
tabActive: "5",
}, () => {
this.setState({
tabActive: "6",
}, () => {
this.setState({
tabActive: tabActive,
});
});
});
});
});
});
});
});
this.setState(
{
supportsOtaa: dp.getSupportsOtaa(),
supportsClassB: dp.getSupportsClassB(),
supportsClassC: dp.getSupportsClassC(),
payloadCodecRuntime: dp.getPayloadCodecRuntime(),
},
() => {
// This is a workaround as without rendering the TabPane (e.g. the user
// does not click through the different tabs), setFieldsValue does not
// actually update the fields. For example if selecting a template with
// a codec script and immediately click the save button, no codec script
// is passed to the onFinish function. This seems to be with every field
// that is not actually rendered before clicking the Save button.
this.setState(
{
tabActive: "1",
},
() => {
this.setState(
{
tabActive: "2",
},
() => {
this.setState(
{
tabActive: "3",
},
() => {
this.setState(
{
tabActive: "4",
},
() => {
this.setState(
{
tabActive: "5",
},
() => {
this.setState(
{
tabActive: "6",
},
() => {
this.setState({
tabActive: tabActive,
});
},
);
},
);
},
);
},
);
},
);
},
);
},
);
};
onTemplateModalCancel = () => {

View File

@ -6,7 +6,7 @@ import { notification } from "antd";
import { Button, Tabs, Space, Card, Row, Form, Input, InputNumber, Checkbox, Popconfirm } from "antd";
import { ColumnsType } from "antd/es/table";
import { RedoOutlined, DeleteOutlined } from "@ant-design/icons";
import {Buffer} from "buffer";
import { Buffer } from "buffer";
import {
Device,