diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index 9f916cc..8fdcc64 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -25,7 +25,9 @@ jobs:
channel: ${{ matrix.atom_channel }}
- name: Install dependencies
- run: apm install
+ run: |
+ apm install --production
+ npm install --only=dev
# The tests are flaky
- name: Run tests
diff --git a/.gitignore b/.gitignore
index d349725..1c8188a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
npm-debug.log
node_modules
dist
+.parcel-cache
diff --git a/README.md b/README.md
index a424577..0c6adce 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,8 @@ Intentions is a base package that provides an easy-to-use API to show intentions
- Use ALT+ENTER to open the intensions list and press ENTER (or select by mouse) to choose the action.
- To see the all available actions hold CTRL (⌘ on macOS).
+
+
#### APIs
Intentions provides two kinds of APIs, there's Intentions List API that allows you to add items
diff --git a/babel.config.json b/babel.config.json
new file mode 100644
index 0000000..e41aa5d
--- /dev/null
+++ b/babel.config.json
@@ -0,0 +1,3 @@
+{
+ "presets": ["babel-preset-solid"]
+}
diff --git a/babel.unit.config.json b/babel.unit.config.json
new file mode 100644
index 0000000..96fb626
--- /dev/null
+++ b/babel.unit.config.json
@@ -0,0 +1,14 @@
+{
+ "presets": [
+ "babel-preset-solid",
+ [
+ "babel-preset-atomic",
+ {
+ "addModuleExports": false,
+ "react": false,
+ "typescript": true
+ }
+ ]
+ ],
+ "sourceMap": "inline"
+}
diff --git a/lib/elements/highlight.ts b/lib/elements/highlight.ts
index f47814c..8959e05 100644
--- a/lib/elements/highlight.ts
+++ b/lib/elements/highlight.ts
@@ -1,7 +1,8 @@
export const PADDING_CHARACTER = " "
export function create(length: number): HTMLElement {
let tries = 0
- const element = document.createElement("intention-inline")
+ const element = document.createElement("div")
+ element.className = "intentions-inline"
element.style.opacity = "0"
element.textContent = PADDING_CHARACTER.repeat(length)
diff --git a/lib/elements/list.tsx b/lib/elements/list.tsx
index c470f27..51a8ca3 100644
--- a/lib/elements/list.tsx
+++ b/lib/elements/list.tsx
@@ -1,79 +1,102 @@
-/** @jsx jsx */
-// eslint-disable-next-line no-unused-vars
-import { createClass, jsx } from "vanilla-jsx"
+import { createSignal, createSelector, For, createComputed, on } from "solid-js"
import { $class } from "../helpers"
-import type { ListMovement } from "../types"
+import type { ListItem } from "../types"
-export default createClass({
- renderView(suggestions, selectCallback) {
- let className = "select-list popover-list"
+export interface Props {
+ suggestions: Array
+ selectCallback: (suggestion: ListItem) => void
+}
- if (suggestions.length > 7) {
- className += " intentions-scroll"
- }
+export function ListElement(props: Props) {
+ // current active index
+ const [getActiveIndex, setActiveIndex] = createSignal(-1)
+ // current active id
+ const isSelected = createSelector(getActiveIndex)
+ // movement state
+ const [getMovement, setMovement] = createSignal("move-to-top")
+ // selected state
+ const [getConfirmed, setConfirmed] = createSignal(false)
- this.suggestions = suggestions
- this.suggestionsCount = suggestions.length
- this.suggestionsIndex = -1
- this.selectCallback = selectCallback
- return (
-
-
- {suggestions.map(function (suggestion) {
- return (
- -
-
- {suggestion.title}
-
-
- )
- })}
-
-
- )
- },
+ function handleSelection(suggestion: ListItem, index: number) {
+ // call its associated callback
+ props.selectCallback(suggestion)
+ // store it in the signal
+ setActiveIndex(index)
+ }
+
+ function handleMove() {
+ const suggestionsCount = props.suggestions.length
- move(movement: ListMovement) {
- let newIndex = this.suggestionsIndex
+ const prevIndex = getActiveIndex()
+ let index = prevIndex
+ const movement = getMovement()
if (movement === "up") {
- newIndex--
+ index--
} else if (movement === "down") {
- newIndex++
+ index++
} else if (movement === "move-to-top") {
- newIndex = 0
+ index = 0
} else if (movement === "move-to-bottom") {
- newIndex = this.suggestionsCount
+ index = suggestionsCount
}
// TODO: Implement page up/down
- newIndex %= this.suggestionsCount
+ index %= suggestionsCount
- if (newIndex < 0) {
- newIndex = this.suggestionsCount + newIndex
+ if (index < 0) {
+ index = suggestionsCount + index
}
- this.selectIndex(newIndex)
- },
-
- selectIndex(index) {
- if (this.refs.active) {
- this.refs.active.classList.remove("selected")
+ if (index !== prevIndex) {
+ setActiveIndex(index)
}
- this.refs.active = this.refs.list.children[index]
- this.refs.active.classList.add("selected")
- this.refs.active.scrollIntoViewIfNeeded(false)
- this.suggestionsIndex = index
- },
+ // unset the movement to allow solid to check the next movement
+ setMovement(undefined)
+ }
- select() {
- this.selectCallback(this.suggestions[this.suggestionsIndex])
- },
-})
+ createComputed(
+ on(getConfirmed, () => {
+ if (getConfirmed()) {
+ // Runs the selection callback when the user confirms the selection using keyboard
+ // Updating prop.select in the parent result in running this function
+ const index = getActiveIndex()
+ handleSelection(props.suggestions[index], index)
+ }
+ })
+ )
+ createComputed(on(getMovement, handleMove))
+
+ let className = "select-list popover-list"
+ // add scrolling if more than 7 itmes
+ if (props.suggestions.length > 7) {
+ className += " intentions-scroll"
+ }
+
+ const component = (
+
+
+
+ {(suggestion, getIndex) => {
+ const index = getIndex()
+ return (
+ -
+ {
+ handleSelection(suggestion, index)
+ }}
+ >
+ {suggestion.title}
+
+
+ )
+ }}
+
+
+