diff --git a/libs/horizon/src/event/ListenerGetter.ts b/libs/horizon/src/event/ListenerGetter.ts index 53e14ee9..d6860f35 100644 --- a/libs/horizon/src/event/ListenerGetter.ts +++ b/libs/horizon/src/event/ListenerGetter.ts @@ -1,14 +1,32 @@ -import {VNode} from '../renderer/Types'; -import {DomComponent} from '../renderer/vnode/VNodeTags'; -import {EVENT_TYPE_ALL, EVENT_TYPE_CAPTURE, EVENT_TYPE_BUBBLE} from './const'; -import {AnyNativeEvent, ListenerUnitList} from './Types'; +import { VNode } from '../renderer/Types'; +import { DomComponent } from '../renderer/vnode/VNodeTags'; +import { EVENT_TYPE_ALL, EVENT_TYPE_CAPTURE, EVENT_TYPE_BUBBLE } from './const'; +import { AnyNativeEvent, ListenerUnitList } from './Types'; + +// 从vnode属性中获取事件listener +function getListenerFromVNode(vNode: VNode, eventName: string): Function | null { + const props = vNode.props; + const mouseEvents = ['onClick', 'onDoubleClick', 'onMouseDown', 'onMouseMove', 'onMouseUp', 'onMouseEnter']; + const formElements = ['button', 'input', 'select', 'textarea']; + + // 是否应该阻止禁用的表单元素触发鼠标事件 + const shouldPreventMouseEvent = + mouseEvents.includes(eventName) && props.disabled && formElements.includes(vNode.type); + + const listener = props[eventName]; + if (shouldPreventMouseEvent) { + return null; + } else { + return listener; + } +} // 获取监听事件 export function getListenersFromTree( targetVNode: VNode | null, horizonEvtName: string | null, nativeEvent: AnyNativeEvent, - eventType: string, + eventType: string ): ListenerUnitList { if (!horizonEvtName) { return []; @@ -20,11 +38,11 @@ export function getListenersFromTree( // 从目标节点到根节点遍历获取listener while (vNode !== null) { - const {realNode, tag} = vNode; + const { realNode, tag } = vNode; if (tag === DomComponent && realNode !== null) { if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_CAPTURE) { const captureName = horizonEvtName + EVENT_TYPE_CAPTURE; - const captureListener = vNode.props[captureName]; + const captureListener = getListenerFromVNode(vNode, captureName); if (captureListener) { listeners.unshift({ vNode, @@ -36,7 +54,7 @@ export function getListenersFromTree( } if (eventType === EVENT_TYPE_ALL || eventType === EVENT_TYPE_BUBBLE) { - const bubbleListener = vNode.props[horizonEvtName]; + const bubbleListener = getListenerFromVNode(vNode, horizonEvtName); if (bubbleListener) { listeners.push({ vNode, @@ -52,6 +70,3 @@ export function getListenersFromTree( return listeners; } - - - diff --git a/package.json b/package.json index 5ef9d520..fa79a858 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build": " webpack --config ./scripts/webpack/webpack.config.js", "build-3rdLib": "node ./scripts/gen3rdLib.js", "build-3rdLib-dev": "npm run build & node ./scripts/gen3rdLib.js --dev", + "build-horizon3rdLib-dev": "npm run build & node ./scripts/gen3rdLib.js --dev --type horizon", "debug-test": "yarn test --debug", "test": "jest --config=jest.config.js", "watch-test": "yarn test --watch --dev" diff --git a/scripts/__tests__/EventTest/MouseEvent.test.js b/scripts/__tests__/EventTest/MouseEvent.test.js index a0972a05..030e25de 100644 --- a/scripts/__tests__/EventTest/MouseEvent.test.js +++ b/scripts/__tests__/EventTest/MouseEvent.test.js @@ -2,8 +2,8 @@ import * as Horizon from '@cloudsop/horizon/index.ts'; import { getLogUtils } from '../jest/testUtils'; describe('MouseEvent Test', () => { - const LogUtils =getLogUtils(); - + const LogUtils = getLogUtils(); + describe('onClick Test', () => { it('绑定this', () => { class App extends Horizon.Component { @@ -11,7 +11,7 @@ describe('MouseEvent Test', () => { super(props); this.state = { num: this.props.num, - price: this.props.price + price: this.props.price, }; } @@ -19,21 +19,24 @@ describe('MouseEvent Test', () => { this.setState({ num: this.state.num + 1 }); } - setPrice = (e) => { + setPrice = e => { this.setState({ num: this.state.price + 1 }); - } + }; render() { return ( <>

