@sap-ux/control-property-editor 0.2.0

package/src/panels/properties/PropertyDocumentation.tsx

@@ -0,0 +1,174 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { Text, Stack } from '@fluentui/react';
+
+import { UIIcon, UIIconButton, UiIcons } from '@sap-ux/ui-components';
+
+import type {
+    Control,
+    SavedPropertyChange,
+    PendingPropertyChange
+} from '@sap-ux-private/control-property-editor-common';
+import { Separator } from '../../components';
+import type { RootState } from '../../store';
+
+import styles from './PropertyDocumentation.module.scss';
+
+export interface PropertyDocumentationProps {
+    defaultValue: string;
+    title?: string;
+    description: string;
+    propertyName: string;
+    propertyType: string | undefined;
+    onDelete?(controlId: string, propertyName: string): void;
+}
+/**
+ * React element PropertyDocumentation.
+ *
+ * @param propDocProps PropertyDocumentationProps
+ * @returns ReactElement
+ */
+export function PropertyDocumentation(propDocProps: PropertyDocumentationProps): ReactElement {
+    const { propertyName, title, defaultValue, description, propertyType, onDelete } = propDocProps;
+    const { t } = useTranslation();
+
+    const control = useSelector<RootState, Control | undefined>((state) => state.selectedControl);
+
+    const propertyChanges = useSelector<
+        RootState,
+        | {
+              pending: number;
+              saved: number;
+              lastSavedChange?: SavedPropertyChange;
+              lastChange?: PendingPropertyChange;
+          }
+        | undefined
+    >((state) => state.changes.controls[control?.id ?? '']?.properties[propertyName]);
+
+    return (
+        <>
+            <Stack
+                id={`${propertyName}--PropertyTooltip-Header`}
+                horizontal
+                horizontalAlign="space-between"
+                className={styles.header}>
+                <Stack.Item>
+                    <Text className={styles.title}>{title}</Text>
+                </Stack.Item>
+                {propertyChanges && (
+                    <Stack.Item>
+                        <Modified {...propertyChanges} />
+                    </Stack.Item>
+                )}
+            </Stack>
+            <Stack
+                className={styles.container}
+                tokens={{
+                    childrenGap: '10px'
+                }}>
+                <Stack.Item>
+                    <section id={`${propertyName}--PropertyTooltip-Content`} className={styles.grid}>
+                        <DocumentationRow label={t('PROPERTY_NAME')} value={propertyName} />
+                        <DocumentationRow label={t('PROPERTY_TYPE')} value={propertyType} />
+                        <>
+                            <Text className={styles.propertyName}>{t('DEFAULT_VALUE')}</Text>
+                            <Text title={defaultValue?.toString()} className={styles.bold}>
+                                {defaultValue?.toString()}
+                            </Text>
+                            <UIIcon
+                                className={styles.infoIcon}
+                                iconName={UiIcons.Info}
+                                title={t('DEFAULT_VALUE_TOOLTIP')}
+                            />
+                        </>
+                        {propertyChanges?.lastChange && (
+                            <>
+                                <Text className={styles.propertyName}>{t('CURRENT_VALUE')}</Text>
+                                <Text
+                                    title={propertyChanges.lastChange.value.toString()}
+                                    className={[styles.bold, styles.propertyWithNoActions].join(' ')}>
+                                    {propertyChanges.lastChange.value.toString()}
+                                </Text>
+                            </>
+                        )}
+                        {propertyChanges?.lastSavedChange && (
+                            <>
+                                <Text className={styles.propertyName}>{t('SAVED_VALUE')}</Text>
+                                <Text title={propertyChanges.lastSavedChange.value.toString()} className={styles.bold}>
+                                    {propertyChanges.lastSavedChange.value.toString()}
+                                </Text>
+                                <UIIconButton
+                                    iconProps={{ iconName: UiIcons.TrashCan }}
+                                    title={t('DELETE_ALL_PROPERTY_CHANGES_TOOLTIP')}
+                                    onClick={(): void => {
+                                        if (control?.id) {
+                                            onDelete(control.id, propertyName);
+                                        }
+                                    }}
+                                />
+                            </>
+                        )}
+                    </section>
+                </Stack.Item>
+                <Stack.Item>
+                    <Separator />
+                </Stack.Item>
+                <Stack.Item>
+                    <Text id={`${propertyName}--PropertyTooltip-Footer`} className={styles.description}>
+                        {description}
+                    </Text>
+                </Stack.Item>
+            </Stack>
+        </>
+    );
+}
+interface ModifiedProps {
+    saved: number;
+    pending: number;
+}
+/**
+ * React element Modified.
+ *
+ * @param modifiedProps ModifiedProps
+ * @returns ReactElement
+ */
+function Modified(modifiedProps: ModifiedProps): ReactElement {
+    const { pending, saved } = modifiedProps;
+    const { t } = useTranslation();
+    if (saved > 0 && pending === 0) {
+        return <Text className={styles.savedChanges}>{t('SAVED_CHANGES')}</Text>;
+    }
+
+    if (pending > 0 && saved === 0) {
+        return <Text className={styles.unsavedChanges}>{t('UNSAVED_CHANGES')}</Text>;
+    }
+    return <Text className={styles.unsavedChanges}>{t('SAVED_AND_UNSAVED_CHANGES')}</Text>;
+}
+
+interface DocumentationRowProps {
+    label: string;
+    value?: string;
+}
+
+/**
+ * React element DocumentationRow.
+ *
+ * @param documentationRowProps DocumentationRowProps
+ * @returns ReactElement
+ */
+function DocumentationRow(documentationRowProps: DocumentationRowProps): ReactElement {
+    const { label, value } = documentationRowProps;
+    if (!value) {
+        return <></>;
+    }
+    return (
+        <>
+            <Text className={styles.propertyName}>{label}</Text>
+            <Text title={value} className={[styles.value, styles.propertyWithNoActions].join(' ')}>
+                {value}
+            </Text>
+        </>
+    );
+}

