cal.pub0.org/components/ui/form/radio-area/RadioAreaGroup.tsx

78 lines
1.9 KiB
TypeScript
Raw Normal View History

Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
import React, { PropsWithChildren, useState } from "react";
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
import classNames from "@lib/classNames";
type RadioAreaProps = React.InputHTMLAttributes<HTMLInputElement> & {
onChange: (value: string) => void;
defaultChecked: boolean;
};
const RadioArea = (props: RadioAreaProps) => {
return (
<label
className={classNames(
"block border border-1 p-4 focus:outline-none focus:ring focus:ring-neutral-500",
props.checked && "border-black",
props.className
)}>
<input
onChange={(e) => props.onChange(e.target.value)}
checked={props.checked}
className="float-right text-neutral-900 focus:ring-neutral-500 ml-3"
name={props.name}
value={props.value}
type="radio"
/>
{props.children}
</label>
);
};
type RadioAreaGroupProps = {
name?: string;
onChange?: (value) => void;
};
const RadioAreaGroup = ({
children,
name,
onChange,
...passThroughProps
}: PropsWithChildren<RadioAreaGroupProps>) => {
const [checkedIdx, setCheckedIdx] = useState<number | null>(null);
const changeHandler = (value: string, idx: number) => {
if (onChange) {
onChange(value);
}
setCheckedIdx(idx);
};
return (
<div {...passThroughProps}>
{(Array.isArray(children) ? children : [children]).map(
(child: React.ReactElement<RadioAreaProps>, idx: number) => {
if (checkedIdx === null && child.props.defaultChecked) {
setCheckedIdx(idx);
}
return (
<Item
{...child.props}
key={idx}
name={name}
checked={idx === checkedIdx}
onChange={(value: string) => changeHandler(value, idx)}>
{child.props.children}
</Item>
);
}
)}
</div>
);
};
const Item = RadioArea;
const Group = RadioAreaGroup;
export { RadioArea, RadioAreaGroup, Item, Group };