{this.state.num}

{this.state.price}

- - + + ); } } + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); expect(container.querySelector('#p').innerHTML).toBe('100'); @@ -55,6 +58,20 @@ describe('MouseEvent Test', () => { } expect(handleClick).toHaveBeenCalledTimes(6); }); + + it('disable不触发click', () => { + const handleClick = jest.fn(); + const spanRef = Horizon.createRef(); + Horizon.render( + , + container + ); + spanRef.current.click(); + + expect(handleClick).toHaveBeenCalledTimes(0); + }); }); const test = (name, config) => { @@ -62,27 +79,21 @@ describe('MouseEvent Test', () => { let event = new MouseEvent(name, { relatedTarget: null, bubbles: true, - screenX: 1 + screenX: 1, }); node.dispatchEvent(event); - expect(LogUtils.getAndClear()).toEqual([ - `${name} capture`, - `${name} bubble` - ]); + expect(LogUtils.getAndClear()).toEqual([`${name} capture`, `${name} bubble`]); event = new MouseEvent(name, { relatedTarget: null, bubbles: true, - screenX: 2 + screenX: 2, }); node.dispatchEvent(event); // 再次触发新事件 - expect(LogUtils.getAndClear()).toEqual([ - `${name} capture`, - `${name} bubble` - ]); + expect(LogUtils.getAndClear()).toEqual([`${name} capture`, `${name} bubble`]); }; describe('合成鼠标事件', () => { @@ -93,10 +104,7 @@ describe('MouseEvent Test', () => { const onMouseMoveCapture = () => { LogUtils.log('mousemove capture'); }; - test('mousemove',
); + test('mousemove',
); }); it('onMouseDown', () => { @@ -106,10 +114,7 @@ describe('MouseEvent Test', () => { const onMousedownCapture = () => { LogUtils.log('mousedown capture'); }; - test('mousedown',
); + test('mousedown',
); }); it('onMouseUp', () => { @@ -119,10 +124,7 @@ describe('MouseEvent Test', () => { const onMouseUpCapture = () => { LogUtils.log('mouseup capture'); }; - test('mouseup',
); + test('mouseup',
); }); it('onMouseOut', () => { @@ -132,10 +134,7 @@ describe('MouseEvent Test', () => { const onMouseOutCapture = () => { LogUtils.log('mouseout capture'); }; - test('mouseout',
); + test('mouseout',
); }); it('onMouseOver', () => { @@ -145,10 +144,7 @@ describe('MouseEvent Test', () => { const onMouseOverCapture = () => { LogUtils.log('mouseover capture'); }; - test('mouseover',
); + test('mouseover',
); }); }); }); diff --git a/scripts/gen3rdLib.js b/scripts/gen3rdLib.js index 7e33dfec..3b446cd8 100644 --- a/scripts/gen3rdLib.js +++ b/scripts/gen3rdLib.js @@ -9,7 +9,7 @@ const argv = require('minimist')(process.argv.slice(2)); const libPathPrefix = '../build'; const suffix = argv.dev ? 'development.js' : 'production.js'; - +const template = argv.type === 'horizon' ? 'horizon3rdTemplate.ejs' : 'template.ejs'; const readLib = (lib) => { const libName = lib.split('.')[0]; const libPath = path.resolve(__dirname, `${libPathPrefix}/${libName}/umd/${lib}`); @@ -20,7 +20,7 @@ const readLib = (lib) => { } }; -ejs.renderFile(path.resolve(__dirname, './template.ejs'), { +ejs.renderFile(path.resolve(__dirname, `./${template}`), { Horizon: readLib(`horizon.${suffix}`), }, null, function(err, result) { const common3rdLibPath = path.resolve(__dirname, `${libPathPrefix}/horizonCommon3rdlib.min.js`) diff --git a/scripts/horizon3rdTemplate.ejs b/scripts/horizon3rdTemplate.ejs new file mode 100644 index 00000000..889a6283 --- /dev/null +++ b/scripts/horizon3rdTemplate.ejs @@ -0,0 +1,17568 @@ +!function(t, r) { +"object" == typeof exports && "object" == typeof module ? module.exports = r() : "function" == typeof define && define.amd ? define([], r) : "object" == typeof exports ? exports.ie = r() : t.ie = r() +}(window, (function() { +return function(t) { +var r = {}; +function e(n) { +if (r[n]) +return r[n].exports; +var o = r[n] = { +i: n, +l: !1, +exports: {} +}; +return t[n].call(o.exports, o, o.exports, e), +o.l = !0, +o.exports +} +return e.m = t, +e.c = r, +e.d = function(t, r, n) { +e.o(t, r) || Object.defineProperty(t, r, { +enumerable: !0, +get: n +}) +} +, +e.r = function(t) { +"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { +value: "Module" +}), +Object.defineProperty(t, "__esModule", { +value: !0 +}) +} +, +e.t = function(t, r) { +if (1 & r && (t = e(t)), +8 & r) +return t; +if (4 & r && "object" == typeof t && t && t.__esModule) +return t; +var n = Object.create(null); +if (e.r(n), +Object.defineProperty(n, "default", { +enumerable: !0, +value: t +}), +2 & r && "string" != typeof t) +for (var o in t) +e.d(n, o, function(r) { +return t[r] +} +.bind(null, o)); +return n +} +, +e.n = function(t) { +var r = t && t.__esModule ? function() { +return t.default +} +: function() { +return t +} +; +return e.d(r, "a", r), +r +} +, +e.o = function(t, r) { +return Object.prototype.hasOwnProperty.call(t, r) +} +, +e.p = "", +e(e.s = 192) +}([function(t, r, e) { +var n = e(1) +, o = e(23).f +, i = e(25) +, a = e(17) +, u = e(114) +, c = e(90) +, s = e(73); +t.exports = function(t, r) { +var e, f, l, h, p, v = t.target, g = t.global, d = t.stat; +if (e = g ? n : d ? n[v] || u(v, {}) : (n[v] || {}).prototype) +for (f in r) { +if (h = r[f], +l = t.noTargetGet ? (p = o(e, f)) && p.value : e[f], +!s(g ? f : v + (d ? "." : "#") + f, t.forced) && void 0 !== l) { +if (typeof h == typeof l) +continue; +c(h, l) +} +(t.sham || l && l.sham) && i(h, "sham", !0), +a(e, f, h, t) +} +} +} +, function(t, r, e) { +(function(r) { +var e = function(t) { +return t && t.Math == Math && t +}; +t.exports = e("object" == typeof globalThis && globalThis) || e("object" == typeof window && window) || e("object" == typeof self && self) || e("object" == typeof r && r) || function() { +return this +}() || Function("return this")() +} +).call(this, e(195)) +} +, function(t, r) { +t.exports = function(t) { +try { +return !!t() +} catch (t) { +return !0 +} +} +} +, function(t, r, e) { +var n = e(68) +, o = Function.prototype +, i = o.bind +, a = o.call +, u = n && i.bind(a, a); +t.exports = n ? function(t) { +return t && u(t) +} +: function(t) { +return t && function() { +return a.apply(t, arguments) +} +} +} +, function(t, r, e) { +var n = e(1) +, o = e(6) +, i = n.String +, a = n.TypeError; +t.exports = function(t) { +if (o(t)) +return t; +throw a(i(t) + " is not an object") +} +} +, function(t, r, e) { +var n = e(2); +t.exports = !n((function() { +return 7 != Object.defineProperty({}, 1, { +get: function() { +return 7 +} +})[1] +} +)) +} +, function(t, r, e) { +var n = e(9); +t.exports = function(t) { +return "object" == typeof t ? null !== t : n(t) +} +} +, function(t, r, e) { +var n = e(1) +, o = e(86) +, i = e(12) +, a = e(60) +, u = e(112) +, c = e(142) +, s = o("wks") +, f = n.Symbol +, l = f && f.for +, h = c ? f : f && f.withoutSetter || a; +t.exports = function(t) { +if (!i(s, t) || !u && "string" != typeof s[t]) { +var r = "Symbol." + t; +u && i(f, t) ? s[t] = f[t] : s[t] = c && l ? l(r) : h(r) +} +return s[t] +} +} +, function(t, r, e) { +var n = e(1) +, o = e(52) +, i = n.String; +t.exports = function(t) { +if ("Symbol" === o(t)) +throw TypeError("Cannot convert a Symbol value to a string"); +return i(t) +} +} +, function(t, r) { +t.exports = function(t) { +return "function" == typeof t +} +} +, function(t, r, e) { +"use strict"; +var n, o, i, a = e(128), u = e(5), c = e(1), s = e(9), f = e(6), l = e(12), h = e(52), p = e(70), v = e(25), g = e(17), d = e(13).f, y = e(29), m = e(37), b = e(39), x = e(7), w = e(60), E = c.Int8Array, S = E && E.prototype, A = c.Uint8ClampedArray, O = A && A.prototype, R = E && m(E), T = S && m(S), I = Object.prototype, M = c.TypeError, j = x("toStringTag"), P = w("TYPED_ARRAY_TAG"), k = w("TYPED_ARRAY_CONSTRUCTOR"), _ = a && !!b && "Opera" !== h(c.opera), L = !1, N = { +Int8Array: 1, +Uint8Array: 1, +Uint8ClampedArray: 1, +Int16Array: 2, +Uint16Array: 2, +Int32Array: 4, +Uint32Array: 4, +Float32Array: 4, +Float64Array: 8 +}, D = { +BigInt64Array: 8, +BigUint64Array: 8 +}, U = function(t) { +if (!f(t)) +return !1; +var r = h(t); +return l(N, r) || l(D, r) +}; +for (n in N) +(i = (o = c[n]) && o.prototype) ? v(i, k, o) : _ = !1; +for (n in D) +(i = (o = c[n]) && o.prototype) && v(i, k, o); +if ((!_ || !s(R) || R === Function.prototype) && (R = function() { +throw M("Incorrect invocation") +} +, +_)) +for (n in N) +c[n] && b(c[n], R); +if ((!_ || !T || T === I) && (T = R.prototype, +_)) +for (n in N) +c[n] && b(c[n].prototype, T); +if (_ && m(O) !== T && b(O, T), +u && !l(T, j)) +for (n in L = !0, +d(T, j, { +get: function() { +return f(this) ? this[P] : void 0 +} +}), +N) +c[n] && v(c[n], P, n); +t.exports = { +NATIVE_ARRAY_BUFFER_VIEWS: _, +TYPED_ARRAY_CONSTRUCTOR: k, +TYPED_ARRAY_TAG: L && P, +aTypedArray: function(t) { +if (U(t)) +return t; +throw M("Target is not a typed array") +}, +aTypedArrayConstructor: function(t) { +if (s(t) && (!b || y(R, t))) +return t; +throw M(p(t) + " is not a typed array constructor") +}, +exportTypedArrayMethod: function(t, r, e, n) { +if (u) { +if (e) +for (var o in N) { +var i = c[o]; +if (i && l(i.prototype, t)) +try { +delete i.prototype[t] +} catch (e) { +try { +i.prototype[t] = r +} catch (t) {} +} +} +T[t] && !e || g(T, t, e ? r : _ && S[t] || r, n) +} +}, +exportTypedArrayStaticMethod: function(t, r, e) { +var n, o; +if (u) { +if (b) { +if (e) +for (n in N) +if ((o = c[n]) && l(o, t)) +try { +delete o[t] +} catch (t) {} +if (R[t] && !e) +return; +try { +return g(R, t, e ? r : _ && R[t] || r) +} catch (t) {} +} +for (n in N) +!(o = c[n]) || o[t] && !e || g(o, t, r) +} +}, +isView: function(t) { +if (!f(t)) +return !1; +var r = h(t); +return "DataView" === r || l(N, r) || l(D, r) +}, +isTypedArray: U, +TypedArray: R, +TypedArrayPrototype: T +} +} +, function(t, r, e) { +var n = e(68) +, o = Function.prototype.call; +t.exports = n ? o.bind(o) : function() { +return o.apply(o, arguments) +} +} +, function(t, r, e) { +var n = e(3) +, o = e(14) +, i = n({}.hasOwnProperty); +t.exports = Object.hasOwn || function(t, r) { +return i(o(t), r) +} +} +, function(t, r, e) { +var n = e(1) +, o = e(5) +, i = e(144) +, a = e(145) +, u = e(4) +, c = e(49) +, s = n.TypeError +, f = Object.defineProperty +, l = Object.getOwnPropertyDescriptor; +r.f = o ? a ? function(t, r, e) { +if (u(t), +r = c(r), +u(e), +"function" == typeof t && "prototype" === r && "value"in e && "writable"in e && !e.writable) { +var n = l(t, r); +n && n.writable && (t[r] = e.value, +e = { +configurable: "configurable"in e ? e.configurable : n.configurable, +enumerable: "enumerable"in e ? e.enumerable : n.enumerable, +writable: !1 +}) +} +return f(t, r, e) +} +: f : function(t, r, e) { +if (u(t), +r = c(r), +u(e), +i) +try { +return f(t, r, e) +} catch (t) {} +if ("get"in e || "set"in e) +throw s("Accessors not supported"); +return "value"in e && (t[r] = e.value), +t +} +} +, function(t, r, e) { +var n = e(1) +, o = e(18) +, i = n.Object; +t.exports = function(t) { +return i(o(t)) +} +} +, function(t, r, e) { +var n = e(30); +t.exports = function(t) { +return n(t.length) +} +} +, function(t, r, e) { +var n = e(1) +, o = e(9) +, i = function(t) { +return o(t) ? t : void 0 +}; +t.exports = function(t, r) { +return arguments.length < 2 ? i(n[t]) : n[t] && n[t][r] +} +} +, function(t, r, e) { +var n = e(1) +, o = e(9) +, i = e(12) +, a = e(25) +, u = e(114) +, c = e(88) +, s = e(19) +, f = e(61).CONFIGURABLE +, l = s.get +, h = s.enforce +, p = String(String).split("String"); +(t.exports = function(t, r, e, c) { +var s, l = !!c && !!c.unsafe, v = !!c && !!c.enumerable, g = !!c && !!c.noTargetGet, d = c && void 0 !== c.name ? c.name : r; +o(e) && ("Symbol(" === String(d).slice(0, 7) && (d = "[" + String(d).replace(/^Symbol\(([^)]*)\)/, "$1") + "]"), +(!i(e, "name") || f && e.name !== d) && a(e, "name", d), +(s = h(e)).source || (s.source = p.join("string" == typeof d ? d : ""))), +t !== n ? (l ? !g && t[r] && (v = !0) : delete t[r], +v ? t[r] = e : a(t, r, e)) : v ? t[r] = e : u(r, e) +} +)(Function.prototype, "toString", (function() { +return o(this) && l(this).source || c(this) +} +)) +} +, function(t, r, e) { +var n = e(1).TypeError; +t.exports = function(t) { +if (null == t) +throw n("Can't call method on " + t); +return t +} +} +, function(t, r, e) { +var n, o, i, a = e(146), u = e(1), c = e(3), s = e(6), f = e(25), l = e(12), h = e(113), p = e(89), v = e(71), g = u.TypeError, d = u.WeakMap; +if (a || h.state) { +var y = h.state || (h.state = new d) +, m = c(y.get) +, b = c(y.has) +, x = c(y.set); +n = function(t, r) { +if (b(y, t)) +throw new g("Object already initialized"); +return r.facade = t, +x(y, t, r), +r +} +, +o = function(t) { +return m(y, t) || {} +} +, +i = function(t) { +return b(y, t) +} +} else { +var w = p("state"); +v[w] = !0, +n = function(t, r) { +if (l(t, w)) +throw new g("Object already initialized"); +return r.facade = t, +f(t, w, r), +r +} +, +o = function(t) { +return l(t, w) ? t[w] : {} +} +, +i = function(t) { +return l(t, w) +} +} +t.exports = { +set: n, +get: o, +has: i, +enforce: function(t) { +return i(t) ? o(t) : n(t, {}) +}, +getterFor: function(t) { +return function(r) { +var e; +if (!s(r) || (e = o(r)).type !== t) +throw g("Incompatible receiver, " + t + " required"); +return e +} +} +} +} +, function(t, r) { +var e = Math.ceil +, n = Math.floor; +t.exports = function(t) { +var r = +t; +return r != r || 0 === r ? 0 : (r > 0 ? n : e)(r) +} +} +, function(t, r) { +t.exports = !1 +} +, function(t, r, e) { +var n = e(38) +, o = e(3) +, i = e(69) +, a = e(14) +, u = e(15) +, c = e(77) +, s = o([].push) +, f = function(t) { +var r = 1 == t +, e = 2 == t +, o = 3 == t +, f = 4 == t +, l = 6 == t +, h = 7 == t +, p = 5 == t || l; +return function(v, g, d, y) { +for (var m, b, x = a(v), w = i(x), E = n(g, d), S = u(w), A = 0, O = y || c, R = r ? O(v, S) : e || h ? O(v, 0) : void 0; S > A; A++) +if ((p || A in w) && (b = E(m = w[A], A, x), +t)) +if (r) +R[A] = b; +else if (b) +switch (t) { +case 3: +return !0; +case 5: +return m; +case 6: +return A; +case 2: +s(R, m) +} +else +switch (t) { +case 4: +return !1; +case 7: +s(R, m) +} +return l ? -1 : o || f ? f : R +} +}; +t.exports = { +forEach: f(0), +map: f(1), +filter: f(2), +some: f(3), +every: f(4), +find: f(5), +findIndex: f(6), +filterReject: f(7) +} +} +, function(t, r, e) { +var n = e(5) +, o = e(11) +, i = e(85) +, a = e(35) +, u = e(26) +, c = e(49) +, s = e(12) +, f = e(144) +, l = Object.getOwnPropertyDescriptor; +r.f = n ? l : function(t, r) { +if (t = u(t), +r = c(r), +f) +try { +return l(t, r) +} catch (t) {} +if (s(t, r)) +return a(!o(i.f, t, r), t[r]) +} +} +, function(t, r, e) { +var n = e(1) +, o = e(9) +, i = e(70) +, a = n.TypeError; +t.exports = function(t) { +if (o(t)) +return t; +throw a(i(t) + " is not a function") +} +} +, function(t, r, e) { +var n = e(5) +, o = e(13) +, i = e(35); +t.exports = n ? function(t, r, e) { +return o.f(t, r, i(1, e)) +} +: function(t, r, e) { +return t[r] = e, +t +} +} +, function(t, r, e) { +var n = e(69) +, o = e(18); +t.exports = function(t) { +return n(o(t)) +} +} +, function(t, r, e) { +var n = e(150) +, o = e(12) +, i = e(149) +, a = e(13).f; +t.exports = function(t) { +var r = n.Symbol || (n.Symbol = {}); +o(r, t) || a(r, t, { +value: i.f(t) +}) +} +} +, function(t, r, e) { +var n = e(3) +, o = n({}.toString) +, i = n("".slice); +t.exports = function(t) { +return i(o(t), 8, -1) +} +} +, function(t, r, e) { +var n = e(3); +t.exports = n({}.isPrototypeOf) +} +, function(t, r, e) { +var n = e(20) +, o = Math.min; +t.exports = function(t) { +return t > 0 ? o(n(t), 9007199254740991) : 0 +} +} +, function(t, r, e) { +var n = e(68) +, o = Function.prototype +, i = o.apply +, a = o.call; +t.exports = "object" == typeof Reflect && Reflect.apply || (n ? a.bind(i) : function() { +return a.apply(i, arguments) +} +) +} +, function(t, r, e) { +var n, o = e(4), i = e(74), a = e(116), u = e(71), c = e(148), s = e(87), f = e(89), l = f("IE_PROTO"), h = function() {}, p = function(t) { +return "