@wix/design-system/dist/esm/ListItemEditable/ListItemEditable.js

@wix/design-system

import { Check, X } from '@wix/wix-ui-icons-common';
import PropTypes from 'prop-types';
import React, { useCallback, useState } from 'react';
import Box from '../Box';
import IconButton from '../IconButton';
import Input from '../Input';
import Tooltip from '../Tooltip';
import { dataHooks, ListItemEditableSize } from './ListItemEditable.constants';
import { classes } from './ListItemEditable.st.css.js';
export const ListItemEditable = ({ dataHook, className, margins = 'list-item', size = ListItemEditableSize.small, status, value, statusMessage, placeholder, suffix, autoFocus, onEnterPressed, cancelButtonTooltipProps, cancelButtonTooltipContent, approveButtonTooltipProps, approveButtonTooltipContent, approveButtonDisabledOnEmpty = true, onApprove = () => { }, onCancel = () => { }, onChange, }) => {
    const [inputValue, setInputValue] = useState(value || '');
    const onInputChange = useCallback((event) => {
        setInputValue(event.target.value);
        onChange?.(event);
    }, [onChange]);
    const onApproveClicked = useCallback(() => onApprove(inputValue), [onApprove, inputValue]);
    return (React.createElement(Box, { dataHook: dataHook, className: className, margin: margins === 'list-item' ? '3px 24px' : undefined },
        React.createElement(Box, { marginRight: 3, flex: 1, minWidth: 0 },
            React.createElement(Input, { dataHook: dataHooks.input, className: classes.input, size: size, status: status, value: inputValue, statusMessage: statusMessage, onChange: onInputChange, placeholder: placeholder, suffix: suffix, autoFocus: autoFocus, onEnterPressed: onEnterPressed })),
        React.createElement(Box, { marginRight: 2 },
            React.createElement(Tooltip, { ...cancelButtonTooltipProps, dataHook: dataHooks.cancelButtonTooltip, disabled: !cancelButtonTooltipContent, content: cancelButtonTooltipContent },
                React.createElement(IconButton, { dataHook: dataHooks.cancelButton, size: size, priority: "secondary", onClick: onCancel },
                    React.createElement(X, null)))),
        React.createElement(Tooltip, { ...approveButtonTooltipProps, dataHook: dataHooks.approveButtonTooltip, disabled: !approveButtonTooltipContent || !inputValue, content: approveButtonTooltipContent },
            React.createElement(IconButton, { size: size, disabled: approveButtonDisabledOnEmpty && !inputValue, onClick: onApproveClicked, dataHook: dataHooks.approveButton },
                React.createElement(Check, null)))));
};
ListItemEditable.displayName = 'ListItemEditable';
ListItemEditable.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    value: PropTypes.string,
    placeholder: PropTypes.string,
    onApprove: PropTypes.func,
    onCancel: PropTypes.func,
    onChange: PropTypes.func,
    cancelButtonTooltipContent: PropTypes.any,
    cancelButtonTooltipProps: PropTypes.any,
    status: PropTypes.oneOf(['error', 'warning', 'loading']),
    size: PropTypes.any,
    approveButtonTooltipContent: PropTypes.any,
    approveButtonTooltipProps: PropTypes.any,
    approveButtonDisabledOnEmpty: PropTypes.bool,
    statusMessage: PropTypes.any,
    margins: PropTypes.any,
    suffix: PropTypes.any,
    autoFocus: PropTypes.bool,
    onEnterPressed: PropTypes.func,
};
export const listItemEditableBuilder = ({ id, dataHook, className, size, placeholder, onApprove, onCancel, onChange, cancelButtonTooltipContent, cancelButtonTooltipProps, approveButtonTooltipContent, approveButtonTooltipProps, approveButtonDisabledOnEmpty, status, statusMessage, margins, suffix, autoFocus, onEnterPressed, }) => ({
    id,
    disabled: true,
    overrideOptionStyle: true,
    prefix: undefined,
    label: undefined,
    value: (props) => (React.createElement(ListItemEditable, { ...props, dataHook: dataHook, className: className, size: size, placeholder: placeholder, onApprove: onApprove, onCancel: onCancel, onChange: onChange, cancelButtonTooltipContent: cancelButtonTooltipContent, cancelButtonTooltipProps: cancelButtonTooltipProps, approveButtonTooltipContent: approveButtonTooltipContent, approveButtonTooltipProps: approveButtonTooltipProps, approveButtonDisabledOnEmpty: approveButtonDisabledOnEmpty, status: status, statusMessage: statusMessage, margins: margins, suffix: suffix, autoFocus: autoFocus, onEnterPressed: onEnterPressed })),
});
//# sourceMappingURL=ListItemEditable.js.map