mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Changed classes to use BEM, and fixed TS compilation errors

Browse source
This commit is contained in:
Alejandro Celaya 2022-01-08 12:06:28 +01:00
parent 1e03eed6c0
commit b727a704a6
3 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/tags/helpers/Tag.scss
View file

@ -1,9 +1,9 @@
.tag { .tag {
color: #fff; color: #fff;
}
&.light-generated-bg { .tag--light-bg {
color: #000; color: #000;
}
} }
.tag:not(:last-child) { .tag:not(:last-child) {

3
src/tags/helpers/Tag.tsx
View file

@ -1,4 +1,5 @@
import { FC, MouseEventHandler } from 'react'; import { FC, MouseEventHandler } from 'react';
import classNames from 'classnames';
import ColorGenerator from '../../utils/services/ColorGenerator'; import ColorGenerator from '../../utils/services/ColorGenerator';
import './Tag.scss'; import './Tag.scss';
@ -13,7 +14,7 @@ interface TagProps {
const Tag: FC<TagProps> = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => ( const Tag: FC<TagProps> = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => (
<span <span
className={`badge tag ${className} ${colorGenerator.isColorLightForKey(text) ? 'light-generated-bg' : ''}`} className={classNames('badge tag', className, { 'tag--light-bg': colorGenerator.isColorLightForKey(text) })}
style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }} style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }}
onClick={onClick} onClick={onClick}
> >

10
src/utils/services/ColorGenerator.ts
View file

@ -6,9 +6,10 @@ const { floor, random, sqrt, round } = Math;
const letters = '0123456789ABCDEF'; const letters = '0123456789ABCDEF';
const buildRandomColor = () => `#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`; const buildRandomColor = () => `#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`;
const normalizeKey = (key: string) => key.toLowerCase().trim(); const normalizeKey = (key: string) => key.toLowerCase().trim();
const hexColorToRgbArray = (colorHex: string): number[] => (colorHex.match(/../g) || []).map(hex => parseInt(hex, 16) || 0); const hexColorToRgbArray = (colorHex: string): number[] =>
(colorHex.match(/../g) ?? []).map((hex) => parseInt(hex, 16) || 0);
// HSP by Darel Rex Finley https://alienryderflex.com/hsp.html // HSP by Darel Rex Finley https://alienryderflex.com/hsp.html
const perceivedLightness = (r: number = 0, g: number = 0, b: number = 0) => round(sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2)); const perceivedLightness = (r = 0, g = 0, b = 0) => round(sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2));
export default class ColorGenerator { export default class ColorGenerator {
private readonly colors: Record<string, string>; private readonly colors: Record<string, string>;
@ -40,11 +41,12 @@ export default class ColorGenerator {
return color; return color;
}; };
public readonly isColorLightForKey = (key: string) => { public readonly isColorLightForKey = (key: string): boolean => {
const colorHex = this.getColorForKey(key).substring(1); const colorHex = this.getColorForKey(key).substring(1);
if (this.lights[colorHex] == undefined) { if (!this.lights[colorHex]) {
const rgb = hexColorToRgbArray(colorHex); const rgb = hexColorToRgbArray(colorHex);
this.lights[colorHex] = perceivedLightness(...rgb) >= 128; this.lights[colorHex] = perceivedLightness(...rgb) >= 128;
} }