@kaspernj/api-maker 1.0.445 → 1.0.447

package/src/draggable-sort/index.jsx

@@ -0,0 +1,108 @@
+import {useMemo} from "react"
+import {Animated, PanResponder} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import Controller from "./controller"
+import DraggableSortItem from "./item"
+import EventEmitter from "events"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import useEventEmitter from "../use-event-emitter"
+
+export default memo(shapeComponent(class DraggableSort extends ShapeComponent {
+  static defaultProps = {
+    horizontal: false
+  }
+
+  static propTypes = propTypesExact({
+    cacheKeyExtractor: PropTypes.func,
+    data: PropTypes.array.isRequired,
+    dataSet: PropTypes.object,
+    events: PropTypes.instanceOf(EventEmitter),
+    horizontal: PropTypes.bool.isRequired,
+    keyExtractor: PropTypes.func.isRequired,
+    onDragItemEnd: PropTypes.func,
+    onDragItemStart: PropTypes.func,
+    onItemMoved: PropTypes.func,
+    onReordered: PropTypes.func.isRequired,
+    renderItem: PropTypes.func.isRequired
+  })
+
+  setup() {
+    const {data, keyExtractor} = this.p
+    const {events} = this.props
+
+    this.controller = useMemo(() => new Controller({data, events, keyExtractor}), [])
+    this.panResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (e) => {
+          const initialDragPosition = {x: e.nativeEvent.locationX, y: e.nativeEvent.locationY}
+
+          this.controller.setInitialDragPosition(initialDragPosition)
+
+          if (this.controller.draggedItemData) {
+            return true
+          }
+        },
+        onPanResponderMove: (e, gestate) => {
+          this.tt.controller.onMove({gestate})
+        },
+        onPanResponderRelease: (e, gestate) => {
+          if (this.controller.draggedItem) {
+            this.tt.controller.onDragEnd()
+          }
+        }
+      }),
+      []
+    )
+
+    useEventEmitter(this.controller.getEvents(), "onDragStart", this.tt.onDragItemStart)
+    useEventEmitter(this.controller.getEvents(), "onDragEnd", this.tt.onDragItemEnd)
+  }
+
+  render() {
+    const {data, horizontal, keyExtractor, renderItem} = this.p
+    const {cacheKeyExtractor, dataSet} = this.props
+    const actualDataSet = useMemo(
+      () => Object.assign(
+        {
+          component: "draggable-sort"
+        },
+        dataSet
+      ),
+      [dataSet]
+    )
+
+    return (
+      <Animated.View dataSet={actualDataSet} style={{flexDirection: horizontal ? "row" : "column"}} {...this.tt.panResponder.panHandlers}>
+        {data.map((item, itemIndex) =>
+          <DraggableSortItem
+            cacheKey={cacheKeyExtractor ? cacheKeyExtractor(item) : undefined}
+            controller={this.tt.controller}
+            item={item}
+            itemIndex={itemIndex}
+            key={keyExtractor(item)}
+            onItemMoved={this.props.onItemMoved}
+            renderItem={renderItem}
+          />
+        )}
+      </Animated.View>
+    )
+  }
+
+  onDragItemStart = ({itemData}) => {
+    if (this.props.onDragItemStart) {
+      this.p.onDragItemStart({itemData})
+    }
+  }
+
+  onDragItemEnd = (args) => {
+    if (args.toPosition !== null) {
+      this.p.onReordered(args)
+    }
+
+    if (this.props.onDragItemEnd) {
+      this.p.onDragItemEnd(args)
+    }
+  }
+}))

package/src/draggable-sort/item.jsx