package/src/panels/properties/SapUiIcon.scss

@@ -0,0 +1,109 @@
+.sapUiIcon:before {
+    content: attr(data-sap-ui-icon-content);
+    speak: none;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+}
+
+.icon-dialog {
+    .ms-Dialog-main {
+        height: 100%;
+        max-height: calc(100% - 23rem);
+        .ms-Modal-scrollableContent {
+            height: 100%;
+            > div {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                .ms-Dialog-inner {
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    .ms-Dialog-content {
+                        height: 100%;
+                        bottom: 10px;
+                        overflow: hidden;
+                    }
+                }
+            }
+        }
+    }
+}
+$medium: 800px;
+$small: 600px;
+$mini: 400px;
+
+@media screen and (max-height: $medium) {
+    .icon-dialog .ms-Dialog-main {
+        max-height: calc(100% - 8rem);
+    }
+}
+
+@media screen and (max-height: $small) {
+    .icon-dialog .ms-Dialog-main {
+        max-height: calc(100% - 4rem);
+    }
+}
+
+@media screen and (max-height: $mini) {
+    .icon-dialog .ms-Dialog-main {
+        max-height: calc(100% - 50px);
+    }
+}
+
+.icon-table {
+    margin-bottom: 46px;
+    overflow-x: hidden;
+    border-bottom: 1px solid var(--vscode-scm-providerBorder);
+    .ms-DetailsHeader-cell .not-editable-icon {
+        display: none;
+    }
+
+    .ms-DetailsRow-fields:hover {
+        cursor: pointer;
+        background-color: var(--vscode-dropdown-background);
+        color: var(--vscode-dropdown-foreground);
+    }
+
+    .is-selected .ms-DetailsRow-fields {
+        color: var(--vscode-list-activeSelectionForeground) !important;
+        background-color: var(--vscode-list-activeSelectionBackground) !important;
+    }
+
+    .root-226:focus .ms-DetailsRow-cell {
+        color: var(--vscode-background) !important;
+    }
+
+    .ms-ScrollablePane .ms-FocusZone .ms-DetailsHeader-cell {
+        box-shadow: inset 0 1px 0 var(--vscode-scm-providerBorder), inset 0 -1px 0 var(--vscode-scm-providerBorder),
+            inset -1px 0 0 var(--vscode-scm-providerBorder), inset 1px 0 0 var(--vscode-scm-providerBorder);
+    }
+
+    .ms-ScrollablePane .ms-FocusZone .ms-DetailsRow-fields .ms-DetailsRow-cell:last-child {
+        box-shadow: none;
+    }
+}
+
+.icon-textField {
+    .ms-TextField-wrapper {
+        .ms-TextField-fieldGroup {
+            .ms-TextField-suffix {
+                color: var(--vscode-input-foreground);
+                background-color: var(--vscode-input-background);
+                padding: 1px;
+            }
+        }
+    }
+}
+
+.tablediv {
+    .ms-ScrollablePane .ms-FocusZone {
+        background: var(--vscode-tab-inactiveBackground);
+    }
+}
+
+.filter-icon-div {
+    .filter-icons {
+        margin-top: 20px;
+    }
+}

