Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 5x | import {
UseFormRegister,
UseFormGetValues,
UseFormSetValue,
UseFormWatch,
FieldValues,
} from "react-hook-form";
import { Row, Col } from "@canonical/react-components";
import LicenseInputs from "./LicenseInputs";
import type { Data } from "../../types";
type Props = {
data: Data;
register: UseFormRegister<FieldValues>;
getValues: UseFormGetValues<FieldValues>;
setValue: UseFormSetValue<FieldValues>;
watch: UseFormWatch<FieldValues>;
};
function AdditionalInformation({
data,
register,
getValues,
setValue,
watch,
}: Props): JSX.Element {
return (
<>
<h2 className="p-heading--4">Additional information</h2>
<LicenseInputs
listingData={data}
register={register}
setValue={setValue}
watch={watch}
/>
<Row className="p-form__control">
<Col size={2}>
<label htmlFor="metrics">Metrics:</label>
</Col>
<Col size={8}>
<p className="u-no-margin--bottom">
<label className="p-checkbox">
<input
type="checkbox"
className="p-checkbox__input"
aria-labelledby="public-metrics-checkbox"
{...register("public_metrics_enabled")}
defaultChecked={getValues("public_metrics_enabled")}
/>
<span className="p-checkbox__label" id="public-metrics-checkbox">
Display public popularity charts
</span>
</label>
</p>
<div className="p-nested-inputs">
<p className="u-no-margin--bottom u-no-padding--top">
<label className="p-checkbox">
<input
type="checkbox"
className="p-checkbox__input"
aria-labelledby="world-map-checkbox"
disabled={!getValues("public_metrics_enabled")}
{...register("public_metrics_territories")}
defaultChecked={getValues("public_metrics_territories")}
/>
<span className="p-checkbox__label" id="world-map-checkbox">
World map
</span>
</label>
<small className="u-text-muted">
Displays where your snap is being used by country
</small>
</p>
<p className="u-no-margin--bottom">
<label className="p-checkbox">
<input
type="checkbox"
className="p-checkbox__input"
aria-labelledby="linux-distributions-checkbox"
disabled={!getValues("public_metrics_enabled")}
{...register("public_metrics_distros")}
defaultChecked={getValues("public_metrics_distros")}
/>
<span
className="p-checkbox__label"
id="linux-distributions-checkbox"
>
Linux distributions
</span>
</label>
<small className="u-text-muted">
Displays where your snap is being used by distro
</small>
</p>
</div>
</Col>
</Row>
</>
);
}
export default AdditionalInformation;
|