@@ -0,0 +1,174 @@
+import {useMemo} from "react"
+import {Animated, Easing, PanResponder} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import EventEmitter from "events"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import useEventEmitter from "../use-event-emitter"
+
+export default memo(shapeComponent(class DraggableSortItem extends ShapeComponent {
+  static propTypes = propTypesExact({
+    cacheKey: PropTypes.string,
+    controller: PropTypes.object.isRequired,
+    item: PropTypes.any.isRequired,
+    itemIndex: PropTypes.number.isRequired,
+    onItemMoved: PropTypes.func,
+    renderItem: PropTypes.func.isRequired
+  })
+
+  initialLayout = null
+
+  setup() {
+    this.useStates({
+      active: false,
+      dragging: false
+    })
+
+    this.events = useMemo(() => new EventEmitter(), [])
+    this.position = useMemo(() => new Animated.ValueXY(), [])
+    this.panResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (e, ) => {
+          this.setState({dragging: true})
+          this.p.controller.onDragStart({item: this.p.item, itemIndex: this.p.itemIndex})
+
+          return false
+        }
+      }),
+      []
+    )
+
+    useEventEmitter(this.p.controller.getEvents(), "onDragStart", this.tt.onDragStart)
+    useEventEmitter(this.p.controller.getEvents(), "onDragEndAnimation", this.tt.onDragEndAnimation)
+    useEventEmitter(this.tt.events, "move", this.tt.onMove)
+    useEventEmitter(this.tt.events, "moveToPosition", this.tt.onMoveToPosition)
+    useEventEmitter(this.tt.events, "resetPosition", this.tt.onResetPosition)
+  }
+
+  render() {
+    const {item, renderItem} = this.p
+    const {active} = this.s
+    const style = useMemo(
+      () => {
+        const style = {
+          transform: this.tt.position.getTranslateTransform()
+        }
+
+        if (active) {
+          style.backgroundColor = "#fff"
+          style.elevation = 2
+          style.zIndex = 99999
+        }
+
+        return style
+      },
+      [active]
+    )
+
+    return (
+      <Animated.View dataSet={{component: "draggable-sort/item"}} onLayout={this.tt.onLayout} style={style}>
+        {renderItem({isActive: active, item, touchProps: this.tt.panResponder.panHandlers})}
+      </Animated.View>
+    )
+  }
+
+  onDragStart = ({itemData}) => {
+    const newState = {dragging: true}
+
+    if (itemData.index == this.p.itemIndex) {
+      newState.active = true
+      this.baseXAtStartedDragging = this.getBaseX()
+    }
+
+    this.setState(newState)
+  }
+
+  onDragEndAnimation = () => this.setState({active: false, dragging: false})
+
+  onLayout = (e) => {
+    const {controller, item, itemIndex} = this.p
+
+    controller.onItemLayout({events: this.tt.events, index: itemIndex, item, layout: e.nativeEvent.layout})
+
+    if (!this.tt.initialLayout) {
+      this.initialLayout = e.nativeEvent.layout
+    }
+  }
+
+  onMove = ({gestate}) => {
+    const x = gestate.dx + this.tt.baseXAtStartedDragging - this.tt.initialLayout.x
+    const y = this.tt.initialLayout.y
+
+    this.tt.position.setValue({x, y})
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({itemIndex: this.p.itemIndex, x, y})
+    }
+  }
+
+  onMoveToPosition = ({x, y}) => {
+    const calculatedXFromStartingPosition = x - this.tt.initialLayout.x
+    const animationArgs = {
+      duration: 200,
+      easing: Easing.inOut(Easing.linear),
+      toValue: {
+        x: calculatedXFromStartingPosition,
+        y
+      },
+      useNativeDriver: true,
+    }
+    const animationEventArgs = {animationArgs, animationType: "moveToPosition", item: this.p.item}
+
+    this.p.controller.events.emit("onAnimationStart", animationEventArgs)
+
+    Animated
+      .timing(this.tt.position, animationArgs)
+      .start(() => {
+        this.p.controller.events.emit("onAnimationEnd", animationEventArgs)
+      })
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({
+        animationArgs,
+        itemIndex: this.p.itemIndex,
+        x: calculatedXFromStartingPosition,
+        y
+      })
+    }
+  }
+
+  getBaseX = () => this.p.controller.getItemDataForIndex(this.p.itemIndex).baseX
+
+  onResetPosition = (args) => {
+    const baseX = this.getBaseX() - this.tt.initialLayout.x
+    const animationArgs = {
+      duration: 200,
+      easing: Easing.inOut(Easing.linear),
+      toValue: {
+        x: baseX,
+        y: 0
+      },
+      useNativeDriver: true,
+    }
+    const animationEventArgs = {animationArgs, animationType: "resetPosition", item: this.p.item}
+
+    this.p.controller.events.emit("onAnimationStart", animationEventArgs)
+
+    Animated
+      .timing(this.tt.position, animationArgs)
+      .start(() => {
+        this.p.controller.events.emit("onAnimationEnd", animationEventArgs)
+        if (args?.callback) args.callback()
+      })
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({
+        animationArgs,
+        itemIndex: this.p.itemIndex,
+        x: baseX,
+        y: 0
+      })
+    }
+  }
+}))

