@hhgtech/hhg-components/build/index-84b53c58.js

Hello Health Group common components

'use strict';

var React = require('react');
var miscTheme = require('./miscTheme.js');
var styled = require('@emotion/styled');
var index = require('./index-1b24e0d3.js');
var index$1 = require('./index-c88c8189.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledRadioImageGroup = styled__default["default"].div `
  display: flex;
  width: 100%;

  &[data-direction='vertical'] {
    flex-direction: column;
  }

  &[data-direction='horizontal'] {
    flex-wrap: wrap;
  }
`;
const StyledRadioImageItem = styled__default["default"].div `
  display: flex;

  padding: 8px;

  border-radius: ${miscTheme.theme.borderRadius};
  cursor: pointer;

  & > div {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  &[data-is-mb='false'] {
    &[data-selected='true'] {
      border: 1px solid #2d87f3;
      background: white;
    }
    &[data-selected='false'] {
      border: 1px solid #f2f2f2;
      box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
    }
  }

  &[data-is-mb='true'] {
    border-radius: 16px;
    background: white;
    padding: 16px auto;

    &[data-selected='true'] {
      border: 1px solid ${miscTheme.theme.mbColors.mint};
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
    }
    &[data-selected='false'] {
      border: none;
    }
  }

  &[data-disabled='true'] {
    cursor: auto;
  }

  .radio-group-item-heading {
    margin-top: 8px;
    //height: 48px;
    text-align: center;
  }

  .gender-image {
    width: 70px;
    height: 70px;
    &[data-is-mobile='true'] {
      width: 40px;
      height: 40px;
    }
  }
`;

const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
    const [check, setCheck] = React.useState(value);
    const handleOnChange = (v) => {
        if (isDisabled)
            return;
        setCheck(v);
        onChange && onChange(v);
    };
    const isMarryBaby = siteType === 'marryBaby';
    return (React__default["default"].createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index$2) => (React__default["default"].createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index$2, onClick: () => {
            handleOnChange(option.value);
        } },
        React__default["default"].createElement("div", null,
            option.content,
            option.label && (React__default["default"].createElement(React__default["default"].Fragment, null, isMarryBaby ? (React__default["default"].createElement(index.MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
                    ? miscTheme.theme.mbColors.dark
                    : miscTheme.theme.mbColors.midGray }, option.label)) : (React__default["default"].createElement(index$1.Text, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
};

exports.RadioImageGroup = RadioImageGroup;