How to use setChecked method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

csvexportpanel.js

Source: csvexportpanel.js Github

copy
1/* global lumberjack,alertify */
2enyo.kind({
3	name: "lumberjack.CSVExportPanel",
4	kind: "enyo.Scroller",
5	fit: true,
6
7	style: "padding: 15px;",
8
9	published: {
10		subscriptionCollection: null,
11		checkBoxArray: null,
12		checkBoxArrayCountries: null,
13		countryCheckboxNames: null,
14		presetMenuSelection: null
15	},
16
17	events: {
18		onRequestGenerateCSVFile: "",
19		onGoHome: ""
20	},
21
22	components: [
23		{kind: "enyo.FittableColumns", style: "padding-bottom: 5px; border-bottom: 1px solid black;", components: [
24			{style: "font-size: 24px;", content: "Select Subscription Statuses"}
25		]},
26		{kind: "enyo.FittableColumns", style: "padding-top: 5px;" , components: [
27			{kind: "enyo.FittableRows", classes: "csvCheckbox", components: [
28				{kind:"lumberjack.Checkbox", name:"allStatusesCheckbox", content:"All Statuses", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "allCheckSubscription"},
29				{kind:"lumberjack.Checkbox", name:"allExceptCancelledStatusesCheckbox", content:"All Non-Cancelled Statuses", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "allNonCancelledCheck"}
30			]},
31			{kind: "enyo.FittableColumns", style: "margin-left: 15px; padding: 0 10px 10px 10px;; border: 1px solid black; max-width: 1000px;" , components: [
32				{components: [
33					{kind:"lumberjack.Checkbox", name:"incompleteDocsNoFundsCheckbox", content:"Incomplete Docs, No Funds", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
34					{kind:"lumberjack.Checkbox", name:"incompleteDocsPartialFundsCheckbox", content:"Incomplete Docs, Partial Funds", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
35					{kind:"lumberjack.Checkbox", name:"incompleteDocsAllFundsCheckbox", content:"Incomplete Docs, All Funds", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
36					{kind:"lumberjack.Checkbox", name:"completeDocsNoFundsCheckbox", content:"Complete Docs, No Funds", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"}
37				]},
38				{style: "margin-left: 20px;", components: [
39					{kind:"lumberjack.Checkbox", name:"completeDocsPartialFundsCheckbox", content:"Complete Docs, Partial Funds", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
40					{kind:"lumberjack.Checkbox", name:"completeCheckbox", content:"Complete", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
41					{kind:"lumberjack.Checkbox", name:"pendingCancellationCheckbox", content:"Pending Cancellation", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"}
42				]},
43				{style: "margin-left: 20px;", components: [
44					{kind:"lumberjack.Checkbox", name:"cancelledCheckbox", content:"Cancelled", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
45					{kind:"lumberjack.Checkbox", name:"closedCheckbox", content:"Closed", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"},
46					{kind:"lumberjack.Checkbox", name:"newCheckbox", content:"New", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange: "checkBoxesForSubscription"}
47				]}
48			]}
49		]},
50		{style: "font-size: 24px; padding-bottom: 5px; border-bottom: 1px solid black; margin-top: 10px", content: "Select Countries"},
51		{kind: "enyo.FittableColumns", style: "padding-top: 5px;", components: [
52			{kind: "enyo.FittableRows", classes: "csvCheckbox", components: [
53				{kind:"lumberjack.Checkbox", name:"allCountriesCheckbox", content:"All Countries", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange:"allCheckCountries"},
54				{kind:"lumberjack.Checkbox", name:"allNonUSorCanadaCheckbox", content:"All Non US/Canada", columnStyle:"margin-top: 10px;", contentStyle:"margin-left:10px;", onchange:"nonCanUSACheckCountries"}
55			]},
56			{style: "margin-left: 15px; padding: 0 10px 10px 0; border: 1px solid black; max-width: 1000px;", components: [
57				{name: "newBoxesCountry", kind: "lumberjack.CountryCheckboxes", onAllCountriesChecked: "allCheckCountries", onAllNonUSorCanadaChecked: "nonCanUSACheckCountries", onNeitherChecked: "handleNeitherChecked"}
58			]}
59		]},
60		{kind: "enyo.FittableColumns", style: "margin-top: 10px;", components: [
61			{kind: "lumberjack.Button", enabledClasses: "button primary", style: "line-height: 30px; margin-top: 10px", content: "Generate CSV", ontap: "checkedBoxes"}
62		]}
63	],
64
65	bindings: [
66		{from: ".subscriptionCollection", to: ".$.newBoxesCountry.subscriptionCollection"},
67		{from: ".$.newBoxesCountry.countriesArray", to: ".countryCheckboxNames"}
68	],
69
70	activate: function()
71	{
72		if (!lumberjack.hasRole(["admins"], "placement")) { this.doGoHome(); return; }
73
74		if (this.get("subscriptionCollection")) {
75			this.$.newBoxesCountry.set("countriesArray", this.get("subscriptionCollection").getSubscriberCountries());
76			this.$.newBoxesCountry.render();
77		}
78
79		this.uncheckAllBoxes();
80	},
81
82	uncheckAllBoxes: function()
83	{
84		this.$.allNonUSorCanadaCheckbox.setDisabled(false);
85		this.$.allNonUSorCanadaCheckbox.setChecked(false);
86		this.$.allCountriesCheckbox.setDisabled(false);
87		this.$.allCountriesCheckbox.setChecked(false);
88		this.get("countryCheckboxNames").forEach(enyo.bind(this, function(value, index, array) {
89		    this.$.newBoxesCountry.setCountryCheckbox(value, false);
90		}));
91
92		this.$.incompleteDocsNoFundsCheckbox.setChecked(false);
93		this.$.incompleteDocsPartialFundsCheckbox.setChecked(false);
94		this.$.incompleteDocsAllFundsCheckbox.setChecked(false);
95		this.$.completeDocsNoFundsCheckbox.setChecked(false);
96		this.$.completeDocsPartialFundsCheckbox.setChecked(false);
97		this.$.completeCheckbox.setChecked(false);
98		this.$.pendingCancellationCheckbox.setChecked(false);
99		this.$.cancelledCheckbox.setChecked(false);
100		this.$.closedCheckbox.setChecked(false);
101		this.$.newCheckbox.setChecked(false);
102		this.$.allStatusesCheckbox.setChecked(false);
103		this.$.allStatusesCheckbox.setDisabled(false);
104		this.$.allExceptCancelledStatusesCheckbox.setChecked(false);
105		this.$.allExceptCancelledStatusesCheckbox.setDisabled(false);
106	},
107
108	checkBoxesForSubscription: function(inSender, inEvent)
109	{
110		// If all boxes are checked
111		if (
112			this.$.incompleteDocsNoFundsCheckbox.getValue() === true &&
113			this.$.incompleteDocsPartialFundsCheckbox.getValue() === true &&
114			this.$.incompleteDocsAllFundsCheckbox.getValue() === true &&
115			this.$.completeDocsNoFundsCheckbox.getValue() === true &&
116			this.$.completeDocsPartialFundsCheckbox.getValue() === true &&
117			this.$.completeCheckbox.getValue() === true &&
118			this.$.pendingCancellationCheckbox.getValue() === true &&
119			this.$.cancelledCheckbox.getValue() === true &&
120			this.$.closedCheckbox.getValue() === true &&
121			this.$.newCheckbox.getValue() === true)
122		{
123			this.$.allStatusesCheckbox.setChecked(true);
124			this.$.allStatusesCheckbox.setDisabled(true);
125			this.$.allExceptCancelledStatusesCheckbox.setDisabled(false);
126			this.$.allExceptCancelledStatusesCheckbox.setChecked(false);
127		}
128		// If all boxes except cancelled and pendingCancellation are checked
129		else if (
130			this.$.incompleteDocsNoFundsCheckbox.getValue() === true &&
131			this.$.incompleteDocsPartialFundsCheckbox.getValue() === true &&
132			this.$.incompleteDocsAllFundsCheckbox.getValue() === true &&
133			this.$.completeDocsNoFundsCheckbox.getValue() === true &&
134			this.$.completeDocsPartialFundsCheckbox.getValue() === true &&
135			this.$.completeCheckbox.getValue() === true &&
136			this.$.closedCheckbox.getValue() === true &&
137			this.$.newCheckbox.getValue() === true)
138		{
139			this.$.allExceptCancelledStatusesCheckbox.setDisabled(true);
140			this.$.allExceptCancelledStatusesCheckbox.setChecked(true);
141			this.$.allStatusesCheckbox.setDisabled(false);
142			this.$.allStatusesCheckbox.setChecked(false);
143		}
144		else
145		{
146			this.$.allStatusesCheckbox.setChecked(false);
147			this.$.allStatusesCheckbox.setDisabled(false);
148			this.$.allExceptCancelledStatusesCheckbox.setDisabled(false);
149			this.$.allExceptCancelledStatusesCheckbox.setChecked(false);
150		}
151	},
152
153	allCheckSubscription: function(inSender, inEvent)
154	{
155
156		this.$.incompleteDocsNoFundsCheckbox.setChecked(true);
157		this.$.incompleteDocsPartialFundsCheckbox.setChecked(true);
158		this.$.incompleteDocsAllFundsCheckbox.setChecked(true);
159		this.$.completeDocsNoFundsCheckbox.setChecked(true);
160		this.$.completeDocsPartialFundsCheckbox.setChecked(true);
161		this.$.completeCheckbox.setChecked(true);
162		this.$.pendingCancellationCheckbox.setChecked(true);
163		this.$.cancelledCheckbox.setChecked(true);
164		this.$.closedCheckbox.setChecked(true);
165		this.$.newCheckbox.setChecked(true);
166		this.$.allStatusesCheckbox.setDisabled(true);
167		this.$.allExceptCancelledStatusesCheckbox.setDisabled(false);
168		this.$.allExceptCancelledStatusesCheckbox.setChecked(false);
169	},
170
171	allNonCancelledCheck: function(inSender, inEvent)
172	{
173		this.$.incompleteDocsNoFundsCheckbox.setChecked(true);
174		this.$.incompleteDocsPartialFundsCheckbox.setChecked(true);
175		this.$.incompleteDocsAllFundsCheckbox.setChecked(true);
176		this.$.completeDocsNoFundsCheckbox.setChecked(true);
177		this.$.completeDocsPartialFundsCheckbox.setChecked(true);
178		this.$.completeCheckbox.setChecked(true);
179		this.$.pendingCancellationCheckbox.setChecked(false);
180		this.$.cancelledCheckbox.setChecked(false);
181		this.$.closedCheckbox.setChecked(true);
182		this.$.newCheckbox.setChecked(true);
183		this.$.allExceptCancelledStatusesCheckbox.setDisabled(true);
184		this.$.allStatusesCheckbox.setDisabled(false);
185		this.$.allStatusesCheckbox.setChecked(false);
186	},
187
188	allCheckCountries: function(inSender, inEvent)
189	{
190		this.get("countryCheckboxNames").forEach(enyo.bind(this, function(value, index, array) {
191		    this.$.newBoxesCountry.setCountryCheckbox(value, true);
192		}));
193
194	    this.$.allNonUSorCanadaCheckbox.setDisabled(false);
195	    this.$.allNonUSorCanadaCheckbox.setChecked(false);
196	    this.$.allCountriesCheckbox.setDisabled(true);
197	    this.$.allCountriesCheckbox.setChecked(true);
198	},
199
200	nonCanUSACheckCountries: function(inSender, inEvent)
201	{
202		this.get("countryCheckboxNames").forEach(enyo.bind(this, function(value, index, array) {
203		    if (value === "USA" || value === "CAN")
204		    {
205		    	this.$.newBoxesCountry.setCountryCheckbox(value, false);
206		    }
207		    else
208		    {
209		    	this.$.newBoxesCountry.setCountryCheckbox(value, true);
210		    }
211		}));
212
213	    this.$.allCountriesCheckbox.setDisabled(false);
214	    this.$.allCountriesCheckbox.setChecked(false);
215	    this.$.allNonUSorCanadaCheckbox.setDisabled(true);
216	    this.$.allNonUSorCanadaCheckbox.setChecked(true);
217	},
218
219	handleNeitherChecked: function(inSender, inEvent)
220	{
221		this.$.allCountriesCheckbox.setDisabled(false);
222		this.$.allCountriesCheckbox.setChecked(false);
223		this.$.allNonUSorCanadaCheckbox.setDisabled(false);
224		this.$.allNonUSorCanadaCheckbox.setChecked(false);
225	},
226
227	handleGenerateFromCheckBoxesCSVFile: function(inSender, inEvent)
228	{
229		var filteredCollection = this.get("subscriptionCollection");
230		var outputForCSV = [];
231		if (this.get("checkBoxArrayCountries").length < 1) { alertify.error("You must select at least one country"); return; }
232		if (this.get("checkBoxArray").length < 1) { alertify.error("You must select at least one status"); return; }
233
234		this.get("checkBoxArray").forEach(enyo.bind(this, function(item) {
235			// Filter collection to return complete subscribers only.
236			var results = filteredCollection.filter(enyo.bind(this, function(value, index, array){
237				var Testcountry = value.get("contactInfo").addressInfo.country;
238				var subInfo = value.get("subscriptionInfo");
239				return subInfo.subscriptionStatus === item && this.get("checkBoxArrayCountries").indexOf(Testcountry) !== -1;
240			}));
241
242			outputForCSV = outputForCSV.concat(results);
243		}));
244
245		this.doRequestGenerateCSVFile({rawCollection: new lumberjack.SubscriptionCollection(outputForCSV).raw(), filename: "Placement Records Export.csv"});
246	},
247
248	checkedBoxes: function(inSender, inEvent)
249	{
250		this.set("checkBoxArray", []);
251
252		if (this.$.incompleteDocsNoFundsCheckbox.getChecked() === true) {
253			this.get("checkBoxArray").push("incompleteDocsNoFunds");
254		}
255		if (this.$.incompleteDocsPartialFundsCheckbox.getChecked() === true) {
256			this.get("checkBoxArray").push("incompleteDocsPartialFunds");
257		}
258		if (this.$.incompleteDocsAllFundsCheckbox.getChecked() === true) {
259			this.get("checkBoxArray").push("incompleteDocsAllFunds");
260		}
261		if (this.$.completeDocsNoFundsCheckbox.getChecked() === true) {
262			this.get("checkBoxArray").push("completeDocsNoFunds");
263		}
264		if (this.$.completeDocsPartialFundsCheckbox.getChecked() === true) {
265			this.get("checkBoxArray").push("completeDocsPartialFunds");
266		}
267		if (this.$.completeCheckbox.getChecked() === true) {
268			this.get("checkBoxArray").push("complete");
269		}
270		if (this.$.pendingCancellationCheckbox.getChecked() === true) {
271			this.get("checkBoxArray").push("pendingCancellation");
272		}
273		if (this.$.cancelledCheckbox.getChecked() === true) {
274			this.get("checkBoxArray").push("cancelled");
275		}
276		if (this.$.closedCheckbox.getChecked() === true) {
277			this.get("checkBoxArray").push("closed");
278		}
279		if (this.$.newCheckbox.getChecked() === true) {
280			this.get("checkBoxArray").push("new");
281		}
282		this.checkedBoxesCountry();
283		this.handleGenerateFromCheckBoxesCSVFile();
284	},
285
286	checkedBoxesCountry: function(inSender, inEvent)
287	{
288		this.set("checkBoxArrayCountries", []);
289		this.get("countryCheckboxNames").forEach(enyo.bind(this, function(value, index, array) {
290		    var checked = this.$.newBoxesCountry.$[value + "Checkbox"];
291		    if (checked.getValue() === true) {
292		    	//var country = checked.getContent();
293		    	this.get("checkBoxArrayCountries").push(value);
294			}
295		}));
296	}//,
297
298	// itemSelected: function(inSender, inEvent) {
299	// 	if (inEvent.originator.content) {
300	// 		presetMenuSelection = inEvent.originator.content;
301	// 	}
302	// }
303});
Full Screen

TimeFilterHooks.js

Source: TimeFilterHooks.js Github

copy
1import { useState } from 'react'
2
3export default function useHooks() {
4  const [checked2020, setchecked2020] = useState(false)
5  const [checked2019, setchecked2019] = useState(false)
6  const [checked2018, setchecked2018] = useState(false)
7  const [checked2017, setchecked2017] = useState(false)
8  const [checked2016, setchecked2016] = useState(false)
9  const [checked2015, setchecked2015] = useState(false)
10  const [checkedJan, setcheckedJan] = useState(false)
11  const [checkedFeb, setcheckedFeb] = useState(false)
12  const [checkedMar, setcheckedMar] = useState(false)
13  const [checkedApr, setcheckedApr] = useState(false)
14  const [checkedMay, setcheckedMay] = useState(false)
15  const [checkedJun, setcheckedJun] = useState(false)
16  const [checkedJul, setcheckedJul] = useState(false)
17  const [checkedAug, setcheckedAug] = useState(false)
18  const [checkedSept, setcheckedSept] = useState(false)
19  const [checkedOct, setcheckedOct] = useState(false)
20  const [checkedNov, setcheckedNov] = useState(false)
21  const [checkedDec, setcheckedDec] = useState(false)
22
23  const clickHandler1 = (arg) => {
24    switch (arg) {
25      case 2020:
26        setchecked2020(!checked2020)
27        break
28      case 2019:
29        setchecked2019(!checked2019)
30        break
31      case 2018:
32        setchecked2018(!checked2018)
33        break
34      case 2017:
35        setchecked2017(!checked2017)
36        break
37      case 2016:
38        setchecked2016(!checked2016)
39        break
40      case 2015:
41        setchecked2015(!checked2015)
42        break
43      default:
44        break
45    }
46  }
47
48  const clickHandler2 = (arg) => {
49    switch (arg) {
50      case 'Jan':
51        setcheckedJan(!checkedJan)
52        break
53      case 'Feb':
54        setcheckedFeb(!checkedFeb)
55        break
56      case 'Mar':
57        setcheckedMar(!checkedMar)
58        break
59      case 'Apr':
60        setcheckedApr(!checkedApr)
61        break
62      case 'May':
63        setcheckedMay(!checkedMay)
64        break
65      case 'Jun':
66        setcheckedJun(!checkedJun)
67        break
68      case 'Jul':
69        setcheckedJul(!checkedJul)
70        break
71      case 'Aug':
72        setcheckedAug(!checkedAug)
73        break
74      case 'Sept':
75        setcheckedSept(!checkedSept)
76        break
77      case 'Oct':
78        setcheckedOct(!checkedOct)
79        break
80      case 'Nov':
81        setcheckedNov(!checkedNov)
82        break
83      case 'Dec':
84        setcheckedDec(!checkedDec)
85        break
86
87      default:
88        break
89    }
90  }
91  return {
92    checked2020,
93    checked2019,
94    checked2018,
95    checked2017,
96    checked2016,
97    checked2015,
98    checkedJan,
99    checkedFeb,
100    checkedMar,
101    checkedApr,
102    checkedMay,
103    checkedJun,
104    checkedJul,
105    checkedAug,
106    checkedSept,
107    checkedOct,
108    checkedNov,
109    checkedDec,
110    clickHandler1,
111    clickHandler2
112  }
113}
114
Full Screen

ProductPage.js

Source: ProductPage.js Github

copy
1import React,{useState,useEffect} from 'react'
2import './ProductPage.css'
3import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
4import Product from './Product'
5import FilterListIcon from '@material-ui/icons/FilterList';
6import Categories from './Categories'
7import ProductData from "./Products.json"
8import {filteredProducts} from "./Header.js"
9import Header from "./Header"
10import Checkbox from '@material-ui/core/Checkbox';
11import {db} from "./Firebase/Firebase"
12import ProductDetail from "./ProductDetail"
13
14function ProductPage({}) {
15
16	const [dropdown, setDropdown] = useState("default")
17	const [dropHtoL, setDropHtoL] = useState([])
18	const [dropLtoH, setDropLtoH] = useState([])
19	const [productData, setProductData] = useState([])
20	const [filteredList, setfilteredList] = useState("")
21	const [filteredValues, setfilteredValues] = useState([])
22
23	const [checked, setChecked] = useState(false)
24	
25	// useEffect(() => {
26	// 	db
27	// 		.collection('products')
28	// 		.onSnapshot(snapshot => (
29	// 			setProductData(snapshot.docs.map(doc => ({
30	// 				data: doc.data()
31	// 			}))),
32	// 			setfilteredValues(snapshot.docs.map(doc => ({
33	// 				data: doc.data()
34	// 			})))
35	// 		))	
36	// }, [])
37
38	useEffect(() => {
39		setfilteredValues(
40			ProductData.filter((product)=>
41				product.categories.toLowerCase().includes(filteredList.toLowerCase())
42			)
43		);
44	},[checked]);
45
46	const dropChange=() => {
47		if (dropdown == "HtoL"){
48			setDropHtoL(
49				filteredValues.sort((a,b)=>
50					(a.price > b.price) ? -1:1
51				)
52			);
53		}else if(dropdown == "LtoH"){
54			setDropLtoH(
55				filteredValues.sort((a,b)=>
56					(a.price > b.price) ? 1:-1
57				)
58			);
59		}
60	}
61
62	const addToFilter=(e)=>{
63		if (!checked){
64			setfilteredList(e.target.value)
65			setfilteredValues(productData)
66		}
67		else{
68			setDropHtoL(filteredValues)
69			setfilteredList("")
70
71		}
72	}
73
74	return (
75		<>
76			<Header />
77			<div className="product_page">
78				<div className="products_list_top">
79					<div class="filter dropdown">
80		    			<p>Filter By</p>
81						<FilterListIcon className="filter_icon" />
82		    			<div class="dropdown-content">
83		     	 			<div className="painting_categories design">
84								<p>Categories</p>
85								<div className="h">
86									<Checkbox value="abstraction" onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
87									<label for="1"className="label">Abstraction</label>
88								</div>	
89								<div className="h">
90									<Checkbox value="animals"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
91									<label for="2"className="label">Animals</label>
92								</div>	
93								<div className="h">
94									<Checkbox value="conceptual"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
95									<label for="3"className="label">Conceptual</label>
96								</div>
97								<div className="h">
98									<Checkbox value="landscape"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
99									<label for="4"className="label">Landscape</label>
100								</div>
101								<div className="h">
102									<Checkbox value="nature"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
103									<label for="5"className="label">Nature</label>
104								</div>
105								<div className="h">
106									<Checkbox value="nude"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
107									<label for="6"className="label">Nude</label>
108								</div>
109								<div className="h">
110									<Checkbox value="potrait"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
111									<label for="7"className="label">Potrait</label>
112								</div>	
113							</div>
114							<div className="painting_styles design">
115								<p>Styles</p>
116								<div className="h">
117									<Checkbox value="fine art"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
118									<label for="8"className="label">Fine Art</label>
119								</div>
120								<div className="h">
121									<Checkbox value="pop art"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
122									<label for="9"className="label">Pop Art</label>
123								</div>
124								<div className="h">
125									<Checkbox value="realism"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
126									<label for="10"className="label">Realism</label>
127								</div>
128								<div className="h">
129									<Checkbox value="semi abstract"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
130									<label for="11"className="label">Semi Abstract</label>
131								</div>
132								<div className="h">
133									<Checkbox value="symbolic"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
134									<label for="12"className="label">Symbolic</label>
135								</div>
136								<div className="h">
137									<Checkbox value="sketch"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
138									<label for="13"className="label">Sketch</label>
139								</div>
140							</div>
141							<div className="painting_techniques design">
142								<p>Techniques</p>
143								<div className="h">
144									<Checkbox value="oil color"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
145									<label for="14"className="label">Oil Color</label>
146								</div>
147								<div className="h">
148									<Checkbox value="acrylic color"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
149									<label for="15"className="label">Acrylic Color</label>
150								</div>
151								<div className="h">
152									<Checkbox value="pencil color"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
153									<label for="16"className="label">Pencil Color</label>
154								</div>
155								<div className="h">
156									<Checkbox value="pencil sketch"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
157									<label for="17"className="label">Pencil Sketch</label>
158								</div>
159
160							</div>
161							<div className="painting_mediums design">
162								<p>Mediums</p>
163								<div className="h">
164									<Checkbox value="canvas"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
165									<label for="18"className="label">Canvas</label>
166								</div>
167								<div className="h">
168									<Checkbox value="paper"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
169									<label for="19"className="label">Paper</label>
170								</div>
171								<div className="h">
172									<Checkbox value="digital"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
173									<label for="20"className="label">Digital</label>
174								</div>
175								<div className="h">
176									<Checkbox value="print"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
177									<label for="21"className="label">Print</label>
178								</div>
179							</div>		    			
180						</div>
181  				</div> 
182					<div className="products_list">
183						<div className="sort">
184							<p>Sort By</p>
185							<div className="dropdown">
186								<select value={dropdown} onChange={(e)=>{setDropdown(e.target.value)}} onClick={dropChange}>
187									<option value="default">Default</option>
188									<option value="LtoH">Price(low to high)</option>
189									<option value="HtoL">Price(high to low)</option>
190								</select>	
191							</div>
192						</div>
193					</div>
194				</div>		
195				<div className="products_list_bottom">
196					<div className="filter_lists">
197						<div className="painting_categories design">
198							<p>Categories</p>
199							<div className="h">
200								<Checkbox value="abstraction" onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
201								<label for="1"className="label">Abstraction</label>
202							</div>	
203							<div className="h">
204								<Checkbox value="animals"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
205								<label for="2"className="label">Animals</label>
206							</div>	
207							<div className="h">
208								<Checkbox value="conceptual"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
209								<label for="3"className="label">Conceptual</label>
210							</div>
211							<div className="h">
212								<Checkbox value="landscape"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
213								<label for="4"className="label">Landscape</label>
214							</div>
215							<div className="h">
216								<Checkbox value="nature"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
217								<label for="5"className="label">Nature</label>
218							</div>
219							<div className="h">
220								<Checkbox value="nude"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
221								<label for="6"className="label">Nude</label>
222							</div>
223							<div className="h">
224								<Checkbox value="potrait"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
225								<label for="7"className="label">Potrait</label>
226							</div>	
227						</div>
228						<div className="painting_styles design">
229							<p>Styles</p>
230							<div className="h">
231								<Checkbox value="fine art"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
232								<label for="8"className="label">Fine Art</label>
233							</div>
234							<div className="h">
235								<Checkbox value="pop art"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
236								<label for="9"className="label">Pop Art</label>
237							</div>
238							<div className="h">
239								<Checkbox value="realism"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
240								<label for="10"className="label">Realism</label>
241							</div>
242							<div className="h">
243								<Checkbox value="semi abstract"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
244								<label for="11"className="label">Semi Abstract</label>
245							</div>
246							<div className="h">
247								<Checkbox value="symbolic"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
248								<label for="12"className="label">Symbolic</label>
249							</div>
250							<div className="h">
251								<Checkbox value="sketch"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
252								<label for="13"className="label">Sketch</label>
253							</div>
254						</div>
255						<div className="painting_techniques design">
256							<p>Techniques</p>
257							<div className="h">
258								<Checkbox value="oil color"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
259								<label for="14"className="label">Oil Color</label>
260							</div>
261							<div className="h">
262								<Checkbox value="acrylic color"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
263								<label for="15"className="label">Acrylic Color</label>
264							</div>
265							<div className="h">
266								<Checkbox value="pencil color"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
267								<label for="16"className="label">Pencil Color</label>
268							</div>
269							<div className="h">
270								<Checkbox value="pencil sketch"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
271								<label for="17"className="label">Pencil Sketch</label>
272							</div>
273
274						</div>
275						<div className="painting_mediums design">
276							<p>Mediums</p>
277							<div className="h">
278								<Checkbox value="canvas"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
279								<label for="18"className="label">Canvas</label>
280							</div>
281							<div className="h">
282								<Checkbox value="paper"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
283								<label for="19"className="label">Paper</label>
284							</div>
285							<div className="h">
286								<Checkbox value="digital"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
287								<label for="20"className="label">Digital</label>
288							</div>
289							<div className="h">
290								<Checkbox value="print"  onClick={()=>setChecked(!checked)} onChange={(e)=>addToFilter(e)}/>
291								<label for="21"className="label">Print</label>
292							</div>
293						</div>
294					</div>	
295					<div className="products_listing">
296						<div className="product_list">
297							{dropdown.includes("HtoL") || checked ? 
298								dropHtoL.map((product) => (
299					        		<Product
300					        			id={product.id}
301					        			title={product.title}
302					        			image={product.image}
303					        			price={product.price}  
304					        			info={product.info}
305					        			categories={product.categories}
306					        			sale={product?.sale}
307					        			size={product?.size}
308					        		
309					        		/>
310					        	)) : (
311					        	dropdown.includes("LtoH") || checked ? 
312					        		dropLtoH.map((product) => (
313						        		<Product
314						        			id={product.id}
315						        			title={product.title}
316						        			image={product.image}
317						        			price={product.price}  
318						        			info={product.info}
319						        			categories={product.categories}
320						        			sale={product?.sale}
321						        			size={product?.size}
322						        			
323						        		/>
324						        	)) : (
325						        		ProductData.map((product) => (
326							        		<Product
327							        			id={product.id}
328							        			title={product.title}
329							        			image={product.image}
330							        			price={product.price}  
331							        			info={product.info}
332							        			categories={product.categories}
333							        			sale={product?.sale}
334							        			size={product?.size}
335							    
336							        		/>
337							        	))
338						        	) 
339					        	)
340					     	}
341						</div>	
342					</div>
343				</div>	
344			</div>
345		</>	
346	)
347}
348
349
350export default ProductPage
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)