haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(ui-components) Replace all Checkboxes with new component (#11948) 

Remove atlaskit/checkbox dependency
This commit is contained in:
Robert Pintilii 2022-08-03 11:41:26 +03:00 committed by GitHub
parent efa0a132c4
commit abc9d36c4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/_polls.scss
View File

@ -28,32 +28,23 @@
}
.poll-answer-container {
display: flex;
padding: 4px;
background: #3D3D3D;
border-radius: 3px;
margin-bottom: 8px;
@media (max-width: 580px) {
&> span {
padding: 8px 0;
}
&> span {
padding: 8px 0;
}
svg {
margin-top: 6px;
}
svg {
margin-top: 6px;
}
}
}
.poll-answer-option {
font-weight: 400;
display: block;
margin: 4px;
@media (max-width: 580px) {
font-size: 16px;
margin: 11px 8px
}
}
.poll-answer-field-list, .poll-answer-list, .poll-result-list {
list-style-type: none;
padding: 0;

4
css/modals/screen-share/_share-audio.scss
View File

@ -3,9 +3,7 @@
width: 100%;
height: 90%;
object-fit: contain;
}
input[type="checkbox"] + svg + span {
color: #9FB0CC;
margin-bottom: 10px;
}
.separator-line {

26
package-lock.json generated
View File

@ -12,7 +12,6 @@
"dependencies": {
"@amplitude/react-native": "2.7.0",
"@atlaskit/button": "15.1.4",
"@atlaskit/checkbox": "12.0.0",
"@atlaskit/dropdown-menu": "10.1.2",
"@atlaskit/field-text": "11.0.4",
"@atlaskit/field-text-area": "8.0.4",
@ -364,20 +363,6 @@
"react": "^16.8.0"
}
},
"node_modules/@atlaskit/checkbox": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@atlaskit/checkbox/-/checkbox-12.0.0.tgz",
"integrity": "sha512-f9JqSQoOtfTFJqNdVLNKRzFQ1ldlQ8mAFLS/33DWWfQ7DbOq1fnG083LHOKN2tDSCpw/zqfkf/zUgguBCnHNNA==",
"dependencies": {
"@atlaskit/analytics-next": "^8.0.0",
"@atlaskit/theme": "^11.0.0",
"@babel/runtime": "^7.0.0",
"@emotion/core": "^10.0.9"
},
"peerDependencies": {
"react": "^16.8.0"
}
},
"node_modules/@atlaskit/codemod-utils": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@atlaskit/codemod-utils/-/codemod-utils-3.4.0.tgz",
@ -21063,17 +21048,6 @@
"@emotion/core": "^10.0.9"
}
},
"@atlaskit/checkbox": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@atlaskit/checkbox/-/checkbox-12.0.0.tgz",
"integrity": "sha512-f9JqSQoOtfTFJqNdVLNKRzFQ1ldlQ8mAFLS/33DWWfQ7DbOq1fnG083LHOKN2tDSCpw/zqfkf/zUgguBCnHNNA==",
"requires": {
"@atlaskit/analytics-next": "^8.0.0",
"@atlaskit/theme": "^11.0.0",
"@babel/runtime": "^7.0.0",
"@emotion/core": "^10.0.9"
}
},
"@atlaskit/codemod-utils": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@atlaskit/codemod-utils/-/codemod-utils-3.4.0.tgz",

1
package.json
View File

