0x1998 - MANAGER
Düzenlenen Dosya: meta-fields.js
import FieldsList from 'fields-list'; const { Button, TextControl, } = wp.components; const { Component, Fragment, createRef, } = wp.element; const { assign, isEmpty } = window.lodash; class MetaFields extends Component { constructor( props ) { super( props ); let value = this.props.value || {}; let defaultValues = {}; for ( const field of this.props.metaFields ) { if ( undefined !== field.value && undefined !== field.name ) { let defaultValue = field.value; if ( 'checkbox' === field.type ) { defaultValue = Object.keys( field.value ); } defaultValues[field.name] = defaultValue; } } this.state = { metaData: assign( {}, defaultValues, value ), isBusy: false, done: false, error: false, errorMessage: '', } this.savedTimeout = null; this.errorTimeout = null; this.fieldsListRef = createRef(); } saveMeta() { window.wp.ajax.send( 'jet_engine_relations_save_relation_meta', { type: 'POST', data: { _nonce: window.JetEngineRelationsCommon._nonce, relID: this.props.relID, relatedObjectID: this.props.relatedObjectID, relatedObjectType: this.props.controlObjectType, relatedObjectName: this.props.controlObjectName, currentObjectID: this.props.currentObjectID, isParentProcessed: this.props.isParentProcessed, meta: this.state.metaData, }, success: ( response ) => { this.setState( { isBusy: false, done: true, } ); this.savedTimeout = setTimeout( () => { this.setState( { done: false, } ); }, 2000 ); this.props.onUpdate(); }, error: ( response, errorCode, errorText ) => { if ( response ) { alert( response ); } else { alert( errorText ); } this.setState( { isBusy: false, done: false, } ); } } ); } checkRequiredFields() { let emptyFields = []; for ( const field of this.props.metaFields ) { if ( field.required ) { let fieldEmpty = false; if ( undefined === this.state.metaData[ field.name ] ) { fieldEmpty = true; } else { fieldEmpty = isEmpty( this.state.metaData[ field.name ] ); } if ( fieldEmpty ) { emptyFields.push( field.title ); } } } if ( this.errorTimeout ) { clearTimeout( this.errorTimeout ); this.errorTimeout = null; } if ( emptyFields.length ) { this.setState( { error: true, errorMessage: 'Empty required fields: ' + emptyFields.join( ', ' ), } ); this.errorTimeout = setTimeout( () => { this.setState( { error: false, errorMessage: '', } ); }, 3000 ); } else { this.setState( { error: false, errorMessage: '', } ); } return emptyFields.length > 0; } handleSave = () => { const hasEmptyRequiredFields = this.checkRequiredFields(); if ( hasEmptyRequiredFields ) { return; } // call validation on FieldsList via ref if ( ! this.fieldsListRef.current.validateFields() ) { // if there are errors, do not save return; } this.setState( { isBusy: true, } ); if ( this.savedTimeout ) { clearTimeout( this.savedTimeout ); this.savedTimeout = null; } this.saveMeta(); } render() { return ( <Fragment> <FieldsList ref={ this.fieldsListRef } fields={ this.props.metaFields } values={ this.state.metaData } onChange={ ( newData ) => { this.setState( { metaData: assign( {}, newData ) } ); } } /> <div className="jet-engine-rels-popup__footer"> <Button isPrimary isBusy={ this.state.isBusy } onClick={ this.handleSave } >{ 'Save Meta Data' }</Button> { this.state.error && <span style={ { marginLeft: '10px', color: 'red' } }>{ this.state.errorMessage }</span> } { this.state.isBusy && <span style={ { marginLeft: '10px' } }>Saving...</span> } { ! this.state.isBusy && this.state.done && <span style={ { marginLeft: '10px', color: 'green' } }>Saved!</span> } </div> </Fragment> ); } } export default MetaFields;
geri dön