From 5ad955ceae70fa1767366f2c7e6fd99b58640fc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Sat, 1 Feb 2014 12:47:04 -0800 Subject: [PATCH] Split DefaultDOMPropertyConfig This makes it a little easier to add SVG properties. It also makes use of that injection that we claim is easy to use and will likely start playing a bigger part soon. --- src/browser/ui/ReactDefaultInjection.js | 21 +++--- ...ertyConfig.js => HTMLDOMPropertyConfig.js} | 52 +------------ src/browser/ui/dom/SVGDOMPropertyConfig.js | 74 +++++++++++++++++++ 3 files changed, 87 insertions(+), 60 deletions(-) rename src/browser/ui/dom/{DefaultDOMPropertyConfig.js => HTMLDOMPropertyConfig.js} (76%) create mode 100644 src/browser/ui/dom/SVGDOMPropertyConfig.js diff --git a/src/browser/ui/ReactDefaultInjection.js b/src/browser/ui/ReactDefaultInjection.js index 9724c6c63df..ea7e3ce4a6c 100644 --- a/src/browser/ui/ReactDefaultInjection.js +++ b/src/browser/ui/ReactDefaultInjection.js @@ -18,22 +18,19 @@ "use strict"; -var ReactInjection = require('ReactInjection'); - -var ExecutionEnvironment = require('ExecutionEnvironment'); - -var DefaultDOMPropertyConfig = require('DefaultDOMPropertyConfig'); - +var BeforeInputEventPlugin = require('BeforeInputEventPlugin'); var ChangeEventPlugin = require('ChangeEventPlugin'); var ClientReactRootIndex = require('ClientReactRootIndex'); var CompositionEventPlugin = require('CompositionEventPlugin'); var DefaultEventPluginOrder = require('DefaultEventPluginOrder'); var EnterLeaveEventPlugin = require('EnterLeaveEventPlugin'); +var ExecutionEnvironment = require('ExecutionEnvironment'); +var HTMLDOMPropertyConfig = require('HTMLDOMPropertyConfig'); var MobileSafariClickEventPlugin = require('MobileSafariClickEventPlugin'); var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin'); var ReactComponentBrowserEnvironment = require('ReactComponentBrowserEnvironment'); -var ReactEventTopLevelCallback = require('ReactEventTopLevelCallback'); +var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy'); var ReactDOM = require('ReactDOM'); var ReactDOMButton = require('ReactDOMButton'); var ReactDOMForm = require('ReactDOMForm'); @@ -42,14 +39,14 @@ var ReactDOMInput = require('ReactDOMInput'); var ReactDOMOption = require('ReactDOMOption'); var ReactDOMSelect = require('ReactDOMSelect'); var ReactDOMTextarea = require('ReactDOMTextarea'); +var ReactEventTopLevelCallback = require('ReactEventTopLevelCallback'); +var ReactInjection = require('ReactInjection'); var ReactInstanceHandles = require('ReactInstanceHandles'); var ReactMount = require('ReactMount'); var SelectEventPlugin = require('SelectEventPlugin'); var ServerReactRootIndex = require('ServerReactRootIndex'); var SimpleEventPlugin = require('SimpleEventPlugin'); -var BeforeInputEventPlugin = require('BeforeInputEventPlugin'); - -var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy'); +var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig'); var createFullPageComponent = require('createFullPageComponent'); @@ -94,12 +91,12 @@ function inject() { body: createFullPageComponent(ReactDOM.body) }); - // This needs to happen after createFullPageComponent() otherwise the mixin // gets double injected. ReactInjection.CompositeComponent.injectMixin(ReactBrowserComponentMixin); - ReactInjection.DOMProperty.injectDOMPropertyConfig(DefaultDOMPropertyConfig); + ReactInjection.DOMProperty.injectDOMPropertyConfig(HTMLDOMPropertyConfig); + ReactInjection.DOMProperty.injectDOMPropertyConfig(SVGDOMPropertyConfig); ReactInjection.EmptyComponent.injectEmptyComponent(ReactDOM.script); diff --git a/src/browser/ui/dom/DefaultDOMPropertyConfig.js b/src/browser/ui/dom/HTMLDOMPropertyConfig.js similarity index 76% rename from src/browser/ui/dom/DefaultDOMPropertyConfig.js rename to src/browser/ui/dom/HTMLDOMPropertyConfig.js index 1e04bc7a03b..03b25f672f0 100644 --- a/src/browser/ui/dom/DefaultDOMPropertyConfig.js +++ b/src/browser/ui/dom/HTMLDOMPropertyConfig.js @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. * - * @providesModule DefaultDOMPropertyConfig + * @providesModule HTMLDOMPropertyConfig */ /*jslint bitwise: true*/ @@ -32,7 +32,7 @@ var HAS_POSITIVE_NUMERIC_VALUE = var HAS_OVERLOADED_BOOLEAN_VALUE = DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE; -var DefaultDOMPropertyConfig = { +var HTMLDOMPropertyConfig = { isCustomAttribute: RegExp.prototype.test.bind( /^(data|aria)-[a-z_][a-z\d_.\-]*$/ ), @@ -136,55 +136,11 @@ var DefaultDOMPropertyConfig = { autoCapitalize: null, // Supported in Mobile Safari for keyboard hints autoCorrect: null, // Supported in Mobile Safari for keyboard hints property: null, // Supports OG in meta tags - - /** - * SVG Properties - */ - cx: MUST_USE_ATTRIBUTE, - cy: MUST_USE_ATTRIBUTE, - d: MUST_USE_ATTRIBUTE, - dx: MUST_USE_ATTRIBUTE, - dy: MUST_USE_ATTRIBUTE, - fill: MUST_USE_ATTRIBUTE, - fx: MUST_USE_ATTRIBUTE, - fy: MUST_USE_ATTRIBUTE, - gradientTransform: MUST_USE_ATTRIBUTE, - gradientUnits: MUST_USE_ATTRIBUTE, - offset: MUST_USE_ATTRIBUTE, - points: MUST_USE_ATTRIBUTE, - r: MUST_USE_ATTRIBUTE, - rx: MUST_USE_ATTRIBUTE, - ry: MUST_USE_ATTRIBUTE, - spreadMethod: MUST_USE_ATTRIBUTE, - stopColor: MUST_USE_ATTRIBUTE, - stopOpacity: MUST_USE_ATTRIBUTE, - stroke: MUST_USE_ATTRIBUTE, - strokeLinecap: MUST_USE_ATTRIBUTE, - strokeWidth: MUST_USE_ATTRIBUTE, - textAnchor: MUST_USE_ATTRIBUTE, - transform: MUST_USE_ATTRIBUTE, - version: MUST_USE_ATTRIBUTE, - viewBox: MUST_USE_ATTRIBUTE, - x1: MUST_USE_ATTRIBUTE, - x2: MUST_USE_ATTRIBUTE, - x: MUST_USE_ATTRIBUTE, - y1: MUST_USE_ATTRIBUTE, - y2: MUST_USE_ATTRIBUTE, - y: MUST_USE_ATTRIBUTE }, DOMAttributeNames: { className: 'class', - gradientTransform: 'gradientTransform', - gradientUnits: 'gradientUnits', htmlFor: 'for', - httpEquiv: 'http-equiv', - spreadMethod: 'spreadMethod', - stopColor: 'stop-color', - stopOpacity: 'stop-opacity', - strokeLinecap: 'stroke-linecap', - strokeWidth: 'stroke-width', - textAnchor: 'text-anchor', - viewBox: 'viewBox' + httpEquiv: 'http-equiv' }, DOMPropertyNames: { autoCapitalize: 'autocapitalize', @@ -201,4 +157,4 @@ var DefaultDOMPropertyConfig = { } }; -module.exports = DefaultDOMPropertyConfig; +module.exports = HTMLDOMPropertyConfig; diff --git a/src/browser/ui/dom/SVGDOMPropertyConfig.js b/src/browser/ui/dom/SVGDOMPropertyConfig.js new file mode 100644 index 00000000000..6bcea2bfed3 --- /dev/null +++ b/src/browser/ui/dom/SVGDOMPropertyConfig.js @@ -0,0 +1,74 @@ +/** + * Copyright 2013-2014 Facebook, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @providesModule SVGDOMPropertyConfig + */ + +/*jslint bitwise: true*/ + +"use strict"; + +var DOMProperty = require('DOMProperty'); + +var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE; + +var SVGDOMPropertyConfig = { + Properties: { + cx: MUST_USE_ATTRIBUTE, + cy: MUST_USE_ATTRIBUTE, + d: MUST_USE_ATTRIBUTE, + dx: MUST_USE_ATTRIBUTE, + dy: MUST_USE_ATTRIBUTE, + fill: MUST_USE_ATTRIBUTE, + fx: MUST_USE_ATTRIBUTE, + fy: MUST_USE_ATTRIBUTE, + gradientTransform: MUST_USE_ATTRIBUTE, + gradientUnits: MUST_USE_ATTRIBUTE, + offset: MUST_USE_ATTRIBUTE, + points: MUST_USE_ATTRIBUTE, + r: MUST_USE_ATTRIBUTE, + rx: MUST_USE_ATTRIBUTE, + ry: MUST_USE_ATTRIBUTE, + spreadMethod: MUST_USE_ATTRIBUTE, + stopColor: MUST_USE_ATTRIBUTE, + stopOpacity: MUST_USE_ATTRIBUTE, + stroke: MUST_USE_ATTRIBUTE, + strokeLinecap: MUST_USE_ATTRIBUTE, + strokeWidth: MUST_USE_ATTRIBUTE, + textAnchor: MUST_USE_ATTRIBUTE, + transform: MUST_USE_ATTRIBUTE, + version: MUST_USE_ATTRIBUTE, + viewBox: MUST_USE_ATTRIBUTE, + x1: MUST_USE_ATTRIBUTE, + x2: MUST_USE_ATTRIBUTE, + x: MUST_USE_ATTRIBUTE, + y1: MUST_USE_ATTRIBUTE, + y2: MUST_USE_ATTRIBUTE, + y: MUST_USE_ATTRIBUTE + }, + DOMAttributeNames: { + gradientTransform: 'gradientTransform', + gradientUnits: 'gradientUnits', + spreadMethod: 'spreadMethod', + stopColor: 'stop-color', + stopOpacity: 'stop-opacity', + strokeLinecap: 'stroke-linecap', + strokeWidth: 'stroke-width', + textAnchor: 'text-anchor', + viewBox: 'viewBox' + } +}; + +module.exports = SVGDOMPropertyConfig;