@trackunit/custom-field-components 0.0.295 → 0.0.297
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/index.cjs +13 -12
- package/index.js +2 -1
- package/package.json +4 -3
- package/src/BooleanCustomField.d.ts +1 -1
- package/src/DateCustomField.d.ts +1 -1
- package/src/types.d.ts +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
The `@trackunit/custom-field-components` package contains UI components specifically for use with Custom Fields within [the Trackunit Manager platform](https://www.trackunit.com/services/manager/) and [`@trackunit/iris-app`](https://www.npmjs.com/package/@trackunit/iris-app).
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
To browse all
|
|
10
|
+
To browse all available components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
|
|
11
11
|
|
|
12
12
|
For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
|
|
13
13
|
|
package/index.cjs
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
|
|
7
7
|
var reactComponents = require('@trackunit/react-components');
|
|
8
|
+
var reactFormComponents = require('@trackunit/react-form-components');
|
|
8
9
|
var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
|
|
9
10
|
var React = require('react');
|
|
10
11
|
var uuid = require('uuid');
|
|
@@ -85,7 +86,7 @@ const BooleanCustomField = (_a) => {
|
|
|
85
86
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
|
|
86
87
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
87
88
|
}, []); // register only once
|
|
88
|
-
return (jsxRuntime.jsx(
|
|
89
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: htmlForId, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
|
|
89
90
|
};
|
|
90
91
|
|
|
91
92
|
/**
|
|
@@ -106,7 +107,7 @@ const DateCustomField = (props) => {
|
|
|
106
107
|
const value = defaultValue && new Date(defaultValue);
|
|
107
108
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value }));
|
|
108
109
|
}, [register, validationRules, defaultValue, id]);
|
|
109
|
-
return (React.createElement(
|
|
110
|
+
return (React.createElement(reactFormComponents.DateField, Object.assign({}, rest, { key: id, id: id, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, onChange: onChangeHandler, label: props.title, defaultValue: defaultValue })));
|
|
110
111
|
};
|
|
111
112
|
|
|
112
113
|
const convertToValueFormat = (value) => {
|
|
@@ -139,7 +140,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
|
|
|
139
140
|
React__namespace.useEffect(() => {
|
|
140
141
|
register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
|
|
141
142
|
}, [register, validationRules, selectedValue, id]);
|
|
142
|
-
return (jsxRuntime.jsx(
|
|
143
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactFormComponents.Select, { inputId: htmlForId, "aria-labelledby": htmlForId + "-label", disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
|
|
143
144
|
};
|
|
144
145
|
|
|
145
146
|
/**
|
|
@@ -318,28 +319,28 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
318
319
|
const typedDefinition = field.definition;
|
|
319
320
|
const typedValue = field.value;
|
|
320
321
|
const rules = getWebAddressValidationRules(typedDefinition);
|
|
321
|
-
return (jsxRuntime.jsx(
|
|
322
|
-
(typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(
|
|
322
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_e = (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : typedDefinition.defaultStringValue) !== null && _e !== void 0 ? _e : "", dataTestId: "webAddressField", actions: !typedDefinition.uiEditable &&
|
|
323
|
+
(typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactFormComponents.ActionButton, { value: (_f = typedValue.stringValue) !== null && _f !== void 0 ? _f : typedDefinition.defaultStringValue, type: "WEB_ADDRESS" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
|
|
323
324
|
}
|
|
324
325
|
case irisAppRuntimeCoreApi.CustomFieldType.EMAIL: {
|
|
325
326
|
const typedDefinition = field.definition;
|
|
326
327
|
const typedValue = field.value;
|
|
327
328
|
const rules = getEmailValidationRules(typedDefinition);
|
|
328
|
-
return (jsxRuntime.jsx(
|
|
329
|
-
(typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(
|
|
329
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_j = (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : typedDefinition.defaultStringValue) !== null && _j !== void 0 ? _j : "", actions: !typedDefinition.uiEditable &&
|
|
330
|
+
(typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactFormComponents.ActionButton, { value: (_k = typedValue.stringValue) !== null && _k !== void 0 ? _k : typedDefinition.defaultStringValue, type: "EMAIL" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
|
|
330
331
|
}
|
|
331
332
|
case irisAppRuntimeCoreApi.CustomFieldType.PHONE_NUMBER: {
|
|
332
333
|
const typedDefinition = field.definition;
|
|
333
334
|
const typedValue = field.value;
|
|
334
335
|
const rules = getPhoneNumberValidationRules(typedDefinition);
|
|
335
|
-
return (jsxRuntime.jsx(
|
|
336
|
-
(typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(
|
|
336
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key, placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "", defaultValue: (_o = (_m = typedValue.stringValue) !== null && _m !== void 0 ? _m : typedDefinition.defaultStringValue) !== null && _o !== void 0 ? _o : "", actions: !typedDefinition.uiEditable &&
|
|
337
|
+
(typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactFormComponents.ActionButton, { value: (_p = typedValue.stringValue) !== null && _p !== void 0 ? _p : typedDefinition.defaultStringValue, type: "PHONE_NUMBER" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage === "" ? "Must be a phone number" : undefined }, validation.register(key, rules))));
|
|
337
338
|
}
|
|
338
339
|
case irisAppRuntimeCoreApi.CustomFieldType.STRING: {
|
|
339
340
|
const typedDefinition = field.definition;
|
|
340
341
|
const typedValue = field.value;
|
|
341
342
|
const rules = getStringValidationRules(typedDefinition);
|
|
342
|
-
return (jsxRuntime.jsx(
|
|
343
|
+
return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_q = typedDefinition.title) !== null && _q !== void 0 ? _q : "", defaultValue: (_s = (_r = typedValue.stringValue) !== null && _r !== void 0 ? _r : typedDefinition.defaultStringValue) !== null && _s !== void 0 ? _s : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `stringField` }, validation.register(key, rules))));
|
|
343
344
|
}
|
|
344
345
|
case irisAppRuntimeCoreApi.CustomFieldType.NUMBER: {
|
|
345
346
|
const typedDefinition = field.definition;
|
|
@@ -350,10 +351,10 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
|
|
|
350
351
|
placeholder: (_t = typedDefinition.title) !== null && _t !== void 0 ? _t : "",
|
|
351
352
|
addonAfter: unit,
|
|
352
353
|
};
|
|
353
|
-
return (jsxRuntime.jsx(
|
|
354
|
+
return (jsxRuntime.jsx(reactFormComponents.FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: "numberField", defaultValue: (_v = (_u = typedValue.numberValue) !== null && _u !== void 0 ? _u : typedDefinition.defaultNumberValue) !== null && _v !== void 0 ? _v : "", readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_w = typedDefinition.minimumNumber) !== null && _w !== void 0 ? _w : undefined, max: (_x = typedDefinition.maximumNumber) !== null && _x !== void 0 ? _x : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
|
|
354
355
|
setNumberValue(e.target.value);
|
|
355
356
|
validation.register(key, rules).onChange(e);
|
|
356
|
-
} }, numberProps))) : (jsxRuntime.jsx(
|
|
357
|
+
} }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${key}-numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { dataTestId: "editIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
|
|
357
358
|
}
|
|
358
359
|
case irisAppRuntimeCoreApi.CustomFieldType.BOOLEAN: {
|
|
359
360
|
const typedDefinition = field.definition;
|
package/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { CustomFieldType } from '@trackunit/iris-app-runtime-core-api';
|
|
3
|
-
import {
|
|
3
|
+
import { IconButton, Icon } from '@trackunit/react-components';
|
|
4
|
+
import { FormGroup, Checkbox, DateField, Select, NumberInput, BaseInput, TextField, ActionButton } from '@trackunit/react-form-components';
|
|
4
5
|
import { tw, twx } from '@trackunit/tailwind-styled-components';
|
|
5
6
|
import * as React from 'react';
|
|
6
7
|
import { useCallback, useEffect, createElement, useState } from 'react';
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/custom-field-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.297",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@trackunit/react-core-contexts-test": "0.1.
|
|
8
|
-
"@trackunit/react-components": "0.1.
|
|
7
|
+
"@trackunit/react-core-contexts-test": "0.1.43",
|
|
8
|
+
"@trackunit/react-components": "0.1.77",
|
|
9
|
+
"@trackunit/react-form-components": "0.0.1",
|
|
9
10
|
"react": "18.2.0",
|
|
10
11
|
"react-hook-form": "7.40.0",
|
|
11
12
|
"uuid": "8.3.2",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CheckboxProps } from "@trackunit/react-components";
|
|
1
|
+
import { CheckboxProps } from "@trackunit/react-form-components";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { FieldValues, UseFormRegister, UseFormSetValue } from "react-hook-form";
|
|
4
4
|
import { ValidationRules } from "./getValidationRules";
|
package/src/DateCustomField.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { DateFieldProps } from "@trackunit/react-components";
|
|
2
|
+
import { DateFieldProps } from "@trackunit/react-form-components";
|
|
3
3
|
import { FieldValues, RegisterOptions, UseFormRegister, UseFormSetValue } from "react-hook-form";
|
|
4
4
|
import { FormGroupExposedProps } from "./types";
|
|
5
5
|
export interface DateCustomFieldProps extends Omit<DateFieldProps, "label">, FormGroupExposedProps {
|
package/src/types.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { FormGroupProps } from "@trackunit/react-components";
|
|
1
|
+
import { FormGroupProps } from "@trackunit/react-form-components";
|
|
2
2
|
export type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
|