ferns-ui 0.18.4 → 0.19.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/Field.d.ts +0 -5
- package/dist/Field.js +2 -6
- package/dist/Field.js.map +1 -1
- package/dist/TapToEdit.d.ts +4 -2
- package/dist/TapToEdit.js +9 -7
- package/dist/TapToEdit.js.map +1 -1
- package/package.json +1 -1
- package/src/Field.tsx +2 -6
- package/src/TapToEdit.tsx +36 -25
package/dist/Field.d.ts
CHANGED
|
@@ -13,9 +13,4 @@ export interface FieldProps extends FieldWithLabelsProps {
|
|
|
13
13
|
placeholder?: string;
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
}
|
|
16
|
-
/**
|
|
17
|
-
* Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
|
|
18
|
-
* initialValue will not work.
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
16
|
export declare const Field: ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, }: FieldProps) => JSX.Element;
|
package/dist/Field.js
CHANGED
|
@@ -8,11 +8,6 @@ import { Switch } from "./Switch";
|
|
|
8
8
|
import { Text } from "./Text";
|
|
9
9
|
import { TextArea } from "./TextArea";
|
|
10
10
|
import { TextField } from "./TextField";
|
|
11
|
-
/**
|
|
12
|
-
* Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
|
|
13
|
-
* initialValue will not work.
|
|
14
|
-
*
|
|
15
|
-
*/
|
|
16
11
|
export const Field = ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, }) => {
|
|
17
12
|
const handleAddressChange = (field, newValue) => {
|
|
18
13
|
onChange(Object.assign(Object.assign({}, value), { [field]: newValue }));
|
|
@@ -64,7 +59,8 @@ export const Field = ({ name, label, labelColor, height, type, rows, value, onCh
|
|
|
64
59
|
value: value, onChange: (result) => onChange(result.value) }));
|
|
65
60
|
}
|
|
66
61
|
else if (type === "address") {
|
|
67
|
-
const
|
|
62
|
+
const addressValue = value ? value : {};
|
|
63
|
+
const { address1 = "", address2 = "", city = "", state = "", zipcode = "", } = addressValue;
|
|
68
64
|
return (React.createElement(React.Fragment, null,
|
|
69
65
|
React.createElement(TextField, { id: "address1", label: "Street Address", type: "text", value: address1, onChange: (result) => handleAddressChange("address1", result.value) }),
|
|
70
66
|
React.createElement(TextField, { id: "address2", label: "Apt, suite, etc", type: "text", value: address2, onChange: (result) => handleAddressChange("address2", result.value) }),
|
package/dist/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,UAAU,EAAoB,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AA6BtC
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"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"}
|
package/dist/TapToEdit.d.ts
CHANGED
|
@@ -3,11 +3,13 @@ import { BoxProps } from "./Common";
|
|
|
3
3
|
import { FieldProps } from "./Field";
|
|
4
4
|
export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
|
|
5
5
|
title: string;
|
|
6
|
-
|
|
6
|
+
value: any;
|
|
7
|
+
setValue?: (value: any) => void;
|
|
7
8
|
onSave?: (value: any) => void | Promise<void>;
|
|
8
9
|
editable?: boolean;
|
|
10
|
+
isEditing?: boolean;
|
|
9
11
|
rowBoxProps?: Partial<BoxProps>;
|
|
10
12
|
transform?: (value: any) => string;
|
|
11
13
|
fieldComponent?: (setValue: () => void) => ReactElement;
|
|
12
14
|
}
|
|
13
|
-
export declare const TapToEdit: ({
|
|
15
|
+
export declare const TapToEdit: ({ value, setValue, title, onSave, editable, isEditing, rowBoxProps, transform, fieldComponent, ...fieldProps }: TapToEditProps) => ReactElement;
|
package/dist/TapToEdit.js
CHANGED
|
@@ -16,13 +16,15 @@ import { Field } from "./Field";
|
|
|
16
16
|
import { Icon } from "./Icon";
|
|
17
17
|
import { Text } from "./Text";
|
|
18
18
|
export const TapToEdit = (_a) => {
|
|
19
|
-
var {
|
|
19
|
+
var { value, setValue, title, onSave, editable = true, isEditing = false, rowBoxProps, transform, fieldComponent } = _a, fieldProps = __rest(_a, ["value", "setValue", "title", "onSave", "editable", "isEditing", "rowBoxProps", "transform", "fieldComponent"]);
|
|
20
20
|
const [editing, setEditing] = useState(false);
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
if (editable && !setValue) {
|
|
22
|
+
throw new Error("setValue is required if editable is true");
|
|
23
|
+
}
|
|
24
|
+
if (editable && (editing || isEditing)) {
|
|
23
25
|
return (React.createElement(Box, { direction: "column" },
|
|
24
26
|
fieldComponent ? (fieldComponent(setValue)) : (React.createElement(Field, Object.assign({ label: title, value: value, onChange: setValue }, fieldProps))),
|
|
25
|
-
React.createElement(Box, { direction: "row" },
|
|
27
|
+
editing && !isEditing && (React.createElement(Box, { direction: "row" },
|
|
26
28
|
React.createElement(Button, { color: "blue", inline: true, text: "Save", onClick: async () => {
|
|
27
29
|
if (!onSave) {
|
|
28
30
|
console.error("No onSave provided for editable TapToEdit");
|
|
@@ -35,13 +37,13 @@ export const TapToEdit = (_a) => {
|
|
|
35
37
|
React.createElement(Box, { marginLeft: 2 },
|
|
36
38
|
React.createElement(Button, { color: "red", inline: true, text: "Cancel", onClick: () => {
|
|
37
39
|
setEditing(false);
|
|
38
|
-
} })))));
|
|
40
|
+
} }))))));
|
|
39
41
|
}
|
|
40
42
|
else {
|
|
41
|
-
let displayValue =
|
|
43
|
+
let displayValue = value;
|
|
42
44
|
// If a transform props is present, that takes priority
|
|
43
45
|
if (transform) {
|
|
44
|
-
displayValue = transform(
|
|
46
|
+
displayValue = transform(value);
|
|
45
47
|
}
|
|
46
48
|
else {
|
|
47
49
|
// If no transform, try and display the value reasonably.
|
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;
|
|
1
|
+
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Field.tsx
CHANGED
|
@@ -38,11 +38,6 @@ export interface FieldProps extends FieldWithLabelsProps {
|
|
|
38
38
|
disabled?: boolean;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
/**
|
|
42
|
-
* Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
|
|
43
|
-
* initialValue will not work.
|
|
44
|
-
*
|
|
45
|
-
*/
|
|
46
41
|
export const Field = ({
|
|
47
42
|
name,
|
|
48
43
|
label,
|
|
@@ -156,13 +151,14 @@ export const Field = ({
|
|
|
156
151
|
/>
|
|
157
152
|
);
|
|
158
153
|
} else if (type === "address") {
|
|
154
|
+
const addressValue = value ? value : {};
|
|
159
155
|
const {
|
|
160
156
|
address1 = "",
|
|
161
157
|
address2 = "",
|
|
162
158
|
city = "",
|
|
163
159
|
state = "",
|
|
164
160
|
zipcode = "",
|
|
165
|
-
}: AddressInterface =
|
|
161
|
+
}: AddressInterface = addressValue;
|
|
166
162
|
return (
|
|
167
163
|
<>
|
|
168
164
|
<TextField
|
package/src/TapToEdit.tsx
CHANGED
|
@@ -9,11 +9,15 @@ import {Text} from "./Text";
|
|
|
9
9
|
|
|
10
10
|
export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
|
|
11
11
|
title: string;
|
|
12
|
-
|
|
12
|
+
value: any;
|
|
13
|
+
// Not required if not editable.
|
|
14
|
+
setValue?: (value: any) => void;
|
|
13
15
|
// Not required if not editable.
|
|
14
16
|
onSave?: (value: any) => void | Promise<void>;
|
|
15
17
|
// Defaults to true
|
|
16
18
|
editable?: boolean;
|
|
19
|
+
// enable edit mode from outside the component
|
|
20
|
+
isEditing?: boolean;
|
|
17
21
|
// For changing how the non-editing row renders
|
|
18
22
|
rowBoxProps?: Partial<BoxProps>;
|
|
19
23
|
transform?: (value: any) => string;
|
|
@@ -21,19 +25,24 @@ export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
|
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
export const TapToEdit = ({
|
|
24
|
-
|
|
28
|
+
value,
|
|
29
|
+
setValue,
|
|
25
30
|
title,
|
|
26
31
|
onSave,
|
|
27
32
|
editable = true,
|
|
33
|
+
isEditing = false,
|
|
28
34
|
rowBoxProps,
|
|
29
35
|
transform,
|
|
30
36
|
fieldComponent,
|
|
31
37
|
...fieldProps
|
|
32
38
|
}: TapToEditProps): ReactElement => {
|
|
33
39
|
const [editing, setEditing] = useState(false);
|
|
34
|
-
const [value, setValue] = useState(initialValue);
|
|
35
40
|
|
|
36
|
-
if (
|
|
41
|
+
if (editable && !setValue) {
|
|
42
|
+
throw new Error("setValue is required if editable is true");
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (editable && (editing || isEditing)) {
|
|
37
46
|
return (
|
|
38
47
|
<Box direction="column">
|
|
39
48
|
{fieldComponent ? (
|
|
@@ -41,38 +50,40 @@ export const TapToEdit = ({
|
|
|
41
50
|
) : (
|
|
42
51
|
<Field label={title} value={value} onChange={setValue} {...fieldProps} />
|
|
43
52
|
)}
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
color="blue"
|
|
47
|
-
inline
|
|
48
|
-
text="Save"
|
|
49
|
-
onClick={async (): Promise<void> => {
|
|
50
|
-
if (!onSave) {
|
|
51
|
-
console.error("No onSave provided for editable TapToEdit");
|
|
52
|
-
} else {
|
|
53
|
-
await onSave(value);
|
|
54
|
-
}
|
|
55
|
-
setEditing(false);
|
|
56
|
-
}}
|
|
57
|
-
/>
|
|
58
|
-
<Box marginLeft={2}>
|
|
53
|
+
{editing && !isEditing && (
|
|
54
|
+
<Box direction="row">
|
|
59
55
|
<Button
|
|
60
|
-
color="
|
|
56
|
+
color="blue"
|
|
61
57
|
inline
|
|
62
|
-
text="
|
|
63
|
-
onClick={(): void => {
|
|
58
|
+
text="Save"
|
|
59
|
+
onClick={async (): Promise<void> => {
|
|
60
|
+
if (!onSave) {
|
|
61
|
+
console.error("No onSave provided for editable TapToEdit");
|
|
62
|
+
} else {
|
|
63
|
+
await onSave(value);
|
|
64
|
+
}
|
|
64
65
|
setEditing(false);
|
|
65
66
|
}}
|
|
66
67
|
/>
|
|
68
|
+
<Box marginLeft={2}>
|
|
69
|
+
<Button
|
|
70
|
+
color="red"
|
|
71
|
+
inline
|
|
72
|
+
text="Cancel"
|
|
73
|
+
onClick={(): void => {
|
|
74
|
+
setEditing(false);
|
|
75
|
+
}}
|
|
76
|
+
/>
|
|
77
|
+
</Box>
|
|
67
78
|
</Box>
|
|
68
|
-
|
|
79
|
+
)}
|
|
69
80
|
</Box>
|
|
70
81
|
);
|
|
71
82
|
} else {
|
|
72
|
-
let displayValue =
|
|
83
|
+
let displayValue = value;
|
|
73
84
|
// If a transform props is present, that takes priority
|
|
74
85
|
if (transform) {
|
|
75
|
-
displayValue = transform(
|
|
86
|
+
displayValue = transform(value);
|
|
76
87
|
} else {
|
|
77
88
|
// If no transform, try and display the value reasonably.
|
|
78
89
|
if (fieldProps?.type === "boolean") {
|