@wq/form-web 3.0.0-alpha.0

package/src/components/Select.js

@@ -0,0 +1,158 @@
+import React, { useMemo } from "react";
+import { withWQ } from "@wq/react";
+import { Field, getIn } from "formik";
+import { Select as FMuiSelect } from "formik-mui";
+import { MenuItem, Checkbox, ListItemText, ListSubheader } from "@mui/material";
+import PropTypes from "prop-types";
+import { useFormikContext } from "formik";
+
+function ContextCheckbox({ value, field }) {
+    const { values } = useFormikContext();
+    const checked = (getIn(values, field) || []).some((val) => val === value);
+    return <Checkbox checked={checked} />;
+}
+
+ContextCheckbox.propTypes = {
+    value: PropTypes.string,
+    field: PropTypes.string,
+};
+
+function Select({
+    choices,
+    label,
+    required,
+    native,
+    placeholder,
+    renderValue,
+    InputLabelProps,
+    ...rest
+}) {
+    const { name: fieldName, type, hint } = rest,
+        { errors, touched } = useFormikContext(),
+        showError = !!getIn(errors, fieldName) && getIn(touched, fieldName),
+        multiple = type === "select";
+
+    if (multiple && !renderValue) {
+        renderValue = (sel) => sel.map(getLabel).join(", ");
+    }
+    if (placeholder && !renderValue) {
+        renderValue = (sel) => getLabel(sel) || sel || placeholder;
+    }
+
+    const getLabel = useMemo(() => {
+        const labels = {};
+        choices.forEach(({ name, label }) => {
+            labels[name] = label;
+        });
+        return (name) => labels[name];
+    }, [choices]);
+
+    const choiceGroups = useMemo(() => {
+        const choiceGroups = {};
+        choices.forEach((choice) => {
+            const group = choice.group || "";
+            if (!choiceGroups[group]) {
+                choiceGroups[group] = [];
+            }
+            choiceGroups[group].push(choice);
+        });
+        return choiceGroups;
+    }, [choices]);
+
+    const Option = useMemo(
+        () =>
+            native
+                ? ({ value, children }) => (
+                      <option value={value}>{children}</option>
+                  )
+                : ({ children, ...rest }) => (
+                      <MenuItem {...rest}>
+                          {multiple && (
+                              <ContextCheckbox
+                                  value={rest["data-value"]}
+                                  field={fieldName}
+                              />
+                          )}
+                          <ListItemText
+                              primary={children}
+                              data-value={rest["data-value"]}
+                              primaryTypographyProps={{
+                                  "data-value": rest["data-value"],
+                              }}
+                          />
+                      </MenuItem>
+                  ),
+        [native, multiple, fieldName],
+    );
+
+    const renderChoices = (choices) =>
+        choices.map(({ name, label }) => (
+            <Option key={name} value={name}>
+                {label}
+            </Option>
+        ));
+
+    const renderGroups = native
+        ? (choiceGroups) =>
+              Object.entries(choiceGroups).map(([group, choices]) =>
+                  group ? (
+                      <optgroup key={group} label={group}>
+                          {renderChoices(choices)}
+                      </optgroup>
+                  ) : (
+                      <>{renderChoices(choices)}</>
+                  ),
+              )
+        : (choiceGroups) => {
+              const flattened = [];
+              Object.entries(choiceGroups).forEach(([group, choices]) => {
+                  if (group) {
+                      flattened.push(
+                          <ListSubheader style={{ backgroundColor: "white" }}>
+                              {group}
+                          </ListSubheader>,
+                      );
+                  }
+                  flattened.push(...renderChoices(choices));
+              });
+              return flattened;
+          };
+
+    return (
+        <Field
+            component={FMuiSelect}
+            formControl={{ fullWidth: true, margin: "dense" }}
+            inputLabel={{ required, error: showError, ...InputLabelProps }}
+            formHelperText={{ children: hint }}
+            multiple={multiple}
+            required={required}
+            native={native}
+            label={label}
+            renderValue={renderValue}
+            displayEmpty={!!placeholder}
+            {...(InputLabelProps && InputLabelProps.shrink
+                ? { notched: true }
+                : {})}
+            {...rest}
+        >
+            {!multiple && (
+                <Option value={""} disabled={!!required}>
+                    {required ? "Select one..." : "(No Selection)"}
+                </Option>
+            )}
+            {renderGroups(choiceGroups)}
+        </Field>
+    );
+}
+
+Select.propTypes = {
+    choices: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    required: PropTypes.bool,
+    native: PropTypes.bool,
+    renderValue: PropTypes.func,
+    InputLabelProps: PropTypes.object,
+};
+
+export default withWQ(Select);

