Skip to content

Commit

Permalink
Issue #34 - start making use of the SelectTextControlCombo block for …
Browse files Browse the repository at this point in the history
…formats and orderby attributes
  • Loading branch information
bobbingwide committed Jun 29, 2020
1 parent 2370402 commit 951aad3
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 7 deletions.
52 changes: 52 additions & 0 deletions blocks/oik-content/SelectTextControlCombo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* Implements a Select Control / Text control combo where the
* text value overrides the option(s) selected from the SelectControl.
*
*
* @copyright (C) Copyright Bobbing Wide 2020
* @author Herb Miller @bobbingwide
*/


const { Component, Fragment } = wp.element;
const { SelectControl, TextControl } = wp.components;

export class SelectTextControlCombo extends Component {
constructor() {
super(...arguments);

}

renderSelect( props ) {

//var options = formats.map((format) => this.formatsOption(format));
var custom_label = `Custom value: ${this.props.label}`;
return (
<Fragment>
<SelectControl label={this.props.label} value={this.props.value}
options={this.props.options}
onChange={this.props.onChange}
/>
<TextControl label={custom_label} hideLabelFromVision={ true } value={this.props.value} onChange={this.props.onChange} />
</Fragment>
);

}



/**
* Map the format_option to a select list option
*
* @param format
* @returns {{label: *, value: *}}
*/
formatOption( format ) {
return( { value: format.value, label: format.label });
}

render() {
return( this.renderSelect()
);
}
}
3 changes: 2 additions & 1 deletion blocks/oik-content/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {PostTypes} from "./post_type";
import{ NumberPosts } from './numberposts';
import { orderby, order } from './attributes';
import { Formats } from './formats';
import { SelectTextControlCombo } from './SelectTextControlCombo';

const edit= withInstanceId(
( { attributes, setAttributes, instanceId, isSelected } ) => {
Expand Down Expand Up @@ -108,7 +109,7 @@ const edit= withInstanceId(
/>

<PostTypes value={ attributes.post_type } onChange={ onChangePostType } />
<SelectControl label="Order by" value={ attributes.orderby} options={ orderby} onChange={onChangeOrderBy} />
<SelectTextControlCombo label="Order by" value={ attributes.orderby} options={ orderby} onChange={onChangeOrderBy} />
<SelectControl label="Order" value={ attributes.order} options={ order} onChange={onChangeOrder} />
<RangeControl label="Number posts" value={ attributes.numberposts } onChange={ onChangeNumberPosts } min={-1} max={100} />
<TextControl value={ attributes.post_parent} onChange={ onChangePostParent } label="Post Parent" />
Expand Down
22 changes: 16 additions & 6 deletions blocks/oik-content/formats.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
/**
* Implements a control to represent the format= parameter to the bw_pages shortcode.
*
* @copyright (C) Copyright Bobbing Wide 2020
* @author Herb Miller @bobbingwide
*/

const format_options = [
{ label: 'Default', value: 'LIER',},
{ label: 'Link,image', value: 'LI', },
{ label: 'Link, image, excerpt, read more', value: 'LIER',},
{ label: 'Link, image', value: 'LI', },
{ label: 'Link, image, excerpt', value: 'LIE' },
{ label: 'Image, link', value: 'IL', },
{ label: 'Image, link, excerpt', value: 'ILE' },
{ label: 'Link, Image, Date, Author', value: 'LI/d/a'},
{ label: 'None', value: '' },
];

/**
* Each of the different letters in the format_options value fields has a meaning.
* It would make sense to help the user to type the right characters when
* defining a Custom value.
*/
const single_format_options = [
{ label: 'None', value: null, },
{ label: 'Title', value: 'T', },
Expand All @@ -26,9 +37,8 @@ const single_format_options = [
{ label: 'Edit', value: 'e' },
];

const { select, subscribe } = wp.data;
const { Component } = wp.element;
const { SelectControl } = wp.components;
import { SelectTextControlCombo } from './SelectTextControlCombo';

export class Formats extends Component {
constructor() {
Expand All @@ -43,7 +53,7 @@ export class Formats extends Component {
if (formats) {
//var options = formats.map((format) => this.formatsOption(format));
return (
<SelectControl label="Format" value={this.props.format}
<SelectTextControlCombo label="Format" value={this.props.format}
options={format_options}
onChange={this.props.onChange}
/>
Expand Down

0 comments on commit 951aad3

Please sign in to comment.