@10up/block-components/dist/components/icon-picker/index.js

10up Components built for the WordPress Block Editor.

!function(){"use strict";var e={4512:function(e,n,t){t.d(n,{useFilteredList:function(){return i}});var o=t(7966),r=require("@leeoniya/ufuzzy");const c=new(t.n(r)());function i(e=[],n="",t="name"){const[r,i]=(0,o.useState)(e),a=(0,o.useMemo)(()=>e.map(e=>e[t]),[e,t]),u=(0,o.useCallback)(n=>{const t=c.filter(a,n);return t?.map(n=>e[n])||[]},[a,e]);return(0,o.useEffect)(()=>{const t=""!==n&&!!e?.length?u(n):e;i(t)},[n,u,e]),[r]}},1740:function(e,n,t){t.d(n,{useIcon:function(){return u},useIcons:function(){return a}});var o=t(5214),r=t(7966),c=t(8475);function i(e){return e.icons.map(n=>({...n,iconSet:e.name}))}const a=(e="")=>{const[n,t]=(0,r.useState)([]),a=(0,o.useSelect)(n=>{const{getIconSet:t,getIconSets:o}=n(c.N);return e?t(e):o()},[e]);return(0,r.useEffect)(()=>{t(e?i(a):Object.values(a).reduce((e,n)=>[...e,...i(n)],[]))},[a,e]),n},u=(e,n)=>(0,o.useSelect)(t=>t(c.N).getIcon(e,n),[e,n])},7785:function(e,n,t){t.d(n,{store:function(){return m}});var o={};t.r(o),t.d(o,{getIcon:function(){return s},getIconSet:function(){return a},getIconSets:function(){return i},getIcons:function(){return u}});var r={};t.r(r),t.d(r,{registerIconSet:function(){return l},removeIconSet:function(){return p}});var c=t(5214);function i(e){const{iconSets:n}=e;return Object.values(n)}function a(e,n){const{iconSets:t}=e;return t[n]??[]}function u(e,n){const{iconSets:t}=e;return t?.hasOwnProperty(n)?t[n]?.icons??[]:[]}function s(e,n,t){const{iconSets:o}=e;return o?.hasOwnProperty(n)?o[n]?.icons?.find(e=>e.name===t)??[]:void 0}function l(e){return{type:"REGISTER_ICON_SET",iconSet:e}}function p(e){return{type:"REMOVE_ICON_SET",name:e}}const d="tenup/icons",m=(0,c.createReduxStore)(d,{reducer:function(e={iconSets:{}},n){switch(n.type){case"REGISTER_ICON_SET":return{...e,iconSets:{...e.iconSets,[n.iconSet.name]:n.iconSet}};case"REMOVE_ICON_SET":if(e.iconSets.hasOwnProperty(n.name)){const t={...e};return delete t.iconSets[n.name],t}return e;default:return e}},selectors:o,actions:r});!!(0,c.select)(d)||(0,c.register)(m)},8475:function(e,n,t){t.d(n,{N:function(){return o.store}});var o=t(7785)},5227:function(e){e.exports=require("@emotion/styled")},2050:function(e){e.exports=require("@wordpress/components")},6314:function(e){e.exports=require("@wordpress/compose")},5214:function(e){e.exports=require("@wordpress/data")},7966:function(e){e.exports=require("@wordpress/element")},8450:function(e){e.exports=require("@wordpress/i18n")}},n={};function t(o){var r=n[o];if(void 0!==r)return r.exports;var c=n[o]={exports:{}};return e[o](c,c.exports,t),c.exports}t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,{a:n}),n},t.d=function(e,n){for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{Icon:function(){return u},IconPicker:function(){return I},IconPickerToolbarButton:function(){return k},InlineIconPicker:function(){return O}});var r=t(7966),c=t(2050),i=t(1740);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},a.apply(null,arguments)}const u=(0,r.forwardRef)(function(e,n){const{name:t,iconSet:o,onClick:u,...s}=e,l=(0,i.useIcon)(o,t);if(!l||Array.isArray(l))return(0,r.createElement)(c.Spinner,null);const p={};return"function"===typeof u&&(p.role="button",p.tabIndex=0,p["aria-label"]="Change Icon",p.onClick=u),(0,r.createElement)("div",a({},p,{dangerouslySetInnerHTML:{__html:l.source}},s,{ref:n}))});var s=t(5227),l=t.n(s),p=t(8450),d=t(6314),m=require("react-window"),f=t(4512);function g(){return g=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},g.apply(null,arguments)}const h=(0,r.forwardRef)(function(e,n){const{children:t}=e;return(0,r.createElement)("div",g({ref:n,className:"component-icon-picker__tooltip-content"},e),t)}),b=l()(u)`
	background-color: ${({selected:e})=>e?"black":"white"};
	color: ${({selected:e})=>e?"white":"black"};
	fill: ${({selected:e})=>e?"white":"black"};
	padding: 5px;
	border: none;
	border-radius: 4px;
	height: 34px;
	width: 34px;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
		background-color: ${({selected:e})=>e?"#555D66":"#f3f4f5"};
	}

	& svg {
		max-height: 100%;
		max-width: 100%;
		height: auto;
		width: 100%;
		object-fit: contain;
	}
`,S=e=>{const{icon:n,isChecked:t}=e;return(0,r.createElement)(c.Tooltip,{text:n.label},(0,r.createElement)(h,null,(0,r.createElement)(b,{selected:t,key:n.name,name:n.name,iconSet:n.iconSet})))},v=(0,r.memo)(e=>{const{columnIndex:n,rowIndex:t,style:o,data:i}=e,{icons:a,selectedIcon:u,onChange:s}=i,l=a[5*t+n],p=u?.name===l?.name&&u?.iconSet===l?.iconSet;if(!l)return null;const d=(0,r.createElement)(S,{isChecked:p,icon:l});return(0,r.createElement)("div",{style:o},(0,r.createElement)(c.CheckboxControl,{key:l.name,label:d,checked:p,onChange:()=>s(l),className:"component-icon-picker__checkbox-control"}))},m.areEqual),E=l()(m.FixedSizeGrid)`
	.component-icon-picker__checkbox-control {
		margin-bottom: 0;
	}

	.components-checkbox-control__input,
	.components-checkbox-control__input-container {
		display: none;
	}
`,x=e=>{const{icons:n,selectedIcon:t,onChange:o}=e,i=(0,r.useMemo)(()=>({icons:n,selectedIcon:t,onChange:o}),[n,t,o]);return(0,r.createElement)(c.NavigableMenu,{orientation:"vertical",className:"component-icon-picker__list"},(0,r.createElement)(E,{columnCount:5,columnWidth:49.6,rowCount:Math.ceil(n.length/5),rowHeight:49.6,itemData:i,height:200,width:248},v))},I=e=>{const{value:n,onChange:t,iconSet:o,label:a="",...u}=e,s=(0,i.useIcons)(o||""),l=`icon-picker-${(0,d.useInstanceId)(I)}`,[m,h]=(0,r.useState)(""),[b]=(0,f.useFilteredList)(s,m),S=!!b.length;return(0,r.createElement)(c.BaseControl,g({label:a,id:l,className:"component-icon-picker"},u),(0,r.createElement)(c.SearchControl,{value:m,onChange:h,id:l}),S?(0,r.createElement)(x,{icons:b,selectedIcon:n,onChange:t}):(0,r.createElement)("p",null,(0,p.__)("No icons were found...")))},y=l()(I)`
	margin: 6px;
	width: 248px;
	height: 248px;
`,k=e=>{const{value:n,buttonLabel:t=(0,p.__)("Select Icon")}=e,o=n?.name&&n?.iconSet?(0,r.createElement)(u,{name:n?.name,iconSet:n?.iconSet}):null;return(0,r.createElement)(c.Dropdown,{className:"component-icon-picker-toolbar-button",contentClassName:"component-icon-picker-toolbar-button__content",popoverProps:{placement:"bottom-start"},renderToggle:({isOpen:e,onToggle:n})=>(0,r.createElement)(c.ToolbarButton,{onClick:n,"aria-expanded":e,icon:o},t),renderContent:()=>(0,r.createElement)(y,e)})};function _(){return _=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},_.apply(null,arguments)}const w=l()(I)`
	margin: 6px;
	width: 248px;
	height: 248px;
`,C=e=>{const{renderToggle:n,...t}=e;return(0,r.createElement)(c.Dropdown,{className:"component-icon-picker-inline-button",contentClassName:"component-icon-picker-inline__content",popoverProps:{placement:"bottom-start"},renderToggle:n,renderContent:()=>(0,r.createElement)(w,t)})},O=e=>{const{value:n,...t}=e,o=(0,r.useCallback)(({onToggle:e})=>(0,r.createElement)(u,_({name:n?.name,iconSet:n?.iconSet,onClick:e},t)),[n,t]);return(0,r.createElement)(C,_({renderToggle:o},e))};module.exports=o}();
//# sourceMappingURL=index.js.map