PATH:
usr
/
local
/
sitepad
/
editor
/
site-data
/
plugins
/
pagelayer
/
js
/
react
/
src
/
components
import { LabelControl } from './label'; import { useState, useRef, useEffect } from '@wordpress/element'; import { ColorPicker } from '@wordpress/components'; export const AccessControl = (props) => { const { children } = props; const [isAccessVisible, setIsAccessVisible] = useState(false); const accessRef = useRef(null); useEffect(() => { const handleDocumentClick = (e) => { // Access Modal Handler if ( accessRef.current && !accessRef.current.contains(e.target) ) { setIsAccessVisible(false); } }; document.addEventListener('click', handleDocumentClick); return () => { document.removeEventListener('click', handleDocumentClick); }; }, []); const openCaret = isAccessVisible ? 'pli-caret-open': ''; return ( <div className="components-base-control pagelayer-base-control"> <LabelControl {...props} /> <div className="pagelayer-elp-access-div" ref={accessRef}> <span className="pagelayer-elp-access" onClick={() => setIsAccessVisible(!isAccessVisible)} > <i className={`pli pli-caret-right ${openCaret}`}></i> </span> {isAccessVisible && <div className="pagelayer-elp-access-holder"> { children } </div> } </div> </div> ) }
[+]
..
[-] typography.js
[open]
[-] spinner.js
[open]
[-] text-shadow.js
[open]
[-] filter.js
[open]
[-] multiselect.js
[open]
[-] padding.js
[open]
[-] select.js
[open]
[-] link.js
[open]
[-] color.js
[open]
[-] gradient.js
[open]
[-] setting-tabs-control.js
[open]
[-] modal.js
[open]
[-] slider.js
[open]
[-] screen-icon.js
[open]
[-] icon.js
[open]
[-] label.js
[open]
[-] image.js
[open]
[-] rich_text.js
[open]
[-] media.js
[open]
[-] checkbox.js
[open]
[-] html-to-react.js
[open]
[-] textarea.js
[open]
[-] datetime.js
[open]
[-] font_family.js
[open]
[-] dimension.js
[open]
[-] box-shadow.js
[open]
[-] radio.js
[open]
[-] access.js
[open]
[-] multi-image.js
[open]