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
import React, { useState } from "react";
import { cn } from "../../utils/bem";
import "./RadioGroup.scss";
 
const RadioContext = React.createContext();
 
export const RadioGroup = ({ size, value, defaultValue, onChange, children, ...props }) => {
  const [currentValue, setCurrentValue] = useState(defaultValue);
 
  const onRadioChange = (e) => {
    setCurrentValue(e.target.value);
    onChange?.(e);
  };
 
  return (
    <RadioContext.Provider
      value={{
        value: value ?? currentValue,
        onChange: onRadioChange,
        defaultValue,
      }}
    >
      <div className={cn("radio-group").mod({ size })} style={props.style}>
        <div className={cn("radio-group").elem("buttons")}>{children}</div>
      </div>
    </RadioContext.Provider>
  );
};
 
const RadioButton = ({ value, disabled, children }) => {
  const { onChange, value: currentValue } = React.useContext(RadioContext);
  const checked = value === currentValue;
 
  return (
    <label className={cn("radio-group").elem("button").mod({ checked, disabled })}>
      <input
        className={cn("radio-group").elem("input")}
        type="radio"
        value={value}
        checked={value === currentValue}
        onChange={onChange}
        disabled={disabled}
      />
      {children}
    </label>
  );
};
 
RadioGroup.Button = RadioButton;