@smart-react-components/ui/components/Radio/RadioElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const css_1 = require("../../util/css");
const radio_1 = require("../../util/radio");
const Container = styled_components_1.default.div.attrs({
    className: 'src-radio-container',
})(({ theme, palette }) => {
    var _a, _b;
    return `
  align-items: center;
  border: solid 2px ${(_b = (_a = theme.$.palette[palette].radio) === null || _a === void 0 ? void 0 : _a.border) !== null && _b !== void 0 ? _b : theme.$.color.dynamic.accent};
  border-radius: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  height: 100%;
`;
});
const OuterCircle = styled_components_1.default.div.attrs({
    className: 'src-radio-outer-circle',
}) `
  align-items: center;
  border-radius: 100%;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
  transition: 200ms 0s ease-in-out;
  transition-property: height, width;
`;
const InnerCircle = styled_components_1.default.div.attrs({
    className: 'src-radio-inner-circle',
})(({ theme, palette }) => {
    var _a, _b, _c;
    return `
  background: ${(_c = (_b = (_a = theme.$.palette[palette].radio) === null || _a === void 0 ? void 0 : _a.active) === null || _b === void 0 ? void 0 : _b.mark) !== null && _c !== void 0 ? _c : theme.$.color.white};
  border-radius: 100%;
  flex: 0 0 auto;
`;
});
exports.default = (0, styled_components_1.default)(Div_1.default).attrs(({ children, palette }) => ({
    children: (react_1.default.createElement(react_1.default.Fragment, null,
        children && children,
        react_1.default.createElement(Container, { palette: palette },
            react_1.default.createElement(OuterCircle, null,
                react_1.default.createElement(InnerCircle, { palette: palette }))))),
    getRadioSize: (v, t) => `
    height: ${t.$.size.radio[v]};
    width: ${t.$.size.radio[v]};

    .src-radio-inner-circle {
      height: ${(0, css_1.toCSSValue)(t.$.size.radio[v])(v => (0, radio_1.calculateRadioInnerCircleSize)(v))};
      width: ${(0, css_1.toCSSValue)(t.$.size.radio[v])(v => (0, radio_1.calculateRadioInnerCircleSize)(v))};
    }
  `,
}))(({ theme, isChecked, isOutline, isSoft, palette }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
    return `
  position: relative;

  ${!isOutline
        ? `
      .src-radio-container {
        background: ${(_b = (_a = theme.$.palette[palette].radio) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.color.dynamic.accent};
      }
    `
        : ''}

  .src-radio-outer-circle {
    background: ${!isSoft ? ((_e = (_d = (_c = theme.$.palette[palette].radio) === null || _c === void 0 ? void 0 : _c.active) === null || _d === void 0 ? void 0 : _d.background) !== null && _e !== void 0 ? _e : theme.$.palette[palette].main) : ((_j = (_h = (_g = (_f = theme.$.palette[palette].radio) === null || _f === void 0 ? void 0 : _f.soft) === null || _g === void 0 ? void 0 : _g.active) === null || _h === void 0 ? void 0 : _h.background) !== null && _j !== void 0 ? _j : theme.$.palette[palette].soft)};

    ${!isChecked
        ? `
        height: 0;
        width: 0;
      `
        : `
        height: calc(100% + 4px);
        width: calc(100% + 4px);
      `}
  }
`;
});