ref(ui-components) Move components to base/ui (#11912)

This commit is contained in:
Robert Pintilii 2022-07-27 11:40:34 +03:00 committed by GitHub
parent 8b4c7ebc03
commit b1a9d68cf5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 148 additions and 154 deletions

View File

@ -6,8 +6,7 @@ import { TouchableRipple } from 'react-native-paper';
import { Icon } from '../../../icons';
// @ts-ignore
import BaseTheme from '../../../ui/components/BaseTheme.native';
// @ts-ignore
import { BUTTON_TYPES } from '../../constants';
import { BUTTON_TYPES } from '../../../ui/constants';
import { IconButtonProps } from '../../types';
// @ts-ignore

View File

@ -136,17 +136,6 @@ export const BASE_INDICATOR = {
justifyContent: 'center'
};
const button = {
borderRadius: BaseTheme.shape.borderRadius,
height: BUTTON_HEIGHT
};
const buttonLabel = {
...BaseTheme.typography.bodyShortBold,
padding: 6,
textTransform: 'capitalize'
};
const iconButtonContainer = {
alignItems: 'center',
display: 'flex',
@ -163,44 +152,6 @@ const iconButtonContainer = {
export default {
...SECTION_LIST_STYLES,
button: {
...button
},
buttonLabel: {
...buttonLabel
},
buttonLabelDisabled: {
...buttonLabel,
color: BaseTheme.palette.text03
},
buttonDisabled: {
...button,
backgroundColor: BaseTheme.palette.actionDisabled
},
buttonLabelPrimary: {
...buttonLabel,
color: BaseTheme.palette.text01
},
buttonLabelSecondary: {
...buttonLabel,
color: BaseTheme.palette.text0
},
buttonLabelDestructive: {
...buttonLabel,
color: BaseTheme.palette.text01
},
buttonLabelTertiary: {
...buttonLabel,
color: BaseTheme.palette.text01
},
iconButtonContainer: {
...iconButtonContainer
},

View File

@ -3,20 +3,3 @@
* everything, such as modal-type of components, or dialogs.
*/
export const OVERLAY_Z_INDEX = 1000;
/**
* The types of the buttons.
*/
export enum BUTTON_TYPES {
DESTRUCTIVE = 'destructive',
PRIMARY = 'primary',
SECONDARY = 'secondary',
TERTIARY = 'tertiary'
}
/**
* The modes of the buttons.
*/
export const BUTTON_MODES = {
CONTAINED: 'contained'
};

View File

@ -1,12 +1,3 @@
import { ButtonProps } from '../components/common/types';
export interface IButtonProps extends ButtonProps {
color?: string;
labelStyle?: Object|undefined;
onPress?: Function;
style?: Object|undefined;
}
export interface IconButtonProps {
accessibilityLabel?: string;
color?: string;

View File

@ -7,15 +7,19 @@ import {
TouchableRipple
} from 'react-native-paper';
// @ts-ignore
import BaseTheme from '../../../ui/components/BaseTheme.native';
// @ts-ignore
import { BUTTON_MODES, BUTTON_TYPES } from '../../constants';
import { IButtonProps } from '../../types';
// @ts-ignore
import styles from './styles';
import BaseTheme from '../BaseTheme.native';
import { ButtonProps } from '../types';
import styles from './buttonStyles';
export interface IButtonProps extends ButtonProps {
color?: string;
labelStyle?: Object | undefined;
onPress?: Function;
style?: Object | undefined;
}
const Button: React.FC<IButtonProps> = ({
accessibilityLabel,

View File

@ -10,12 +10,12 @@ import {
ViewStyle
} from 'react-native';
import { InputProps } from '../../../components/common/types';
import Icon from '../../../icons/components/Icon';
import { IconCloseCircle } from '../../../icons/svg';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import BaseTheme from '../../../ui/components/BaseTheme.native';
import { InputProps } from '../types';
import styles from './inputStyles';

View File

@ -0,0 +1,55 @@
// @ts-ignore
import BaseTheme from '../../../ui/components/BaseTheme.native';
const BUTTON_HEIGHT = BaseTheme.spacing[7];
const button = {
borderRadius: BaseTheme.shape.borderRadius,
height: BUTTON_HEIGHT
};
const buttonLabel = {
...BaseTheme.typography.bodyShortBold,
padding: 6,
textTransform: 'capitalize'
};
export default {
button: {
...button
},
buttonLabel: {
...buttonLabel
},
buttonLabelDisabled: {
...buttonLabel,
color: BaseTheme.palette.text03
},
buttonDisabled: {
...button,
backgroundColor: BaseTheme.palette.actionDisabled
},
buttonLabelPrimary: {
...buttonLabel,
color: BaseTheme.palette.text01
},
buttonLabelSecondary: {
...buttonLabel,
color: BaseTheme.palette.text0
},
buttonLabelDestructive: {
...buttonLabel,
color: BaseTheme.palette.text01
},
buttonLabelTertiary: {
...buttonLabel,
color: BaseTheme.palette.text01
}
};

View File

@ -1,4 +1,4 @@
import { BUTTON_TYPES } from '../../react/constants';
import { BUTTON_TYPES } from '../constants';
export interface ButtonProps {

View File

@ -2,12 +2,12 @@ import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React from 'react';
import Icon from '../../icons/components/Icon';
import { BUTTON_TYPES } from '../../react/constants';
import { withPixelLineHeight } from '../../styles/functions.web';
import { Theme } from '../../ui/types';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { BUTTON_TYPES } from '../../constants';
import { Theme } from '../../types';
import { ButtonProps } from '../types';
import { ButtonProps } from './types';
interface IButtonProps extends ButtonProps {

View File

@ -2,13 +2,12 @@ import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React, { useCallback } from 'react';
import { isMobileBrowser } from '../../environment/utils';
import Icon from '../../icons/components/Icon';
import { IconCloseCircle } from '../../icons/svg/index';
import { withPixelLineHeight } from '../../styles/functions.web';
import { Theme } from '../../ui/types';
import { InputProps } from './types';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { IconCloseCircle } from '../../../icons/svg/index';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { Theme } from '../../../ui/types';
import { InputProps } from '../types';
interface IInputProps extends InputProps {
bottomLabel?: string;

View File

@ -1,4 +1,21 @@
// @flow
import { Theme } from './types';
/**
* The types of the buttons.
*/
export enum BUTTON_TYPES {
DESTRUCTIVE = 'destructive',
PRIMARY = 'primary',
SECONDARY = 'secondary',
TERTIARY = 'tertiary'
}
/**
* The modes of the buttons.
*/
export const BUTTON_MODES = {
CONTAINED: 'contained'
};
/**
* An object containing all the class names for common CSS.
@ -25,7 +42,7 @@ export const commonClassName = {
*
* @returns {Object} - The common styles.
*/
export const commonStyles = (theme: Object) => {
export const commonStyles = (theme: Theme) => {
return {
// '.empty-list'
[commonClassName.emptyList]: {
@ -293,7 +310,7 @@ export const commonStyles = (theme: Object) => {
* @param {Object} theme - The Jitsi theme.
* @returns {Object}
*/
export const getGlobalStyles = (theme: Object) => {
export const getGlobalStyles = (theme: Theme) => {
return {
// @atlaskit/modal-dialog OVERRIDES
'.atlaskit-portal div[role=dialog]': {

View File

@ -7,8 +7,8 @@ interface TypographyType {
export interface Theme {
breakpoints: {
down: (value: number) => string;
up: (value: number) => string;
down: (value: number|string) => string;
up: (value: number|string) => string;
},
palette: {
action01: string;

View File

@ -5,9 +5,9 @@ import { getFeatureFlag, INVITE_ENABLED } from '../../../base/flags';
import { translate } from '../../../base/i18n';
import { Icon, IconAddPeople } from '../../../base/icons';
import { getParticipantCountWithFake } from '../../../base/participants';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import { connect } from '../../../base/redux';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
import { doInvitePeople } from '../../../invite/actions.native';

View File

@ -6,9 +6,8 @@ import { useDispatch } from 'react-redux';
import { createToolbarEvent, sendAnalytics } from '../../../../analytics';
// @ts-ignore
import { appNavigate } from '../../../../app/actions';
import Button from '../../../../base/react/components/native/Button';
// @ts-ignore
import { BUTTON_TYPES } from '../../../../base/react/constants';
import Button from '../../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../../base/ui/constants';
import EndMeetingIcon from './EndMeetingIcon';
// @ts-ignore

View File

@ -4,9 +4,8 @@ import { useDispatch } from 'react-redux';
// @ts-ignore
import { openSheet } from '../../../../base/dialog/actions';
import Button from '../../../../base/react/components/native/Button';
// @ts-ignore
import { BUTTON_TYPES } from '../../../../base/react/constants';
import Button from '../../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../../base/ui/constants';
// @ts-ignore
import AudioRoutePickerDialog from '../../../../mobile/audio-mode/components/AudioRoutePickerDialog';

View File

@ -6,11 +6,11 @@ import { Text, View, TextInput } from 'react-native';
import { translate } from '../../../base/i18n';
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
import { LoadingIndicator } from '../../../base/react';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import { connect } from '../../../base/redux';
import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { BrandingImageBackground } from '../../../dynamic-branding';
import { LargeVideo } from '../../../large-video/components';
import { navigate }

View File

@ -3,8 +3,8 @@
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import Button from '../../../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../../../base/react/constants';
import Button from '../../../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../../../base/ui/constants';
import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';
import styles from './styles';

View File

@ -3,8 +3,8 @@
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import Button from '../../../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../../../base/react/constants';
import Button from '../../../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../../../base/ui/constants';
import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';
import styles from './styles';

View File

@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import Button from '../../../../../base/components/common/Button';
import { BUTTON_TYPES } from '../../../../../base/react/constants';
import Button from '../../../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../../../base/ui/constants';
// @ts-ignore
import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';

View File

@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import Button from '../../../../../base/components/common/Button';
import { BUTTON_TYPES } from '../../../../../base/react/constants';
import Button from '../../../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../../../base/ui/constants';
// @ts-ignore
import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';

View File

@ -5,8 +5,8 @@ import { useDispatch } from 'react-redux';
// @ts-ignore
import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
import Button from '../../../../../base/components/common/Button';
import { BUTTON_TYPES } from '../../../../../base/react/constants';
import Button from '../../../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../../../base/ui/constants';
// @ts-ignore
import { moveToRoom } from '../../../../../breakout-rooms/actions';

View File

@ -4,8 +4,8 @@ import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { hasRaisedHand } from '../../../base/participants';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { approveKnockingParticipant } from '../../../lobby/actions.native';
import { showContextMenuReject } from '../../actions.native';
import { MEDIA_STATE } from '../../constants';

View File

@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
import { ScrollView, Text, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { admitMultiple } from '../../../lobby/actions.native';
import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';

View File

@ -7,10 +7,10 @@ import { FlatList } from 'react-native';
import { translate } from '../../../base/i18n';
import { Icon, IconInviteMore } from '../../../base/icons';
import { getLocalParticipant, getParticipantCountWithFake, getRemoteParticipants } from '../../../base/participants';
import Button from '../../../base/react/components/native/Button';
import Input from '../../../base/react/components/native/Input';
import { BUTTON_TYPES } from '../../../base/react/constants';
import { connect } from '../../../base/redux';
import Button from '../../../base/ui/components/native/Button';
import Input from '../../../base/ui/components/native/Input';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
import { doInvitePeople } from '../../../invite/actions.native';
import { participantMatchesSearch, shouldRenderInviteButton } from '../../functions';

View File

@ -7,10 +7,9 @@ import { useDispatch, useSelector } from 'react-redux';
import { openDialog, openSheet } from '../../../base/dialog';
// @ts-ignore
import { IconHorizontalPoints } from '../../../base/icons';
import Button from '../../../base/react/components/native/Button';
import IconButton from '../../../base/react/components/native/IconButton';
// @ts-ignore
import { BUTTON_TYPES } from '../../../base/react/constants';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import MuteEveryoneDialog
// @ts-ignore
from '../../../video-menu/components/native/MuteEveryoneDialog';

View File

@ -5,9 +5,9 @@ import { useDispatch } from 'react-redux';
// @ts-ignore
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import Button from '../../../base/components/common/Button';
import { IconInviteMore } from '../../../base/icons/svg/index';
import { BUTTON_TYPES } from '../../../base/react/constants';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
// @ts-ignore
import { beginAddPeople } from '../../../invite';

View File

@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { rejectParticipantAudio } from '../../../av-moderation/actions';
import Input from '../../../base/components/common/Input';
import useContextMenu from '../../../base/components/context-menu/useContextMenu';
import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
@ -16,6 +15,7 @@ import {
getParticipantCountWithFake
} from '../../../base/participants';
import { connect } from '../../../base/redux';
import Input from '../../../base/ui/components/web/Input';
import { normalizeAccents } from '../../../base/util/strings';
import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
import { showOverflowDrawer } from '../../../toolbox/functions';

View File

@ -3,14 +3,14 @@
import { withStyles } from '@material-ui/core';
import React, { Component } from 'react';
import Button from '../../../base/components/common/Button';
import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
import { openDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
import { isLocalParticipantModerator } from '../../../base/participants/functions';
import { BUTTON_TYPES } from '../../../base/react/constants';
import { connect } from '../../../base/redux';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions';
import { MuteEveryoneDialog } from '../../../video-menu/components/';
import { close } from '../../actions';

View File

@ -5,9 +5,9 @@ import { Switch, Text, View } from 'react-native';
import { useSelector } from 'react-redux';
import { getLocalParticipant } from '../../../base/participants';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { isSubmitAnswerDisabled } from '../../functions';
import AbstractPollAnswer from '../AbstractPollAnswer';
import type { AbstractProps } from '../AbstractPollAnswer';

View File

@ -4,9 +4,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
import { View, Text, TextInput, FlatList, Platform } from 'react-native';
import { Divider, TouchableRipple } from 'react-native-paper';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import styles
from '../../../welcome/components/native/settings/components/styles';
import { ANSWERS_LIMIT, CHAR_LIMIT } from '../../constants';

View File

@ -6,8 +6,8 @@ import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { getUnreadPollCount } from '../../functions';
import AbstractPollsPane from '../AbstractPollsPane';
import type { AbstractProps } from '../AbstractPollsPane';

View File

@ -18,23 +18,21 @@ import { appNavigate } from '../../app/actions.native';
import { setAudioOnly } from '../../base/audio-only/actions';
// @ts-ignore
import { connect } from '../../base/connection/actions.native';
// @ts-ignore
import { IconClose } from '../../base/icons';
import { IconClose } from '../../base/icons/svg/index';
// @ts-ignore
import JitsiScreen from '../../base/modal/components/JitsiScreen';
// @ts-ignore
import { getLocalParticipant } from '../../base/participants';
// @ts-ignore
import { getFieldValue } from '../../base/react';
import Button from '../../base/react/components/native/Button';
// @ts-ignore
import { BUTTON_TYPES } from '../../base/react/constants';
// @ts-ignore
import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
// @ts-ignore
import { updateSettings } from '../../base/settings';
// @ts-ignore
import BaseTheme from '../../base/ui/components/BaseTheme.native';
import Button from '../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../base/ui/constants';
import { BrandingImageBackground } from '../../dynamic-branding';
// @ts-ignore
import { LargeVideo } from '../../large-video/components';

View File

@ -15,10 +15,10 @@ import {
hasRaisedHand,
raiseHand
} from '../../../base/participants';
import Button from '../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../base/react/constants';
import { connect } from '../../../base/redux';
import { type AbstractButtonProps } from '../../../base/toolbox/components';
import Button from '../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import styles from './styles';

View File

@ -4,8 +4,8 @@ import { Text, View } from 'react-native';
import { useDispatch, batch } from 'react-redux';
import { BottomSheet, hideSheet } from '../../../../base/dialog';
import Button from '../../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../../base/react/constants';
import Button from '../../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../../base/ui/constants';
import { highlightMeetingMoment } from '../../../actions.any';
import styles from '../styles.native';

View File

@ -14,10 +14,10 @@ import { getFeatureFlag, MEETING_PASSWORD_ENABLED } from '../../../../base/flags
import { translate } from '../../../../base/i18n';
import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
import { isLocalParticipantModerator } from '../../../../base/participants';
import Button from '../../../../base/react/components/native/Button';
import { BUTTON_TYPES } from '../../../../base/react/constants';
import { connect } from '../../../../base/redux';
import BaseTheme from '../../../../base/ui/components/BaseTheme';
import Button from '../../../../base/ui/components/native/Button';
import { BUTTON_TYPES } from '../../../../base/ui/constants';
import { isInBreakoutRoom } from '../../../../breakout-rooms/functions';
import { toggleLobbyMode } from '../../../../lobby/actions.any';
import LobbyModeSwitch