calcite-react
Version:
Calcite components for React
173 lines (155 loc) • 12.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledListSideContainer = exports.StyledListTextContainer = exports.StyledListSubtitle = exports.StyledListTitle = exports.StyledListHeader = exports.StyledListItem = exports.StyledList = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _helpers = require("../utils/helpers");
var _CalciteThemeProvider = require("../CalciteThemeProvider");
var _SideNavStyled = require("../SideNav/SideNav-styled");
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 StyledList = (0, _styledComponents.default)(_SideNavStyled.StyledSideNav).withConfig({
displayName: "StyledList",
componentId: "sc-1sb8owe-0"
})(["min-width:200px;overflow:hidden;max-height:", ";flex-shrink:0;transition:max-height 225ms cubic-bezier(0.4,0,0.2,1);", ";", ";", ";"], function (props) {
return props.maxHeight;
}, function (props) {
return props.nested && (0, _styledComponents.css)(["border:none;border-top:1px solid ", ";border-top-left-radius:0;border-top-right-radius:0;padding-left:", ";html[dir='rtl'] &{padding-left:initial;padding-right:", ";}", ";", ";"], function (props) {
return props.theme.palette.lightestGray;
}, function (props) {
return props.theme.baseline;
}, function (props) {
return props.theme.baseline;
}, props.open === false && (0, _styledComponents.css)(["border-top:none;"]), (props.minimal || props.multiSelect) && props.open && (0, _styledComponents.css)(["padding-bottom:", ";"], (0, _helpers.unitCalc)(props.theme.baseline, 2, '/')));
}, function (props) {
return (props.minimal || props.selectable) && (0, _styledComponents.css)(["background-color:unset;border:none;"]);
}, function (props) {
return props.selectable && (0, _styledComponents.css)(["border-bottom:1px solid ", ";", ";"], props.theme.palette.lighterGray, props.nested && (0, _styledComponents.css)(["border-bottom:none;"]));
});
exports.StyledList = StyledList;
StyledList.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var getActiveStyles = function getActiveStyles(props) {
return "\n background-color: ".concat(props.theme.palette.offWhite, ";\n text-decoration: none;\n color: ").concat(props.theme.palette.darkerGray, ";\n ");
};
var StyledListItem = _styledComponents.default.div.withConfig({
displayName: "StyledListItem",
componentId: "sc-1sb8owe-1"
})(["display:flex;flex-shrink:0;justify-content:space-between;box-sizing:border-box;padding:", " ", ";color:", ";background-color:", ";border-top:1px solid ", ";cursor:pointer;", ";", ";&:hover,&:focus{", ";}", ";", ";", ";", ";"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return props.theme.palette.darkerGray;
}, function (props) {
return props.theme.palette.white;
}, function (props) {
return props.theme.palette.lightestGray;
}, function (props) {
return props.disabled && (0, _styledComponents.css)(["pointer-events:none;opacity:0.7;"]);
}, function (props) {
return props.active && (0, _styledComponents.css)(["", ";"], function (props) {
return getActiveStyles(props);
});
}, function (props) {
return getActiveStyles(props);
}, function (props) {
return props.selected && (0, _styledComponents.css)(["&,&:focus,&:hover{text-indent:-3px;border-left:3px solid ", ";html[dir='rtl'] &{border-left:none;border-right:3px solid ", ";}}"], props.theme.palette.blue, props.theme.palette.blue);
}, function (props) {
return (props.minimal || props.selectable) && (0, _styledComponents.css)(["background-color:unset;padding:", " ", ";border-top-color:", ";&:hover,&:focus{background-color:unset;color:", ";}", ";"], (0, _helpers.unitCalc)(props.theme.baseline, 3, '/'), (0, _helpers.unitCalc)(props.theme.baseline, 4, '/'), props.theme.palette.lighterGray, props.theme.palette.offBlack, props.open && (0, _styledComponents.css)(["font-weight:600;"]));
}, function (props) {
return props.selectable && (0, _styledComponents.css)(["border-top:none;box-shadow:inset 3px 0 0 transparent;padding-left:calc(", " + 3px);html[dir='rtl'] &{padding-left:initial;padding-right:calc(", " + 3px);}&:hover,&:focus{background-color:", ";}", ";", ";"], (0, _helpers.unitCalc)(props.theme.baseline, 4, '/'), (0, _helpers.unitCalc)(props.theme.baseline, 4, '/'), props.theme.palette.white, props.active && (0, _styledComponents.css)(["background-color:", ";box-shadow:inset 3px 0 0 ", ";"], props.theme.palette.white, props.theme.palette.blue), props.filterItem && (0, _styledComponents.css)(["&,html[dir='rtl'] &{padding:0;}&:hover,&:focus{background-color:unset;}"]));
}, function (props) {
return props.nested && (0, _styledComponents.css)(["&:first-child{border-top:none;}", ";"], props.minimal && (0, _styledComponents.css)(["border:none;padding:0 0 0 ", ";position:relative;html[dir='rtl'] &{padding:0 ", " 0 0;}", ";", ";&::before{position:absolute;color:#cccccc;opacity:0;-webkit-transition:opacity 50ms linear;-o-transition:opacity 50ms linear;transition:opacity 50ms linear;pointer-events:none;content:'\u2022';font-size:0.8em;left:0;html[dir='rtl'] &{left:auto;right:0;}", ";}", ";&:hover,&:focus{text-decoration:underline;", ";&::before{opacity:1;", ";}}"], (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), props.multiSelect && (0, _styledComponents.css)(["padding:0 0 0 ", ";html[dir='rtl'] &{padding:0 ", " 0 0;}"], (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/'), (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/')), props.filterItem && (0, _styledComponents.css)(["padding:0;margin-bottom:", ";&:hover,&:focus{background-color:unset;}"], (0, _helpers.unitCalc)(props.theme.baseline, 4, '/')), props.multiSelect && (0, _styledComponents.css)(["content:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2032%2032%22%20class%3D%22svg-icon%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M11.927%2022l-6.882-6.883-3%203L11.927%2028%2031.204%208.728l-3.001-3.001z%22%2F%3E%3C%2Fsvg%3E');"]), props.active && (0, _styledComponents.css)(["font-weight:600;background-color:unset;&::before{opacity:1;color:#005e95;", ";}"], props.multiSelect && (0, _styledComponents.css)(["color:unset;content:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2032%2032%22%20class%3D%22svg-icon%22%3E%3Cpath%20fill%3D%22%23005e95%22%20d%3D%22M11.927%2022l-6.882-6.883-3%203L11.927%2028%2031.204%208.728l-3.001-3.001z%22%2F%3E%3C%2Fsvg%3E');"])), props.filterItem && (0, _styledComponents.css)(["text-decoration:none;"]), props.filterItem && (0, _styledComponents.css)(["opacity:0;"])));
});
exports.StyledListItem = StyledListItem;
StyledListItem.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledListHeader = (0, _styledComponents.default)(StyledListItem).withConfig({
displayName: "StyledListHeader",
componentId: "sc-1sb8owe-2"
})(["flex-shrink:0;background-color:", ";cursor:auto;", ";"], function (props) {
return props.theme.palette.offWhite;
}, function (props) {
return (props.minimal || props.selectable) && (0, _styledComponents.css)(["border:none;background-color:unset;padding:", " 0;font-weight:600;", ";&:hover,&:focus{background-color:unset;color:", ";}"], (0, _helpers.unitCalc)(props.theme.baseline, 3, '/'), (0, _helpers.fontSize)(0), props.theme.palette.darkerGray);
});
exports.StyledListHeader = StyledListHeader;
StyledListHeader.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledListTitle = _styledComponents.default.p.withConfig({
displayName: "StyledListTitle",
componentId: "sc-1sb8owe-3"
})(["", ";flex-shrink:0;margin:0;"], (0, _helpers.fontSize)(-1));
exports.StyledListTitle = StyledListTitle;
StyledListTitle.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledListSubtitle = _styledComponents.default.span.withConfig({
displayName: "StyledListSubtitle",
componentId: "sc-1sb8owe-4"
})(["", ";flex-shrink:0;line-height:1.2rem;color:", ";"], (0, _helpers.fontSize)(-3), function (props) {
return props.theme.palette.gray;
});
exports.StyledListSubtitle = StyledListSubtitle;
StyledListSubtitle.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledListTextContainer = _styledComponents.default.div.withConfig({
displayName: "StyledListTextContainer",
componentId: "sc-1sb8owe-5"
})(["display:flex;flex-shrink:0;flex:1 0 100px;flex-direction:column;justify-content:center;"]);
exports.StyledListTextContainer = StyledListTextContainer;
StyledListTextContainer.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledListSideContainer = _styledComponents.default.div.withConfig({
displayName: "StyledListSideContainer",
componentId: "sc-1sb8owe-6"
})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;&:first-child{margin-right:", ";html[dir='rtl'] &{margin-right:initial;margin-left:", ";}", ";}&:last-child{margin-left:", ";html[dir='rtl'] &{margin-left:initial;margin-right:", ";}", ";}svg{", ";", ";}.mdi-icon{width:28px;height:28px;fill:currentColor;", ";}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return (props.minimal || props.selectable) && (0, _styledComponents.css)(["margin-right:", ";html[dir='rtl'] &{margin-right:initial;margin-left:", ";}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
});
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return (props.minimal || props.selectable) && (0, _styledComponents.css)(["margin-left:", ";font-size:0.9rem;font-weight:400;html[dir='rtl'] &{margin-left:initial;margin-right:", ";}a{color:", ";&:hover{color:", ";}}"], (0, _helpers.unitCalc)(props.theme.baseline, 4, '/'), function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, props.theme.palette.darkerGray, props.theme.palette.offBlack);
}, function (props) {
return (props.minimal || props.selectable) && (0, _styledComponents.css)(["width:auto;height:auto;"]);
}, function (props) {
return props.selectable && props.active && (0, _styledComponents.css)(["fill:", ";"], props.theme.palette.blue);
}, function (props) {
return props.nested && (0, _styledComponents.css)(["width:22px;height:22px;"]);
});
exports.StyledListSideContainer = StyledListSideContainer;
StyledListSideContainer.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};