@braineet/ui
Version:
Braineet design system
307 lines (300 loc) • 8.35 kB
JavaScript
;
exports.__esModule = true;
exports.useDebounce = exports.safeInvoke = exports.placing = exports.numberFormat = exports.lighten = exports.light = exports.hashCode = exports.getInitials = exports.fluid = exports.default = exports.darken = exports.dark = exports.currencyFormat = exports.borderRadius = exports.border = void 0;
var _react = require("react");
/**
* Get the rem value of px
* @param {string} val - px value
* @return {string} - rem value
*/
var fluid = function fluid(val) {
return val / 16 + "rem";
};
/**
* Get the borderRadius
* @param {number} radius - radius value
* @param {boolean} isPercent - if the value is a percent
* @return {string} - border-radius css property
*/
exports.fluid = fluid;
var borderRadius = function borderRadius(radius, isPercent) {
if (isPercent === void 0) {
isPercent = false;
}
return "border-radius: " + (isPercent ? radius + "%" : fluid(radius)) + ";";
};
exports.borderRadius = borderRadius;
var placing = function placing(_ref) {
var direction = _ref.direction;
var directions = "flex-direction: " + direction + ";";
return directions;
};
/**
* Get the lighten color
* @param {string} h - color hexadecimal
* @param {number} percent - percent of the opacity
* @return {string} - rgba color
*/
exports.placing = placing;
var lighten = function lighten(h, percent, colors) {
var hex = colors && colors[h] || h;
if (/^#([0-9a-f]{6}|[0-9a-f]{3})$/i.test(hex)) {
try {
var r = 0;
var g = 0;
var b = 0;
if (h.length === 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
} else if (hex.length === 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
return "rgba(" + +r + "," + +g + "," + +b + "," + percent + ")";
} catch (error) {
console.error(error);
}
}
return '';
};
/**
* Get the darken color
* @param {string} h - color hexadecimal
* @param {number} percent - percent of the opacity
* @return {string} - hsl color
*/
exports.lighten = lighten;
var darken = function darken(H, percent) {
var r = 0;
var g = 0;
var b = 0;
if (H.length === 4) {
r = "0x" + H[1] + H[1];
g = "0x" + H[2] + H[2];
b = "0x" + H[3] + H[3];
} else if (H.length === 7) {
r = "0x" + H[1] + H[2];
g = "0x" + H[3] + H[4];
b = "0x" + H[5] + H[6];
}
// Then to HSL
r /= 255;
g /= 255;
b /= 255;
var cmin = Math.min(r, g, b);
var cmax = Math.max(r, g, b);
var delta = cmax - cmin;
var h = 0;
var s = 0;
var l = 0;
if (delta === 0) h = 0;else if (cmax === r) h = (g - b) / delta % 6;else if (cmax === g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4;
h = Math.round(h * 60);
if (h < 0) h += 360;
l = (cmax + cmin) / 2;
s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
return "hsl(" + h + "," + s + "%," + (l - percent) + "%)";
};
/**
* Get number
* @param {string} val - id
* @return {string} - string
*/
exports.darken = darken;
var hashCode = function hashCode(s) {
var str = String(s);
var hash = 0;
var char;
if (str.trim().length === 0) return hash;
for (var i = 0; i < str.length; i += 1) {
char = str.charCodeAt(i);
// eslint-disable-next-line no-bitwise
hash = (hash << 5) - hash + char;
// Convert to 32bit integer
// eslint-disable-next-line no-bitwise
hash &= hash;
}
return Math.abs(hash);
};
/**
* Get First letter of Name
* @param {string} val - value
* @return {string} - initials
*/
exports.hashCode = hashCode;
var getInitials = function getInitials(name, fallback, _temp) {
if (fallback === void 0) {
fallback = '';
}
var _ref2 = _temp === void 0 ? {} : _temp,
oneLetter = _ref2.oneLetter;
if (!name || typeof name !== 'string') return fallback;
return name.replace(/\s+/, ' ').split(' ') // Repeated spaces results in empty strings
.slice(0, oneLetter ? 1 : 2).map(function (v) {
return v && v[0].toUpperCase();
}) // Watch out for empty strings
.join('');
};
exports.getInitials = getInitials;
var border = function border(shadows) {
var validShadows = shadows.filter(function (shadow) {
if (typeof shadow === 'string') {
return shadow;
}
return undefined;
});
return validShadows.join(',');
};
exports.border = border;
var safeInvoke = function safeInvoke(fn) {
if (typeof fn === 'function') {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
return fn.apply(void 0, args);
}
return undefined;
};
exports.safeInvoke = safeInvoke;
var useDebounce = function useDebounce(value, delay) {
var _useState = (0, _react.useState)(value),
debouncedValue = _useState[0],
setDebouncedValue = _useState[1];
(0, _react.useEffect)(function () {
var handler = setTimeout(function () {
setDebouncedValue(value);
}, delay);
return function () {
clearTimeout(handler);
};
}, [value]);
return debouncedValue;
};
exports.useDebounce = useDebounce;
function HSLToHex(h, s, l) {
// eslint-disable-next-line no-param-reassign
s /= 100;
// eslint-disable-next-line no-param-reassign
l /= 100;
var c = (1 - Math.abs(2 * l - 1)) * s;
var x = c * (1 - Math.abs(h / 60 % 2 - 1));
var m = l - c / 2;
var r = 0;
var g = 0;
var b = 0;
if (h >= 0 && h < 60) {
r = c;
g = x;
b = 0;
} else if (h >= 60 && h < 120) {
r = x;
g = c;
b = 0;
} else if (h >= 120 && h < 180) {
r = 0;
g = c;
b = x;
} else if (h >= 180 && h < 240) {
r = 0;
g = x;
b = c;
} else if (h >= 240 && h < 300) {
r = x;
g = 0;
b = c;
} else if (h >= 300 && h < 360) {
r = c;
g = 0;
b = x;
}
// Having obtained RGB, convert channels to hex
r = Math.round((r + m) * 255).toString(16);
g = Math.round((g + m) * 255).toString(16);
b = Math.round((b + m) * 255).toString(16);
// Prepend 0s, if necessary
if (r.length === 1) r = "0" + r;
if (g.length === 1) g = "0" + g;
if (b.length === 1) b = "0" + b;
return "#" + r + g + b;
}
function hexToHSL(H) {
// Convert hex to RGB first
var r = 0;
var g = 0;
var b = 0;
if (H.length === 4) {
r = "0x" + H[1] + H[1];
g = "0x" + H[2] + H[2];
b = "0x" + H[3] + H[3];
} else if (H.length === 7) {
r = "0x" + H[1] + H[2];
g = "0x" + H[3] + H[4];
b = "0x" + H[5] + H[6];
}
// Then to HSL
r /= 255;
g /= 255;
b /= 255;
var cmin = Math.min(r, g, b);
var cmax = Math.max(r, g, b);
var delta = cmax - cmin;
var h = 0;
var s = 0;
var l = 0;
if (delta === 0) h = 0;else if (cmax === r) h = (g - b) / delta % 6;else if (cmax === g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4;
h = Math.round(h * 60);
if (h < 0) h += 360;
l = (cmax + cmin) / 2;
s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
return {
h: h,
s: s,
l: l
};
}
var light = function light(color, val) {
var hsl = hexToHSL(color);
var hslLighten = HSLToHex(hsl.h, hsl.s, hsl.l + val);
return hslLighten;
};
exports.light = light;
var dark = function dark(color, val) {
var hsl = hexToHSL(color);
var hslLighten = HSLToHex(hsl.h, hsl.s, hsl.l - val);
return hslLighten;
};
exports.dark = dark;
var numberFormat = function numberFormat(value, locale, minimumFractionDigits) {
return new Intl.NumberFormat(locale, {
minimumFractionDigits: minimumFractionDigits
}).format(value);
};
exports.numberFormat = numberFormat;
var currencyFormat = function currencyFormat(value, currency, locale, minimumFractionDigits) {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency,
minimumFractionDigits: minimumFractionDigits
}).format(value);
};
exports.currencyFormat = currencyFormat;
var _default = {
borderRadius: borderRadius,
fluid: fluid,
lighten: lighten,
darken: darken,
hashCode: hashCode,
getInitials: getInitials,
border: border,
safeInvoke: safeInvoke,
light: light,
dark: dark,
numberFormat: numberFormat,
currencyFormat: currencyFormat
};
exports.default = _default;