Skip to content

Commit 091f250

Browse files
kaeizenkaeizen
committed
add icons to icon library
1 parent 0dfe241 commit 091f250

File tree

6 files changed

+89
-34
lines changed

6 files changed

+89
-34
lines changed

‎src/components/font-awesome-icon/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ const addSVGAttributes = ( svgHTML, attributesToAdd = {}, attributesToRemove = [
8080
}
8181

8282
const FontAwesomeIcon = memo( props => {
83+
const { svgAttrsToAdd = { width: '32', height: '32' }, svgAttrsToRemove = [ 'id', 'data-name' ] } = props
8384
const [ forceUpdateCount, setForceUpdateCount ] = useState( 0 )
8485
const forceUpdate = () => {
8586
setForceUpdateCount( forceUpdateCount + 1 )
@@ -91,7 +92,7 @@ const FontAwesomeIcon = memo( props => {
9192
if ( typeof props.value === 'string' && props.value.match( /^<svg/ ) ) {
9293
let svg = addSVGAriaLabel( props.value, props.ariaLabel )
9394
// Add fallback SVG width and height values.
94-
svg = addSVGAttributes( svg, { width: '32', height: '32' } )
95+
svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
9596
return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
9697
}
9798

@@ -109,7 +110,7 @@ const FontAwesomeIcon = memo( props => {
109110

110111
let svg = addSVGAriaLabel( iconHTML, props.ariaLabel )
111112
// Add fallback SVG width and height values.
112-
svg = addSVGAttributes( svg, { width: '32', height: '32' } )
113+
svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
113114
return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
114115
}
115116

@@ -123,7 +124,7 @@ const FontAwesomeIcon = memo( props => {
123124

124125
let svg = addSVGAriaLabel( iconHTML, props.ariaLabel )
125126
// Add fallback SVG width and height values.
126-
svg = addSVGAttributes( svg, { width: '32', height: '32' } )
127+
svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
127128
return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
128129
} )
129130

‎src/components/icon-search-popover/index.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
import { faGetIcon, faFetchIcon } from '~stackable/util'
2626
import { FileDrop } from 'react-file-drop'
2727
import classnames from 'classnames'
28+
import { applyFilters } from '@wordpress/hooks'
2829

2930
let searchTimeout = null
3031
let tempMediaUpload = null
@@ -82,7 +83,7 @@ export const cleanSvgString = svgString => {
8283

8384
const IconSearchPopover = props => {
8485
const [ value, setValue ] = useState( '' )
85-
const [ results, setResults ] = useState( [] )
86+
const [ results, setResults ] = useState( { faIcons: [], iconLibrary: [] } )
8687
const [ isBusy, setIsBusy ] = useState( false )
8788
const [ isDropping, setIsDropping ] = useState( false )
8889

@@ -150,6 +151,11 @@ const IconSearchPopover = props => {
150151
fr.onload = function( e ) {
151152
setIsDropping( false )
152153
const svgString = cleanSvgString( addCustomIconClass( e.target.result ) )
154+
155+
if ( isPro && props.showPrompt ) {
156+
applyFilters( 'stackable.global-settings.inspector.icon-library.prompt', null, svgString )
157+
}
158+
153159
props.onChange( svgString )
154160
props.onClose()
155161
}
@@ -243,13 +249,24 @@ const IconSearchPopover = props => {
243249
</div>
244250
<div className="ugb-icon-popover__iconlist">
245251
{ isBusy && <Spinner /> }
246-
{ ! isBusy && results.map( ( { prefix, iconName }, i ) => {
252+
{ ! isBusy && applyFilters( 'stackable.global-settings.inspector.icon-library.icons', null, {
253+
icons: results.iconLibrary, onChange: props.onChange, onClose: props.onClose,
254+
} ) }
255+
{ ! isBusy && results.faIcons.map( ( { prefix, iconName }, i ) => {
247256
const iconValue = `${ prefix }-${ iconName }`
248257
return <button
249258
key={ i }
250259
className={ `components-button ugb-prefix--${ prefix } ugb-icon--${ iconName }` }
251260
onClick={ async () => {
252-
if ( props.returnSVGValue ) {
261+
if ( props.returnSVGValue && props.returnIconName ) {
262+
let svgIcon = faGetIcon( prefix, iconName )
263+
264+
if ( ! svgIcon ) {
265+
await faFetchIcon( prefix, iconName )
266+
svgIcon = faGetIcon( prefix, iconName )
267+
}
268+
props.onChange( cleanSvgString( svgIcon ), prefix, iconName )
269+
} else if ( props.returnSVGValue ) {
253270
let svgIcon = faGetIcon( prefix, iconName )
254271

255272
if ( ! svgIcon ) {
@@ -266,7 +283,7 @@ const IconSearchPopover = props => {
266283
<FontAwesomeIcon prefix={ prefix } iconName={ iconName } />
267284
</button>
268285
} ) }
269-
{ ! isBusy && ! results.length &&
286+
{ ! isBusy && ! results.faIcons.length && ! results.iconLibrary.length &&
270287
<p className="components-base-control__help">{ __( 'No matches found', i18n ) }</p>
271288
}
272289
</div>
@@ -309,6 +326,7 @@ IconSearchPopover.defaultProps = {
309326
onClose: noop,
310327
returnSVGValue: true, // If true, the value provided in onChange will be the SVG markup of the icon. If false, the value will be a prefix-iconName value.
311328
allowReset: true,
329+
showPrompt: true,
312330
__deprecatedAnchorRef: undefined,
313331
__deprecatedPosition: 'center',
314332
__deprecatedOnClickOutside: noop,

‎src/components/icon-search-popover/search.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { applyFilters } from '@wordpress/hooks'
12
import {
23
fontAwesomeSearchProIcons, iconsFaKit, iconsFaProKitVersion, iconsFaFreeKitVersion,
34
} from 'stackable'
@@ -23,13 +24,17 @@ export const searchFontAwesomeIconName = async ( name = 'icon', isPro = fontAwes
2324
} )
2425
.then( r => r.json() )
2526

26-
return data.data.search.reduce( ( iconResults, iconData ) => {
27+
const faIcons = data.data.search.reduce( ( iconResults, iconData ) => {
2728
convertFontAwesomeToIcon( iconData, isPro ).forEach( icon => {
2829
iconResults.push( icon )
2930
} )
3031

3132
return iconResults
3233
}, [] )
34+
35+
const iconLibrary = applyFilters( 'stackable.global-settings.inspector.icon-library.search-icons', null, name )
36+
37+
return { faIcons, iconLibrary }
3338
}
3439

3540
/**

‎src/components/sortable-picker/index.js‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,14 @@ import {
1111
* WordPress dependencies
1212
*/
1313
import {
14-
ColorPicker,
1514
BaseControl,
16-
ColorIndicator,
1715
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
1816
__experimentalHStack as HStack,
1917
Dashicon,
2018
Dropdown,
2119
} from '@wordpress/components'
2220
import { useState } from '@wordpress/element'
2321
import { __ } from '@wordpress/i18n'
24-
import { applyFilters } from '@wordpress/hooks'
2522

2623
const popoverProps = {
2724
placement: 'left-start',
@@ -42,7 +39,6 @@ const DRAG_KEYCODES = {
4239
const SortablePicker = props => {
4340
const {
4441
items,
45-
itemType,
4642
dropdownOnAdd = false,
4743
onChangeItem,
4844
onDeleteItem,
@@ -99,7 +95,8 @@ const SortablePicker = props => {
9995
item={ item }
10096
onDelete={ () => onDeleteItem( item ) }
10197
onChange={ item => onChangeItem( item ) }
102-
itemType={ itemType }
98+
ItemPreview={ props.ItemPreview }
99+
ItemPicker={ props.ItemPicker }
103100
/> ) ) }
104101
</SortableContainer>
105102
</div>
@@ -132,7 +129,9 @@ const LabeledItemIndicator = props => {
132129
item,
133130
onDelete,
134131
onChange,
135-
itemType,
132+
ItemPreview = null,
133+
ItemPicker = null,
134+
136135
} = props
137136

138137
const [ isFocused, setIsFocused ] = useState( false )
@@ -155,12 +154,7 @@ const LabeledItemIndicator = props => {
155154
isPressed={ isOpen }
156155
>
157156
<HStack justify="flex-start">
158-
{ itemType === 'color' &&
159-
<ColorIndicator
160-
className="stk-color-indicator block-editor-panel-color-gradient-settings__color-indicator"
161-
colorValue={ item.color }
162-
/> }
163-
{ itemType === 'icon' && <p> Icon </p> }
157+
<ItemPreview item={ item } />
164158
<input
165159
className="components-input-control__input"
166160
value={ item.name }
@@ -196,20 +190,7 @@ const LabeledItemIndicator = props => {
196190
} }
197191
renderContent={ () => (
198192
<div className="stk-color-palette-control__popover-content">
199-
{ itemType === 'color' &&
200-
<ColorPicker
201-
onChange={ value => onChange( {
202-
...item,
203-
color: value,
204-
} ) }
205-
color={ item.color }
206-
enableAlpha={ true }
207-
/>
208-
}
209-
{ itemType === 'icon' && <>
210-
<p>hello</p>
211-
{ applyFilters( 'stackable.global-settings.inspector.icon-library.icon-picker', null ) }
212-
</> }
193+
<ItemPicker item={ item } onChange={ onChange } />
213194
</div>
214195
) }
215196
/>

‎src/global-settings.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,35 @@ public function register_global_settings() {
281281
'default' => '',
282282
)
283283
);
284+
285+
register_setting(
286+
'stackable_global_settings',
287+
'stackable_icon_library',
288+
array(
289+
'type' => 'array',
290+
'description' => __( 'Stackable Icon Library', STACKABLE_I18N ),
291+
'sanitize_callback' => array( $this, 'sanitize_array_setting' ),
292+
'show_in_rest' => array(
293+
'schema' => array(
294+
'items' => array(
295+
'type' => 'object',
296+
'properties' => array(
297+
'name' => array(
298+
'type' => 'string',
299+
),
300+
'key' => array(
301+
'type' => 'string',
302+
),
303+
'icon' => array(
304+
'type' => 'string',
305+
),
306+
)
307+
)
308+
)
309+
),
310+
'default' => '',
311+
)
312+
);
284313
}
285314

286315
/**

‎src/plugins/global-settings/colors/color-picker.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
} from '@wordpress/data'
2222
import { models } from '@wordpress/api'
2323
import { __, sprintf } from '@wordpress/i18n'
24+
import { ColorIndicator, ColorPicker } from '@wordpress/components'
2425

2526
let saveTimeout = null
2627

@@ -126,6 +127,24 @@ const ColorPickers = props => {
126127
setIsSorting( false )
127128
}
128129

130+
const ItemPreview = ( { item } ) => {
131+
return <ColorIndicator
132+
className="stk-color-indicator block-editor-panel-color-gradient-settings__color-indicator"
133+
colorValue={ item.color }
134+
/>
135+
}
136+
137+
const ItemPicker = ( { item, onChange } ) => {
138+
return <ColorPicker
139+
onChange={ value => onChange( {
140+
...item,
141+
color: value,
142+
} ) }
143+
color={ item.color }
144+
enableAlpha={ true }
145+
/>
146+
}
147+
129148
return (
130149
<SortablePicker
131150
ref={ ref }
@@ -135,6 +154,8 @@ const ColorPickers = props => {
135154
onDeleteItem={ onColorDelete }
136155
handleAddItem={ handleAddIcon }
137156
onSortEnd={ onSortEnd }
157+
ItemPreview={ ItemPreview }
158+
ItemPicker={ ItemPicker }
138159
{ ...props }
139160
/>
140161
)

0 commit comments

Comments
 (0)