Best JavaScript code snippet using best
useSelectedItems.ts
Source:useSelectedItems.ts
...118 return false;119 }120 }, [items.length, selection]);121 const getSelectedItems = React.useCallback((): T[] => {122 if (hasSelectedItems()) {123 return selection.getSelection() as T[];124 } else {125 return [];126 }127 }, [hasSelectedItems, selection]);128 const getSelectedIndices = React.useCallback((): number[] => {129 if (hasSelectedItems()) {130 return selection.getSelectedIndices();131 } else {132 return [];133 }134 }, [hasSelectedItems, selection]);135 const removeSelectedItems = React.useCallback((): void => {136 removeItems(getSelectedItems(), getSelectedIndices());137 }, [getSelectedItems, removeItems, getSelectedIndices]);138 const unselectAll = React.useCallback((): void => {139 if (hasSelectedItems()) {140 selection.setAllSelected(false);141 }142 }, [hasSelectedItems, selection]);143 const selectAll = React.useCallback((): void => {144 selection.setAllSelected(true);145 }, [selection]);146 return {147 selectedItems: items,148 setSelectedItems: setSelectedItems,149 addItems: addItems,150 dropItemsAt: dropItemsAt,151 removeItemAt: removeItemAt,152 removeItem: removeItem,153 replaceItem: replaceItem,...
SelectItem.jsx
Source:SelectItem.jsx
1import React from 'react';2import PropTypes from 'prop-types';3import { Checkmark } from '../../Icon';4import Tooltip from '../../Tooltip';5import {6 SelectItemStyled,7 SelectItemLabel,8 SelectItemIcon,9 SelectItemTitle,10 SelectItemCustom,11 IconWrapper,12 HotKeyPrompt,13 Title,14} from './style';15const shouldItemMoveRight = (item, hasSelectedItems, hideSearch) =>16 // if the item isn't selected, we need to check if other items are selected in the dropdown or if it has a search bar17 !item.selected &&18 (hasSelectedItems || !hideSearch) &&19 // if it's not selected and it has a custom component, we shouldn't move the item20 !(item.component && !hasSelectedItems);21const SelectItemTooltipWrapper = (props) => {22 const { item, keyMap } = props;23 const tooltip = item[keyMap ? keyMap.tooltip : 'tooltip']24 return (25 <>26 {tooltip ? (27 <Tooltip label={tooltip} position="bottom">28 <SelectItem {...props} />29 </Tooltip>30 ) : (31 <SelectItem {...props} />32 )}33 </>34 )35};36const SelectItem = ({37 item,38 onClick,39 hovered,40 keyMap,41 hasSelectedItems,42 getItemId,43 hideSearch,44 capitalizeItemLabel,45 onItemClick,46}) => {47 const tooltip = item[keyMap ? keyMap.tooltip : 'tooltip']48 let title = item[keyMap ? keyMap.title : 'title'];;49 if (tooltip) title = null;50 return (51 <SelectItemStyled52 onClick={onItemClick || onClick}53 hovered={hovered}54 id={getItemId(item)}55 disabled={item.disabled}56 >57 <SelectItemLabel58 capitalizeItemLabel={capitalizeItemLabel}59 hideSearch={hideSearch}60 hasSelectedItems={hasSelectedItems}61 hasComponent={item.component}62 >63 {item.selected && (64 <IconWrapper>65 <Checkmark color="grayDarker" />66 </IconWrapper>67 )}68 {!item.iconEnd && item.icon && (69 <SelectItemIcon iconEnd={item.iconEnd} hovered={hovered}>{item.icon}</SelectItemIcon>70 )}71 <SelectItemTitle72 moveRight={shouldItemMoveRight(item, hasSelectedItems, hideSearch)}73 title={title}74 >75 {item.component && (76 <IconWrapper custom>77 <SelectItemCustom78 dangerouslySetInnerHTML={{ __html: item.component(item) }}79 />80 </IconWrapper>81 )}82 <Title>{item[keyMap ? keyMap.title : 'title']}</Title>83 </SelectItemTitle>84 {item.iconEnd && item.icon && (85 <SelectItemIcon iconEnd={item.iconEnd} hovered={hovered}>{item.icon}</SelectItemIcon>86 )}87 {item.hotKeyPrompt && (88 <HotKeyPrompt hovered={hovered}>{item.hotKeyPrompt}</HotKeyPrompt>89 )}90 </SelectItemLabel>91 </SelectItemStyled>92 )93};94SelectItem.propTypes = {95 /** Item to render */96 item: PropTypes.shape({97 id: PropTypes.string,98 title: PropTypes.string,99 onItemClick: PropTypes.func,100 selected: PropTypes.bool,101 icon: PropTypes.node,102 iconEnd: PropTypes.bool,103 component: PropTypes.func,104 tooltip: PropTypes.string,105 }).isRequired,106 /** On click function */107 onClick: PropTypes.func.isRequired,108 /** On click function */109 onItemClick: PropTypes.func.isRequired,110 /** Get the id of the item */111 getItemId: PropTypes.func.isRequired,112 /** Is the item selected */113 hovered: PropTypes.bool,114 /** Should capitalize Item Label */115 capitalizeItemLabel: PropTypes.bool,116 /** Custom keys to used in the Items array */117 keyMap: PropTypes.shape({118 id: PropTypes.string,119 title: PropTypes.string,120 }),121 /** Does the Select have selected items to adjust the margin */122 hasSelectedItems: PropTypes.bool,123 /** Does the Select have a search bar incorporated */124 hideSearch: PropTypes.bool,125 /** Is it a multi select */126 multiSelect: PropTypes.bool,127};128SelectItem.defaultProps = {129 hovered: undefined,130 keyMap: undefined,131 hasSelectedItems: undefined,132 hideSearch: undefined,133 multiSelect: undefined,134 capitalizeItemLabel: true,135};...
Using AI Code Generation
1var BestBuySearchResultPage = require('bestBuySearchResultPage.js');2var bestBuySearchResultPage = new BestBuySearchResultPage();3if (bestBuySearchResultPage.hasSelectedItems()) {4 console.log('The search result page has selected items');5} else {6 console.log('The search result page has no selected items');7}8var BestBuySearchResultPage = function() {9 this.hasSelectedItems = function() {10 var selectedItems = document.querySelectorAll('div[data-selected="true"]');11 return selectedItems.length > 0;12 };13};14module.exports = BestBuySearchResultPage;15var BestBuySearchResultPage = require('bestBuySearchResultPage.js');16var bestBuySearchResultPage = new BestBuySearchResultPage();17if (bestBuySearchResultPage.hasSelectedItems()) {18 console.log('The search result page has selected items');19} else {20 console.log('The search result page has no selected items');21}22var BestBuySearchResultPage = require('bestBuySearchResultPage.js');23var BestBuySearchResultPageWithSelectedItems = function() {24 BestBuySearchResultPage.call(this);25 this.hasSelectedItems = function() {26 var selectedItems = document.querySelectorAll('div[data-selected="true"]');27 return selectedItems.length > 0;28 };29};30module.exports = BestBuySearchResultPageWithSelectedItems;31var BestBuySearchResultPageWithSelectedItems = require('bestBuySearchResultPageWithSelectedItems.js');
Using AI Code Generation
1var BestBuy = require('./BestBuy.js');2var bestBuy = new BestBuy();3bestBuy.hasSelectedItems();4var BestBuy = function() {5 this.hasSelectedItems = function() {6 console.log('hasSelectedItems method of BestBuy class');7 }8}9module.exports = BestBuy;
Using AI Code Generation
1var bestBuy = require('./bestBuy.js');2var myBestBuy = new bestBuy();3var items = ['item1', 'item2', 'item3'];4myBestBuy.selectItems(items);5if(myBestBuy.hasSelectedItems()) {6 console.log('The BestBuy has selected items');7} else {8 console.log('The BestBuy does not have selected items');9}10function BestBuy() {11 this.selectedItems = [];12}13BestBuy.prototype.selectItems = function(items) {14 this.selectedItems = items;15};16BestBuy.prototype.hasSelectedItems = function() {17 return this.selectedItems.length > 0;18};19module.exports = BestBuy;
Using AI Code Generation
1var selectedItems = 0;2var selectedItemsDisplay = document.getElementById("selectedItems");3selectedItemsDisplay.innerHTML = selectedItems;4var items = document.getElementsByClassName("item");5for (var i = 0; i < items.length; i++) {6 items[i].addEventListener("click", function () {7 if (this.classList.contains("selected")) {8 this.classList.remove("selected");9 selectedItems--;10 } else {11 this.classList.add("selected");12 selectedItems++;13 }14 selectedItemsDisplay.innerHTML = selectedItems;15 });16}17var selectedItems = 0;18var selectedItemsDisplay = document.getElementById("selectedItems");19selectedItemsDisplay.innerHTML = selectedItems;20var items = document.getElementsByClassName("item");21for (var i = 0; i < items.length; i++) {22 items[i].addEventListener("click", function () {23 if (this.classList.contains("selected")) {24 this.classList.remove("selected");25 selectedItems--;26 } else {27 this.classList.add("selected");28 selectedItems++;29 }30 selectedItemsDisplay.innerHTML = selectedItems;31 });32}33var selectedItems = 0;34var selectedItemsDisplay = document.getElementById("selectedItems");35selectedItemsDisplay.innerHTML = selectedItems;36var items = document.getElementsByClassName("item");37for (var i = 0; i < items.length; i++) {38 items[i].addEventListener("click", function () {39 if (this.classList.contains("selected")) {40 this.classList.remove("selected");41 selectedItems--;42 } else {43 this.classList.add("selected");44 selectedItems++;45 }46 selectedItemsDisplay.innerHTML = selectedItems;47 });48}49var selectedItems = 0;
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!