@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
258 lines (257 loc) • 6.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const styleVars = {
colors: {
added: 'green',
altBackground: 'whitesmoke',
altForeground: '#333333',
background: '#FEFEFE',
boxShadow: 'rgba(0, 0, 0, 0.2)',
blobColor: '#696969',
deleted: 'red',
disabledText: '#e0e0e0',
error: 'red',
leftRevColor: 'red',
linkText: 'blue',
inputBackground: '#FEFEFE',
inputForeground: '#333333',
modified: 'orange',
panelBorder: 'whitesmoke',
rightRevColor: 'green',
selectable: 'lightskyblue',
selected: 'lightskyblue',
selectedText: '#001883',
text: '#333333',
},
margins: {
small: 3,
medium: 7,
large: 15,
pageTop: 20,
pageLeft: 20,
pageBottom: 20,
pageRight: 20,
},
};
const globalStyles = {
background: {
background: '@colors.background',
},
panel: {
background: '@colors.background',
borderRadius: 3,
color: '@colors.text',
marginRight: '@margins.medium+px',
padding: '@margins.medium+px',
},
altPanel: {
_extends: 'panel',
background: '@colors.altBackground',
color: '@colors.altForeground',
},
borderedPanel: {
_extends: 'panel',
border: '1px solid @colors.panelBorder',
},
fill: {
position: 'relative',
height: '100%',
width: '100%',
},
popup: {
_extends: 'panel',
position: 'absolute',
zIndex: 1,
boxShadow: '0 4px 8px 0 @colors.boxShadow, 0 6px 20px 0 @colors.boxShadow',
},
block: {
display: 'block',
marginBottom: '@margins.medium+px',
},
inline: {
display: 'inline-block',
},
inlineBlock: {
display: 'inline-block',
marginRight: '@margins.medium+px',
},
card: {
_extends: 'panel',
borderRadius: 7,
marginBottom: '@margins.medium+px',
marginRight: '@margins.medium+px',
},
flexColumn: {
display: 'flex',
flexDirection: 'column',
},
flexRow: {
display: 'flex',
flexDirection: 'row',
},
flexGrow: {
display: 'flex',
flexGrow: 1,
},
normalText: {
fontSize: 12,
lineHeight: 1.35,
fontWeight: 'normal',
},
bigText: {
_extends: 'normalText',
fontSize: 18,
},
largerText: {
_extends: 'normalText',
fontSize: 14,
},
smallerText: {
_extends: 'normalText',
fontSize: 11,
},
boldText: {
fontWeight: 'bold',
},
disabledText: {
color: '@colors.disabledText',
},
headerText: {
_extends: ['normalText', 'boldText'],
marginBottom: '@margins.large+px',
marginRight: '@margins.large+px',
},
h1Text: {
_extends: 'headerText',
fontSize: 22,
marginRight: '@margins.large+px',
},
h2Text: {
_extends: 'headerText',
fontSize: 18,
},
h3Text: {
_extends: 'headerText',
fontSize: 14,
},
h4Text: {
_extends: 'headerText',
fontSize: 12,
marginBottom: '@margins.medium+px',
marginRight: '@margins.medium+px',
},
h5Text: {
_extends: 'headerText',
fontSize: 14,
fontWeight: 'normal',
marginBottom: '@margins.medium+px',
marginRight: '@margins.medium+px',
},
errorText: {
_extends: 'largerText',
color: '@colors.error',
},
linesAdded: {
color: 'green',
},
linesDeleted: {
color: 'red',
},
selectable: {
border: `1px solid @colors.selectable`,
borderRadius: 3,
cursor: 'pointer',
userSelect: 'none',
},
selected: {
_extends: 'selectable',
background: '@colors.selected',
color: '@colors.selectedText',
},
link: {
color: '@colors.linkText',
cursor: 'pointer',
textDecoration: 'underline',
},
linkHover: {
_extends: 'link',
textDecoration: 'underline',
},
menuDivider: {
borderBottom: `2px solid @colors.altBackground`,
marginBottom: '@margins.medium+px',
},
};
function style(...styles) {
const styleOut = {};
const flattenedStyles = styles.reduce((acc, val) => acc.concat(val), []);
for (const specifiedStyle of flattenedStyles) {
if (!specifiedStyle) {
continue;
}
if (typeof specifiedStyle === 'object') {
Object.assign(styleOut, processExtends(specifiedStyle));
}
else {
if (!globalStyles.hasOwnProperty(specifiedStyle)) {
debugger;
console.warn(`git-temporal: unknown style requested ${specifiedStyle}`);
}
else {
Object.assign(styleOut, processExtends(globalStyles[specifiedStyle]));
}
}
}
return interpolateStyleVars(styleOut);
}
exports.style = style;
function getStyleVar(groupName, varName) {
const globalOverrides = window && window.GT_STYLE_VARS;
const group = (globalOverrides && globalOverrides[groupName]) || styleVars[groupName];
return group.hasOwnProperty(varName)
? group[varName]
: styleVars[groupName][varName];
}
exports.getStyleVar = getStyleVar;
function processExtends(styleObject) {
const styleOut = {};
for (const propertyName in styleObject) {
if (propertyName === '_extends') {
let extendedStyles = styleObject[propertyName];
if (!Array.isArray(extendedStyles)) {
extendedStyles = [extendedStyles];
}
for (const extendedStyle of extendedStyles) {
Object.assign(styleOut, style(extendedStyle));
}
}
else {
styleOut[propertyName] = styleObject[propertyName];
}
delete styleOut._extends;
}
return styleOut;
}
function interpolateStyleVars(styleObject) {
for (const key in styleObject) {
const value = styleObject[key];
if (!(typeof value === 'string' || value instanceof String)) {
continue;
}
const matches = value.match(/\@[^\s\.]*\.[^\s]*/g);
if (!matches || matches.length <= 0) {
continue;
}
const regex = /\@([^\s\.]*)\.([^\s\+]*)\+?/;
let newValue = value;
for (const match of matches) {
const [_matchedValue, styleVarsGroup, styleVar] = match.match(regex);
const interpolated = getStyleVar(styleVarsGroup, styleVar);
if (interpolated) {
newValue = newValue.replace(regex, interpolated);
}
}
styleObject[key] = newValue;
}
return styleObject;
}