calcite-react
Version:
Calcite components for React
212 lines (187 loc) • 7.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dialogTransition = exports.overlayTransition = exports.StyledSecondaryActions = exports.StyledModalActions = exports.StyledModalContent = exports.StyledModalCloseButton = exports.StyledModalTitle = exports.StyledModalHeader = exports.reactModalContentStyles = exports.reactModalOverlayStyles = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _helpers = require("../utils/helpers");
var _CalciteThemeProvider = require("../CalciteThemeProvider");
var _Elements = require("../Elements");
var _Button = _interopRequireDefault(require("../Button"));
var _ButtonStyled = require("../Button/Button-styled");
var _XIcon = _interopRequireDefault(require("calcite-ui-icons-react/XIcon"));
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; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// 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
// Overlay styles passed to the ReactModal library
var reactModalOverlayStyles = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'fixed',
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
textAlign: 'center',
background: _CalciteThemeProvider.CalciteTheme.palette.transparentBlack,
zIndex: 101,
transition: "opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
opacity: 0
}; // Modal wrapper styles passed to the ReactModal library
exports.reactModalOverlayStyles = reactModalOverlayStyles;
var reactModalContentStyles = function reactModalContentStyles(color) {
var borderTop;
if (color === 'blue') {
borderTop = "4px solid ".concat(_CalciteThemeProvider.CalciteTheme.palette.blue);
} else if (color === 'red') {
borderTop = "4px solid ".concat(_CalciteThemeProvider.CalciteTheme.palette.red);
} else {
borderTop = 'none';
}
return {
position: 'relative',
top: 'auto',
left: 'auto',
right: 'auto',
bottom: 'auto',
maxWidth: '80vw',
maxHeight: '80vh',
overflow: 'auto',
outline: 'none',
boxSizing: 'border-box',
zIndex: '102',
background: _CalciteThemeProvider.CalciteTheme.palette.white,
padding: '0px',
textAlign: 'initial',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
verticalAlign: 'middle',
borderRadius: '3px',
boxShadow: _CalciteThemeProvider.CalciteTheme.boxShadow,
border: 'none',
borderTop: borderTop,
transition: "margin-top 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
marginTop: '30px'
};
};
exports.reactModalContentStyles = reactModalContentStyles;
var StyledModalHeader = _styledComponents.default.div.withConfig({
displayName: "StyledModalHeader",
componentId: "sc-1qolgd0-0"
})(["display:flex;align-items:stretch;justify-content:space-between;max-width:100%;min-width:0;z-index:2;flex:0 0 auto;border-bottom:1px solid ", ";"], function (props) {
return props.theme.palette.lightestGray;
});
exports.StyledModalHeader = StyledModalHeader;
StyledModalHeader.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledModalTitle = (0, _styledComponents.default)(_Elements.CalciteH3).withConfig({
displayName: "StyledModalTitle",
componentId: "sc-1qolgd0-1"
})(["width:100%;margin:0;padding:", " ", ";"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
return props.theme.baseline;
});
exports.StyledModalTitle = StyledModalTitle;
StyledModalTitle.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledModalCloseButton = (0, _styledComponents.default)(_Button.default).attrs(function () {
return {
icon: _react.default.createElement(_XIcon.default, {
size: 24
}),
iconButton: true,
large: true
};
}).withConfig({
displayName: "StyledModalCloseButton",
componentId: "sc-1qolgd0-2"
})(["padding:", ";&:hover{background:", ";}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/');
}, function (props) {
return props.theme.palette.offWhite;
});
exports.StyledModalCloseButton = StyledModalCloseButton;
StyledModalCloseButton.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledModalContent = _styledComponents.default.div.withConfig({
displayName: "StyledModalContent",
componentId: "sc-1qolgd0-3"
})(["position:relative;height:100%;max-height:calc(100vh - 12rem);display:block;padding:", ";z-index:1;overflow:auto;", ";"], function (props) {
return props.theme.baseline;
}, function (props) {
return props.noPadding && (0, _styledComponents.css)(["padding:0;"]);
});
exports.StyledModalContent = StyledModalContent;
StyledModalContent.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledSecondaryActions = _styledComponents.default.div.withConfig({
displayName: "StyledSecondaryActions",
componentId: "sc-1qolgd0-4"
})(["display:flex;justify-content:flex-start;flex:1 0 auto;"]);
exports.StyledSecondaryActions = StyledSecondaryActions;
StyledSecondaryActions.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var StyledModalActions = _styledComponents.default.div.withConfig({
displayName: "StyledModalActions",
componentId: "sc-1qolgd0-5"
})(["display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:center;text-align:end;padding:", ";border-top:1px solid ", ";", "{margin:0 ", ";&:first-child{margin-right:0;html[dir='rtl'] &{margin-right:", ";margin-left:0;}}}"], function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/');
}, function (props) {
return props.theme.palette.lightestGray;
}, _ButtonStyled.StyledButton, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
});
exports.StyledModalActions = StyledModalActions;
StyledModalActions.defaultProps = {
theme: _CalciteThemeProvider.CalciteTheme
};
var overlayTransition = {
entering: {
opacity: 0
},
entered: {
opacity: 1
},
exiting: {
opacity: 0
}
};
exports.overlayTransition = overlayTransition;
var dialogTransition = {
entering: {
marginTop: '30px'
},
entered: {
marginTop: 0
},
exiting: {
marginTop: '30px'
}
};
exports.dialogTransition = dialogTransition;