in src/app/devices/cloudToDeviceMessage/components/cloudToDeviceMessage.tsx [147:207]
name: t(ResourceKeys.cloudToDeviceMessage.properties.delete),
onClick: handleDelete
},
]}
/>
<MarqueeSelection selection={selection}>
<ResizableDetailsList
items={properties}
columns={getColumns()}
onRenderItemColumn={renderItemColumn}
ariaLabelForSelectionColumn={t(ResourceKeys.cloudToDeviceMessage.properties.toggleSelectionColumnAriaLabel)}
ariaLabelForSelectAllCheckbox={t(ResourceKeys.cloudToDeviceMessage.properties.selectAllCheckboxAriaLabel)}
checkButtonAriaLabel={t(ResourceKeys.cloudToDeviceMessage.properties.rowCheckBoxAriaLabel)}
selection={selection}
/>
</MarqueeSelection>
</>
);
};
const getColumns = (): IColumn[] => {
return [
{
key: 'key',
minWidth: 150,
name: t(ResourceKeys.cloudToDeviceMessage.properties.key),
},
{
key: 'value',
minWidth: 150,
name: t(ResourceKeys.cloudToDeviceMessage.properties.value),
}
];
};
const onCheckboxChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
setAddTimestamp(checked);
};
const renderMessageBodySection = () => {
const textFieldRows = 5;
return (
<>
<LabelWithTooltip
tooltipText={t(ResourceKeys.cloudToDeviceMessage.bodyTooltip)}
>
{t(ResourceKeys.cloudToDeviceMessage.body)}
</LabelWithTooltip>
<TextField
className="cloud-to-device-message-text-field"
multiline={true}
rows={textFieldRows}
onChange={onTextFieldChange}
ariaLabel={t(ResourceKeys.cloudToDeviceMessage.body)}
/>
<Checkbox
label={t(ResourceKeys.cloudToDeviceMessage.addTimestamp)}
ariaLabel={t(ResourceKeys.cloudToDeviceMessage.addTimestamp)}
onChange={onCheckboxChange}
styles={
{