package/src/panels/properties/StringEditor.tsx

@@ -0,0 +1,122 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import type { UITextInputProps } from '@sap-ux/ui-components';
+import { UITextInput } from '@sap-ux/ui-components';
+
+import { changeProperty } from '../../slice';
+
+import type { PropertyInputProps } from './types';
+import { isExpression, InputType } from './types';
+import { setCachedValue } from './propertyValuesCache';
+
+import './Properties.scss';
+import {
+    reportTelemetry,
+    debounce,
+    FLOAT_VALUE_TYPE,
+    INTEGER_VALUE_TYPE,
+    BOOLEAN_VALUE_TYPE
+} from '@sap-ux-private/control-property-editor-common';
+import './SapUiIcon.scss';
+import { IconValueHelp } from './IconValueHelp';
+import type { IconDetails } from '@sap-ux-private/control-property-editor-common';
+import type { RootState } from '../../store';
+
+/**
+ * React element for string editor in property panel.
+ *
+ * @param propertyInputProps PropertyInputProps
+ * @returns ReactElement
+ */
+export function StringEditor(propertyInputProps: PropertyInputProps): ReactElement {
+    const {
+        property: { name, value, isEnabled, isIcon, type, errorMessage },
+        controlId,
+        controlName
+    } = propertyInputProps;
+    const [val, setValue] = useState(value);
+    const icons = useSelector<RootState, IconDetails[]>((state) => state.icons);
+
+    useEffect(() => {
+        setValue(value);
+    }, [value]);
+
+    const getValueHelpButton = (): React.ReactElement => {
+        return (
+            <IconValueHelp
+                disabled={!isEnabled}
+                icons={icons ?? []}
+                isIcon={isIcon}
+                value={value as string}
+                controlId={controlId}
+                propertyName={name}
+            />
+        );
+    };
+    const dispatch = useDispatch();
+    const dispatchWithDelay = useRef(debounce(dispatch, 500));
+
+    const inputProps: UITextInputProps = {};
+
+    inputProps.onBlur = (e) => {
+        reportTelemetry({ category: 'Property Change', propertyName: name }).catch((error) => {
+            console.error(`Error in reporting telemetry`, error);
+        });
+
+        if (type === FLOAT_VALUE_TYPE && !isExpression(val)) {
+            let newValue: string | number = String(e.target.value);
+            if (type === FLOAT_VALUE_TYPE && !isExpression(newValue)) {
+                newValue = parseFloat(String(newValue?.trim()));
+            }
+            setCachedValue(controlId, name, InputType.number, newValue);
+            const action = changeProperty({ controlId, propertyName: name, value: newValue, controlName });
+            dispatch(action);
+            setValue(newValue);
+        }
+    };
+
+    if (isIcon && !isExpression(val)) {
+        inputProps.onRenderSuffix = getValueHelpButton;
+    }
+
+    return (
+        <>
+            <UITextInput
+                className={`stringEditor icon-textField`}
+                key={name}
+                data-testid={`${name}--StringEditor`}
+                disabled={!isEnabled}
+                errorMessage={errorMessage}
+                value={val as string}
+                onChange={(
+                    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+                    newValue: string | undefined
+                ): void => {
+                    let value: string | number = String(newValue ?? '');
+                    if (type === FLOAT_VALUE_TYPE && !isExpression(value)) {
+                        const index = value.search(/\./) + 1;
+                        const result = value.substring(0, index) + value.slice(index).replace(/\./g, '');
+                        value = result.trim().replace(/(^-)|[^0-9.]+/g, '$1');
+                    } else {
+                        if (type === INTEGER_VALUE_TYPE && !isExpression(value)) {
+                            value = value.trim().replace(/(^-)|(\D+)/g, '$1');
+                            value = parseInt(String(value), 10);
+                        }
+                        const inputType = type === INTEGER_VALUE_TYPE ? InputType.number : InputType.string;
+                        setCachedValue(controlId, name, inputType, value);
+                        const action = changeProperty({ controlId, propertyName: name, value: value, controlName });
+                        // starting from ui5 version 1.106, empty string "" is not accepted as change for boolean type properties
+                        if (value || type !== BOOLEAN_VALUE_TYPE) {
+                            // allow empty string "" when we have string type property
+                            dispatchWithDelay.current(action);
+                        }
+                    }
+                    setValue(value);
+                }}
+                {...inputProps}
+            />
+        </>
+    );
+}

