@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/form-organization-file.mjs

@@ -0,0 +1,303 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { useForm, Controller } from "../shared/lib/form";
+import yup, { resolver } from "../shared/lib/yup";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputText from "../input-text";
+import Loader from "../icons/loader";
+import Plus from "../icons/plus";
+import Times from "../icons/times";
+import { isStartingFrame } from "./lib/frames";
+import Button from "../shared/button";
+const FormOrganizationFile = ({
+  disabled,
+  onError,
+  onSuccess,
+  onFrameCreate,
+  onFrameDelete,
+  values
+}) => {
+  const schema = {
+    filename: yup.string().label("File Name").nullable().max(150)
+  };
+  if ((values == null ? void 0 : values.type) === "video") {
+    schema.poster = yup.string().label("Poster").required().max(150);
+  }
+  ;
+  const { control, handleSubmit, formState } = useForm({
+    resolver: resolver(
+      yup.object(schema)
+    ),
+    values
+  });
+  const onSubmit = async ({
+    filename,
+    poster
+  }) => {
+    try {
+      const args = {
+        body: {
+          filename,
+          poster
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/file/" + (values == null ? void 0 : values.id),
+        method: "PUT"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "filename",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.filename) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsx(
+                            InputText,
+                            {
+                              ...{
+                                onChange: (val) => {
+                                  onChange(val);
+                                },
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "File Name"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        (values == null ? void 0 : values.type) === "video" && /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "poster",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.poster) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              ...{
+                                className: "w-full flex items-center space-x-4 py-3"
+                              },
+                              children: [
+                                (_c = (values == null ? void 0 : values.frames) || []) == null ? void 0 : _c.map((frame, index) => {
+                                  var _a2;
+                                  return /* @__PURE__ */ jsxs(
+                                    "span",
+                                    {
+                                      ...{
+                                        className: "relative"
+                                      },
+                                      children: [
+                                        onFrameDelete && value !== index && !isStartingFrame(frame == null ? void 0 : frame.timestamp) && /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            ...{
+                                              // The corner offset sits on a wrapper: a Button takes no class.
+                                              className: "z-10 absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 flex"
+                                            },
+                                            children: /* @__PURE__ */ jsx(
+                                              Button,
+                                              {
+                                                ...{
+                                                  "aria-label": "Delete frame",
+                                                  inline: true,
+                                                  onClick: () => onFrameDelete({
+                                                    index,
+                                                    frame
+                                                  }),
+                                                  variant: "link"
+                                                },
+                                                children: /* @__PURE__ */ jsx(
+                                                  "span",
+                                                  {
+                                                    ...{
+                                                      className: "flex items-center justify-center w-4 h-4 rounded-full bg-white border"
+                                                    },
+                                                    children: /* @__PURE__ */ jsx(
+                                                      Times,
+                                                      {
+                                                        ...{
+                                                          className: "w-3 h-3"
+                                                        }
+                                                      }
+                                                    )
+                                                  }
+                                                )
+                                              }
+                                            )
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsxs(
+                                          "span",
+                                          {
+                                            ...{
+                                              className: "relative flex flex-col space-y-1"
+                                            },
+                                            children: [
+                                              /* @__PURE__ */ jsx(
+                                                Button,
+                                                {
+                                                  ...{
+                                                    disabled: value === index,
+                                                    inline: true,
+                                                    onClick: () => onChange(Number(index)),
+                                                    variant: "link"
+                                                  },
+                                                  children: /* @__PURE__ */ jsx(
+                                                    "span",
+                                                    {
+                                                      ...{
+                                                        className: "aspect-square w-16 rounded-md bg-white bg-contain bg-no-repeat bg-center border" + (value === index ? " before:absolute before:inset-0 before:bg-green/50 before:aspect-square before:w-16 before:rounded" : ""),
+                                                        style: {
+                                                          backgroundImage: "url(" + ((_a2 = frame == null ? void 0 : frame.sizes) == null ? void 0 : _a2["100x100"]) + ")"
+                                                        }
+                                                      }
+                                                    }
+                                                  )
+                                                }
+                                              ),
+                                              /* @__PURE__ */ jsx(
+                                                "span",
+                                                {
+                                                  ...{
+                                                    className: "flex items-center justify-center text-xs text-center h-4"
+                                                  },
+                                                  children: /* @__PURE__ */ jsx("p", { children: frame.timestamp })
+                                                }
+                                              )
+                                            ]
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    index
+                                  );
+                                }),
+                                Boolean(((_d = values == null ? void 0 : values.process) == null ? void 0 : _d.poster) || ((_e = values == null ? void 0 : values.process) == null ? void 0 : _e.encode)) && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    ...{
+                                      className: "flex items-center justify-center aspect-square w-16 rounded-md bg-white border-gray relative mb-4"
+                                    },
+                                    children: /* @__PURE__ */ jsx(
+                                      Loader,
+                                      {
+                                        ...{
+                                          className: "w-6 h-6"
+                                        }
+                                      }
+                                    )
+                                  }
+                                ),
+                                !Boolean((_f = values == null ? void 0 : values.process) == null ? void 0 : _f.poster) && (((_g = values == null ? void 0 : values.frames) == null ? void 0 : _g.length) || 0) < 5 && /* @__PURE__ */ jsx(
+                                  Button,
+                                  {
+                                    ...{
+                                      "aria-label": "Add frame",
+                                      inline: true,
+                                      onClick: () => onFrameCreate(),
+                                      variant: "link"
+                                    },
+                                    children: /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        ...{
+                                          className: "flex items-center justify-center aspect-square w-16 rounded-md bg-white border-gray relative mb-4"
+                                        },
+                                        children: /* @__PURE__ */ jsx(
+                                          Plus,
+                                          {
+                                            ...{
+                                              className: "w-6 h-6"
+                                            }
+                                          }
+                                        )
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          label: "Poster image"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: "Save"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_file_default = FormOrganizationFile;
+export {
+  form_organization_file_default as default
+};