@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
59 lines • 2.48 kB
JavaScript
import { css } from 'styled-components';
import { POSITIONS } from '../../../types/positions/positions';
// mixins
import { contentBottomMargin, innerLeftContentPosition, innerRightContentPosition, inputPadding, labelInTopStyles, } from '../../../styles/mixins/input.mixin';
import { InputHelpMessagePosition } from '../types/inputTheme';
const getLeftExtraStyles = (affixPosition, isOutAffixPosition) => {
if (affixPosition === POSITIONS.LEFT && !isOutAffixPosition) {
return css `
${innerLeftContentPosition}
`;
}
return undefined;
};
const getRightExtraStyles = (affixPosition, isOutAffixPosition) => {
if (affixPosition === POSITIONS.RIGHT && !isOutAffixPosition) {
return innerRightContentPosition();
}
return undefined;
};
const getTopExtraStyles = (affixPosition, width, isOutAffixPosition, inputWidth) => {
if (affixPosition === POSITIONS.LEFT && isOutAffixPosition) {
return labelInTopStyles(width || 0, inputWidth || 0);
}
return undefined;
};
const getBottomExtraStyles = (affixPosition, width, isOutAffixPosition, helpTextPosition) => {
if (affixPosition === POSITIONS.LEFT &&
isOutAffixPosition &&
helpTextPosition === InputHelpMessagePosition.BOTTOM) {
return contentBottomMargin(width || 0, 0);
}
return undefined;
};
const getCenterExtraStyles = (affixPosition, width, isOutAffixPosition) => {
if (affixPosition === POSITIONS.LEFT && !isOutAffixPosition) {
return inputPadding(width || 0, 0);
}
return undefined;
};
// Depending on the position of the affix the styles change
export const getExtraStyles = (stylesPosition, affixPosition, width, isOutAffixPosition, helpTextPosition, inputWidth) => {
if (stylesPosition === POSITIONS.LEFT) {
return getLeftExtraStyles(affixPosition, isOutAffixPosition);
}
if (stylesPosition === POSITIONS.RIGHT) {
return getRightExtraStyles(affixPosition, isOutAffixPosition);
}
if (stylesPosition === POSITIONS.TOP) {
return getTopExtraStyles(affixPosition, width, isOutAffixPosition, inputWidth);
}
if (stylesPosition === POSITIONS.BOTTOM) {
return getBottomExtraStyles(affixPosition, width, isOutAffixPosition, helpTextPosition);
}
if (stylesPosition === POSITIONS.CENTER) {
return getCenterExtraStyles(affixPosition, width, isOutAffixPosition);
}
return undefined;
};
//# sourceMappingURL=extraStyles.utils.js.map