ferns-ui 0.18.0 → 0.18.2
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/dist/CustomSelect.d.ts +14 -0
- package/dist/CustomSelect.js +36 -0
- package/dist/CustomSelect.js.map +1 -0
- package/dist/Field.js +3 -30
- package/dist/Field.js.map +1 -1
- package/dist/Modal.d.ts +2 -1
- package/dist/Modal.js +2 -2
- package/dist/Modal.js.map +1 -1
- package/dist/TapToEdit.d.ts +1 -1
- package/dist/TapToEdit.js +2 -2
- package/dist/TapToEdit.js.map +1 -1
- package/package.json +1 -1
- package/src/CustomSelect.tsx +77 -0
- package/src/Field.tsx +3 -52
- package/src/Modal.tsx +9 -2
- package/src/TapToEdit.tsx +3 -3
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
2
|
+
export interface CustomSelectProps {
|
|
3
|
+
value: string;
|
|
4
|
+
onChange: (value: string) => void;
|
|
5
|
+
options: Array<{
|
|
6
|
+
label: string;
|
|
7
|
+
value: string;
|
|
8
|
+
}>;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
label?: string;
|
|
12
|
+
labelColor?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const CustomSelect: ({ value, onChange, placeholder, disabled, options, }: CustomSelectProps) => ReactElement | null;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import { Box } from "./Box";
|
|
3
|
+
import { SelectList } from "./SelectList";
|
|
4
|
+
import { TextField } from "./TextField";
|
|
5
|
+
export const CustomSelect = ({ value, onChange, placeholder, disabled, options, }) => {
|
|
6
|
+
const [customValue, setCustomValue] = useState("");
|
|
7
|
+
const [showCustomInput, setShowCustomInput] = useState(false);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (!showCustomInput) {
|
|
10
|
+
setCustomValue(value);
|
|
11
|
+
}
|
|
12
|
+
}, [showCustomInput, value]);
|
|
13
|
+
// Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
|
|
14
|
+
const handleCustomSelectListChange = (newValue) => {
|
|
15
|
+
// If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
|
|
16
|
+
if (newValue === "custom") {
|
|
17
|
+
setShowCustomInput(true);
|
|
18
|
+
setCustomValue("custom");
|
|
19
|
+
onChange("");
|
|
20
|
+
}
|
|
21
|
+
// If any non-custom value is selected
|
|
22
|
+
else {
|
|
23
|
+
// Close the custom input if open and clear the value
|
|
24
|
+
if (showCustomInput) {
|
|
25
|
+
setShowCustomInput(false);
|
|
26
|
+
}
|
|
27
|
+
// Update the field value and select value
|
|
28
|
+
onChange(newValue);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return (React.createElement(React.Fragment, null,
|
|
32
|
+
React.createElement(SelectList, { id: "providedOptions", options: [...options, { label: "Custom", value: "custom" }], placeholder: "Select an option", value: customValue, onChange: handleCustomSelectListChange }),
|
|
33
|
+
Boolean(showCustomInput) && (React.createElement(Box, { paddingY: 2 },
|
|
34
|
+
React.createElement(TextField, { disabled: disabled, id: "customOptions", placeholder: placeholder, type: "text", value: value, onChange: (result) => onChange(result.value) })))));
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=CustomSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomSelect.js","sourceRoot":"","sources":["../src/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAYtC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,GACW,EAAuB,EAAE;IAC3C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,eAAe,EAAE;YACpB,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,wHAAwH;IACxH,MAAM,4BAA4B,GAAG,CAAC,QAAgB,EAAE,EAAE;QACxD,uGAAuG;QACvG,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,cAAc,CAAC,QAAQ,CAAC,CAAC;YACzB,QAAQ,CAAC,EAAE,CAAC,CAAC;SACd;QAED,sCAAsC;aACjC;YACH,qDAAqD;YACrD,IAAI,eAAe,EAAE;gBACnB,kBAAkB,CAAC,KAAK,CAAC,CAAC;aAC3B;YAED,0CAA0C;YAC1C,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;IACH,CAAC,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAC,iBAAiB,EACpB,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC,CAAC,EACzD,WAAW,EAAC,kBAAkB,EAC9B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,4BAA4B,GACtC;QACD,OAAO,CAAC,eAAe,CAAC,IAAI,CAC3B,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;YACd,oBAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAC,eAAe,EAClB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GAC5C,CACE,CACP,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/Field.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { Box } from "./Box";
|
|
3
3
|
import { USSTATESLIST } from "./Constants";
|
|
4
|
+
import { CustomSelect } from "./CustomSelect";
|
|
4
5
|
import { FieldWithLabels } from "./FieldWithLabels";
|
|
5
6
|
import { SelectList } from "./SelectList";
|
|
6
7
|
import { Switch } from "./Switch";
|
|
@@ -13,31 +14,6 @@ import { TextField } from "./TextField";
|
|
|
13
14
|
*
|
|
14
15
|
*/
|
|
15
16
|
export const Field = ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, }) => {
|
|
16
|
-
// showCustomInput, customValue, and selectValue are all for type="customSelect"
|
|
17
|
-
const [showCustomInput, setShowCustomInput] = useState(false);
|
|
18
|
-
const [customValue, setCustomValue] = useState("");
|
|
19
|
-
// Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
|
|
20
|
-
const handleCustomSelectListChange = (newValue) => {
|
|
21
|
-
// If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
|
|
22
|
-
if (newValue === "custom") {
|
|
23
|
-
setShowCustomInput(true);
|
|
24
|
-
onChange("");
|
|
25
|
-
}
|
|
26
|
-
// If any non-custom value is selected
|
|
27
|
-
else {
|
|
28
|
-
// Close the custom input if open and clear the value
|
|
29
|
-
if (showCustomInput) {
|
|
30
|
-
setShowCustomInput(false);
|
|
31
|
-
setCustomValue("");
|
|
32
|
-
}
|
|
33
|
-
// Update the field value and select value
|
|
34
|
-
onChange(newValue);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const handleCustomSelectTextInputChange = (newValue) => {
|
|
38
|
-
onChange(newValue);
|
|
39
|
-
setCustomValue(newValue);
|
|
40
|
-
};
|
|
41
17
|
const handleAddressChange = (field, newValue) => {
|
|
42
18
|
onChange(Object.assign(Object.assign({}, value), { [field]: newValue }));
|
|
43
19
|
};
|
|
@@ -101,10 +77,7 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
101
77
|
console.error("Field with type=customSelect require options");
|
|
102
78
|
return null;
|
|
103
79
|
}
|
|
104
|
-
return (React.createElement(
|
|
105
|
-
React.createElement(SelectList, { id: "providedOptions", options: [...options, { label: "Custom", value: "custom" }], placeholder: "Select an option", value: value, onChange: handleCustomSelectListChange }),
|
|
106
|
-
Boolean(showCustomInput) && (React.createElement(Box, { paddingY: 2 },
|
|
107
|
-
React.createElement(TextField, { disabled: disabled, id: "customOptions", placeholder: placeholder, type: "text", value: customValue, onChange: (result) => handleCustomSelectTextInputChange(result.value) })))));
|
|
80
|
+
return (React.createElement(CustomSelect, { disabled: disabled, options: options, value: value, onChange: onChange }));
|
|
108
81
|
}
|
|
109
82
|
else {
|
|
110
83
|
let tfType = "text";
|
package/dist/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"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"}
|
package/dist/Modal.d.ts
CHANGED
|
@@ -10,8 +10,9 @@ interface ModalProps {
|
|
|
10
10
|
subHeading?: string;
|
|
11
11
|
primaryButtonText?: string;
|
|
12
12
|
primaryButtonOnClick?: (value?: any) => void;
|
|
13
|
+
primaryButtonDisabled?: boolean;
|
|
13
14
|
secondaryButtonText?: string;
|
|
14
15
|
secondaryButtonOnClick?: (value?: any) => void;
|
|
15
16
|
}
|
|
16
|
-
export declare const Modal: ({ onDismiss, visible, align, children, footer, heading, size, subHeading, primaryButtonText, primaryButtonOnClick, secondaryButtonText, secondaryButtonOnClick, }: ModalProps) => React.ReactElement;
|
|
17
|
+
export declare const Modal: ({ onDismiss, visible, align, children, footer, heading, size, subHeading, primaryButtonText, primaryButtonOnClick, primaryButtonDisabled, secondaryButtonText, secondaryButtonOnClick, }: ModalProps) => React.ReactElement;
|
|
17
18
|
export {};
|
package/dist/Modal.js
CHANGED
|
@@ -4,7 +4,7 @@ import { Box } from "./Box";
|
|
|
4
4
|
import { Button } from "./Button";
|
|
5
5
|
import { Heading } from "./Heading";
|
|
6
6
|
import { Text } from "./Text";
|
|
7
|
-
export const Modal = ({ onDismiss, visible, align = "center", children, footer, heading, size, subHeading, primaryButtonText, primaryButtonOnClick, secondaryButtonText, secondaryButtonOnClick, }) => {
|
|
7
|
+
export const Modal = ({ onDismiss, visible, align = "center", children, footer, heading, size, subHeading, primaryButtonText, primaryButtonOnClick, primaryButtonDisabled = false, secondaryButtonText, secondaryButtonOnClick, }) => {
|
|
8
8
|
if (subHeading && !heading) {
|
|
9
9
|
throw new Error("Cannot render Modal with subHeading and no heading");
|
|
10
10
|
}
|
|
@@ -26,7 +26,7 @@ export const Modal = ({ onDismiss, visible, align = "center", children, footer,
|
|
|
26
26
|
Boolean(secondaryButtonText) && (React.createElement(Box, { marginRight: 4, minWidth: 120 },
|
|
27
27
|
React.createElement(Button, { color: "gray", text: secondaryButtonText !== null && secondaryButtonText !== void 0 ? secondaryButtonText : "", onClick: secondaryButtonOnClick }))),
|
|
28
28
|
React.createElement(Box, { minWidth: 120 },
|
|
29
|
-
React.createElement(Button, { color: "primary", text: primaryButtonText !== null && primaryButtonText !== void 0 ? primaryButtonText : "", onClick: primaryButtonOnClick }))));
|
|
29
|
+
React.createElement(Button, { color: "primary", disabled: primaryButtonDisabled, text: primaryButtonText !== null && primaryButtonText !== void 0 ? primaryButtonText : "", onClick: primaryButtonOnClick }))));
|
|
30
30
|
}
|
|
31
31
|
let sizePx = 540;
|
|
32
32
|
if (size === "md") {
|
package/dist/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAE,KAAK,IAAI,OAAO,EAAC,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAE,KAAK,IAAI,OAAO,EAAC,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAwB5B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,SAAS,EACT,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,GAAG,KAAK,EAC7B,mBAAmB,EACnB,sBAAsB,GACX,EAAsB,EAAE;IACnC,IAAI,UAAU,IAAI,CAAC,OAAO,EAAE;QAC1B,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;KACvE;IACD,IAAI,CAAC,MAAM,IAAI,CAAC,iBAAiB,IAAI,CAAC,mBAAmB,EAAE;QACzD,MAAM,IAAI,KAAK,CACb,+EAA+E,CAChF,CAAC;KACH;IAED,SAAS,YAAY;QACnB,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM;YAC5B,oBAAC,GAAG;gBACF,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,IAAI,IACjE,OAAO,CACA,CACN;YACL,OAAO,CAAC,UAAU,CAAC,IAAI,CACtB,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;gBACd,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAG,UAAU,CAAQ,CACvE,CACP,CACG,CACP,CAAC;IACJ,CAAC;IACD,SAAS,YAAY;QACnB,IAAI,MAAM,EAAE;YACV,OAAO,MAAM,CAAC;SACf;QACD,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM;YACnD,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAC/B,oBAAC,GAAG,IAAC,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG;gBAChC,oBAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE,EAC/B,OAAO,EAAE,sBAAsB,GAC/B,CACE,CACP;YACD,oBAAC,GAAG,IAAC,QAAQ,EAAE,GAAG;gBAChB,oBAAC,MAAM,IACL,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,qBAAqB,EAC/B,IAAI,EAAE,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,EAAE,EAC7B,OAAO,EAAE,oBAAoB,GAC7B,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,GAAoB,GAAG,CAAC;IAClC,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,GAAG,CAAC;KACd;SAAM,IAAI,IAAI,KAAK,IAAI,EAAE;QACxB,MAAM,GAAG,GAAG,CAAC;KACd;IAED,gCAAgC;IAChC,IAAI,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;QAC3C,MAAM,GAAG,KAAK,CAAC;KAChB;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,UAAU,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM;QACrF,oBAAC,OAAO,IAAC,aAAa,EAAC,OAAO,EAAC,WAAW,QAAC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS;YACpF,oBAAC,GAAG,IACF,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAC,OAAO,EACb,yBAAyB,EAAE;oBACzB,OAAO,EAAE;wBACP,MAAM,EAAE,CAAC;wBACT,WAAW,EAAE,MAAM;wBACnB,YAAY,EAAE;4BACZ,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,CAAC;yBACV;wBACD,YAAY,EAAE,CAAC;wBACf,aAAa,EAAE,GAAG;wBAClB,SAAS,EAAE,CAAC;qBACb;iBACF,EACD,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,EACb,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,MAAM,QACN,KAAK,EAAE,MAAM;gBAEb,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM;oBAC/B,YAAY,EAAE;oBACf,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,IAAG,QAAQ,CAAO;oBAClC,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,IAAG,YAAY,EAAE,CAAO,CACpC,CACF,CACE,CACN,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/TapToEdit.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactElement } from "react";
|
|
2
2
|
import { BoxProps } from "./Common";
|
|
3
3
|
import { FieldProps } from "./Field";
|
|
4
|
-
export interface TapToEditProps extends Omit<FieldProps, "
|
|
4
|
+
export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
|
|
5
5
|
title: string;
|
|
6
6
|
initialValue: any;
|
|
7
7
|
onSave?: (value: any) => void | Promise<void>;
|
package/dist/TapToEdit.js
CHANGED
|
@@ -16,12 +16,12 @@ import { Field } from "./Field";
|
|
|
16
16
|
import { Icon } from "./Icon";
|
|
17
17
|
import { Text } from "./Text";
|
|
18
18
|
export const TapToEdit = (_a) => {
|
|
19
|
-
var { initialValue, title, onSave, editable, rowBoxProps, transform, fieldComponent } = _a, fieldProps = __rest(_a, ["initialValue", "title", "onSave", "editable", "rowBoxProps", "transform", "fieldComponent"]);
|
|
19
|
+
var { initialValue, title, onSave, editable = true, rowBoxProps, transform, fieldComponent } = _a, fieldProps = __rest(_a, ["initialValue", "title", "onSave", "editable", "rowBoxProps", "transform", "fieldComponent"]);
|
|
20
20
|
const [editing, setEditing] = useState(false);
|
|
21
21
|
const [value, setValue] = useState(initialValue);
|
|
22
22
|
if (editing) {
|
|
23
23
|
return (React.createElement(Box, { direction: "column" },
|
|
24
|
-
fieldComponent ? (fieldComponent(setValue)) : (React.createElement(Field, Object.assign({ label: title, onChange: setValue }, fieldProps))),
|
|
24
|
+
fieldComponent ? (fieldComponent(setValue)) : (React.createElement(Field, Object.assign({ label: title, value: value, onChange: setValue }, fieldProps))),
|
|
25
25
|
React.createElement(Box, { direction: "row" },
|
|
26
26
|
React.createElement(Button, { color: "blue", inline: true, text: "Save", onClick: async () => {
|
|
27
27
|
if (!onSave) {
|
package/dist/TapToEdit.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAe,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAC,KAAK,EAAa,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAe5B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAST,EAAgB,EAAE;QATT,EACxB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,QAAQ,
|
|
1
|
+
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAe,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAC,KAAK,EAAa,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAe5B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAST,EAAgB,EAAE;QATT,EACxB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,WAAW,EACX,SAAS,EACT,cAAc,OAEC,EADZ,UAAU,cARW,6FASzB,CADc;IAEb,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEjD,IAAI,OAAO,EAAE;QACX,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,QAAQ;YACpB,cAAc,CAAC,CAAC,CAAC,CAChB,cAAc,CAAC,QAAe,CAAC,CAChC,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,kBAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAM,UAAU,EAAI,CAC1E;YACD,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK;gBAClB,oBAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,MAAM,QACN,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,KAAK,IAAmB,EAAE;wBACjC,IAAI,CAAC,MAAM,EAAE;4BACX,OAAO,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;yBAC5D;6BAAM;4BACL,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;yBACrB;wBACD,UAAU,CAAC,KAAK,CAAC,CAAC;oBACpB,CAAC,GACD;gBACF,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;oBAChB,oBAAC,MAAM,IACL,KAAK,EAAC,KAAK,EACX,MAAM,QACN,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAS,EAAE;4BAClB,UAAU,CAAC,KAAK,CAAC,CAAC;wBACpB,CAAC,GACD,CACE,CACF,CACF,CACP,CAAC;KACH;SAAM;QACL,IAAI,YAAY,GAAG,YAAY,CAAC;QAChC,uDAAuD;QACvD,IAAI,SAAS,EAAE;YACb,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;SACxC;aAAM;YACL,yDAAyD;YACzD,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,EAAE;gBAClC,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;aACrC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,SAAS,EAAE;gBACzC,iHAAiH;gBACjH,oCAAoC;gBACpC,YAAY,GAAG,GAAG,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;aACjF;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,UAAU,EAAE;gBAC1C,2EAA2E;gBAC3E,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;oBAC/C,KAAK,EAAE,UAAU;oBACjB,QAAQ,EAAE,KAAK;oBACf,qBAAqB,EAAE,CAAC;iBACzB,CAAC,CAAC;gBACH,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACxC;iBAAM,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAK,aAAa,EAAE;gBAC7C,MAAM;gBACN,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACjC;SACF;QACD,OAAO,CACL,oBAAC,GAAG,kBACF,SAAS,EAAC,KAAK,EACf,cAAc,EAAC,SAAS,EACxB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,MAAM,IACR,WAAW;YAEf,oBAAC,GAAG;gBACF,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM;oBAAE,KAAK;wBAAS,CAC/B;YACN,oBAAC,GAAG,IAAC,SAAS,EAAC,KAAK;gBAClB,oBAAC,GAAG;oBACF,oBAAC,IAAI,IAAC,QAAQ,EAAC,WAAW,IAAE,YAAY,CAAQ,CAC5C;gBACL,QAAQ,IAAI,CACX,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC,EAAE,OAAO,EAAE,GAAS,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;oBACvD,oBAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC3C,CACP,CACG,CACF,CACP,CAAC;KACH;AACH,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import React, {ReactElement, useEffect, useState} from "react";
|
|
2
|
+
|
|
3
|
+
import {Box} from "./Box";
|
|
4
|
+
import {SelectList} from "./SelectList";
|
|
5
|
+
import {TextField} from "./TextField";
|
|
6
|
+
|
|
7
|
+
export interface CustomSelectProps {
|
|
8
|
+
value: string;
|
|
9
|
+
onChange: (value: string) => void;
|
|
10
|
+
options: Array<{label: string; value: string}>;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
label?: string;
|
|
14
|
+
labelColor?: string;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const CustomSelect = ({
|
|
18
|
+
value,
|
|
19
|
+
onChange,
|
|
20
|
+
placeholder,
|
|
21
|
+
disabled,
|
|
22
|
+
options,
|
|
23
|
+
}: CustomSelectProps): ReactElement | null => {
|
|
24
|
+
const [customValue, setCustomValue] = useState("");
|
|
25
|
+
const [showCustomInput, setShowCustomInput] = useState(false);
|
|
26
|
+
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (!showCustomInput) {
|
|
29
|
+
setCustomValue(value);
|
|
30
|
+
}
|
|
31
|
+
}, [showCustomInput, value]);
|
|
32
|
+
|
|
33
|
+
// Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
|
|
34
|
+
const handleCustomSelectListChange = (newValue: string) => {
|
|
35
|
+
// If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
|
|
36
|
+
if (newValue === "custom") {
|
|
37
|
+
setShowCustomInput(true);
|
|
38
|
+
setCustomValue("custom");
|
|
39
|
+
onChange("");
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// If any non-custom value is selected
|
|
43
|
+
else {
|
|
44
|
+
// Close the custom input if open and clear the value
|
|
45
|
+
if (showCustomInput) {
|
|
46
|
+
setShowCustomInput(false);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Update the field value and select value
|
|
50
|
+
onChange(newValue);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<>
|
|
56
|
+
<SelectList
|
|
57
|
+
id="providedOptions"
|
|
58
|
+
options={[...options, {label: "Custom", value: "custom"}]}
|
|
59
|
+
placeholder="Select an option"
|
|
60
|
+
value={customValue}
|
|
61
|
+
onChange={handleCustomSelectListChange}
|
|
62
|
+
/>
|
|
63
|
+
{Boolean(showCustomInput) && (
|
|
64
|
+
<Box paddingY={2}>
|
|
65
|
+
<TextField
|
|
66
|
+
disabled={disabled}
|
|
67
|
+
id="customOptions"
|
|
68
|
+
placeholder={placeholder}
|
|
69
|
+
type="text"
|
|
70
|
+
value={value}
|
|
71
|
+
onChange={(result) => onChange(result.value)}
|
|
72
|
+
/>
|
|
73
|
+
</Box>
|
|
74
|
+
)}
|
|
75
|
+
</>
|
|
76
|
+
);
|
|
77
|
+
};
|
package/src/Field.tsx
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
3
|
import {Box} from "./Box";
|
|
4
4
|
import {AddressInterface, FieldWithLabelsProps, TextFieldType} from "./Common";
|
|
5
5
|
import {USSTATESLIST} from "./Constants";
|
|
6
|
+
import {CustomSelect} from "./CustomSelect";
|
|
6
7
|
import {FieldWithLabels} from "./FieldWithLabels";
|
|
7
8
|
import {SelectList, SelectListOptions} from "./SelectList";
|
|
8
9
|
import {Switch} from "./Switch";
|
|
@@ -59,36 +60,6 @@ export const Field = ({
|
|
|
59
60
|
helperText,
|
|
60
61
|
helperTextColor,
|
|
61
62
|
}: FieldProps) => {
|
|
62
|
-
// showCustomInput, customValue, and selectValue are all for type="customSelect"
|
|
63
|
-
const [showCustomInput, setShowCustomInput] = useState(false);
|
|
64
|
-
const [customValue, setCustomValue] = useState("");
|
|
65
|
-
|
|
66
|
-
// Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
|
|
67
|
-
const handleCustomSelectListChange = (newValue: string) => {
|
|
68
|
-
// If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
|
|
69
|
-
if (newValue === "custom") {
|
|
70
|
-
setShowCustomInput(true);
|
|
71
|
-
onChange("");
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
// If any non-custom value is selected
|
|
75
|
-
else {
|
|
76
|
-
// Close the custom input if open and clear the value
|
|
77
|
-
if (showCustomInput) {
|
|
78
|
-
setShowCustomInput(false);
|
|
79
|
-
setCustomValue("");
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Update the field value and select value
|
|
83
|
-
onChange(newValue);
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
const handleCustomSelectTextInputChange = (newValue: string) => {
|
|
88
|
-
onChange(newValue);
|
|
89
|
-
setCustomValue(newValue);
|
|
90
|
-
};
|
|
91
|
-
|
|
92
63
|
const handleAddressChange = (field: string, newValue: string) => {
|
|
93
64
|
onChange({...value, [field]: newValue});
|
|
94
65
|
};
|
|
@@ -239,27 +210,7 @@ export const Field = ({
|
|
|
239
210
|
return null;
|
|
240
211
|
}
|
|
241
212
|
return (
|
|
242
|
-
|
|
243
|
-
<SelectList
|
|
244
|
-
id="providedOptions"
|
|
245
|
-
options={[...options, {label: "Custom", value: "custom"}]}
|
|
246
|
-
placeholder="Select an option"
|
|
247
|
-
value={value}
|
|
248
|
-
onChange={handleCustomSelectListChange}
|
|
249
|
-
/>
|
|
250
|
-
{Boolean(showCustomInput) && (
|
|
251
|
-
<Box paddingY={2}>
|
|
252
|
-
<TextField
|
|
253
|
-
disabled={disabled}
|
|
254
|
-
id="customOptions"
|
|
255
|
-
placeholder={placeholder}
|
|
256
|
-
type="text"
|
|
257
|
-
value={customValue}
|
|
258
|
-
onChange={(result) => handleCustomSelectTextInputChange(result.value)}
|
|
259
|
-
/>
|
|
260
|
-
</Box>
|
|
261
|
-
)}
|
|
262
|
-
</>
|
|
213
|
+
<CustomSelect disabled={disabled} options={options} value={value} onChange={onChange} />
|
|
263
214
|
);
|
|
264
215
|
} else {
|
|
265
216
|
let tfType: TextFieldType = "text";
|
package/src/Modal.tsx
CHANGED
|
@@ -21,7 +21,8 @@ interface ModalProps {
|
|
|
21
21
|
// Renders a primary colored button all the way to the right in the footer, if no footer prop is provided.
|
|
22
22
|
primaryButtonText?: string;
|
|
23
23
|
primaryButtonOnClick?: (value?: any) => void;
|
|
24
|
-
|
|
24
|
+
primaryButtonDisabled?: boolean;
|
|
25
|
+
// Renders a gray button to the left of the primary button in the footer, if no footer prop is provided.
|
|
25
26
|
// Requires primaryButtonText to be defined, but is not required itself.
|
|
26
27
|
secondaryButtonText?: string;
|
|
27
28
|
secondaryButtonOnClick?: (value?: any) => void;
|
|
@@ -38,6 +39,7 @@ export const Modal = ({
|
|
|
38
39
|
subHeading,
|
|
39
40
|
primaryButtonText,
|
|
40
41
|
primaryButtonOnClick,
|
|
42
|
+
primaryButtonDisabled = false,
|
|
41
43
|
secondaryButtonText,
|
|
42
44
|
secondaryButtonOnClick,
|
|
43
45
|
}: ModalProps): React.ReactElement => {
|
|
@@ -82,7 +84,12 @@ export const Modal = ({
|
|
|
82
84
|
</Box>
|
|
83
85
|
)}
|
|
84
86
|
<Box minWidth={120}>
|
|
85
|
-
<Button
|
|
87
|
+
<Button
|
|
88
|
+
color="primary"
|
|
89
|
+
disabled={primaryButtonDisabled}
|
|
90
|
+
text={primaryButtonText ?? ""}
|
|
91
|
+
onClick={primaryButtonOnClick}
|
|
92
|
+
/>
|
|
86
93
|
</Box>
|
|
87
94
|
</Box>
|
|
88
95
|
);
|
package/src/TapToEdit.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import {Field, FieldProps} from "./Field";
|
|
|
7
7
|
import {Icon} from "./Icon";
|
|
8
8
|
import {Text} from "./Text";
|
|
9
9
|
|
|
10
|
-
export interface TapToEditProps extends Omit<FieldProps, "
|
|
10
|
+
export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
|
|
11
11
|
title: string;
|
|
12
12
|
initialValue: any;
|
|
13
13
|
// Not required if not editable.
|
|
@@ -24,7 +24,7 @@ export const TapToEdit = ({
|
|
|
24
24
|
initialValue,
|
|
25
25
|
title,
|
|
26
26
|
onSave,
|
|
27
|
-
editable,
|
|
27
|
+
editable = true,
|
|
28
28
|
rowBoxProps,
|
|
29
29
|
transform,
|
|
30
30
|
fieldComponent,
|
|
@@ -39,7 +39,7 @@ export const TapToEdit = ({
|
|
|
39
39
|
{fieldComponent ? (
|
|
40
40
|
fieldComponent(setValue as any)
|
|
41
41
|
) : (
|
|
42
|
-
<Field label={title} onChange={setValue} {...fieldProps} />
|
|
42
|
+
<Field label={title} value={value} onChange={setValue} {...fieldProps} />
|
|
43
43
|
)}
|
|
44
44
|
<Box direction="row">
|
|
45
45
|
<Button
|