@leav/ui 0.2.8 → 0.3.0-896e230

package/dist/components/RecordEdition/EditRecord/uiElements/StandardField/StandardFieldValue/StandardFieldValue.js

@@ -1,680 +0,0 @@
-import {jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs} from 'react/jsx-runtime';
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {CloseOutlined, ExclamationCircleOutlined} from '@ant-design/icons';
-import {Button, Form, Input, Popover, Space, theme} from 'antd';
-import moment from 'moment';
-import React, {useEffect, useRef} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '../../../../../../antdTheme';
-import {FloatingMenu} from '../../../../../../components';
-import Dimmer from '../../../../../../components/Dimmer';
-import DeleteValueBtn from '../../../../../../components/RecordEdition/EditRecord/shared/DeleteValueBtn';
-import InheritedFieldLabel from '../../../../../../components/RecordEdition/EditRecord/shared/InheritedFieldLabel';
-import UpdatedFieldIcon from '../../../../../../components/RecordEdition/EditRecord/shared/UpdatedFieldIcon';
-import ValueDetailsBtn from '../../../../../../components/RecordEdition/EditRecord/shared/ValueDetailsBtn';
-import ValuesVersionBtn from '../../../../../../components/RecordEdition/EditRecord/shared/ValuesVersionBtn';
-import ValuesVersionIndicator from '../../../../../../components/RecordEdition/EditRecord/shared/ValuesVersionIndicator';
-import {FieldScope} from '../../../../../../components/RecordEdition/EditRecord/_types';
-import {EditRecordReducerActionsTypes} from '../../../../../../components/RecordEdition/editRecordModalReducer/editRecordModalReducer';
-import {useEditRecordModalReducer} from '../../../../../../components/RecordEdition/editRecordModalReducer/useEditRecordModalReducer';
-import {useSharedTranslation} from '../../../../../../hooks/useSharedTranslation';
-import {AttributeFormat} from '../../../../../../_gqlTypes';
-import {stringifyDateRangeValue} from '../../../../../../_utils';
-import {
-    newValueId,
-    StandardFieldReducerActionsTypes,
-    StandardFieldValueState
-} from '../../../reducers/standardFieldReducer/standardFieldReducer';
-import CheckboxInput from './Inputs/CheckboxInput';
-import ColorInput from './Inputs/ColorInput';
-import DateInput from './Inputs/DateInput';
-import DateRangeInput from './Inputs/DateRangeInput';
-import EncryptedInput from './Inputs/EncryptedInput';
-import NumberInput from './Inputs/NumberInput';
-import TextInput from './Inputs/TextInput';
-import ValuesList from './ValuesList';
-const ErrorMessage = styled.div`
-    color: ${themeVars.errorColor};
-    font-weight: bold;
-`;
-const FormWrapper = styled.div`
-    position: relative;
-    z-index: ${p => (p.$isEditing ? 2 : 0)};
-`;
-const InputWrapper = styled.div`
-    position: relative;
-
-    && input {
-        background: ${themeVars.defaultBg};
-        transition: none;
-        border-radius: 0;
-        line-height: 2.5em;
-        padding-left: 17px;
-    }
-
-    ${FormWrapper}:not(:last-child) & input:not(:hover) {
-        border-bottom: none;
-    }
-
-    ${FormWrapper}:first-child & input {
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-    }
-
-    ${FormWrapper}:last-child & input {
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
-
-    &.editing input {
-        border-radius: 5px;
-    }
-
-    &.editing .field-wrapper,
-    &.editing .nested-input {
-        z-index: 0;
-    }
-
-    &.format-boolean label {
-        margin-right: 1em;
-    }
-
-    &:not(.format-boolean) label {
-        position: absolute;
-        left: 11px;
-        top: calc(50% - 0.9em);
-        font-size: 1.1em;
-        background: transparent;
-        padding: 0 0.5em;
-        color: ${themeVars.secondaryTextColor};
-        transition: all 0.2s ease;
-        transition-property: left, top, font-size;
-        z-index: 1;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        width: 100%;
-    }
-
-    &:not(.format-boolean):not(.editing):not(.has-value) label {
-        padding-right: 3rem;
-    }
-
-    input:disabled {
-        background: ${themeVars.defaultBg};
-    }
-
-    &.has-value:not(.format-boolean) label,
-    &.editing:not(.format-boolean) label {
-        top: 0px;
-        font-size: 0.9em;
-        background: transparent;
-        text-shadow: 0px 0px 4px #fff;
-        z-index: 2;
-        border-radius: 5px;
-    }
-
-    ${FormWrapper}.first-value &.has-value:not(.format-boolean) input:not(:first-child),
-    ${FormWrapper}.first-value &.editing:not(.format-boolean) input:not(:only-child),
-    ${FormWrapper}.first-value &.editing.format-date_range input,
-    ${FormWrapper}.first-value &.editing.format-date_range .ant-picker-range-separator {
-        padding-top: 1em;
-    }
-
-    &:not(.has-value):not(.editing):not(.format-boolean) input {
-        padding: 9px 0;
-    }
-
-    &:not(:hover) .floating-menu {
-        display: none;
-    }
-
-    .floating-menu {
-        top: 50%;
-        transform: translateY(-50%);
-    }
-`;
-const ActionsWrapper = styled.div`
-    position: absolute;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-`;
-const ButtonsWrapper = styled.div`
-    display: flex;
-    margin: 0.5em 0;
-    justify-content: flex-end;
-
-    & > button {
-        margin-left: 0.5em;
-    }
-`;
-const FormItem = styled(Form.Item)`
-    && {
-        margin: 0;
-    }
-`;
-const RichTextEditorInput = React.lazy(() => import('./Inputs/RichTextEditorInput'));
-const inputComponentByFormat = {
-    [AttributeFormat.text]: TextInput,
-    [AttributeFormat.date]: DateInput,
-    [AttributeFormat.date_range]: DateRangeInput,
-    [AttributeFormat.boolean]: CheckboxInput,
-    [AttributeFormat.numeric]: NumberInput,
-    [AttributeFormat.encrypted]: EncryptedInput,
-    [AttributeFormat.extended]: TextInput,
-    [AttributeFormat.color]: ColorInput,
-    [AttributeFormat.rich_text]: RichTextEditorInput
-};
-function StandardFieldValue({value: fieldValue, onSubmit, onDelete, onScopeChange, state, dispatch}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const {t, i18n} = useSharedTranslation();
-    const {token} = theme.useToken();
-    const actionsWrapperRef = useRef();
-    const inputRef = useRef();
-    const {state: editRecordState, dispatch: editRecordDispatch} = useEditRecordModalReducer();
-    const attribute = state.formElement.attribute;
-    const isValuesListEnabled = !!((_a =
-        attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null || _a === void 0
-        ? void 0
-        : _a.enable);
-    const isValuesListOpen = !!((_b = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) ===
-        null || _b === void 0
-        ? void 0
-        : _b.allowFreeEntry);
-    // Scroll to input when editing field
-    useEffect(() => {
-        var _a;
-        if (fieldValue.isEditing) {
-            (_a = actionsWrapperRef === null || actionsWrapperRef === void 0 ? void 0 : actionsWrapperRef.current) ===
-                null || _a === void 0
-                ? void 0
-                : _a.scrollIntoView({block: 'nearest'});
-        }
-    }, [fieldValue.isEditing]);
-    // Cancel value editing if value details panel is closed
-    useEffect(() => {
-        if (editRecordState.activeValue === null && fieldValue.isEditing) {
-            dispatch({
-                type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
-                idValue: fieldValue.idValue
-            });
-        }
-    }, [editRecordState.activeValue]);
-    useEffect(() => {
-        if (fieldValue.isEditing) {
-            editRecordDispatch({
-                type: EditRecordReducerActionsTypes.SET_EDITING_VALUE,
-                value: fieldValue.editingValue
-            });
-        }
-    }, [fieldValue.isEditing, fieldValue.editingValue]);
-    const _handleSubmit = async valueToSave => {
-        if (valueToSave === '') {
-            return _handleDelete();
-        }
-        const convertedValue = typeof valueToSave === 'object' ? JSON.stringify(valueToSave) : valueToSave;
-        onSubmit(fieldValue.idValue, convertedValue);
-    };
-    const _handlePressEnter = async () => {
-        if (!isValuesListEnabled) {
-            return _handleSubmit(fieldValue.editingValue);
-        }
-        const valuesList = _getFilteredValuesList();
-        if (!valuesList.length) {
-            return;
-        }
-        return _handleSubmit(valuesList[0].value);
-    };
-    const _handleDelete = async () => {
-        if (fieldValue.idValue === newValueId) {
-            return _handleCancel();
-        }
-        onDelete(fieldValue.idValue);
-    };
-    const _handleFocus = () => {
-        if (state.isReadOnly || fieldValue.isEditing || attribute.format === AttributeFormat.boolean) {
-            return;
-        }
-        dispatch({
-            type: StandardFieldReducerActionsTypes.FOCUS_FIELD,
-            idValue: fieldValue.idValue
-        });
-        if (!state.metadataEdit) {
-            editRecordDispatch({
-                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-                value: {value: fieldValue.value, editingValue: fieldValue.editingValue, attribute}
-            });
-        }
-    };
-    const _handleValueChange = value => {
-        dispatch({
-            type: StandardFieldReducerActionsTypes.CHANGE_VALUE,
-            idValue: fieldValue.idValue,
-            value
-        });
-    };
-    const _handleCloseError = () =>
-        dispatch({
-            type: StandardFieldReducerActionsTypes.SET_ERROR_DISPLAY,
-            displayError: false,
-            idValue: fieldValue.idValue
-        });
-    const _handleCancel = () => {
-        dispatch({
-            type: StandardFieldReducerActionsTypes.CANCEL_EDITING,
-            idValue: fieldValue.idValue
-        });
-        if (!state.metadataEdit) {
-            editRecordDispatch({
-                type: EditRecordReducerActionsTypes.SET_ACTIVE_VALUE,
-                value: null
-            });
-        }
-    };
-    const _handleClickSubmit = () => {
-        _handleSubmit(fieldValue.editingValue);
-    };
-    const _handleValueCopy = value => {
-        var _a;
-        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0
-            ? void 0
-            : _a.focus();
-        _handleValueChange(value);
-    };
-    const _getInput = () => {
-        let inputStyle = {};
-        if (
-            !fieldValue.isEditing &&
-            attribute.format !== AttributeFormat.boolean &&
-            attribute.format !== AttributeFormat.rich_text
-        ) {
-            let displayedValue = String(fieldValue.displayValue);
-            let prefixValue;
-            if (
-                attribute.format === AttributeFormat.color &&
-                (fieldValue.value === null || fieldValue.value.value === null)
-            ) {
-                fieldValue.value = null;
-            }
-            const hasValue = fieldValue.value !== null;
-            if (hasValue) {
-                switch (attribute.format) {
-                    case AttributeFormat.date_range:
-                        const {editingValue} = fieldValue;
-                        const isParsable = typeof editingValue === 'string' && editingValue.length > 0;
-                        const convertedFieldValue = isParsable ? JSON.parse(editingValue) : editingValue;
-                        const dateRangeValue = {
-                            from: new Date(Number(convertedFieldValue.from) * 1000).toLocaleDateString(i18n.language),
-                            to: new Date(Number(convertedFieldValue.to) * 1000).toLocaleDateString(i18n.language)
-                        };
-                        displayedValue =
-                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from) &&
-                            (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
-                                ? stringifyDateRangeValue(dateRangeValue, t)
-                                : '';
-                        break;
-                    case AttributeFormat.encrypted:
-                        displayedValue = '•••••••••';
-                        break;
-                    case AttributeFormat.date:
-                        if (!isNaN(fieldValue.displayValue)) {
-                            displayedValue = new Intl.DateTimeFormat(i18n.language).format(
-                                new Date(Number(displayedValue) * 1000)
-                            );
-                        }
-                        break;
-                    case AttributeFormat.color:
-                        prefixValue = _getColorDisplay();
-                        displayedValue = '#' + displayedValue;
-                        inputStyle = {
-                            paddingLeft: '39px'
-                        };
-                }
-            }
-            return _jsxs(_Fragment, {
-                children: [
-                    prefixValue,
-                    _jsx(
-                        Input,
-                        {
-                            style: inputStyle,
-                            className: hasValue ? 'has-value' : '',
-                            value: displayedValue,
-                            onFocus: _handleFocus,
-                            disabled: state.isReadOnly
-                        },
-                        'display'
-                    )
-                ]
-            });
-        }
-        const InputComponent = inputComponentByFormat[attribute.format];
-        // This should never happen, unless we have some bad settings in DB
-        if (!InputComponent) {
-            return _jsx('div', {children: t('record_edition.invalid_format')});
-        }
-        return _jsx(InputComponent, {
-            state: state,
-            fieldValue: fieldValue,
-            onChange: _handleValueChange,
-            onFocus: _handleFocus,
-            onSubmit: _handleSubmit,
-            onPressEnter: _handlePressEnter,
-            settings: state.formElement.settings,
-            inputRef: inputRef
-        });
-    };
-    const _getColorDisplay = () => {
-        const colorValue = '#' + String(fieldValue.displayValue);
-        const colorPickerStyle = {
-            width: '16px',
-            height: '16px',
-            borderRadius: '2px',
-            backgroundColor: colorValue,
-            marginTop: fieldValue.index ? '15px' : '25px',
-            marginLeft: '5px'
-        };
-        return _jsx('label', {style: colorPickerStyle});
-    };
-    const _getFilteredValuesList = () => {
-        var _a, _b, _c, _d, _e, _f;
-        let values = [];
-        if (isValuesListEnabled) {
-            if (attribute.format === AttributeFormat.date_range) {
-                const valuesList =
-                    (_b =
-                        (_a = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
-                        _a === void 0
-                            ? void 0
-                            : _a.dateRangeValues) !== null && _b !== void 0
-                        ? _b
-                        : [];
-                values = valuesList
-                    .filter(val => {
-                        return fieldValue.state === StandardFieldValueState.PRISTINE || !fieldValue.editingValue;
-                    })
-                    .map(v => {
-                        const rangeValue = {
-                            from: moment(Number(v.from) * 1000).format('L'),
-                            to: moment(Number(v.to) * 1000).format('L')
-                        };
-                        return {
-                            value: stringifyDateRangeValue(rangeValue, t),
-                            rawValue: {from: v.from, to: v.to}
-                        };
-                    });
-            } else {
-                const valuesList =
-                    (_d =
-                        (_c = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
-                        _c === void 0
-                            ? void 0
-                            : _c.values) !== null && _d !== void 0
-                        ? _d
-                        : [];
-                values = valuesList
-                    .filter(val => {
-                        return (
-                            fieldValue.state === StandardFieldValueState.PRISTINE ||
-                            !fieldValue.editingValue ||
-                            attribute.format === AttributeFormat.date ||
-                            val.match(new RegExp(String(fieldValue.editingValue), 'i'))
-                        );
-                    })
-                    .map(v => ({value: v, rawValue: v}));
-            }
-        }
-        const hydratedValues = values.map(value =>
-            Object.assign(Object.assign({}, value), {
-                isNewValue: false,
-                canCopy:
-                    isValuesListOpen &&
-                    attribute.format !== AttributeFormat.date &&
-                    attribute.format !== AttributeFormat.date_range
-            })
-        );
-        // Display current value on top of values list as "new value". Don't do that for date range attribute as it
-        // doesn't make much sense
-        if (
-            isValuesListOpen &&
-            String(fieldValue.editingValue) &&
-            attribute.format !== AttributeFormat.date_range &&
-            !((_f =
-                (_e = attribute === null || attribute === void 0 ? void 0 : attribute.values_list) === null ||
-                _e === void 0
-                    ? void 0
-                    : _e.values) !== null && _f !== void 0
-                ? _f
-                : []
-            ).some(v => v === fieldValue.editingValue)
-        ) {
-            hydratedValues.unshift({
-                value: String(fieldValue.editingValue),
-                rawValue: String(fieldValue.editingValue),
-                isNewValue: true,
-                canCopy: false
-            });
-        }
-        return hydratedValues;
-    };
-    const errorContent = _jsx(ErrorMessage, {
-        children: _jsxs(
-            Space,
-            Object.assign(
-                {size: 'small'},
-                {
-                    children: [
-                        _jsx(ExclamationCircleOutlined, {}),
-                        fieldValue.error,
-                        _jsx(Button, {
-                            onClick: _handleCloseError,
-                            size: 'small',
-                            icon: _jsx(CloseOutlined, {}),
-                            style: {border: 'none'}
-                        })
-                    ]
-                }
-            )
-        )
-    });
-    const isErrorVisible = fieldValue.isErrorDisplayed;
-    const wrapperClasses = `
-        ${attribute.format ? `format-${attribute.format}` : ''}
-        ${
-            (
-                (_c = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value) === null ||
-                _c === void 0
-                    ? void 0
-                    : _c.value
-            )
-                ? 'has-value'
-                : ''
-        }
-        ${fieldValue.isEditing ? 'editing' : ''}
-    `;
-    const canDeleteValue =
-        !state.isReadOnly && fieldValue.idValue !== newValueId && attribute.format !== AttributeFormat.boolean;
-    const valuesList = _getFilteredValuesList();
-    const valueActions = [];
-    if (!fieldValue.isEditing) {
-        valueActions.push({
-            button: _jsx(ValueDetailsBtn, {value: fieldValue.value, attribute: attribute, shape: 'circle'})
-        });
-    }
-    const hasMultipleValuesDisplay =
-        attribute.multiple_values && !!Object.keys(state.values[state.activeScope].values).length;
-    if (
-        (_d = attribute === null || attribute === void 0 ? void 0 : attribute.versions_conf) === null || _d === void 0
-            ? void 0
-            : _d.versionable
-    ) {
-        const versions = {
-            [FieldScope.CURRENT]:
-                (_f = (_e = state.values[FieldScope.CURRENT]) === null || _e === void 0 ? void 0 : _e.version) !==
-                    null && _f !== void 0
-                    ? _f
-                    : null,
-            [FieldScope.INHERITED]:
-                (_h = (_g = state.values[FieldScope.INHERITED]) === null || _g === void 0 ? void 0 : _g.version) !==
-                    null && _h !== void 0
-                    ? _h
-                    : null
-        };
-        if (!hasMultipleValuesDisplay) {
-            valueActions.push({
-                title: t('values_version.title'),
-                button: _jsx(ValuesVersionBtn, {
-                    versions: versions,
-                    activeScope: state.activeScope,
-                    onScopeChange: onScopeChange
-                })
-            });
-        }
-    }
-    if (canDeleteValue && !fieldValue.isEditing && fieldValue.displayValue) {
-        valueActions.push({
-            title: t('global.delete'),
-            button: _jsx(DeleteValueBtn, {onDelete: _handleDelete, shape: 'circle'})
-        });
-    }
-    const valuesVersionIndicatorStyle = {
-        top: '1px',
-        left: '1px',
-        bottom: hasMultipleValuesDisplay ? '0' : '1px',
-        borderRadius: hasMultipleValuesDisplay ? 'none' : token.borderRadius
-    };
-    return _jsxs(_Fragment, {
-        children: [
-            fieldValue.isEditing && _jsx(Dimmer, {onClick: _handleCancel}),
-            _jsx(
-                FormWrapper,
-                Object.assign(
-                    {$isEditing: fieldValue.isEditing, className: !fieldValue.index ? 'first-value' : ''},
-                    {
-                        children: _jsx(Form, {
-                            children: _jsxs(FormItem, {
-                                children: [
-                                    _jsx(
-                                        Popover,
-                                        Object.assign(
-                                            {placement: 'topLeft', open: isErrorVisible, content: errorContent},
-                                            {
-                                                children: _jsxs(
-                                                    InputWrapper,
-                                                    Object.assign(
-                                                        {
-                                                            $isEditing: fieldValue.isEditing,
-                                                            className: wrapperClasses,
-                                                            'data-testid': 'input-wrapper'
-                                                        },
-                                                        {
-                                                            children: [
-                                                                _jsx(ValuesVersionIndicator, {
-                                                                    activeScope: state.activeScope,
-                                                                    style: valuesVersionIndicatorStyle
-                                                                }),
-                                                                !fieldValue.index &&
-                                                                    _jsxs(
-                                                                        'label',
-                                                                        Object.assign(
-                                                                            {
-                                                                                className: 'attribute-label',
-                                                                                onClick: _handleFocus
-                                                                            },
-                                                                            {
-                                                                                children: [
-                                                                                    state.formElement.settings.label,
-                                                                                    editRecordState.externalUpdate
-                                                                                        .updatedValues[
-                                                                                        attribute === null ||
-                                                                                        attribute === void 0
-                                                                                            ? void 0
-                                                                                            : attribute.id
-                                                                                    ] && _jsx(UpdatedFieldIcon, {}),
-                                                                                    state.activeScope ===
-                                                                                        FieldScope.INHERITED &&
-                                                                                        _jsx(InheritedFieldLabel, {
-                                                                                            version:
-                                                                                                state.values[
-                                                                                                    FieldScope.INHERITED
-                                                                                                ].version
-                                                                                        })
-                                                                                ]
-                                                                            }
-                                                                        )
-                                                                    ),
-                                                                _getInput(),
-                                                                !state.metadataEdit &&
-                                                                    _jsx(FloatingMenu, {actions: valueActions})
-                                                            ]
-                                                        }
-                                                    )
-                                                )
-                                            }
-                                        )
-                                    ),
-                                    _jsxs(
-                                        ActionsWrapper,
-                                        Object.assign(
-                                            {ref: actionsWrapperRef},
-                                            {
-                                                children: [
-                                                    fieldValue.isEditing &&
-                                                        ((_j =
-                                                            attribute === null || attribute === void 0
-                                                                ? void 0
-                                                                : attribute.values_list) === null || _j === void 0
-                                                            ? void 0
-                                                            : _j.enable) &&
-                                                        _jsx(ValuesList, {
-                                                            attribute: attribute,
-                                                            valuesList: valuesList,
-                                                            onValueSelect: _handleSubmit,
-                                                            onValueCopy: _handleValueCopy
-                                                        }),
-                                                    fieldValue.isEditing &&
-                                                        _jsxs(ButtonsWrapper, {
-                                                            children: [
-                                                                _jsx(
-                                                                    Button,
-                                                                    Object.assign(
-                                                                        {
-                                                                            size: 'small',
-                                                                            onClick: _handleCancel,
-                                                                            style: {background: '#FFF'}
-                                                                        },
-                                                                        {children: t('global.cancel')}
-                                                                    )
-                                                                ),
-                                                                (!isValuesListEnabled || isValuesListOpen) &&
-                                                                    _jsx(
-                                                                        Button,
-                                                                        Object.assign(
-                                                                            {
-                                                                                type: 'primary',
-                                                                                size: 'small',
-                                                                                onClick: _handleClickSubmit
-                                                                            },
-                                                                            {children: t('global.submit')}
-                                                                        )
-                                                                    )
-                                                            ]
-                                                        })
-                                                ]
-                                            }
-                                        )
-                                    )
-                                ]
-                            })
-                        })
-                    }
-                )
-            )
-        ]
-    });
-}
-export default StandardFieldValue;
-//# sourceMappingURL=StandardFieldValue.js.map