form
8 years ago
scss
8 years ago
block.js
8 years ago
controls.js
8 years ago
inspector.js
7 years ago
block.js
98 lines
| 1 | /** |
| 2 | * Block dependencies |
| 3 | */ |
| 4 | import isEmpty from 'lodash.isempty'; |
| 5 | import pickBy from 'lodash.pickby'; |
| 6 | import isUndefined from 'lodash.isundefined'; |
| 7 | import GiveBlankSlate from '../../components/blank-slate/index'; |
| 8 | import NoForms from '../../components/no-form/index'; |
| 9 | import EditForm from '../../components/edit-form/index'; |
| 10 | import FormPreview from './form/preview'; |
| 11 | import FormSelect from '../../components/form-select/index'; |
| 12 | import {stringify} from "querystringify"; |
| 13 | |
| 14 | /** |
| 15 | * Internal dependencies |
| 16 | */ |
| 17 | const { __ } = wp.i18n; |
| 18 | const { withAPIData } = wp.components; |
| 19 | const { Component } = wp.element; |
| 20 | |
| 21 | /** |
| 22 | * Render Block UI For Editor |
| 23 | * |
| 24 | * @class GiveForm |
| 25 | * @extends {Component} |
| 26 | */ |
| 27 | class GiveForm extends Component { |
| 28 | constructor(props) { |
| 29 | super( ...props ); |
| 30 | } |
| 31 | |
| 32 | /** |
| 33 | * Render block UI |
| 34 | * |
| 35 | * @returns {object} JSX Object |
| 36 | * @memberof GiveForm |
| 37 | */ |
| 38 | render() { |
| 39 | const props = this.props, |
| 40 | attributes = props.attributes, |
| 41 | {isLoading} = props.form; |
| 42 | |
| 43 | // Render block UI |
| 44 | let blockUI; |
| 45 | |
| 46 | if (!attributes.id) { |
| 47 | if (isLoading || isUndefined(props.form.data)) { |
| 48 | blockUI = <GiveBlankSlate title={__('Loading...')} isLoader={true}/>; |
| 49 | } else if (isEmpty(props.form.data)) { |
| 50 | blockUI = <NoForms/>; |
| 51 | } else { |
| 52 | blockUI = <FormSelect {... {...props}} />; |
| 53 | } |
| 54 | } else { |
| 55 | if (isEmpty(props.form.data)) { |
| 56 | blockUI = isLoading ? |
| 57 | <GiveBlankSlate title={__('Loading...')} isLoader={true}/> : |
| 58 | <EditForm formId={attributes.id} {... {...props}}/>; |
| 59 | } else { |
| 60 | blockUI = <FormPreview |
| 61 | html={props.form.data} |
| 62 | {... {...props}} />; |
| 63 | } |
| 64 | } |
| 65 | |
| 66 | return ( |
| 67 | <div className={!!props.isSelected ? `${props.className} isSelected` : props.className} key="GiveBlockUI"> |
| 68 | {blockUI} |
| 69 | </div> |
| 70 | ); |
| 71 | } |
| 72 | } |
| 73 | |
| 74 | /** |
| 75 | * Export component attaching withAPIdata |
| 76 | */ |
| 77 | export default withAPIData((props) => { |
| 78 | const {showTitle, showGoal, showContent, displayStyle, continueButtonTitle, id } = props.attributes; |
| 79 | |
| 80 | let parameters = { |
| 81 | show_title: showTitle, |
| 82 | show_goal: showGoal, |
| 83 | show_content: showContent, |
| 84 | display_style: displayStyle |
| 85 | }; |
| 86 | |
| 87 | if ('reveal' === displayStyle) { |
| 88 | parameters.continue_button_title = continueButtonTitle; |
| 89 | } |
| 90 | |
| 91 | parameters = stringify(pickBy(parameters, value => !isUndefined(value))); |
| 92 | |
| 93 | return { |
| 94 | form: `/${giveApiSettings.rest_base}/form/${ id }/?${ parameters }`, |
| 95 | forms: '/wp/v2/give_forms', |
| 96 | }; |
| 97 | })(GiveForm); |
| 98 |