Merge pull request #1055 from anyproto/refactoring/toggle-class

Refactoring/Toggle class
anyproto · Nov 15, 2024 · 160f888 · 160f888
2 parents ca1c0c5 + 2df622e
commit 160f888
Show file tree

Hide file tree

Showing 37 changed files with 69 additions and 122 deletions.
diff --git a/src/ts/component/block/bookmark.tsx b/src/ts/component/block/bookmark.tsx
@@ -268,7 +268,7 @@ const BlockBookmark = observer(class BlockBookmark extends React.Component<I.Blo
 			const node = $(this.node);
 			const inner = node.find('.inner');
 
-			inner.width() <= getWrapperWidth() / 2 ? inner.addClass('isVertical') : inner.removeClass('isVertical');
+			inner.toggleClass('isVertical', inner.width() <= getWrapperWidth() / 2);
 		});
 	};
 

diff --git a/src/ts/component/block/dataview.tsx b/src/ts/component/block/dataview.tsx
@@ -313,7 +313,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
 		const head = node.find(`#block-head-${block.id}`);
 		const object = this.getTarget();
 
-		object.isDeleted ? head.addClass('isDeleted') : head.removeClass('isDeleted');
+		head.toggleClass('isDeleted', object.isDeleted);
 	};
 
 	unbind () {
@@ -1491,7 +1491,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
 				const node = $(this.node);
 				const obj = $(`#block-${block.id}`);
 
-				node.width() <= getWrapperWidth() / 2 ? obj.addClass('isVertical') : obj.removeClass('isVertical');
+				obj.toggleClass('isVertical', node.width() <= getWrapperWidth() / 2);
 			};
 
 			if (this.refControls && this.refControls.resize) {

diff --git a/src/ts/component/block/dataview/controls.tsx b/src/ts/component/block/dataview/controls.tsx
@@ -536,11 +536,7 @@ const Controls = observer(class Controls extends React.Component<Props> {
 	};
 
 	toggleHoverArea (v: boolean) {
-		const { block } = this.props;
-		const obj = $(`#block-${block.id}`);
-		const hoverArea = obj.find('.hoverArea');
-
-		v ? hoverArea.addClass('active') : hoverArea.removeClass('active');
+		$(`#block-${this.props.block.id} .hoverArea`).toggleClass('active', v);
 	};
 
 	resize () {

diff --git a/src/ts/component/block/dataview/head.tsx b/src/ts/component/block/dataview/head.tsx
@@ -314,12 +314,9 @@ const Head = observer(class Head extends React.Component<I.ViewComponent, State>
 	};
 
 	checkInput (isEmpty: boolean) {
-		if (!this.ref) {
-			return;
+		if (this.ref) {
+			$(this.ref.node).toggleClass('isEmpty', isEmpty)
 		};
-
-		const node = $(this.ref.node);
-		isEmpty ? node.addClass('isEmpty') : node.removeClass('isEmpty');
 	};
 
 	save () {

diff --git a/src/ts/component/block/dataview/view/grid.tsx b/src/ts/component/block/dataview/view/grid.tsx
@@ -276,7 +276,7 @@ const ViewGrid = observer(class ViewGrid extends React.Component<I.ViewComponent
 			const width = widths[it.relationKey];
 			const el = node.find(`#${Relation.cellId('head', it.relationKey, '')}`);
 
-			width <= size.icon ? el.addClass('small') : el.removeClass('small');
+			el.toggleClass('small', width <= size.icon);
 		});
 
 		node.find('.rowHead').css({ gridTemplateColumns: str });

diff --git a/src/ts/component/block/link.tsx b/src/ts/component/block/link.tsx
@@ -326,11 +326,9 @@ const BlockLink = observer(class BlockLink extends React.Component<I.BlockCompon
 			const { getWrapperWidth } = this.props;
 			const node = $(this.node);
 			const card = node.find('.linkCard');
-			const icon = node.find('.iconObject');
-			const mw = getWrapperWidth();
 
-			icon.length ? card.addClass('withIcon') : card.removeClass('withIcon');
-			node.width() <= mw / 2 ? card.addClass('isVertical') : card.removeClass('isVertical');
+			card.toggleClass('withIcon', !!node.find('.iconObject').length);
+			card.toggleClass('isVertical', node.width() <= getWrapperWidth() / 2);
 		});
 	};
 

diff --git a/src/ts/component/block/table.tsx b/src/ts/component/block/table.tsx
@@ -1543,7 +1543,7 @@ const BlockTable = observer(class BlockTable extends React.Component<I.BlockComp
 			maxWidth = container.width() - PADDING;
 			wrapperWidth = getWrapperWidth() + J.Size.blockMenu;
 
-			width > maxWidth ? wrap.addClass('withScroll') : wrap.removeClass('withScroll');
+			wrap.toggleClass('withScroll', width > maxWidth);
 			width = Math.max(wrapperWidth, Math.min(maxWidth, width));
 
 			obj.css({
@@ -1556,7 +1556,7 @@ const BlockTable = observer(class BlockTable extends React.Component<I.BlockComp
 				maxWidth = parentObj.width() - J.Size.blockMenu;
 			};
 
-			width > maxWidth ? wrap.addClass('withScroll') : wrap.removeClass('withScroll');
+			wrap.toggleClass('withScroll', width > maxWidth);
 		};
 	};
 

diff --git a/src/ts/component/form/button.tsx b/src/ts/component/form/button.tsx
@@ -88,10 +88,7 @@ const Button = forwardRef<ButtonRef, ButtonProps>(({
 
 	useImperativeHandle(ref, () => ({
 		setLoading: (v: boolean) => setIsLoading(v),
-		setDisabled: (v: boolean) => {
-			const node = $(nodeRef.current);
-			v ? node.addClass('disabled') : node.removeClass('disabled');
-		},
+		setDisabled: (v: boolean) => $(nodeRef.current).toggleClass('disabled', v),
 		isDisabled: () => $(nodeRef.current).hasClass('disabled'),
 		isLoading: () => isLoading,
 	}));

diff --git a/src/ts/component/form/filter.tsx b/src/ts/component/form/filter.tsx
@@ -252,9 +252,7 @@ class Filter extends React.Component<Props, State> {
 	};
 
 	checkButton () {
-		const node = $(this.node);
-
-		this.getValue() ? node.addClass('active') : node.removeClass('active');
+		$(this.node).toggleClass('active', this.getValue());
 		this.placeholderCheck();
 	};
 

diff --git a/src/ts/component/form/input.tsx b/src/ts/component/form/input.tsx
@@ -119,10 +119,7 @@ const Input = forwardRef<InputRef, Props>((props, ref) => {
 		setValue: (v: string) => setValue(String(v || '')),
 		getValue: () => String(value || ''),
 		setType: (v: string) => setInputType(v),
-		setError: (hasError: boolean) => {
-			const node = $(inputRef.current);
-			hasError ? node.addClass('withError') : node.removeClass('withError');
-		},
+		setError: (hasError: boolean) => $(inputRef.current).toggleClass('withError', hasError),
 		getSelectionRect,
 		setPlaceholder: (placeholder: string) => $(inputRef.current).attr({ placeholder }),
 		setRange: (range: I.TextRange) => {

diff --git a/src/ts/component/form/switch.tsx b/src/ts/component/form/switch.tsx
@@ -72,10 +72,8 @@ class Switch extends React.Component<Props> {
 	};
 
 	setValue (value: boolean) {
-		const node = $(this.node);
-
 		this.value = value;
-		value ? node.addClass('active') : node.removeClass('active');
+		$(this.node).toggleClass('active', value);
 	};
 
 	getValue () {

diff --git a/src/ts/component/form/textarea.tsx b/src/ts/component/form/textarea.tsx
@@ -183,7 +183,7 @@ class Textarea extends React.Component<Props, State> {
 	};
 
 	setError (v: boolean) {
-		v ? this.addClass('withError') : this.removeClass('withError');
+		$(this.node).toggleClass('withError', v);
 	};
 
 	addClass (v: string) {

diff --git a/src/ts/component/list/popup.tsx b/src/ts/component/list/popup.tsx
@@ -19,10 +19,7 @@ const ListPopup = observer(class ListPopup extends React.Component<I.PageCompone
 	};
 
 	componentDidUpdate () {
-		const { list } = S.Popup;
-		const body = $('body');
-
-		list.length > 0 ? body.addClass('overPopup') : body.removeClass('overPopup');
+		$('body').toggleClass('overPopup', S.Popup.list.length > 0);
 	};
 
 });

diff --git a/src/ts/component/list/previewObject.tsx b/src/ts/component/list/previewObject.tsx
@@ -256,8 +256,8 @@ class ListObjectPreview extends React.Component<Props> {
 		const isFirst = this.page == 0;
 		const isLast = this.page == this.getMaxPage();
 
-		isFirst ? arrowLeft.addClass('dn') : arrowRight.removeClass('dn');
-		isLast ? arrowRight.addClass('dn') : arrowRight.removeClass('dn');
+		arrowLeft.toggleClass('dn', isFirst);
+		arrowRight.toggleClass('dn', isLast);
 	};
 
 };

diff --git a/src/ts/component/menu/block/add.tsx b/src/ts/component/menu/block/add.tsx
@@ -246,10 +246,10 @@ const MenuBlockAdd = observer(class MenuBlockAdd extends React.Component<I.Menu>
 	};
 
 	checkFilter () {
+		const { getId } = this.props;
 		const { filter } = S.Common;
-		const obj = $('#menuBlockAdd');
-
-		filter ? obj.addClass('withFilter') : obj.removeClass('withFilter');
+
+		$(`#${getId()}`).toggleClass('withFilter', !!filter);
 	};
 
 	rebind () {

diff --git a/src/ts/component/menu/dataview/filter/values.tsx b/src/ts/component/menu/dataview/filter/values.tsx
@@ -728,14 +728,9 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 	};
 
 	checkClear (v: any) {
-		if (!this._isMounted) {
-			return;
+		if (this._isMounted) {
+			$(this.node).find('.icon.clear').toggleClass('active', v);
 		};
-
-		const node = $(this.node);
-		const clear = node.find('.icon.clear');
-
-		v ? clear.addClass('active') : clear.removeClass('active');
 	};
 
 	onClear (e: any) {

diff --git a/src/ts/component/menu/item/vertical.tsx b/src/ts/component/menu/item/vertical.tsx
@@ -181,12 +181,9 @@ class MenuItemVertical extends React.Component<I.MenuItem> {
 	resize () {
 		const node = $(this.node);
 
-		if (node.hasClass('withIcon')) {
-			return;
+		if (!node.hasClass('withIcon')) {
+			node.toggleClass('withIconObject', !!node.find('.iconObject').length);
 		};
-
-		const icon = node.find('.iconObject');
-		icon.length ? node.addClass('withIconObject') : node.removeClass('withIconObject');
 	};
 
 };

diff --git a/src/ts/component/menu/quickCapture.tsx b/src/ts/component/menu/quickCapture.tsx
@@ -673,7 +673,7 @@ class MenuQuickCapture extends React.Component<I.Menu, State> {
 
 		obj.find('.item').each((i: number, item: any) => {
 			item = $(item);
-			item.find('.iconObject').length ? item.addClass('withIcon') : item.removeClass('withIcon');
+			item.toggleClass('withIcon', !!item.find('.iconObject').length);
 		});
 
 		obj.css({ width: Math.min(ww - J.Size.menuBorder * 2 - sw, Math.ceil(obj.outerWidth())) });

diff --git a/src/ts/component/menu/search/text.tsx b/src/ts/component/menu/search/text.tsx
@@ -195,7 +195,8 @@ class MenuSearchText extends React.Component<I.Menu> {
 		});
 
 		this.items = this.container.get(0).querySelectorAll(tag) || [];
-		this.items.length ? switcher.addClass('active') : switcher.removeClass('active');
+
+		switcher.toggleClass('active', !!this.items.length);
 
 		this.setCnt();
 		this.focus();

diff --git a/src/ts/component/menu/select.tsx b/src/ts/component/menu/select.tsx
@@ -449,10 +449,10 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> {
 			content.css({ height });
 		};
 
-		withFilter ? obj.addClass('withFilter') : obj.removeClass('withFilter');
-		withAdd ? obj.addClass('withAdd') : obj.removeClass('withAdd');
-		noScroll ? obj.addClass('noScroll') : obj.removeClass('noScroll');
-		noVirtualisation ? obj.addClass('noVirtualisation') : obj.removeClass('noVirtualisation');
+		obj.toggleClass('withFilter', withFilter);
+		obj.toggleClass('withAdd', withAdd);
+		obj.toggleClass('noScroll', noScroll);
+		obj.toggleClass('noVirtualisation', noVirtualisation);
 
 		position();
 	};

diff --git a/src/ts/component/page/elements/head/controlButtons.tsx b/src/ts/component/page/elements/head/controlButtons.tsx
@@ -215,9 +215,7 @@ const ControlButtons = observer(class ControlButtons extends React.Component<Pro
 
 	resize () {
 		const { ww } = U.Common.getWindowDimensions();
-		const node = $(this.node);
-
-		ww <= 900 ? node.addClass('small') : node.removeClass('small');
+		$(this.node).toggleClass('small', ww <= 900);
 	};
 
 });

diff --git a/src/ts/component/page/main/chat.tsx b/src/ts/component/page/main/chat.tsx
@@ -277,9 +277,7 @@ const PageMainChat = observer(class PageMainChat extends React.Component<I.PageC
 			const head = node.find('.headSimple');
 
 			if (cover.length) {
-				cover.css({ top: headerHeight });
-
-				cover.width() <= J.Size.editor ? cover.addClass('isFull') : cover.removeClass('isFull');
+				cover.css({ top: headerHeight }).toggleClass('isFull', cover.width() <= J.Size.editor);
 			};
 
 			const fh = Number(formWrapper.outerHeight(true)) || 0;

diff --git a/src/ts/component/popup/page/usecase/item.tsx b/src/ts/component/popup/page/usecase/item.tsx
@@ -131,8 +131,8 @@ class PopupUsecasePageItem extends React.Component<I.PopupUsecase, State> {
 		const idx = this.swiper.activeIndex;
 		const length = (this.swiper.slides || []).length;
 
-		!idx ? arrowLeft.addClass('hide') : arrowLeft.removeClass('hide');
-		idx >= length - 1 ? arrowRight.addClass('hide') : arrowRight.removeClass('hide');
+		arrowLeft.toggleClass('hide', !idx);
+		arrowRight.toggleClass('hide', idx >= length - 1);
 	};
 
 	onMenu () {

diff --git a/src/ts/component/preview/link.tsx b/src/ts/component/preview/link.tsx
@@ -59,9 +59,8 @@ const PreviewLink = observer(class PreviewLink extends React.Component<Props, St
 	componentDidUpdate () {
 		const { position } = this.props;
 		const { imageUrl } = this.state;
-		const node = $(this.node);
 
-		imageUrl ? node.addClass('withImage') : node.removeClass('withImage');
+		$(this.node).toggleClass('withImage', !!imageUrl);
 
 		this.load();
 

diff --git a/src/ts/component/preview/object.tsx b/src/ts/component/preview/object.tsx
@@ -480,10 +480,9 @@ const PreviewObject = observer(class PreviewObject extends React.Component<Props
 	};
 
 	setActive (v: boolean) {
-		const node = $(this.node);
-
-		v ? node.addClass('active') : node.removeClass('active');
+		$(this.node).toggleClass('active', v);
 	};
+
 });
 
-export default PreviewObject;
+export default PreviewObject;
diff --git a/src/ts/component/selection/provider.tsx b/src/ts/component/selection/provider.tsx
@@ -142,8 +142,7 @@ const SelectionProvider = observer(class SelectionProvider extends React.Compone
 		const win = $(window);
 		const container = U.Common.getScrollContainer(isPopup);
 
-		isPopup ? this.rect.addClass('fromPopup') : this.rect.removeClass('fromPopup');
-
+		this.rect.toggleClass('fromPopup', isPopup);
 		this.rootId = keyboard.getRootId();
 		this.isPopup = isPopup;
 		this.x = e.pageX;
@@ -626,9 +625,7 @@ const SelectionProvider = observer(class SelectionProvider extends React.Compone
 
 	setIsSelecting (v: boolean) {
 		this.isSelecting = v;
-
-		const html = $('html');
-		v ? html.addClass('isSelecting') : html.removeClass('isSelecting');
+		$('html').toggleClass('isSelecting', v);
 	};
 
 });

diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx
@@ -1081,8 +1081,8 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S
 		const max = this.getMaxWidth();
 		const sw = scroll.width();
 
-		this.x <= 0 ? sideLeft.addClass('hide') : sideLeft.removeClass('hide');
-		this.x >= max - sw - 1 ? sideRight.addClass('hide') : sideRight.removeClass('hide');
+		sideLeft.toggleClass('hide', this.x <= 0);
+		sideRight.toggleClass('hide', this.x >= max - sw - 1);
 	};
 
 	getMaxWidth () {

diff --git a/src/ts/component/sidebar/object/item.tsx b/src/ts/component/sidebar/object/item.tsx
@@ -110,8 +110,8 @@ const ObjectItem = observer(class ObjectItem extends React.Component<Props> {
 	resize () {
 		const node = $(this.node);
 
-		node.find('.iconObject').length ? node.addClass('withIcon') : node.removeClass('withIcon');
-		node.find('.descr').length ? node.addClass('withDescr') : node.removeClass('withDescr');
+		node.toggleClass('withIcon', !!node.find('.iconObject').length);
+		node.toggleClass('withDescr', !!node.find('.descr').length);
 	};
 
 });

diff --git a/src/ts/component/widget/index.tsx b/src/ts/component/widget/index.tsx
@@ -488,8 +488,9 @@ const WidgetIndex = observer(class WidgetIndex extends React.Component<Props> {
 		const isClosed = Storage.checkToggle('widget', block.id);
 
 		if (!isPreview) {
-			isClosed ? node.addClass('isClosed') : node.removeClass('isClosed');
-			isClosed ? icon.addClass('isClosed') : node.removeClass('isClosed');
+			node.toggleClass('isClosed', isClosed);
+			icon.toggleClass('isClosed', isClosed);
+
 			isClosed ? innerWrap.hide() : innerWrap.show();
 		};
 	};

diff --git a/src/ts/component/widget/space.tsx b/src/ts/component/widget/space.tsx
@@ -70,11 +70,10 @@ const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetC
 		const participants = U.Space.getParticipantsList([ I.ParticipantStatus.Active, I.ParticipantStatus.Joining, I.ParticipantStatus.Removing ]);
 		const requestCnt = participants.filter(it => it.isJoining || it.isRemoving).length;
 		const isSpaceOwner = U.Space.isMyOwner();
-		const showCnt = isSpaceOwner && requestCnt;
+		const showCnt = isSpaceOwner && !!requestCnt;
 
 		showCnt ? cnt.show() : cnt.hide();
-		showCnt ? node.addClass('withCnt') : node.removeClass('withCnt');
-
+		node.toggleClass('withCnt', showCnt);
 		cnt.text(requestCnt);
 	};
 

diff --git a/src/ts/component/widget/view/gallery/item.tsx b/src/ts/component/widget/view/gallery/item.tsx
@@ -166,9 +166,8 @@ const WidgetBoardItem = observer(class WidgetBoardItem extends React.Component<P
 
 		this.frame = raf(() => {
 			const node = $(this.node);
-			const icon = node.find('.iconObject');
 
-			icon.length ? node.addClass('withIcon') : node.removeClass('withIcon');
+			node.toggleClass('withIcon', !!node.find('.iconObject').length);
 		});
 	};