package/src/components/SubmitButton.js

@@ -0,0 +1,38 @@
+import React from "react";
+import {
+    useMessage,
+    useComponents,
+    withWQ,
+    createFallbackComponent,
+} from "@wq/react";
+import { useFormikContext } from "formik";
+
+const SubmitButtonFallback = {
+    messages: {
+        SUBMIT: "Submit",
+    },
+    components: {
+        Button: createFallbackComponent("Button", "@wq/material"),
+    },
+};
+
+function SubmitButton(props) {
+    const { Button } = useComponents(),
+        defaultLabel = useMessage("SUBMIT"),
+        label = props.children || defaultLabel,
+        { isSubmitting } = useFormikContext();
+
+    return (
+        <Button
+            type="submit"
+            color="primary"
+            variant="contained"
+            disabled={isSubmitting}
+            {...props}
+        >
+            {label}
+        </Button>
+    );
+}
+
+export default withWQ(SubmitButton, { fallback: SubmitButtonFallback });

package/src/components/Toggle.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { ToggleButton, FormControl, FormLabel } from "@mui/material";
+import { ToggleButtonGroup } from "formik-mui";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+function Toggle({ choices, label, ...rest }) {
+    return (
+        <FormControl component="fieldset" fullWidth margin="dense">
+            <FormLabel component="legend">{label}</FormLabel>
+            <Field
+                component={ToggleButtonGroup}
+                exclusive
+                {...rest}
+                type="checkbox"
+            >
+                {choices.map(({ name, label }) => (
+                    <ToggleButton key={name} value={name}>
+                        {label}
+                    </ToggleButton>
+                ))}
+            </Field>
+            <HelperText name={rest.name} hint={rest.hint} />
+        </FormControl>
+    );
+}
+
+Toggle.propTypes = {
+    choices: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+};
+
+export default withWQ(Toggle);

package/src/components/index.js

@@ -0,0 +1,52 @@
+import FormRoot from "./FormRoot.js";
+import FormError from "./FormError.js";
+import Input from "./Input.js";
+import Checkbox from "./Checkbox.js";
+import DateTime from "./DateTime.js";
+import File from "./File.js";
+import Image from "./Image.js";
+import Select from "./Select.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+import Hidden from "./Hidden.js";
+import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
+import SubmitButton from "./SubmitButton.js";
+import IconSubmitButton from "./IconSubmitButton.js";
+import DeleteForm from "./DeleteForm.js";
+import Draw from "./Draw.js";
+import GeoHelpIcon from "./GeoHelpIcon.js";
+
+const Date = DateTime;
+const Time = DateTime;
+const dateTime = DateTime;
+
+export {
+    FormRoot,
+    FormError,
+    Input,
+    Checkbox,
+    DateTime,
+    Date,
+    Time,
+    dateTime,
+    File,
+    Image,
+    Select,
+    Radio,
+    Toggle,
+    Hidden,
+    HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
+    SubmitButton,
+    IconSubmitButton,
+    DeleteForm,
+    Draw,
+    GeoHelpIcon,
+};

package/src/index.js

@@ -0,0 +1,3 @@
+import AutoForm from "./AutoForm.js";
+export { AutoForm };
+export * from "./components/index.js";