wix-style-react
Version:
wix-style-react
135 lines • 7.22 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Input from '../Input';
import { classes } from './ListItemEditable.st.css';
import { dataHooks } from './constants';
import IconButton from '../IconButton';
import Tooltip from '../Tooltip';
import Box from '../Box';
import { Check, X } from '@wix/wix-ui-icons-common';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
/** ListItemEditable */
class ListItemEditable extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
value: this.props.value || '',
};
/**
* Callback triggered when input value is changed
* @param event (Event)
* @private
*/
this._onInputChange = event => {
const { onChange } = this.props;
this.setState({ value: event.target.value });
onChange?.(event);
};
/**
* Callback triggered when approved button is clicked
* @private
*/
this._onApproveClicked = () => {
const { value } = this.state;
const { onApprove } = this.props;
onApprove(value);
};
this._renderInput = () => {
const { value } = this.state;
const { placeholder, status, size, statusMessage, suffix, autoFocus, onEnterPressed, } = this.props;
return (React.createElement(Box, { marginRight: 3, flex: 1, minWidth: 0 },
React.createElement(Input, { dataHook: dataHooks.input, className: classes.input, size: size, status: status, value: value, statusMessage: statusMessage, onChange: this._onInputChange, placeholder: placeholder, suffix: suffix, autoFocus: autoFocus, onEnterPressed: onEnterPressed })));
};
this._renderCancelButton = () => {
const { onCancel, cancelButtonTooltipContent, cancelButtonTooltipProps, size, } = this.props;
return (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, children: React.createElement(X, null) }))));
};
this._renderApproveButton = () => {
const { value } = this.state;
const { approveButtonTooltipContent, approveButtonTooltipProps, size, approveButtonDisabledOnEmpty = true, } = this.props;
return (React.createElement(Tooltip, { ...approveButtonTooltipProps, dataHook: dataHooks.approveButtonTooltip, disabled: !approveButtonTooltipContent || !this.state.value, content: approveButtonTooltipContent },
React.createElement(IconButton, { size: size, disabled: approveButtonDisabledOnEmpty && !value, onClick: this._onApproveClicked, dataHook: dataHooks.approveButton },
React.createElement(Check, null))));
};
}
render() {
const { dataHook, className, margins } = this.props;
return (React.createElement(Box, { dataHook: dataHook, className: className, margin: margins === 'list-item' && '3px 24px' },
this._renderInput(),
this._renderCancelButton(),
this._renderApproveButton()));
}
}
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,
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 })),
});
ListItemEditable.displayName = 'ListItemEditable';
ListItemEditable.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** Value to display with component render */
value: PropTypes.string,
/** Placeholder to display */
placeholder: PropTypes.string,
/**
* A callback function triggered by clicking the approve button.
* ##### Signature:
* function(value: string) => void
* * `value`: the text contained in the input.
*/
onApprove: PropTypes.func.isRequired,
/**
* A callback function triggered by clicking the cancel button.
* ##### Signature:
* function() => void
*/
onCancel: PropTypes.func.isRequired,
/** Defines a standard input onChange callback */
onChange: PropTypes.func,
/** Cancel button tooltip content */
cancelButtonTooltipContent: PropTypes.node,
/** Cancel button tooltip common props
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
cancelButtonTooltipProps: PropTypes.shape(TooltipCommonProps),
/** Input status - use to display an status indication for the user */
status: PropTypes.oneOf(['error', 'warning', 'loading']),
/** Specifies the size of the input */
size: PropTypes.oneOf(['small', 'medium']),
/** Approve button tooltip content */
approveButtonTooltipContent: PropTypes.node,
/** Approve button tooltip common props
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
approveButtonTooltipProps: PropTypes.shape(TooltipCommonProps),
/** Make the approve button disabled when input value is empty */
approveButtonDisabledOnEmpty: PropTypes.bool,
/** The status (error/loading) message to display when hovering the status icon, if not given or empty there will be no tooltip */
statusMessage: PropTypes.node,
/** The type of margin */
margins: PropTypes.oneOf(['list-item', 'none']),
/** Pass a component you want to show as the suffix of the input, e.g., text, icon */
suffix: PropTypes.node,
/** Focus the input on mount (standart React input autoFocus) */
autoFocus: PropTypes.bool,
/** Defines a callback handler that is called when the user presses enter on the input element */
onEnterPressed: PropTypes.func,
};
ListItemEditable.defaultProps = {
size: 'small',
margins: 'list-item',
onApprove: () => ({}),
onCancel: () => ({}),
approveButtonDisabledOnEmpty: true,
};
export default ListItemEditable;
//# sourceMappingURL=ListItemEditable.js.map