ferns-ui 0.22.1 → 0.22.3
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.js +12 -5
- package/dist/CustomSelect.js.map +1 -1
- package/dist/WithLabel.js +1 -1
- package/dist/WithLabel.js.map +1 -1
- package/package.json +1 -1
- package/src/CustomSelect.tsx +13 -5
- package/src/WithLabel.tsx +1 -0
package/dist/CustomSelect.js
CHANGED
|
@@ -1,21 +1,28 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
1
|
+
import React, { useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { Box } from "./Box";
|
|
3
3
|
import { SelectList } from "./SelectList";
|
|
4
4
|
import { TextField } from "./TextField";
|
|
5
5
|
export const CustomSelect = ({ value, onChange, placeholder, disabled, options, }) => {
|
|
6
|
-
const [customValue, setCustomValue] = useState(
|
|
6
|
+
const [customValue, setCustomValue] = useState(value);
|
|
7
7
|
const [showCustomInput, setShowCustomInput] = useState(false);
|
|
8
|
+
// Boolean that checks if customValue is a value from the
|
|
9
|
+
// options prop or if it is a true custom value
|
|
10
|
+
const isValueCustom = useMemo(() => {
|
|
11
|
+
// We add an empty value to protect against an empty string custom value or if the placeholder value is selected
|
|
12
|
+
return ![...options, { value: "" }].map((i) => i.value).includes(customValue);
|
|
13
|
+
}, [options, customValue]);
|
|
8
14
|
useEffect(() => {
|
|
15
|
+
setShowCustomInput(isValueCustom);
|
|
9
16
|
if (!showCustomInput) {
|
|
10
17
|
setCustomValue(value);
|
|
11
18
|
}
|
|
12
|
-
}, [showCustomInput, value]);
|
|
19
|
+
}, [showCustomInput, value, isValueCustom]);
|
|
13
20
|
// Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
|
|
14
21
|
const handleCustomSelectListChange = (newValue) => {
|
|
15
22
|
// If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
|
|
16
23
|
if (newValue === "custom") {
|
|
17
24
|
setShowCustomInput(true);
|
|
18
|
-
setCustomValue("custom");
|
|
25
|
+
setCustomValue(isValueCustom ? "custom" : newValue);
|
|
19
26
|
onChange("");
|
|
20
27
|
}
|
|
21
28
|
// If any non-custom value is selected
|
|
@@ -29,7 +36,7 @@ export const CustomSelect = ({ value, onChange, placeholder, disabled, options,
|
|
|
29
36
|
}
|
|
30
37
|
};
|
|
31
38
|
return (React.createElement(React.Fragment, null,
|
|
32
|
-
React.createElement(SelectList, { id: "providedOptions", options: [...options, { label: "Custom", value: "custom" }], placeholder: placeholder, value: customValue, onChange: handleCustomSelectListChange }),
|
|
39
|
+
React.createElement(SelectList, { id: "providedOptions", options: [...options, { label: "Custom", value: "custom" }], placeholder: placeholder, value: isValueCustom ? "custom" : customValue, onChange: handleCustomSelectListChange }),
|
|
33
40
|
Boolean(showCustomInput) && (React.createElement(Box, { paddingY: 2 },
|
|
34
41
|
React.createElement(TextField, { disabled: disabled, id: "customOptions", placeholder: placeholder, type: "text", value: value, onChange: (result) => onChange(result.value) })))));
|
|
35
42
|
};
|
package/dist/CustomSelect.js.map
CHANGED
|
@@ -1 +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;
|
|
1
|
+
{"version":3,"file":"CustomSelect.js","sourceRoot":"","sources":["../src/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAExE,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,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,yDAAyD;IACzD,+CAA+C;IAC/C,MAAM,aAAa,GAAY,OAAO,CAAC,GAAY,EAAE;QACnD,gHAAgH;QAChH,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EAAC,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,aAAa,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,EAAE;YACpB,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5C,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,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACpD,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,EAAE,WAAW,EACxB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,EAC7C,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/WithLabel.js
CHANGED
|
@@ -9,7 +9,7 @@ export class WithLabel extends React.Component {
|
|
|
9
9
|
return null;
|
|
10
10
|
}
|
|
11
11
|
if (label) {
|
|
12
|
-
return (React.createElement(Box, { direction: labelInline ? "row" : "column", justifyContent: this.props.labelJustifyContent, width: "100%" },
|
|
12
|
+
return (React.createElement(Box, { direction: labelInline ? "row" : "column", justifyContent: this.props.labelJustifyContent, width: "100%", zIndex: "auto" },
|
|
13
13
|
this.props.labelPlacement !== "after" && (React.createElement(Box, { paddingY: 1 },
|
|
14
14
|
React.createElement(Text, { color: labelColor || "darkGray", size: this.props.labelSize, weight: "bold" }, this.props.show !== false ? label : " "))),
|
|
15
15
|
children,
|
package/dist/WithLabel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WithLabel.js","sourceRoot":"","sources":["../src/WithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,SAA6B;IAChE,MAAM;QACJ,MAAM,EAAC,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9D,iFAAiF;QAEjF,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,EAAE;YACT,OAAO,CACL,oBAAC,GAAG,IACF,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACzC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAC9C,KAAK,EAAC,MAAM;
|
|
1
|
+
{"version":3,"file":"WithLabel.js","sourceRoot":"","sources":["../src/WithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,SAA6B;IAChE,MAAM;QACJ,MAAM,EAAC,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9D,iFAAiF;QAEjF,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,IAAI,CAAC;SACb;QAED,IAAI,KAAK,EAAE;YACT,OAAO,CACL,oBAAC,GAAG,IACF,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACzC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAC9C,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM;gBAEZ,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI,CACxC,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;oBACd,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,IAAI,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,EAAC,MAAM,IAC7E,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CACnC,CACH,CACP;gBACA,QAAQ;gBACR,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI,CACxC,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;oBACd,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,IAAI,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,IAC9D,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CACnC,CACH,CACP,CACG,CACP,CAAC;SACH;aAAM;YACL,OAAO,QAAQ,CAAC;SACjB;IACH,CAAC;CACF"}
|
package/package.json
CHANGED
package/src/CustomSelect.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {ReactElement, useEffect, useState} from "react";
|
|
1
|
+
import React, {ReactElement, useEffect, useMemo, useState} from "react";
|
|
2
2
|
|
|
3
3
|
import {Box} from "./Box";
|
|
4
4
|
import {SelectList} from "./SelectList";
|
|
@@ -21,21 +21,29 @@ export const CustomSelect = ({
|
|
|
21
21
|
disabled,
|
|
22
22
|
options,
|
|
23
23
|
}: CustomSelectProps): ReactElement | null => {
|
|
24
|
-
const [customValue, setCustomValue] = useState(
|
|
24
|
+
const [customValue, setCustomValue] = useState(value);
|
|
25
25
|
const [showCustomInput, setShowCustomInput] = useState(false);
|
|
26
26
|
|
|
27
|
+
// Boolean that checks if customValue is a value from the
|
|
28
|
+
// options prop or if it is a true custom value
|
|
29
|
+
const isValueCustom: boolean = useMemo((): boolean => {
|
|
30
|
+
// We add an empty value to protect against an empty string custom value or if the placeholder value is selected
|
|
31
|
+
return ![...options, {value: ""}].map((i) => i.value).includes(customValue);
|
|
32
|
+
}, [options, customValue]);
|
|
33
|
+
|
|
27
34
|
useEffect(() => {
|
|
35
|
+
setShowCustomInput(isValueCustom);
|
|
28
36
|
if (!showCustomInput) {
|
|
29
37
|
setCustomValue(value);
|
|
30
38
|
}
|
|
31
|
-
}, [showCustomInput, value]);
|
|
39
|
+
}, [showCustomInput, value, isValueCustom]);
|
|
32
40
|
|
|
33
41
|
// Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
|
|
34
42
|
const handleCustomSelectListChange = (newValue: string) => {
|
|
35
43
|
// If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
|
|
36
44
|
if (newValue === "custom") {
|
|
37
45
|
setShowCustomInput(true);
|
|
38
|
-
setCustomValue("custom");
|
|
46
|
+
setCustomValue(isValueCustom ? "custom" : newValue);
|
|
39
47
|
onChange("");
|
|
40
48
|
}
|
|
41
49
|
|
|
@@ -57,7 +65,7 @@ export const CustomSelect = ({
|
|
|
57
65
|
id="providedOptions"
|
|
58
66
|
options={[...options, {label: "Custom", value: "custom"}]}
|
|
59
67
|
placeholder={placeholder}
|
|
60
|
-
value={customValue}
|
|
68
|
+
value={isValueCustom ? "custom" : customValue}
|
|
61
69
|
onChange={handleCustomSelectListChange}
|
|
62
70
|
/>
|
|
63
71
|
{Boolean(showCustomInput) && (
|
package/src/WithLabel.tsx
CHANGED
|
@@ -19,6 +19,7 @@ export class WithLabel extends React.Component<WithLabelProps, {}> {
|
|
|
19
19
|
direction={labelInline ? "row" : "column"}
|
|
20
20
|
justifyContent={this.props.labelJustifyContent}
|
|
21
21
|
width="100%"
|
|
22
|
+
zIndex="auto"
|
|
22
23
|
>
|
|
23
24
|
{this.props.labelPlacement !== "after" && (
|
|
24
25
|
<Box paddingY={1}>
|