calcite-react
Version:
Calcite components for React
112 lines (98 loc) • 9.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledSwitchLabel = exports.StyledSwitchTrack = exports.StyledSwitchInput = exports.StyledSwitch = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _helpers = require("../utils/helpers");
var _commonElements = require("../utils/commonElements");
var _CalciteThemeProvider = require("../CalciteThemeProvider");
var _calciteColors = require("@esri/calcite-colors");
var _FormStyled = require("../Form/Form-styled");
var _polished = require("polished");
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var switchProps = {
switchWidth: '36px',
switchHeight: '20px',
switchBg: _calciteColors.colors['blk-010'],
switchBorderColor: _calciteColors.colors['blk-040'],
switchHoverBg: _calciteColors.colors['blk-020'],
switchHoverBorderColor: _calciteColors.colors['blk-060'],
switchCheckedBg: _CalciteThemeProvider.CalciteTheme.palette.blue,
switchCheckedBorderColor: _CalciteThemeProvider.CalciteTheme.palette.darkBlue,
switchFocusShadow: "0 0 4px 2px ".concat((0, _polished.transparentize)(0.1, _calciteColors.colors['blk-050'])),
switchFocusCheckedShadow: "0 0 4px 2px ".concat((0, _polished.transparentize)(0.1, _calciteColors.colors['h-bb-030'])),
switchFocusDestructiveCheckedShadow: "0 0 4px 2px ".concat((0, _polished.transparentize)(0.1, _calciteColors.colors['h-rr-030'])),
handleSize: '18px',
handleTopDistance: '-1px',
handleEdgeDistance: '-1px',
handleActiveEdgeDistance: '1px',
handleBg: _CalciteThemeProvider.CalciteTheme.palette.white,
handleBorderColor: _calciteColors.colors['blk-100'],
handleShadow: "0 1px 1px 0px ".concat((0, _polished.transparentize)(0.8, _CalciteThemeProvider.CalciteTheme.palette.darkestGray)),
handleHoverBorderColor: _calciteColors.colors['h-bb-050'],
handleHoverShadow: "0 1px 2px 0px ".concat((0, _polished.transparentize)(0.8, _CalciteThemeProvider.CalciteTheme.palette.darkestGray)),
handleCheckedBorderColor: _CalciteThemeProvider.CalciteTheme.palette.darkBlue,
handleCheckedShadow: "0 2px 1px 0px {transparentize(.8,CalciteTheme.palette.darkestGray)}",
handleActiveShadow: "0 3px 1px 0px {transparentize(.8,CalciteTheme.palette.darkestGray)}",
switchDestructiveCheckedBg: _calciteColors.colors['h-ro-060'],
switchDestructiveCheckedBorderColor: _calciteColors.colors['h-ro-070'],
handleDestructiveHoverBorderColor: _calciteColors.colors['h-ro-060'],
handleDestructiveCheckedBorderColor: _calciteColors.colors['h-ro-070']
};
var StyledSwitch = _styledComponents.default.label.withConfig({
displayName: "StyledSwitch",
componentId: "sc-2vrbei-0"
})(["display:flex;position:relative;cursor:pointer;user-select:none;tap-highlight-color:transparent;margin:0 0 ", " 0;", ";"], function (props) {
return props.theme.baseline;
}, function (props) {
return props.fullWidth && (0, _styledComponents.css)(["width:100%;"]);
});
exports.StyledSwitch = StyledSwitch;
StyledSwitch.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledSwitchInput = (0, _styledComponents.default)(_commonElements.baseRadioCheckbox).withConfig({
displayName: "StyledSwitchInput",
componentId: "sc-2vrbei-1"
})(["opacity:0;height:0;width:0;margin:0;position:absolute;"]);
exports.StyledSwitchInput = StyledSwitchInput;
StyledSwitchInput.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledSwitchTrack = _styledComponents.default.span.withConfig({
displayName: "StyledSwitchTrack",
componentId: "sc-2vrbei-2"
})(["position:relative;display:inline-block;vertical-align:top;width:", ";height:", ";top:0.05em;background-color:", ";border-radius:30px;border:1px solid ", ";transition:all 250ms cubic-bezier(0.4,0,0.2,1);margin-right:1rem;flex-shrink:0;html[dir='rtl'] &{margin-right:0;margin-left:1rem;}&:after{position:absolute;display:block;content:'';width:", ";height:", ";top:", ";left:", ";background-color:", ";border-radius:30px;border:2px solid ", ";box-shadow:", ";transition:all 250ms cubic-bezier(0.4,0,0.2,1);html[dir='rtl'] &{left:auto;right:", ";}}input:hover + &{border-color:", ";background-color:", ";&:after{border-color:", ";box-shadow:", ";}}input:active + &{box-shadow:", ";&:after{left:", ";border-color:", ";box-shadow:", ";html[dir='rtl'] &{left:auto;right:", ";}}}input:checked + &{border-color:", ";background-color:", ";&:after{left:100%;transform:translateX(-", ");border-color:", ";box-shadow:", ";html[dir='rtl'] &{left:auto;right:100%;transform:translateX(", ");}}}input:checked:active + &{box-shadow:", ";&:after{left:100%;transform:translateX(-", ");border-color:", ";box-shadow:", ";html[dir='rtl'] &{left:auto;right:100%;transform:translateX(", ");}}}input:focus + &{box-shadow:", ";&:after{border-color:", ";}}input:checked:focus + &{box-shadow:", ";&:after{border-color:", ";}}", ";@supports (-ms-ime-align:auto){&{top:0.4em;}}@supports (-moz-appearance:none){&{top:0.1em;}}@supports (-webkit-overflow-scrolling:touch){&{top:0.15em;}}"], switchProps.switchWidth, switchProps.switchHeight, switchProps.switchBg, switchProps.switchBorderColor, switchProps.handleSize, switchProps.handleSize, switchProps.handleTopDistance, switchProps.handleEdgeDistance, switchProps.handleBg, switchProps.handleBorderColor, switchProps.handleShadow, switchProps.handleEdgeDistance, switchProps.switchHoverBorderColor, switchProps.switchHoverBg, switchProps.handleHoverBorderColor, switchProps.handleHoverShadow, switchProps.switchFocusShadow, switchProps.handleActiveEdgeDistance, switchProps.handleCheckedBorderColor, switchProps.handleActiveShadow, switchProps.handleActiveEdgeDistance, switchProps.switchCheckedBorderColor, switchProps.switchCheckedBg, (0, _helpers.unitCalc)(switchProps.switchHeight, 1, '+'), switchProps.handleCheckedBorderColor, switchProps.handleCheckedShadow, (0, _helpers.unitCalc)(switchProps.switchHeight, 1, '+'), switchProps.switchFocusCheckedShadow, (0, _helpers.unitCalc)(switchProps.switchHeight, 1, '+'), switchProps.handleCheckedBorderColor, switchProps.handleActiveShadow, (0, _helpers.unitCalc)(switchProps.switchHeight, 1, '+'), switchProps.switchFocusShadow, switchProps.handleHoverBorderColor, switchProps.switchFocusCheckedShadow, switchProps.handleCheckedBorderColor, function (props) {
return props.destructive && (0, _styledComponents.css)(["input:hover + &:after{border-color:", ";}input:active + &:after{border-color:", ";}input:checked:active + &{box-shadow:", ";&:after{border-color:", ";}}input:checked + &{background-color:", ";border-color:", ";&:after{border-color:", ";}}input:focus + &:after{border-color:", ";}input:checked:focus + &{box-shadow:", ";&:after{border-color:", ";}}"], switchProps.handleDestructiveHoverBorderColor, switchProps.handleDestructiveCheckedBorderColor, switchProps.switchFocusDestructiveCheckedShadow, switchProps.handleDestructiveCheckedBorderColor, switchProps.switchDestructiveCheckedBg, switchProps.switchDestructiveCheckedBorderColor, switchProps.handleDestructiveCheckedBorderColor, switchProps.handleDestructiveHoverBorderColor, switchProps.switchFocusDestructiveCheckedShadow, switchProps.handleDestructiveCheckedBorderColor);
});
exports.StyledSwitchTrack = StyledSwitchTrack;
StyledSwitchTrack.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledSwitchLabel = (0, _styledComponents.default)(_FormStyled.StyledFormControlLabel).withConfig({
displayName: "StyledSwitchLabel",
componentId: "sc-2vrbei-3"
})(["vertical-align:top;text-align:right;&:first-child{margin-right:1rem;text-align:initial;html[dir='rtl'] &{margin-right:0;margin-left:1rem;}}", ";"], function (props) {
return props.fullWidth && (0, _styledComponents.css)(["flex:1 0 auto;"]);
});
exports.StyledSwitchLabel = StyledSwitchLabel;
StyledSwitchLabel.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};