ferns-ui 0.22.1 → 0.22.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.
Files changed (4) hide show
  1. package/dist/CustomSelect.js +12 -5
  2. package/dist/CustomSelect.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/CustomSelect.tsx +13 -5
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;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,EAAE,WAAW,EACxB,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"}
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ferns-ui",
3
- "version": "0.22.1",
3
+ "version": "0.22.2",
4
4
  "main": "dist/index.js",
5
5
  "license": "Apache-2.0",
6
6
  "scripts": {
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) && (