@polygon.io/core/dist/components/SwitchOnOff/index.js

A set of themeable UI components for React

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=void 0;var _react=_interopRequireDefault(require("react")),_extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends")),_objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")),_styledComponents=_interopRequireDefault(require("styled-components")),_Container=_interopRequireDefault(require("../Container")),_Text=_interopRequireDefault(require("../Text/Text")),_excluded=["id","onClick","value","disabled","label1","label2","ariaLabel"],__jsx=_react["default"].createElement,Button=_styledComponents["default"].button.attrs(function(a){return{role:"switch","aria-checked":a.valueState.toString()||"false"}}).withConfig({displayName:"SwitchOnOff__Button",componentId:"sc-1gar5qh-0"})(["border:0;background:none;margin:0;padding:15px 8px;cursor:",";> span{display:flex;flex-direction:row;align-items:center;border-radius:50px;background:",";box-sizing:border-box;height:18px;width:32px;margin:0;border:1px solid ",";> span{border-radius:50%;width:14px;height:14px;background:",";}> span:nth-child(1){position:relative;transition:",";transform:",";}}"],function(a){var b=a.disabled;return b?"default":"pointer"},function(a){var b=a.valueState,c=a.disabled,d=a.theme;return b&&!c&&d.color.background.accent||c&&d.color.background.secondary||d.color.content.disabled},function(a){var b=a.theme,c=a.valueState,d=a.disabled;return c&&!d&&b.color.background.accent||d&&b.color.border.disabled||b.color.content.disabled},function(a){var b=a.theme,c=a.disabled;return c?b.color.content.disabled:b.color.background.primary},function(a){var b=a.theme;return"all cubic-bezier(0.1, 0.92, 0.36, 1) ".concat(b.transitionDuration/3,"ms")},function(a){var b=a.valueState;return"translate3d(".concat(b?"15px":"1px",", 0, 0)")}),LabelButton=_styledComponents["default"].button.withConfig({displayName:"SwitchOnOff__LabelButton",componentId:"sc-1gar5qh-1"})(["border:0;margin:0;background:none;padding:14px 0;min-width:48px;cursor:",";"],function(a){var b=a.disabled;return b?"default":"pointer"}),handleLabel=function(a,b,c){c!==a&&b()},SwitchOnOff=function(a){var b=a.id,c=a.onClick,d=a.value,e=a.disabled,f=a.label1,g=a.label2,h=a.ariaLabel,i=(0,_objectWithoutProperties2["default"])(a,_excluded);return __jsx(_Container["default"],{flexDirection:"row",alignItems:"center"},f&&__jsx(LabelButton,{onClick:function onClick(){return handleLabel(!1,c,d)},disabled:e},__jsx(_Text["default"],{weight:"medium",color:d?"secondary":"primary"},f)),__jsx(Button,(0,_extends2["default"])({role:"switch",type:"button",onClick:c,valueState:d,disabled:e,id:b,"aria-label":h},i),__jsx("span",null,__jsx("span",null))),g&&__jsx(LabelButton,{onClick:function onClick(){return handleLabel(!0,c,d)},disabled:e},__jsx(_Text["default"],{weight:"medium",color:d?"primary":"secondary"},g)))};SwitchOnOff.defaultProps={disabled:!1,label1:"",label2:"",ariaLabel:""};var _default=SwitchOnOff;exports["default"]=_default;