Under Review
Last Updated: 20 Oct 2020 10:30 by ADMIN

Problem:

The DateTimePicker does not work in IE11 due to it's failure to fully support the shorthand syntax for flex (https://github.com/philipwalton/flexbugs#flexbug-4). In order for it to work in IE11 flex-basis needs a unit defined and therefore does not support calc() in this scenario.

Potential Fix:

If you break out flex-grow, flex-shrink and flex-basis then calc() can be used for flex-basis.

Under Review
Last Updated: 06 Apr 2020 09:12 by ADMIN

Steps:

1. Create web component with shadow-root.

2. Attach all.css styles behide shadow root.

3. Add compoent with icon from WebComponentIcon font.

Result:

Icon are not displayed properly.


Under Review
Last Updated: 02 Apr 2020 10:26 by ADMIN
Created by: Vlado
Comments: 11
Type: Bug Report
0

UPDATE: This is live code I prepared for you: https://stackblitz.com/edit/react-ts-dhhsaz?file=index.tsx

I get error:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But error appears to be inside KendoDrawer component. I can't figure out what is wrong. This is my component:

import React, { useState } from 'react';
import { withRouter, useLocation, useHistory } from 'react-router-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';



export const SidebarDrawer = (props:any) => {

    const items = [
        { text: 'Povezivanje', icon: 'k-i-inbox', selected: true, route: '/povezivanje' },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell', route: '/notifications' },
        { text: 'Calendar', icon: 'k-i-calendar', route: '/calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email', route: '/attachments' },
        { text: 'Favourites', icon: 'k-i-star-outline', route: '/favourites' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

    const handleSelect = (ev:any) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleChange = () => { setPosition(prevState => !prevState); };

    const drawerProps = {
        expanded: expanded,
        position: positionMode,
        mode: 'push',
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect,
    }

    return (
        <Drawer {...drawerProps}>
            <DrawerContent>
                {props.children}
            </DrawerContent>
        </Drawer >
    );

};

export default withRouter(SidebarDrawer);

And this is how I use it inside App component:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import { Button } from '@progress/kendo-react-buttons'
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-bootstrap/dist/all.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import urlConstants from 'ClientApp/constants/urlConstants'
import { Connecting } from '../containers/connecting/Connecting';
import SidebarDrawer from 'ClientApp/components/SidebarDrawer/SidebarDrawer';

export const App: React.FC = () => {


    return (
        <React.Fragment>
            <Router>
                <SidebarDrawer>
                    <Switch>
                        <Route exact={true} path="/" component={Connecting} />

                    </Switch>
                </SidebarDrawer>
            </Router>
        </React.Fragment>
            )
}

export default hot(module)(App);