npm - ferns-ui - Versions diffs - 0.4.3 → 0.4.4 - Mend

ferns-ui 0.4.3 → 0.4.4

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 (12) hide show

package/dist/Common.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { SyntheticEvent } from "react";
-import { SelectListOptions } from "./SelectList";
 export interface BaseProfile {
     email: string;
     id: string;
@@ -368,20 +367,6 @@ export interface FieldWithLabelsProps {
     helperTextColor?: AllColors;
     children?: React.ReactNode;
 }
-export interface FieldProps extends FieldWithLabelsProps {
-    name: string;
-    label?: string;
-    subLabel?: string;
-    initialValue?: any;
-    handleChange: any;
-    validate?: (value: any) => boolean;
-    validateErrorMessage?: string;
-    type?: "boolean" | "email" | "text" | "textarea" | "number" | "currency" | "percent" | "select" | "password" | "url" | "date";
-    rows?: number;
-    options?: SelectListOptions;
-    placeholder?: string;
-    disabled?: boolean;
-}
 export interface TextFieldProps extends FieldWithLabelsProps {
     id?: string;
     onChange: OnChangeCallback;

package/dist/Common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAmVA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAkBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;~~AAk7BD~~,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}
1	+ {"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAmVA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAkBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AAu5BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}

package/dist/Field.d.ts CHANGED Viewed

@@ -1,5 +1,20 @@
 /// <reference types="react" />
-import { FieldProps } from "./Common";
+import { FieldWithLabelsProps } from "./Common";
+import { SelectListOptions } from "./SelectList";
+export interface FieldProps extends FieldWithLabelsProps {
+    name: string;
+    label?: string;
+    subLabel?: string;
+    initialValue?: any;
+    handleChange: any;
+    validate?: (value: any) => boolean;
+    validateErrorMessage?: string;
+    type?: "boolean" | "email" | "text" | "textarea" | "number" | "currency" | "percent" | "select" | "password" | "url" | "date" | "multiselect";
+    rows?: number;
+    options?: SelectListOptions;
+    placeholder?: string;
+    disabled?: boolean;
+}
 /**
  * Field is a fully uncontrolled component for creating various inputs. Fully uncontrolled means Field manages its own
  * state for the TextFields/Switches/etc, not the parent component. When values are updated, Field will pass the data to

package/dist/Field.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { Box } from "./Box";
 import { FieldWithLabels } from "./FieldWithLabels";
 import { SelectList } from "./SelectList";
 import { Switch } from "./Switch";
+import { Text } from "./Text";
 import { TextArea } from "./TextArea";
 import { TextField } from "./TextField";
 /**
@@ -19,7 +20,9 @@ import { TextField } from "./TextField";
  *
  */
 export function Field(props) {
+    var _a;
     const [value, setValue] = useState(props.initialValue || "");
+    const [multiselectValue, setMultiselectValue] = useState((_a = props.initialValue) !== null && _a !== void 0 ? _a : []);
     const handleChange = (newValue) => {
         if (props.type === "currency") {
             newValue = newValue.replace("$", "");
@@ -39,7 +42,6 @@ export function Field(props) {
         }
     };
     const validate = () => {
-        // console.log("VALIDATE", props.validate && props.validate(value));
         if (props.validate && !props.validate(value)) {
             return false;
         }
@@ -79,6 +81,33 @@ export function Field(props) {
             }
             return (React.createElement(SelectList, { disabled: props.disabled, id: props.name, options: props.options, value: value, onChange: handleChange }));
         }
+        else if (props.type === "multiselect") {
+            if (!props.options) {
+                console.error("Field with type=multiselect require options");
+                return null;
+            }
+            return (React.createElement(Box, { width: "100%" }, props.options.map((o) => (React.createElement(Box, { key: o.label + o.value, direction: "row", justifyContent: "between", width: "100%" },
+                React.createElement(Box, { flex: "shrink", marginRight: 2 },
+                    React.createElement(Text, { weight: "bold" }, o.label)),
+                React.createElement(Box, null,
+                    React.createElement(Switch, { key: o.label + o.value, disabled: props.disabled, id: props.name, name: props.name, switched: (multiselectValue !== null && multiselectValue !== void 0 ? multiselectValue : []).includes(o.value), onChange: (result) => {
+                            let newValue;
+                            if (result) {
+                                if (multiselectValue.includes(o.value)) {
+                                    console.warn(`Tried to add value that already exists: ${o.value}`);
+                                    return;
+                                }
+                                newValue = [...multiselectValue, o.value];
+                            }
+                            else {
+                                newValue = multiselectValue.filter((v) => v !== o.value);
+                            }
+                            setMultiselectValue(newValue);
+                            if (props.handleChange) {
+                                props.handleChange(props.name, newValue);
+                            }
+                        } })))))));
+        }
         else if (props.type === "textarea") {
             return (React.createElement(TextArea, { disabled: props.disabled, id: props.name, placeholder: props.placeholder, rows: props.rows, value: String(value), onChange: (result) => handleChange(result.value) }));
         }

package/dist/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,UAAU,~~EAAC~~,MAAM,cAAc,CAAC;~~AACxC~~,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;~~AAMtC~~;;;;;;;;;GASG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;~~IAE7D~~,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;YAC7B,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACtC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;YACnC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACtC;QACD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;SAC1C;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,WAAoB,EAAE,EAAE;QAClD,QAAQ,CAAC,WAAW,CAAC,CAAC;QACtB,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;SAC7C;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,~~oEAAoE;QACpE,~~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"}
1	+ {"version":3,"file":"Field.js","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,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;AA8BtC;;;;;;;;;GASG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,OAAC,KAAK,CAAC,YAAY,mCAAI,EAAE,CAAC,CAAC;IAEnF,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;YAC7B,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACtC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;YACnC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACtC;QACD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;SAC1C;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,WAAoB,EAAE,EAAE;QAClD,QAAQ,CAAC,WAAW,CAAC,CAAC;QACtB,IAAI,KAAK,CAAC,YAAY,EAAE;YACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;SAC7C;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC5C,OAAO,KAAK,CAAC;SACd;QACD,QAAQ,KAAK,CAAC,IAAI,EAAE;YAClB,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAC;YACd,KAAK,UAAU;gBACb,OAAO,IAAI,CAAC;YACd,KAAK,MAAM;gBACT,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;YACjC,KAAK,OAAO;gBACV,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACtE,KAAK,QAAQ;gBACX,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;YACnC,KAAK,UAAU;gBACb,OAAO,IAAI,CAAC;YACd,KAAK,SAAS;gBACZ,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;YACpD,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC;YACd,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,EAAE,kBAAkB;gBAChC,OAAO,IAAI,CAAC;YACd,KAAK,UAAU;gBACb,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd;gBACE,OAAO,IAAI,CAAC;SACf;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBAClB,OAAO,CAAC,KAAK,CAAC,wCAAwC,CAAC,CAAC;gBACxD,OAAO,IAAI,CAAC;aACb;YACD,OAAO,CACL,oBAAC,UAAU,IACT,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,GACtB,CACH,CAAC;SACH;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;YACvC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBAClB,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;gBAC7D,OAAO,IAAI,CAAC;aACb;YACD,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM,IACd,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACxB,oBAAC,GAAG,IAAC,GAAG,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM;gBAChF,oBAAC,GAAG,IAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAE,CAAC;oBAC/B,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM,IAAE,CAAC,CAAC,KAAK,CAAQ,CAChC;gBACN,oBAAC,GAAG;oBACF,oBAAC,MAAM,IACL,GAAG,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACpD,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;4BACnB,IAAI,QAAQ,CAAC;4BACb,IAAI,MAAM,EAAE;gCACV,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;oCACtC,OAAO,CAAC,IAAI,CAAC,2CAA2C,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;oCACnE,OAAO;iCACR;gCACD,QAAQ,GAAG,CAAC,GAAG,gBAAgB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;6BAC3C;iCAAM;gCACL,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;6BAClE;4BACD,mBAAmB,CAAC,QAAQ,CAAC,CAAC;4BAC9B,IAAI,KAAK,CAAC,YAAY,EAAE;gCACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;6BAC1C;wBACH,CAAC,GACD,CACE,CACF,CACP,CAAC,CACE,CACP,CAAC;SACH;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;YACpC,OAAO,CACL,oBAAC,QAAQ,IACP,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAChD,CACH,CAAC;SACH;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;YACnC,OAAO,CACL,oBAAC,MAAM,IACL,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,GAChD,CACH,CAAC;SACH;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;YAChC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC1E,OAAO,CACL,oBAAC,SAAS,IACR,QAAQ,QACR,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAC,MAAM;gBACX,yCAAyC;gBACzC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAChD,CACH,CAAC;SACH;aAAM;YACL,IAAI,IAAI,GAAkB,MAAM,CAAC;YACjC,yFAAyF;YACzF,eAAe;YACf,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC/E,IAAI,GAAG,KAAK,CAAC,IAAqB,CAAC;aACpC;iBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;gBAChE,IAAI,GAAG,MAAM,CAAC;aACf;YACD,IAAI,YAAY,GAA2C,IAAI,CAAC;YAChE,IAAI,IAAI,KAAK,UAAU,EAAE;gBACvB,YAAY,GAAG,kBAAkB,CAAC;aACnC;iBAAM,IAAI,IAAI,KAAK,OAAO,EAAE;gBAC3B,YAAY,GAAG,UAAU,CAAC;aAC3B;YACD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAClC,kCAAkC;YAClC,4CAA4C;YAC5C,0CAA0C;YAC1C,4CAA4C;YAC5C,IAAI;YACJ,6BAA6B;YAC7B,OAAO,CACL,oBAAC,SAAS,IACR,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAiE,EACvE,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAChD,CACH,CAAC;SACH;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAC,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAChG,OAAO,CACL,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC;QAClB,oBAAC,eAAe,oBACV;YACF,YAAY;YACZ,iBAAiB;YACjB,UAAU;YACV,eAAe;YACf,KAAK;YACL,UAAU;SACX,GAEA,QAAQ,CACO,CACd,CACP,CAAC;AACJ,CAAC"}

package/dist/TapToEdit.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
-import React from "react";
-import { TextFieldProps } from "./Common";
-interface TapToEditState {
-    showEdit: boolean;
+import { ReactElement } from "react";
+import { BoxProps } from "./Common";
+import { FieldProps } from "./Field";
+export interface TapToEditProps extends Omit<FieldProps, "handleChange"> {
+    title: string;
+    onSave?: (value: any) => void | Promise<void>;
+    editable?: boolean;
+    rowBoxProps?: Partial<BoxProps>;
+    transform?: (value: any) => string;
+    fieldComponent?: (setValue: () => void) => ReactElement;
 }
-export declare class TapToEdit extends React.Component<TextFieldProps, TapToEditState> {
-    state: {
-        showEdit: boolean;
-    };
-    render(): JSX.Element;
-}
-export {};
+export declare const TapToEdit: (props: TapToEditProps) => ReactElement;

package/dist/TapToEdit.js CHANGED Viewed

@@ -1,32 +1,82 @@
-import React from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from "react";
 import { Box } from "./Box";
 import { Button } from "./Button";
+import { Field } from "./Field";
 import { Icon } from "./Icon";
 import { Text } from "./Text";
-import { TextField } from "./TextField";
-export class TapToEdit extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { showEdit: false };
+export const TapToEdit = (props) => {
+    const [editing, setEditing] = useState(false);
+    const [value, setValue] = useState(props.initialValue);
+    const { title, editable = true, rowBoxProps, transform, fieldComponent } = props, fieldProps = __rest(props, ["title", "editable", "rowBoxProps", "transform", "fieldComponent"]);
+    if (editing) {
+        return (React.createElement(Box, { direction: "column", maxWidth: "100%", paddingX: 3, paddingY: 2, width: "100%" },
+            fieldComponent ? (fieldComponent(setValue)) : (React.createElement(Field, Object.assign({ handleChange: (_, val) => setValue(val), label: props.title }, fieldProps))),
+            React.createElement(Box, { direction: "row" },
+                React.createElement(Button, { color: "blue", inline: true, text: "Save", onClick: async () => {
+                        if (!props.onSave) {
+                            console.error("No onSave provided for editable TapToEdit");
+                        }
+                        else {
+                            await props.onSave(value);
+                        }
+                        setEditing(false);
+                    } }),
+                React.createElement(Box, { marginLeft: 2 },
+                    React.createElement(Button, { color: "red", inline: true, text: "Cancel", onClick: () => {
+                            setEditing(false);
+                        } })))));
     }
-    render() {
-        if (!this.state.showEdit) {
-            return (React.createElement(Box, { direction: "row", display: "flex", onClick: () => this.setState({ showEdit: true }) },
-                React.createElement(Box, { marginRight: 2 },
-                    React.createElement(Icon, { color: "primaryDark", name: "edit", prefix: "far", size: "lg" })),
-                React.createElement(Text, null, this.props.children)));
+    else {
+        let displayValue = value;
+        // If transform is present, that takes priority
+        if (transform) {
+            displayValue = transform(value);
         }
         else {
-            return (React.createElement(Box, null,
-                React.createElement(TextField, Object.assign({}, this.props)),
-                React.createElement(Box, { paddingY: 1, width: 100 },
-                    React.createElement(Button, { color: "primary", inline: true, text: "Save", onClick: () => {
-                            this.setState({ showEdit: false });
-                            if (this.props.onSubmitEditing) {
-                                this.props.onSubmitEditing();
-                            }
-                        } }))));
+            // If no transform, try and display the value reasonably.
+            if ((fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "boolean") {
+                displayValue = value ? "Yes" : "No";
+            }
+            else if ((fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "percent") {
+                // Prevent floating point errors from showing up by using parseFloat and precision. Pass through parseFloat again
+                // to trim off insignificant zeroes.
+                displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
+            }
+            else if ((fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "currency") {
+                // TODO: support currencies other than USD in Field and related components.
+                const formatter = new Intl.NumberFormat("en-US", {
+                    style: "currency",
+                    currency: "USD",
+                    minimumFractionDigits: 2,
+                });
+                displayValue = formatter.format(value);
+            }
+            else if ((fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "multiselect") {
+                // ???
+                displayValue = value.join(", ");
+            }
         }
+        return (React.createElement(Box, Object.assign({ direction: "row", justifyContent: "between", maxWidth: "100%", paddingX: 3, paddingY: 2, width: "100%" }, rowBoxProps),
+            React.createElement(Box, null,
+                React.createElement(Text, { weight: "bold" },
+                    title,
+                    ":")),
+            React.createElement(Box, { direction: "row", flex: "shrink", marginLeft: 2 },
+                React.createElement(Box, { flex: "shrink" },
+                    React.createElement(Text, { overflow: "breakWord" }, displayValue)),
+                editable && (React.createElement(Box, { marginLeft: 2, onClick: () => setEditing(true) },
+                    React.createElement(Icon, { color: "darkGray", name: "edit", size: "lg" }))))));
     }
-}
+};
 //# sourceMappingURL=TapToEdit.js.map

package/dist/TapToEdit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAE1B~~,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAC,~~IAAI~~,~~EAAC~~,MAAM,~~QAAQ~~,CAAC;~~AAC5B~~,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,~~SAAS~~,EAAC,MAAM,~~aAAa~~,CAAC;~~AAMtC~~,MAAM,OAAO,~~SAAU~~,~~SAAQ~~,KAAK,CAAC,~~SAAyC~~;~~IAA9E;;QACE~~,~~UAAK~~,~~GAAG~~,~~EAAC~~,QAAQ,~~EAAE~~,KAAK,~~EAAC~~,CAAC~~;IAiC5B~~,CAAC;~~IA/BC~~,MAAM~~;QACJ~~,~~IAAI~~,~~CAAC~~,IAAI,~~CAAC~~,KAAK,CAAC,~~QAAQ~~,EAAE;~~YACxB~~,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,~~KAAK~~,EAAC,~~OAAO~~,EAAC,MAAM,EAAC,~~OAAO~~,EAAE,~~GAAG~~,EAAE,CAAC,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,~~EAAC~~,~~QAAQ~~,~~EAAE~~,~~IAAI~~,~~EAAC~~,CAAC~~;gBAChF~~,oBAAC,GAAG,~~IAAC~~,~~WAAW~~,EAAE,CAAC;~~oBACjB~~,oBAAC,~~IAAI~~,IAAC,~~KAAK~~,EAAC,~~aAAa~~,~~EAAC~~,~~IAAI~~,EAAC,MAAM,~~EAAC~~,MAAM,EAAC,KAAK,~~EAAC~~,IAAI,~~EAAC~~,~~IAAI~~,~~GAAG~~,~~CAC3D~~;~~gBACN~~,~~oBAAC~~,~~IAAI~~,~~QAAE~~,~~IAAI~~,CAAC,KAAK,CAAC,~~QAAQ~~,~~CAAQ~~,~~CAC9B~~,~~CACP~~,CAAC;~~SACH~~;~~aAAM~~;~~YACL~~,~~OAAO~~,~~CACL~~,oBAAC,GAAG;~~gBACF~~,oBAAC,~~SAAS~~,~~oBAAK~~,IAAI,CAAC,KAAK,~~EAAI~~;~~gBAC7B~~,~~oBAAC~~,GAAG,~~IAAC~~,~~QAAQ~~,EAAE,CAAC,EAAE,KAAK,EAAE,~~GAAG~~;~~oBAC1B~~,~~oBAAC~~,MAAM,~~IACL~~,KAAK,~~EAAC~~,~~SAAS~~,~~EACf~~,~~MAAM~~,~~QACN~~,IAAI,~~EAAC~~,~~MAAM~~,~~EACX~~,~~OAAO~~,~~EAAE~~,~~GAAG~~,EAAE;~~4BACZ~~,IAAI,CAAC,~~QAAQ~~,CAAC,~~EAAC~~,QAAQ,EAAE,KAAK,~~EAAC~~,CAAC,CAAC;~~4BACjC~~,~~IAAI~~,~~IAAI~~,CAAC,KAAK,CAAC,~~eAAe~~,EAAE;~~gCAC9B~~,IAAI,CAAC,KAAK,CAAC,~~eAAe~~,EAAE,CAAC;~~6BAC9B~~;~~wBACH~~,CAAC,~~GACD~~,~~CACE~~,CACF,CACP,CAAC;~~SACH~~;~~IACH~~,CAAC~~;CACF~~"}
1	+ {"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Common.ts CHANGED Viewed

@@ -680,33 +680,6 @@ export interface FieldWithLabelsProps {
   children?: React.ReactNode;
 }
-export interface FieldProps extends FieldWithLabelsProps {
-  name: string;
-  label?: string;
-  subLabel?: string;
-  initialValue?: any;
-  handleChange: any;
-  // Additional validation
-  validate?: (value: any) => boolean;
-  validateErrorMessage?: string;
-  type?:
-    | "boolean"
-    | "email"
-    | "text"
-    | "textarea"
-    | "number"
-    | "currency"
-    | "percent"
-    | "select"
-    | "password"
-    | "url"
-    | "date";
-  rows?: number;
-  options?: SelectListOptions;
-  placeholder?: string;
-  disabled?: boolean;
-}
 export interface TextFieldProps extends FieldWithLabelsProps {
   id?: string;
   onChange: OnChangeCallback;

package/src/Field.tsx CHANGED Viewed

@@ -4,15 +4,40 @@ import moment from "moment-timezone";
 import React, {useState} from "react";
 import {Box} from "./Box";
-import {FieldProps, TextFieldType} from "./Common";
+import {FieldWithLabelsProps, TextFieldType} from "./Common";
 import {FieldWithLabels} from "./FieldWithLabels";
-import {SelectList} from "./SelectList";
+import {SelectList, SelectListOptions} from "./SelectList";
 import {Switch} from "./Switch";
+import {Text} from "./Text";
 import {TextArea} from "./TextArea";
 import {TextField} from "./TextField";
-interface State {
-  value: any;
+export interface FieldProps extends FieldWithLabelsProps {
+  name: string;
+  label?: string;
+  subLabel?: string;
+  initialValue?: any;
+  handleChange: any;
+  // Additional validation
+  validate?: (value: any) => boolean;
+  validateErrorMessage?: string;
+  type?:
+    | "boolean"
+    | "email"
+    | "text"
+    | "textarea"
+    | "number"
+    | "currency"
+    | "percent"
+    | "select"
+    | "password"
+    | "url"
+    | "date"
+    | "multiselect";
+  rows?: number;
+  options?: SelectListOptions;
+  placeholder?: string;
+  disabled?: boolean;
 }
 /**
@@ -27,6 +52,7 @@ interface State {
  */
 export function Field(props: FieldProps) {
   const [value, setValue] = useState(props.initialValue || "");
+  const [multiselectValue, setMultiselectValue] = useState(props.initialValue ?? []);
   const handleChange = (newValue: string) => {
     if (props.type === "currency") {
@@ -48,7 +74,6 @@ export function Field(props: FieldProps) {
   };
   const validate = () => {
-    // console.log("VALIDATE", props.validate && props.validate(value));
     if (props.validate && !props.validate(value)) {
       return false;
     }
@@ -96,6 +121,47 @@ export function Field(props: FieldProps) {
           onChange={handleChange}
         />
       );
+    } else if (props.type === "multiselect") {
+      if (!props.options) {
+        console.error("Field with type=multiselect require options");
+        return null;
+      }
+      return (
+        <Box width="100%">
+          {props.options.map((o) => (
+            <Box key={o.label + o.value} direction="row" justifyContent="between" width="100%">
+              <Box flex="shrink" marginRight={2}>
+                <Text weight="bold">{o.label}</Text>
+              </Box>
+              <Box>
+                <Switch
+                  key={o.label + o.value}
+                  disabled={props.disabled}
+                  id={props.name}
+                  name={props.name}
+                  switched={(multiselectValue ?? []).includes(o.value)}
+                  onChange={(result) => {
+                    let newValue;
+                    if (result) {
+                      if (multiselectValue.includes(o.value)) {
+                        console.warn(`Tried to add value that already exists: ${o.value}`);
+                        return;
+                      }
+                      newValue = [...multiselectValue, o.value];
+                    } else {
+                      newValue = multiselectValue.filter((v: string) => v !== o.value);
+                    }
+                    setMultiselectValue(newValue);
+                    if (props.handleChange) {
+                      props.handleChange(props.name, newValue);
+                    }
+                  }}
+                />
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      );
     } else if (props.type === "textarea") {
       return (
         <TextArea

package/src/TapToEdit.tsx CHANGED Viewed

@@ -1,48 +1,118 @@
-import React from "react";
+import React, {ReactElement, useState} from "react";
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {TextFieldProps} from "./Common";
+import {BoxProps} from "./Common";
+import {Field, FieldProps} from "./Field";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
-import {TextField} from "./TextField";
-interface TapToEditState {
-  showEdit: boolean;
+export interface TapToEditProps extends Omit<FieldProps, "handleChange"> {
+  title: string;
+  // Not required if not editable.
+  onSave?: (value: any) => void | Promise<void>;
+  // Defaults to true
+  editable?: boolean;
+  // For changing how the non-editing row renders
+  rowBoxProps?: Partial<BoxProps>;
+  transform?: (value: any) => string;
+  fieldComponent?: (setValue: () => void) => ReactElement;
 }
-export class TapToEdit extends React.Component<TextFieldProps, TapToEditState> {
-  state = {showEdit: false};
+export const TapToEdit = (props: TapToEditProps): ReactElement => {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(props.initialValue);
-  render() {
-    if (!this.state.showEdit) {
-      return (
-        <Box direction="row" display="flex" onClick={() => this.setState({showEdit: true})}>
-          <Box marginRight={2}>
-            <Icon color="primaryDark" name="edit" prefix="far" size="lg" />
-          </Box>
-          <Text>{this.props.children}</Text>
-        </Box>
-      );
-    } else {
-      return (
-        <Box>
-          <TextField {...this.props} />
-          <Box paddingY={1} width={100}>
+  const {title, editable = true, rowBoxProps, transform, fieldComponent, ...fieldProps} = props;
+  if (editing) {
+    return (
+      <Box direction="column" maxWidth="100%" paddingX={3} paddingY={2} width="100%">
+        {fieldComponent ? (
+          fieldComponent(setValue as any)
+        ) : (
+          <Field
+            handleChange={(_: string, val: any): void => setValue(val)}
+            label={props.title}
+            {...fieldProps}
+          />
+        )}
+        <Box direction="row">
+          <Button
+            color="blue"
+            inline
+            text="Save"
+            onClick={async (): Promise<void> => {
+              if (!props.onSave) {
+                console.error("No onSave provided for editable TapToEdit");
+              } else {
+                await props.onSave(value);
+              }
+              setEditing(false);
+            }}
+          />
+          <Box marginLeft={2}>
             <Button
-              color="primary"
+              color="red"
               inline
-              text="Save"
-              onClick={() => {
-                this.setState({showEdit: false});
-                if (this.props.onSubmitEditing) {
-                  this.props.onSubmitEditing();
-                }
+              text="Cancel"
+              onClick={(): void => {
+                setEditing(false);
               }}
             />
           </Box>
         </Box>
-      );
+      </Box>
+    );
+  } else {
+    let displayValue = value;
+    // If transform is present, that takes priority
+    if (transform) {
+      displayValue = transform(value);
+    } else {
+      // If no transform, try and display the value reasonably.
+      if (fieldProps?.type === "boolean") {
+        displayValue = value ? "Yes" : "No";
+      } else if (fieldProps?.type === "percent") {
+        // Prevent floating point errors from showing up by using parseFloat and precision. Pass through parseFloat again
+        // to trim off insignificant zeroes.
+        displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
+      } else if (fieldProps?.type === "currency") {
+        // TODO: support currencies other than USD in Field and related components.
+        const formatter = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+        });
+        displayValue = formatter.format(value);
+      } else if (fieldProps?.type === "multiselect") {
+        // ???
+        displayValue = value.join(", ");
+      }
     }
+    return (
+      <Box
+        direction="row"
+        justifyContent="between"
+        maxWidth="100%"
+        paddingX={3}
+        paddingY={2}
+        width="100%"
+        {...rowBoxProps}
+      >
+        <Box>
+          <Text weight="bold">{title}:</Text>
+        </Box>
+        <Box direction="row" flex="shrink" marginLeft={2}>
+          <Box flex="shrink">
+            <Text overflow="breakWord">{displayValue}</Text>
+          </Box>
+          {editable && (
+            <Box marginLeft={2} onClick={(): void => setEditing(true)}>
+              <Icon color="darkGray" name="edit" size="lg" />
+            </Box>
+          )}
+        </Box>
+      </Box>
+    );
   }
-}
+};