htmlelements/smart-webcomponents-react

Smart UI for React

smart-webcomponents-react's Issues

Grid Component Link for demo Formulas is not working

When I try to access the Formulas demo, I encounter the error message 'Not Found.' Apologies, but the page you requested could not be found

https://www.htmlelements.com/demos/grid/formulas/

Error when importing DockLayout in tests

Hi guys,

I'm running into the following error and I was wondering if you could help:
I believe it's to do with module loading

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'get' of undefined

      5 | import { ConnectedProps }                     from 'react-redux';
    > 6 | import { DockingLayout }                      from 'smart-webcomponents-react/dockinglayout';

      at Function.value (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:82036)
      at window.<computed> (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:90250)
      at node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:100825
      at Object.39 (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:119277)
      at i (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:4618)
      at node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:5406
      at Object.0 (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:5416)
      at i (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:113)
      at Module.115 (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:133448)
      at i (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:113)
      at node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:905
      at Object.<anonymous> (node_modules/smart-webcomponents-react/source/modules/smart.dockinglayout.js:8:916)
      at Object.<anonymous> (node_modules/smart-webcomponents-react/dockinglayout/dockinglayout.umd.js:2:1)
      at Object.<anonymous> (src/components/container_body/bodyContainer.tsx:6:1)
      at Object.<anonymous> (src/pages/container_main/mainContainer.tsx:7:1)
      at Object.<anonymous> (src/routes/routes.tsx:5:1)
      at Object.<anonymous> (src/App.tsx:7:1)
      at Object.<anonymous> (src/App.test.tsx:3:1)

Reproduce:

• create a create-react-app application (https://github.com/facebook/create-react-app)
• add a DockingLayout
• run yarn test

Issue by using this package with Vite React Typescript.

Hi,
When using this package in CRA (Create React App) it works as expected but when used with Vite it works in dev mode but it is not working when compiled.

Project compiles but then, it shows an error like this in console.

TypeError: e1.nativeElement.whenRendered is not a function
    at AccordionItem.componentDidRender
Smart$1.Render is not a function
    at Accordion.componentDidRender
e1.nativeElement.whenRendered is not a function
    at AccordionItem.componentDidRender

Could you find a solution for this? I tried several "fixes" but it didn't work
We have license and we are currently using SmartHtmlElements in vanilla projects.

Vite version: 2.9.5
React version: 18.0,0
Smart-webcomponents-react version: 15.0.3

Reproduced in a clean project made with Vite in last version. (Vite + React + Typescript basic project)
Thanks.

Feature - add attribute passing to the components

A great feature for the components will be the custom attributes.
NOTE THAT bugs can occur if you try to set an attribute and the component uses a property with that name

Error in Grid component

Hi, i encountered an error while trying to print a grid component in React (18.0.0).

Steps to reproduce:

• Use React 18.0.0 and smart-webcomponents-react last version.
• Print the component as here https://www.htmlelements.com/react/demos/grid/grouping-basic/
• It shows the error mentioned all the time you drag, click or touch anything.

I tried changing props and it keeps showing the error.

Thanks.

Issue with using React.createRef with DockingLayout

Hi,

I've been running into a weird issue where Typescript is complaining about my ref usage.

Reproduction code:

// class attribute
private dockinglayout = React.createRef<DockingLayout>();
// in render() method
<DockingLayout ref={this.dockinglayout} id="layout" layout={this.layout} draggable></DockingLayout>

Error is:

Type 'RefObject<DockingLayout>' is not assignable to type 'string | (string & ((instance: Element | null) => void)) | (string & RefObject<Element>) | (RefObject<DockingLayout> & string) | ... 6 more ... | undefined'.
  Type 'RefObject<DockingLayout>' is not assignable to type '((instance: DockingLayout | null) => void) & RefObject<Element>'.
    Type 'RefObject<DockingLayout>' is not assignable to type '(instance: DockingLayout | null) => void'.
      Type 'RefObject<DockingLayout>' provides no match for the signature '(instance: DockingLayout | null): void'.ts(2322)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<DockingLayout> & Readonly<HTMLProps<Element> & DockingLayoutProps> & Readonly<...>'

I think the problem lies in the following line in dockinglayout.d.ts

export declare class DockingLayout extends React.Component<React.HTMLProps<Element> & DockingLayoutProps, any> {

When I update the line to use React.HTMLAttributes instead of HTMLProps the error dissapears:

export declare class DockingLayout extends React.Component<React.HTMLAttributes<Element> & DockingLayoutProps, any> {

Some extra googling links:
https://stackoverflow.com/questions/50627493/how-extend-react-types-to-support-html-attributes-as-props
https://gist.github.com/mfal/88fe927f2061d22425cc78fcec8d260f