wix-style-react
Version:
233 lines (202 loc) • 8.94 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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 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-ui-icons-common';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
/** ListItemEditable */
var ListItemEditable = /*#__PURE__*/function (_React$PureComponent) {
_inherits(ListItemEditable, _React$PureComponent);
var _super = _createSuper(ListItemEditable);
function ListItemEditable() {
var _this;
_classCallCheck(this, ListItemEditable);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
value: ''
});
_defineProperty(_assertThisInitialized(_this), "_onInputChange", function (event) {
_this.setState({
value: event.target.value
});
});
_defineProperty(_assertThisInitialized(_this), "_onApproveClicked", function () {
var value = _this.state.value;
var onApprove = _this.props.onApprove;
onApprove(value);
});
_defineProperty(_assertThisInitialized(_this), "_renderInput", function () {
var value = _this.state.value;
var _this$props = _this.props,
placeholder = _this$props.placeholder,
status = _this$props.status,
size = _this$props.size,
statusMessage = _this$props.statusMessage;
return /*#__PURE__*/React.createElement(Box, {
marginRight: 3,
flex: 1,
minWidth: 0
}, /*#__PURE__*/React.createElement(Input, {
dataHook: dataHooks.input,
className: classes.input,
size: size,
status: status,
value: value,
statusMessage: statusMessage,
onChange: _this._onInputChange,
placeholder: placeholder
}));
});
_defineProperty(_assertThisInitialized(_this), "_renderCancelButton", function () {
var _this$props2 = _this.props,
onCancel = _this$props2.onCancel,
cancelButtonTooltipContent = _this$props2.cancelButtonTooltipContent,
cancelButtonTooltipProps = _this$props2.cancelButtonTooltipProps,
size = _this$props2.size;
return /*#__PURE__*/React.createElement(Box, {
marginRight: 2
}, /*#__PURE__*/React.createElement(Tooltip, _extends({}, cancelButtonTooltipProps, {
dataHook: dataHooks.cancelButtonTooltip,
disabled: !cancelButtonTooltipContent,
content: cancelButtonTooltipContent
}), /*#__PURE__*/React.createElement(IconButton, {
dataHook: dataHooks.cancelButton,
size: size,
priority: "secondary",
onClick: onCancel,
children: /*#__PURE__*/React.createElement(X, null)
})));
});
_defineProperty(_assertThisInitialized(_this), "_renderApproveButton", function () {
var value = _this.state.value;
var _this$props3 = _this.props,
approveButtonTooltipContent = _this$props3.approveButtonTooltipContent,
approveButtonTooltipProps = _this$props3.approveButtonTooltipProps,
size = _this$props3.size;
return /*#__PURE__*/React.createElement(Tooltip, _extends({}, approveButtonTooltipProps, {
dataHook: dataHooks.approveButtonTooltip,
disabled: !approveButtonTooltipContent || !_this.state.value,
content: approveButtonTooltipContent
}), /*#__PURE__*/React.createElement(IconButton, {
size: size,
disabled: !value,
onClick: _this._onApproveClicked,
dataHook: dataHooks.approveButton
}, /*#__PURE__*/React.createElement(Check, null)));
});
return _this;
}
_createClass(ListItemEditable, [{
key: "render",
value: function render() {
var _this$props4 = this.props,
dataHook = _this$props4.dataHook,
className = _this$props4.className,
margins = _this$props4.margins;
return /*#__PURE__*/React.createElement(Box, {
dataHook: dataHook,
className: className,
margin: margins === 'list-item' && '3px 24px'
}, this._renderInput(), this._renderCancelButton(), this._renderApproveButton());
}
}]);
return ListItemEditable;
}(React.PureComponent);
export var listItemEditableBuilder = function listItemEditableBuilder(_ref) {
var id = _ref.id,
dataHook = _ref.dataHook,
className = _ref.className,
size = _ref.size,
placeholder = _ref.placeholder,
onApprove = _ref.onApprove,
onCancel = _ref.onCancel,
cancelButtonTooltipContent = _ref.cancelButtonTooltipContent,
cancelButtonTooltipProps = _ref.cancelButtonTooltipProps,
approveButtonTooltipContent = _ref.approveButtonTooltipContent,
approveButtonTooltipProps = _ref.approveButtonTooltipProps,
status = _ref.status,
statusMessage = _ref.statusMessage,
margins = _ref.margins;
return {
id: id,
disabled: true,
overrideOptionStyle: true,
value: function value(props) {
return /*#__PURE__*/React.createElement(ListItemEditable, _extends({}, props, {
dataHook: dataHook,
className: className,
size: size,
placeholder: placeholder,
onApprove: onApprove,
onCancel: onCancel,
cancelButtonTooltipContent: cancelButtonTooltipContent,
cancelButtonTooltipProps: cancelButtonTooltipProps,
approveButtonTooltipContent: approveButtonTooltipContent,
approveButtonTooltipProps: approveButtonTooltipProps,
status: status,
statusMessage: statusMessage,
margins: margins
}));
}
};
};
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,
/** 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,
/** Cancel button tooltip content */
cancelButtonTooltipContent: PropTypes.node,
/** Cancel button tooltip common props */
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 */
approveButtonTooltipProps: PropTypes.shape(TooltipCommonProps),
/** 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'])
};
ListItemEditable.defaultProps = {
size: 'small',
margins: 'list-item'
};
export default ListItemEditable;