shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/select-range.mjs

@@ -0,0 +1,209 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useEffect, useCallback, cloneElement } from 'react';
+import { Select, SelectTrigger, SelectValue, SelectBody, SelectClose, SelectItem, SelectEmptyState } from '@/common/interactive/select';
+import { ArrowBackRightIcon16 } from '@/assets/Icon';
+import { Button } from '@/components/button';
+import { Skeleton } from '@/components/skeleton';
+import { cn } from '@/lib/utils';
+
+const SelectRange = memo(
+  ({
+    label,
+    children,
+    options = [],
+    fromValue,
+    toValue,
+    onSelectChange,
+    onInputChange,
+    fromLabel,
+    toLabel,
+    valueLabel,
+    hasRemoveIcon,
+    loading,
+    placeholder,
+    disabled,
+    bodyClassName,
+    requiredCustomInput
+  }) => {
+    const [customValues, setCustomValues] = useState([void 0, void 0]);
+    const [tempValues, setTempValues] = useState([void 0, void 0]);
+    const [selectedValue, setSelectedValue] = useState();
+    useEffect(() => {
+      if (JSON.stringify(customValues) !== JSON.stringify([fromValue ?? "", toValue ?? ""]) && options?.length > 0) {
+        const value = `${fromValue ?? ""}${fromValue || toValue ? "-" : ""}${toValue ?? ""}`;
+        if (options?.some((i) => i.value === value)) {
+          setCustomValues([void 0, void 0]);
+          setTempValues([void 0, void 0]);
+          setSelectedValue([options?.find((i) => i.value === value)].filter(Boolean));
+        } else if (!selectedValue?.some((i) => i.value === value)) {
+          setCustomValues([fromValue, toValue]);
+          setTempValues([fromValue, toValue]);
+          setSelectedValue([
+            {
+              value: `${fromValue ?? ""}${fromValue || toValue ? "-" : ""}${toValue ?? ""}`,
+              name: `${fromValue ?? ""}${fromValue && toValue ? " - " : ""}${toValue ?? ""}`
+            }
+          ]);
+        }
+      }
+    }, [fromValue, toValue, options]);
+    const handleChangeCustomValues = useCallback(
+      (index) => (newValue) => {
+        setTempValues((prev) => {
+          const newValues = [...prev];
+          newValues[index] = newValue;
+          return newValues;
+        });
+      },
+      []
+    );
+    const handleApplyCustomValues = useCallback(() => {
+      setCustomValues(tempValues);
+      setSelectedValue([
+        {
+          value: `${tempValues[0] ?? ""}-${tempValues[1] ?? ""}`,
+          name: `${tempValues[0] ?? ""}${tempValues[0] && tempValues[1] ? " - " : ""}${tempValues[1] ?? ""}`
+        }
+      ]);
+      onInputChange?.(tempValues[0] ?? "", tempValues[1] ?? "");
+    }, [tempValues, onInputChange]);
+    const handleSelectValueChange = useCallback(
+      (values) => {
+        setTempValues([void 0, void 0]);
+        setCustomValues([void 0, void 0]);
+        setSelectedValue(values);
+        onSelectChange?.(values);
+      },
+      [onSelectChange]
+    );
+    const handleApplyValues = () => {
+      if (!(requiredCustomInput ? !tempValues[0] || !tempValues[1] : !tempValues[0] && !tempValues[1])) {
+        handleApplyCustomValues();
+      }
+    };
+    const handleClearValue = () => {
+      setTempValues([void 0, void 0]);
+      setCustomValues([void 0, void 0]);
+      setSelectedValue([]);
+      onSelectChange?.([]);
+      onInputChange?.();
+    };
+    const handleResetTempValues = (open) => {
+      if (open) {
+        setTempValues(customValues);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        label,
+        value: selectedValue,
+        onValueChange: handleSelectValueChange,
+        onOpenChange: handleResetTempValues,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { hasRemoveIcon, placeholder, children: customValues?.filter(Boolean)?.length && valueLabel ? /* @__PURE__ */ jsx(SelectValue, { children: () => valueLabel(customValues?.[0], customValues?.[1]) }) : /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxs(SelectBody, { className: cn("flex flex-col !p-0 !pt-3", bodyClassName), children: [
+            children && /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center gap-1 border-b px-3 pb-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: typeof children === "function" ? children({
+                label: fromLabel,
+                value: tempValues[0],
+                maxValue: tempValues[1],
+                isMin: true,
+                isMax: false,
+                onChange: handleChangeCustomValues(0)
+              }) : cloneElement(children, {
+                label: fromLabel,
+                value: tempValues[0],
+                maxValue: tempValues[1],
+                isMin: true,
+                isMax: false,
+                onChange: handleChangeCustomValues(0)
+              }) }),
+              /* @__PURE__ */ jsx(ArrowBackRightIcon16, { className: "h-4 min-h-4 w-4 min-w-4" }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: typeof children === "function" ? children({
+                label: toLabel,
+                value: tempValues[1],
+                minValue: tempValues[0],
+                isMin: false,
+                isMax: true,
+                onChange: handleChangeCustomValues(1)
+              }) : cloneElement(children, {
+                label: toLabel,
+                value: tempValues[1],
+                minValue: tempValues[0],
+                isMin: false,
+                isMax: true,
+                onChange: handleChangeCustomValues(1)
+              }) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              SelectOptions,
+              {
+                options,
+                loading,
+                showChecked: !tempValues[0] && !tempValues[1]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex gap-3 p-3",
+                style: { boxShadow: "0px -8px 24px -4px #172E7E17" },
+                children: [
+                  /* @__PURE__ */ jsx(SelectClose, { asChild: true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "link",
+                      size: "sm",
+                      onClick: handleClearValue,
+                      className: cn(!tempValues[0] && !tempValues[1] && "!bg-white"),
+                      children: "B\u1ECF ch\u1ECDn"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(SelectClose, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      className: "w-full",
+                      size: "sm",
+                      disabled: (!!tempValues[0] || !!tempValues[1]) && requiredCustomInput && (!tempValues[0] || !tempValues[1]),
+                      onClick: handleApplyValues,
+                      children: "\xC1p d\u1EE5ng"
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+SelectRange.displayName = "SelectRange";
+const SelectOptions = memo(({ options, loading, showChecked }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-hidden", children: [
+    loading && /* @__PURE__ */ jsx("div", { className: "space-y-2 px-3 pb-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, index)) }),
+    !loading && /* @__PURE__ */ jsxs("div", { className: cn("divide-border max-h-[360px] flex-1 divide-y overflow-auto"), children: [
+      options?.map((option) => /* @__PURE__ */ jsx(
+        SelectItem,
+        {
+          option,
+          className: cn(
+            "p-3",
+            !showChecked && "data-[activated=true]:text-foreground data-[activated=true]:hover:bg-accent data-[activated=true]:bg-background"
+          ),
+          rightIcon: showChecked ? null : /* @__PURE__ */ jsx(Fragment, {}),
+          children: option?.name || option?.value
+        }
+      )),
+      !options?.length && /* @__PURE__ */ jsx(SelectEmptyState, { className: "p-3" })
+    ] })
+  ] });
+});
+
+export { SelectRange };
+//# sourceMappingURL=select-range.mjs.map
+//# sourceMappingURL=select-range.mjs.map

package/dist/common/interactive/select-range.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-range.tsx"],"names":[],"mappings":"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","file":"select-range.mjs","sourcesContent":["import React, { cloneElement, memo, ReactElement, useCallback, useEffect, useState } from 'react';\nimport {\n  Option,\n  Select,\n  SelectBody,\n  SelectClose,\n  SelectEmptyState,\n  SelectItem,\n  SelectProps,\n  SelectTrigger,\n  SelectValue,\n} from '@/common/interactive/select';\nimport { ArrowBackRightIcon16 } from '@/assets/Icon';\nimport { Button } from '@/components/button';\nimport { Skeleton } from '@/components/skeleton';\nimport { cn } from '@/lib/utils';\n\nexport interface SelectRangeProps extends Omit<SelectProps, 'children'> {\n  children?:\n    | React.ReactNode\n    | ((field: {\n        label?: string;\n        value?: any;\n        minValue?: any;\n        maxValue?: any;\n        onChange?: (value?: any) => void;\n        isMin?: boolean;\n        isMax: boolean;\n      }) => React.ReactNode);\n  options?: Option[];\n  onSelectChange?: (value?: Option[]) => void;\n  onInputChange?: (fromValue?: any, toValue?: any) => void;\n  fromLabel?: string;\n  fromValue?: any;\n  toLabel?: string;\n  toValue?: any;\n  valueLabel?: (fromValue?: any, toValue?: any) => string;\n  hasRemoveIcon?: boolean;\n  loading?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  bodyClassName?: string;\n  requiredCustomInput?: boolean;\n}\n\nconst SelectRange = memo(\n  ({\n    label,\n    children,\n    options = [],\n    fromValue,\n    toValue,\n    onSelectChange,\n    onInputChange,\n    fromLabel,\n    toLabel,\n    valueLabel,\n    hasRemoveIcon,\n    loading,\n    placeholder,\n    disabled,\n    bodyClassName,\n    requiredCustomInput,\n  }: SelectRangeProps) => {\n    const [customValues, setCustomValues] = useState<[any, any]>([undefined, undefined]);\n    const [tempValues, setTempValues] = useState<[any, any]>([undefined, undefined]);\n    const [selectedValue, setSelectedValue] = useState<Option[]>();\n\n    useEffect(() => {\n      if (\n        JSON.stringify(customValues) !== JSON.stringify([fromValue ?? '', toValue ?? '']) &&\n        options?.length > 0\n      ) {\n        const value = `${fromValue ?? ''}${fromValue || toValue ? '-' : ''}${toValue ?? ''}`;\n\n        if (options?.some((i) => i.value === value)) {\n          setCustomValues([undefined, undefined]);\n          setTempValues([undefined, undefined]);\n          setSelectedValue([options?.find((i) => i.value === value)].filter(Boolean) as Option[]);\n        } else if (!selectedValue?.some((i) => i.value === value)) {\n          setCustomValues([fromValue, toValue]);\n          setTempValues([fromValue, toValue]);\n          setSelectedValue([\n            {\n              value: `${fromValue ?? ''}${fromValue || toValue ? '-' : ''}${toValue ?? ''}`,\n              name: `${fromValue ?? ''}${fromValue && toValue ? ' - ' : ''}${toValue ?? ''}`,\n            },\n          ]);\n        }\n      }\n    }, [fromValue, toValue, options]);\n\n    const handleChangeCustomValues = useCallback(\n      (index: 0 | 1) => (newValue: any) => {\n        setTempValues((prev) => {\n          const newValues = [...prev] as [any, any];\n          newValues[index] = newValue;\n          return newValues;\n        });\n      },\n      [],\n    );\n\n    const handleApplyCustomValues = useCallback(() => {\n      setCustomValues(tempValues);\n      setSelectedValue([\n        {\n          value: `${tempValues[0] ?? ''}-${tempValues[1] ?? ''}`,\n          name: `${tempValues[0] ?? ''}${tempValues[0] && tempValues[1] ? ' - ' : ''}${tempValues[1] ?? ''}`,\n        },\n      ]);\n      onInputChange?.(tempValues[0] ?? '', tempValues[1] ?? '');\n    }, [tempValues, onInputChange]);\n\n    const handleSelectValueChange = useCallback(\n      (values: Option[]) => {\n        setTempValues([undefined, undefined]);\n        setCustomValues([undefined, undefined]);\n        setSelectedValue(values);\n        onSelectChange?.(values);\n      },\n      [onSelectChange],\n    );\n\n    const handleApplyValues = () => {\n      if (\n        !(requiredCustomInput ? !tempValues[0] || !tempValues[1] : !tempValues[0] && !tempValues[1])\n      ) {\n        handleApplyCustomValues();\n      }\n    };\n\n    const handleClearValue = () => {\n      setTempValues([undefined, undefined]);\n      setCustomValues([undefined, undefined]);\n      setSelectedValue([]);\n      onSelectChange?.([]);\n      onInputChange?.();\n    };\n\n    const handleResetTempValues = (open: boolean) => {\n      if (open) {\n        setTempValues(customValues);\n      }\n    };\n\n    return (\n      <Select\n        label={label}\n        value={selectedValue}\n        onValueChange={handleSelectValueChange}\n        onOpenChange={handleResetTempValues}\n        disabled={disabled}\n      >\n        <SelectTrigger hasRemoveIcon={hasRemoveIcon} placeholder={placeholder}>\n          {customValues?.filter(Boolean)?.length && valueLabel ? (\n            <SelectValue>{() => valueLabel(customValues?.[0], customValues?.[1])}</SelectValue>\n          ) : (\n            <SelectValue />\n          )}\n        </SelectTrigger>\n\n        <SelectBody className={cn('flex flex-col !p-0 !pt-3', bodyClassName)}>\n          {children && (\n            <div className=\"border-border flex items-center gap-1 border-b px-3 pb-3\">\n              <div className=\"flex-1\">\n                {typeof children === 'function'\n                  ? children({\n                      label: fromLabel,\n                      value: tempValues[0],\n                      maxValue: tempValues[1],\n                      isMin: true,\n                      isMax: false,\n                      onChange: handleChangeCustomValues(0),\n                    })\n                  : cloneElement(children as ReactElement, {\n                      label: fromLabel,\n                      value: tempValues[0],\n                      maxValue: tempValues[1],\n                      isMin: true,\n                      isMax: false,\n                      onChange: handleChangeCustomValues(0),\n                    })}\n              </div>\n              <ArrowBackRightIcon16 className=\"h-4 min-h-4 w-4 min-w-4\" />\n              <div className=\"flex-1\">\n                {typeof children === 'function'\n                  ? children({\n                      label: toLabel,\n                      value: tempValues[1],\n                      minValue: tempValues[0],\n                      isMin: false,\n                      isMax: true,\n                      onChange: handleChangeCustomValues(1),\n                    })\n                  : cloneElement(children as ReactElement, {\n                      label: toLabel,\n                      value: tempValues[1],\n                      minValue: tempValues[0],\n                      isMin: false,\n                      isMax: true,\n                      onChange: handleChangeCustomValues(1),\n                    })}\n              </div>\n            </div>\n          )}\n\n          <SelectOptions\n            options={options}\n            loading={loading}\n            showChecked={!tempValues[0] && !tempValues[1]}\n          />\n\n          <div\n            className=\"relative flex gap-3 p-3\"\n            style={{ boxShadow: '0px -8px 24px -4px #172E7E17' }}\n          >\n            <SelectClose asChild>\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                // disabled={!tempValues[0] && !tempValues[1]}\n                // onClick={() => setTempValues([undefined, undefined])}\n                onClick={handleClearValue}\n                className={cn(!tempValues[0] && !tempValues[1] && '!bg-white')}\n              >\n                Bỏ chọn\n              </Button>\n            </SelectClose>\n            <SelectClose className=\"w-full\" asChild>\n              <Button\n                type=\"button\"\n                className=\"w-full\"\n                size=\"sm\"\n                // disabled={\n                //   requiredCustomInput\n                //     ? !tempValues[0] || !tempValues[1]\n                //     : !tempValues[0] && !tempValues[1]\n                // }\n                disabled={\n                  (!!tempValues[0] || !!tempValues[1]) &&\n                  requiredCustomInput &&\n                  (!tempValues[0] || !tempValues[1])\n                }\n                onClick={handleApplyValues}\n              >\n                Áp dụng\n              </Button>\n            </SelectClose>\n          </div>\n        </SelectBody>\n      </Select>\n    );\n  },\n);\nSelectRange.displayName = 'SelectRange';\n\ninterface SelectOptionsProps {\n  options?: Option[];\n  loading?: boolean;\n  showChecked?: boolean;\n}\n\nconst SelectOptions = memo(({ options, loading, showChecked }: SelectOptionsProps) => {\n  return (\n    <div className=\"flex flex-1 flex-col gap-2 overflow-hidden\">\n      {loading && (\n        <div className=\"space-y-2 px-3 pb-3\">\n          {new Array(5).fill(1).map((_item, index) => (\n            <Skeleton className=\"h-10 w-full\" key={index} />\n          ))}\n        </div>\n      )}\n\n      {!loading && (\n        <div className={cn('divide-border max-h-[360px] flex-1 divide-y overflow-auto')}>\n          {options?.map((option) => (\n            <SelectItem\n              option={option}\n              className={cn(\n                'p-3',\n                !showChecked &&\n                  'data-[activated=true]:text-foreground data-[activated=true]:hover:bg-accent data-[activated=true]:bg-background',\n              )}\n              rightIcon={showChecked ? null : <></>}\n            >\n              {option?.name || option?.value}\n            </SelectItem>\n          ))}\n\n          {!options?.length && <SelectEmptyState className=\"p-3\" />}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport { SelectRange };\n"]}