wix-style-react
Version:
wix-style-react
45 lines • 2.36 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { X, Check } from '@wix/wix-ui-icons-common';
import Input from '../../Input';
import Tooltip from '../../Tooltip';
import IconButton from '../../IconButton';
import { classes } from '../EditableSelector.st.css';
import { dataHooks } from './constants';
class EditableRow extends Component {
constructor(props) {
super(props);
this.onApprove = () => {
this.props.onApprove && this.props.onApprove(this.state.newOption);
};
this.onCancel = () => {
this.props.onCancel && this.props.onCancel();
};
this.state = {
newOption: props.newOption || '',
};
}
componentDidMount() {
this.input.focus();
}
render() {
const { dataHook } = this.props;
return (React.createElement("div", { "data-hook": dataHook, className: classes.editableRowContainer },
React.createElement("div", { className: classes.editableRowInputWrap },
React.createElement(Input, { ref: input => (this.input = input), className: classes.editableRowInput, dataHook: dataHooks.editRowInput, value: this.state.newOption, onChange: event => this.setState({ newOption: event.target.value }), onEnterPressed: () => this.onApprove(), onEscapePressed: () => this.onCancel(), size: "medium", textOverflow: "clip", theme: "normal", width: "initial" })),
React.createElement("div", { className: classes.editableRowButtons },
React.createElement(Tooltip, { content: "Cancel", timeout: 0 },
React.createElement(IconButton, { onClick: this.onCancel, size: "medium", priority: "secondary", dataHook: dataHooks.editRowCancelButton },
React.createElement(X, null))),
React.createElement(Tooltip, { content: "Confirm", timeout: 0 },
React.createElement(IconButton, { onClick: this.onApprove, size: "medium", disabled: this.state.newOption.length === 0, dataHook: dataHooks.editRowApproveButton },
React.createElement(Check, null))))));
}
}
EditableRow.propTypes = {
newOption: PropTypes.string,
onApprove: PropTypes.func,
onCancel: PropTypes.func,
};
export default EditableRow;
//# sourceMappingURL=EditableRow.js.map