wix-style-react
Version:
352 lines (292 loc) • 15.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = 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 _draftJs = require("draft-js");
var _EditorUtilities = _interopRequireDefault(require("./EditorUtilities"));
var _constants = require("./constants");
var _VariableInputSt = require("./VariableInput.st.css");
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _context = require("../FontUpgrade/context");
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; } }
/** Input with variables as tags */
var VariableInput = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(VariableInput, _React$PureComponent);
var _super = _createSuper(VariableInput);
function VariableInput(props) {
var _this;
(0, _classCallCheck2["default"])(this, VariableInput);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handlePastedText", function (text, html, editorState) {
/** We need to prevent new line when `multilne` is false,
* here we are removing any new lines while pasting text */
if (/\r|\n/.exec(text)) {
text = text.replace(/(\r\n|\n|\r)/gm, '');
_this._onEditorChange(_EditorUtilities["default"].insertText(editorState, text));
return true;
}
return false;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isEmpty", function () {
return _this.state.editorState.getCurrentContent().getPlainText().length === 0;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_inputToTagSize", function (inputSize) {
return _constants.inputToTagsSize[inputSize] || VariableInput.defaultProps.size;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_toString", function () {
var _this$props$variableT = _this.props.variableTemplate,
prefix = _this$props$variableT.prefix,
suffix = _this$props$variableT.suffix;
var editorState = _this.state.editorState;
return _EditorUtilities["default"].convertToString({
editorState: editorState,
prefix: prefix,
suffix: suffix
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onBlur", function () {
var _this$props$onBlur = _this.props.onBlur,
onBlur = _this$props$onBlur === void 0 ? function () {} : _this$props$onBlur;
onBlur(_this._toString());
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onFocus", function () {
var _this$props$onFocus = _this.props.onFocus,
onFocus = _this$props$onFocus === void 0 ? function () {} : _this$props$onFocus;
onFocus(_this._toString());
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onSubmit", function () {
var _this$props$onSubmit = _this.props.onSubmit,
onSubmit = _this$props$onSubmit === void 0 ? function () {} : _this$props$onSubmit;
onSubmit(_this._toString());
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onChange", function () {
var _this$props$onChange = _this.props.onChange,
onChange = _this$props$onChange === void 0 ? function () {} : _this$props$onChange;
onChange(_this._toString());
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onEditorChange", function (editorState) {
_this._setEditorState(editorState);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setEditorState", function (editorState) {
var onStateChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
var editorStateBefore = _this.state.editorState;
var _this$props$variableT2 = _this.props.variableTemplate,
prefix = _this$props$variableT2.prefix,
suffix = _this$props$variableT2.suffix;
var updateEditorState = _EditorUtilities["default"].moveToEdge(editorState);
var triggerCallback = function triggerCallback() {};
if (_EditorUtilities["default"].isBlured(editorStateBefore, updateEditorState)) {
// onChange is called after the editor blur handler
// and we can't reflect the changes there, we moved the logic here.
triggerCallback = _this._onBlur;
if (_EditorUtilities["default"].hasUnparsedEntity(updateEditorState, prefix, suffix)) {
updateEditorState = _this._stringToContentState(_EditorUtilities["default"].convertToString({
editorState: updateEditorState,
prefix: prefix,
suffix: suffix
}));
}
} else if (_EditorUtilities["default"].isContentChanged(editorStateBefore, updateEditorState)) {
triggerCallback = _this._onChange;
}
_this.setState({
editorState: updateEditorState
}, function () {
triggerCallback();
onStateChanged();
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_stringToContentState", function (str) {
var _this$props = _this.props,
_this$props$variableP = _this$props.variableParser,
variableParser = _this$props$variableP === void 0 ? function () {} : _this$props$variableP,
_this$props$variableT3 = _this$props.variableTemplate,
prefix = _this$props$variableT3.prefix,
suffix = _this$props$variableT3.suffix;
var editorState = _this.state.editorState;
var content = _EditorUtilities["default"].stringToContentState({
str: str,
variableParser: variableParser,
prefix: prefix,
suffix: suffix
});
return _EditorUtilities["default"].pushAndKeepSelection({
editorState: editorState,
content: content
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setStringValue", function (str) {
var afterUpdated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
var updatedEditorState = _draftJs.EditorState.moveSelectionToEnd(_this._stringToContentState(str));
_this._setEditorState(updatedEditorState, function () {
afterUpdated(updatedEditorState);
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setValue", function (value) {
_this._setStringValue(value, function () {
_this._onSubmit();
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "insertVariable", function (value) {
var _this$props2 = _this.props,
variableParser = _this$props2.variableParser,
_this$props2$variable = _this$props2.variableTemplate,
prefix = _this$props2$variable.prefix,
suffix = _this$props2$variable.suffix;
var editorState = _this.state.editorState;
var text = variableParser(value);
var newState = text ? _EditorUtilities["default"].insertEntity(editorState, {
text: text,
value: value
}) : _EditorUtilities["default"].insertText(editorState, "".concat(prefix).concat(value).concat(suffix, " "));
_this._setEditorState(newState, function () {
_this._onSubmit();
});
});
var size = props.size,
disabled = props.disabled;
var decorator = _EditorUtilities["default"].decoratorFactory({
tag: {
size: _this._inputToTagSize(size),
disabled: disabled
}
});
_this.state = {
editorState: _draftJs.EditorState.createEmpty(decorator)
};
return _this;
}
(0, _createClass2["default"])(VariableInput, [{
key: "componentDidMount",
value: function componentDidMount() {
var initialValue = this.props.initialValue;
this._setStringValue(initialValue);
this.editorRef = /*#__PURE__*/_react["default"].createRef();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props3 = this.props,
dataHook = _this$props3.dataHook,
multiline = _this$props3.multiline,
rows = _this$props3.rows,
size = _this$props3.size,
disabled = _this$props3.disabled,
readOnly = _this$props3.readOnly,
placeholder = _this$props3.placeholder,
status = _this$props3.status,
statusMessage = _this$props3.statusMessage,
className = _this$props3.className;
var singleLineProps = {
handlePastedText: this._handlePastedText,
handleReturn: function handleReturn() {
return 'handled';
}
};
return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref) {
var isMadefor = _ref.active;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _VariableInputSt.st)(_VariableInputSt.classes.root, {
isMadefor: isMadefor,
disabled: disabled,
readOnly: readOnly,
size: size,
status: status,
singleLine: !multiline
}, className),
style: (0, _defineProperty2["default"])({}, _VariableInputSt.vars.rows, rows)
}, /*#__PURE__*/_react["default"].createElement(_draftJs.Editor, (0, _extends2["default"])({
ref: _this2.editorRef,
editorState: _this2.state.editorState,
onChange: _this2._onEditorChange,
onFocus: _this2._onFocus,
placeholder: placeholder,
readOnly: disabled || readOnly
}, readOnly && {
tabIndex: 0
}, !multiline && singleLineProps)), status && /*#__PURE__*/_react["default"].createElement("span", {
className: _VariableInputSt.classes.indicatorWrapper
}, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
dataHook: _constants.dataHooks.indicator,
status: status,
message: statusMessage
})));
});
}
}]);
return VariableInput;
}(_react["default"].PureComponent);
VariableInput.displayName = 'VariableInput';
VariableInput.propTypes = {
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes["default"].string,
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** Specifies whether input should be disabled or not */
disabled: _propTypes["default"].bool,
/** Specifies whether input is read only */
readOnly: _propTypes["default"].bool,
/** Defines an initial value to display */
initialValue: _propTypes["default"].string,
/** Specifies whether component allow multiple lines or not. If false, text won’t wrap and horizontal scroll will appear inside of a component. */
multiline: _propTypes["default"].bool,
/** Defines a callback function that is called each time value is changed:
* `onChange(value: String): void` */
onChange: _propTypes["default"].func,
/** Defines a callback function that is called on value submit, in other words after `insertVariable()` and `setValue()`
* `onSubmit(value: String): void` */
onSubmit: _propTypes["default"].func,
/** Defines a callback function that is called on focus out:
* `onBlur(value: String): void` */
onBlur: _propTypes["default"].func,
/** Defines a callback function that is called on focus in:
* `onFocus(value: String): void` */
onFocus: _propTypes["default"].func,
/** Specify the status of a field */
status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
statusMessage: _propTypes["default"].node,
/** Sets a placeholder message to display */
placeholder: _propTypes["default"].string,
/** Set the height of a component to fit the given number of rows */
rows: _propTypes["default"].number,
/** Controls the size of the input and variable tags */
size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
/** Defines the variable keys that component will parse and convert to <Tag/> components on blur and while using `insertVariable`.
* For each key `variableParser` will be called and should return a proper text for that key or false in case the key is invalid.
* `variableParser(key: String): String|boolean` */
variableParser: _propTypes["default"].func,
/** Defines a template for variable recognition. Typed text strings with matching prefix and suffix symbols will be converted to <Tag/> components. */
variableTemplate: _propTypes["default"].shape({
prefix: _propTypes["default"].string,
suffix: _propTypes["default"].string
})
};
VariableInput.defaultProps = {
initialValue: '',
multiline: true,
rows: 1,
size: _constants.sizeTypes.medium,
variableParser: function variableParser() {},
variableTemplate: {
prefix: '{{',
suffix: '}}'
}
};
var _default = VariableInput;
exports["default"] = _default;