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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 5x 5x 5x 5x 5x 5x 5x 5x | import { useState, useEffect } from "react";
import {
UseFormRegister,
UseFormSetValue,
UseFormWatch,
FieldValues,
} from "react-hook-form";
import { nanoid } from "nanoid";
import { Row, Col } from "@canonical/react-components";
import LicenseSearch from "./LicenseSearch";
type Props = {
listingData: {
license: string;
license_type: string;
licenses: Array<{ key: string; name: string }>;
};
register: UseFormRegister<FieldValues>;
setValue: UseFormSetValue<FieldValues>;
watch: UseFormWatch<FieldValues>;
};
function LicenseInputs({ listingData, register, setValue, watch }: Props) {
const [licenseType, setLicenseType] = useState(listingData?.license_type);
const [license, setLicense] = useState(listingData?.license);
const simpleLicenseId = nanoid();
const customLicenseId = nanoid();
useEffect(() => {
const subscription = watch((value: { [index: string]: any }) => {
setLicense(value?.license);
});
return () => subscription.unsubscribe();
}, [watch]);
return (
<>
<Row>
<Col size={2}>
<p>License:</p>
</Col>
<Col size={8} style={{ minHeight: "160px" }}>
<ul className="p-inline-list u-no-margin--bottom">
<li className="p-inline-list__item">
<label className="p-radio" style={{ display: "inline-block" }}>
<input
type="radio"
className="p-radio__input"
name="license-type"
aria-labelledby={simpleLicenseId}
value="simple"
checked={licenseType === "simple"}
onChange={() => {
setLicenseType("simple");
}}
/>
<span className="p-radio__label" id={simpleLicenseId}>
Simple
</span>
</label>
</li>
<li className="p-inline-list__item">
<label className="p-radio" style={{ display: "inline-block" }}>
<input
type="radio"
className="p-radio__input"
name="license-type"
aria-labelledby={customLicenseId}
value="custom"
checked={licenseType === "custom"}
onChange={() => {
setLicenseType("custom");
setValue("license", license);
}}
/>
<span className="p-radio__label" id={customLicenseId}>
Custom SPDX expression
</span>
</label>
</li>
</ul>
{licenseType === "simple" && (
<>
<div className="p-autocomplete">
<LicenseSearch
licenses={listingData?.licenses}
license={license}
register={register}
setValue={setValue}
setLicense={setLicense}
originalLicense={listingData?.license}
/>
<p className="p-form-help-text" style={{ marginTop: "1rem" }}>
The license(s) under which you will release your snap.
Multiple licenses can be selected to indicate alternative
choices.
</p>
</div>
</>
)}
{licenseType === "custom" && (
<>
<textarea {...register("license")} />
<small className="u-text-muted">
Visit{" "}
<a href="https://spdx.github.io/spdx-spec/v2.3/">
SPDX Specification 2.3
</a>{" "}
for more information.
</small>
</>
)}
</Col>
</Row>
</>
);
}
export default LicenseInputs;
|