Dropdown.php
128 lines
| 1 | <?php |
| 2 | |
| 3 | namespace Automattic\WooCommerce\Blocks\InteractivityComponents; |
| 4 | |
| 5 | /** |
| 6 | * Dropdown class. This is a component for reuse with interactivity API. |
| 7 | * |
| 8 | * @package Automattic\WooCommerce\Blocks\InteractivityComponents |
| 9 | */ |
| 10 | class Dropdown { |
| 11 | /** |
| 12 | * Render the dropdown. |
| 13 | * |
| 14 | * @param mixed $props The properties to render the dropdown with. |
| 15 | * @return string|false |
| 16 | */ |
| 17 | public static function render( $props ) { |
| 18 | wp_enqueue_script( 'wc-interactivity-dropdown' ); |
| 19 | wp_enqueue_style( 'wc-interactivity-dropdown' ); |
| 20 | |
| 21 | $select_type = $props['select_type'] ?? 'single'; |
| 22 | $selected_items = $props['selected_items'] ?? array(); |
| 23 | |
| 24 | // Items should be an array of objects with a label and value property. |
| 25 | $items = $props['items'] ?? array(); |
| 26 | |
| 27 | $default_placeholder = 'single' === $select_type ? __( 'Select an option', 'woocommerce' ) : __( 'Select options', 'woocommerce' ); |
| 28 | $placeholder = $props['placeholder'] ?? $default_placeholder; |
| 29 | |
| 30 | $dropdown_context = array( |
| 31 | 'selectedItems' => $selected_items, |
| 32 | 'isOpen' => false, |
| 33 | 'selectType' => $select_type, |
| 34 | 'defaultPlaceholder' => $placeholder, |
| 35 | ); |
| 36 | |
| 37 | $action = $props['action'] ?? ''; |
| 38 | $namespace = wp_json_encode( array( 'namespace' => 'woocommerce/interactivity-dropdown' ) ); |
| 39 | |
| 40 | ob_start(); |
| 41 | ?> |
| 42 | <div data-wc-interactive='<?php echo esc_attr( $namespace ); ?>'> |
| 43 | <div class="wc-interactivity-dropdown" data-wc-on--click="actions.toggleIsOpen" data-wc-context='<?php echo esc_attr( wp_json_encode( $dropdown_context ) ); ?>' > |
| 44 | <div class="wc-interactivity-dropdown__dropdown" tabindex="-1" > |
| 45 | <div class="wc-interactivity-dropdown__dropdown-selection" id="options-dropdown" tabindex="0" aria-haspopup="listbox"> |
| 46 | <span class="wc-interactivity-dropdown__placeholder" data-wc-text="state.placeholderText"> |
| 47 | <?php echo esc_html( $placeholder ); ?> |
| 48 | </span> |
| 49 | <?php if ( 'multiple' === $select_type ) { ?> |
| 50 | <div class="selected-options"> |
| 51 | <template |
| 52 | data-wc-each="context.selectedItems" |
| 53 | data-wc-each-key="context.item.value" |
| 54 | > |
| 55 | <div class="wc-interactivity-dropdown__selected-badge"> |
| 56 | <span class="wc-interactivity-dropdown__badge-text" data-wc-text="context.item.label"></span> |
| 57 | <svg |
| 58 | data-wc-on--click="actions.unselectDropdownItem" |
| 59 | data-wc-on--click--parent-action="<?php echo esc_attr( $action ); ?>" |
| 60 | class="wc-interactivity-dropdown__badge-remove" |
| 61 | width="24" |
| 62 | height="24" |
| 63 | xmlns="http://www.w3.org/2000/svg" |
| 64 | viewBox="0 0 24 24" |
| 65 | aria-hidden="true" |
| 66 | > |
| 67 | <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> |
| 68 | </svg> |
| 69 | </div> |
| 70 | </template> |
| 71 | |
| 72 | <?php foreach ( $selected_items as $selected ) { ?> |
| 73 | <div |
| 74 | class="wc-interactivity-dropdown__selected-badge" |
| 75 | data-wc-key="<?php echo esc_attr( $selected['value'] ); ?>" |
| 76 | data-wc-each-child |
| 77 | > |
| 78 | <span class="wc-interactivity-dropdown__badge-text"><?php echo esc_html( $selected['label'] ); ?></span> |
| 79 | <svg |
| 80 | data-wc-on--click="actions.unselectDropdownItem" |
| 81 | data-wc-on--click--parent-action="<?php echo esc_attr( $action ); ?>" |
| 82 | class="wc-interactivity-dropdown__badge-remove" |
| 83 | width="24" |
| 84 | height="24" |
| 85 | xmlns="http://www.w3.org/2000/svg" |
| 86 | viewBox="0 0 24 24" |
| 87 | aria-hidden="true" |
| 88 | > |
| 89 | <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> |
| 90 | </svg> |
| 91 | </div> |
| 92 | <?php } ?> |
| 93 | </div> |
| 94 | <?php } ?> |
| 95 | <span class="wc-interactivity-dropdown__svg-container"> |
| 96 | <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="30" height="30" > |
| 97 | <path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" ></path> |
| 98 | </svg> |
| 99 | </span> |
| 100 | </div> |
| 101 | <div data-wc-bind--hidden="!context.isOpen" class="wc-interactivity-dropdown__dropdown-list" aria-labelledby="options-dropdown" role="listbox"> |
| 102 | <?php |
| 103 | foreach ( $items as $item ) : |
| 104 | $context = array( 'item' => $item ); |
| 105 | ?> |
| 106 | <div |
| 107 | class="wc-interactivity-dropdown__dropdown-option" |
| 108 | role="option" |
| 109 | tabindex="0" |
| 110 | data-wc-on--click--select-item="actions.selectDropdownItem" |
| 111 | data-wc-on--click--parent-action="<?php echo esc_attr( $action ); ?>" |
| 112 | data-wc-class--is-selected="state.isSelected" |
| 113 | class="components-form-token-field__suggestion" |
| 114 | data-wc-bind--aria-selected="state.isSelected" |
| 115 | data-wc-context='<?php echo wp_json_encode( $context ); ?>' |
| 116 | > |
| 117 | <?php echo $item['label']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> |
| 118 | </div> |
| 119 | <?php endforeach; ?> |
| 120 | </div> |
| 121 | </div> |
| 122 | </div> |
| 123 | </div> |
| 124 | <?php |
| 125 | return ob_get_clean(); |
| 126 | } |
| 127 | } |
| 128 |