react-trafficlight
Version:
Traffic light component for React.
3 lines (2 loc) • 2.93 kB
JavaScript
import e from"react";import l from"prop-types";var r=function(l){var r=l.onRedClick,o=l.onYellowClick,n=l.onGreenClick,i=l.RedOn,t=l.YellowOn,c=l.GreenOn,a=l.Size,d=l.BlackColor,s=l.DisabledColor,f=l.RedColor,C=l.YellowColor,u=l.GreenColor,h=l.Horizontal,k=function(e,l){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===l.indexOf(o)&&(r[o]=e[o]);return r}(l,["onRedClick","onYellowClick","onGreenClick","RedOn","YellowOn","GreenOn","Size","BlackColor","DisabledColor","RedColor","YellowColor","GreenColor","Horizontal"]);return e.createElement("svg",Object.assign({},{width:a*(h?1/.375:1)+"px",height:a*(h?1:1/.375)+"px",viewBox:h?"0 0 160 60":"0 0 60 160",version:"1.1"},k),e.createElement("defs",null,e.createElement("circle",{style:{cursor:r?"pointer":void 0},id:"redCirclePath",cx:"30",cy:"30",r:"20"}),e.createElement("circle",{style:{cursor:o?"pointer":void 0},id:"yellowCirclePath",cx:"30",cy:"80",r:"20"}),e.createElement("circle",{style:{cursor:n?"pointer":void 0},id:"greenCirclePath",cx:"30",cy:"130",r:"20"}),e.createElement("filter",{x:"-50%",y:"-50%",width:"200%",height:"200%",filterUnits:"objectBoundingBox",id:"shadowFilter"},e.createElement("feGaussianBlur",{stdDeviation:"3",in:"SourceAlpha",result:"shadowBlurInner1"}),e.createElement("feOffset",{dx:"0",dy:"4",in:"shadowBlurInner1",result:"shadowOffsetInner1"}),e.createElement("feComposite",{in:"shadowOffsetInner1",in2:"SourceAlpha",operator:"arithmetic",k2:"-1",k3:"1",result:"shadowInnerInner1"}),e.createElement("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0",type:"matrix",in:"shadowInnerInner1"}))),e.createElement("g",{transform:h?"rotate(-90 30 30)":void 0},e.createElement("rect",{fill:d,x:"0",y:"0",width:"60",height:"160",rx:"8"}),e.createElement("use",{fill:i?f:s,fillRule:"evenodd",xlinkHref:"#redCirclePath"}),e.createElement("use",{fill:t?C:s,fillRule:"evenodd",xlinkHref:"#yellowCirclePath"}),e.createElement("use",{fill:c?u:s,fillRule:"evenodd",xlinkHref:"#greenCirclePath"}),e.createElement("use",{onClick:r,fill:"black",fillOpacity:"1",filter:"url(#shadowFilter)",xlinkHref:"#redCirclePath"}),e.createElement("use",{onClick:o,fill:"black",fillOpacity:"1",filter:"url(#shadowFilter)",xlinkHref:"#yellowCirclePath"}),e.createElement("use",{onClick:n,fill:"black",fillOpacity:"1",filter:"url(#shadowFilter)",xlinkHref:"#greenCirclePath"})))};r.propTypes={onRedClick:l.func,onYellowClick:l.func,onGreenClick:l.func,RedOn:l.bool,YellowOn:l.bool,GreenOn:l.bool,Size:l.number,BlackColor:l.string,DisabledColor:l.string,RedColor:l.string,YellowColor:l.string,GreenColor:l.string,Horizontal:l.bool},r.defaultProps={onRedClick:void 0,onYellowClick:void 0,onGreenClick:void 0,RedOn:!1,YellowOn:!1,GreenOn:!1,Size:60,BlackColor:"#000000",DisabledColor:"#4A4A4A",RedColor:"#D0021B",YellowColor:"#F8E71C",GreenColor:"#7ED321",Horizontal:!1};export default r;
//# sourceMappingURL=TrafficLight.module.js.map