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