package/src/{error-logger.mjs → error-logger.js}

@@ -1,5 +1,5 @@
 import {digg} from "diggerize"
-import SourceMapsLoader from "./source-maps-loader.mjs"
+import SourceMapsLoader from "./source-maps-loader"
 
 export default class ErrorLogger {
   constructor () {

package/src/event-connection.jsx

@@ -1,4 +1,4 @@
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React from "react"

package/src/event-model-class.jsx

@@ -1,4 +1,4 @@
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React from "react"

package/src/form.jsx

@@ -4,7 +4,7 @@ import FormDataObjectizer from "form-data-objectizer"
 import memo from "set-state-compare/src/memo"
 import {Platform} from "react-native"
 import PropTypes from "prop-types"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const FormContext = createContext(null)
 

package/src/index.js

@@ -0,0 +1,3 @@
+const stub = "Hello World"
+
+export {stub}

package/src/inputs/attachment.jsx

@@ -1,8 +1,8 @@
 import BaseComponent from "../base-component"
-import {Input as ApiMakerInput} from "@kaspernj/api-maker/src/inputs/input"
+import {Input as ApiMakerInput} from "@kaspernj/api-maker/build/inputs/input"
 import Checkbox from "./checkbox"
 import memo from "set-state-compare/src/memo"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class ApiMakerInputsAttachment extends BaseComponent {
   static propTypes = {

package/src/inputs/checkbox.jsx

@@ -1,19 +1,20 @@
-import AutoSubmit from "./auto-submit.mjs"
+import AutoSubmit from "./auto-submit"
 import BaseComponent from "../base-component"
 import {digg} from "diggerize"
-import EventUpdated from "../event-updated"
 import PropTypes from "prop-types"
 import memo from "set-state-compare/src/memo"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import useInput from "../use-input"
 import {useForm} from "../form"
 import {useMemo} from "react"
+import useUpdatedEvent from "../use-updated-event"
 
 export default memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
     defaultValue: 1,
+    model: null,
     zeroInput: true
   }
 
@@ -33,6 +34,7 @@ export default memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComp
   }
 
   setup() {
+    const {autoRefresh, model} = this.p
     const {inputProps, restProps: useInputRestProps} = useInput({props: this.props, wrapperOptions: {type: "checkbox"}})
     const {defaultValue, name} = inputProps
 
@@ -47,6 +49,8 @@ export default memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComp
         this.tt.form?.setValue(name, defaultValue)
       }
     }, [])
