Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui / dist / components / atoms / Icons / SwitchIcon / SwitchIcon.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const utils_1 = require("@skava/utils");

const Vector_1 = tslib_1.__importDefault(require("../../Vector"));

const wording = {
  description: 'A rounded rectangle shaped switch,with a circle toggle button inside which likely changes state when moved from left to right or viceversa',
  title: 'Switch icon'
};

class SwitchIcon extends react_1.default.Component {
  render() {
    const {
      fill,
      selectfill,
      isAnimated,
      isSelected,
      stroke
    } = this.props;
    const sliderCircle = isSelected ? 'M25,13 C22.2333333,13 20,10.7666667 20,8 C20,5.2333333 22.2333333,3 25,3 C27.7666666,3 30,5.2333333 30,8 C30,10.7666667 27.7666666,13 25,13 Z' : 'M8.00000003,13 C5.23333333,13 3,10.7666667 3,8 C3,5.2333333 5.23333333,3 8.00000003,3 C10.7666666,3 13,5.2333333 13,8 C13,10.7666667 10.7666666,13 8.00000003,13 Z';
    const dataQa = isSelected ? 'qa-switch-selected' : 'qa-switch';
    const passThroughProps = utils_1.omit(this.props, ['selectFill', 'isSelected', 'isAnimated']);
    return react_1.default.createElement(Vector_1.default, Object.assign({}, passThroughProps, wording, {
      "data-qa": dataQa
    }), react_1.default.createElement("g", {
      stroke: stroke
    }, react_1.default.createElement("path", {
      fill: isSelected ? selectfill : fill,
      d: "M25,0 L8.333333,0 C3.733333,0 0,3.733333 0,8.333333 C0,12.933333 3.733333,16.666667 8.333333,16.2 L25,16.2 C29.6,16.6666666 33.3333334,12.9333333 33.3333334,8.3333333 C33.3333334,3.7333333 29.6,0 25,0 Z"
    }), react_1.default.createElement("path", {
      id: isAnimated && 'slider-circle',
      fill: "#FFFFFF",
      d: sliderCircle
    })));
  }

}

SwitchIcon.defaultProps = {
  width: '38px',
  height: '30px',
  viewBox: '0 -4 34 24',
  fill: '#000000',
  selectfill: '#0772B4',
  stroke: '',
  isSelected: false
};
exports.SwitchIcon = SwitchIcon;
exports.default = SwitchIcon; //# sourceMappingURL=SwitchIcon.js.map