@pnkx-lib/ui 1.9.66 → 1.9.68

package/es/chunks/Switch-B6W4c5eS.js

@@ -0,0 +1,259 @@
+import { g as get, j as jsxRuntimeExports, L as Label, t as twMerge, E as ErrorMessage, T as Typography, c as Icon, _ as _extends, d as classNames } from './AntdIcon-C_gQ5ue_.js';
+import { Select as Select$1, Radio, Upload, Image, Switch as Switch$1 } from 'antd';
+import * as React from 'react';
+import { useState } from 'react';
+
+const Select = (props) => {
+  //! State
+  const {
+    field,
+    formState,
+    label,
+    required,
+    afterOnChange,
+    classNameContainer,
+    classNameSelect,
+    ...restProps
+  } = props;
+  const { name, value, onChange, onBlur } = field || {};
+  const { touchedFields, errors, isSubmitted } = formState || {};
+  const isTouched = get(touchedFields, name);
+  const errorMessage = get(errors, name)?.message;
+  //! Function
+  const handleChange = (val) => {
+    onChange?.(val);
+    afterOnChange?.(val);
+  };
+  const renderErrorMessage = () => {
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorMessage,
+      {
+        errorMessage,
+        isTouched,
+        isSubmitted
+      }
+    );
+  };
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classNameContainer, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { label, required }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Select$1,
+      {
+        onChange: handleChange,
+        onBlur,
+        value,
+        optionLabelProp: "label",
+        status: (isTouched || isSubmitted) && Boolean(errorMessage) ? "error" : void 0,
+        className: twMerge("w-full", classNameSelect),
+        ...restProps
+      }
+    ),
+    renderErrorMessage()
+  ] });
+};
+
+const RadioGroup = (props) => {
+  //! State
+  const {
+    field,
+    formState,
+    customStyleRadio,
+    customStyleWrap = "",
+    afterOnChange,
+    options,
+    ...restProps
+  } = props;
+  const { name, value, onChange } = field || {};
+  const { touchedFields, errors, isSubmitted } = formState || {};
+  const isTouched = get(touchedFields, name);
+  const errorMessage = get(errors, name)?.message;
+  //! Function
+  const handleChange = (e) => {
+    onChange?.(e);
+    afterOnChange?.(e?.target?.value);
+  };
+  const renderErrorMessage = () => {
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorMessage,
+      {
+        errorMessage,
+        isTouched,
+        isSubmitted
+      }
+    );
+  };
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: customStyleWrap, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Group, { onChange: handleChange, value, ...restProps, children: options.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Radio,
+      {
+        value: item.value,
+        className: customStyleRadio,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography.Text, { children: [
+          " ",
+          item.label
+        ] })
+      },
+      `${name}-${item.value}`
+    )) }),
+    renderErrorMessage()
+  ] });
+};
+
+// This icon file is generated automatically.
+var PlusOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" } }, { "tag": "path", "attrs": { "d": "M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z" } }] }, "name": "plus", "theme": "outlined" };
+
+var PlusOutlined = function PlusOutlined(props, ref) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+    ref: ref,
+    icon: PlusOutlined$1
+  }));
+};
+
+/**![plus](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ4MiAxNTJoNjBxOCAwIDggOHY3MDRxMCA4LTggOGgtNjBxLTggMC04LThWMTYwcTAtOCA4LTh6IiAvPjxwYXRoIGQ9Ik0xOTIgNDc0aDY3MnE4IDAgOCA4djYwcTAgOC04IDhIMTYwcS04IDAtOC04di02MHEwLTggOC04eiIgLz48L3N2Zz4=) */
+var RefIcon = /*#__PURE__*/React.forwardRef(PlusOutlined);
+if (process.env.NODE_ENV !== 'production') {
+  RefIcon.displayName = 'PlusOutlined';
+}
+
+const getBase64 = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = (error) => reject(error);
+});
+const UploadField = (props) => {
+  //! State
+  const {
+    field,
+    formState,
+    label,
+    required,
+    maxFiles = 8,
+    uploadButtonText = "Upload",
+    // typeLabel = "text12Regular",
+    customStyleContainer,
+    customStyleUpload,
+    afterOnChange,
+    disabled,
+    ...restProps
+  } = props;
+  const { name, value = [], onChange } = field || {};
+  const { touchedFields, errors, isSubmitted } = formState || {};
+  const isTouched = get(touchedFields, name);
+  const errorMessage = get(errors, name)?.message;
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState("");
+  //! Function
+  const handlePreview = async (file) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+    setPreviewImage(file.url || file.preview);
+    setPreviewOpen(true);
+  };
+  const handleChange = ({ fileList }) => {
+    onChange?.(fileList);
+    afterOnChange?.(fileList);
+  };
+  const uploadButton = /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { style: { border: 0, background: "none" }, type: "button", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 8 }, children: uploadButtonText })
+  ] });
+  const renderErrorMessage = () => {
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorMessage,
+      {
+        errorMessage,
+        isTouched,
+        isSubmitted
+      }
+    );
+  };
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: customStyleContainer, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { label, required }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Upload,
+      {
+        listType: "picture-card",
+        fileList: value,
+        onPreview: handlePreview,
+        onChange: handleChange,
+        disabled,
+        className: customStyleUpload,
+        ...restProps,
+        children: value.length >= maxFiles ? null : uploadButton
+      }
+    ),
+    renderErrorMessage(),
+    previewImage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Image,
+      {
+        wrapperStyle: { display: "none" },
+        preview: {
+          visible: previewOpen,
+          onVisibleChange: (visible) => setPreviewOpen(visible),
+          afterOpenChange: (visible) => !visible && setPreviewImage("")
+        },
+        src: previewImage
+      }
+    )
+  ] });
+};
+
+const Switch = (props) => {
+  //! State
+  const {
+    field,
+    formState,
+    label,
+    required,
+    afterOnChange,
+    customStyleContainer,
+    customStyleSwitch,
+    disabled,
+    ...restProps
+  } = props;
+  const { name, value, onChange } = field || {};
+  const { touchedFields, errors, isSubmitted } = formState || {};
+  const isTouched = get(touchedFields, name);
+  const errorMessage = get(errors, name)?.message;
+  //! Function
+  const handleChange = (checked) => {
+    onChange?.(checked);
+    afterOnChange?.(checked);
+  };
+  const renderErrorMessage = () => {
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorMessage,
+      {
+        errorMessage,
+        isTouched,
+        isSubmitted
+      }
+    );
+  };
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: customStyleContainer, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { label, required }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Switch$1,
+      {
+        checked: !!value,
+        onChange: handleChange,
+        className: classNames("focus:outline-none", customStyleSwitch),
+        disabled,
+        ...restProps
+      }
+    ),
+    renderErrorMessage()
+  ] });
+};
+
+export { RadioGroup as R, Select as S, UploadField as U, Switch as a };