wip

Author: Alexander Fedyashov

src/addons/Responsive/Responsive.js

@@ -5,17 +5,15 @@ import React, { Component } from 'react'
 import {
   customPropTypes,
   eventStack,
-  getElementType,
   getUnhandledProps,
   META,
+  withElementType,
 } from '../../lib'
 
-const ElementType = getElementType()
-
 /**
  * Responsive can control visibility of content.
  */
-export default class Responsive extends Component {
+class Responsive extends Component {
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -49,12 +47,6 @@ export default class Responsive extends Component {
     type: META.TYPES.ADDON,
   }
 
-  static onlyMobile = { minWidth: 320, maxWidth: 767 }
-  static onlyTablet = { minWidth: 768, maxWidth: 991 }
-  static onlyComputer = { minWidth: 992 }
-  static onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
-  static onlyWidescreen = { minWidth: 1920 }
-
   constructor(...args) {
     super(...args)
     this.state = { width: window.innerWidth }
@@ -112,10 +104,20 @@ export default class Responsive extends Component {
   // ----------------------------------------
 
   render() {
-    const { children } = this.props
+    const { as: ElementType, children } = this.props
     const rest = getUnhandledProps(Responsive, this.props)
-
+console.error(ElementType)
     if (this.isVisible()) return <ElementType {...rest}>{children}</ElementType>
     return null
   }
 }
+
+const ResponsiveEnc = withElementType(Responsive)
+
+ResponsiveEnc.onlyMobile = { minWidth: 320, maxWidth: 767 }
+ResponsiveEnc.onlyTablet = { minWidth: 768, maxWidth: 991 }
+ResponsiveEnc.onlyComputer = { minWidth: 992 }
+ResponsiveEnc.onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
+ResponsiveEnc.onlyWidescreen = { minWidth: 1920 }
+
+export default ResponsiveEnc

src/elements/Flag/Flag.js

@@ -5,10 +5,10 @@ import React, { Component } from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   shallowEqual,
+  withElementType,
 } from '../../lib'
 
 export const names = [
@@ -84,15 +84,14 @@ class Flag extends Component {
   }
 
   render() {
-    const { className, name } = this.props
+    const { as: ElementType, className, name } = this.props
     const classes = cx(name, 'flag', className)
     const rest = getUnhandledProps(Flag, this.props)
-    const ElementType = getElementType(Flag, this.props)
 
     return <ElementType {...rest} className={classes} />
   }
 }
 
 Flag.create = createShorthandFactory(Flag, value => ({ name: value }))
 
-export default Flag
+export default withElementType(Flag)

src/elements/Icon/Icon.js

@@ -6,18 +6,16 @@ import React, { Component } from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   shallowEqual,
   SUI,
   useKeyOnly,
   useValueAndKey,
+  withElementType,
 } from '../../lib'
 import IconGroup from './IconGroup'
 
-const ElementType = getElementType()
-
 /**
  * An icon is a glyph used to represent something else.
  * @see Image
@@ -87,6 +85,7 @@ class Icon extends Component {
 
   render() {
     const {
+      as: ElementType,
       bordered,
       circular,
       className,
@@ -128,4 +127,4 @@ class Icon extends Component {
 
 Icon.create = createShorthandFactory(Icon, value => ({ name: value }))
 
-export default Icon
+export default withElementType(Icon)

src/elements/Icon/IconGroup.js

@@ -5,19 +5,17 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   SUI,
+  withElementType,
 } from '../../lib'
 
-const ElementType = getElementType()
-
 /**
  * Several icons can be used together as a group.
  */
 function IconGroup(props) {
-  const { children, className, size } = props
+  const { as: ElementType, children, className, size } = props
   const classes = cx(
     size,
     'icons',
@@ -52,4 +50,4 @@ IconGroup.defaultProps = {
   as: 'i',
 }
 
-export default IconGroup
+export default withElementType(IconGroup)

src/elements/Image/Image.js

@@ -7,14 +7,14 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
   useValueAndKey,
   useVerticalAlignProp,
+  withElementType,
 } from '../../lib'
 import Dimmer from '../../modules/Dimmer'
 import Label from '../Label/Label'
@@ -123,14 +123,9 @@ class Image extends Component {
 
   static Group = ImageGroup
 
-  computeElementType = () => {
-    const { dimmer, children, label, wrapped } = this.props
-
-    if (!_.isNil(dimmer) || !_.isNil(label) || !_.isNil(wrapped) || !childrenUtils.isNil(children)) return 'div'
-  }
-
   render() {
     const {
+      as: ElementType,
       alt,
       avatar,
       bordered,
@@ -173,7 +168,6 @@ class Image extends Component {
       className,
     )
     const rest = getUnhandledProps(Image, this.props)
-    const ElementType = getElementType(Image, this.props, this.computeElementType)
 
     if (!childrenUtils.isNil(children)) {
       return <ElementType {...rest} className={classes}>{children}</ElementType>
@@ -195,4 +189,6 @@ class Image extends Component {
 
 Image.create = createShorthandFactory(Image, value => ({ src: value }))
 
-export default Image
+export default withElementType(Image, ({ dimmer, children, label, wrapped }) => {
+  if (!_.isNil(dimmer) || !_.isNil(label) || !_.isNil(wrapped) || !childrenUtils.isNil(children)) return 'div'
+})

src/elements/Image/ImageGroup.js

@@ -4,20 +4,19 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   SUI,
+  withElementType,
 } from '../../lib'
 
 /**
  * A group of images.
  */
 function ImageGroup(props) {
-  const { children, className, size } = props
+  const { as: ElementType, children, className, size } = props
   const classes = cx('ui', size, className, 'images')
   const rest = getUnhandledProps(ImageGroup, props)
-  const ElementType = getElementType(ImageGroup, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }
@@ -42,4 +41,4 @@ ImageGroup.propTypes = {
   size: PropTypes.oneOf(SUI.SIZES),
 }
 
-export default ImageGroup
+export default withElementType(ImageGroup)

src/elements/Label/Label.js

@@ -8,13 +8,13 @@ import {
   createShorthand,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
   useValueAndKey,
+  withElementType,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Image from '../Image/Image'
@@ -24,7 +24,7 @@ import LabelGroup from './LabelGroup'
 /**
  * A label displays content classification.
  */
-export default class Label extends Component {
+class Label extends Component {
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -212,3 +212,5 @@ export default class Label extends Component {
 }
 
 Label.create = createShorthandFactory(Label, value => ({ content: value }))
+
+export default withElementType(Label)

src/elements/Label/LabelDetail.js

@@ -5,16 +5,15 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
+  withElementType,
 } from '../../lib'
 
 function LabelDetail(props) {
   const { children, className, content } = props
   const classes = cx('detail', className)
   const rest = getUnhandledProps(LabelDetail, props)
-  const ElementType = getElementType(LabelDetail, props)
 
   return (
     <ElementType {...rest} className={classes}>
@@ -43,4 +42,4 @@ LabelDetail.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-export default LabelDetail
+export default withElementType(LabelDetail)

src/elements/Label/LabelGroup.js

@@ -4,18 +4,19 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   SUI,
   useKeyOnly,
+  withElementType,
 } from '../../lib'
 
 /**
  * A label can be grouped.
  */
 function LabelGroup(props) {
   const {
+    as: ElementType,
     children,
     circular,
     className,
@@ -34,7 +35,6 @@ function LabelGroup(props) {
     className,
   )
   const rest = getUnhandledProps(LabelGroup, props)
-  const ElementType = getElementType(LabelGroup, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }
@@ -68,4 +68,4 @@ LabelGroup.propTypes = {
   tag: PropTypes.bool,
 }
 
-export default LabelGroup
+export default withElementType(LabelGroup)

src/elements/Rail/Rail.js

@@ -5,19 +5,20 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
   getUnhandledProps,
   META,
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
+  withElementType,
 } from '../../lib'
 
 /**
  * A rail is used to show accompanying content outside the boundaries of the main view of a site.
  */
 function Rail(props) {
   const {
+    as: ElementType,
     attached,
     children,
     className,
@@ -40,7 +41,6 @@ function Rail(props) {
     className,
   )
   const rest = getUnhandledProps(Rail, props)
-  const ElementType = getElementType(Rail, props)
 
   return <ElementType {...rest} className={classes}>{children}</ElementType>
 }
@@ -82,4 +82,4 @@ Rail.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-export default Rail
+export default withElementType(Rail)