lib/react_native/component/elements.rb in isomorfeus-react-16.13.11 vs lib/react_native/component/elements.rb in isomorfeus-react-16.13.12
- old
+ new
@@ -1,203 +1,203 @@
-module ReactNative
- module Component
- module Elements
- # https://www.w3.org/TR/html52/fullindex.html#index-elements
- # https://www.w3.org/TR/SVG11/eltindex.html
- UNSUPPORTED_HTML_AND_SVG_ELEMENTS = %w[
- a abbr address area article aside audio
- base bdi bdo blockquote body br
- canvas caption cite col colgroup
- data datalist dd del details dfn dialog dl dt
- em embed
- fieldset figcaption figure footer form
- head header hr html
- iframe ins
- kbd
- label legend li link
- main map mark meta meter
- nav noscript
- object ol optgroup option output
- param picture progress
- q
- rp rt rtc ruby
- s samp script section select small source span strong style sub summary sup
- table tbody td template textarea tfoot th thead time title tr track
- ul
- var video
- wbr
-
- altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform
- color-profile cursor
- desc
- feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting
- feDisplacementMap feDistantLight feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur
- feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting
- feSpotLight feTile feTurbulence
- filter font font-face font-face-format font-face-name font-face-src font-face-uri
- glyph glyphRef
- hkern
- metadata missing-glyph mpath
- script set style switch
- tref
- view vkern
- ]
-
- UNSUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
- define_method(element) do |*args, &block|
- `console.warn("Element " + element + " is not yet supported, using a Text component as substitute!")`
- `Opal.React.internal_prepare_args_and_render(Opal.global.Text, args, block)`
- end
- define_method(`element.toUpperCase()`) do |*args, &block|
- `console.warn("Element " + element + " is not yet supported, using a Text component as substitute!")`
- `Opal.React.internal_prepare_args_and_render(Opal.global.Text, args, block)`
- end
- end
-
- # button
- %x{
- self['supported_button'] = function(props) {
- let theme = Opal.global.React.useContext(Opal.global.ThemeContext);
- let style = {};
- if (theme && typeof theme['button'] !== 'undefined') { style = theme['button']; }
- if (typeof props.style !== 'undefined') {
- style = Opal.React.merge_deep(style, props.style);
- }
- let new_props = Object.assign({}, props, { style: style });
- if (typeof props.title === 'undefined') {
- try {
- new_props.title = props.children.props.children;
- } catch (e) {
- console.error("BUTTON accepts only one string child!")
- }
- }
- return Opal.global.React.createElement(Opal.global.Button, new_props);
- }
- self['supported_button'].displayName = 'BUTTON';
- }
- define_method('button') do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_button, args, block)`
- end
- define_method('BUTTON') do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_button, args, block)`
- end
-
- # img
- define_method('img') do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.global.Image, args, block)`
- end
- define_method('IMG') do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.global.Image, args, block)`
- end
-
- # input
- %x{
- self.supported_input = function(props) {
- Opal.React.render_buffer.push([]);
- if (typeof props.type !== 'undefined') {
- if (props.type === 'text') { return Opal.React.internal_prepare_args_and_render(Opal.global.TextInput, props); }
- else if (props.type === 'checkbox') { return Opal.React.internal_prepare_args_and_render(Opal.global.InputSwitch, props); }
- else {
- console.warn("Input type " + props.type + " not supported. Using TextInput as substitute!");
- return Opal.React.internal_prepare_args_and_render(Opal.global.TextInput, props);
- }
- }
- Opal.React.internal_prepare_args_and_render(Opal.global.TextInput, props);
- return Opal.React.render_buffer.pop();
- }
- }
- define_method('input') do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_input, args, block)`
- end
- define_method('INPUT') do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_input, args, block)`
- end
-
- # elements that map to Text with style
- SUPPORTED_TEXT_HTML_ELEMENTS = %w[
- b
- code
- h1 h2 h3 h4 h5 h6
- i
- pre
- span
- u
- ]
-
- SUPPORTED_TEXT_HTML_ELEMENTS.each do |element|
- fun_name = 'supported_' + element
- %x{
- self[fun_name] = function(props) {
- let theme = Opal.global.React.useContext(Opal.global.ThemeContext);
- let style = {};
- if (theme && typeof theme[element] !== 'undefined') { style = theme[element]; }
- if (typeof props.style !== 'undefined') {
- style = Opal.React.merge_deep(style, props.style);
- }
- let new_props = Object.assign({}, props, { style: style });
- return Opal.global.React.createElement(Opal.global.Text, new_props);
- }
- self[fun_name].displayName = element.toUpperCase();
- }
- define_method(`element.toLowerCase()`) do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
- end
- define_method(`element.toUpperCase()`) do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
- end
- end
-
- SUPPORTED_VIEW_HTML_ELEMENTS = %w[
- div
- p
- ]
-
- SUPPORTED_VIEW_HTML_ELEMENTS.each do |element|
- fun_name = 'supported_' + element
- %x{
- self[fun_name] = function(props) {
- let theme = Opal.global.React.useContext(Opal.global.ThemeContext);
- let style = {};
- if (theme && typeof theme[element] !== 'undefined') { style = theme[element]; }
- if (typeof props.style !== 'undefined') {
- style = Opal.React.merge_deep(style, props.style);
- }
- let new_props = Object.assign({}, props, { style: style });
- return Opal.global.React.createElement(Opal.global.View, new_props);
- }
- self[fun_name].displayName = element.toUpperCase();
- }
- define_method(`element.toLowerCase()`) do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
- end
- define_method(`element.toUpperCase()`) do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
- end
- end
-
- SUPPORTED_SVG_ELEMENTS = %w[
- Circle ClipPath
- Defs
- Ellipse
- ForeignObject
- G
- Image
- Line LinearGradient
- Marker Mask
- Path Pattern Polygon Polyline
- RadialGradient Rect
- Stop Svg Symbol
- Text TextPath TSpan
- Use
- ]
-
- SUPPORTED_SVG_ELEMENTS.each do |element|
- define_method(`element.toLowerCase()`) do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.global.ReactNativeSvg[element], args, block)`
- end
- define_method(`element.toUpperCase()`) do |*args, &block|
- `Opal.React.internal_prepare_args_and_render(Opal.global.ReactNativeSvg[element], args, block)`
- end
- end
- end
- end
-end
+module ReactNative
+ module Component
+ module Elements
+ # https://www.w3.org/TR/html52/fullindex.html#index-elements
+ # https://www.w3.org/TR/SVG11/eltindex.html
+ UNSUPPORTED_HTML_AND_SVG_ELEMENTS = %w[
+ a abbr address area article aside audio
+ base bdi bdo blockquote body br
+ canvas caption cite col colgroup
+ data datalist dd del details dfn dialog dl dt
+ em embed
+ fieldset figcaption figure footer form
+ head header hr html
+ iframe ins
+ kbd
+ label legend li link
+ main map mark meta meter
+ nav noscript
+ object ol optgroup option output
+ param picture progress
+ q
+ rp rt rtc ruby
+ s samp script section select small source span strong style sub summary sup
+ table tbody td template textarea tfoot th thead time title tr track
+ ul
+ var video
+ wbr
+
+ altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform
+ color-profile cursor
+ desc
+ feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting
+ feDisplacementMap feDistantLight feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur
+ feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting
+ feSpotLight feTile feTurbulence
+ filter font font-face font-face-format font-face-name font-face-src font-face-uri
+ glyph glyphRef
+ hkern
+ metadata missing-glyph mpath
+ script set style switch
+ tref
+ view vkern
+ ]
+
+ UNSUPPORTED_HTML_AND_SVG_ELEMENTS.each do |element|
+ define_method(element) do |*args, &block|
+ `console.warn("Element " + element + " is not yet supported, using a Text component as substitute!")`
+ `Opal.React.internal_prepare_args_and_render(Opal.global.Text, args, block)`
+ end
+ define_method(`element.toUpperCase()`) do |*args, &block|
+ `console.warn("Element " + element + " is not yet supported, using a Text component as substitute!")`
+ `Opal.React.internal_prepare_args_and_render(Opal.global.Text, args, block)`
+ end
+ end
+
+ # button
+ %x{
+ self['supported_button'] = function(props) {
+ let theme = Opal.global.React.useContext(Opal.global.ThemeContext);
+ let style = {};
+ if (theme && typeof theme['button'] !== 'undefined') { style = theme['button']; }
+ if (typeof props.style !== 'undefined') {
+ style = Opal.React.merge_deep(style, props.style);
+ }
+ let new_props = Object.assign({}, props, { style: style });
+ if (typeof props.title === 'undefined') {
+ try {
+ new_props.title = props.children.props.children;
+ } catch (e) {
+ console.error("BUTTON accepts only one string child!")
+ }
+ }
+ return Opal.global.React.createElement(Opal.global.Button, new_props);
+ }
+ self['supported_button'].displayName = 'BUTTON';
+ }
+ define_method('button') do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_button, args, block)`
+ end
+ define_method('BUTTON') do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_button, args, block)`
+ end
+
+ # img
+ define_method('img') do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.global.Image, args, block)`
+ end
+ define_method('IMG') do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.global.Image, args, block)`
+ end
+
+ # input
+ %x{
+ self.supported_input = function(props) {
+ Opal.React.render_buffer.push([]);
+ if (typeof props.type !== 'undefined') {
+ if (props.type === 'text') { return Opal.React.internal_prepare_args_and_render(Opal.global.TextInput, props); }
+ else if (props.type === 'checkbox') { return Opal.React.internal_prepare_args_and_render(Opal.global.InputSwitch, props); }
+ else {
+ console.warn("Input type " + props.type + " not supported. Using TextInput as substitute!");
+ return Opal.React.internal_prepare_args_and_render(Opal.global.TextInput, props);
+ }
+ }
+ Opal.React.internal_prepare_args_and_render(Opal.global.TextInput, props);
+ return Opal.React.render_buffer.pop();
+ }
+ }
+ define_method('input') do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_input, args, block)`
+ end
+ define_method('INPUT') do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements.supported_input, args, block)`
+ end
+
+ # elements that map to Text with style
+ SUPPORTED_TEXT_HTML_ELEMENTS = %w[
+ b
+ code
+ h1 h2 h3 h4 h5 h6
+ i
+ pre
+ span
+ u
+ ]
+
+ SUPPORTED_TEXT_HTML_ELEMENTS.each do |element|
+ fun_name = 'supported_' + element
+ %x{
+ self[fun_name] = function(props) {
+ let theme = Opal.global.React.useContext(Opal.global.ThemeContext);
+ let style = {};
+ if (theme && typeof theme[element] !== 'undefined') { style = theme[element]; }
+ if (typeof props.style !== 'undefined') {
+ style = Opal.React.merge_deep(style, props.style);
+ }
+ let new_props = Object.assign({}, props, { style: style });
+ return Opal.global.React.createElement(Opal.global.Text, new_props);
+ }
+ self[fun_name].displayName = element.toUpperCase();
+ }
+ define_method(`element.toLowerCase()`) do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
+ end
+ define_method(`element.toUpperCase()`) do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
+ end
+ end
+
+ SUPPORTED_VIEW_HTML_ELEMENTS = %w[
+ div
+ p
+ ]
+
+ SUPPORTED_VIEW_HTML_ELEMENTS.each do |element|
+ fun_name = 'supported_' + element
+ %x{
+ self[fun_name] = function(props) {
+ let theme = Opal.global.React.useContext(Opal.global.ThemeContext);
+ let style = {};
+ if (theme && typeof theme[element] !== 'undefined') { style = theme[element]; }
+ if (typeof props.style !== 'undefined') {
+ style = Opal.React.merge_deep(style, props.style);
+ }
+ let new_props = Object.assign({}, props, { style: style });
+ return Opal.global.React.createElement(Opal.global.View, new_props);
+ }
+ self[fun_name].displayName = element.toUpperCase();
+ }
+ define_method(`element.toLowerCase()`) do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
+ end
+ define_method(`element.toUpperCase()`) do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.ReactNative.Component.Elements[fun_name], args, block)`
+ end
+ end
+
+ SUPPORTED_SVG_ELEMENTS = %w[
+ Circle ClipPath
+ Defs
+ Ellipse
+ ForeignObject
+ G
+ Image
+ Line LinearGradient
+ Marker Mask
+ Path Pattern Polygon Polyline
+ RadialGradient Rect
+ Stop Svg Symbol
+ Text TextPath TSpan
+ Use
+ ]
+
+ SUPPORTED_SVG_ELEMENTS.each do |element|
+ define_method(`element.toLowerCase()`) do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.global.ReactNativeSvg[element], args, block)`
+ end
+ define_method(`element.toUpperCase()`) do |*args, &block|
+ `Opal.React.internal_prepare_args_and_render(Opal.global.ReactNativeSvg[element], args, block)`
+ end
+ end
+ end
+ end
+end