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.7KB

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