@jupyterlab/ui-components
Version:
JupyterLab - UI components written in React
366 lines • 11.1 kB
JavaScript
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { style as typestyleClass } from 'typestyle/lib';
export var LabIconStyle;
(function (LabIconStyle) {
/**
* The builtin stylesheets
*/
const builtinSheets = {
breadCrumb: {
container: {
$nest: {
// `&` will be substituted for the generated classname (interpolation)
'&:first-child svg': {
bottom: '1px',
marginLeft: '0px',
position: 'relative'
},
'&:hover': {
backgroundColor: 'var(--jp-layout-color2)'
},
['.jp-mod-dropTarget&']: {
backgroundColor: 'var(--jp-brand-color2)',
opacity: 0.7
}
}
},
element: {
borderRadius: 'var(--jp-border-radius)',
cursor: 'pointer',
margin: '0px 2px',
padding: '0px 2px',
height: '16px',
width: '16px',
verticalAlign: 'middle'
}
},
commandPaletteHeader: {
container: {
height: '14px',
margin: '0 14px 0 auto'
},
element: {
height: '14px',
width: '14px'
},
options: {
elementPosition: 'center'
}
},
commandPaletteItem: {
element: {
height: '16px',
width: '16px'
},
options: {
elementPosition: 'center'
}
},
launcherCard: {
container: {
height: '52px',
width: '52px'
},
element: {
height: '52px',
width: '52px'
},
options: {
elementPosition: 'center'
}
},
launcherSection: {
container: {
boxSizing: 'border-box',
marginRight: '12px',
height: '32px',
width: '32px'
},
element: {
height: '32px',
width: '32px'
},
options: {
elementPosition: 'center'
}
},
listing: {
container: {
flex: '0 0 20px',
marginRight: '4px',
position: 'relative'
},
element: {
height: '16px',
width: '16px'
},
options: {
elementPosition: 'center'
}
},
listingHeaderItem: {
container: {
display: 'inline',
height: '16px',
width: '16px'
},
element: {
height: 'auto',
margin: '-2px 0 0 0',
width: '20px'
},
options: {
elementPosition: 'center'
}
},
mainAreaTab: {
container: {
$nest: {
'.lm-DockPanel-tabBar &': {
marginRight: '4px'
}
}
},
element: {
$nest: {
'.lm-DockPanel-tabBar &': {
height: '14px',
width: '14px'
}
}
},
options: {
elementPosition: 'center'
}
},
menuItem: {
container: {
display: 'inline-block',
verticalAlign: 'middle'
},
element: {
height: '16px',
width: '16px'
},
options: {
elementPosition: 'center'
}
},
runningItem: {
container: {
margin: '0px 4px 0px 4px'
},
element: {
height: '16px',
width: '16px'
},
options: {
elementPosition: 'center'
}
},
select: {
container: {
pointerEvents: 'none'
},
element: {
position: 'absolute',
height: 'auto',
width: '16px'
}
},
settingsEditor: {
container: {
display: 'flex',
flex: '0 0 20px',
margin: '0 3px 0 0',
position: 'relative',
height: '20px',
width: '20px'
},
element: {
height: '16px',
width: '16px'
},
options: {
elementPosition: 'center'
}
},
sideBar: {
element: {
height: 'auto',
width: '20px'
},
options: {
elementPosition: 'center'
}
},
splash: {
container: {
animation: '0.3s fade-in linear forwards',
height: '100%',
width: '100%',
zIndex: 1
},
element: {
// width no height
width: '100px'
},
options: {
elementPosition: 'center'
}
},
statusBar: {
element: {
left: '0px',
top: '0px',
height: '18px',
width: '20px',
position: 'relative'
}
},
toolbarButton: {
container: {
display: 'inline-block',
verticalAlign: 'middle'
},
element: {
height: '16px',
width: '16px'
},
options: {
elementPosition: 'center'
}
}
};
function _elementPositionFactory(extra) {
return {
container: {
alignItems: 'center',
display: 'flex'
},
element: {
display: 'block',
...extra
}
};
}
/**
* Styles to help with positioning
*/
const positionSheets = {
center: _elementPositionFactory({ margin: '0 auto', width: '100%' }),
top: _elementPositionFactory({ margin: '0 0 auto 0' }),
right: _elementPositionFactory({ margin: '0 0 0 auto' }),
bottom: _elementPositionFactory({ margin: 'auto 0 0 0' }),
left: _elementPositionFactory({ margin: '0 auto 0 0' }),
'top right': _elementPositionFactory({ margin: '0 0 auto auto' }),
'bottom right': _elementPositionFactory({ margin: 'auto 0 0 auto' }),
'bottom left': _elementPositionFactory({ margin: 'auto auto 0 0' }),
'top left': _elementPositionFactory({ margin: '0 auto 0 auto' })
};
function _elementSizeFactory(size) {
return {
element: {
height: size,
width: size
}
};
}
/**
* sheets that establish some default sizes
*/
const sizeSheets = {
small: _elementSizeFactory('14px'),
normal: _elementSizeFactory('16px'),
large: _elementSizeFactory('20px'),
xlarge: _elementSizeFactory('24px')
};
/**
* Merge two or more icon sheets into a single "pure"
* icon style (ie collections of CSS props only)
*/
function mergeSheets(sheets) {
return {
container: Object.assign({}, ...sheets.map(s => s.container)),
element: Object.assign({}, ...sheets.map(s => s.element))
};
}
/**
* Resolve one or more stylesheets that may just be a string naming
* one of the builtin stylesheets to an array of proper ISheet objects
*/
function resolveSheet(stylesheet) {
if (!stylesheet) {
return [];
}
if (!Array.isArray(stylesheet)) {
// wrap in array
stylesheet = [stylesheet];
}
return stylesheet.map(k => (typeof k === 'string' ? builtinSheets[k] : k));
}
/**
* Resolve and merge multiple icon stylesheets
*/
function applySheetOptions(sheets) {
const options = Object.assign({}, ...sheets.map(s => s.options));
if (options.elementPosition) {
sheets.unshift(positionSheets[options.elementPosition]);
}
if (options.elementSize) {
sheets.unshift(sizeSheets[options.elementSize]);
}
return mergeSheets(sheets);
}
/**
* Resolve a pure icon stylesheet into a typestyle class
*/
function resolveStyleClass(stylesheet) {
var _a;
return typestyleClass({
...stylesheet.container,
$nest: {
...(_a = stylesheet.container) === null || _a === void 0 ? void 0 : _a.$nest,
['svg']: stylesheet.element
}
});
}
// cache style classes for builtin stylesheets
const _styleClassCache = new Map();
/**
* Get a typestyle class, given a set of icon styling props
*/
function styleClass(props) {
if (!props || Object.keys(props).length === 0) {
// props is empty
return '';
}
let { elementPosition, elementSize, stylesheet, ...elementCSS } = props;
// add option args with defined values to overrides
const options = {
...(elementPosition && { elementPosition }),
...(elementSize && { elementSize })
};
// try to look up the style class in the cache
const cacheable = typeof stylesheet === 'string' && Object.keys(elementCSS).length === 0;
const cacheKey = cacheable
? [stylesheet, elementPosition, elementSize].join(',')
: '';
if (cacheable && _styleClassCache.has(cacheKey)) {
return _styleClassCache.get(cacheKey);
}
// resolve kind to an array of sheets, then stick overrides on the end
const sheets = resolveSheet(stylesheet);
sheets.push({ element: elementCSS, options });
// apply style options/merge sheets, then convert to typestyle class
const cls = resolveStyleClass(applySheetOptions(sheets));
if (cacheable) {
// store in cache for later reuse
_styleClassCache.set(cacheKey, cls);
}
return cls;
}
LabIconStyle.styleClass = styleClass;
})(LabIconStyle || (LabIconStyle = {}));
//# sourceMappingURL=icon.js.map