592 lines
17 KiB
TypeScript
592 lines
17 KiB
TypeScript
// import React, { JSXElementConstructor } from "react";
|
|
// import { IconProps, IconWrapper } from "constants/IconConstants";
|
|
|
|
import { Alignment } from "@blueprintjs/core";
|
|
import { IconName } from "@blueprintjs/icons";
|
|
import {
|
|
CANVAS_SELECTOR,
|
|
CONTAINER_GRID_PADDING,
|
|
GridDefaults,
|
|
TextSizes,
|
|
WIDGET_PADDING,
|
|
} from "constants/WidgetConstants";
|
|
import generate from "nanoid/generate";
|
|
import { WidgetPositionProps } from "./BaseWidget";
|
|
import { Theme } from "constants/DefaultTheme";
|
|
import {
|
|
ButtonStyleTypes,
|
|
ButtonVariant,
|
|
ButtonVariantTypes,
|
|
ButtonPlacement,
|
|
ButtonPlacementTypes,
|
|
ButtonBorderRadiusTypes,
|
|
} from "components/constants";
|
|
import tinycolor from "tinycolor2";
|
|
import { createGlobalStyle } from "styled-components";
|
|
import { Classes } from "@blueprintjs/core";
|
|
import { Classes as DateTimeClasses } from "@blueprintjs/datetime";
|
|
import { BoxShadowTypes } from "components/designSystems/appsmith/WidgetStyleContainer";
|
|
import { SchemaItem } from "./JSONFormWidget/constants";
|
|
import { find, isEmpty } from "lodash";
|
|
import { rgbaMigrationConstantV56 } from "./constants";
|
|
import { DynamicPath } from "utils/DynamicBindingUtils";
|
|
import { isArray } from "lodash";
|
|
import { PropertyHookUpdates } from "constants/PropertyControlConstants";
|
|
|
|
const punycode = require("punycode/");
|
|
|
|
type SanitizeOptions = {
|
|
existingKeys?: string[];
|
|
};
|
|
|
|
export function getDisplayName(WrappedComponent: {
|
|
displayName: any;
|
|
name: any;
|
|
}) {
|
|
return WrappedComponent.displayName || WrappedComponent.name || "Component";
|
|
}
|
|
|
|
export function getWidgetDimensions(props: WidgetPositionProps) {
|
|
return {
|
|
componentWidth:
|
|
(props.rightColumn - props.leftColumn) * props.parentColumnSpace,
|
|
componentHeight: (props.bottomRow - props.topRow) * props.parentRowSpace,
|
|
};
|
|
}
|
|
|
|
export function getSnapSpaces(props: WidgetPositionProps) {
|
|
const { componentWidth } = getWidgetDimensions(props);
|
|
return {
|
|
snapRowSpace: GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
|
|
snapColumnSpace: componentWidth
|
|
? (componentWidth - (CONTAINER_GRID_PADDING + WIDGET_PADDING) * 2) /
|
|
GridDefaults.DEFAULT_GRID_COLUMNS
|
|
: 0,
|
|
};
|
|
}
|
|
|
|
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,
|
|
};
|
|
};
|
|
// Padding between PositionContainer and Widget
|
|
export const WidgetContainerDiff = 8;
|
|
// MArgin between Label and Input
|
|
export const labelMargin = 5;
|
|
export const hexToRgba = (color: string, alpha: number) => {
|
|
const value = hexToRgb(color);
|
|
return `rgba(${value.r}, ${value.g}, ${value.b}, ${alpha});`;
|
|
};
|
|
|
|
const ALPHANUMERIC = "1234567890abcdefghijklmnopqrstuvwxyz";
|
|
// const ALPHABET = "abcdefghijklmnopqrstuvwxyz";
|
|
|
|
export const generateReactKey = ({
|
|
prefix = "",
|
|
}: { prefix?: string } = {}): string => {
|
|
return prefix + generate(ALPHANUMERIC, 10);
|
|
};
|
|
|
|
export const getCustomTextColor = (theme: Theme, backgroundColor?: string) => {
|
|
const brightness = tinycolor(backgroundColor)
|
|
.greyscale()
|
|
.getBrightness();
|
|
const percentageBrightness = (brightness / 255) * 100;
|
|
|
|
if (!backgroundColor)
|
|
return theme.colors.button[ButtonStyleTypes.PRIMARY.toLowerCase()].primary
|
|
.textColor;
|
|
const isDark = percentageBrightness < 70;
|
|
|
|
if (isDark) {
|
|
return "#FFFFFF";
|
|
}
|
|
|
|
return "#000000";
|
|
};
|
|
|
|
export const getCustomHoverColor = (
|
|
theme: Theme,
|
|
buttonVariant?: ButtonVariant,
|
|
backgroundColor?: string,
|
|
) => {
|
|
backgroundColor = backgroundColor ? backgroundColor : "#fff";
|
|
|
|
switch (buttonVariant) {
|
|
case ButtonVariantTypes.SECONDARY:
|
|
return backgroundColor
|
|
? lightenColor(backgroundColor)
|
|
: theme.colors.button.primary.secondary.hoverColor;
|
|
|
|
case ButtonVariantTypes.TERTIARY:
|
|
return backgroundColor
|
|
? lightenColor(backgroundColor)
|
|
: theme.colors.button.primary.tertiary.hoverColor;
|
|
|
|
default:
|
|
return backgroundColor
|
|
? darkenColor(backgroundColor, 10)
|
|
: theme.colors.button.primary.primary.hoverColor;
|
|
}
|
|
};
|
|
|
|
export const getCustomBackgroundColor = (
|
|
buttonVariant?: ButtonVariant,
|
|
backgroundColor?: string,
|
|
) => {
|
|
return buttonVariant === ButtonVariantTypes.PRIMARY
|
|
? backgroundColor
|
|
? backgroundColor
|
|
: "#fff"
|
|
: "none";
|
|
};
|
|
|
|
export const getCustomBorderColor = (
|
|
buttonVariant?: ButtonVariant,
|
|
backgroundColor?: string,
|
|
) => {
|
|
return buttonVariant === ButtonVariantTypes.SECONDARY
|
|
? backgroundColor
|
|
: "none";
|
|
};
|
|
|
|
export const getCustomJustifyContent = (placement?: ButtonPlacement) => {
|
|
switch (placement) {
|
|
case ButtonPlacementTypes.START:
|
|
return "start";
|
|
case ButtonPlacementTypes.CENTER:
|
|
return "center";
|
|
case ButtonPlacementTypes.BETWEEN:
|
|
return "space-between";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
export const getAlignText = (isRightAlign: boolean, iconName?: IconName) =>
|
|
iconName
|
|
? isRightAlign
|
|
? Alignment.LEFT
|
|
: Alignment.RIGHT
|
|
: Alignment.CENTER;
|
|
export const escapeSpecialChars = (stringifiedJSONObject: string) => {
|
|
return stringifiedJSONObject
|
|
.replace(/\\n/g, "\\\\n") // new line char
|
|
.replace(/\\b/g, "\\\\b") //
|
|
.replace(/\\t/g, "\\\\t") // tab
|
|
.replace(/\\f/g, "\\\\f") //
|
|
.replace(/\\/g, "\\\\") //
|
|
.replace(/\\r/g, "\\\\r"); //
|
|
};
|
|
|
|
/**
|
|
* ---------------------------------------------------------------------------------------------------
|
|
* STYLING UTILS
|
|
*----------------------------------------------------------------------------------------------------
|
|
*
|
|
* this section contains all the helpers required related to styling of widget
|
|
* by styling, we meant things like background color, text color, border-radius etc
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* return "#fff" or "#000" based on the color passed
|
|
* if the color is dark, it will return "#fff"
|
|
* else it will return "#000"
|
|
*
|
|
* @param borderRadius
|
|
* @returns
|
|
*/
|
|
export const getComplementaryGrayscaleColor = (color = "#fff") => {
|
|
const tinyColor = tinycolor(color);
|
|
const rgb: any = tinyColor.isValid()
|
|
? tinyColor.toRgb()
|
|
: tinycolor("#fff").toRgb();
|
|
|
|
const brightness = Math.round(
|
|
(parseInt(rgb.r) * 299 + parseInt(rgb.g) * 587 + parseInt(rgb.b) * 114) /
|
|
1000,
|
|
);
|
|
const textColor = brightness > 125 ? "black" : "white";
|
|
|
|
return textColor;
|
|
};
|
|
|
|
/**
|
|
* lightens the color
|
|
*
|
|
* @param borderRadius
|
|
* @returns
|
|
*/
|
|
export const lightenColor = (color = "#fff") => {
|
|
const { h, s } = tinycolor(color).toHsl();
|
|
|
|
const newColor = tinycolor(`hsl ${h} ${s} 0.93}`).toHex();
|
|
|
|
return `#${newColor}`;
|
|
};
|
|
|
|
/**
|
|
* darken the color
|
|
*
|
|
* @param borderRadius
|
|
* @returns
|
|
*/
|
|
export const darkenColor = (color = "#fff", amount = 10) => {
|
|
const tinyColor = tinycolor(color);
|
|
|
|
return tinyColor.isValid()
|
|
? tinyColor.darken(amount).toString()
|
|
: tinycolor("#fff")
|
|
.darken(amount)
|
|
.toString();
|
|
};
|
|
|
|
/**
|
|
* checks if color is dark or not
|
|
*
|
|
* @param color
|
|
* @returns
|
|
*/
|
|
export const isDark = (color: string) => {
|
|
const brightness = tinycolor(color)
|
|
.greyscale()
|
|
.getBrightness();
|
|
const percentageBrightness = (brightness / 255) * 100;
|
|
const isDark = percentageBrightness < 70;
|
|
|
|
return isDark;
|
|
};
|
|
|
|
export const PopoverStyles = createGlobalStyle<{
|
|
borderRadius: string;
|
|
portalClassName: string;
|
|
accentColor: string;
|
|
}>`
|
|
${(props) => `
|
|
.${props.portalClassName} .${Classes.POPOVER} {
|
|
border-radius: ${props.borderRadius} !important;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
|
|
margin-top: 4px !important;
|
|
}
|
|
|
|
.${props.portalClassName} .${DateTimeClasses.DATEPICKER_DAY},
|
|
.${props.portalClassName} .${Classes.BUTTON} {
|
|
border-radius: ${props.borderRadius} !important;
|
|
}
|
|
.${props.portalClassName} .${DateTimeClasses.DATEPICKER_DAY_SELECTED} {
|
|
background-color: ${props.accentColor} !important;
|
|
}
|
|
|
|
.${props.portalClassName} .${Classes.INPUT} {
|
|
border-radius: ${props.borderRadius} !important;
|
|
}
|
|
|
|
.${props.portalClassName} .${Classes.INPUT}:focus, .${
|
|
props.portalClassName
|
|
} .${Classes.INPUT}:active {
|
|
border: 1px solid ${props.accentColor} !important;
|
|
box-shadow: 0px 0px 0px 2px ${lightenColor(
|
|
props.accentColor,
|
|
)} !important;
|
|
}
|
|
|
|
.${props.portalClassName} .ads-dropdown-options-wrapper {
|
|
border: 0px solid !important;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
/**
|
|
* Maps the old font sizes such as HEADING1, HEADING2 etc. to the new theming fontSizes(in rems).
|
|
* This is specifically added for the theming migration. For text-widget v2 this function should be removed.
|
|
* @param fontSize
|
|
* @returns
|
|
*/
|
|
export const fontSizeUtility = (fontSize: string | undefined) => {
|
|
switch (fontSize) {
|
|
case TextSizes.PARAGRAPH2:
|
|
return "0.75rem";
|
|
case TextSizes.PARAGRAPH:
|
|
return "0.875rem";
|
|
case TextSizes.HEADING3:
|
|
return "1rem";
|
|
case TextSizes.HEADING2:
|
|
return "1.125rem";
|
|
case TextSizes.HEADING1:
|
|
return "1.5rem";
|
|
|
|
default:
|
|
return fontSize;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function to map Old borderRadius(with dynamic binding) to the new theming border radius in theming migration.
|
|
* This function should be removed from the widgets whenever their is a new version release for the widgets.
|
|
* @param borderRadius
|
|
* @returns
|
|
*/
|
|
export const borderRadiusUtility = (borderRadius: string | undefined) => {
|
|
switch (borderRadius) {
|
|
case ButtonBorderRadiusTypes.SHARP:
|
|
return "0px";
|
|
case ButtonBorderRadiusTypes.ROUNDED:
|
|
return "0.375rem";
|
|
case ButtonBorderRadiusTypes.CIRCLE:
|
|
return "9999px";
|
|
default:
|
|
return borderRadius;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function used inside boxShadowMigration to replace the default rgba(0, 0, 0, 0.25) value with the computed boxShadowColor theming migration for table widget.
|
|
* @param boxShadow
|
|
* @param boxShadowColor
|
|
* @returns
|
|
*/
|
|
export const replaceRgbaMigrationConstant = (
|
|
boxShadow: string,
|
|
boxShadowColor: string,
|
|
) => {
|
|
if (boxShadowColor) {
|
|
return boxShadow.replace("rgba(0, 0, 0, 0.25)", boxShadowColor);
|
|
}
|
|
return boxShadow;
|
|
};
|
|
|
|
/**
|
|
* Function used inside boxShadowMigration to map dynamicBinding based boxShadow to its respective mappings in theming migration for table widget.
|
|
* @param boxShadow
|
|
* @param boxShadowColor
|
|
* @returns
|
|
*/
|
|
export const boxShadowUtility = (boxShadow: string, boxShadowColor: string) => {
|
|
const newBoxShadowColor = boxShadowColor || rgbaMigrationConstantV56;
|
|
switch (boxShadow) {
|
|
case BoxShadowTypes.VARIANT1:
|
|
return `0px 0px 4px 3px ${newBoxShadowColor}`;
|
|
case BoxShadowTypes.VARIANT2:
|
|
return `3px 3px 4px ${newBoxShadowColor}`;
|
|
case BoxShadowTypes.VARIANT3:
|
|
return `0px 1px 3px ${newBoxShadowColor}`;
|
|
case BoxShadowTypes.VARIANT4:
|
|
return `2px 2px 0px ${newBoxShadowColor}`;
|
|
case BoxShadowTypes.VARIANT5:
|
|
return `-2px -2px 0px ${newBoxShadowColor}`;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Function used inside table widget cell properties for Icon and menu button types that helps to migrate boxShadow and boxShadowColor for the table widget.
|
|
* This function is used to run post theming migration for boxShadow and boxShadowColor;
|
|
* Function runs for the following scenarios, when:
|
|
* 1. boxShadow: Static; boxShadowColor: Dynamic
|
|
* 2. boxShadow: Dynamic; boxShadowColor: Static
|
|
* 3. boxShadow: Dynamic; boxShadowColor: empty
|
|
* 4. boxShadow: Dynamic; boxShadowColor: dynamic
|
|
*
|
|
* based on the above condition we apply the boxShadowUtility and boxShadowColorUtility functions.
|
|
*
|
|
* @param child Widget props
|
|
* @param columnName Current column name
|
|
* @param boxShadow current box shadow
|
|
* @param boxShadowColor current box shadow color
|
|
* @returns
|
|
*/
|
|
export const boxShadowMigration = (
|
|
dynamicList: DynamicPath[],
|
|
columnName: string,
|
|
boxShadow: string,
|
|
boxShadowColor: any,
|
|
) => {
|
|
const boxShadowRegex = new RegExp(columnName + ".boxShadow$");
|
|
const boxShadowColorRegex = new RegExp(columnName + ".boxShadowColor$");
|
|
|
|
const isBoxShadowDynamic = find(dynamicList, (value) =>
|
|
boxShadowRegex.test(value.key),
|
|
);
|
|
const isBoxShadowColorDynamic = find(dynamicList, (value) =>
|
|
boxShadowColorRegex.test(value.key),
|
|
);
|
|
|
|
//Case:1
|
|
if (!isBoxShadowDynamic && isBoxShadowColorDynamic) {
|
|
return replaceRgbaMigrationConstant(boxShadow, boxShadowColor);
|
|
} else if (
|
|
//Case 2 & 3:
|
|
isBoxShadowDynamic &&
|
|
(!isBoxShadowColorDynamic || boxShadowColor === "")
|
|
) {
|
|
return boxShadowUtility(boxShadow, boxShadowColor);
|
|
} else if (
|
|
//Case 4:
|
|
isBoxShadowDynamic &&
|
|
isBoxShadowColorDynamic
|
|
) {
|
|
const constantBoxShadow = boxShadowUtility(boxShadow, "");
|
|
return replaceRgbaMigrationConstant(
|
|
constantBoxShadow as string,
|
|
boxShadowColor,
|
|
);
|
|
}
|
|
};
|
|
|
|
// Creates a map between the string part of a key with max suffixed number found
|
|
// eg. keys -> ["key1", "key10", "newKey"]
|
|
// returns -> {key: 10, newKey: 0 }
|
|
const generateKeyToIndexMap = (keys: string[]) => {
|
|
const map: Record<string, number> = {};
|
|
|
|
keys.forEach((key) => {
|
|
/**
|
|
* input key123
|
|
* -> ['123', index: 3, input: 'key123', groups: undefined] (match return value)
|
|
*
|
|
* input key
|
|
* -> null
|
|
*/
|
|
const match = key.match(/\d+$/);
|
|
let prefix = key;
|
|
let suffix = 0;
|
|
const isKeyPresentInMap = map.hasOwnProperty(prefix);
|
|
|
|
if (match) {
|
|
prefix = key.slice(0, match.index); // key123 -> key
|
|
suffix = parseInt(match[0], 10);
|
|
}
|
|
|
|
if (!isKeyPresentInMap || (isKeyPresentInMap && map[key] < suffix)) {
|
|
map[prefix] = suffix;
|
|
}
|
|
});
|
|
|
|
return map;
|
|
};
|
|
|
|
export const sanitizeKey = (key: string, options?: SanitizeOptions) => {
|
|
// Step1 convert to ASCII characters
|
|
let sanitizedKey = punycode.toASCII(key);
|
|
|
|
// Step 2 Replaces all spl. characters/spaces with _
|
|
sanitizedKey = sanitizedKey.replace(/[^\w]/gi, "_");
|
|
|
|
// Step 3 Check if empty key
|
|
if (sanitizedKey.length === 0) sanitizedKey = "_";
|
|
|
|
// Step 4 Check if key starts with number
|
|
const [firstCharacter] = sanitizedKey;
|
|
if (/\d/.test(firstCharacter)) sanitizedKey = `_${sanitizedKey}`;
|
|
|
|
// Step 5 handle checking with existing keys if present
|
|
const { existingKeys = [] } = options || {};
|
|
if (existingKeys.length) {
|
|
const exactMatch = existingKeys.includes(sanitizedKey);
|
|
|
|
if (!exactMatch) return sanitizedKey;
|
|
|
|
const keyToIndexMap = generateKeyToIndexMap(existingKeys);
|
|
|
|
const match = sanitizedKey.match(/\d+$/);
|
|
let prefix = sanitizedKey;
|
|
|
|
if (match) {
|
|
prefix = sanitizedKey.slice(0, match.index); // key123 -> key
|
|
}
|
|
|
|
if (keyToIndexMap.hasOwnProperty(prefix)) {
|
|
return `${prefix}${keyToIndexMap[prefix] + 1}`;
|
|
}
|
|
|
|
return sanitizedKey;
|
|
}
|
|
|
|
return sanitizedKey;
|
|
};
|
|
|
|
/**
|
|
* Recursive function to traverse through all the children of the JSON form in theming migration.
|
|
* @param schemaItem
|
|
* @param propertyPath
|
|
* @param callback
|
|
*/
|
|
export const parseSchemaItem = (
|
|
schemaItem: SchemaItem,
|
|
propertyPath: string,
|
|
callback: (schemaItem: SchemaItem, propertyPath: string) => void,
|
|
) => {
|
|
// Update the theme stuff for this schema
|
|
callback(schemaItem, propertyPath);
|
|
if (schemaItem && !isEmpty(schemaItem.children)) {
|
|
Object.values(schemaItem.children).forEach((schemaItem) => {
|
|
const childPropertyPath = `${propertyPath}.children.${schemaItem.identifier}`;
|
|
parseSchemaItem(schemaItem, childPropertyPath, callback);
|
|
});
|
|
}
|
|
};
|
|
|
|
export const getMainCanvas = () =>
|
|
document.querySelector(`.${CANVAS_SELECTOR}`) as HTMLElement;
|
|
|
|
/*
|
|
* Function that composes two or more hooks together in the updateHook
|
|
* property of the property pane config
|
|
*
|
|
* - Often times we would wanna call more than one hook when a property is
|
|
* changed. Use this hook instead of nested calls
|
|
*
|
|
* Eack hook should either return `undefined` or an array of PropertyHookUpdates
|
|
* this function ignores the undefined and concats all the property update array.
|
|
*/
|
|
export function composePropertyUpdateHook(
|
|
updateFunctions: Array<
|
|
(
|
|
props: any,
|
|
propertyPath: string,
|
|
propertyValue: any,
|
|
) => Array<PropertyHookUpdates> | undefined
|
|
>,
|
|
): (
|
|
props: any,
|
|
propertyPath: string,
|
|
propertyValue: any,
|
|
) => Array<PropertyHookUpdates> | undefined {
|
|
return (props: any, propertyPath: string, propertyValue: any) => {
|
|
if (updateFunctions.length) {
|
|
let updates: PropertyHookUpdates[] = [];
|
|
|
|
updateFunctions.forEach((func) => {
|
|
if (typeof func === "function") {
|
|
const value = func(props, propertyPath, propertyValue);
|
|
|
|
if (isArray(value)) {
|
|
updates = updates.concat(value);
|
|
}
|
|
}
|
|
});
|
|
|
|
return updates.length ? updates : undefined;
|
|
} else {
|
|
return undefined;
|
|
}
|
|
};
|
|
}
|