@smart-react-components/ui/components/Checkbox/CheckboxElement.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 Container = styled_components_1.default.div.attrs({
    className: 'src-checkbox-container',
})(({ theme, palette }) => {
    var _a, _b;
    return `
  border: solid 2px ${(_b = (_a = theme.$.palette[palette].checkbox) === null || _a === void 0 ? void 0 : _a.border) !== null && _b !== void 0 ? _b : theme.$.color.dynamic.accent};
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
`;
});
const Rectangle = styled_components_1.default.div.attrs({
    className: 'src-checkbox-rectangle',
}) `
  position: absolute;
  left: -2px;
  height: calc(100% + 4px);
  top: -2px;
  transition: background 200ms 0s ease-in-out;
  width: calc(100% + 4px);
`;
const Svg = styled_components_1.default.svg.attrs({
    children: react_1.default.createElement("path", { d: "M3.5,17.2l7.6,7.6L28.5,7.3" }),
    className: 'src-checkbox-svg',
    viewBox: '0 0 32 32',
})(({ theme, palette }) => {
    var _a, _b, _c;
    return `
  flex: 0 0 auto;
  position: relative;

  > path {
    fill: transparent;
    stroke: ${(_c = (_b = (_a = theme.$.palette[palette].checkbox) === null || _a === void 0 ? void 0 : _a.active) === null || _b === void 0 ? void 0 : _b.mark) !== null && _c !== void 0 ? _c : theme.$.color.white};
    stroke-width: 4px;
    stroke-dasharray: 36px;
    stroke-dashoffset: 36px;
    transition: stroke-dashoffset 200ms 0s ease-in-out;
  }
`;
});
const IndeterminateMark = styled_components_1.default.div.attrs({
    className: 'src-checkbox-indeterminate-mark',
})(({ theme, palette }) => {
    var _a, _b, _c;
    return `
  background: ${(_c = (_b = (_a = theme.$.palette[palette].checkbox) === null || _a === void 0 ? void 0 : _a.active) === null || _b === void 0 ? void 0 : _b.mark) !== null && _c !== void 0 ? _c : theme.$.color.white};
  height: 2px;
  margin-top: -1px;
  opacity: 0;
  position: absolute;
  trasnform: scaleX(0) rotate(45deg);
  transition-duration: 200ms;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  top: 50%;
  width: 100%;
`;
});
exports.default = (0, styled_components_1.default)(Div_1.default).attrs(({ children, isIndeterminate, palette }) => ({
    children: (react_1.default.createElement(react_1.default.Fragment, null,
        children && children,
        react_1.default.createElement(Container, { palette: palette },
            react_1.default.createElement(Rectangle, null),
            react_1.default.createElement(Svg, { palette: palette }),
            typeof isIndeterminate !== 'undefined' && react_1.default.createElement(IndeterminateMark, { palette: palette })))),
    getCheckboxSize: (v, t) => `
    height: ${t.$.size.checkbox[v]};
    width: ${t.$.size.checkbox[v]};
  `,
}))(({ theme, isChecked, isIndeterminate, isOutline, isSoft, palette, shape }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
    return `
  position: relative;

  .src-checkbox-container {
    border-radius: ${theme.$.radius.checkbox[shape]};
    transition: border-color 200ms 0s ease-in-out;

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

  .src-checkbox-rectangle {
    border-radius: ${theme.$.radius.checkbox[shape]};
  }

  ${isChecked
        ? `
      .src-checkbox-container {
        border-color: ${!isSoft ? ((_e = (_d = (_c = theme.$.palette[palette].checkbox) === null || _c === void 0 ? void 0 : _c.active) === null || _d === void 0 ? void 0 : _d.border) !== null && _e !== void 0 ? _e : theme.$.palette[palette].main) : ((_j = (_h = (_g = (_f = theme.$.palette[palette].checkbox) === null || _f === void 0 ? void 0 : _f.soft) === null || _g === void 0 ? void 0 : _g.active) === null || _h === void 0 ? void 0 : _h.border) !== null && _j !== void 0 ? _j : theme.$.palette[palette].soft)};

        .src-checkbox-rectangle {
          background: ${!isSoft ? ((_m = (_l = (_k = theme.$.palette[palette].checkbox) === null || _k === void 0 ? void 0 : _k.active) === null || _l === void 0 ? void 0 : _l.background) !== null && _m !== void 0 ? _m : theme.$.palette[palette].main) : ((_r = (_q = (_p = (_o = theme.$.palette[palette].checkbox) === null || _o === void 0 ? void 0 : _o.soft) === null || _p === void 0 ? void 0 : _p.active) === null || _q === void 0 ? void 0 : _q.background) !== null && _r !== void 0 ? _r : theme.$.palette[palette].soft)};
        }

        ${!isIndeterminate
            ? `
            .src-checkbox-svg > path {
              stroke-dashoffset: 0;
            }
          `
            : `
            .src-checkbox-indeterminate-mark {
              opacity: 1;
              transform: scaleX(1);
            }
          `}
      }
    `
        : ''}
`;
});