Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
strategyToUse === 'custom'
? render || providerRender
: rendererFromMap || null;
if (!renderToUse) {
console.error(
`Icon: rendering not implemented for ${String(strategyToUse)}.`
);
return null;
}
const rendered = renderToUse({
...rest,
...optionsRest,
content: contentToUse,
className: classNames(
'rmwc-icon',
basenameToUse,
rest.className,
optionsRest.className,
iconClassName,
{
[`rmwc-icon--size-${size || ''}`]: !!size
}
)
});
// Unwrap double layered icons...
if (
rendered.props.children &&
rendered.props.children.type &&
['Avatar', 'Icon'].includes(rendered.props.children.type.displayName)
// This flag really determines a lot
// is surfaceIsRoot is true, then the surface props are spread
// to the underlying component, otherwise the only place they
// can be picked up is by the context consumer
const surfaceIsRoot = !surface || !unbounded;
const unboundedProp = unbounded
? { 'data-mdc-ripple-is-unbounded': true }
: {};
const rippleSurfaceProps = surfaceIsRoot
? this.surface.props({ style: child.props.style })
: {};
let finalClassNames = classNames(
className,
rippleSurfaceProps.className,
child.props.className,
{
'mdc-ripple-surface':
typeof surface === 'boolean' ? surface : surface === undefined,
'mdc-ripple-surface--primary': primary,
'mdc-ripple-surface--accent': accent
}
);
// Fixes a ripple artifact issue
// that is caused when clicking a button disables it
// https://codesandbox.io/s/842vo56019
if (rest.disabled) {
finalClassNames = finalClassNames.replace(
}
)
});
// Unwrap double layered icons...
if (
rendered.props.children &&
rendered.props.children.type &&
['Avatar', 'Icon'].includes(rendered.props.children.type.displayName)
) {
return React.cloneElement(rendered.props.children, {
...rendered.props.children.props,
...rendered.props,
// prevents an infinite loop
children: rendered.props.children.props.children,
className: classNames(
rendered.props.className,
rendered.props.children.props.className
)
});
}
return rendered;
}
);
handleClick(evt: React.MouseEvent) {
this.props.onClick && this.props.onClick(evt);
// fixes an issue with nested span element on list items
const el = closest(evt.target, '.mdc-list-item');
el && this.foundation.handleItemAction(el);
}
componentDidMount() {
if (this.root.ref) {
const anchor = closest(
this.root.ref,
`.${MDCMenuSurfaceFoundation.cssClasses.ANCHOR}`
);
anchor && (this.anchorElement = anchor);
}
// this has to be run AFTER we try to get our anchor
super.componentDidMount();
}
(evt: React.MouseEvent) => {
props.onClick?.(evt);
// fixes an issue with nested span element on list items
const el = closest(evt.target, '.mdc-list-item');
el && foundation.handleItemAction(el);
},
[foundation, props.onClick]
const handleSurfaceClick = (evt: React.MouseEvent | MouseEvent) => {
if (evt.target instanceof Element) {
let el = evt.target;
const button = closest(el, '.mdc-button') as Element;
if (button) {
el = button;
}
if (
props.dismissesOnAction &&
el.classList.contains('mdc-snackbar__action')
) {
foundation.handleActionButtonClick(
evt as MouseEvent,
// @ts-ignore
el.dataset.mdcSnackbarAction
);
} else if (el.classList.contains('mdc-snackbar__dismiss')) {
foundation.handleActionIconClick(evt as MouseEvent);
}
handleSurfaceClick(evt: React.MouseEvent | MouseEvent) {
if (evt.target instanceof Element) {
let el = evt.target;
const button = closest(el, '.mdc-button') as Element;
if (button) {
el = button;
}
if (
this.props.dismissesOnAction &&
el.classList.contains('mdc-snackbar__action')
) {
this.foundation.handleActionButtonClick(
evt as MouseEvent,
// @ts-ignore
el.dataset.mdcSnackbarAction
);
} else if (el.classList.contains('mdc-snackbar__dismiss')) {
this.foundation.handleActionIconClick(evt as MouseEvent);
}
handleClick(evt: React.MouseEvent) {
this.props.onClick && this.props.onClick(evt);
const index = this.getListItemIndex(evt);
// Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
const toggleCheckbox = !matches(
evt.target as HTMLElement,
MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
);
this.foundation.handleClick(index, toggleCheckbox);
}
(evt: React.MouseEvent) => {
props.onClick?.(evt);
const index = getListItemIndex(evt);
// Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
const toggleCheckbox = !matches(
evt.target as HTMLElement,
MDCListFoundation.strings.CHECKBOX_RADIO_SELECTOR
);
foundation.handleClick(index, toggleCheckbox);
},
[getListItemIndex, foundation, props.onClick]