diff --git a/blocks/attachment-info/attachment-info.php b/blocks/attachment-info/attachment-info.php index 754a56015..94cd1d3ec 100644 --- a/blocks/attachment-info/attachment-info.php +++ b/blocks/attachment-info/attachment-info.php @@ -59,9 +59,9 @@ public function get_attachments($parent_post_id) { $to_return = array(); foreach ($attachments as $attachment) { - if ( $attachment->menu_order >= 0 ) { + if ( $attachment->menu_order >= 0 ) { continue; - } + } if ( false === strpos( $attachment->post_title, ' ' ) ) { continue; } diff --git a/blocks/form-input-select/build/render.php b/blocks/form-input-select/build/render.php index 0414db8a7..76ce37a8f 100644 --- a/blocks/form-input-select/build/render.php +++ b/blocks/form-input-select/build/render.php @@ -10,11 +10,15 @@ array( 'label' => 'Option 1', 'value' => 'option-1', - 'isSelected' => ( $input_value === 'option-1' ), + 'isSelected' => false, ), ); $input_disabled = array_key_exists( 'disabled', $attributes ) ? $attributes['disabled'] : false; $input_options = empty($input_options) && array_key_exists( 'prc-block/form-input-options', $block->context) ? $block->context['prc-block/form-input-options'] : $input_options; +$input_options = array_map( function( $option ) use ( $input_value ) { + $option['isSelected'] = $option['value'] === $input_value; + return $option; +}, $input_options ); $input_id = md5( $target_namespace . $input_name ); $input_attrs = \PRC\Platform\Block_Utils\get_block_html_attributes( array( @@ -68,7 +72,7 @@ 'isError' => false, 'isSuccess' => false, 'isProcessing' => false, - 'filteredOptions' => array(), + 'filteredOptions' => $input_options, 'options' => $input_options, )), 'data-wp-init' => 'callbacks.onInit', diff --git a/blocks/form-input-select/build/view.asset.php b/blocks/form-input-select/build/view.asset.php index a74126ddb..92b6be489 100644 --- a/blocks/form-input-select/build/view.asset.php +++ b/blocks/form-input-select/build/view.asset.php @@ -1 +1 @@ - array('@wordpress/interactivity', 'wp-polyfill'), 'version' => '5bfdc1c57c89e970f49e', 'type' => 'module'); + array('@wordpress/interactivity', 'wp-polyfill'), 'version' => 'fb23763471d2b4e00624', 'type' => 'module'); diff --git a/blocks/form-input-select/build/view.js b/blocks/form-input-select/build/view.js index 22361a5c0..29f2dc76f 100644 --- a/blocks/form-input-select/build/view.js +++ b/blocks/form-input-select/build/view.js @@ -1,2 +1,2 @@ -import*as e from"@wordpress/interactivity";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const o=(l={getContext:()=>e.getContext,getElement:()=>e.getElement,store:()=>e.store},r={},t.d(r,l),r),{actions:n}=(0,o.store)("prc-block/form-input-select",{actions:{onOpen:()=>{(0,o.getContext)().isOpen=!0},onClose:(e=null)=>{null!==e&&e.preventDefault();const t=(0,o.getContext)();let n=!1;n||(n=!0,setTimeout((()=>{t.isOpen=!1,n=!1}),100))},onReset:()=>{const e=(0,o.getContext)();e.activeIndex=0,e.value="",e.label="",e.filteredOptions=e.options},getOptionByValue:e=>{console.log("getOptionByValue",e);const t=(0,o.getContext)(),{options:n}=t,l=n.find((t=>t.value===e));return l?{index:n.findIndex((e=>e.value===l.value)),...l}:null},moveThroughOptions:(e,t)=>{const n=(0,o.getContext)(),{activeIndex:l,filteredOptions:r}=n;let i=null;i=null===l||isNaN(l)?0:l+e,i<0&&(i=r.length-1),i>=r.length&&(i=0),r.forEach((e=>{e.isSelected=!1})),r[i].isSelected=!0,n.activeIndex=i,n.filteredOptions=r,console.log("moveThroughOptions",n,i,e)},onKeyUp:e=>{e.preventDefault();const{value:t}=e.target,l=(0,o.getContext)(),{options:r}=l,{ref:i}=(0,o.getElement)(),s=i.getAttribute("aria-controls");if(!s)return;if("Escape"===e.key)return n.onReset(),void(!0===l.isOpen&&i.blur());if(e.key,40===e.keyCode&&"ArrowDown"===e.key)return void n.moveThroughOptions(1,s);if(38===e.keyCode&&"ArrowUp"===e.key)return void n.moveThroughOptions(-1,s);const a=r.filter((e=>{const{label:o}=e;return o.toLowerCase().includes(t.toLowerCase())}));a.length&&(l.filteredOptions=a)},onClick:e=>{e.preventDefault();const{ref:t}=(0,o.getElement)(),l=(0,o.getContext)(),{options:r}=l,i=(t.getAttribute("aria-controls"),t.getAttribute("data-ref-value")),{index:s,label:a,value:c}=n.getOptionByValue(i);l.activeIndex=s,l.label=a,l.value=c;const u=r;u.forEach((e=>{e.isSelected=!1})),u[s].isSelected=!0,l.filteredOptions=u,n.onClose()}},callbacks:{onInit:()=>{const e=(0,o.getContext)(),{options:t}=e;t.forEach((e=>{e.isSelected=!1})),e.filteredOptions=t},onValueChange:()=>{const{ref:e}=(0,o.getElement)(),t=(0,o.getContext)(),{targetNamespace:n,value:l}=t;if(l&&"prc-block/form-input-select"!==n){const{actions:r}=(0,o.store)(n);r.onSelectChange&&(console.log("onValueChange -> onSelectChange:",t,l,e),r.onSelectChange(l,e))}}}});var l,r; +import*as e from"@wordpress/interactivity";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const o=(l={getContext:()=>e.getContext,getElement:()=>e.getElement,store:()=>e.store},r={},t.d(r,l),r),{actions:n}=(0,o.store)("prc-block/form-input-select",{actions:{onOpen:()=>{(0,o.getContext)().isOpen=!0},onClose:(e=null)=>{null!==e&&e.preventDefault();const t=(0,o.getContext)();let n=!1;n||(n=!0,setTimeout((()=>{t.isOpen=!1,n=!1}),100))},onReset:()=>{const e=(0,o.getContext)();e.activeIndex=0,e.value="",e.label="",e.filteredOptions=e.options},getOptionByValue:e=>{console.log("getOptionByValue",e);const t=(0,o.getContext)(),{options:n}=t,l=n.find((t=>t.value===e));return l?{index:n.findIndex((e=>e.value===l.value)),...l}:null},moveThroughOptions:(e,t)=>{const n=(0,o.getContext)(),{activeIndex:l,filteredOptions:r}=n;let i=null;i=null===l||isNaN(l)?0:l+e,i<0&&(i=r.length-1),i>=r.length&&(i=0),r.forEach((e=>{e.isSelected=!1})),r[i].isSelected=!0,n.activeIndex=i,n.filteredOptions=r,console.log("moveThroughOptions",n,i,e)},onKeyUp:e=>{e.preventDefault();const{value:t}=e.target,l=(0,o.getContext)(),{options:r}=l,{ref:i}=(0,o.getElement)(),s=i.getAttribute("aria-controls");if(!s)return;if("Escape"===e.key)return n.onReset(),void(!0===l.isOpen&&i.blur());if(e.key,40===e.keyCode&&"ArrowDown"===e.key)return void n.moveThroughOptions(1,s);if(38===e.keyCode&&"ArrowUp"===e.key)return void n.moveThroughOptions(-1,s);const a=r.filter((e=>{const{label:o}=e;return o.toLowerCase().includes(t.toLowerCase())}));a.length&&(l.filteredOptions=a)},onClick:e=>{e.preventDefault();const{ref:t}=(0,o.getElement)(),l=(0,o.getContext)(),{options:r}=l,i=(t.getAttribute("aria-controls"),t.getAttribute("data-ref-value")),{index:s,label:a,value:c}=n.getOptionByValue(i);l.activeIndex=s,l.label=a,l.value=c,console.log("onClick",l,s,a,c);const g=r;g.forEach((e=>{e.isSelected=!1})),g[s].isSelected=!0,l.filteredOptions=g,n.onClose()}},callbacks:{onInit:()=>{const e=(0,o.getContext)(),{options:t}=e;console.log("form-input-select -> onInit",e,t)},onValueChange:()=>{const{ref:e}=(0,o.getElement)(),t=(0,o.getContext)(),{targetNamespace:n,value:l}=t;if(l&&"prc-block/form-input-select"!==n){const{actions:r}=(0,o.store)(n);r.onSelectChange&&(console.log("onValueChange -> onSelectChange:",t,l,e),r.onSelectChange(l,e))}}}});var l,r; //# sourceMappingURL=view.js.map \ No newline at end of file diff --git a/blocks/form-input-select/build/view.js.map b/blocks/form-input-select/build/view.js.map index cdc97d302..2e4f91253 100644 --- a/blocks/form-input-select/build/view.js.map +++ b/blocks/form-input-select/build/view.js.map @@ -1 +1 @@ -{"version":3,"file":"view.js","mappings":"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","sources":["webpack://form-input-select/webpack/bootstrap","webpack://form-input-select/webpack/runtime/define property getters","webpack://form-input-select/webpack/runtime/hasOwnProperty shorthand","webpack://form-input-select/external module \"@wordpress/interactivity\"","webpack://form-input-select/./src/view.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nconst __WEBPACK_NAMESPACE_OBJECT__ = x({ [\"getContext\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), [\"getElement\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), [\"store\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) });","/* eslint-disable @wordpress/no-unused-vars-before-return */\nimport { store, getContext, getElement } from '@wordpress/interactivity';\n\nconst { actions } = store('prc-block/form-input-select', {\n\tactions: {\n\t\tonOpen: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.isOpen = true;\n\t\t},\n\t\tonClose: (event = null) => {\n\t\t\t// By default this runs on the on-blur directive on the input element\n\t\t\t// but we also use it as a shortcut to close the listbox on click,\n\t\t\t// so this is a quick check to see if we're using this as a shortcut or not.\n\t\t\tif (null !== event) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tconst context = getContext();\n\t\t\t// Because the on-blur event fires before the click event we need to slow things down a bit, 100 ms should do it\n\t\t\tlet isRunning = false;\n\t\t\tif (!isRunning) {\n\t\t\t\tisRunning = true;\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tcontext.isOpen = false;\n\t\t\t\t\tisRunning = false;\n\t\t\t\t}, 100);\n\t\t\t}\n\t\t},\n\t\tonReset: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.activeIndex = 0;\n\t\t\tcontext.value = '';\n\t\t\tcontext.label = '';\n\t\t\tcontext.filteredOptions = context.options;\n\t\t},\n\t\tgetOptionByValue: (value) => {\n\t\t\tconsole.log('getOptionByValue', value);\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst selectedOption = options.find(\n\t\t\t\t(option) => option.value === value\n\t\t\t);\n\t\t\tif (!selectedOption) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\t// find the object in the options array that matches the value\n\t\t\t// then set the activeId to the index of that object\n\t\t\tconst index = options.findIndex(\n\t\t\t\t(option) => option.value === selectedOption.value\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tindex,\n\t\t\t\t...selectedOption,\n\t\t\t};\n\t\t},\n\t\tmoveThroughOptions: (direction, id) => {\n\t\t\tconst context = getContext();\n\t\t\tconst { activeIndex, filteredOptions } = context;\n\t\t\tlet nextActive = null;\n\t\t\tif (activeIndex === null || isNaN(activeIndex)) {\n\t\t\t\tnextActive = 0;\n\t\t\t} else {\n\t\t\t\tnextActive = activeIndex + direction;\n\t\t\t}\n\t\t\tif (nextActive < 0) {\n\t\t\t\tnextActive = filteredOptions.length - 1;\n\t\t\t}\n\t\t\tif (nextActive >= filteredOptions.length) {\n\t\t\t\tnextActive = 0;\n\t\t\t}\n\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[nextActive].isSelected = true;\n\n\t\t\tcontext.activeIndex = nextActive;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\t\t\tconsole.log('moveThroughOptions', context, nextActive, direction);\n\t\t},\n\t\tonKeyUp: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { value } = event.target;\n\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst { ref } = getElement();\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tif (!id) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tactions.onReset();\n\t\t\t\tif (true === context.isOpen) {\n\t\t\t\t\tref.blur();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\t// actions.setValueOnEnter(id);\n\t\t\t}\n\t\t\tif (event.keyCode === 40 && event.key === 'ArrowDown') {\n\t\t\t\tactions.moveThroughOptions(1, id);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.keyCode === 38 && event.key === 'ArrowUp') {\n\t\t\t\tactions.moveThroughOptions(-1, id);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check if any of the options contain the value of the input\n\t\t\tconst matches = options.filter((option) => {\n\t\t\t\tconst { label } = option;\n\t\t\t\treturn label.toLowerCase().includes(value.toLowerCase());\n\t\t\t});\n\t\t\t// if there are matches set the filteredOptions to the matches\n\t\t\tif (matches.length) {\n\t\t\t\tcontext.filteredOptions = matches;\n\t\t\t}\n\t\t},\n\t\tonClick: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tconst val = ref.getAttribute('data-ref-value');\n\t\t\tconst { index, label, value } = actions.getOptionByValue(val);\n\n\t\t\tcontext.activeIndex = index;\n\t\t\tcontext.label = label;\n\t\t\tcontext.value = value;\n\n\t\t\t// find any other isSelected and set to false and then set isSelected\n\t\t\t// on the clicked option\n\t\t\t// also, reset the filteredOptions to the original options now that we have a value\n\t\t\tconst filteredOptions = options;\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[index].isSelected = true;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\n\t\t\tactions.onClose();\n\t\t},\n\t},\n\tcallbacks: {\n\t\tonInit: () => {\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\t// Loop through everything in options and add a isSelected property equal to false\n\t\t\toptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\t// set filteredOptions immediately...\n\t\t\tcontext.filteredOptions = options;\n\t\t},\n\t\tonValueChange: () => {\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { targetNamespace, value } = context;\n\t\t\t// if the value is not empty and the targetNamespace is not the same as the current namespace\n\t\t\t// then hoist the value up to the targetNamespace\n\t\t\tif (value && 'prc-block/form-input-select' !== targetNamespace) {\n\t\t\t\tconst { actions: targetActions } = store(targetNamespace);\n\t\t\t\tif (targetActions.onSelectChange) {\n\t\t\t\t\tconsole.log(\n\t\t\t\t\t\t'onValueChange -> onSelectChange:',\n\t\t\t\t\t\tcontext,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tref\n\t\t\t\t\t);\n\t\t\t\t\ttargetActions.onSelectChange(value, ref);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n});\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","y","__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__","x","d","actions","store","onOpen","getContext","isOpen","onClose","event","preventDefault","context","isRunning","setTimeout","onReset","activeIndex","value","label","filteredOptions","options","getOptionByValue","console","log","selectedOption","find","option","index","findIndex","moveThroughOptions","direction","id","nextActive","isNaN","length","forEach","isSelected","onKeyUp","target","ref","getElement","getAttribute","blur","keyCode","matches","filter","toLowerCase","includes","onClick","val","callbacks","onInit","onValueChange","targetNamespace","targetActions","onSelectChange"],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"view.js","mappings":"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","sources":["webpack://form-input-select/webpack/bootstrap","webpack://form-input-select/webpack/runtime/define property getters","webpack://form-input-select/webpack/runtime/hasOwnProperty shorthand","webpack://form-input-select/external module \"@wordpress/interactivity\"","webpack://form-input-select/./src/view.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nconst __WEBPACK_NAMESPACE_OBJECT__ = x({ [\"getContext\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), [\"getElement\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), [\"store\"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) });","/* eslint-disable @wordpress/no-unused-vars-before-return */\nimport { store, getContext, getElement } from '@wordpress/interactivity';\n\nconst { actions } = store('prc-block/form-input-select', {\n\tactions: {\n\t\tonOpen: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.isOpen = true;\n\t\t},\n\t\tonClose: (event = null) => {\n\t\t\t// By default this runs on the on-blur directive on the input element\n\t\t\t// but we also use it as a shortcut to close the listbox on click,\n\t\t\t// so this is a quick check to see if we're using this as a shortcut or not.\n\t\t\tif (null !== event) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tconst context = getContext();\n\t\t\t// Because the on-blur event fires before the click event we need to slow things down a bit, 100 ms should do it\n\t\t\tlet isRunning = false;\n\t\t\tif (!isRunning) {\n\t\t\t\tisRunning = true;\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tcontext.isOpen = false;\n\t\t\t\t\tisRunning = false;\n\t\t\t\t}, 100);\n\t\t\t}\n\t\t},\n\t\tonReset: () => {\n\t\t\tconst context = getContext();\n\t\t\tcontext.activeIndex = 0;\n\t\t\tcontext.value = '';\n\t\t\tcontext.label = '';\n\t\t\tcontext.filteredOptions = context.options;\n\t\t},\n\t\tgetOptionByValue: (value) => {\n\t\t\tconsole.log('getOptionByValue', value);\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst selectedOption = options.find(\n\t\t\t\t(option) => option.value === value\n\t\t\t);\n\t\t\tif (!selectedOption) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\t// find the object in the options array that matches the value\n\t\t\t// then set the activeId to the index of that object\n\t\t\tconst index = options.findIndex(\n\t\t\t\t(option) => option.value === selectedOption.value\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tindex,\n\t\t\t\t...selectedOption,\n\t\t\t};\n\t\t},\n\t\tmoveThroughOptions: (direction, id) => {\n\t\t\tconst context = getContext();\n\t\t\tconst { activeIndex, filteredOptions } = context;\n\t\t\tlet nextActive = null;\n\t\t\tif (activeIndex === null || isNaN(activeIndex)) {\n\t\t\t\tnextActive = 0;\n\t\t\t} else {\n\t\t\t\tnextActive = activeIndex + direction;\n\t\t\t}\n\t\t\tif (nextActive < 0) {\n\t\t\t\tnextActive = filteredOptions.length - 1;\n\t\t\t}\n\t\t\tif (nextActive >= filteredOptions.length) {\n\t\t\t\tnextActive = 0;\n\t\t\t}\n\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[nextActive].isSelected = true;\n\n\t\t\tcontext.activeIndex = nextActive;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\t\t\tconsole.log('moveThroughOptions', context, nextActive, direction);\n\t\t},\n\t\tonKeyUp: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { value } = event.target;\n\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconst { ref } = getElement();\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tif (!id) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tactions.onReset();\n\t\t\t\tif (true === context.isOpen) {\n\t\t\t\t\tref.blur();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (event.key === 'Enter') {\n\t\t\t\t// actions.setValueOnEnter(id);\n\t\t\t}\n\t\t\tif (event.keyCode === 40 && event.key === 'ArrowDown') {\n\t\t\t\tactions.moveThroughOptions(1, id);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.keyCode === 38 && event.key === 'ArrowUp') {\n\t\t\t\tactions.moveThroughOptions(-1, id);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check if any of the options contain the value of the input\n\t\t\tconst matches = options.filter((option) => {\n\t\t\t\tconst { label } = option;\n\t\t\t\treturn label.toLowerCase().includes(value.toLowerCase());\n\t\t\t});\n\t\t\t// if there are matches set the filteredOptions to the matches\n\t\t\tif (matches.length) {\n\t\t\t\tcontext.filteredOptions = matches;\n\t\t\t}\n\t\t},\n\t\tonClick: (event) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\n\t\t\tconst id = ref.getAttribute('aria-controls');\n\t\t\tconst val = ref.getAttribute('data-ref-value');\n\t\t\tconst { index, label, value } = actions.getOptionByValue(val);\n\n\t\t\tcontext.activeIndex = index;\n\t\t\tcontext.label = label;\n\t\t\tcontext.value = value;\n\n\t\t\tconsole.log('onClick', context, index, label, value);\n\n\t\t\t// find any other isSelected and set to false and then set isSelected\n\t\t\t// on the clicked option\n\t\t\t// also, reset the filteredOptions to the original options now that we have a value\n\t\t\tconst filteredOptions = options;\n\t\t\tfilteredOptions.forEach((option) => {\n\t\t\t\toption.isSelected = false;\n\t\t\t});\n\t\t\tfilteredOptions[index].isSelected = true;\n\t\t\tcontext.filteredOptions = filteredOptions;\n\n\t\t\tactions.onClose();\n\t\t},\n\t},\n\tcallbacks: {\n\t\tonInit: () => {\n\t\t\tconst context = getContext();\n\t\t\tconst { options } = context;\n\t\t\tconsole.log(\"form-input-select -> onInit\", context, options);\n\t\t},\n\t\tonValueChange: () => {\n\t\t\tconst { ref } = getElement();\n\t\t\tconst context = getContext();\n\t\t\tconst { targetNamespace, value } = context;\n\t\t\t// if the value is not empty and the targetNamespace is not the same as the current namespace\n\t\t\t// then hoist the value up to the targetNamespace\n\t\t\tif (value && 'prc-block/form-input-select' !== targetNamespace) {\n\t\t\t\tconst { actions: targetActions } = store(targetNamespace);\n\t\t\t\tif (targetActions.onSelectChange) {\n\t\t\t\t\tconsole.log(\n\t\t\t\t\t\t'onValueChange -> onSelectChange:',\n\t\t\t\t\t\tcontext,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tref\n\t\t\t\t\t);\n\t\t\t\t\ttargetActions.onSelectChange(value, ref);\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n});\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","y","__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__","x","d","actions","store","onOpen","getContext","isOpen","onClose","event","preventDefault","context","isRunning","setTimeout","onReset","activeIndex","value","label","filteredOptions","options","getOptionByValue","console","log","selectedOption","find","option","index","findIndex","moveThroughOptions","direction","id","nextActive","isNaN","length","forEach","isSelected","onKeyUp","target","ref","getElement","getAttribute","blur","keyCode","matches","filter","toLowerCase","includes","onClick","val","callbacks","onInit","onValueChange","targetNamespace","targetActions","onSelectChange"],"sourceRoot":""} \ No newline at end of file diff --git a/blocks/form-input-select/src/render.php b/blocks/form-input-select/src/render.php index 0414db8a7..317b9fe01 100644 --- a/blocks/form-input-select/src/render.php +++ b/blocks/form-input-select/src/render.php @@ -10,11 +10,15 @@ array( 'label' => 'Option 1', 'value' => 'option-1', - 'isSelected' => ( $input_value === 'option-1' ), + 'isSelected' => false, ), ); $input_disabled = array_key_exists( 'disabled', $attributes ) ? $attributes['disabled'] : false; $input_options = empty($input_options) && array_key_exists( 'prc-block/form-input-options', $block->context) ? $block->context['prc-block/form-input-options'] : $input_options; +$input_options = array_map( function( $option ) use ( $input_value ) { + $option['isSelected'] = $option['value'] === $input_value; + return $option; +}, $input_options ); $input_id = md5( $target_namespace . $input_name ); $input_attrs = \PRC\Platform\Block_Utils\get_block_html_attributes( array( @@ -43,7 +47,7 @@ 'data-wp-on--click' => 'actions.onClick', ) ); $option_template = wp_sprintf( - '
', + '', $option_attrs ); $options_list = wp_sprintf( @@ -68,7 +72,7 @@ 'isError' => false, 'isSuccess' => false, 'isProcessing' => false, - 'filteredOptions' => array(), + 'filteredOptions' => $input_options, 'options' => $input_options, )), 'data-wp-init' => 'callbacks.onInit', diff --git a/blocks/form-input-select/src/view.js b/blocks/form-input-select/src/view.js index 2646598b0..aa7a7d367 100644 --- a/blocks/form-input-select/src/view.js +++ b/blocks/form-input-select/src/view.js @@ -133,6 +133,8 @@ const { actions } = store('prc-block/form-input-select', { context.label = label; context.value = value; + console.log('onClick', context, index, label, value); + // find any other isSelected and set to false and then set isSelected // on the clicked option // also, reset the filteredOptions to the original options now that we have a value @@ -150,12 +152,7 @@ const { actions } = store('prc-block/form-input-select', { onInit: () => { const context = getContext(); const { options } = context; - // Loop through everything in options and add a isSelected property equal to false - options.forEach((option) => { - option.isSelected = false; - }); - // set filteredOptions immediately... - context.filteredOptions = options; + console.log("form-input-select -> onInit", context, options); }, onValueChange: () => { const { ref } = getElement();