init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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
import { createContext, useCallback, useContext, useEffect, useState } from "react";
import { Label } from "..";
import { cn } from "../../../../utils/bem";
import { FormField } from "../../FormField";
import "./RadioGroup.scss";
 
const RadioContext = createContext();
 
export const RadioGroup = ({
  label,
  className,
  validate,
  required,
  skip,
  simple,
  labelProps,
  size,
  value,
  onChange,
  children,
  ...props
}) => {
  const [currentValue, setCurrentValue] = useState(value);
 
  const onRadioChange = (value) => {
    setCurrentValue(value);
    onChange?.(value);
  };
 
  const field = (
    <FormField
      name={props.name}
      label={label}
      validate={validate}
      required={required}
      skip={skip}
      setValue={(value) => setCurrentValue(value)}
      {...props}
    >
      {(ref, dep, form) => (
        <RadioContext.Provider
          value={{
            value: currentValue,
            onChange: (value) => {
              onRadioChange(value);
              form.autosubmit();
            },
            setValue: setCurrentValue,
            isSimple: simple === true,
          }}
        >
          <div className={cn("radio-group-ls").mod({ size, simple }).mix(className).toClassName()}>
            <input ref={ref} name={props.name} type="hidden" defaultValue={currentValue} />
            <div className={cn("radio-group-ls").elem("buttons").toClassName()}>{children}</div>
          </div>
        </RadioContext.Provider>
      )}
    </FormField>
  );
 
  return label ? (
    <Label {...(labelProps ?? {})} text={label} simple={simple} required={required}>
      {field}
    </Label>
  ) : (
    field
  );
};
 
const RadioButton = ({ value, disabled, children, label, description, ...props }) => {
  const { onChange, setValue, value: currentValue, isSimple } = useContext(RadioContext);
  const checked = value === currentValue;
 
  const clickHandler = useCallback(
    (e) => {
      // TODO: Find a better way to prevent the click event from being triggered by the child element
      // that works beyond just the anchor tag. Otherwise there will be problems with other components/elements.
      if (e.target.tagName === "A") return;
      e.preventDefault();
      e.stopPropagation();
      if (disabled) return;
      onChange(value);
    },
    [value, disabled],
  );
 
  useEffect(() => {
    if (props.checked) setValue(value);
  }, [props.checked]);
 
  return (
    <div
      className={cn("radio-group-ls").elem("button").mod({ checked, disabled }).toClassName()}
      onClickCapture={clickHandler}
    >
      {isSimple ? (
        <Label placement="right" text={label} description={description}>
          <input
            type="radio"
            value={value}
            checked={checked}
            disabled={disabled}
            readOnly
            style={{ pointerEvents: "none" }}
          />
        </Label>
      ) : (
        children
      )}
    </div>
  );
};
 
RadioGroup.Button = RadioButton;