package/src/panels/properties/ViewChanger.module.scss

@@ -0,0 +1,5 @@
+.zoomInput {
+    width: 70px;
+    margin-left: 6px;
+    margin-right: 6px;
+}

package/src/panels/properties/ViewChanger.tsx

@@ -0,0 +1,143 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import type { UIComboBoxOption, UIComboBoxRef } from '@sap-ux/ui-components';
+import { UIComboBox, UIIconButton, UiIcons } from '@sap-ux/ui-components';
+
+import type { RootState } from '../../store';
+import { changePreviewScale, changePreviewScaleMode } from '../../slice';
+
+import styles from './ViewChanger.module.scss';
+
+const ZOOM_STEP = 0.1;
+const SCALE_INPUT_PATTERN = /(\d{1,20})%/;
+const MAX_SCALE = 1;
+const MIN_SCALE = 0.1;
+const FIT_PREVIEW_KEY = 'fit';
+
+/**
+ * React element to view changer.
+ *
+ * @returns ReactElement
+ */
+export function ViewChanger(): ReactElement {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const scale = useSelector<RootState, number>((state) => state.scale);
+    const fitPreview = useSelector<RootState, boolean>((state) => state.fitPreview ?? false);
+    const options = [
+        {
+            key: 0.25,
+            text: '25%'
+        },
+        {
+            key: 0.5,
+            text: '50%'
+        },
+        {
+            key: 0.75,
+            text: '75%'
+        },
+        {
+            key: 1,
+            text: '100%'
+        },
+        {
+            key: FIT_PREVIEW_KEY,
+            text: t('FIT_PREVIEW')
+        }
+    ];
+    const key = fitPreview ? FIT_PREVIEW_KEY : scale;
+    const selectedOption = options.find((enumValue) => enumValue.key === key);
+    const text = !selectedOption && scale ? scaleInPercent(scale) : undefined;
+
+    function zoomIn(): void {
+        const newScale = Math.min(scale + ZOOM_STEP, MAX_SCALE);
+        dispatch(changePreviewScale(newScale));
+        dispatch(changePreviewScaleMode('fixed'));
+    }
+
+    function zoomOut(): void {
+        const newScale = Math.max(scale - ZOOM_STEP, MIN_SCALE);
+        dispatch(changePreviewScale(newScale));
+        dispatch(changePreviewScaleMode('fixed'));
+    }
+
+    /**
+     *
+     * @param event React.FormEvent<UIComboBoxRef>
+     * @param option UIComboBoxOption
+     * @param index number
+     * @param value string
+     */
+    function onChange(
+        event: React.FormEvent<UIComboBoxRef>,
+        option?: UIComboBoxOption,
+        index?: number,
+        value?: string
+    ): void {
+        if (option?.key) {
+            if (typeof option?.key === 'number') {
+                dispatch(changePreviewScale(option?.key));
+                dispatch(changePreviewScaleMode('fixed'));
+            } else {
+                dispatch(changePreviewScaleMode('fit'));
+            }
+        } else if (value) {
+            const match = SCALE_INPUT_PATTERN.exec(value);
+            if (match) {
+                const percent = parseInt(match[1], 10);
+                const newScale = percent / 100;
+                if (newScale >= MIN_SCALE && newScale <= MAX_SCALE) {
+                    dispatch(changePreviewScale(newScale));
+                    dispatch(changePreviewScaleMode('fixed'));
+                }
+            }
+        }
+    }
+
+    return (
+        <>
+            <UIIconButton
+                title={t('ZOOM_OUT')}
+                iconProps={{
+                    iconName: UiIcons.ZoomOut
+                }}
+                disabled={scale <= MIN_SCALE}
+                onClick={zoomOut}
+            />
+            <UIComboBox
+                id="view-changer-combobox"
+                data-testid={`testId-view-changer-combobox`}
+                className={styles.zoomInput}
+                autoComplete="off"
+                selectedKey={key}
+                text={text}
+                allowFreeform={true}
+                useComboBoxAsMenuWidth={true}
+                options={options}
+                onChange={onChange}
+            />
+            <UIIconButton
+                title={t('ZOOM_IN')}
+                iconProps={{
+                    iconName: UiIcons.ZoomIn
+                }}
+                disabled={scale >= MAX_SCALE}
+                onClick={zoomIn}
+            />
+        </>
+    );
+}
+
+/**
+ * Scale in percent.
+ *
+ * @param scale number
+ * @returns scaled value - string
+ */
+function scaleInPercent(scale: number): string {
+    return `${Math.floor(scale * 100)}%`;
+}

