@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/editors/TMEditorStyled.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import { TMColors } from '../../utils/theme';
+export const TMEditorsDefaultBorderRadius = '5px';
+export const TMEditorsDefaultLabelFontSize = '0.9rem';
+export const editorColorManager = (validationItems) => {
+    if (validationItems.find(item => item.ResultType === ResultTypes.ERROR))
+        return TMColors.error;
+    if (validationItems.find(item => item.ResultType === ResultTypes.WARNING))
+        return TMColors.warning;
+    if (validationItems.find(item => item.ResultType === ResultTypes.INFO))
+        return TMColors.info;
+    return '';
+};
+export const StyledEditorContainer = styled.div `
+    width: ${props => props.$width};
+    position: relative;
+`;
+export const StyledEditor = styled.input `
+width: ${props => props.$width};
+padding: ${props => props.$type === 'password' ? '4px 10px 4px 13px' : props.$type === 'number' ? '4px 4px 5px 13px' : '4px 10px 4px 13px'};
+border: 1px solid;
+border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
+border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+min-width: ${props => props.$isMobile && '70px'};
+background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+&:focus{
+    outline: none;
+    background-image: linear-gradient(white, #E4E9F7);
+    border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+    border-bottom: 2px solid ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+}
+
+font-size: ${props => props.$fontSize};
+&::placeholder {
+    /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
+    font-size: ${props => props.$fontSize};
+}
+`;
+export const StyledEditorIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'rgb(80,80,80)' : TMColors.tertiary : editorColorManager(props.$vil) : 'rgb(180,180,180)'};
+    width: 25px;
+    height: 25px;
+    margin-right: 2px;
+    font-size: 18px;
+    user-select: none;
+    transform: translateY(18px);
+`;
+export const StyledEditorLabel = styled.div `
+    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
+    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
+    padding: 0 3px;
+    user-select: none;
+    transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
+    width: max-content;
+    transform: translate(10px, 6px);
+    background-color: ${TMColors.default_background};
+    position: relative;
+    z-index: 1;
+`;
+export const StyledTextareaEditor = styled.textarea `
+    width: ${props => props.$width};
+    padding: 4px 5px 4px 13px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
+    min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
+    max-height: ${props => props.$maxHeight ?? 'auto'}; 
+    resize: ${props => (props.$resize === false ? 'none' : 'both')};
+    &:focus {
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+    font-size: ${props => props.$fontSize};
+    &::placeholder {
+      color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)};
+      font-size: ${props => props.$fontSize};
+    }
+  `;

package/lib/components/editors/TMFormulaEditor.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MetadataDescriptor, MetadataDataTypes, DBBrands } from '@topconsultnpm/sdk-ts';
+import { ITMApplyFormProps } from '../../ts';
+export declare enum FormulaTargets {
+    None = 0,
+    DefaultValue = 1,
+    ComputedMetadata = 2,
+    MetadataMapping = 3,
+    PDFCommandAddText = 4,
+    BatchUpdate = 5
+}
+export declare enum FormulaIconTypes {
+    "Instructions" = 0,
+    "Function" = 1,
+    "Variable" = 2,
+    "SystemVariables" = 3,
+    "Metadata" = 4,
+    "MetadataNumber" = 5,
+    "MetadataVarchar" = 6,
+    "MetadataSystem" = 7,
+    "MetadataGeneric" = 8
+}
+export declare class FormulaDescriptor {
+    expression?: string;
+    formulaTarget?: FormulaTargets;
+    items: any[];
+    mid?: number;
+    metadataDataTypeDest?: MetadataDataTypes;
+    tid?: number;
+}
+export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => import("react/jsx-runtime").JSX.Element;
+declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;
+export default TMFormulaEditor;
+export declare class FormulaHelper {
+    static isFormula(value: string | undefined): boolean;
+    static removeFormulaTag(value: string | undefined): string | undefined;
+    static addFormulaTag(value: string | undefined): string | undefined;
+    static TreeViewList(tid: number, systemMDs: MetadataDescriptor[] | undefined, userMDs: MetadataDescriptor[] | undefined, formulaTarget: FormulaTargets, dbBrand: DBBrands): any;
+    private static jsonItems_LoadVariables;
+    private static jsonItems_SystemMDs;
+    private static jsonItems_UserMDs;
+    private static jsonItems_SystemVariables;
+    private static jsonItems_LoadInstructions;
+    private static jsonItems_LoadFunctions;
+    private static jsonItems_LoadFunctions_Convert;
+    private static jsonItems_LoadFunctions_String;
+    private static jsonItems_LoadFunctions_Date;
+    private static jsonItems_LoadFunctions_Link;
+}