-
Notifications
You must be signed in to change notification settings - Fork 601
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Icon picker component (WIP) #3487
base: next
Are you sure you want to change the base?
Conversation
@Pavel910 @SvenAlHamad I have a couple questions about Icon Picker:
|
@Pavel910 @SvenAlHamad |
const renderCell = useCallback(() => { | ||
return function renderCell({ | ||
columnIndex, | ||
key, | ||
rowIndex, | ||
style | ||
}: GridCellProps): React.ReactNode { | ||
const item = filteredIcons[rowIndex * COLUMN_COUNT + columnIndex]; | ||
if (!item) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<Cell | ||
key={key} | ||
style={style} | ||
onClick={() => { | ||
onChange({ | ||
type: item.type, | ||
name: item.name, | ||
...(item.type === "emoji" ? { skinTone: item.skinTone } : {}), | ||
...(item.type === "icon" ? { color } : {}), | ||
...(item.width ? { width: item.width } : {}), | ||
value: item.value | ||
}); | ||
}} | ||
color={color} | ||
isActive={item.name === value.name} | ||
> | ||
<IconRenderer icon={item} size={32} /> | ||
</Cell> | ||
); | ||
}; | ||
}, [filteredIcons, color]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is overcomplicated; Why return a new function? Further down in JSX, you just call renderCell()
when passing it to props, so you can essentially just do this:
const renderCell = useCallback(({ columnIndex, key, rowIndex }) => { .... }, [filteredIcons, color]);
And then you pass renderCell
as a cellRenderer
prop without invoking it.
const emojis = icons.filter(icon => icon.type === "emoji"); | ||
const defaultIcons = icons.filter(icon => icon.type === "icon"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is something you want to memoize with useMemo
.
}; | ||
|
||
export const IconPackProvider = ({ provider }: IconPackProviderProps) => { | ||
const icons = provider(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we make this work with async providers? Think code splitting... Would be nice to allow icons to be lazy loaded, or even loaded from an API. That way they'll only load when IconPicker is actually being used in the UI.
I was testing the icon component implementation and have a few UX related points that require a bit of polish:
|
Co-authored-by: Pavel Denisjuk <pavel@webiny.com> Co-authored-by: Leonardo Giacone <leonardo.giacone@gmail.com>
Changes
Implements issue "Icon picker component".
Implementation steps
Most of the implementation is described here.
For custom icon support IconPickerConfig was added under
packages/app-admin/src/components/IconPicker/config/index.tsx
.For the most part it is similar to what we've done with audit logs here.
It allows to add custom icons/emojis inside DefaultIcons. Also there is an example of how it can be used.
UI
Color Picker UI is currently only available on
![image](https://private-user-images.githubusercontent.com/77202393/265026483-a4c540cd-3e8d-456e-bd75-b4527df23cc7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU4NjMzNDUsIm5iZiI6MTcyNTg2MzA0NSwicGF0aCI6Ii83NzIwMjM5My8yNjUwMjY0ODMtYTRjNTQwY2QtM2U4ZC00NTZlLWJkNzUtYjQ1MjdkZjIzY2M3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA5VDA2MjQwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlkODIzMjZkNzI3OGFmNTQxZmU2ZjUyMWMzNzVlMzc1NmJjYjAzNDliNWI0OTQzNWEzMjA4MzY2NWExODMzNDgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OBpxmsBhxK0sPZz25EbT_QeW7jWfj8jX5v7sG-59HdY)
/page-builder/block-categories
page for test purposes.How Has This Been Tested?
Manual
Documentation
None