package/src/panels/properties/constants.ts

@@ -0,0 +1,2 @@
+export const defaultFontSize = '13px';
+export const sectionHeaderFontSize = '11px';

package/src/panels/properties/index.tsx

@@ -0,0 +1 @@
+export { PropertiesPanel } from './PropertiesPanel';

package/src/panels/properties/propertyValuesCache.ts

@@ -0,0 +1,39 @@
+import { InputType, isExpression } from './types';
+
+export type CacheValue = string | boolean | number;
+
+const propertyValueCache: Record<string, Record<string, Record<string, CacheValue>>> = {};
+
+export const setCachedValue = (
+    controlId: string,
+    propertyName: string,
+    defaultInputType: string,
+    value: CacheValue
+): void => {
+    if (!propertyValueCache[controlId]) {
+        propertyValueCache[controlId] = {};
+    }
+    const propertyMap = propertyValueCache[controlId];
+    if (propertyMap) {
+        if (!propertyMap[propertyName]) {
+            propertyMap[propertyName] = {};
+        }
+        const inputTypeMap = propertyMap[propertyName];
+        if (inputTypeMap) {
+            const inputType = isExpression(value) ? InputType.expression : defaultInputType;
+            inputTypeMap[inputType] = value;
+        }
+    }
+};
+
+export const getCachedValue = (controlId: string, propertyId: string, inputType: string): CacheValue | null => {
+    const propertyMap = propertyValueCache[controlId];
+    if (!propertyMap) {
+        return null;
+    }
+    const inputTypeMap = propertyMap[propertyId];
+    if (!inputTypeMap) {
+        return null;
+    }
+    return inputTypeMap[inputType] || null;
+};

package/src/panels/properties/types.ts

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+
+import type {
+    ControlProperty,
+    CHECKBOX_EDITOR_TYPE,
+    DROPDOWN_EDITOR_TYPE,
+    INPUT_EDITOR_TYPE
+} from '@sap-ux-private/control-property-editor-common';
+
+import type { PropertyChangeStats } from '../../slice';
+
+export interface PropertyInputProps<T extends ControlProperty = ControlProperty> {
+    controlId: string;
+    controlName: string;
+    property: T;
+    changes?: PropertyChangeStats;
+}
+
+export const enum InputType {
+    booleanTrue = 'booleanTrue',
+    booleanFalse = 'booleanFalse',
+    enumMember = 'enumMember',
+    string = 'string',
+    number = 'number',
+    expression = 'expression'
+}
+
+export interface InputTypeToggleOptionProps {
+    inputType: InputType;
+    tooltip: string;
+    iconName: string;
+    selected?: boolean;
+}
+
+export type InputTypeWrapperProps = PropertyInputProps & {
+    toggleOptions: InputTypeToggleOptionProps[];
+    children?: ReactElement;
+};
+
+export type InputTypeToggleProps = InputTypeWrapperProps & {
+    key: string;
+    inputTypeProps: InputTypeToggleOptionProps;
+};
+
+export type Editor = typeof INPUT_EDITOR_TYPE | typeof DROPDOWN_EDITOR_TYPE | typeof CHECKBOX_EDITOR_TYPE;
+
+export const isExpression = (value: string | boolean | number): boolean => {
+    return typeof value === 'string' && value.includes('{') && value.includes('}');
+};