Sid Gifari File Manager
🏠 Root
/
home
/
nradmin
/
public_html
/
wp-content
/
plugins
/
whatsapp-for-wordpress
/
blocks
/
src
/
block
/
📝 Editing: edit.js
import MediaSelect from './media-select' import ButtonRender from './button-render' const { PanelBody, SelectControl, RadioControl } = wp.components; const { InspectorControls, PanelColorSettings } = wp.blockEditor; const { useEffect, useRef, useState, Fragment } = wp.element; const { withSelect } = wp.data; const { __ } = wp.i18n; // Import __() from wp.i18n const { njtwa } = window const InputControl = wp.components.__experimentalInputControl const edit = ({ attributes, setAttributes, className, isSelected, postList }) => { const textareaInfo = useRef(null) const [state, setState] = useState({ buttonName: "", metaInfo: {}, metaStyle: {} }); const [loading, setLoading] = useState(false) useEffect(() => { if (attributes.isSelectedAccount != -1) { setLoading(true) jQuery.ajax({ url: ajaxurl, type: 'POST', data: { 'action': 'njt_wa_get_account', 'id': attributes.isSelectedAccount, 'nonce': njtwa.nonce } }).done(function(result) { setLoading(false) setState({...result}) }); } }, [attributes.isSelectedAccount]); useEffect(() => { if (textareaInfo.current) { textareaInfo.current.style.height = textareaInfo.current.scrollHeight + 'px' } }, [textareaInfo]) const colorSamples = [ { name: 'Coral', slug: 'coral', color: '#cd2653' }, { name: 'Lavender', slug: 'lavender', color: '#000000' }, { name: 'White', slug: 'white', color: '#6d6d6d' }, { name: 'White', slug: 'white', color: '#dcd7ca' }, { name: 'White', slug: 'white', color: '#f5efe0' } ]; const buttonTypeClass = attributes.buttonStyle == "round" ? "wa__r_button" : "wa__sq_button"; const avatarClass = attributes.imageUrl ? "wa__btn_w_img" : "wa__btn_w_icon"; const avatarStyle = { backgroundImage: `url(${attributes.imageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center center', backgroundRepeat : 'no-repeat' } const avatarOrIconContent = attributes.imageUrl ? ( <div className="wa__cs_img"> <div className="wa__cs_img_wrap" style={avatarStyle} /> </div> ) : ( <div className="wa__btn_icon"> <img alt="img" src={njtwa.avatarDefaultUrl}/> </div> ); const inputStyle = { color: ( !attributes.textColor || attributes.textColor == '#fff' || attributes.textColor == '#ffffff') ? '#d5f0d9' : attributes.textColor, background: 'transparent', border: 'none', outline: 'none', opacity: ( !attributes.textColor || attributes.textColor == '#fff' || attributes.textColor == '#ffffff') ? 0.8 : 1 } const titleContent = attributes.buttonTitle ? ( <div className="wa__cs_info"> <div className="wa__cs_name" style={{color: attributes.textColor}} > {/* {attributes.buttonTitle} */} <input style={inputStyle} onChange={(event) => setAttributes( {buttonTitle: event.target.value} )} value={attributes.buttonTitle} /> </div> {/* <div className="wa__cs_status" > {__("Online", "ninjateam-whatsapp")} </div> */} </div> ) : null; const titleClass = attributes.buttonTitle ? '' : 'wa__button_text_only' const accountList = () => { let list = [{label: __('Custom Button', 'ninjateam-whatsapp'), value: -1}] if ( postList ) { const postListOptions = postList.map((post) => ({label: post.title.raw, value: post.id})) list = [...list, ...postListOptions] } return list } const textareaStyle = { background: 'transparent', border: 'none', color: attributes.textColor ? attributes.textColor : '#fff', outline: 'none', resize: 'none', overflow: 'hidden', padding: 0, boxShadow: 'none' } const inspectControl = ( <InspectorControls> <PanelBody title={__("Select Account", "ninjateam-whatsapp")}> <SelectControl label={__("Choose your account from list:", "ninjateam-whatsapp")} value={ attributes.isSelectedAccount } options={accountList()} onChange={(postId) => setAttributes({isSelectedAccount: postId})} /> { attributes.isSelectedAccount == '-1' ? (<Fragment> <InputControl label={__("Enter your phone number:", "ninjateam-whatsapp")} value={ attributes.phoneNumber } onChange={ ( phoneNumber ) => setAttributes( {phoneNumber} ) } /> {/* <InputControl label={__("Title:", "ninjateam-whatsapp")} value={ attributes.buttonTitle } onChange={ ( buttonTitle ) => setAttributes( {buttonTitle} ) } /> <InputControl label={__("Label:", "ninjateam-whatsapp")} value={ attributes.buttonInfo } onChange={ ( buttonInfo ) => setAttributes( {buttonInfo} ) } /> */} </Fragment>) : null } </PanelBody> { attributes.isSelectedAccount == -1 ? (<Fragment> <PanelBody initialOpen={false} title={__("Avatar", "ninjateam-whatsapp")}> <MediaSelect attributes={attributes} setAttributes={setAttributes} /> </PanelBody> <PanelBody initialOpen={false} title={__("Button Style", "ninjateam-whatsapp")}> <RadioControl label="Button Shape" selected={ attributes.buttonStyle } options={ [ { label: __("Round", "ninjateam-whatsapp"), value: 'round' }, { label: __("Square", "ninjateam-whatsapp"), value: 'square' }, ] } onChange={ ( buttonStyle ) => { setAttributes( {buttonStyle} ) } } /> </PanelBody> <PanelColorSettings initialOpen={false} title={__("Button Color", "ninjateam-whatsapp")} colorSettings={[ { colors: colorSamples, value: attributes.buttonColor, label: __("Background Color", "ninjateam-whatsapp"), onChange: (buttonColor) => setAttributes({buttonColor}) }, { colors: colorSamples, value: attributes.textColor, label: __("Text Color", "ninjateam-whatsapp"), onChange: (textColor) => setAttributes({textColor}) } ]} /> </Fragment>) : null } </InspectorControls> ); return ( <Fragment> { attributes.preview ? <div style={{padding: '10px'}}><img src={njtwa.gutenbergPreview} alt="preview" /></div> : ( attributes.isSelectedAccount != -1 ? <ButtonRender attributes={state} loading={loading}/> : <div> <a href="#" className={`wa__button wa__stt_online ${buttonTypeClass} ${avatarClass} ${titleClass}`} style={{backgroundColor: attributes.buttonColor, color: attributes.textColor}} > {avatarOrIconContent} <div className="wa__btn_txt"> {titleContent} <div className="wa__btn_title"> <textarea rows={1} ref={textareaInfo} style={textareaStyle} onChange={(event) => { event.target.style.height = '15px' event.target.style.height = event.target.scrollHeight + 'px' setAttributes( {buttonInfo: event.target.value} ) } } value={attributes.buttonInfo} /> {/* {attributes.buttonInfo} */} </div> </div> </a> </div> ) } {inspectControl} </Fragment> ); }; export default withSelect((select, ownProps) => { return { postList: select("core").getEntityRecords("postType", "whatsapp-accounts", { per_page: -1 }) }; })(edit);
💾 Save
❌ Cancel
Sid Gifari File Manager v1.0 | Terminal Auto-Sync Enabled | Current Path: /home/nradmin/public_html/wp-content/plugins/whatsapp-for-wordpress/blocks/src/block