@wix/design-system
Version:
@wix/design-system
41 lines • 3.86 kB
JavaScript
import { Check, X } from '@wix/wix-ui-icons-common';
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';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
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, maxLength, }) => {
const icons = useIcons('ListItemEditable', {
Check,
X,
});
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, maxLength: maxLength })),
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(icons.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(icons.Check, null)))));
};
ListItemEditable.displayName = 'ListItemEditable';
export const listItemEditableBuilder = ({ id, dataHook, className, size, placeholder, onApprove, onCancel, onChange, cancelButtonTooltipContent, cancelButtonTooltipProps, approveButtonTooltipContent, approveButtonTooltipProps, approveButtonDisabledOnEmpty, status, statusMessage, margins, suffix, autoFocus, onEnterPressed, maxLength, }) => ({
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, maxLength: maxLength })),
});
//# sourceMappingURL=ListItemEditable.js.map