bruno/packages/grafnode-components/src/components/RequestHeaders/index.js

97 lines
2.6 KiB
JavaScript
Raw Normal View History

2021-12-31 17:22:22 +01:00
import React, { useState } from 'react';
2021-12-31 17:58:40 +01:00
import { nanoid } from 'nanoid';
2021-12-31 17:22:22 +01:00
import StyledWrapper from './StyledWrapper';
2021-12-31 17:58:40 +01:00
const initialState = [{
uid: nanoid(),
enabled: true
}];
2021-12-31 17:22:22 +01:00
const RequestHeaders = () => {
2021-12-31 17:58:40 +01:00
const [headers, setHeaders] = useState(initialState);
2021-12-31 17:22:22 +01:00
const addHeader = () => {
let newHeader = {
2021-12-31 17:58:40 +01:00
uid: nanoid(),
2021-12-31 17:22:22 +01:00
key: '',
value: '',
description: '',
2021-12-31 17:58:40 +01:00
enabled: true
2021-12-31 17:22:22 +01:00
};
let newHeaders = [...headers, newHeader];
setHeaders(newHeaders);
};
const handleHeaderValueChange = (e, index, menu) => {
// todo: yet to implement
};
const handleRemoveHeader = (index) => {
headers.splice(index, 1);
2021-12-31 17:58:40 +01:00
setHeaders([...headers]);
2021-12-31 17:22:22 +01:00
};
return (
<StyledWrapper className="mt-4">
<table>
<thead>
<tr>
<td></td>
<td>KEY</td>
<td>VALUE</td>
<td>DESCRIPTION</td>
<td></td>
</tr>
</thead>
<tbody>
2021-12-31 18:55:53 +01:00
{headers && headers.length ? headers.map((header, index) => {
2021-12-31 17:22:22 +01:00
return (
2021-12-31 17:58:40 +01:00
<tr key={header.uid}>
2021-12-31 17:22:22 +01:00
<td>
<input
type="checkbox"
defaultChecked={header.enabled}
name="enabled"
onChange={(e) => handleHeaderValueChange(e, index, 'enabled')}
/>
</td>
<td>
<input
type="text"
name="key"
defaultValue={headers[index].key}
onChange={(e) => handleHeaderValueChange(e, index, 'key')}
/>
</td>
<td>
<input
type="text"
name="value"
defaultValue={headers[index].value}
onChange={(e) => handleHeaderValueChange(e, index, 'value')}
/>
</td>
<td>
<input
type="text"
name="description"
defaultValue={headers[index].description}
onChange={(e) => handleHeaderValueChange(e, index, 'description')}
/>
</td>
<td>
<button onClick={() => handleRemoveHeader(index)}>
remove
</button>
</td>
</tr>
2021-12-31 17:58:40 +01:00
);
2021-12-31 18:55:53 +01:00
}) : null}
2021-12-31 17:22:22 +01:00
</tbody>
</table>
<button className="btn-add-header" onClick={addHeader}>+ Add Header</button>
</StyledWrapper>
)
};
export default RequestHeaders;