@luomus/laji-form 15.1.5 → 15.1.7

package/lib/components/fields/ArrayField.js

@@ -0,0 +1,148 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayFieldPatched = exports.onArrayFieldChange = exports.copyItemFunction = void 0;
+const React = require("react");
+const merge = require("deepmerge");
+const utils_1 = require("../../utils");
+const BaseComponent_1 = require("../BaseComponent");
+const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
+const ReactContext_1 = require("../../ReactContext");
+const core_1 = require("@rjsf/core");
+// Doesn't work with arrays properly since uses JSON Pointers but not JSON path.
+// e.g. "copy all array item values expect these" is impossible.
+const copyItemFunction = (that, copyItem) => (props, { type, filter }) => {
+    const { schema, registry, formContext } = that.props;
+    const defaultItem = utils_1.getDefaultFormState(schema.items, undefined);
+    copyItem = formContext.utils.filterItemIdsDeeply(copyItem, that.props.idSchema.$id);
+    const source = type === "blacklist" ? defaultItem : copyItem;
+    const filtered = filter.sort().reverse().reduce((target, f) => {
+        let sourceValue;
+        try {
+            sourceValue = utils_1.parseJSONPointer(source, f);
+        }
+        catch (e) {
+            const schema = utils_1.schemaJSONPointer(schema.items, f);
+            sourceValue = utils_1.getDefaultFormState(schema, undefined);
+        }
+        return utils_1.updateFormDataWithJSONPointer({ schema: schema.items, formData: target, registry }, sourceValue, f);
+    }, type === "blacklist" ? copyItem : defaultItem);
+    const tmpIdTree = that.props.formContext.services.ids.getRelativeTmpIdTree(props.idSchema.$id);
+    return utils_1.addLajiFormIds(filtered, tmpIdTree, false)[0];
+};
+exports.copyItemFunction = copyItemFunction;
+function onArrayFieldChange(formData, props) {
+    const tmpIdTree = props.formContext.services.ids.getRelativeTmpIdTree(props.idSchema.$id);
+    return utils_1.addLajiFormIds(formData, tmpIdTree, false)[0];
+}
+exports.onArrayFieldChange = onArrayFieldChange;
+const { ArrayField } = core_1.getDefaultRegistry().fields;
+class ArrayFieldPatched extends ArrayField {
+    constructor(...params) {
+        super(...params);
+        const { _getNewFormDataRow } = this;
+        this._getNewFormDataRow = () => {
+            const tmpIdTree = this.props.formContext.services.ids.getRelativeTmpIdTree(this.props.idSchema.$id);
+            const [item] = utils_1.addLajiFormIds(_getNewFormDataRow.call(this), tmpIdTree, false);
+            return item;
+        };
+        const { onDropIndexClick } = this;
+        this.onDropIndexClick = (index) => (event) => {
+            const item = this.props.formData[index];
+            const tmpIdTree = this.props.formContext.services.ids.getRelativeTmpIdTree(`${this.props.idSchema.$id}_${index}`);
+            const oldIds = utils_1.getAllLajiFormIdsDeeply(item, tmpIdTree);
+            Object.keys(oldIds).forEach((id) => {
+                return this.props.formContext.services.submitHooks.remove(id);
+            }, []);
+            onDropIndexClick.call(this, index)(event);
+        };
+    }
+    renderArrayFieldItem(props) {
+        // rjsf@5 started rendering array items with titles as "name-idx" - we don't want that.
+        if (typeof props.name === "string") {
+            props.name = undefined;
+        }
+        if (this.props.idSchema) {
+            const idSchema = this.getIdSchema(this.props, props.index);
+            return super.renderArrayFieldItem(Object.assign(Object.assign({}, props), { itemIdSchema: idSchema }));
+        }
+        return super.renderArrayFieldItem(props);
+    }
+    getIdSchema(props, _index) {
+        const { idSchema } = props;
+        const index = utils_1.getFormDataIndex(_index, props.uiSchema);
+        const root = idSchema.$id;
+        const reduced = (idSchema, root) => Object.keys(idSchema).reduce((idSchema, prop) => {
+            if (prop === "$id") {
+                return Object.assign(Object.assign({}, idSchema), { "$id": idSchema.$id.replace(root, `${root}_${index}`) });
+            }
+            return Object.assign(Object.assign({}, idSchema), { [prop]: reduced(idSchema[prop], root) });
+        }, idSchema);
+        return reduced(idSchema, root);
+    }
+}
+exports.ArrayFieldPatched = ArrayFieldPatched;
+let _ArrayField = class _ArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onChange = (formData) => {
+            this.props.onChange(onArrayFieldChange(formData, this.props));
+        };
+        this.buttonDefinitions = {
+            copy: {
+                glyph: "duplicate",
+                fn: () => (...params) => {
+                    ArrayFieldTemplate_1.beforeAdd(this.props);
+                    this.onChange([
+                        ...this.props.formData,
+                        exports.copyItemFunction(this, this.props.formData[this.props.formData.length - 1])(...params)
+                    ]);
+                },
+                rules: {
+                    minLength: 1,
+                    canAdd: true
+                },
+                changesFormData: true
+            },
+            addPredefined: {
+                fn: () => (onClickProps, { default: _default }) => {
+                    ArrayFieldTemplate_1.beforeAdd(this.props);
+                    this.onChange([
+                        ...(this.props.formData || []),
+                        utils_1.getDefaultFormState(this.props.schema.items, _default)
+                    ]);
+                },
+                rules: {
+                    canAdd: true
+                },
+                changesFormData: true
+            }
+        };
+    }
+    render() {
+        const { props } = this;
+        let { schema } = props;
+        if (props.uiSchema.items && props.uiSchema.items["ui:field"]) {
+            schema = Object.assign(Object.assign({}, schema), { uniqueItems: false });
+        }
+        // MultiArrayField needs to intercept default ArrayField internals, the instance is passed in formContext.
+        const { ArrayField: _ArrayField } = props.formContext;
+        const Component = _ArrayField || ArrayFieldPatched;
+        // Reset formContext.ArrayField
+        const formContext = _ArrayField ? Object.assign(Object.assign({}, props.formContext), { ArrayField: undefined }) : props.formContext;
+        const registry = _ArrayField ? Object.assign(Object.assign({}, props.registry), { formContext }) : props.registry;
+        return React.createElement(Component, Object.assign({}, props, { formContext: formContext, registry: registry, schema: schema, uiSchema: Object.assign(Object.assign({}, props.uiSchema), { "ui:options": Object.assign(Object.assign({ orderable: false }, props.uiSchema["ui:options"]), { buttonDefinitions: utils_1.getUiOptions(props.uiSchema).buttonDefinitions
+                        ? merge(this.buttonDefinitions, utils_1.getUiOptions(props.uiSchema).buttonDefinitions)
+                        : this.buttonDefinitions }) }), onChange: this.onChange }));
+    }
+};
+_ArrayField.contextType = ReactContext_1.default;
+_ArrayField = __decorate([
+    BaseComponent_1.default
+], _ArrayField);
+exports.default = _ArrayField;