@ -17,7 +17,6 @@
"dependencies": {
"@amplitude/react-native": "2.7.0",
"@atlaskit/button": "15.1.4",
"@atlaskit/checkbox": "12.0.0",
"@atlaskit/dropdown-menu": "10.1.2",
"@atlaskit/field-text": "11.0.4",
"@atlaskit/field-text-area": "8.0.4",

2
react/features/desktop-picker/components/DesktopPickerPane.js
View File

@ -1,11 +1,11 @@
/* @flow */
import { Checkbox } from '@atlaskit/checkbox';
import Spinner from '@atlaskit/spinner';
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
import { Platform } from '../../base/react';
import Checkbox from '../../base/ui/components/web/Checkbox';
import DesktopSourcePreview from './DesktopSourcePreview';

9
react/features/polls/components/web/PollAnswer.tsx
View File

@ -1,9 +1,9 @@
/* eslint-disable lines-around-comment */
import { Checkbox } from '@atlaskit/checkbox';
import { makeStyles } from '@material-ui/styles';
import React from 'react';
import Button from '../../../base/ui/components/web/Button';
import Checkbox from '../../../base/ui/components/web/Checkbox';
import { BUTTON_TYPES } from '../../../base/ui/constants';
import { Theme } from '../../../base/ui/types';
// @ts-ignore
@ -51,12 +51,11 @@ const PollAnswer = ({
className = 'poll-answer-container'
key = { index }>
<Checkbox
isChecked = { checkBoxStates[index] }
checked = { checkBoxStates[index] }
key = { index }
label = { <span className = 'poll-answer-option'>{ answer.name }</span> }
label = { answer.name }
// eslint-disable-next-line react/jsx-no-bind
onChange = { ev => setCheckbox(index, ev.target.checked) }
size = 'large' />
onChange = { ev => setCheckbox(index, ev.target.checked) } />
</li>
))
}

40
react/features/screen-share/components/ShareAudioDialog.js → react/features/screen-share/components/ShareAudioDialog.tsx
View File

@ -1,38 +1,36 @@
// @flow
import { Checkbox } from '@atlaskit/checkbox';
/* eslint-disable lines-around-comment */
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import type { Dispatch } from 'redux';
// @ts-ignore
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';
import { translate } from '../../base/i18n/functions';
import { connect } from '../../base/redux/functions';
import {
updateSettings,
shouldHideShareAudioHelper
// @ts-ignore
} from '../../base/settings';
// @ts-ignore
import { toggleScreensharing } from '../../base/tracks';
import Checkbox from '../../base/ui/components/web/Checkbox';
/**
* The type of the React {@code Component} props of {@link ShareAudioDialog}.
*/
export type Props = {
/**
* The redux {@code dispatch} function.
*/
dispatch: Dispatch<any>,
export interface Props extends WithTranslation {
/**
* Boolean stored in local storage that determines whether or not the dialog will be displayed again.
*/
_shouldHideShareAudioHelper: boolean,
_shouldHideShareAudioHelper: boolean,
/**
* Invoked to obtain translated strings.
* The redux {@code dispatch} function.
*/
t: Function
};
dispatch: Dispatch<any>
}
/**
* Component that displays the audio screen share helper dialog.
@ -44,15 +42,13 @@ class ShareAudioDialog extends Component<Props> {
*
* @inheritdoc
*/
constructor(props) {
constructor(props: Props) {
super(props);
this._onContinue = this._onContinue.bind(this);
this._onSelectHideShareAudioHelper = this._onSelectHideShareAudioHelper.bind(this);
}
_onContinue: () => boolean;
/**
* Continue the normal screen sharing flow when the user clicks continue.
*
@ -65,8 +61,6 @@ class ShareAudioDialog extends Component<Props> {
return true;
}
_onSelectHideShareAudioHelper: (Object) => void;
/**
* Callback invoked when the hide audio helper checkbox has been selected. This setting will be persisted in
* the local storage, thus the dialog won't be displayed again.
@ -74,7 +68,7 @@ class ShareAudioDialog extends Component<Props> {
* @param {Object} e - The key event to handle.
* @returns {void}
*/
_onSelectHideShareAudioHelper({ target: { checked } }) {
_onSelectHideShareAudioHelper({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
this.props.dispatch(updateSettings({ hideShareAudioHelper: checked }));
}
@ -99,7 +93,7 @@ class ShareAudioDialog extends Component<Props> {
className = 'share-audio-animation'
src = 'images/share-audio.gif' />
<Checkbox
isChecked = { this.props._shouldHideShareAudioHelper }
checked = { this.props._shouldHideShareAudioHelper }
label = { t('dialog.hideShareAudioHelper') }
name = 'hide-share-audio-helper'
// eslint-disable-next-line react/jsx-no-bind
@ -117,7 +111,7 @@ class ShareAudioDialog extends Component<Props> {
* @private
* @returns {Props}
*/
function _mapStateToProps(state: Object): $Shape<Props> {
function _mapStateToProps(state: Object): Partial<Props> {
return {
_shouldHideShareAudioHelper: shouldHideShareAudioHelper(state)