83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
|
|
import { getFeatureFlag, INVITE_ENABLED } from '../base/flags';
|
|
import { toState } from '../base/redux';
|
|
|
|
import { REDUCER_KEY } from './constants';
|
|
|
|
/**
|
|
* Generates a class attribute value.
|
|
*
|
|
* @param {Iterable<string>} args - String iterable.
|
|
* @returns {string} Class attribute value.
|
|
*/
|
|
export const classList = (...args) => args.filter(Boolean).join(' ');
|
|
|
|
|
|
/**
|
|
* Find the first styled ancestor component of an element.
|
|
*
|
|
* @param {Element} target - Element to look up.
|
|
* @param {StyledComponentClass} component - Styled component reference.
|
|
* @returns {Element|null} Ancestor.
|
|
*/
|
|
export const findStyledAncestor = (target, component) => {
|
|
if (!target || target.matches(`.${component.styledComponentId}`)) {
|
|
return target;
|
|
}
|
|
|
|
return findStyledAncestor(target.parentElement, component);
|
|
};
|
|
|
|
/**
|
|
* Get a style property from a style declaration as a float.
|
|
*
|
|
* @param {CSSStyleDeclaration} styles - Style declaration.
|
|
* @param {string} name - Property name.
|
|
* @returns {number} Float value.
|
|
*/
|
|
export const getFloatStyleProperty = (styles, name) =>
|
|
parseFloat(styles.getPropertyValue(name));
|
|
|
|
/**
|
|
* Gets the outer height of an element, including margins.
|
|
*
|
|
* @param {Element} element - Target element.
|
|
* @returns {number} Computed height.
|
|
*/
|
|
export const getComputedOuterHeight = element => {
|
|
const computedStyle = getComputedStyle(element);
|
|
|
|
return element.offsetHeight
|
|
+ getFloatStyleProperty(computedStyle, 'margin-top')
|
|
+ getFloatStyleProperty(computedStyle, 'margin-bottom');
|
|
};
|
|
|
|
/**
|
|
* Returns this feature's root state.
|
|
*
|
|
* @param {Object} state - Global state.
|
|
* @returns {Object} Feature state.
|
|
*/
|
|
const getState = state => state[REDUCER_KEY];
|
|
|
|
/**
|
|
* Is the participants pane open.
|
|
*
|
|
* @param {Object} state - Global state.
|
|
* @returns {boolean} Is the participants pane open.
|
|
*/
|
|
export const getParticipantsPaneOpen = state => Boolean(getState(state)?.isOpen);
|
|
|
|
/**
|
|
* Returns true if the invite button should be rendered.
|
|
*
|
|
* @param {Object} state - Global state.
|
|
* @returns {boolean}
|
|
*/
|
|
export const shouldRenderInviteButton = state => {
|
|
const { disableInviteFunctions } = toState(state)['features/base/config'];
|
|
const flagEnabled = getFeatureFlag(state, INVITE_ENABLED, true);
|
|
|
|
return flagEnabled && !disableInviteFunctions;
|
|
};
|