+
{dir} Pupil
{
+type SectionContextType = {
+ hasValue: () => void;
+};
+
+const sectionContext = React.createContext(null);
+
+const Section = (props: {
+ title: string;
+ children: React.ReactNode;
+ subSection?: boolean;
+}) => {
+ const parentContext = React.useContext(sectionContext);
+ const [hasValue, setHasValue] = React.useState(false);
+
+ useEffect(() => {
+ if (parentContext && hasValue) {
+ parentContext.hasValue();
+ }
+ }, [parentContext, hasValue]);
+
return (
- setHasValue(true),
+ }}
>
- {props.title}
- {props.children}
-
+
+ {props.subSection ? (
+ {props.title}
+ ) : (
+ {props.title}
+ )}
+ {props.children}
+
+
);
};
const Detail = (props: {
label: React.ReactNode;
- value?: string | number | boolean;
+ value?: string | number | boolean | null;
suffix?: React.ReactNode;
}) => {
+ const context = React.useContext(sectionContext);
+
+ if (context === null) {
+ throw "This component must be used as a descendant of Section component only";
+ }
+
let value = props.value;
- value = value === "" ? undefined : value;
+ value = value === "" ? null : value;
value = value === true ? "Yes" : value;
value = value === false ? "No" : value;
+ React.useEffect(() => {
+ if (value != null) {
+ context.hasValue();
+ }
+ }, [context, value]);
+
+ if (value == null) {
+ // Skip showing detail if attribute not filled.
+ return null;
+ }
+
value = typeof value === "string" ? parseFloat(value) || value : value;
value = typeof value === "number" ? properRoundOf(value) : value;
@@ -516,6 +592,25 @@ const Detail = (props: {
);
};
+const ChoiceDetail = (props: {
+ name: keyof DailyRoundsModel;
+ data: DailyRoundsModel;
+}) => {
+ const { t } = useTranslation();
+ const value = props.data[props.name];
+
+ if (value == null) {
+ return;
+ }
+
+ return (
+
+ );
+};
+
const RangeDetail = (props: {
label: React.ReactNode;
value?: number;