React/RadioButton Component 만들기

 

Radio component가 마땅한게 없어서 급조해 봤다.

 

Parent Component

import React, { Component } from 'react';
...

class UnitViews extends Component {
  ...

  render() {
    ...
    
    return (
      <div className="inner-content box-list-wrap">
        <div className="header">
          <RadioButton
            // className="status"
            name="unit_status"
            init={[
              { value: '', text: '전체', icon: '' },
              { value: 'OCCUPY', text: '입실', icon: 'green' },
              { value: 'WAIT', text: '예약', icon: 'orange' },
              { value: 'EMPTY', text: '공실', icon: 'pebble' },
            ]}
            value={this.state.unitStatus}
            required
            onChange={(value) => {
              const checked_unit_status = value === '' ? null : [value];
              this.setState({ unitStatus: value }, this.props.onUpdate({ UNIT_STATUS: checked_unit_status }));
            }}
          />
          ...
        </div>
        ...
      </div>
    );
  }
}

export default wrapWithBase(UnitViews);

 

RadioButton Component

import React, { Component } from 'react';

class RadioButton extends Component {
  render() {
    const init = this.props.init;
    let value = this.props.value;

    if (value == null) value = '';

    if (init == null) {
      return false;
    }

    return (
      <div className={'wrap-button-radio' + (this.props.className ? ' ' + this.props.className : '')}>
        {init.map((item, idx) => (
          <div className="button-radio" key={idx}>
            {idx !== 0 && <div className="divider"></div>}

            <input
              name={this.props.name}
              id={this.props.name + '-' + idx}
              type="radio"
              value={item.value}
              checked={value === item.value}
              onChange={(e) => {
                this.props.onChange(e.target.value);
              }}
            />

            <label htmlFor={this.props.name + '-' + idx}>
              {item.icon !== undefined && item.icon !== null && item.icon !== '' && <span className={'button-radio-icon ' + item.icon}></span>}
              <span>{item.text}</span>
            </label>
          </div>
        ))}
      </div>
    );
  }
}

export default RadioButton;

 

css

.wrap-button-radio { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: max-content; height: 32px; padding: 5px 16px; border: 1px solid #D9D9D9; border-radius: 2px; background: #FFFFFF; box-sizing: border-box; gap: 12px; }
.wrap-button-radio > .button-radio { display: flex; flex-direction: row; align-items: center; height: 22px; padding: 0px; gap: 8px; }
.wrap-button-radio > .button-radio > .divider { width: 1px; height: 16px; background: rgba(0, 0, 0, 0.06); }
.wrap-button-radio > .button-radio > input[type="radio"] { display: none; }
.wrap-button-radio > .button-radio > input[type="radio"]:checked + label { color: rgba(0, 0, 0, 0.85); }
.wrap-button-radio > .button-radio > input[type="radio"]:checked + label > .green { background: #52C41A; }
.wrap-button-radio > .button-radio > input[type="radio"]:checked + label > .orange { background: #FAAD14; }
.wrap-button-radio > .button-radio > input[type="radio"]:checked + label > .pebble { background: #595959; }
.wrap-button-radio > .button-radio > input[type="radio"]:checked + label > .red { background: #FF4D4F; }
.wrap-button-radio > .button-radio > label {display: flex; flex-direction: row; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.25); font-weight: 400; font-size: 14px; line-height: 22px; cursor: pointer; gap: 8px; }
.wrap-button-radio > .button-radio > label > .button-radio-icon { width: 6px; height: 6px; padding: 0px; border-radius: 10px; background: #D9D9D9; }