wix-style-react
Version:
253 lines (210 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.listItemEditableBuilder = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Input = _interopRequireDefault(require("../Input"));
var _ListItemEditableSt = require("./ListItemEditable.st.css");
var _constants = require("./constants");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Box = _interopRequireDefault(require("../Box"));
var _wixUiIconsCommon = require("wix-ui-icons-common");
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
/** ListItemEditable */
var ListItemEditable = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(ListItemEditable, _React$PureComponent);
var _super = _createSuper(ListItemEditable);
function ListItemEditable() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
value: ''
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onInputChange", function (event) {
_this.setState({
value: event.target.value
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onApproveClicked", function () {
var value = _this.state.value;
var onApprove = _this.props.onApprove;
onApprove(value);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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["default"].createElement(_Box["default"], {
marginRight: 3,
flex: 1,
minWidth: 0
}, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
dataHook: _constants.dataHooks.input,
className: _ListItemEditableSt.classes.input,
size: size,
status: status,
value: value,
statusMessage: statusMessage,
onChange: _this._onInputChange,
placeholder: placeholder
}));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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["default"].createElement(_Box["default"], {
marginRight: 2
}, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, cancelButtonTooltipProps, {
dataHook: _constants.dataHooks.cancelButtonTooltip,
disabled: !cancelButtonTooltipContent,
content: cancelButtonTooltipContent
}), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
dataHook: _constants.dataHooks.cancelButton,
size: size,
priority: "secondary",
onClick: onCancel,
children: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.X, null)
})));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({}, approveButtonTooltipProps, {
dataHook: _constants.dataHooks.approveButtonTooltip,
disabled: !approveButtonTooltipContent || !_this.state.value,
content: approveButtonTooltipContent
}), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
size: size,
disabled: !value,
onClick: _this._onApproveClicked,
dataHook: _constants.dataHooks.approveButton
}, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Check, null)));
});
return _this;
}
(0, _createClass2["default"])(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["default"].createElement(_Box["default"], {
dataHook: dataHook,
className: className,
margin: margins === 'list-item' && '3px 24px'
}, this._renderInput(), this._renderCancelButton(), this._renderApproveButton());
}
}]);
return ListItemEditable;
}(_react["default"].PureComponent);
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["default"].createElement(ListItemEditable, (0, _extends2["default"])({}, 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
}));
}
};
};
exports.listItemEditableBuilder = listItemEditableBuilder;
ListItemEditable.displayName = 'ListItemEditable';
ListItemEditable.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** A css class to be applied to the component's root element */
className: _propTypes["default"].string,
/** Placeholder to display */
placeholder: _propTypes["default"].string,
/**
* A callback function triggered by clicking the approve button.
* ##### Signature:
* function(value: string) => void
* * `value`: the text contained in the input.
*/
onApprove: _propTypes["default"].func.isRequired,
/**
* A callback function triggered by clicking the cancel button.
* ##### Signature:
* function() => void
*/
onCancel: _propTypes["default"].func.isRequired,
/** Cancel button tooltip content */
cancelButtonTooltipContent: _propTypes["default"].node,
/** Cancel button tooltip common props */
cancelButtonTooltipProps: _propTypes["default"].shape(_TooltipCommon.TooltipCommonProps),
/** Input status - use to display an status indication for the user */
status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),
/** Specifies the size of the input */
size: _propTypes["default"].oneOf(['small', 'medium']),
/** Approve button tooltip content */
approveButtonTooltipContent: _propTypes["default"].node,
/** Approve button tooltip common props */
approveButtonTooltipProps: _propTypes["default"].shape(_TooltipCommon.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["default"].node,
/** The type of margin */
margins: _propTypes["default"].oneOf(['list-item', 'none'])
};
ListItemEditable.defaultProps = {
size: 'small',
margins: 'list-item'
};
var _default = ListItemEditable;
exports["default"] = _default;