Fix radio buttons (#104)

* fix radio buttons

* add range input

* types

* correct types for controlled radio/checkboxes

Author: TomWoodward

src/components/Radio.tsx

@@ -54,7 +54,10 @@ const LabelWithTooltipWrapper = styled.div`
 type RadioProps = PropsWithChildren<
   Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
 
-export const Radio = ({ children, disabled, ...props }: RadioProps & {tooltipText?: string}) => {
+export const Radio = ({ children, disabled, labelAs, ...props }: RadioProps & {
+  tooltipText?: string;
+  labelAs?: string;
+}) => {
 
   const state = useTooltipTriggerState({delay: 0});
   const ref = React.useRef(null);
@@ -64,7 +67,7 @@ export const Radio = ({ children, disabled, ...props }: RadioProps & {tooltipTex
   return props.tooltipText
     ? <div>
         <LabelWithTooltipWrapper>
-          <StyledLabel ref={ref} isDisabled={disabled} aria-disabled={disabled} {...triggerProps}>
+          <StyledLabel ref={ref} as={labelAs as any} isDisabled={disabled} aria-disabled={disabled} {...triggerProps}>
             <StyledInput type="radio" onFocus={() => state.open()} isDisabled={disabled} aria-disabled={disabled} {...props} />
             {children}
           {state.isOpen && (
@@ -73,7 +76,7 @@ export const Radio = ({ children, disabled, ...props }: RadioProps & {tooltipTex
           </StyledLabel>
         </LabelWithTooltipWrapper>
       </div>
-    : <StyledLabel isDisabled={disabled} aria-disabled={disabled}>
+    : <StyledLabel isDisabled={disabled} as={labelAs as any} aria-disabled={disabled}>
         <StyledInput type="radio" isDisabled={disabled} aria-disabled={disabled} {...props} />
         {children}
       </StyledLabel>;

src/components/forms/controlled/inputTypes.tsx

@@ -7,6 +7,11 @@ type MakeControlled<T extends React.ComponentType<any>> =
     name: string;
     emptyDisabledValue?: boolean;
   };
+type MakeControlledCheckbox<T extends React.ComponentType<any>> =
+  Omit<React.ComponentPropsWithoutRef<T>, 'checked'> & {
+    name: string;
+    emptyDisabledValue?: boolean;
+  };
 
 const useEmptyDisabledValue = (
   props: {disabled?: boolean; emptyDisabledValue?: boolean},
@@ -43,7 +48,7 @@ export const TextInput = (props: MakeControlled<typeof Uncontrolled.TextInput>)
   return <Uncontrolled.TextInput
     {...props}
     name={namespace + '.' + props.name}
-    value={value || ''}
+    value={(value ?? '').toString()}
     onChangeValue={onChangeValue}
   />;
 };
@@ -67,10 +72,10 @@ export const TextArea = (props: MakeControlled<typeof Uncontrolled.TextArea>) =>
   />;
 };
 
-export const Radio = (props: MakeControlled<typeof Uncontrolled.Radio>) => {
+export const Radio = (props: MakeControlledCheckbox<typeof Uncontrolled.Radio>) => {
   const {data, namespace, setInput} = useFormHelpers();
 
-  const onChangeValue = (value: boolean | undefined) => {
+  const onChangeValue = (value: string) => {
     props.onChangeValue?.(value);
     setInput.field(props.name)(value);
   };
@@ -85,7 +90,7 @@ export const Radio = (props: MakeControlled<typeof Uncontrolled.Radio>) => {
   />;
 };
 
-export const Checkbox = (props: MakeControlled<typeof Uncontrolled.Checkbox>) => {
+export const Checkbox = (props: MakeControlledCheckbox<typeof Uncontrolled.Checkbox>) => {
   const {data, namespace, setInput} = useFormHelpers();
 
   const onChangeValue = (value: boolean | undefined) => {
@@ -171,3 +176,25 @@ export const File = (props: MakeControlled<typeof Uncontrolled.File>) => {
     onChangeValue={onChangeValue}
   />;
 };
+
+export const RangeInput = (props: MakeControlled<typeof Uncontrolled.RangeInput>) => {
+  const {data, namespace, setInput} = useFormHelpers();
+
+  const onChangeValue = (value: number | undefined) => {
+    props.onChangeValue?.(value);
+    setInput.field(props.name)(value);
+  };
+
+  const value = data[props.name];
+  const numberValue = parseFloat((value ?? '').toString());
+  const formValue = isNaN(numberValue) ? '' : numberValue;
+
+  useEmptyDisabledValue(props, formValue, onChangeValue);
+
+  return <Uncontrolled.RangeInput
+    {...props}
+    name={namespace + '.' + props.name}
+    value={formValue}
+    onChangeValue={onChangeValue}
+  />;
+}

src/components/forms/uncontrolled/inputType.stories.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Checkbox } from "./inputTypes";
+import { Checkbox, RangeInput } from "./inputTypes";
 
 
 const CheckboxGroup = styled.div`
@@ -39,4 +39,11 @@ export const disabledCheckbox = () => <>
   {renderCheckboxes({error: [], disabled: true, label: 'Checkbox Label', variant: 'disabled', size: 1.6})}
   {renderCheckboxes({error: [], disabled: true, label: 'Checkbox Label', variant: 'disabled', size: 1.8})}
   {renderCheckboxes({error: [], disabled: true, label: 'Checkbox Label', variant: 'disabled', size: 2.0})}
-</>;
+</>;
+
+export const slider = () => <>
+  <RangeInput min={0} max={100} defaultValue={50} label="Label" name="name" help="Help text" />
+  <RangeInput min={0} max={100} defaultValue={50} label="Label" name="name" help="Help text"
+    labels={[{value: 0, label: '0%'}, {value: 50, label: '50%'}, {value: 100, label: '100%'}]}
+  />
+</>;

src/components/forms/uncontrolled/inputTypes.tsx

@@ -161,7 +161,7 @@ export const Select = ({
  * radio element
  */
 type RadioProps = React.ComponentPropsWithoutRef<'input'> & InputProps & {
-  onChangeValue?: (value: boolean | undefined) => void;
+  onChangeValue?: (value: string) => void;
   wrapperProps?: React.ComponentPropsWithoutRef<'label'>;
   tooltipText?: string;
 };
@@ -182,8 +182,10 @@ export const Radio = ({
 }: RadioProps) => {
   return <FormInputWrapper {...wrapperProps}>
     <RadioLine>
-      <StyledRadio {...props} onChange={e => {
-        onChangeValue?.(!!e.target.checked);
+      <StyledRadio {...props} labelAs="div" onChange={e => {
+        if (e.target.checked) {
+          onChangeValue?.(e.target.value);
+        }
         props.onChange?.(e);
       }}>
         <RadioFormLabelText><RequiredIndicator show={props.required} />{label}</RadioFormLabelText>
@@ -271,3 +273,48 @@ export const File = ({label, help, wrapperProps, onChangeValue, uploader, value,
     <HelpText value={help} />
   </FormInputWrapper>;
 };
+
+const RangeInputWrapper = styled(FormInputWrapper)`
+  datalist {
+    display: flex;
+    justify-content: space-between;
+    writing-mode:unset;
+    flex-direction: row;
+    padding: 0 1em;
+
+    option {
+      width: 0;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+`;
+type RangeProps = React.ComponentPropsWithoutRef<'input'> & InputProps & {
+  wrapperProps?: React.ComponentPropsWithoutRef<'label'>;
+  onChangeValue?: (value: number | undefined) => void;
+  labels?: {value: number; label: string}[];
+};
+export const RangeInput = ({label, help, wrapperProps, onChangeValue, labels, ...props}: RangeProps) => {
+  const datalistId = React.useMemo(() => `datalist-${Math.random().toString(36).substring(2, 15)}`, []);
+
+  return <RangeInputWrapper {...wrapperProps}>
+    <FormLabelText><RequiredIndicator show={props.required} />{label}:</FormLabelText>
+    <input type="range" {...props}
+      list={labels && labels.length > 0 ? datalistId : undefined}
+      onChange={e => {
+        const newValue = parseFloat(e.target.value);
+        onChangeValue?.(isNaN(newValue) ? undefined : newValue);
+        props.onChange?.(e);
+      }}
+    />
+    {labels && labels.length > 0 && (
+      <datalist id={datalistId}>
+        {labels.map(label => (
+          <option key={label.value} value={label.value} label={label.label} />
+        ))}
+      </datalist>
+    )}
+    <HelpText value={help} />
+  </RangeInputWrapper>;
+}