FM / components

/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/

/var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components

Name	Size	Mode	Actions
access.js	1293	0644	edit dl rm
box-shadow.js	5836	0644	edit dl rm
checkbox.js	653	0644	edit dl rm
color.js	5021	0644	edit dl rm
datetime.js	1000	0644	edit dl rm
dimension.js	1862	0644	edit dl rm
filter.js	2348	0644	edit dl rm
font_family.js	1566	0644	edit dl rm
gradient.js	4106	0644	edit dl rm
html-to-react.js	237	0644	edit dl rm
icon.js	5286	0644	edit dl rm
image.js	2314	0644	edit dl rm
label.js	1349	0644	edit dl rm
link.js	7565	0644	edit dl rm
media.js	1951	0644	edit dl rm
modal.js	1854	0644	edit dl rm
multi-image.js	3035	0644	edit dl rm
multiselect.js	2158	0644	edit dl rm
padding.js	2185	0644	edit dl rm
radio.js	771	0644	edit dl rm
rich_text.js	4303	0644	edit dl rm
screen-icon.js	1107	0644	edit dl rm
select.js	2233	0644	edit dl rm
setting-tabs-control.js	1993	0644	edit dl rm
slider.js	1507	0644	edit dl rm
spinner.js	846	0644	edit dl rm
text-shadow.js	7385	0644	edit dl rm
textarea.js	693	0644	edit dl rm
typography.js	17862	0644	edit dl rm

Edit: /var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/multiselect.js (2158B)

import { useState, useEffect } from '@wordpress/element';
import { LabelControl } from './label';

export const MultiSelectControl = (props) => {
	
	const { prop, label, value, setAttributes } = props;
	const { name } = prop['c'];
	
	var selection = pagelayer_empty(value) ? [] : value;
	
	if(pagelayer_is_string(selection)){
		selection = selection.split(',');
	}
	
	const [isSelectorOpen, setIsSelectorOpen] = useState(false);

const showSelected = () => {
		return selection.map((value) => (
			<span className="pagelayer-elp-multiselect-selected" data-val={value}>
				{prop['list'][value]}{' '}
				<span className="pagelayer-elp-multiselect-remove" onClick={() => handleRemove(value)}>
					x
				</span>
			</span>
		));
	};

const handleRemove = (value) => {
		const updatedSelection = selection.filter((val) => val !== value);
		setAttributes({[name]: updatedSelection.join(',') });
	};

return (
		<div className="components-base-control pagelayer-base-control">
			<LabelControl {...props}/>
			<div className="pagelayer-elp-multiselect-div pagelayer-elp-pos-rel">
				<div 
					className="pagelayer-elp-multiselect" 
					onClick={ () => setIsSelectorOpen(!isSelectorOpen) }
				>{showSelected()}</div>
				{ isSelectorOpen && (
					<ul className={`pagelayer-elp-multiselect-ul ${isSelectorOpen ? 'open' : ''}`} name={name}>
						{Object.keys(prop['list']).map((key) => option(key, prop['list'][key]))}
					</ul>
				)}
			</div>
		</div>
	);
}

import { useState, useEffect } from '@wordpress/element'; import { LabelControl } from './label'; export const MultiSelectControl = (props) => { const { prop, label, value, setAttributes } = props; const { name } = prop['c']; var selection = pagelayer_empty(value) ? [] : value; if(pagelayer_is_string(selection)){ selection = selection.split(','); } const [isSelectorOpen, setIsSelectorOpen] = useState(false); const option = (val, lang) => { const itemSelected = selection.includes(val) ? 'selected' : ''; return (

handleOptionClick(val)} >{ lang }

); }; const showSelected = () => { return selection.map((value) => ( {prop['list'][value]}{' '} handleRemove(value)}> x )); }; const handleRemove = (value) => { const updatedSelection = selection.filter((val) => val !== value); setAttributes({[name]: updatedSelection.join(',') }); }; const handleOptionClick = (val) => { if (selection.includes(val)) { const updatedSelection = selection.filter((value) => value !== val); setAttributes({[name]: updatedSelection.join(',') }); } else { const updatedSelection = [...selection, val]; setAttributes({[name]: updatedSelection.join(',')}); } }; return (

setIsSelectorOpen(!isSelectorOpen) } >{showSelected()}

{ isSelectorOpen && (

{Object.keys(prop['list']).map((key) => option(key, prop['list'][key]))} )}

); }