Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
export const FocusZoneListExample: React.FunctionComponent = () => {
// Initialize the selection when the component is first rendered (same instance will be reused)
const selection = useConst(() => {
const sel = new Selection();
sel.setItems(ITEMS);
return sel;
});
return (
{ITEMS.map((item, index) => (
const ApiDetailsList: React.FunctionComponent = React.memo(props => {
// Alphabetize the items and add a key to each one.
const { itemKind, items } = props;
const processedItems: IApiEnumProperty[] | IApiInterfaceProperty[] | IMethod[] = useConst(() => {
if (itemKind === 'enum') {
return (items as IApiEnumProperty[])
.sort((a, b) => (a.value < b.value ? -1 : a.value > b.value ? 1 : 0))
.map(item => ({ ...item, key: item.name }));
}
return (items as IApiInterfaceProperty[] | IMethod[])
.sort((a, b) => {
// Ensure anything required comes first if handling props.
if (itemKind === 'property' && !!a.required !== !!b.required) {
return a.required ? -1 : 1;
}
// Ensure the constructor is first if handling methods.
if (itemKind === 'method' && a.name === 'constructor') {
return -1;
}
return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
return (items as IApiInterfaceProperty[] | IMethod[])
.sort((a, b) => {
// Ensure anything required comes first if handling props.
if (itemKind === 'property' && !!a.required !== !!b.required) {
return a.required ? -1 : 1;
}
// Ensure the constructor is first if handling methods.
if (itemKind === 'method' && a.name === 'constructor') {
return -1;
}
return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
})
.map(item => ({ ...item, key: item.name }));
});
const columns = useConst(() => _getColumns(props));
return (
);
});
export const FocusZonePhotosExample: React.FunctionComponent = () => {
// Initialize the items when the component is first rendered (same array will be reused)
const items = useConst(_getItems);
return (
{items.map((item: IPhoto, index: number) => (
<li data-is-focusable="{true}" aria-label="Photo" aria-setsize="{items.length}" aria-posinset="{index">
<img placeholder="" by="" alt="{`${item.width}" height="{item.height}" width="{item.width}" src="{item.url}">
</li>
))}
);