wix-style-react/dist/es/src/EditableSelector/EditableRow/EditableRow.js

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import X from 'wix-ui-icons-common/X';
import Check from 'wix-ui-icons-common/Check';
import Input from '../../Input';
import Tooltip from '../../Tooltip';
import IconButton from '../../IconButton';
import { classes } from '../EditableSelector.st.css';
import { dataHooks } from './constants';

var EditableRow = /*#__PURE__*/function (_Component) {
  _inherits(EditableRow, _Component);

  var _super = _createSuper(EditableRow);

  function EditableRow(props) {
    var _this;

    _classCallCheck(this, EditableRow);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "onApprove", function () {
      _this.props.onApprove && _this.props.onApprove(_this.state.newOption);
    });

    _defineProperty(_assertThisInitialized(_this), "onCancel", function () {
      _this.props.onCancel && _this.props.onCancel();
    });

    _this.state = {
      newOption: props.newOption || ''
    };
    return _this;
  }

  _createClass(EditableRow, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.input.focus();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var dataHook = this.props.dataHook;
      return /*#__PURE__*/React.createElement("div", {
        "data-hook": dataHook,
        className: classes.editableRowContainer
      }, /*#__PURE__*/React.createElement("div", {
        className: classes.editableRowInputWrap
      }, /*#__PURE__*/React.createElement(Input, {
        ref: function ref(input) {
          return _this2.input = input;
        },
        className: classes.editableRowInput,
        dataHook: dataHooks.editRowInput,
        value: this.state.newOption,
        onChange: function onChange(event) {
          return _this2.setState({
            newOption: event.target.value
          });
        },
        onEnterPressed: function onEnterPressed() {
          return _this2.onApprove();
        },
        onEscapePressed: function onEscapePressed() {
          return _this2.onCancel();
        },
        size: "medium",
        textOverflow: "clip",
        theme: "normal",
        width: "initial"
      })), /*#__PURE__*/React.createElement("div", {
        className: classes.editableRowButtons
      }, /*#__PURE__*/React.createElement(Tooltip, {
        content: "Cancel",
        timeout: 0
      }, /*#__PURE__*/React.createElement(IconButton, {
        onClick: this.onCancel,
        size: "medium",
        priority: "secondary",
        dataHook: dataHooks.editRowCancelButton
      }, /*#__PURE__*/React.createElement(X, null))), /*#__PURE__*/React.createElement(Tooltip, {
        content: "Confirm",
        timeout: 0
      }, /*#__PURE__*/React.createElement(IconButton, {
        onClick: this.onApprove,
        size: "medium",
        disabled: this.state.newOption.length === 0,
        dataHook: dataHooks.editRowApproveButton
      }, /*#__PURE__*/React.createElement(Check, null)))));
    }
  }]);

  return EditableRow;
}(Component);

_defineProperty(EditableRow, "propTypes", {
  newOption: PropTypes.string,
  onApprove: PropTypes.func,
  onCancel: PropTypes.func
});

export default EditableRow;