-
Notifications
You must be signed in to change notification settings - Fork 487
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
LPD-46157 Create Icon Selector (No Keyboard Interactions) #5929
base: master
Are you sure you want to change the base?
Conversation
Hey @matuzalemsteles, this is the inicial commits for the icon selector component. |
e830590
to
037661f
Compare
…display items on a grid, filter options and select an icon
…t and it's imports
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.
Thanks Ilza!
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.
Great work here, I just added some comments so we can readjust the component.
const fetchIcons = () => { | ||
const iconNames: Array<string> = []; | ||
|
||
fetch(spritemap) | ||
.then((res) => res.text()) | ||
.then((res) => { | ||
const parser = new DOMParser(); | ||
const doc = parser.parseFromString(res, 'image/svg+xml'); | ||
|
||
const symbols = doc.querySelectorAll('symbol'); | ||
|
||
symbols.forEach((symbol) => | ||
iconNames.push(symbol.getAttribute('id') || '') | ||
); | ||
|
||
setIconNames(iconNames); | ||
}); | ||
}; | ||
|
||
useEffect(() => { | ||
fetchIcons(); | ||
}, []); |
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.
We can use useResource
here.
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.
Nice, will try that!
|
||
import DropdownSelector from './DropdownSelector'; | ||
|
||
export function IconSelector() { |
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.
Shouldn't we receive the same props from the DropdownSelector
component here to pass to it?
https://liferay.atlassian.net/browse/LPD-46157
This pull request is a draft. As this is a new component, I will submit changes in stages to facilitate review.
Below there's a video of the component working.
I haven't worked on styles yet.
simplescreenrecorder-2025-01-27_17.05.24.mp4