+
+    useUpdatedEvent(model, this.tt.onModelUpdated, {active: Boolean(autoRefresh && model)})
   }
 
   render () {
@@ -69,9 +73,6 @@ export default memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComp
 
     return (
       <>
-        {autoRefresh && model &&
-          <EventUpdated model={model} onUpdated={this.tt.onModelUpdated} />
-        }
         {zeroInput && inputProps.name &&
           <input defaultValue="0" name={inputProps.name} type="hidden" />
         }

package/src/inputs/checkboxes.jsx

@@ -7,7 +7,7 @@ import InvalidFeedback from "../bootstrap/invalid-feedback"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import memo from "set-state-compare/src/memo"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const ApiMakerInputsCheckboxes = memo(shapeComponent(class ApiMakerInputsCheckboxes extends BaseComponent {
   static propTypes = propTypesExact({

package/src/inputs/input-wrapper.jsx

@@ -1,4 +1,4 @@
-import useInput from "../use-input.mjs"
+import useInput from "../use-input"
 
 const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => (props) => {
   const {inputProps, restProps, wrapperOpts} = useInput({props, wrapperOptions})

package/src/inputs/input.jsx

@@ -1,21 +1,22 @@
-import AutoSubmit from "./auto-submit.mjs"
+import AutoSubmit from "./auto-submit"
 import BaseComponent from "../base-component"
 import {dig, digg, digs} from "diggerize"
-import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
 import memo from "set-state-compare/src/memo"
 import Money from "./money"
 import PropTypes from "prop-types"
 import {useMemo, useRef} from "react"
 import replaceall from "replaceall"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import strftime from "strftime"
 import {useForm} from "../form"
+import useUpdatedEvent from "../use-updated-event"
 
 const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
+    model: null,
     localizedNumber: false
   }
 
@@ -35,7 +36,7 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
   }
 
   setup() {
-    const {inputProps} = this.p
+    const {autoRefresh, inputProps, model} = this.p
     const {defaultValue, name} = inputProps
 
     this.form = useForm()
@@ -44,11 +45,14 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
     this.useStates({
       blankInputName: digg(inputProps, "type") == "file"
     })
+
     useMemo(() => {
       if (name) {
         this.tt.form?.setValue(name, defaultValue)
       }
     }, [])
+
+    useUpdatedEvent(model, this.tt.onModelUpdated, {active: Boolean(autoRefresh && model)})
   }
 
   render () {
@@ -81,9 +85,6 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
 
     return (
       <>
-        {autoRefresh && model &&
-          <EventUpdated model={model} onUpdated={this.onModelUpdated} />
-        }
         {localizedNumber &&
           <input
             defaultValue={defaultValue}

package/src/inputs/money.jsx

@@ -1,14 +1,14 @@
 import classNames from "classnames"
-import Config from "../config.mjs"
+import Config from "../config"
 import {digg} from "diggerize"
-import idForComponent from "./id-for-component.mjs"
+import idForComponent from "./id-for-component"
 import * as inflection from "inflection"
 import memo from "set-state-compare/src/memo"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {useRef} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
   static defaultProps = {

package/src/inputs/select.jsx

@@ -2,7 +2,7 @@ import BaseComponent from "../base-component"
 import inputWrapper from "./input-wrapper"
 import PropTypes from "prop-types"
 import memo from "set-state-compare/src/memo"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import {useForm} from "../form"
 
 const ApiMakerInputsSelect = memo(shapeComponent(class ApiMakerInputsSelect extends BaseComponent {

package/src/{key-value-store.mjs → key-value-store.js}

@@ -1,4 +1,4 @@
-import Params from "./params.mjs"
+import Params from "./params"
 
 const shared = {}
 

package/src/link.jsx

@@ -1,9 +1,9 @@
 import {Platform, Pressable} from "react-native"
 import BaseComponent from "./base-component"
-import dataSetToAttributes from "./data-set-to-attributes.mjs"
+import dataSetToAttributes from "./data-set-to-attributes"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class ApiMakerLink extends BaseComponent {
   static propTypes = {

package/src/modal.jsx

@@ -1,6 +1,6 @@
 import BaseComponent from "./base-component"
 import memo from "set-state-compare/src/memo"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import {Modal, Pressable, View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerModal extends BaseComponent {

package/src/{model-class-require.mjs → model-class-require.js}

@@ -1,7 +1,7 @@
 import * as inflection from "inflection"
-import * as models from "./models.mjs.erb"
+import models from "./models"
 
-export default (modelName) => {
+const modelClassRequire = (modelName) => {
   const requireName = inflection.camelize(modelName)
   const ModelClass = models[requireName]
 
@@ -13,3 +13,5 @@ export default (modelName) => {
 
   return ModelClass
 }
+
+export default modelClassRequire

package/src/{model-events.mjs → model-events.js}

@@ -1,4 +1,4 @@
-import CableConnectionPool from "./cable-connection-pool.mjs"
+import CableConnectionPool from "./cable-connection-pool"
 import {digg} from "diggerize"
 
 export default class ModelEvents {

package/src/{model-name.mjs → model-name.js}

@@ -1,4 +1,4 @@
-import Config from "./config.mjs"
+import Config from "./config"
 import * as inflection from "inflection"
 
 export default class ModelName {

package/src/{model-recipes-loader.mjs → model-recipes-loader.js}

@@ -1,5 +1,5 @@
 import {digg, digs} from "diggerize"
-import ModelRecipesModelLoader from "./model-recipes-model-loader.mjs"
+import ModelRecipesModelLoader from "./model-recipes-model-loader"
 
 export default class ModelRecipesLoader {
   constructor ({recipes}) {

package/src/{model-recipes-model-loader.mjs → model-recipes-model-loader.js}

@@ -1,5 +1,5 @@
-import BaseModel from "./base-model.mjs"
-import Collection from "./collection.mjs"
+import BaseModel from "./base-model"
+import Collection from "./collection"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 

package/src/{models-response-reader.mjs → models-response-reader.js}

@@ -1,6 +1,6 @@
 import * as inflection from "inflection"
-import modelClassRequire from "./model-class-require.mjs"
-import Preloaded from "./preloaded.mjs"
+import modelClassRequire from "./model-class-require"
+import Preloaded from "./preloaded"
 
 export default class ModelsResponseReader {
   static first (response) {

package/src/models.js

@@ -0,0 +1,7 @@
+import modelRecipes from "model-recipes.json"
+import ModelRecipesLoader from "./model-recipes-loader"
+
+const loader = new ModelRecipesLoader({recipes: modelRecipes})
+const result = loader.load()
+
+export default result

package/src/{models.mjs.erb → models.js.erb}

@@ -1,7 +1,7 @@
 /* rails-erb-loader-dependencies api_maker/resources/ models/ */
 
 import {digg} from "diggerize"
-import ModelRecipesLoader from "./model-recipes-loader.mjs"
+import ModelRecipesLoader from "./model-recipes-loader"
 
 const modelRecipes = <%= ApiMaker::ModelClassesJavaScriptGeneratorService.execute!.to_json %>
 const loader = new ModelRecipesLoader({recipes: modelRecipes})

package/src/{params.mjs → params.js}

@@ -1,8 +1,8 @@
-import config from "./config.mjs"
+import config from "./config"
 import formSerialize from "form-serialize"
 import Incorporator from "incorporator"
 import qs from "qs"
-import urlEncode from "./url-encode.mjs"
+import urlEncode from "./url-encode"
 
 export default class Params {
   static parse() {

package/src/{preloaded.mjs → preloaded.js}

@@ -1,5 +1,5 @@
 import * as inflection from "inflection"
-import modelClassRequire from "./model-class-require.mjs"
+import modelClassRequire from "./model-class-require"
 
 export default class ApiMakerPreloaded {
   constructor (response) {

package/src/resize-observer.jsx

@@ -1,5 +1,5 @@
 import memo from "set-state-compare/src/memo"
-import useResizeObserver from "./use-resize-observer.mjs"
+import useResizeObserver from "./use-resize-observer"
 
 const ApiMakerResizeObserver = memo(({element, onResize}) => {
   useResizeObserver(element, onResize)

package/src/router/route.jsx

@@ -3,7 +3,7 @@ import {createContext, useContext, useMemo} from "react"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import Switch, {CurrentSwitchContext} from "./switch"
 
 const CurrentPathContext = createContext([])

package/src/router/switch.jsx

@@ -3,7 +3,7 @@ import {createContext} from "react"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const CurrentSwitchContext = createContext([])
 

package/src/router.jsx

@@ -2,7 +2,7 @@ import BaseComponent from "./base-component"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React, {memo} from "react"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import {Suspense} from "react"
 import useRouter from "./use-router"
 

package/src/{routes-native.mjs → routes-native.js}

@@ -1,7 +1,7 @@
 import {dig, digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import qs from "qs"
-import urlEncode from "./url-encode.mjs"
+import urlEncode from "./url-encode"
 
 export default class ApiMakerRoutesNative {
   constructor ({getLocale}) {