package/lib/components/fields/AsArrayField.d.ts

@@ -0,0 +1,292 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { FieldProps } from "../LajiForm";
+export default class AsArrayField extends React.Component<FieldProps> {
+    static propTypes: {
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<string | number | boolean | object>;
+    };
+    static getName(): string;
+    getStateFromProps(props: FieldProps): {
+        formData: any[];
+        schema: {
+            title: any;
+            type: string;
+            items: any;
+            maxItems: number;
+        };
+        onChange: (formData: any[]) => void;
+        uiSchema: any;
+        errorSchema: any;
+        formContext: import("../LajiForm").FormContext;
+        idSchema: import("@rjsf/utils").IdSchema<any>;
+        onBlur: (id: string, value: any) => void;
+        onFocus: (id: string, value: any) => void;
+        autofocus?: boolean | undefined;
+        disabled: boolean;
+        hideError?: boolean | undefined;
+        readonly: boolean;
+        required?: boolean | undefined;
+        name: string;
+        idPrefix?: string | undefined;
+        idSeparator?: string | undefined;
+        rawErrors?: string[] | undefined;
+        registry: import("@rjsf/utils").Registry<any, any, import("../LajiForm").FormContext>;
+        hidden?: boolean | undefined;
+        dir?: string | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        color?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        prefix?: string | undefined;
+        children?: React.ReactNode;
+        id?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+        contextMenu?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "numeric" | "none" | "text" | "decimal" | "tel" | "url" | "email" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    };
+    onChange: (formData: any[]) => void;
+}

