ferns-ui 0.18.0 → 0.18.1
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/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/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/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":"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"}
|
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/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
|