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.

functions.js 2.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import { getFeatureFlag, INVITE_ENABLED } from '../base/flags';
  2. import { toState } from '../base/redux';
  3. import { REDUCER_KEY } from './constants';
  4. /**
  5. * Generates a class attribute value.
  6. *
  7. * @param {Iterable<string>} args - String iterable.
  8. * @returns {string} Class attribute value.
  9. */
  10. export const classList = (...args) => args.filter(Boolean).join(' ');
  11. /**
  12. * Find the first styled ancestor component of an element.
  13. *
  14. * @param {Element} target - Element to look up.
  15. * @param {StyledComponentClass} component - Styled component reference.
  16. * @returns {Element|null} Ancestor.
  17. */
  18. export const findStyledAncestor = (target, component) => {
  19. if (!target || target.matches(`.${component.styledComponentId}`)) {
  20. return target;
  21. }
  22. return findStyledAncestor(target.parentElement, component);
  23. };
  24. /**
  25. * Get a style property from a style declaration as a float.
  26. *
  27. * @param {CSSStyleDeclaration} styles - Style declaration.
  28. * @param {string} name - Property name.
  29. * @returns {number} Float value.
  30. */
  31. export const getFloatStyleProperty = (styles, name) =>
  32. parseFloat(styles.getPropertyValue(name));
  33. /**
  34. * Gets the outer height of an element, including margins.
  35. *
  36. * @param {Element} element - Target element.
  37. * @returns {number} Computed height.
  38. */
  39. export const getComputedOuterHeight = element => {
  40. const computedStyle = getComputedStyle(element);
  41. return element.offsetHeight
  42. + getFloatStyleProperty(computedStyle, 'margin-top')
  43. + getFloatStyleProperty(computedStyle, 'margin-bottom');
  44. };
  45. /**
  46. * Returns this feature's root state.
  47. *
  48. * @param {Object} state - Global state.
  49. * @returns {Object} Feature state.
  50. */
  51. const getState = state => state[REDUCER_KEY];
  52. /**
  53. * Is the participants pane open.
  54. *
  55. * @param {Object} state - Global state.
  56. * @returns {boolean} Is the participants pane open.
  57. */
  58. export const getParticipantsPaneOpen = state => Boolean(getState(state)?.isOpen);
  59. /**
  60. * Returns true if the invite button should be rendered.
  61. *
  62. * @param {Object} state - Global state.
  63. * @returns {boolean}
  64. */
  65. export const shouldRenderInviteButton = state => {
  66. const { disableInviteFunctions } = toState(state)['features/base/config'];
  67. const flagEnabled = getFeatureFlag(state, INVITE_ENABLED, true);
  68. return flagEnabled && !disableInviteFunctions;
  69. };