package/lib/components/fields/AsArrayField.js

@@ -0,0 +1,38 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const VirtualSchemaField_1 = require("../VirtualSchemaField");
+let AsArrayField = class AsArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onChange = (formData) => {
+            this.props.onChange(formData === null || formData === void 0 ? void 0 : formData[0]);
+        };
+    }
+    static getName() { return "AsArrayField"; }
+    getStateFromProps(props) {
+        return Object.assign(Object.assign({}, props), { formData: props.formData !== undefined ? [props.formData] : [], schema: {
+                title: props.schema.title,
+                type: "array",
+                items: Object.assign(Object.assign({}, props.schema), { title: undefined }),
+                maxItems: 1
+            }, onChange: this.onChange });
+    }
+};
+AsArrayField.propTypes = {
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array", "object", "string", "integer", "number", "boolean"])
+    }).isRequired,
+    formData: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string, PropTypes.number, PropTypes.bool])
+};
+AsArrayField = __decorate([
+    VirtualSchemaField_1.default
+], AsArrayField);
+exports.default = AsArrayField;

package/lib/components/fields/AudioArrayField.d.ts

@@ -0,0 +1,22 @@
+export default class AudioArrayField extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    ALLOWED_FILE_TYPES: string[];
+    ACCEPT_FILE_TYPES: string[];
+    MAX_FILE_SIZE: number;
+    KEY: string;
+    ENDPOINT: string;
+    GLYPH: string;
+    TRANSLATION_TAKE_NEW: string;
+    TRANSLATION_SELECT_FILE: string;
+    TRANSLATION_NO_MEDIA: string;
+    CONTAINER_CLASS: string;
+    METADATA_FORM_ID: string;
+    renderMedia: (id: any, idx: any) => JSX.Element;
+    renderLoadingMedia: () => null;
+    onMediaClick: () => null;
+    renderModalMedia: (idx: any) => JSX.Element;
+    formatValue: (value: any) => any;
+}
+import * as React from "react";

package/lib/components/fields/AudioArrayField.js

