You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AbstractContainer.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /* @flow */
  2. import React, { Component } from 'react';
  3. import { getFixedPlatformStyle } from '../../styles';
  4. /**
  5. * {@code AbstractContainer} component's property types.
  6. */
  7. export type Props = {
  8. /**
  9. * An optional accessibility label to apply to the container root.
  10. */
  11. accessibilityLabel?: string,
  12. /**
  13. * Whether or not this element is an accessibility element.
  14. */
  15. accessible?: boolean,
  16. /**
  17. * React Elements to display within the component.
  18. */
  19. children: React$Node,
  20. /**
  21. * The event handler/listener to be invoked when this
  22. * {@code AbstractContainer} is clicked on Web or pressed on React
  23. * Native. If {@code onClick} is defined and {@link touchFeedback} is
  24. * undefined, {@code touchFeedback} is considered defined as
  25. * {@code true}.
  26. */
  27. onClick?: ?Function,
  28. /**
  29. * The style (as in stylesheet) to be applied to this
  30. * {@code AbstractContainer}.
  31. */
  32. style?: Array<?string> | Object,
  33. /**
  34. * If this instance is to provide visual feedback when touched, then
  35. * {@code true}; otherwise, {@code false}. If {@code touchFeedback} is
  36. * undefined and {@link onClick} is defined, {@code touchFeedback} is
  37. * considered defined as {@code true}.
  38. */
  39. touchFeedback?: ?Function,
  40. /**
  41. * Color to display when clicked.
  42. */
  43. underlayColor?: string,
  44. /**
  45. * If this {@code AbstractContainer} is to be visible, then {@code true}
  46. * or {@code false} if this instance is to be hidden or not rendered at
  47. * all.
  48. */
  49. visible?: ?boolean
  50. };
  51. /**
  52. * Abstract (base) class for container of React {@link Component} children with
  53. * a style.
  54. *
  55. * @extends Component
  56. */
  57. export default class AbstractContainer<P: Props> extends Component<P> {
  58. /**
  59. * Renders this {@code AbstractContainer} as a React {@code Component} of a
  60. * specific type.
  61. *
  62. * @param {string|ReactClass} type - The type of the React {@code Component}
  63. * which is to be rendered.
  64. * @param {Object|undefined} props - The read-only React {@code Component}
  65. * properties, if any, to render. If undefined, the props of this instance
  66. * will be rendered.
  67. * @protected
  68. * @returns {ReactElement}
  69. */
  70. _render(type, props?: P) {
  71. const {
  72. children,
  73. style,
  74. /* eslint-disable no-unused-vars */
  75. // The following properties are defined for the benefit of
  76. // AbstractContainer and its extenders so they are to not be
  77. // propagated.
  78. touchFeedback,
  79. visible,
  80. /* eslint-enable no-unused-vars */
  81. ...filteredProps
  82. } = props || this.props;
  83. const _style = getFixedPlatformStyle(style);
  84. // $FlowFixMe
  85. return React.createElement(type, {
  86. style: _style,
  87. ...filteredProps
  88. }, children);
  89. }
  90. }