Skip to content
Snippets Groups Projects
Commit f564d740 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[REF]: Refactor files-ui directory

parent 56084e19
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 2 additions and 679 deletions
src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts → src/files-ui/MaterialButton/utils/MaterialButtonStyleManager.ts
+ 1
− 1
View file @ f564d740
import { asureColor, colourNameToHex, completeAsureColor, darkerColor } from "../../../core"; import { asureColor, colourNameToHex, completeAsureColor, darkerColor } from "../../core";
import { DynamicSheet, DynamicSheetRule } from "@dynamicss/dynamicss"; import { DynamicSheet, DynamicSheetRule } from "@dynamicss/dynamicss";
export default class MaterialButtonStyleManager { export default class MaterialButtonStyleManager {
......
src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts → src/files-ui/VideoPreview/VideoPreviewProps.ts
+ 1
− 1
View file @ f564d740
import { OverridableComponentProps } from "../../overridable"; import { OverridableComponentProps } from "../overridable";
export interface VideoPreviewPropsMap extends OverridableComponentProps { export interface VideoPreviewPropsMap extends OverridableComponentProps {
......
src/files-ui/components/dropzone/components/DropzoneActionButtons/DropzoneActionButtons.tsx deleted 100644 → 0
+ 0
− 8
View file @ 56084e19
import * as React from "react";
interface ActionButtonsProps {}
const ActionButtons: React.FC<ActionButtonsProps> = (
props: ActionButtonsProps
) => {
return <div>ActionButtons</div>;
};
export default ActionButtons;
src/files-ui/components/dropzone/makeListOfActionButtons.ts deleted 100644 → 0
+ 0
− 41
View file @ 56084e19
import { ActionButtonItem } from "./components/dropzone/DropzoneProps";
/**
*
* @param uploadButton upload action button props
* @param abortButton abort action button props
* @param deleteButton delete action button props
* @param other array of other custom action buttons props
* @returns
*/
export const makeListOfActionButtonItems = (
uploadButton: ActionButtonItem | undefined,
abortButton: ActionButtonItem | undefined,
deleteButton: ActionButtonItem | undefined,
cleanButton: ActionButtonItem | undefined
): [ActionButtonItem[], ActionButtonItem[]] => {
let listOfTopButtons: ActionButtonItem[] = [];
let listOfBottomButtons: ActionButtonItem[] = [];
/* if (uploadButton) {
uploadButton.position === "top"
? listOfTopButtons.push(uploadButton)
: listOfBottomButtons.push(uploadButton);
}
if (abortButton) {
abortButton.position === "top"
? listOfTopButtons.push(abortButton)
: listOfBottomButtons.push(abortButton);
}
if (deleteButton) {
deleteButton.position === "top"
? listOfTopButtons.push(deleteButton)
: listOfBottomButtons.push(deleteButton);
}
other?.forEach((actionButton) => {
actionButton.position === "top"
? listOfTopButtons.push(actionButton)
: listOfBottomButtons.push(actionButton);
}); */
return [listOfTopButtons, listOfBottomButtons];
};
\ No newline at end of file
src/files-ui/components/dropzone/useDropzoneClassName.ts deleted 100644 → 0
+ 0
− 168
View file @ 56084e19
import { DynamicSheet, DynamicSheetRule, DynamiCSS } from "@dynamicss/dynamicss";
import * as React from "react";
import { completeAsureColor } from "../../core";
import { DEFAULT_BORDER_RADIUS } from "./components/dropzone/DropzoneProps";
export default function useDropzoneClassName(
dropzoneId: string,
className: string | undefined,
//isDragging: boolean,
//header: boolean | undefined = false,
//footer: boolean | undefined = false,
color: string | undefined,
//borderRadius: string | number | undefined,
background: string | undefined,
minHeight: string | number | undefined
): [string | undefined, string | undefined, string | undefined, string | undefined] {
//console.log("useDropzoneClassName", className, isDragging, header, footer, color, background, minHeight);
const finalDropzoneId: string = (color === undefined && background === undefined && minHeight === undefined) ? "default" : dropzoneId.replaceAll(":", "_");
const baseClassName: string = "fui-dropzone-root fui-dropzone-border";
const [idStyles, setIdStyles] = React.useState<string>("");
const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
const [finalClassName, setFinalClassName] = React.useState<string | undefined>(undefined);
const [finalClassNameHeader, setFinalClassNameHeader] = React.useState<string | undefined>(undefined);
const [finalClassNameFooter, setFinalClassNameFooter] = React.useState<string | undefined>(undefined);
const [finalClassNameDisabled, setFinalClassNameDisabled] = React.useState<string | undefined>(undefined);
//const [offset, setOffset] = React.useState<number>(0);
const makeClassName = (
className: string | undefined,
//isDragging: boolean,
// offset: number,
color: string | undefined,
//borderRadius: string | number | undefined,
background: string | undefined,
minHeight: string | number | undefined
) => {
let finalClassName: string = baseClassName;
// better to come back to the custom stylesheet for each dropzone with the unique id
let styleSheet: DynamicSheet = makeDynamicDropzoneStyleSheet(
finalDropzoneId,
// offset,
//isDragging,
color,
background,
minHeight,
//borderRadius
);
let idStyle: string = "";
if (!styleInjected) {
idStyle = DynamiCSS.insertStyleSheet(styleSheet);
setIdStyles(idStyle);
if (idStyle !== "")
setStyleInjected(true);
} else {
//already a stylesheet associated
DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
}
finalClassName += ` files-ui-dropzone-extra-${finalDropzoneId}`;
if (className) {
finalClassName = `${finalClassName} ${className}`;
}
/* if (isDragging) {
finalClassName = `${finalClassName} fui-hide-border`;
} */
setFinalClassName(finalClassName);
setFinalClassNameHeader(`files-ui-header-border-rd-${finalDropzoneId}`);
setFinalClassNameFooter(`files-ui-footer-border-rd-top-bg-color-${finalDropzoneId}`);
setFinalClassNameDisabled(`files-ui-disabled-layer-color-${finalDropzoneId}`);
}
React.useEffect(() => {
makeClassName(className,
//isDragging,
//offset,
color,
// borderRadius,
background, minHeight);
// eslint-disable-next-line
}, [className,
//isDragging,
// offset,
color,
//borderRadius,
background, minHeight]);
return [finalClassName, finalClassNameHeader, finalClassNameFooter, finalClassNameDisabled];
}
const makeDynamicDropzoneStyleSheet = (
dropzoneId: string,
// offset: number,
//isDragging: boolean,
color: string | undefined,
background: string | undefined,
minHeight: string | number | undefined,
// borderRadius: string | number | undefined,
): DynamicSheet => {
const rootColorBorderStyle: DynamicSheetRule = {
className: `files-ui-dropzone-extra-${dropzoneId}`,
rules: {
color: completeAsureColor(color),
border: `1px dashed ${completeAsureColor(color)}`,
borderRadius: DEFAULT_BORDER_RADIUS,
background: background,
minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
},
};
const rootColorBorderStyleHideBorder: DynamicSheetRule = {
className: `files-ui-root-border-hide`,
rules: {
borderColor: "transparent",
},
}
const headerBorderStyle: DynamicSheetRule = {
className: `files-ui-header-border-rd-${dropzoneId}`,
rules: {
"border-top-left-radius": DEFAULT_BORDER_RADIUS,
"border-top-right-radius": DEFAULT_BORDER_RADIUS,
},
};
const footerBorderStyle: DynamicSheetRule = {
className: `files-ui-footer-border-rd-top-bg-color-${dropzoneId}`,
rules: {
"border-bottom-left-radius": DEFAULT_BORDER_RADIUS,
"border-bottom-right-radius": DEFAULT_BORDER_RADIUS,
background: completeAsureColor(color, 0.129),
borderTop: `1px dotted ${completeAsureColor(color)}`
},
};
const disabledLayerStyle: DynamicSheetRule = {
className: `files-ui-disabled-layer-color-${dropzoneId}`,
rules: {
borderRadius: DEFAULT_BORDER_RADIUS,
background: completeAsureColor(color, 0.38),
}
}
const sheetRules: DynamicSheetRule[] =
[
rootColorBorderStyle,
rootColorBorderStyleHideBorder,
headerBorderStyle,
footerBorderStyle,
disabledLayerStyle
];
return {
id: "files-dropzone-ui-style-id-" + dropzoneId,
sheetRules: sheetRules
}
}
\ No newline at end of file
src/files-ui/components/index.ts deleted 100644 → 0
+ 0
− 14
View file @ 56084e19
export { Avatar } from "./avatar";
export * from "./avatar";
export { Dropzone } from "./dropzone";
export * from "./dropzone";
export { FileInputButton } from "./file-input-button";
export * from "./file-input-button";
// internal components
export { MaterialButton } from "./material-button";
export * from "./material-button";
\ No newline at end of file
src/files-ui/components/page-template/PageTemplate.tsx deleted 100644 → 0
+ 0
− 11
View file @ 56084e19
import * as React from "react";
import { PageTemplateProps } from "./PageTemplateProps";
const PageTemplate:React.FC<PageTemplateProps> = (props:PageTemplateProps) =>{
return(
<div>
</div>
)
}
export default PageTemplate;
\ No newline at end of file
src/files-ui/components/page-template/PageTemplateProps.ts deleted 100644 → 0
+ 0
− 3
View file @ 56084e19
export interface PageTemplateProps{
}
\ No newline at end of file
src/files-ui/components/previews/index.ts deleted 100644 → 0
+ 0
− 8
View file @ 56084e19
export { default as FullScreen } from "./FullScreen/FullScreen";
export * from "./FullScreen/FullScreen";
export { default as ImagePreview } from "./ImagePreview/ImagePreview";
export * from "./ImagePreview/ImagePreview";
export { default as VideoPreview } from "./VideoPreview/VideoPreview";
export * from "./VideoPreview/VideoPreview";
\ No newline at end of file
src/files-ui/components/tooltip/index.ts deleted 100644 → 0
+ 0
− 2
View file @ 56084e19
export { default as Tooltip } from "./components/Tooltip";
export * from "./components/Tooltip";
src/files-ui/core/color/colors.ts deleted 100644 → 0
+ 0
− 231
View file @ 56084e19
import { NAMED_COLORS } from "./namedColors";
/**
* Make the color into a darker color
* @param colorInput
* @returns the darked color in
*/
export const darkerColor = (colorInput: string, percentage = 25): string => {
let darkedColor = "";
const reduce = (100 - percentage) / 100;
let component1: number = 0;
let component2: number = 0;
let component3: number = 0;
if (isHexColor(colourNameToHex(colorInput))) {
component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));
component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));
component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));
darkedColor = `rgb(${component1 * reduce}, ${component2 * reduce},${component3 * reduce})`;
} else {
if (colorInput.includes("rgba")) {
let slicer = colorInput.replace("rgba(", "");
let components: string[] = slicer.split(",");
darkedColor = `rgb(${parseInt(components[0], 10) * reduce}, ${parseInt(components[1], 10) * reduce},${parseInt(components[2], 10) * reduce})`;
//return darkedColor;
} else if (colorInput.includes("rgb")) {
let slicer = colorInput.replace("rgb(", "");
let components: string[] = slicer.split(",");
darkedColor = `rgb(${parseInt(components[0], 10) * reduce}, ${parseInt(components[1], 10) * reduce},${parseInt(components[2], 10) * reduce})`;
// return darkedColor;
}
}
return darkedColor;
}
/**
* Make the color into a brighted color
* @param colorInput
* @returns the brighted color
*/
export const brighterColor = (colorInput: string, percentage = 25): string => {
let brightedColor = "";
const increase = (100 + percentage) / 100;
let component1: number = 0;
let component2: number = 0;
let component3: number = 0;
if (isHexColor(colourNameToHex(colorInput))) {
component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));
component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));
component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));
brightedColor = `rgb(${component1 * increase}, ${component2 * increase},${component3 * increase})`;
} else {
if (colorInput.includes("rgba")) {
let slicer = colorInput.replace("rgba(", "");
let components: string[] = slicer.split(",");
brightedColor = `rgb(${parseInt(components[0], 10) * increase}, ${parseInt(components[1], 10) * increase},${parseInt(components[2], 10) * increase})`;
//return darkedColor;
} else if (colorInput.includes("rgb")) {
let slicer = colorInput.replace("rgb(", "");
let components: string[] = slicer.split(",");
brightedColor = `rgb(${parseInt(components[0], 10) * increase}, ${parseInt(components[1], 10) * increase},${parseInt(components[2], 10) * increase})`;
// return darkedColor;
}
}
return brightedColor;
}
/**
* In order to managae rgba() we convert hex colors into rgba()
* If the given color is already a rgb() color, it can add the percentage to convert it into rgba()
*
*
* @param colorInput color in hex or in rgb
* @param perc percentage for RGBA() color
* @returns the rgba representation of a hex color
*/
export const hexColorToRGB = (colorInput: string | undefined, perc = 0, defaultColor?: string): string => {
let resultDefault: string = defaultColor ? defaultColor : "rgba(255, 255, 255, 0.6)";
if (!colorInput) {
return resultDefault;
}
//work only in uppercase
const color: string = colorInput.toUpperCase();
// is already a rgba color
if (color.includes("RGBA")) {
return color;
}
//return rbg => rgba
if (color.includes("RGB")) {
return color.replace('RGB', `rgba`).replace(')', `, ${perc})`);
}
// if is a hex color or named color
if (!isHexColor(colourNameToHex(color))) {
return resultDefault;
}
let resultOk: string = "";
//let strVar: string = "";
let component1: number = 0;
let component2: number = 0;
let component3: number = 0;
//If passed all validations, proceed to transform
component1 = hexTodec(color.charAt(1)) * 16 + hexTodec(color.charAt(2));
component2 = hexTodec(color.charAt(3)) * 16 + hexTodec(color.charAt(4));
component3 = hexTodec(color.charAt(5)) * 16 + hexTodec(color.charAt(6));
resultOk = `rgba(${component1}, ${component2},${component3} , ${perc})`;
return resultOk;
}
/**
* Validates wheteher the color is hexadecimal css color
* Example: #FF56AC
*
*
* @param colorInput the color inpt to test
* @returns true if the inputColor is a hexadecimal css color
*/
export const isHexColor = (colorInput: string): boolean => {
// if first element is no '#' return default background color
if (colorInput.charAt(0) !== '#') {
return false;
}
// if color lenght is not exactly 7 return default
if (colorInput.length !== 7) {
return false;
}
// if one of the letters is not included in hex array return default
for (let i = 1; i < colorInput.length; i++) {
if (!hexArray.includes(colorInput.charAt(i))) {
return false;
}
}
return true;
}
/**
* Converts a named color into hexadecimal color
* from a list of well known namd colors if found.
* When not given returns a ""
* When not found in the list, returns the same value given
* @param colour the named color
* @returns The hex representation of the color or "" or the same color
*/
export function colourNameToHex(colour: string | undefined): string {
/**
* When not given
*/
if (!colour) {
return "";
}
/**
* when named color is found
*/
if (NAMED_COLORS[colour.toLocaleLowerCase()] !== undefined) {
return NAMED_COLORS[colour.toLocaleLowerCase()];
}
/**
* When the named color was not found
*/
return colour;
}
/**
* hexArray & decArray
*
* arrays of numbers used to convert hexadecimal numbers into decimal and viceversa
*/
const hexArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
const decArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
/**
* Converts hex number in string representation to decimal number
*
*
* @param letter the string hex number
* @returns a decimal number
*/
export const hexTodec = (letter: string): number => {
if (hexArray.includes(letter)) {
return decArray[hexArray.indexOf(letter)];
} else {
return 0;
}
}
/**
* Asure a base color. When not given or when given an incorrect color format
* default color is this kind of grey #5d6475
*
* @param color param color given by user
* @returns returns the same color
*/
export const asureColor = (color?: string): string => {
if (color !== undefined && color !== "") {
return color;
} else {
return DEFAULT_FONT_COLOR;
}
}
/**
* Asure a base color. When not given or when given an incorrect color format
* default color is this kind of grey #5d6475
*
* @param color param color given by user
* @returns returns the same color
*/
export const completeAsureColor = (color?: string, perc = 1): string => {
return hexColorToRGB(asureColor(colourNameToHex(color)), perc);
}
export const DEFAULT_FONT_COLOR = "#646c7f";
\ No newline at end of file
src/files-ui/core/color/index.ts deleted 100644 → 0
+ 0
− 11
View file @ 56084e19
export { NAMED_COLORS } from "./namedColors";
export {
asureColor,
brighterColor,
colourNameToHex,
darkerColor,
hexColorToRGB,
hexTodec,
isHexColor,
completeAsureColor
} from "./colors";
\ No newline at end of file
src/files-ui/core/color/namedColors.ts deleted 100644 → 0
+ 0
− 162
View file @ 56084e19
import { NamedColor } from "../types/NamedColor";
/**
* The full list of named Colors provided by
* https://htmlcolorcodes.com/es/nombres-de-los-colores/
*/
export const NAMED_COLORS: NamedColor =
{
//RED
indianred: "#CD5C5C",
lightcoral: "#F08080",
salmon: "#FA8072",
darksalmon: "#E9967A",
lightsalmon: "#FFA07A",
crimson: "#DC143C",
red: "#FF0000",
firebrick: "#B22222",
darkred: "#8B0000",
//PINK
pink: "#FFC0CB",
lightpink: "#FFB6C1",
hotpink: "#FF69B4",
deeppink: "#FF1493",
mediumvioletred: "#C71585",
palevioletred: "#DB7093",
//ORANGE
//"lightsalmon: "#FFA07A",
coral: "#FF7F50",
tomato: "#FF6347",
orangered: "#FF4500",
darkorange: "#FF8C00",
orange: "#FFA500",
//YELLOW
gold: "#FFD700",
yellow: "#FFFF00",
lightyellow: "#FFFFE0",
lemonchiffon: "#FFFACD",
lightgoldenrodyellow: "#FAFAD2",
papayawhip: "#FFEFD5",
moccasin: "#FFE4B5",
peachpuff: "#FFDAB9",
palegoldenrod: "#EEE8AA",
khaki: "#F0E68C",
darkkhaki: "#BDB76B",
//PURPLE
lavender: "#E6E6FA",
thistle: "#D8BFD8",
plum: "#DDA0DD",
violet: "#EE82EE",
orchid: "#DA70D6",
fuchsia: "#FF00FF",
magenta: "#FF00FF",
mediumorchid: "#BA55D3",
mediumpurple: "#9370DB",
rebeccapurple: "#663399",
blueviolet: "#8A2BE2",
darkviolet: "#9400D3",
darkorchid: "#9932CC",
darkmagenta: "#8B008B",
purple: "#800080",
indigo: "#4B0082",
slateblue: "#6A5ACD",
darkslateblue: "#483D8B",
mediumslateblue: "#7B68EE",
//GREEN
greenyellow: "#ADFF2F",
chartreuse: "#7FFF00",
lawngreen: "#7CFC00",
lime: "#00FF00",
limegreen: "#32CD32",
palegreen: "#98FB98",
lightgreen: "#90EE90",
mediumspringgreen: "#00FA9A",
springgreen: "#00FF7F",
mediumseagreen: "#3CB371",
seagreen: "#2E8B57",
forestgreen: "#228B22",
green: "#008000",
darkgreen: "#006400",
yellowgreen: "#9ACD32",
olivedrab: "#6B8E23",
olive: "#808000",
darkolivegreen: "#556B2F",
mediumaquamarine: "#66CDAA",
darkseagreen: "#8FBC8B",
lightseagreen: "#20B2AA",
darkcyan: "#008B8B",
teal: "#008080",
//BLUE
aqua: "#00FFFF",
cyan: "#00FFFF",
lightcyan: "#E0FFFF",
paleturquoise: "#AFEEEE",
aquamarine: "#7FFFD4",
turquoise: "#40E0D0",
mediumturquoise: "#48D1CC",
darkturquoise: "#00CED1",
cadetblue: "#5F9EA0",
steelblue: "#4682B4",
lightsteelblue: "#B0C4DE",
powderblue: "#B0E0E6",
lightblue: "#ADD8E6",
skyblue: "#87CEEB",
lightskyblue: "#87CEFA",
deepskyblue: "#00BFFF",
dodgerblue: "#1E90FF",
cornflowerblue: "#6495ED",
//"mediumslateblue: "#7B68EE",
royalblue: "#4169E1",
blue: "#0000FF",
mediumblue: "#0000CD",
darkblue: "#00008B",
navy: "#000080",
midnightblue: "#191970",
//BROWN
cornsilk: "#FFF8DC",
blanchedalmond: "#FFEBCD",
bisque: "#FFE4C4",
navajowhite: "#FFDEAD",
wheat: "#F5DEB3",
burlywood: "#DEB887",
tan: "#D2B48C",
rosybrown: "#BC8F8F",
sandybrown: "#F4A460",
goldenrod: "#DAA520",
darkgoldenrod: "#B8860B",
peru: "#CD853F",
chocolate: "#D2691E",
saddlebrown: "#8B4513",
sienna: "#A0522D",
brown: "#A52A2A",
maroon: "#800000",
//WHITE
white: "#FFFFFF",
snow: "#FFFAFA",
honeydew: "#F0FFF0",
mintcream: "#F5FFFA",
azure: "#F0FFFF",
aliceblue: "#F0F8FF",
ghostwhite: "#F8F8FF",
whitesmoke: "#F5F5F5",
seashell: "#FFF5EE",
beige: "#F5F5DC",
oldlace: "#FDF5E6",
floralwhite: "#FFFAF0",
ivory: "#FFFFF0",
antiquewhite: "#FAEBD7",
linen: "#FAF0E6",
lavenderblush: "#FFF0F5",
mistyrose: "#FFE4E1",
//GREY
gainsboro: "#DCDCDC",
lightgray: "#D3D3D3",
silver: "#C0C0C0",
darkgray: "#A9A9A9",
gray: "#808080",
dimgray: "#696969",
lightslategray: "#778899",
slategray: "#708090",
darkslategray: "#2F4F4F",
black: "#000000"
}
\ No newline at end of file
src/files-ui/core/download/downloadFile.ts deleted 100644 → 0
+ 0
− 17
View file @ 56084e19
export const downloadFileAnchor=async(fileName?:string, downloadUrl?:string)=>{
}
export const downloadFileXHR=async(fileName?:string, downloadUrl?:string)=>{
}
export const downloadFileFetch=async(fileName?:string, downloadUrl?:string)=>{
}
export const downloadAnchor=async(fileName?:string, downloadUrl?:string)=>{
const anchorElement:HTMLAnchorElement = document.createElement("a");
}
\ No newline at end of file
src/files-ui/core/file-manager/index.ts deleted 100644 → 0
+ 0
− 1
View file @ 56084e19
export { extFileReconcilation } from "./reconcilation";
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment