javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): checking if node is actually an element before treating it like one, fixes #19769 (#19783)

Browse Source
This commit is contained in:
Ely Lucas
2019-10-29 10:36:28 -06:00
parent 1f2b161ccd
commit e23d91c6e7
1 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/react/src/components/utils/attachProps.ts
View File

@ -1,33 +1,36 @@
import { camelToDashCase } from './case'; import { camelToDashCase } from './case';
export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => { export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
// add any classes in className to the class list // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
const className = getClassName(node.classList, newProps, oldProps); if (node instanceof Element) {
if (className !== '') { // add any classes in className to the class list
node.className = className; const className = getClassName(node.classList, newProps, oldProps);
} if (className !== '') {
node.className = className;
Object.keys(newProps).forEach(name => {
if (name === 'children' || name === 'style' || name === 'ref' || name === 'class' || name === 'className' || name === 'forwardedRef') {
return;
} }
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
const eventName = name.substring(2);
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
if (!isCoveredByReact(eventNameLc)) { Object.keys(newProps).forEach(name => {
syncEvent(node, eventNameLc, newProps[name]); if (name === 'children' || name === 'style' || name === 'ref' || name === 'class' || name === 'className' || name === 'forwardedRef') {
return;
} }
} else { if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
(node as any)[name] = newProps[name]; const eventName = name.substring(2);
const propType = typeof newProps[name]; const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
if (propType === 'string') {
node.setAttribute(camelToDashCase(name), newProps[name]); if (!isCoveredByReact(eventNameLc)) {
syncEvent(node, eventNameLc, newProps[name]);
}
} else { } else {
(node as any)[name] = newProps[name]; (node as any)[name] = newProps[name];
const propType = typeof newProps[name];
if (propType === 'string') {
node.setAttribute(camelToDashCase(name), newProps[name]);
} else {
(node as any)[name] = newProps[name];
}
} }
} });
}); }
}; };
export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => { export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {