@tarojs/components
Version:
Taro 组件库。
252 lines (210 loc) • 8.59 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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; } }
/**
* https://github.com/BBKolton/reactify-wc/
* modified event naming
**/
import React, { createRef, createElement } from 'react'; // eslint-disable-next-line
var h = React.createElement;
var SCROLL_VIEW = 'taro-scroll-view-core'; // 为了不要覆盖 wc 中 host 内置的 class 和 stencil 加入的 class
function getClassName(wc, prevProps, props) {
var classList = Array.from(wc.classList);
var oldClassNames = (prevProps.className || prevProps.class || '').split(' ');
var incomingClassNames = (props.className || props.class || '').split(' ');
var finalClassNames = [];
classList.forEach(function (classname) {
if (incomingClassNames.indexOf(classname) > -1) {
finalClassNames.push(classname);
incomingClassNames = incomingClassNames.filter(function (name) {
return name !== classname;
});
} else if (oldClassNames.indexOf(classname) === -1) {
finalClassNames.push(classname);
}
});
finalClassNames = [].concat(_toConsumableArray(finalClassNames), _toConsumableArray(incomingClassNames));
return finalClassNames.join(' ');
}
function updateStyle(dom, key, val) {
if (/^--/.test(key)) {
// css variable
dom.style.setProperty(key, val);
} else {
dom.style[key] = val;
}
}
function updateProp(ctx, comp, propKey, prevProps, props) {
var dom = ctx.ref.current;
var val = props[propKey];
var prevVal = prevProps ? prevProps[propKey] : undefined;
if (propKey === 'children') {
return;
}
if (propKey.toLowerCase() === 'classname') {
dom.className = prevProps ? getClassName(dom, prevProps, props) : val;
return;
}
if (propKey === 'style') {
if (typeof val === 'string') {
dom.setAttribute(propKey, val);
return;
}
if (!val) {
dom.removeAttribute(propKey);
return;
}
if (prevProps) {
if (typeof prevVal === 'string') {
dom.style.cssText = '';
} else {
for (var styleKey in prevVal) {
updateStyle(dom, styleKey, '');
}
}
}
for (var _styleKey in val) {
updateStyle(dom, _styleKey, val[_styleKey]);
}
return;
}
if (/^data-.+/.test(propKey)) {
dom.setAttribute(propKey, val);
}
if (comp === SCROLL_VIEW) {
if (propKey === 'scrollTop') {
dom.mpScrollTop = val;
return;
}
if (propKey === 'scrollLeft') {
dom.mpScrollLeft = val;
return;
}
if (propKey === 'scrollIntoView') {
dom.mpScrollIntoView = val;
return;
}
}
if (typeof val === 'function' && propKey.match(/^on[A-Z]/)) {
var event = propKey.substr(2).toLowerCase();
var fn = val; // 解决用户监听 ScrollView 的 onScroll 会监听到原生 onScroll 的问题
if (comp === SCROLL_VIEW && event === 'scroll') {
fn = function fn(e) {
if (e instanceof CustomEvent) {
val.apply(null, Array.from(arguments));
}
};
}
ctx.eventHandlers.push([event, fn]);
return dom.addEventListener(event, fn);
}
if (typeof val === 'string' || typeof val === 'number') {
dom.setAttribute(propKey, val);
dom[propKey] = val;
return;
}
if (typeof val === 'boolean') {
if (val) {
dom[propKey] = true;
return dom.setAttribute(propKey, val);
}
dom[propKey] = false;
return dom.removeAttribute(propKey);
}
dom[propKey] = val;
}
var reactifyWebComponent = function reactifyWebComponent(WC) {
var Index = /*#__PURE__*/function (_React$Component) {
_inherits(Index, _React$Component);
var _super = _createSuper(Index);
function Index(props) {
var _this;
_classCallCheck(this, Index);
_this = _super.call(this, props);
_this.eventHandlers = [];
_this.ref = /*#__PURE__*/createRef();
return _this;
}
_createClass(Index, [{
key: "update",
value: function update(prevProps) {
var _this2 = this;
this.clearEventHandlers();
if (!this.ref.current) return;
Object.keys(prevProps || {}).forEach(function (key) {
if (key !== 'children' && key !== 'key' && !(key in _this2.props)) {
updateProp(_this2, WC, key, prevProps, _this2.props);
}
});
Object.keys(this.props).forEach(function (key) {
updateProp(_this2, WC, key, prevProps, _this2.props);
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
this.update(prevProps);
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var forwardRef = this.props.forwardRef;
if (typeof forwardRef === 'function') {
forwardRef(this.ref.current);
} else if (forwardRef && _typeof(forwardRef) === 'object' && forwardRef.hasOwnProperty('current')) {
forwardRef.current = this.ref.current;
} else if (typeof forwardRef === 'string') {
console.warn('内置组件不支持字符串 ref');
}
this.update();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearEventHandlers();
}
}, {
key: "clearEventHandlers",
value: function clearEventHandlers() {
var _this3 = this;
this.eventHandlers.forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
event = _ref2[0],
handler = _ref2[1];
if (!_this3.ref.current) return;
_this3.ref.current.removeEventListener(event, handler);
});
this.eventHandlers = [];
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
children = _this$props.children,
dangerouslySetInnerHTML = _this$props.dangerouslySetInnerHTML;
var props = {
ref: this.ref
};
if (dangerouslySetInnerHTML) props.dangerouslySetInnerHTML = dangerouslySetInnerHTML;
return /*#__PURE__*/createElement(WC, props, children);
}
}]);
return Index;
}(React.Component);
return /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(Index, _objectSpread(_objectSpread({}, props), {}, {
forwardRef: ref
}));
});
};
export default reactifyWebComponent;