@wix/design-system
Version:
@wix/design-system
96 lines (94 loc) • 4.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _HighlightedItem = _interopRequireDefault(require("./HighlightedItem"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Highlighter/Highlighter.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* Highlighter
*
* It highlights string type children by wrapping match
* with strong dom element.
* It remains children element structure.
*/
var childKeyGenerator = () => {
var childKey = 0;
return () => "highlighted-child-".concat(childKey++);
};
var ELEM_TYPES = {
STRING: 'string',
ARRAY: 'array',
REACT_ELEMENT: 'React_element'
};
var getElementType = element => {
if (Array.isArray(element)) {
return ELEM_TYPES.ARRAY;
}
if (/*#__PURE__*/React.isValidElement(element)) {
return ELEM_TYPES.REACT_ELEMENT;
}
if (typeof element === 'string') {
return ELEM_TYPES.STRING;
}
return '';
};
var highlight = (element, match, nextChildKey, props) => {
if (!element) {
return null;
}
var elementType = getElementType(element);
var elementTypesMap = {
[ELEM_TYPES.STRING]: (elem, _match) => /*#__PURE__*/React.createElement(_HighlightedItem.default, {
key: nextChildKey(),
match: _match,
emphasize: props.emphasize,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 7
}
}, elem),
[ELEM_TYPES.REACT_ELEMENT]: elem => {
if (elem.props.children) {
return /*#__PURE__*/React.cloneElement(elem, _objectSpread(_objectSpread({}, elem.props), {}, {
key: nextChildKey()
}), highlight(elem.props.children, match, nextChildKey, props));
}
return elem;
},
[ELEM_TYPES.ARRAY]: elem => elem.map(el => highlight(el, match, nextChildKey, props))
};
return elementTypesMap[elementType] ? elementTypesMap[elementType](element, match) : element;
};
class Highlighter extends React.PureComponent {
constructor(props) {
super(props);
// we want to create new react keys generator for instance of highlighter
this.nextChildKey = void 0;
this.nextChildKey = childKeyGenerator();
}
render() {
var _this$props = this.props,
dataHook = _this$props.dataHook,
children = _this$props.children,
match = _this$props.match;
return /*#__PURE__*/React.createElement("span", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 7
}
}, highlight(children, match, this.nextChildKey, this.props));
}
}
Highlighter.displayName = 'Highlighter';
var _default = exports.default = Highlighter;
//# sourceMappingURL=Highlighter.js.map