wix-style-react
Version:
wix-style-react
320 lines (319 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemEditableBuilder = exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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/wix-ui-icons-common");
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ListItemEditable/ListItemEditable.js";
/** ListItemEditable */
class ListItemEditable extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {
value: this.props.value || ''
};
/**
* Callback triggered when input value is changed
* @param event (Event)
* @private
*/
this._onInputChange = event => {
var {
onChange
} = this.props;
this.setState({
value: event.target.value
});
onChange == null || onChange(event);
};
/**
* Callback triggered when approved button is clicked
* @private
*/
this._onApproveClicked = () => {
var {
value
} = this.state;
var {
onApprove
} = this.props;
onApprove(value);
};
this._renderInput = () => {
var {
value
} = this.state;
var {
placeholder,
status,
size,
statusMessage,
suffix,
autoFocus,
onEnterPressed
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
marginRight: 3,
flex: 1,
minWidth: 0,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 7
}
}, /*#__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,
suffix: suffix,
autoFocus: autoFocus,
onEnterPressed: onEnterPressed,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 9
}
}));
};
this._renderCancelButton = () => {
var {
onCancel,
cancelButtonTooltipContent,
cancelButtonTooltipProps,
size
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
marginRight: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, cancelButtonTooltipProps, {
dataHook: _constants.dataHooks.cancelButtonTooltip,
disabled: !cancelButtonTooltipContent,
content: cancelButtonTooltipContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
dataHook: _constants.dataHooks.cancelButton,
size: size,
priority: "secondary",
onClick: onCancel,
children: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.X, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 23
}
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}
})));
};
this._renderApproveButton = () => {
var {
value
} = this.state;
var {
approveButtonTooltipContent,
approveButtonTooltipProps,
size,
approveButtonDisabledOnEmpty = true
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, approveButtonTooltipProps, {
dataHook: _constants.dataHooks.approveButtonTooltip,
disabled: !approveButtonTooltipContent || !this.state.value,
content: approveButtonTooltipContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
size: size,
disabled: approveButtonDisabledOnEmpty && !value,
onClick: this._onApproveClicked,
dataHook: _constants.dataHooks.approveButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Check, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 11
}
})));
};
}
render() {
var {
dataHook,
className,
margins
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
dataHook: dataHook,
className: className,
margin: margins === 'list-item' && '3px 24px',
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 7
}
}, this._renderInput(), this._renderCancelButton(), this._renderApproveButton());
}
}
var listItemEditableBuilder = _ref => {
var {
id,
dataHook,
className,
size,
placeholder,
onApprove,
onCancel,
onChange,
cancelButtonTooltipContent,
cancelButtonTooltipProps,
approveButtonTooltipContent,
approveButtonTooltipProps,
approveButtonDisabledOnEmpty,
status,
statusMessage,
margins,
suffix,
autoFocus,
onEnterPressed
} = _ref;
return {
id,
disabled: true,
overrideOptionStyle: true,
value: props => /*#__PURE__*/_react.default.createElement(ListItemEditable, (0, _extends2.default)({}, 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,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 5
}
}))
};
};
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,
/** Value to display with component render */
value: _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,
/** Defines a standard input onChange callback */
onChange: _propTypes.default.func,
/** Cancel button tooltip content */
cancelButtonTooltipContent: _propTypes.default.node,
/** Cancel button tooltip common props
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
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
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
approveButtonTooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
/** Make the approve button disabled when input value is empty */
approveButtonDisabledOnEmpty: _propTypes.default.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.default.node,
/** The type of margin */
margins: _propTypes.default.oneOf(['list-item', 'none']),
/** Pass a component you want to show as the suffix of the input, e.g., text, icon */
suffix: _propTypes.default.node,
/** Focus the input on mount (standart React input autoFocus) */
autoFocus: _propTypes.default.bool,
/** Defines a callback handler that is called when the user presses enter on the input element */
onEnterPressed: _propTypes.default.func
};
ListItemEditable.defaultProps = {
size: 'small',
margins: 'list-item',
onApprove: () => ({}),
onCancel: () => ({}),
approveButtonDisabledOnEmpty: true
};
var _default = exports.default = ListItemEditable;
//# sourceMappingURL=ListItemEditable.js.map