Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • 02:07

    enyo-jenkins on release-2.6.0-test-20191207020754

    (compare)

  • Dec 06 07:11
    codecov[bot] commented #2658
  • Dec 06 07:11
    codecov[bot] commented #2658
  • Dec 06 07:11
    codecov[bot] commented #2658
  • Dec 06 07:09
    codecov[bot] commented #2658
  • Dec 06 07:01
    codecov[bot] commented #2658
  • Dec 06 07:01
    webOS101 synchronize #2658
  • Dec 06 07:01

    webOS101 on ENYO-6372

    Fix typo Enact-DCO-1.0-Signed-… (compare)

  • Dec 06 06:48
    codecov[bot] commented #2658
  • Dec 06 06:48
    codecov[bot] commented #2658
  • Dec 06 06:47
    codecov[bot] commented #2658
  • Dec 06 06:46
    codecov[bot] commented #2658
  • Dec 06 06:38
    codecov[bot] commented #2658
  • Dec 06 06:38
    webOS101 synchronize #2658
  • Dec 06 06:38

    webOS101 on ENYO-6372

    Correct docs Enact-DCO-1.0-Sig… (compare)

  • Dec 06 05:45
    webOS101 edited #2658
  • Dec 06 03:14
    codecov[bot] commented #2658
  • Dec 06 03:14
    codecov[bot] commented #2658
  • Dec 06 03:14
    codecov[bot] commented #2658
  • Dec 06 03:13
    codecov[bot] commented #2658
Seungho Park
@seunghoh
@adriancocoara regarding GridListImageItem, you also can try with your own GridListImageItem(you create component). Enact VirtualGridList will be compatible with your own GridListImageItem
adriancocoara
@adriancocoara
Got it! Thanks for your answers!
Nguyen Dao Thanh Trung
@trungndt1_gitlab
image.png
Hi all, Please help me
i can't show image on enact
Roy Sutton
@webOS101
That URL won't work when your app is packaged or served.
The appropriate way to get the URL for the image is to import it.
import myImage from '../../myImage.png';

<Image src={myImage} />
That will also ensure your image is packaged with your app.
Well, only takes a few attempts after Thanksgiving dinner to get the syntax right.
Nguyen Dao Thanh Trung
@trungndt1_gitlab
Thanks @webOS101 , but i have to use <img src={myImage} /> , then it working
Dave Freeman
@sugardave
hmm, it should work the same, maybe it needs to be given width/height styling? which Image are you using, from moonstone or straight from ui?
Nguyen Dao Thanh Trung
@trungndt1_gitlab
I'm using from moonstone
Dave Freeman
@sugardave
if you change it back to Image, what does the DOM show? I bet it's there with the correct source, but is 0 height/width.
Nguyen Dao Thanh Trung
@trungndt1_gitlab
yes, i think should add width/height styling. it will work.
<Image src={myImage} style={{height: 64, width: 64}} />
Dave Freeman
@sugardave
don't forget the px :D
style={{height: '64px', width: '64px'}}
Nguyen Dao Thanh Trung
@trungndt1_gitlab
yes, thanks so much.
Roy Sutton
@webOS101
don't need px.
React treats numbers as px.
Dave Freeman
@sugardave
FINE
64em :D
Roy Sutton
@webOS101
:scream:
adriancocoara
@adriancocoara
Hello again! I have another question about VirtualGridList. I have a verticalScrollbar for my list, and i want to give it some custom styling. Is there a way to add a className for verticalScrollbar. Enact docs says that I can only give it "auto", "hidden", "visible". Thank you and have a nice weekend! :)
Andrey
@Andrey9300

How correctly handle "back" button?
I do this:

class AppComponent extends React.PureComponent {
  handleKeyDown = (event) => {
    add('back', 461);

    if (is('back')(event.keyCode)) {
      // set route to my home page
    }
  };

  render() {
    <Row onKeyDown={this.handleKeyDown}>...</Row>
  }
}

But expression if (is('back')(event.keyCode)) always false and app exit, when I press back button.
What wrong with it?

Roy Sutton
@webOS101
Hi Andrey.
You need to set a flag in your appinfo.json that tells webOS you’ll handle the back key.
Also, you only need to add the back key once, sometime during app startup.
You can also just do is(‘back’, event.keycode)
If you’re using MoonstoneDecorator the cancel key is added already.
(which is ‘back’)
Roy Sutton
@webOS101
Here’s the developer page on handling back key:
Andrey
@Andrey9300

I wrote my class like this:

class AppComponent extends React.PureComponent {
  componentDidMount() {
    window.addEventListener('keydown', (inEvent) => {
      let keycode = null;

      if(window.event) {
        keycode = inEvent.keyCode;
      } else if(inEvent.which) {
        keycode = inEvent.which;
      }

      switch (keycode) {
        case 461:
          console.log('all ok');
          break;
      }
    });
  }

  handleKeyDown = (event) => {
    if (is('back')(event.keyCode)) {
      // set route to my home page
    }
  };

  render() {
    <Row onKeyDown={this.handleKeyDown}>...</Row>
  }
}

export const App = MoonstoneDecorator(
  connect(mapStateToProps, mapDispatchToProps)(AppComponent),
);

I found my problem: in my handler function
handleKeyDown = (event) => { -
event is awlays undefined. But I yet don't know why.

But in window.addEventListener('keydown', (inEvent) => { all ok.

Roy Sutton
@webOS101
Is your handleKeyDown actually fired?
Andrey
@Andrey9300
yes
Maybe I need use
handle https://enactjs.com/docs/modules/core/handle/
or use kind https://enactjs.com/docs/modules/core/kind/
or window.addEventListener('keydown', (inEvent) => {
?
that is work for me
Roy Sutton
@webOS101
Shouldn’t matter for something simple. For a back key handler, using the window is fine.
No need to attach a keydown handler to every time just for that.
Andrey
@Andrey9300
Cool!
Roy, thank you very much!
Roy Sutton
@webOS101
on(‘keydown’, this.backHandler, window)
Surely.
YunBum SUNG
@ybsung

@adriancocoara

Hello again! I have another question about VirtualGridList. I have a verticalScrollbar for my list, and i want to give it some custom styling. Is there a way to add a className for verticalScrollbar. Enact docs says that I can only give it "auto", "hidden", "visible". Thank you and have a nice weekend! :)

Hello! Unfortunately we did not provide any way to customize the scroll bar. The only current way to do it is... just using DOM selectors and defining your styles with them.

YunBum SUNG
@ybsung

Here is an example
JS file

<VirtualList className={css.list} ... />

Less file

.list > div > div:nth-child(2) {
    // Scrollbar
    background: green;

    // For Scrollbar buttons
    & > [role="button"] {
        background: blue;
    }

    // For Scrollbar Thumb
    & > div:nth-child(2) {
        background: red;
    }
}
YunBum SUNG
@ybsung
If you need to give some styles to only scrollbar buttons or a thumb, then simplely
.list {
    // For Scrollbar buttons
    [role="button"] {
        background: blue;
    }

    // For Scrollbar Thumb
    [role="button"] + div {
        background: red;
    }
}
adriancocoara
@adriancocoara
@ybsung thank you, it worked !
Blake Stephens
@Djspaceg
Please bear in mind that the above code (although it works right now) does break encapsulation and may break without warning with future updates. Just something to be aware of when using CSS selectors to read deeply inside of opaque Moonstone components.