PromucFlow_constructor/app/client/src/components/ads/common.tsx
2020-11-24 12:31:37 +05:30

97 lines
2.1 KiB
TypeScript

import { Theme } from "constants/DefaultTheme";
import tinycolor from "tinycolor2";
import styled from "styled-components";
import { toast } from "react-toastify";
export interface CommonComponentProps {
isLoading?: boolean; //default false
cypressSelector?: string;
className?: string;
disabled?: boolean; //default false
}
export type ThemeProp = {
theme: Theme;
};
export enum Classes {
ICON = "cs-icon",
APP_ICON = "cs-app-icon",
TEXT = "cs-text",
BP3_POPOVER_ARROW_BORDER = "bp3-popover-arrow-border",
BP3_POPOVER_ARROW_FILL = "bp3-popover-arrow-fill",
SPINNER = "cs-spinner",
}
export const hexToRgb = (
hex: string,
): {
r: number;
g: number;
b: number;
} => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
: {
r: -1,
g: -1,
b: -1,
};
};
export const hexToRgba = (color: string, alpha: number) => {
const value = hexToRgb(color);
return `rgba(${value.r}, ${value.g}, ${value.b}, ${alpha});`;
};
export const lighten = (color: string, amount: number) => {
return tinycolor(color)
.lighten(amount)
.toString();
};
export const darken = (color: string, amount: number) => {
return tinycolor(color)
.darken(amount)
.toString();
};
export const StoryWrapper = styled.div`
background: #ffffff;
height: 700px;
padding: 50px 100px;
`;
export enum Variant {
success = "success",
info = "info",
warning = "warning",
danger = "danger",
}
export const ToastVariant = (type: any) => {
let variant: Variant;
switch (type) {
case toast.TYPE.ERROR === type:
variant = Variant.danger;
break;
case toast.TYPE.INFO === type:
variant = Variant.info;
break;
case toast.TYPE.SUCCESS === type:
variant = Variant.success;
break;
case toast.TYPE.WARNING === type:
variant = Variant.warning;
break;
default:
variant = Variant.info;
break;
}
return variant;
};