Move HTML and SVG configs into DOMProperty (#11728)
* Inline HTML and SVG configs into DOMProperty * Replace invariants with warnings These invariants can only happen if *we* mess up, and happen during init time. So it's safe to make these warnings, as they would fail the tests anyway. * Clearer variable naming
This commit is contained in:
parent
b3e27b2640
commit
8ec2ed4089
|
@ -16,7 +16,6 @@ import type {
|
|||
} from 'react-reconciler/src/ReactFiberRoot';
|
||||
|
||||
import '../shared/checkReact';
|
||||
import '../shared/ReactDOMInjection';
|
||||
import './ReactDOMClientInjection';
|
||||
|
||||
import ReactFiberReconciler from 'react-reconciler';
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import '../shared/ReactDOMInjection';
|
||||
import ReactVersion from 'shared/ReactVersion';
|
||||
import invariant from 'fbjs/lib/invariant';
|
||||
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import '../shared/ReactDOMInjection';
|
||||
import ReactVersion from 'shared/ReactVersion';
|
||||
|
||||
import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import invariant from 'fbjs/lib/invariant';
|
||||
import warning from 'fbjs/lib/warning';
|
||||
|
||||
// These attributes should be all lowercase to allow for
|
||||
// case insensitive checks
|
||||
|
@ -24,46 +24,21 @@ function checkMask(value, bitmask) {
|
|||
return (value & bitmask) === bitmask;
|
||||
}
|
||||
|
||||
var DOMPropertyInjection = {
|
||||
/**
|
||||
* Mapping from normalized, camelcased property names to a configuration that
|
||||
* specifies how the associated DOM property should be accessed or rendered.
|
||||
*/
|
||||
MUST_USE_PROPERTY: 0x1,
|
||||
HAS_BOOLEAN_VALUE: 0x4,
|
||||
HAS_NUMERIC_VALUE: 0x8,
|
||||
HAS_POSITIVE_NUMERIC_VALUE: 0x10 | 0x8,
|
||||
HAS_OVERLOADED_BOOLEAN_VALUE: 0x20,
|
||||
HAS_STRING_BOOLEAN_VALUE: 0x40,
|
||||
const MUST_USE_PROPERTY = 0x1;
|
||||
const HAS_BOOLEAN_VALUE = 0x4;
|
||||
const HAS_NUMERIC_VALUE = 0x8;
|
||||
const HAS_POSITIVE_NUMERIC_VALUE = 0x10 | 0x8;
|
||||
const HAS_OVERLOADED_BOOLEAN_VALUE = 0x20;
|
||||
const HAS_STRING_BOOLEAN_VALUE = 0x40;
|
||||
|
||||
/**
|
||||
* Inject some specialized knowledge about the DOM. This takes a config object
|
||||
* with the following properties:
|
||||
*
|
||||
* Properties: object mapping DOM property name to one of the
|
||||
* DOMPropertyInjection constants or null. If your attribute isn't in here,
|
||||
* it won't get written to the DOM.
|
||||
*
|
||||
* DOMAttributeNames: object mapping React attribute name to the DOM
|
||||
* attribute name. Attribute names not specified use the **lowercase**
|
||||
* normalized name.
|
||||
*
|
||||
* DOMAttributeNamespaces: object mapping React attribute name to the DOM
|
||||
* attribute namespace URL. (Attribute names not specified use no namespace.)
|
||||
*
|
||||
* DOMPropertyNames: similar to DOMAttributeNames but for DOM properties.
|
||||
* Property names not specified use the normalized name.
|
||||
*
|
||||
* @param {object} domPropertyConfig the config as described above.
|
||||
*/
|
||||
injectDOMPropertyConfig: function(domPropertyConfig) {
|
||||
var Injection = DOMPropertyInjection;
|
||||
function injectDOMPropertyConfig(domPropertyConfig) {
|
||||
var Properties = domPropertyConfig.Properties || {};
|
||||
var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};
|
||||
var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
|
||||
|
||||
for (var propName in Properties) {
|
||||
invariant(
|
||||
if (__DEV__) {
|
||||
warning(
|
||||
!properties.hasOwnProperty(propName),
|
||||
"injectDOMPropertyConfig(...): You're trying to inject DOM property " +
|
||||
"'%s' which has already been injected. You may be accidentally " +
|
||||
|
@ -71,6 +46,7 @@ var DOMPropertyInjection = {
|
|||
'injecting two configs that have conflicting property names.',
|
||||
propName,
|
||||
);
|
||||
}
|
||||
|
||||
var lowerCased = propName.toLowerCase();
|
||||
var propConfig = Properties[propName];
|
||||
|
@ -80,23 +56,21 @@ var DOMPropertyInjection = {
|
|||
attributeNamespace: null,
|
||||
propertyName: propName,
|
||||
|
||||
mustUseProperty: checkMask(propConfig, Injection.MUST_USE_PROPERTY),
|
||||
hasBooleanValue: checkMask(propConfig, Injection.HAS_BOOLEAN_VALUE),
|
||||
hasNumericValue: checkMask(propConfig, Injection.HAS_NUMERIC_VALUE),
|
||||
mustUseProperty: checkMask(propConfig, MUST_USE_PROPERTY),
|
||||
hasBooleanValue: checkMask(propConfig, HAS_BOOLEAN_VALUE),
|
||||
hasNumericValue: checkMask(propConfig, HAS_NUMERIC_VALUE),
|
||||
hasPositiveNumericValue: checkMask(
|
||||
propConfig,
|
||||
Injection.HAS_POSITIVE_NUMERIC_VALUE,
|
||||
HAS_POSITIVE_NUMERIC_VALUE,
|
||||
),
|
||||
hasOverloadedBooleanValue: checkMask(
|
||||
propConfig,
|
||||
Injection.HAS_OVERLOADED_BOOLEAN_VALUE,
|
||||
),
|
||||
hasStringBooleanValue: checkMask(
|
||||
propConfig,
|
||||
Injection.HAS_STRING_BOOLEAN_VALUE,
|
||||
HAS_OVERLOADED_BOOLEAN_VALUE,
|
||||
),
|
||||
hasStringBooleanValue: checkMask(propConfig, HAS_STRING_BOOLEAN_VALUE),
|
||||
};
|
||||
invariant(
|
||||
if (__DEV__) {
|
||||
warning(
|
||||
propertyInfo.hasBooleanValue +
|
||||
propertyInfo.hasNumericValue +
|
||||
propertyInfo.hasOverloadedBooleanValue <=
|
||||
|
@ -105,6 +79,7 @@ var DOMPropertyInjection = {
|
|||
'numeric value, but not a combination: %s',
|
||||
propName,
|
||||
);
|
||||
}
|
||||
|
||||
if (DOMAttributeNames.hasOwnProperty(propName)) {
|
||||
var attributeName = DOMAttributeNames[propName];
|
||||
|
@ -122,8 +97,7 @@ var DOMPropertyInjection = {
|
|||
// for `allowFullscreen`
|
||||
properties[propName] = propertyInfo;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/* eslint-disable max-len */
|
||||
export const ATTRIBUTE_NAME_START_CHAR =
|
||||
|
@ -227,4 +201,214 @@ export function isReservedProp(name) {
|
|||
return RESERVED_PROPS.hasOwnProperty(name);
|
||||
}
|
||||
|
||||
export const injection = DOMPropertyInjection;
|
||||
var HTMLDOMPropertyConfig = {
|
||||
// When adding attributes to this list, be sure to also add them to
|
||||
// the `possibleStandardNames` module to ensure casing and incorrect
|
||||
// name warnings.
|
||||
Properties: {
|
||||
allowFullScreen: HAS_BOOLEAN_VALUE,
|
||||
// specifies target context for links with `preload` type
|
||||
async: HAS_BOOLEAN_VALUE,
|
||||
// Note: there is a special case that prevents it from being written to the DOM
|
||||
// on the client side because the browsers are inconsistent. Instead we call focus().
|
||||
autoFocus: HAS_BOOLEAN_VALUE,
|
||||
autoPlay: HAS_BOOLEAN_VALUE,
|
||||
capture: HAS_OVERLOADED_BOOLEAN_VALUE,
|
||||
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
cols: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
contentEditable: HAS_STRING_BOOLEAN_VALUE,
|
||||
controls: HAS_BOOLEAN_VALUE,
|
||||
default: HAS_BOOLEAN_VALUE,
|
||||
defer: HAS_BOOLEAN_VALUE,
|
||||
disabled: HAS_BOOLEAN_VALUE,
|
||||
download: HAS_OVERLOADED_BOOLEAN_VALUE,
|
||||
draggable: HAS_STRING_BOOLEAN_VALUE,
|
||||
formNoValidate: HAS_BOOLEAN_VALUE,
|
||||
hidden: HAS_BOOLEAN_VALUE,
|
||||
loop: HAS_BOOLEAN_VALUE,
|
||||
// Caution; `option.selected` is not updated if `select.multiple` is
|
||||
// disabled with `removeAttribute`.
|
||||
multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
noValidate: HAS_BOOLEAN_VALUE,
|
||||
open: HAS_BOOLEAN_VALUE,
|
||||
playsInline: HAS_BOOLEAN_VALUE,
|
||||
readOnly: HAS_BOOLEAN_VALUE,
|
||||
required: HAS_BOOLEAN_VALUE,
|
||||
reversed: HAS_BOOLEAN_VALUE,
|
||||
rows: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
rowSpan: HAS_NUMERIC_VALUE,
|
||||
scoped: HAS_BOOLEAN_VALUE,
|
||||
seamless: HAS_BOOLEAN_VALUE,
|
||||
selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
size: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
start: HAS_NUMERIC_VALUE,
|
||||
// support for projecting regular DOM Elements via V1 named slots ( shadow dom )
|
||||
span: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
spellCheck: HAS_STRING_BOOLEAN_VALUE,
|
||||
// Style must be explicitly set in the attribute list. React components
|
||||
// expect a style object
|
||||
style: 0,
|
||||
// Keep it in the whitelist because it is case-sensitive for SVG.
|
||||
tabIndex: 0,
|
||||
// itemScope is for for Microdata support.
|
||||
// See http://schema.org/docs/gs.html
|
||||
itemScope: HAS_BOOLEAN_VALUE,
|
||||
// These attributes must stay in the white-list because they have
|
||||
// different attribute names (see DOMAttributeNames below)
|
||||
acceptCharset: 0,
|
||||
className: 0,
|
||||
htmlFor: 0,
|
||||
httpEquiv: 0,
|
||||
// Set the string boolean flag to allow the behavior
|
||||
value: HAS_STRING_BOOLEAN_VALUE,
|
||||
},
|
||||
DOMAttributeNames: {
|
||||
acceptCharset: 'accept-charset',
|
||||
className: 'class',
|
||||
htmlFor: 'for',
|
||||
httpEquiv: 'http-equiv',
|
||||
},
|
||||
};
|
||||
|
||||
var NS = {
|
||||
xlink: 'http://www.w3.org/1999/xlink',
|
||||
xml: 'http://www.w3.org/XML/1998/namespace',
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a list of all SVG attributes that need special casing,
|
||||
* namespacing, or boolean value assignment.
|
||||
*
|
||||
* When adding attributes to this list, be sure to also add them to
|
||||
* the `possibleStandardNames` module to ensure casing and incorrect
|
||||
* name warnings.
|
||||
*
|
||||
* SVG Attributes List:
|
||||
* https://www.w3.org/TR/SVG/attindex.html
|
||||
* SMIL Spec:
|
||||
* https://www.w3.org/TR/smil
|
||||
*/
|
||||
var SVG_ATTRS = [
|
||||
'accent-height',
|
||||
'alignment-baseline',
|
||||
'arabic-form',
|
||||
'baseline-shift',
|
||||
'cap-height',
|
||||
'clip-path',
|
||||
'clip-rule',
|
||||
'color-interpolation',
|
||||
'color-interpolation-filters',
|
||||
'color-profile',
|
||||
'color-rendering',
|
||||
'dominant-baseline',
|
||||
'enable-background',
|
||||
'fill-opacity',
|
||||
'fill-rule',
|
||||
'flood-color',
|
||||
'flood-opacity',
|
||||
'font-family',
|
||||
'font-size',
|
||||
'font-size-adjust',
|
||||
'font-stretch',
|
||||
'font-style',
|
||||
'font-variant',
|
||||
'font-weight',
|
||||
'glyph-name',
|
||||
'glyph-orientation-horizontal',
|
||||
'glyph-orientation-vertical',
|
||||
'horiz-adv-x',
|
||||
'horiz-origin-x',
|
||||
'image-rendering',
|
||||
'letter-spacing',
|
||||
'lighting-color',
|
||||
'marker-end',
|
||||
'marker-mid',
|
||||
'marker-start',
|
||||
'overline-position',
|
||||
'overline-thickness',
|
||||
'paint-order',
|
||||
'panose-1',
|
||||
'pointer-events',
|
||||
'rendering-intent',
|
||||
'shape-rendering',
|
||||
'stop-color',
|
||||
'stop-opacity',
|
||||
'strikethrough-position',
|
||||
'strikethrough-thickness',
|
||||
'stroke-dasharray',
|
||||
'stroke-dashoffset',
|
||||
'stroke-linecap',
|
||||
'stroke-linejoin',
|
||||
'stroke-miterlimit',
|
||||
'stroke-opacity',
|
||||
'stroke-width',
|
||||
'text-anchor',
|
||||
'text-decoration',
|
||||
'text-rendering',
|
||||
'underline-position',
|
||||
'underline-thickness',
|
||||
'unicode-bidi',
|
||||
'unicode-range',
|
||||
'units-per-em',
|
||||
'v-alphabetic',
|
||||
'v-hanging',
|
||||
'v-ideographic',
|
||||
'v-mathematical',
|
||||
'vector-effect',
|
||||
'vert-adv-y',
|
||||
'vert-origin-x',
|
||||
'vert-origin-y',
|
||||
'word-spacing',
|
||||
'writing-mode',
|
||||
'x-height',
|
||||
'xlink:actuate',
|
||||
'xlink:arcrole',
|
||||
'xlink:href',
|
||||
'xlink:role',
|
||||
'xlink:show',
|
||||
'xlink:title',
|
||||
'xlink:type',
|
||||
'xml:base',
|
||||
'xmlns:xlink',
|
||||
'xml:lang',
|
||||
'xml:space',
|
||||
];
|
||||
|
||||
var SVGDOMPropertyConfig = {
|
||||
Properties: {
|
||||
autoReverse: HAS_STRING_BOOLEAN_VALUE,
|
||||
externalResourcesRequired: HAS_STRING_BOOLEAN_VALUE,
|
||||
preserveAlpha: HAS_STRING_BOOLEAN_VALUE,
|
||||
},
|
||||
DOMAttributeNames: {
|
||||
autoReverse: 'autoReverse',
|
||||
externalResourcesRequired: 'externalResourcesRequired',
|
||||
preserveAlpha: 'preserveAlpha',
|
||||
},
|
||||
DOMAttributeNamespaces: {
|
||||
xlinkActuate: NS.xlink,
|
||||
xlinkArcrole: NS.xlink,
|
||||
xlinkHref: NS.xlink,
|
||||
xlinkRole: NS.xlink,
|
||||
xlinkShow: NS.xlink,
|
||||
xlinkTitle: NS.xlink,
|
||||
xlinkType: NS.xlink,
|
||||
xmlBase: NS.xml,
|
||||
xmlLang: NS.xml,
|
||||
xmlSpace: NS.xml,
|
||||
},
|
||||
};
|
||||
|
||||
var CAMELIZE = /[\-\:]([a-z])/g;
|
||||
var capitalize = token => token[1].toUpperCase();
|
||||
|
||||
SVG_ATTRS.forEach(original => {
|
||||
var reactName = original.replace(CAMELIZE, capitalize);
|
||||
|
||||
SVGDOMPropertyConfig.Properties[reactName] = 0;
|
||||
SVGDOMPropertyConfig.DOMAttributeNames[reactName] = original;
|
||||
});
|
||||
|
||||
injectDOMPropertyConfig(HTMLDOMPropertyConfig);
|
||||
injectDOMPropertyConfig(SVGDOMPropertyConfig);
|
||||
|
|
|
@ -1,88 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {injection} from './DOMProperty';
|
||||
|
||||
var MUST_USE_PROPERTY = injection.MUST_USE_PROPERTY;
|
||||
var HAS_BOOLEAN_VALUE = injection.HAS_BOOLEAN_VALUE;
|
||||
var HAS_NUMERIC_VALUE = injection.HAS_NUMERIC_VALUE;
|
||||
var HAS_POSITIVE_NUMERIC_VALUE = injection.HAS_POSITIVE_NUMERIC_VALUE;
|
||||
var HAS_OVERLOADED_BOOLEAN_VALUE = injection.HAS_OVERLOADED_BOOLEAN_VALUE;
|
||||
var HAS_STRING_BOOLEAN_VALUE = injection.HAS_STRING_BOOLEAN_VALUE;
|
||||
|
||||
var HTMLDOMPropertyConfig = {
|
||||
// When adding attributes to this list, be sure to also add them to
|
||||
// the `possibleStandardNames` module to ensure casing and incorrect
|
||||
// name warnings.
|
||||
Properties: {
|
||||
allowFullScreen: HAS_BOOLEAN_VALUE,
|
||||
// specifies target context for links with `preload` type
|
||||
async: HAS_BOOLEAN_VALUE,
|
||||
// Note: there is a special case that prevents it from being written to the DOM
|
||||
// on the client side because the browsers are inconsistent. Instead we call focus().
|
||||
autoFocus: HAS_BOOLEAN_VALUE,
|
||||
autoPlay: HAS_BOOLEAN_VALUE,
|
||||
capture: HAS_OVERLOADED_BOOLEAN_VALUE,
|
||||
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
cols: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
contentEditable: HAS_STRING_BOOLEAN_VALUE,
|
||||
controls: HAS_BOOLEAN_VALUE,
|
||||
default: HAS_BOOLEAN_VALUE,
|
||||
defer: HAS_BOOLEAN_VALUE,
|
||||
disabled: HAS_BOOLEAN_VALUE,
|
||||
download: HAS_OVERLOADED_BOOLEAN_VALUE,
|
||||
draggable: HAS_STRING_BOOLEAN_VALUE,
|
||||
formNoValidate: HAS_BOOLEAN_VALUE,
|
||||
hidden: HAS_BOOLEAN_VALUE,
|
||||
loop: HAS_BOOLEAN_VALUE,
|
||||
// Caution; `option.selected` is not updated if `select.multiple` is
|
||||
// disabled with `removeAttribute`.
|
||||
multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
noValidate: HAS_BOOLEAN_VALUE,
|
||||
open: HAS_BOOLEAN_VALUE,
|
||||
playsInline: HAS_BOOLEAN_VALUE,
|
||||
readOnly: HAS_BOOLEAN_VALUE,
|
||||
required: HAS_BOOLEAN_VALUE,
|
||||
reversed: HAS_BOOLEAN_VALUE,
|
||||
rows: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
rowSpan: HAS_NUMERIC_VALUE,
|
||||
scoped: HAS_BOOLEAN_VALUE,
|
||||
seamless: HAS_BOOLEAN_VALUE,
|
||||
selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
|
||||
size: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
start: HAS_NUMERIC_VALUE,
|
||||
// support for projecting regular DOM Elements via V1 named slots ( shadow dom )
|
||||
span: HAS_POSITIVE_NUMERIC_VALUE,
|
||||
spellCheck: HAS_STRING_BOOLEAN_VALUE,
|
||||
// Style must be explicitly set in the attribute list. React components
|
||||
// expect a style object
|
||||
style: 0,
|
||||
// Keep it in the whitelist because it is case-sensitive for SVG.
|
||||
tabIndex: 0,
|
||||
// itemScope is for for Microdata support.
|
||||
// See http://schema.org/docs/gs.html
|
||||
itemScope: HAS_BOOLEAN_VALUE,
|
||||
// These attributes must stay in the white-list because they have
|
||||
// different attribute names (see DOMAttributeNames below)
|
||||
acceptCharset: 0,
|
||||
className: 0,
|
||||
htmlFor: 0,
|
||||
httpEquiv: 0,
|
||||
// Attributes with mutation methods must be specified in the whitelist
|
||||
// Set the string boolean flag to allow the behavior
|
||||
value: HAS_STRING_BOOLEAN_VALUE,
|
||||
},
|
||||
DOMAttributeNames: {
|
||||
acceptCharset: 'accept-charset',
|
||||
className: 'class',
|
||||
htmlFor: 'for',
|
||||
httpEquiv: 'http-equiv',
|
||||
},
|
||||
};
|
||||
|
||||
export default HTMLDOMPropertyConfig;
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import * as DOMProperty from './DOMProperty';
|
||||
import HTMLDOMPropertyConfig from './HTMLDOMPropertyConfig';
|
||||
import SVGDOMPropertyConfig from './SVGDOMPropertyConfig';
|
||||
|
||||
DOMProperty.injection.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
|
||||
DOMProperty.injection.injectDOMPropertyConfig(SVGDOMPropertyConfig);
|
|
@ -1,151 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {injection} from './DOMProperty';
|
||||
|
||||
var {HAS_STRING_BOOLEAN_VALUE} = injection;
|
||||
|
||||
var NS = {
|
||||
xlink: 'http://www.w3.org/1999/xlink',
|
||||
xml: 'http://www.w3.org/XML/1998/namespace',
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a list of all SVG attributes that need special casing,
|
||||
* namespacing, or boolean value assignment.
|
||||
*
|
||||
* When adding attributes to this list, be sure to also add them to
|
||||
* the `possibleStandardNames` module to ensure casing and incorrect
|
||||
* name warnings.
|
||||
*
|
||||
* SVG Attributes List:
|
||||
* https://www.w3.org/TR/SVG/attindex.html
|
||||
* SMIL Spec:
|
||||
* https://www.w3.org/TR/smil
|
||||
*/
|
||||
var ATTRS = [
|
||||
'accent-height',
|
||||
'alignment-baseline',
|
||||
'arabic-form',
|
||||
'baseline-shift',
|
||||
'cap-height',
|
||||
'clip-path',
|
||||
'clip-rule',
|
||||
'color-interpolation',
|
||||
'color-interpolation-filters',
|
||||
'color-profile',
|
||||
'color-rendering',
|
||||
'dominant-baseline',
|
||||
'enable-background',
|
||||
'fill-opacity',
|
||||
'fill-rule',
|
||||
'flood-color',
|
||||
'flood-opacity',
|
||||
'font-family',
|
||||
'font-size',
|
||||
'font-size-adjust',
|
||||
'font-stretch',
|
||||
'font-style',
|
||||
'font-variant',
|
||||
'font-weight',
|
||||
'glyph-name',
|
||||
'glyph-orientation-horizontal',
|
||||
'glyph-orientation-vertical',
|
||||
'horiz-adv-x',
|
||||
'horiz-origin-x',
|
||||
'image-rendering',
|
||||
'letter-spacing',
|
||||
'lighting-color',
|
||||
'marker-end',
|
||||
'marker-mid',
|
||||
'marker-start',
|
||||
'overline-position',
|
||||
'overline-thickness',
|
||||
'paint-order',
|
||||
'panose-1',
|
||||
'pointer-events',
|
||||
'rendering-intent',
|
||||
'shape-rendering',
|
||||
'stop-color',
|
||||
'stop-opacity',
|
||||
'strikethrough-position',
|
||||
'strikethrough-thickness',
|
||||
'stroke-dasharray',
|
||||
'stroke-dashoffset',
|
||||
'stroke-linecap',
|
||||
'stroke-linejoin',
|
||||
'stroke-miterlimit',
|
||||
'stroke-opacity',
|
||||
'stroke-width',
|
||||
'text-anchor',
|
||||
'text-decoration',
|
||||
'text-rendering',
|
||||
'underline-position',
|
||||
'underline-thickness',
|
||||
'unicode-bidi',
|
||||
'unicode-range',
|
||||
'units-per-em',
|
||||
'v-alphabetic',
|
||||
'v-hanging',
|
||||
'v-ideographic',
|
||||
'v-mathematical',
|
||||
'vector-effect',
|
||||
'vert-adv-y',
|
||||
'vert-origin-x',
|
||||
'vert-origin-y',
|
||||
'word-spacing',
|
||||
'writing-mode',
|
||||
'x-height',
|
||||
'xlink:actuate',
|
||||
'xlink:arcrole',
|
||||
'xlink:href',
|
||||
'xlink:role',
|
||||
'xlink:show',
|
||||
'xlink:title',
|
||||
'xlink:type',
|
||||
'xml:base',
|
||||
'xmlns:xlink',
|
||||
'xml:lang',
|
||||
'xml:space',
|
||||
];
|
||||
|
||||
var SVGDOMPropertyConfig = {
|
||||
Properties: {
|
||||
autoReverse: HAS_STRING_BOOLEAN_VALUE,
|
||||
externalResourcesRequired: HAS_STRING_BOOLEAN_VALUE,
|
||||
preserveAlpha: HAS_STRING_BOOLEAN_VALUE,
|
||||
},
|
||||
DOMAttributeNames: {
|
||||
autoReverse: 'autoReverse',
|
||||
externalResourcesRequired: 'externalResourcesRequired',
|
||||
preserveAlpha: 'preserveAlpha',
|
||||
},
|
||||
DOMAttributeNamespaces: {
|
||||
xlinkActuate: NS.xlink,
|
||||
xlinkArcrole: NS.xlink,
|
||||
xlinkHref: NS.xlink,
|
||||
xlinkRole: NS.xlink,
|
||||
xlinkShow: NS.xlink,
|
||||
xlinkTitle: NS.xlink,
|
||||
xlinkType: NS.xlink,
|
||||
xmlBase: NS.xml,
|
||||
xmlLang: NS.xml,
|
||||
xmlSpace: NS.xml,
|
||||
},
|
||||
};
|
||||
|
||||
var CAMELIZE = /[\-\:]([a-z])/g;
|
||||
var capitalize = token => token[1].toUpperCase();
|
||||
|
||||
ATTRS.forEach(original => {
|
||||
var reactName = original.replace(CAMELIZE, capitalize);
|
||||
|
||||
SVGDOMPropertyConfig.Properties[reactName] = 0;
|
||||
SVGDOMPropertyConfig.DOMAttributeNames[reactName] = original;
|
||||
});
|
||||
|
||||
export default SVGDOMPropertyConfig;
|
Loading…
Reference in New Issue