bj-web-components 0.2.27 → 0.2.28

package/dist/web/ProductField/ProductField.js

@@ -1 +1,272 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),ne=require("react-dom");;/* empty css                   */const ce=require("./no_data_light.svg.js"),B=require("./arrow-up.svg.js"),oe=require("./sort.svg.js"),ie=require("./search.svg.js"),ae=require("./checkbox-no.svg.js"),ue=require("./checkbox-ok.svg.js");function Z({size:u=20}){return t.jsx("svg",{width:u,height:u,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z",fill:"currentColor"})})}function le({options:u=[],value:a=[],onChange:o,placeholder:R="请选择",emptyText:D="暂无产品数据",onManageField:I,multiple:d=!0,showSearch:E=!0,showSort:q=!0,addButtonText:y,onAdd:U,labels:s,className:H,style:G,getPopupContainer:x}){const J=(s==null?void 0:s.searchPlaceholder)??"搜索",K=(s==null?void 0:s.sortDefault)??"默认顺序",Q=(s==null?void 0:s.sortAsc)??"名称A-Z",V=(s==null?void 0:s.sortDesc)??"名称Z-A",O=(s==null?void 0:s.noMatchText)??"暂无选项",W=(s==null?void 0:s.manageFieldPre)??"请前往",Y=(s==null?void 0:s.manageFieldLink)??"管理字段",ee=(s==null?void 0:s.manageFieldPost)??"添加",[f,C]=c.useState(!1),[j,M]=c.useState(""),[p,F]=c.useState("none"),[w,N]=c.useState(!1),m=c.useRef(null),b=c.useRef(null),P=c.useRef(null),[v,te]=c.useState({top:0,left:0,width:0}),l=c.useCallback(()=>{if(!m.current)return;const e=m.current.getBoundingClientRect();te({top:e.bottom+4,left:e.left,width:e.width})},[]);c.useLayoutEffect(()=>{f&&l()},[f,l]),c.useEffect(()=>{if(!f)return;const e=r=>{var i,g;const n=r.target;(i=P.current)!=null&&i.contains(n)||(g=m.current)!=null&&g.contains(n)||L()};return document.addEventListener("mousedown",e),window.addEventListener("scroll",l,!0),window.addEventListener("resize",l),()=>{document.removeEventListener("mousedown",e),window.removeEventListener("scroll",l,!0),window.removeEventListener("resize",l)}},[f,l]),c.useEffect(()=>{if(!w)return;const e=r=>{b.current&&!b.current.contains(r.target)&&N(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[w]);const S=c.useRef(null),$=c.useRef(null),h=c.useRef({dragging:!1,startX:0,scrollLeft:0,target:null}),T=c.useCallback(e=>({onMouseDown:r=>{const n=e.current;n&&(h.current={dragging:!0,startX:r.clientX,scrollLeft:n.scrollLeft,target:n})},onMouseMove:r=>{const{dragging:n,startX:i,scrollLeft:g,target:A}=h.current;!n||!A||(r.preventDefault(),A.scrollLeft=g-(r.clientX-i))},onMouseUp:()=>{h.current.dragging=!1},onMouseLeave:()=>{h.current.dragging=!1}}),[]);function se(e){if(!d){o==null||o(a.includes(e)?[]:[e]),a.includes(e)||L();return}const r=a.includes(e)?a.filter(n=>n!==e):[...a,e];o==null||o(r)}function X(e){o==null||o(a.filter(r=>r!==e))}function L(){C(!1),M(""),F("none")}function re(e){F(e),N(!1)}const z=c.useMemo(()=>{let e=u.filter(n=>(n.searchText??(typeof n.label=="string"?n.label:"")).toLowerCase().includes(j.toLowerCase()));const r=n=>n.searchText??(typeof n.label=="string"?n.label:"");return p==="asc"&&(e=[...e].sort((n,i)=>r(n).localeCompare(r(i)))),p==="desc"&&(e=[...e].sort((n,i)=>r(i).localeCompare(r(n)))),e},[u,j,p]),_=u.filter(e=>a.includes(e.value)),k=u.length>0;return t.jsxs("div",{ref:m,className:["bu-pf",H].filter(Boolean).join(" "),style:G,children:[!f&&t.jsxs("div",{className:`bu-pf__trigger${_.length>0?" bu-pf__trigger--selected":""}`,onClick:()=>C(!0),children:[_.length>0?t.jsx("div",{className:"bu-pf__trigger-tags",ref:$,...T($),children:_.map(e=>t.jsxs("span",{className:`bu-pf__tag${d?"":" bu-pf__tag--single"}`,children:[t.jsx("span",{className:"bu-pf__tag-text",children:e.label}),t.jsx("button",{type:"button",className:"bu-pf__tag-close",onClick:r=>{r.stopPropagation(),X(e.value)},children:t.jsx(Z,{size:12})})]},e.value))}):t.jsx("span",{className:"bu-pf__placeholder",children:R}),t.jsx("span",{className:"bu-pf__arrow",children:t.jsx("img",{src:B,width:24,height:24,alt:""})})]}),f&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"bu-pf__panel",children:t.jsxs("div",{className:"bu-pf__header",children:[t.jsx("div",{className:"bu-pf__tags",ref:S,...T(S),children:_.length>0?_.map(e=>t.jsxs("span",{className:`bu-pf__tag${d?"":" bu-pf__tag--single"}`,children:[t.jsx("span",{className:"bu-pf__tag-text",children:e.label}),t.jsx("button",{type:"button",className:"bu-pf__tag-close",onClick:()=>X(e.value),children:t.jsx(Z,{size:12})})]},e.value)):t.jsx("span",{className:"bu-pf__placeholder-inline",children:R})}),t.jsx("button",{type:"button",className:"bu-pf__close",onClick:L,children:t.jsx("img",{src:B,width:24,height:24,alt:""})})]})}),ne.createPortal(t.jsx("div",{ref:P,className:"bu-pf__portal",style:{position:"fixed",top:v.top,left:v.left,width:v.width,zIndex:1050},children:t.jsxs("div",{className:"bu-pf__dropdown",children:[(E||q)&&t.jsxs("div",{className:"bu-pf__toolbar",children:[E&&t.jsxs("div",{className:"bu-pf__search",children:[t.jsx("span",{className:"bu-pf__search-icon",children:t.jsx("img",{src:ie,width:20,height:20,alt:""})}),t.jsx("input",{className:"bu-pf__search-input",placeholder:J,value:j,onChange:e=>M(e.target.value)})]}),q&&t.jsxs("div",{ref:b,className:"bu-pf__sort-wrap",children:[t.jsx("button",{type:"button",className:`bu-pf__sort-btn${p!=="none"?" bu-pf__sort-btn--active":""}`,onClick:()=>N(e=>!e),children:t.jsx("img",{src:oe,width:24,height:24,alt:""})}),w&&t.jsx("div",{className:"bu-pf__sort-dropdown",children:[{key:"none",label:K},{key:"asc",label:Q},{key:"desc",label:V}].map(({key:e,label:r})=>t.jsx("div",{className:`bu-pf__sort-option${p===e?" bu-pf__sort-option--active":""}`,onClick:()=>re(e),children:r},e))})]})]}),t.jsx("div",{className:"bu-pf__list",children:k&&z.length>0?z.map(e=>{const r=a.includes(e.value);return t.jsxs("div",{className:`bu-pf__option${d?" bu-pf__option--multiple":""}${r&&!d?" bu-pf__option--selected":""}`,onClick:()=>se(e.value),children:[d&&t.jsx("img",{className:"bu-pf__checkbox-img",src:r?ue:ae,alt:""}),t.jsx("span",{className:"bu-pf__option-label",children:e.label})]},e.value)}):t.jsxs("div",{className:"bu-pf__no-match",children:[t.jsx("img",{className:"bu-pf__no-match-img",src:ce,alt:k?O:D}),t.jsx("p",{className:"bu-pf__no-match-text",children:k?O:D}),t.jsxs("p",{className:"bu-pf__no-match-hint",children:[W,t.jsx("button",{type:"button",className:"bu-pf__manage-btn",onClick:I,children:Y}),ee]})]})}),y&&t.jsx("div",{className:"bu-pf__add-row",onClick:U,children:y})]})}),(x==null?void 0:x())??document.body)]})]})}module.exports=le;
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+;/* empty css                   */
+const no_data_light = require("./no_data_light.svg.js");
+const arrowUp = require("./arrow-up.svg.js");
+const sort = require("./sort.svg.js");
+const search = require("./search.svg.js");
+const checkboxNo = require("./checkbox-no.svg.js");
+const checkboxOk = require("./checkbox-ok.svg.js");
+function CloseIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5613 6.73027C16.7558 6.53571 17.0723 6.53442 17.2684 6.72736C17.4644 6.92032 17.4657 7.23444 17.2713 7.42901L12.7036 12.0002L17.2713 16.5714C17.4657 16.766 17.4644 17.0801 17.2684 17.273C17.0723 17.4659 16.7558 17.4646 16.5613 17.2701L11.9996 12.7047L7.43794 17.2701C7.24352 17.4647 6.92699 17.4659 6.73091 17.273C6.53485 17.0801 6.53355 16.7659 6.72798 16.5714L11.2955 12.0002L6.72798 7.42901C6.53355 7.23442 6.53485 6.92032 6.73091 6.72736C6.92698 6.53442 7.2435 6.53571 7.43794 6.73027L11.9996 11.2955L16.5613 6.73027Z", fill: "currentColor" }) });
+}
+function BuProductField({
+  options = [],
+  value = [],
+  onChange,
+  placeholder = "请选择",
+  emptyText = "暂无产品数据",
+  onManageField,
+  multiple = true,
+  showSearch = true,
+  showSort = true,
+  addButtonText,
+  onAdd,
+  labels,
+  className,
+  style,
+  getPopupContainer
+}) {
+  const searchPlaceholder = (labels == null ? void 0 : labels.searchPlaceholder) ?? "搜索";
+  const sortDefault = (labels == null ? void 0 : labels.sortDefault) ?? "默认顺序";
+  const sortAsc = (labels == null ? void 0 : labels.sortAsc) ?? "名称A-Z";
+  const sortDesc = (labels == null ? void 0 : labels.sortDesc) ?? "名称Z-A";
+  const noMatchText = (labels == null ? void 0 : labels.noMatchText) ?? "暂无选项";
+  const manageFieldPre = (labels == null ? void 0 : labels.manageFieldPre) ?? "请前往";
+  const manageFieldLink = (labels == null ? void 0 : labels.manageFieldLink) ?? "管理字段";
+  const manageFieldPost = (labels == null ? void 0 : labels.manageFieldPost) ?? "添加";
+  const [open, setOpen] = react.useState(false);
+  const [search$1, setSearch] = react.useState("");
+  const [sortOrder, setSortOrder] = react.useState("none");
+  const [sortDropdownOpen, setSortDropdownOpen] = react.useState(false);
+  const rootRef = react.useRef(null);
+  const sortBtnRef = react.useRef(null);
+  const portalRef = react.useRef(null);
+  const [dropdownPos, setDropdownPos] = react.useState({ top: 0, left: 0, width: 0 });
+  const updatePosition = react.useCallback(() => {
+    if (!rootRef.current) return;
+    const rect = rootRef.current.getBoundingClientRect();
+    setDropdownPos({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
+  react.useLayoutEffect(() => {
+    if (open) updatePosition();
+  }, [open, updatePosition]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      const target = e.target;
+      if (((_a = portalRef.current) == null ? void 0 : _a.contains(target)) || ((_b = rootRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  react.useEffect(() => {
+    if (!sortDropdownOpen) return;
+    const handler = (e) => {
+      if (sortBtnRef.current && !sortBtnRef.current.contains(e.target)) {
+        setSortDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [sortDropdownOpen]);
+  const tagsRef = react.useRef(null);
+  const triggerTagsRef = react.useRef(null);
+  const dragState = react.useRef({ dragging: false, startX: 0, scrollLeft: 0, target: null });
+  const makeDragHandlers = react.useCallback((ref) => ({
+    onMouseDown: (e) => {
+      const el = ref.current;
+      if (!el) return;
+      dragState.current = { dragging: true, startX: e.clientX, scrollLeft: el.scrollLeft, target: el };
+    },
+    onMouseMove: (e) => {
+      const { dragging, startX, scrollLeft, target } = dragState.current;
+      if (!dragging || !target) return;
+      e.preventDefault();
+      target.scrollLeft = scrollLeft - (e.clientX - startX);
+    },
+    onMouseUp: () => {
+      dragState.current.dragging = false;
+    },
+    onMouseLeave: () => {
+      dragState.current.dragging = false;
+    }
+  }), []);
+  function toggleOption(val) {
+    if (!multiple) {
+      onChange == null ? void 0 : onChange(value.includes(val) ? [] : [val]);
+      if (!value.includes(val)) close();
+      return;
+    }
+    const next = value.includes(val) ? value.filter((v) => v !== val) : [...value, val];
+    onChange == null ? void 0 : onChange(next);
+  }
+  function removeTag(val) {
+    onChange == null ? void 0 : onChange(value.filter((v) => v !== val));
+  }
+  function close() {
+    setOpen(false);
+    setSearch("");
+    setSortOrder("none");
+  }
+  function selectSort(order) {
+    setSortOrder(order);
+    setSortDropdownOpen(false);
+  }
+  const filteredOptions = react.useMemo(() => {
+    let list = options.filter((o) => {
+      const text = o.searchText ?? (typeof o.label === "string" ? o.label : "");
+      return text.toLowerCase().includes(search$1.toLowerCase());
+    });
+    const getText = (o) => o.searchText ?? (typeof o.label === "string" ? o.label : "");
+    if (sortOrder === "asc") list = [...list].sort((a, b) => getText(a).localeCompare(getText(b)));
+    if (sortOrder === "desc") list = [...list].sort((a, b) => getText(b).localeCompare(getText(a)));
+    return list;
+  }, [options, search$1, sortOrder]);
+  const selectedOptions = options.filter((o) => value.includes(o.value));
+  const hasOptions = options.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: ["bu-pf", className].filter(Boolean).join(" "), style, children: [
+    !open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bu-pf__trigger${selectedOptions.length > 0 ? " bu-pf__trigger--selected" : ""}`, onClick: () => setOpen(true), children: [
+      selectedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "bu-pf__trigger-tags",
+          ref: triggerTagsRef,
+          ...makeDragHandlers(triggerTagsRef),
+          children: selectedOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `bu-pf__tag${!multiple ? " bu-pf__tag--single" : ""}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__tag-text", children: opt.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "bu-pf__tag-close",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeTag(opt.value);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 12 })
+              }
+            )
+          ] }, opt.value))
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__placeholder", children: placeholder }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__arrow", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: arrowUp, width: 24, height: 24, alt: "" }) })
+    ] }),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__panel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "bu-pf__tags",
+            ref: tagsRef,
+            ...makeDragHandlers(tagsRef),
+            children: selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `bu-pf__tag${!multiple ? " bu-pf__tag--single" : ""}`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__tag-text", children: opt.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "bu-pf__tag-close",
+                  onClick: () => removeTag(opt.value),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 12 })
+                }
+              )
+            ] }, opt.value)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__placeholder-inline", children: placeholder })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-pf__close", onClick: close, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: arrowUp, width: 24, height: 24, alt: "" }) })
+      ] }) }),
+      reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: portalRef, className: "bu-pf__portal", style: { position: "fixed", top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width, zIndex: 1050 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__dropdown", children: [
+          (showSearch || showSort) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__toolbar", children: [
+            showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__search", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__search-icon", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: search, width: 20, height: 20, alt: "" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  className: "bu-pf__search-input",
+                  placeholder: searchPlaceholder,
+                  value: search$1,
+                  onChange: (e) => setSearch(e.target.value)
+                }
+              )
+            ] }),
+            showSort && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sortBtnRef, className: "bu-pf__sort-wrap", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `bu-pf__sort-btn${sortOrder !== "none" ? " bu-pf__sort-btn--active" : ""}`,
+                  onClick: () => setSortDropdownOpen((v) => !v),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: sort, width: 24, height: 24, alt: "" })
+                }
+              ),
+              sortDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__sort-dropdown", children: [
+                { key: "none", label: sortDefault },
+                { key: "asc", label: sortAsc },
+                { key: "desc", label: sortDesc }
+              ].map(({ key, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `bu-pf__sort-option${sortOrder === key ? " bu-pf__sort-option--active" : ""}`,
+                  onClick: () => selectSort(key),
+                  children: label
+                },
+                key
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__list", children: hasOptions && filteredOptions.length > 0 ? filteredOptions.map((opt) => {
+            const checked = value.includes(opt.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: `bu-pf__option${multiple ? " bu-pf__option--multiple" : ""}${checked && !multiple ? " bu-pf__option--selected" : ""}`,
+                onClick: () => toggleOption(opt.value),
+                children: [
+                  multiple && /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      className: "bu-pf__checkbox-img",
+                      src: checked ? checkboxOk : checkboxNo,
+                      alt: ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-pf__option-label", children: opt.label })
+                ]
+              },
+              opt.value
+            );
+          }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bu-pf__no-match", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { className: "bu-pf__no-match-img", src: no_data_light, alt: hasOptions ? noMatchText : emptyText }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bu-pf__no-match-text", children: hasOptions ? noMatchText : emptyText }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "bu-pf__no-match-hint", children: [
+              manageFieldPre,
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bu-pf__manage-btn", onClick: onManageField, children: manageFieldLink }),
+              manageFieldPost
+            ] })
+          ] }) }),
+          addButtonText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-pf__add-row", onClick: onAdd, children: addButtonText })
+        ] }) }),
+        (getPopupContainer == null ? void 0 : getPopupContainer()) ?? document.body
+      )
+    ] })
+  ] });
+}
+module.exports = BuProductField;