mirror of
https://github.com/SomboChea/ui
synced 2024-05-20 18:31:37 +07:00
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
/**
|
|
* CSS to represent truncated text with an ellipsis.
|
|
*/
|
|
export function ellipsis(width: string | number): {} {
|
|
return {
|
|
display: 'inline-block',
|
|
maxWidth: width,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
wordWrap: 'normal',
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
|
|
*/
|
|
interface SpacingShortHand<type> {
|
|
top?: type;
|
|
right?: type;
|
|
bottom?: type;
|
|
left?: type;
|
|
}
|
|
|
|
const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
|
|
|
|
export function spacing(property: 'padding' | 'margin', ...values: SpacingShortHand<number | string>[]): {} {
|
|
const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
|
|
const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
|
|
let styles = {};
|
|
for (let i = 0; i < valuesWithDefaults.length; i += 1) {
|
|
if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
|
|
styles = {
|
|
...styles,
|
|
[`${property}${positionMap[i]}`]: valuesWithDefaults[i],
|
|
};
|
|
}
|
|
}
|
|
return styles;
|
|
}
|