-
Notifications
You must be signed in to change notification settings - Fork 378
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Portal accepts React.CSSProperties rather than CSSStyleDeclaration (#…
…1069) * make portal accept React.CSSProperties racher than CSSStyleDeclaration * add test converage ignore
- Loading branch information
Showing
15 changed files
with
591 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
/** | ||
* CSS properties which accept numbers but are not in units of "px". | ||
*/ | ||
export const isUnitlessNumber: Record<string, boolean> = { | ||
animationIterationCount: true, | ||
borderImageOutset: true, | ||
borderImageSlice: true, | ||
borderImageWidth: true, | ||
boxFlex: true, | ||
boxFlexGroup: true, | ||
boxOrdinalGroup: true, | ||
columnCount: true, | ||
columns: true, | ||
flex: true, | ||
flexGrow: true, | ||
flexPositive: true, | ||
flexShrink: true, | ||
flexNegative: true, | ||
flexOrder: true, | ||
gridArea: true, | ||
gridRow: true, | ||
gridRowEnd: true, | ||
gridRowSpan: true, | ||
gridRowStart: true, | ||
gridColumn: true, | ||
gridColumnEnd: true, | ||
gridColumnSpan: true, | ||
gridColumnStart: true, | ||
fontWeight: true, | ||
lineClamp: true, | ||
lineHeight: true, | ||
opacity: true, | ||
order: true, | ||
orphans: true, | ||
tabSize: true, | ||
widows: true, | ||
zIndex: true, | ||
zoom: true, | ||
|
||
// SVG-related properties | ||
fillOpacity: true, | ||
floodOpacity: true, | ||
stopOpacity: true, | ||
strokeDasharray: true, | ||
strokeDashoffset: true, | ||
strokeMiterlimit: true, | ||
strokeOpacity: true, | ||
strokeWidth: true, | ||
}; | ||
|
||
/** | ||
* @param {string} prefix vendor-specific prefix, eg: Webkit | ||
* @param {string} key style name, eg: transitionDuration | ||
* @return {string} style name prefixed with `prefix`, properly camelCased, eg: | ||
* WebkitTransitionDuration | ||
*/ | ||
function prefixKey(prefix: string, key: string): string { | ||
return prefix + key.charAt(0).toUpperCase() + key.substring(1); | ||
} | ||
|
||
/** | ||
* Support style names that may come passed in prefixed by adding permutations | ||
* of vendor prefixes. | ||
*/ | ||
const prefixes = ['Webkit', 'ms', 'Moz', 'O']; | ||
|
||
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an | ||
// infinite loop, because it iterates over the newly added props too. | ||
Object.keys(isUnitlessNumber).forEach(prop => { | ||
prefixes.forEach(prefix => { | ||
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop]; | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
/** | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import dangerousStyleValue from './dangerousStyleValue'; | ||
import warnValidStyle from './warnValidStyle'; | ||
|
||
import { CSSProperties } from 'react'; | ||
|
||
/** | ||
* Operations for dealing with CSS properties. | ||
*/ | ||
|
||
/** | ||
* Sets the value for multiple styles on a node. If a value is specified as | ||
* '' (empty string), the corresponding style property will be unset. | ||
* | ||
* @param {DOMElement} node | ||
* @param {object} styles | ||
*/ | ||
export function setValueForStyles(node: HTMLElement, styles: CSSProperties) { | ||
const style = node.style; | ||
const keys = Object.keys(styles) as Array<keyof CSSProperties>; | ||
for (let i = 0; i < keys.length; i += 1) { | ||
let styleName = keys[i]; | ||
const isCustomProperty = styleName.indexOf('--') === 0; | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (!isCustomProperty) { | ||
warnValidStyle(styleName, styles[styleName as any]); | ||
} | ||
} | ||
const styleValue = dangerousStyleValue( | ||
styleName, | ||
styles[styleName], | ||
isCustomProperty | ||
); | ||
if (styleName === 'float') { | ||
styleName = 'cssFloat' as any; | ||
} | ||
if (isCustomProperty) { | ||
style.setProperty(styleName, styleValue); | ||
} else { | ||
style[styleName as any] = styleValue; | ||
} | ||
} | ||
} |
Oops, something went wrong.