@up-group-ui/react-controls
Version:
Up shared react controls
128 lines • 4.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var utils_1 = require("../../../Common/theming/utils");
var noGutterStyle = function (props) {
if (props.gutter !== 0) {
return {};
}
switch (props.isAddOn) {
case 'none': {
return {
$nest: {
'& .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
'& .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
'& .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn': {
borderRadius: 0,
},
},
};
}
case 'right': {
return {
$nest: {
'& .up-btn-wrapper:first-child .up-btn': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
'& .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
'& .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
'& .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn': {
borderRadius: 0,
},
},
};
}
case 'left': {
return {
$nest: {
'& .up-btn-wrapper:last-child .up-btn': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
'& .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
'& .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
'& .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn': {
borderRadius: 0,
},
},
};
}
}
};
var setGutter = function (props) {
if (props.align === 'v') {
return {
$nest: {
'& .up-btn-wrapper': {
marginBottom: (0, utils_1.toRem)(props.gutter),
},
},
};
}
else {
return {
$nest: {
'& .up-btn-wrapper': {
marginRight: (0, utils_1.toRem)(props.gutter),
},
},
};
}
};
var setAlignment = function (props) {
if (props.align === 'v') {
return {
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
};
}
else {
return {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
};
}
};
var setWidth = function (props) {
if (props.width === 'full') {
return {
width: '100%',
};
}
else {
return {
width: 'auto',
};
}
};
var getStyles = function (props) {
return (0, classnames_1.default)('up-buttons-wrapper', (0, typestyle_1.style)(setGutter(props)), (0, typestyle_1.style)(setAlignment(props)), (0, typestyle_1.style)(noGutterStyle(props)), (0, typestyle_1.style)(setWidth(props)));
};
exports.getStyles = getStyles;
//# sourceMappingURL=styles.js.map