@@ -0,0 +1,100 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const { useState, useEffect } = React;
+const ImageArrayField_1 = require("./ImageArrayField");
+const Spinner = require("react-spinner");
+const components_1 = require("../components");
+const ReactContext_1 = require("../../ReactContext");
+const FILE_TYPES = ["audio/mp3", "audio/mpeg", "audio/x-wav", "audio/wav", "audio/wave", "audio/vnd.wave"];
+let AudioArrayField = class AudioArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ALLOWED_FILE_TYPES = FILE_TYPES;
+        this.ACCEPT_FILE_TYPES = ["audio/*"];
+        this.MAX_FILE_SIZE = 20000000;
+        this.KEY = "AUDIO";
+        this.ENDPOINT = "audio";
+        this.GLYPH = "headphones";
+        this.TRANSLATION_TAKE_NEW = "TakeNewRecording";
+        this.TRANSLATION_SELECT_FILE = "SelectRecording";
+        this.TRANSLATION_NO_MEDIA = "NoRecording";
+        this.CONTAINER_CLASS = "audios-container";
+        this.METADATA_FORM_ID = "MHL.63";
+        this.renderMedia = (id, idx) => (React.createElement("div", { className: "audio-container" },
+            React.createElement(AudioButton, { id: id, idx: idx, apiClient: this.props.formContext.apiClient, translations: this.props.formContext.translations }),
+            React.createElement(components_1.GlyphButton, { className: "audio-metadata-button", variant: "info", glyph: "pencil", onClick: this.openModalFor(idx) },
+                " ",
+                this.props.formContext.translations.Edit)));
+        this.renderLoadingMedia = () => null;
+        this.renderLoadingMedia = () => React.createElement("div", { className: "audio-container loading" },
+            React.createElement(Spinner, null));
+        this.onMediaClick = () => null;
+        this.renderModalMedia = (idx) => (React.createElement("div", null,
+            React.createElement("img", { src: this.state.modalMediaSrc }),
+            React.createElement(LajiAudio, { id: this.props.formData[idx], style: { width: "100%" }, apiClient: this.props.formContext.apiClient, downloadLinks: true, translations: this.props.formContext.translations })));
+        this.formatValue = (value) => {
+            const { Glyphicon } = this.context.theme;
+            return (value || []).map((id, idx) => React.createElement(Glyphicon, { key: idx, glyph: "headphones" }));
+        };
+    }
+};
+AudioArrayField.contextType = ReactContext_1.default;
+AudioArrayField = __decorate([
+    ImageArrayField_1.MediaArrayField
+], AudioArrayField);
+exports.default = AudioArrayField;
+const AudioButton = React.forwardRef((props, ref) => {
+    const [loaded, setLoaded] = useState(null);
+    const [playing, setPlaying] = useState(null);
+    const audioRef = React.useRef();
+    const play = React.useCallback(() => {
+        setPlaying(true);
+        audioRef.current.play();
+    }, [audioRef, setPlaying]);
+    const stop = React.useCallback(() => {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        setPlaying(false);
+    }, [audioRef, setPlaying]);
+    const onKeyDown = React.useCallback((e) => {
+        if (e.key === " ") {
+            playing ? stop() : play();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, [playing, stop, play]);
+    const { Glyphicon } = React.useContext(ReactContext_1.default).theme;
+    return (React.createElement(React.Fragment, null,
+        !loaded
+            ? React.createElement("div", { className: "media-loading" },
+                React.createElement(Spinner, null))
+            : React.createElement(Glyphicon, { glyph: playing ? "pause" : "play", onClick: playing ? stop : play, ref: ref, tabIndex: 0, onKeyDown: onKeyDown }),
+        React.createElement(LajiAudio, { style: { display: "none" }, ref: audioRef, id: props.id, onLoaded: setLoaded, onStop: stop, apiClient: props.apiClient, translations: props.translations })));
+});
+const LajiAudio = React.forwardRef((props, ref) => {
+    const [mp3Url, setMp3Url] = useState(null);
+    const [wavUrl, setWavUrl] = useState(null);
+    useEffect(() => {
+        props.apiClient.fetchCached(`/audio/${props.id}`, undefined, { failSilently: true }).then(response => {
+            setMp3Url(response.mp3URL);
+            setWavUrl(response.wavURL);
+            props.onLoaded && props.onLoaded(true);
+        });
+    });
+    return !mp3Url ? React.createElement(Spinner, { style: props.style }) : (React.createElement("div", null,
+        React.createElement("audio", { controls: true, style: props.style, ref: ref, onPause: props.onStop },
+            React.createElement("source", { src: mp3Url })),
+        props.downloadLinks && (React.createElement(React.Fragment, null,
+            React.createElement("a", { href: mp3Url, download: true }, `${props.translations.Download} mp3`),
+            wavUrl &&
+                React.createElement(React.Fragment, null,
+                    " | ",
+                    React.createElement("a", { href: wavUrl, download: true }, `${props.translations.Download} wav`))))));
+});

package/lib/components/fields/AutoArrayField.d.ts

@@ -0,0 +1,24 @@
+export default class AutoArrayField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                autofocus: any;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<any[]>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    getStateFromProps(props: any): {
+        formData: any;
+        onChange: (formData: any) => void;
+    };
+    emptyItem: any;
+    onChange: (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";