plugin install
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
<?php
|
||||
|
||||
namespace Automattic\WooCommerce\Blocks\InteractivityComponents;
|
||||
|
||||
/**
|
||||
* CheckboxList class. This is a component for reuse with interactivity API.
|
||||
*
|
||||
* @package Automattic\WooCommerce\Blocks\InteractivityComponents
|
||||
*/
|
||||
class CheckboxList {
|
||||
/**
|
||||
* Render the checkbox list.
|
||||
*
|
||||
* @param mixed $props The properties to render the dropdown with.
|
||||
* items: array of objects with label and value properties.
|
||||
* - id: string of the id to use for the checkbox (optional).
|
||||
* - checked: boolean to indicate if the checkbox is checked.
|
||||
* - label: string of the label to display (plaintext or HTML).
|
||||
* - aria_label: string of the aria label to use for the checkbox. (optional, plaintext only).
|
||||
* - value: string of the value to use.
|
||||
* on_change: string of the action to perform when the dropdown changes.
|
||||
* @return string|false
|
||||
*/
|
||||
public static function render( $props ) {
|
||||
wp_enqueue_script( 'wc-interactivity-checkbox-list' );
|
||||
wp_enqueue_style( 'wc-interactivity-checkbox-list' );
|
||||
|
||||
$items = $props['items'] ?? array();
|
||||
$checkbox_list_context = array( 'items' => $items );
|
||||
$on_change = $props['on_change'] ?? '';
|
||||
|
||||
$namespace = wp_json_encode( array( 'namespace' => 'woocommerce/interactivity-checkbox-list' ) );
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div data-wc-interactive='<?php echo esc_attr( $namespace ); ?>'>
|
||||
<div data-wc-context='<?php echo esc_attr( wp_json_encode( $checkbox_list_context ) ); ?>' >
|
||||
<div class="wc-block-stock-filter style-list">
|
||||
<ul class="wc-block-components-checkbox-list">
|
||||
<?php foreach ( $items as $item ) { ?>
|
||||
<?php
|
||||
$item['id'] = $item['id'] ?? uniqid( 'checkbox-' );
|
||||
// translators: %s: checkbox label.
|
||||
$i18n_label = sprintf( __( 'Checkbox: %s', 'woocommerce' ), $item['aria_label'] ?? '' );
|
||||
?>
|
||||
<li data-wc-key="<?php echo esc_attr( $item['id'] ); ?>">
|
||||
<div class="wc-block-components-checkbox">
|
||||
<label for="<?php echo esc_attr( $item['id'] ); ?>">
|
||||
<input
|
||||
id="<?php echo esc_attr( $item['id'] ); ?>"
|
||||
class="wc-block-components-checkbox__input"
|
||||
type="checkbox"
|
||||
aria-invalid="false"
|
||||
aria-label="<?php echo esc_attr( $i18n_label ); ?>"
|
||||
data-wc-on--change--select-item="actions.selectCheckboxItem"
|
||||
data-wc-on--change--parent-action="<?php echo esc_attr( $on_change ); ?>"
|
||||
value="<?php echo esc_attr( $item['value'] ); ?>"
|
||||
<?php checked( $item['checked'], 1 ); ?>
|
||||
>
|
||||
<svg class="wc-block-components-checkbox__mark" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
|
||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
|
||||
</svg>
|
||||
<span class="wc-block-components-checkbox__label">
|
||||
<?php // The label can be HTML, so we don't want to escape it. ?>
|
||||
<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php echo $item['label']; ?>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
<?php
|
||||
|
||||
namespace Automattic\WooCommerce\Blocks\InteractivityComponents;
|
||||
|
||||
/**
|
||||
* Dropdown class. This is a component for reuse with interactivity API.
|
||||
*
|
||||
* @package Automattic\WooCommerce\Blocks\InteractivityComponents
|
||||
*/
|
||||
class Dropdown {
|
||||
/**
|
||||
* Render the dropdown.
|
||||
*
|
||||
* @param mixed $props The properties to render the dropdown with.
|
||||
* @return string|false
|
||||
*/
|
||||
public static function render( $props ) {
|
||||
wp_enqueue_script( 'wc-interactivity-dropdown' );
|
||||
wp_enqueue_style( 'wc-interactivity-dropdown' );
|
||||
|
||||
$select_type = $props['select_type'] ?? 'single';
|
||||
$selected_items = $props['selected_items'] ?? array();
|
||||
|
||||
// Items should be an array of objects with a label and value property.
|
||||
$items = $props['items'] ?? array();
|
||||
|
||||
$default_placeholder = 'single' === $select_type ? __( 'Select an option', 'woocommerce' ) : __( 'Select options', 'woocommerce' );
|
||||
$placeholder = $props['placeholder'] ?? $default_placeholder;
|
||||
|
||||
$dropdown_context = array(
|
||||
'selectedItems' => $selected_items,
|
||||
'isOpen' => false,
|
||||
'selectType' => $select_type,
|
||||
'defaultPlaceholder' => $placeholder,
|
||||
);
|
||||
|
||||
$action = $props['action'] ?? '';
|
||||
$namespace = wp_json_encode( array( 'namespace' => 'woocommerce/interactivity-dropdown' ) );
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div data-wc-interactive='<?php echo esc_attr( $namespace ); ?>'>
|
||||
<div class="wc-interactivity-dropdown" data-wc-on--click="actions.toggleIsOpen" data-wc-context='<?php echo esc_attr( wp_json_encode( $dropdown_context ) ); ?>' >
|
||||
<div class="wc-interactivity-dropdown__dropdown" tabindex="-1" >
|
||||
<div class="wc-interactivity-dropdown__dropdown-selection" id="options-dropdown" tabindex="0" aria-haspopup="listbox">
|
||||
<span class="wc-interactivity-dropdown__placeholder" data-wc-text="state.placeholderText">
|
||||
<?php echo empty( $selected_items ) ? esc_html( $placeholder ) : ''; ?>
|
||||
</span>
|
||||
<?php if ( 'multiple' === $select_type ) { ?>
|
||||
<div class="selected-options">
|
||||
<template
|
||||
data-wc-each="context.selectedItems"
|
||||
data-wc-each-key="context.item.value"
|
||||
>
|
||||
<div class="wc-interactivity-dropdown__selected-badge">
|
||||
<span class="wc-interactivity-dropdown__badge-text" data-wc-text="context.item.label"></span>
|
||||
<svg
|
||||
data-wc-on--click="actions.unselectDropdownItem"
|
||||
data-wc-on--click--parent-action="<?php echo esc_attr( $action ); ?>"
|
||||
class="wc-interactivity-dropdown__badge-remove"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<?php foreach ( $selected_items as $selected ) { ?>
|
||||
<div
|
||||
class="wc-interactivity-dropdown__selected-badge"
|
||||
data-wc-key="<?php echo esc_attr( $selected['value'] ); ?>"
|
||||
data-wc-each-child
|
||||
>
|
||||
<span class="wc-interactivity-dropdown__badge-text"><?php echo esc_html( $selected['label'] ); ?></span>
|
||||
<svg
|
||||
data-wc-on--click="actions.unselectDropdownItem"
|
||||
data-wc-on--click--parent-action="<?php echo esc_attr( $action ); ?>"
|
||||
class="wc-interactivity-dropdown__badge-remove"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<span class="wc-interactivity-dropdown__svg-container">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="30" height="30" >
|
||||
<path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" ></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="wc-interactivity-dropdown__dropdown-list"
|
||||
aria-labelledby="options-dropdown"
|
||||
role="listbox"
|
||||
data-wc-bind--hidden="!context.isOpen"
|
||||
<?php echo esc_attr( $dropdown_context['isOpen'] ? '' : 'hidden' ); ?>
|
||||
>
|
||||
<?php
|
||||
foreach ( $items as $item ) :
|
||||
$context = array( 'item' => $item );
|
||||
?>
|
||||
<div
|
||||
class="wc-interactivity-dropdown__dropdown-option"
|
||||
role="option"
|
||||
tabindex="0"
|
||||
data-wc-on--click--select-item="actions.selectDropdownItem"
|
||||
data-wc-on--click--parent-action="<?php echo esc_attr( $action ); ?>"
|
||||
data-wc-class--is-selected="state.isSelected"
|
||||
class="components-form-token-field__suggestion"
|
||||
data-wc-bind--aria-selected="state.isSelected"
|
||||
data-wc-context='<?php echo wp_json_encode( $context ); ?>'
|
||||
>
|
||||
<?php echo $item['label']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user