React-swipeable-list component

Anvil Q&A
1

Hey guys, gals and non-binary pals :wave:,

I’m a full stack ML product dev and I’m totally new to Anvil. I’m intrigued by the notion of building the entire backend and frontend for an app in Python.
I’m just build a recommender system, and wanted to try and recreate it in anvil, starting with the frontend.
To that end I need the react-swipeable-list component https://www.npmjs.com/package/@sandstreamdev/react-swipeable-list to allow users to input their preferences.

And also the intro.js library for a tour on how to use it.

Any tips ideas on how to create a component in which I can put the slider?

3 Likes
2

It’s pretty crazy but you can actually work with React components in anvil using anvil.js :exploding_head:

Though it’s not for the faint hearted and I imagine this toy example will get quite a lot more complicated the further down the rabbit hole you go :grimacing:

Full example here:

Code snippet

from anvil.js.window import React, ReactDOM
import anvil.js

class FormSwipeable(FormSwipeableTemplate):
  def __init__(self, **properties):
    ...
    root = anvil.js.get_dom_node(self)
    ReactDOM.render(self.swipable_component(), root)

To convert the component itself to python start with the JSX

Here's the example from swipable list component docs 
import { SwipeableList, SwipeableListItem } from '@sandstreamdev/react-swipeable-list';
import '@sandstreamdev/react-swipeable-list/dist/styles.css';

<SwipeableList>
  <SwipeableListItem
    swipeLeft={{
      content: <div>Revealed content during swipe</div>,
      action: () => console.info('swipe action triggered')
    }}
    swipeRight={{
      content: <div>Revealed content during swipe</div>,
      action: () => console.info('swipe action triggered')
    }}
    onSwipeProgress={progress => console.info(`Swipe progress: ${progress}%`)}
  >
    <div>Item name</div>
  </SwipeableListItem>
</SwipeableList>

You can convert the to JSX to javascript with this tool:

Babel · The compiler for next generation JavaScript


Converted to javascript: 
/*#__PURE__*/
React.createElement(SwipeableList, null, /*#__PURE__*/React.createElement(SwipeableListItem, {
  swipeLeft: {
    content: /*#__PURE__*/React.createElement("div", null, "Revealed content during swipe"),
    action: () => console.info('swipe action triggered')
  },
  swipeRight: {
    content: /*#__PURE__*/React.createElement("div", null, "Revealed content during swipe"),
    action: () => console.info('swipe action triggered')
  },
  onSwipeProgress: progress => console.info(`Swipe progress: ${progress}%`)
}, /*#__PURE__*/React.createElement("div", null, "Item name")));

Then convert it to python: 
  def swipable_component(self):
    return React.createElement(SwipeableList, None, React.createElement(SwipeableListItem, {
      'swipeLeft': {
        'content': React.createElement("div", None, "Revealed content during swipe"),
        'action': lambda: print('swipe action triggered')
      },
      'swipeRight': {
        'content': React.createElement("div", None, "Revealed content during swipe"),
        'action': lambda: print('swipe action triggered')
      },
      'onSwipeProgress': lambda progress: print(f"Swipe progress: {progress}%")
    }, React.createElement("div", None, "Item name")))
3 Likes
3

Could you elaborate on this piece from the example

Swipeable = window[“@sandstreamdev/react-swipeable-list”]

I was toying around with implementing a React time input and followed the above steps but get a lookup error when I attempt to recreate that piece.

How does that lookup work and need to be connected to the component library?

4

Sure - i’ve changed the example now
I think I wrote that before we added anvil.js.import_from
If you clone the example again it should be clearer.

A nice approach is to use https://jspm.org/ with it’s online generator
this provide you with boiler plate for importmap
and you can then import modules directly into your python.

   <script type="importmap">
  {
    "imports": {
      "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js"
    }
  }
  </script>

and then in python

from anvil.js import import_from
React = import_from("react")

If browser support is important to your app you might want to try this approach on a variety of browsers

3 Likes