@polygon.io/core
Version:
A set of themeable UI components for React
1 lines • 3.66 kB
JavaScript
"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")),_Margin=_interopRequireDefault(require("../Margin")),_Text=_interopRequireDefault(require("../Text/Text")),_excluded=["className","label","checked","onChange","disabled","indeterminate"],__jsx=_react["default"].createElement,CheckboxContainer=_styledComponents["default"].div.withConfig({displayName:"Checkbox__CheckboxContainer",componentId:"sc-14h6izk-0"})(["&&&{position:relative;background:",";border:1px solid ",";border-radius:",";width:",";height:",";margin:0;}"],function(a){var b=a.theme,c=a.checked,d=a.disabled;return d?b.color.background.secondary:c?b.color.background.accent:b.color.background.input},function(a){var b=a.theme,c=a.checked,d=a.disabled;return c&&!d?b.color.background.accent:b.color.border.primary},function(a){var b=a.theme;return b.radius},function(a){var b=a.theme;return b.spacing.s3},function(a){var b=a.theme;return b.spacing.s3}),Check=_styledComponents["default"].i.withConfig({displayName:"Checkbox__Check",componentId:"sc-14h6izk-1"})(["display:",";margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:",";color:",";"],function(a){var b=a.checked;return b?"flex":"none"},function(a){var b=a.theme;return b.font.size.s1},function(a){var b=a.disabled,c=a.theme;return b?c.color.content.disabled:c.color.content.onColor}),Line=_styledComponents["default"].span.withConfig({displayName:"Checkbox__Line",componentId:"sc-14h6izk-2"})(["display:flex;border-radius:"," margin:0;width:",";height:",";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:",";background:",";"],function(a){var b=a.theme;return b.radius},function(a){var b=a.theme;return b.spacing.s2},function(a){var b=a.theme;return"calc(".concat(b.spacing.s1,"/2)")},function(a){var b=a.theme;return b.font.size.s1},function(a){var b=a.disabled,c=a.theme;return b?c.color.content.disabled:c.color.background.accent}),StyledCheckbox=_styledComponents["default"].input.attrs({type:"checkbox"}).withConfig({displayName:"Checkbox__StyledCheckbox",componentId:"sc-14h6izk-3"})(["appearance:none;cursor:",";margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:",";height:",";"],function(a){var b=a.disabled,c=a.indeterminate;return b||c?"default":"pointer"},function(a){var b=a.theme;return b.spacing.s3},function(a){var b=a.theme;return b.spacing.s3}),Checkbox=function(a){var b=a.className,c=a.label,d=a.checked,e=a.onChange,f=a.disabled,g=a.indeterminate,h=(0,_objectWithoutProperties2["default"])(a,_excluded);return __jsx(_Container["default"],{flexDirection:"row",alignItems:"center"},__jsx(CheckboxContainer,{className:b,checked:d,disabled:f},g?__jsx(Line,{checked:d,disabled:f}):__jsx(Check,{className:"fas fa-check",checked:d,disabled:f}),__jsx(StyledCheckbox,(0,_extends2["default"])({checked:d,onChange:e,disabled:f,indeterminate:g},h))),c&&__jsx(_Margin["default"],{as:"label",l:2},__jsx(_Text["default"],{as:"span",color:f?"disabled":"primary",size:"2"},c)))};Checkbox.defaultProps={className:void 0,label:void 0,checked:!1,onChange:function onChange(){},disabled:!1,indeterminate:!1};var _default=Checkbox;exports["default"]=_default;