@labelbee/lb-components 1.10.0-alpha.2 → 1.10.0-alpha.3

package/es/views/MainView/sidebar/TagSidebar/index.js

@@ -1 +1,178 @@
-import K from"../../../../components/attributeList/index.js";import M from"../../../../components/checkboxList/index.js";import{CaretRightOutlined as P}from"@ant-design/icons";import{Collapse as T,Tooltip as H,Badge as x}from"antd/es";import{cloneDeep as F}from"lodash";import n,{useState as p,useRef as U,useEffect as v,useCallback as q}from"react";import z from"../../../../assets/annotation/common/icon_clearSmall.svg.js";import G from"../../../../assets/annotation/common/icon_clearSmall_a.svg.js";import{TagUtils as J}from"@labelbee/lb-annotation";import{connect as Q}from"react-redux";import{useTranslation as V}from"react-i18next";import{LabelBeeContext as W}from"../../../../store/ctx.js";const{Panel:X}=T,$=({isActive:a})=>n.createElement(P,{rotate:a?90:0}),Y=({toolInstance:a,imgIndex:N})=>{const[o,g]=p([]),i=U(null),[,j]=p(0),[w,f]=p(-1),{t:b}=V();v(()=>{a&&(g(a.config.inputList.map(e=>e.value)),a.singleOn("render",()=>{j(e=>e+1)}))},[a]),v(()=>{if(a&&(a.singleOn("expend",O),a.labelSelectedList.length===1)){let e=0;for(let l=0;l<a.labelSelectedList[0];l++)e+=46,s[l]&&o[l]!==""&&s[l].subSelected.forEach(r=>{e+=40});i.current&&(i.current.children[0].scrollTop=e)}}),v(()=>{i.current&&(i.current.children[0].scrollTop=0)},[N]);const O=()=>{var e;const l=a.labelSelectedList[0],r=(e=s.filter((t,m)=>m===l)[0])==null?void 0:e.value;h(l,r,!0)},h=q((e,l,r)=>{const t=F(o);t[e]===""||r===!0?t[e]=l:t[e]="",g(t)},[o]);if(!a)return null;const{labelSelectedList:c,config:{inputList:s},currentTagResult:u,setLabel:E}=a,A=e=>c.length>0&&c[0]===e?n.createElement("span",{className:"keyDownIconActive"},e+1):n.createElement("span",{className:"keyDownIcon"},e+1),y=(e,l=-1)=>e?e.map((r,t)=>{var m,L,k,_,C;if(r.subSelected){const R=J.judgeResultIsInInputList(r.value,(m=u==null?void 0:u.result)==null?void 0:m[r.value],s);return n.createElement(T,{bordered:!1,expandIcon:$,key:`collapse_${t}_${l+1}`,onChange:()=>h(t,r.value),activeKey:[o[t]]},n.createElement(X,{header:n.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",flex:1}},n.createElement("span",null,r.key,n.createElement(H,{placement:"bottom",title:b("ClearThisOption")},n.createElement("img",{style:{marginLeft:5,cursor:"pointer"},onClick:D=>{D.stopPropagation(),a.clearResult(!0,r.value)},src:w===t||R?G:z,onMouseEnter:()=>{f(t)},onMouseLeave:()=>{f(-1)}})),R&&o[t]===""&&n.createElement(x,{color:"#87d068"})),(s==null?void 0:s.length)>1&&A(t)),key:r.value},n.createElement("div",{className:"level",style:{backgroundColor:c.length>0&&c[0]===t?"rgba(158, 158, 158, 0.18)":""}},y(r.subSelected,t))))}const d=(s==null?void 0:s[l])?s==null?void 0:s[l].value:0,S=((_=(k=(L=u==null?void 0:u.result)==null?void 0:L[d])==null?void 0:k.split(";"))==null?void 0:_.indexOf(r.value))>-1?r.value:"";return((C=s==null?void 0:s[l])==null?void 0:C.isMulti)===!0?n.createElement("div",{className:"singleBar",key:`${d}_${l}_${t}`},n.createElement(M,{attributeChanged:()=>E(l,t),selectedAttribute:[S],list:[{value:r.value,label:r.key}],num:t+1})):n.createElement("div",{className:"singleBar",key:`${d}_${l}_${t}`},n.createElement(K,{forbidColor:!0,attributeChanged:()=>E(l,t),selectedAttribute:S,list:[{value:r.value,label:r.key}],num:t+1}))}):null,B=window.innerHeight-61-80;return n.createElement("div",{className:"tagOperationMenu",ref:i},(s==null?void 0:s.length)===0?n.createElement("div",{style:{padding:20,textAlign:"center"}},b("NoConfiguration")):n.createElement("div",{className:"main",style:{height:B}},y(s)))};function Z(a){return{toolInstance:a.annotation.toolInstance,imgIndex:a.annotation.imgIndex}}var I=Q(Z,null,null,{context:W})(Y);export{I as default,$ as expandIconFuc};
+import AttributeList from '../../../../components/attributeList/index.js';
+import CheckboxList from '../../../../components/checkboxList/index.js';
+import { CaretRightOutlined } from '@ant-design/icons';
+import { Collapse, Tooltip, Badge } from 'antd/es';
+import { cloneDeep } from 'lodash';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import img$1 from '../../../../assets/annotation/common/icon_clearSmall.svg.js';
+import img from '../../../../assets/annotation/common/icon_clearSmall_a.svg.js';
+import { TagUtils } from '@labelbee/lb-annotation';
+import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { LabelBeeContext } from '../../../../store/ctx.js';
+
+const {Panel} = Collapse;
+const expandIconFuc = ({isActive}) => /* @__PURE__ */ React.createElement(CaretRightOutlined, {
+  rotate: isActive ? 90 : 0
+});
+const TagSidebar = ({toolInstance, imgIndex}) => {
+  const [expandKeyList, setExpandKeyList] = useState([]);
+  const sidebarRef = useRef(null);
+  const [, forceRender] = useState(0);
+  const [hoverDeleteIndex, setHoverDeleteIndex] = useState(-1);
+  const {t} = useTranslation();
+  useEffect(() => {
+    if (toolInstance) {
+      setExpandKeyList(toolInstance.config.inputList.map((v) => v.value));
+      toolInstance.singleOn("render", () => {
+        forceRender((s) => s + 1);
+      });
+    }
+  }, [toolInstance]);
+  useEffect(() => {
+    if (toolInstance) {
+      toolInstance.singleOn("expend", expendRender);
+      if (toolInstance.labelSelectedList.length === 1) {
+        let height2 = 0;
+        for (let i = 0; i < toolInstance.labelSelectedList[0]; i++) {
+          height2 += 46;
+          inputList[i] && expandKeyList[i] !== "" && inputList[i].subSelected.forEach((i2) => {
+            height2 += 40;
+          });
+        }
+        if (sidebarRef.current) {
+          sidebarRef.current.children[0].scrollTop = height2;
+        }
+      }
+    }
+  });
+  useEffect(() => {
+    if (sidebarRef.current) {
+      sidebarRef.current.children[0].scrollTop = 0;
+    }
+  }, [imgIndex]);
+  const expendRender = () => {
+    var _a;
+    const index = toolInstance.labelSelectedList[0];
+    const value = (_a = inputList.filter((v, i) => i === index)[0]) == null ? void 0 : _a.value;
+    setExpendKeyList(index, value, true);
+  };
+  const setExpendKeyList = useCallback((index, value, expend) => {
+    const newKeyList = cloneDeep(expandKeyList);
+    if (newKeyList[index] === "" || expend === true) {
+      newKeyList[index] = value;
+    } else {
+      newKeyList[index] = "";
+    }
+    setExpandKeyList(newKeyList);
+  }, [expandKeyList]);
+  if (!toolInstance)
+    return null;
+  const {
+    labelSelectedList,
+    config: {inputList},
+    currentTagResult,
+    setLabel
+  } = toolInstance;
+  const selectedButton = (index) => {
+    if (labelSelectedList.length > 0 && labelSelectedList[0] === index) {
+      return /* @__PURE__ */ React.createElement("span", {
+        className: "keyDownIconActive"
+      }, index + 1);
+    }
+    return /* @__PURE__ */ React.createElement("span", {
+      className: "keyDownIcon"
+    }, index + 1);
+  };
+  const labelPanel = (labelInfoSet, basicIndex = -1) => {
+    if (!labelInfoSet) {
+      return null;
+    }
+    return labelInfoSet.map((info, index) => {
+      var _a, _b, _c, _d, _e;
+      if (info.subSelected) {
+        const isResult = TagUtils.judgeResultIsInInputList(info.value, (_a = currentTagResult == null ? void 0 : currentTagResult.result) == null ? void 0 : _a[info.value], inputList);
+        return /* @__PURE__ */ React.createElement(Collapse, {
+          bordered: false,
+          expandIcon: expandIconFuc,
+          key: `collapse_${index}_${basicIndex + 1}`,
+          onChange: () => setExpendKeyList(index, info.value),
+          activeKey: [expandKeyList[index]]
+        }, /* @__PURE__ */ React.createElement(Panel, {
+          header: /* @__PURE__ */ React.createElement("div", {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              flex: 1
+            }
+          }, /* @__PURE__ */ React.createElement("span", null, info.key, /* @__PURE__ */ React.createElement(Tooltip, {
+            placement: "bottom",
+            title: t("ClearThisOption")
+          }, /* @__PURE__ */ React.createElement("img", {
+            style: {marginLeft: 5, cursor: "pointer"},
+            onClick: (e) => {
+              e.stopPropagation();
+              toolInstance.clearResult(true, info.value);
+            },
+            src: hoverDeleteIndex === index || isResult ? img : img$1,
+            onMouseEnter: () => {
+              setHoverDeleteIndex(index);
+            },
+            onMouseLeave: () => {
+              setHoverDeleteIndex(-1);
+            }
+          })), isResult && expandKeyList[index] === "" && /* @__PURE__ */ React.createElement(Badge, {
+            color: "#87d068"
+          })), (inputList == null ? void 0 : inputList.length) > 1 && selectedButton(index)),
+          key: info.value
+        }, /* @__PURE__ */ React.createElement("div", {
+          className: "level",
+          style: {
+            backgroundColor: labelSelectedList.length > 0 && labelSelectedList[0] === index ? "rgba(158, 158, 158, 0.18)" : ""
+          }
+        }, labelPanel(info.subSelected, index))));
+      }
+      const key = (inputList == null ? void 0 : inputList[basicIndex]) ? inputList == null ? void 0 : inputList[basicIndex].value : 0;
+      const selectedAttribute = ((_d = (_c = (_b = currentTagResult == null ? void 0 : currentTagResult.result) == null ? void 0 : _b[key]) == null ? void 0 : _c.split(";")) == null ? void 0 : _d.indexOf(info.value)) > -1 ? info.value : "";
+      if (((_e = inputList == null ? void 0 : inputList[basicIndex]) == null ? void 0 : _e.isMulti) === true) {
+        return /* @__PURE__ */ React.createElement("div", {
+          className: "singleBar",
+          key: `${key}_${basicIndex}_${index}`
+        }, /* @__PURE__ */ React.createElement(CheckboxList, {
+          attributeChanged: () => setLabel(basicIndex, index),
+          selectedAttribute: [selectedAttribute],
+          list: [{value: info.value, label: info.key}],
+          num: index + 1
+        }));
+      }
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "singleBar",
+        key: `${key}_${basicIndex}_${index}`
+      }, /* @__PURE__ */ React.createElement(AttributeList, {
+        forbidColor: true,
+        attributeChanged: () => setLabel(basicIndex, index),
+        selectedAttribute,
+        list: [{value: info.value, label: info.key}],
+        num: index + 1
+      }));
+    });
+  };
+  const height = window.innerHeight - 61 - 80;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "tagOperationMenu",
+    ref: sidebarRef
+  }, (inputList == null ? void 0 : inputList.length) === 0 ? /* @__PURE__ */ React.createElement("div", {
+    style: {padding: 20, textAlign: "center"}
+  }, t("NoConfiguration")) : /* @__PURE__ */ React.createElement("div", {
+    className: "main",
+    style: {height}
+  }, labelPanel(inputList)));
+};
+function mapStateToProps(state) {
+  return {toolInstance: state.annotation.toolInstance, imgIndex: state.annotation.imgIndex};
+}
+var TagSidebar$1 = connect(mapStateToProps, null, null, {context: LabelBeeContext})(TagSidebar);
+
+export { TagSidebar$1 as default, expandIconFuc };
+//# sourceMappingURL=index.js.map

package/es/views/MainView/sidebar/TagSidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/MainView/sidebar/TagSidebar/index.tsx"],"sourcesContent":["import RadioList from '@/components/attributeList';\nimport CheckBoxList from '@/components/checkboxList';\nimport { CaretRightOutlined } from '@ant-design/icons';\nimport { Badge, Collapse, Tooltip } from 'antd/es';\nimport { cloneDeep } from 'lodash';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clearSmall from '@/assets/annotation/common/icon_clearSmall.svg';\nimport clearSmallA from '@/assets/annotation/common/icon_clearSmall_a.svg';\nimport { TagOperation, TagUtils } from '@labelbee/lb-annotation';\nimport { connect } from 'react-redux';\nimport { AppState } from '@/store';\nimport { IInputList } from '@/types/main';\nimport { useTranslation } from 'react-i18next';\nimport { LabelBeeContext } from '@/store/ctx';\n\ninterface IProps {\n  imgIndex: number;\n  toolInstance: TagOperation;\n}\n\nconst { Panel } = Collapse;\n\nexport const expandIconFuc = ({ isActive }: any) => (\n  <CaretRightOutlined rotate={isActive ? 90 : 0} />\n);\n\nconst TagSidebar: React.FC<IProps> = ({ toolInstance, imgIndex }) => {\n  const [expandKeyList, setExpandKeyList] = useState<string[]>([]);\n\n  const sidebarRef = useRef<HTMLDivElement>(null);\n  const [, forceRender] = useState<number>(0);\n  const [hoverDeleteIndex, setHoverDeleteIndex] = useState(-1);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (toolInstance) {\n      // 用于配置的初始化\n      setExpandKeyList(toolInstance.config.inputList.map((v: IInputList) => v.value));\n\n      // 进行实时渲染\n      toolInstance.singleOn('render', () => {\n        forceRender((s) => s + 1);\n      });\n    }\n  }, [toolInstance]);\n\n  useEffect(() => {\n    if (toolInstance) {\n      // 该写法会不断的重复绑定，后续写法上可以更改（如果将 singleOn 改为 on 会有很大问题）\n      toolInstance.singleOn('expend', expendRender);\n\n      if (toolInstance.labelSelectedList.length === 1) {\n        let height = 0;\n        for (let i = 0; i < toolInstance.labelSelectedList[0]; i++) {\n          height += 46;\n          inputList[i] &&\n            expandKeyList[i] !== '' &&\n            inputList[i].subSelected.forEach((i: any) => {\n              height += 40;\n            });\n        }\n        if (sidebarRef.current) {\n          sidebarRef.current.children[0].scrollTop = height;\n        }\n      }\n    }\n  });\n\n  useEffect(() => {\n    // 翻页侧边栏跳到最上\n    if (sidebarRef.current) {\n      sidebarRef.current.children[0].scrollTop = 0;\n    }\n  }, [imgIndex]);\n\n  const expendRender = () => {\n    const index = toolInstance.labelSelectedList[0];\n    const value = inputList.filter((v: IInputList, i: number) => i === index)[0]?.value;\n    setExpendKeyList(index, value, true);\n  };\n\n  const setExpendKeyList = useCallback(\n    (index: number, value: string, expend?: boolean) => {\n      const newKeyList = cloneDeep(expandKeyList);\n      if (newKeyList[index] === '' || expend === true) {\n        newKeyList[index] = value;\n      } else {\n        newKeyList[index] = '';\n      }\n      setExpandKeyList(newKeyList);\n    },\n    [expandKeyList],\n  );\n\n  if (!toolInstance) return null;\n\n  const {\n    labelSelectedList,\n    config: { inputList },\n    currentTagResult,\n    setLabel,\n  } = toolInstance;\n\n  const selectedButton = (index: number) => {\n    if (labelSelectedList.length > 0 && labelSelectedList[0] === index) {\n      return <span className='keyDownIconActive'>{index + 1}</span>;\n    }\n    return <span className='keyDownIcon'>{index + 1}</span>;\n  };\n\n  // basicIndex 到底是那一层\n  const labelPanel = (labelInfoSet: IInputList[], basicIndex = -1) => {\n    if (!labelInfoSet) {\n      return null;\n    }\n\n    return labelInfoSet.map((info: IInputList, index: number) => {\n      if (info.subSelected) {\n        // 判断是否有数据\n        const isResult = TagUtils.judgeResultIsInInputList(\n          info.value,\n          currentTagResult?.result?.[info.value],\n          inputList,\n        );\n\n        return (\n          <Collapse\n            bordered={false}\n            expandIcon={expandIconFuc}\n            key={`collapse_${index}_${basicIndex + 1}`}\n            onChange={() => setExpendKeyList(index, info.value)}\n            activeKey={[expandKeyList[index]]}\n          >\n            <Panel\n              header={\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    flex: 1,\n                  }}\n                >\n                  <span>\n                    {info.key}\n                    <Tooltip placement='bottom' title={t('ClearThisOption')}>\n                      <img\n                        style={{ marginLeft: 5, cursor: 'pointer' }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          toolInstance.clearResult(true, info.value);\n                        }}\n                        src={hoverDeleteIndex === index || isResult ? clearSmallA : clearSmall}\n                        onMouseEnter={() => {\n                          setHoverDeleteIndex(index);\n                        }}\n                        onMouseLeave={() => {\n                          setHoverDeleteIndex(-1);\n                        }}\n                      />\n                    </Tooltip>\n                    {isResult && expandKeyList[index] === '' && <Badge color='#87d068' />}\n                  </span>\n\n                  {inputList?.length > 1 && selectedButton(index)}\n                </div>\n              }\n              key={info.value}\n            >\n              <div\n                className='level'\n                style={{\n                  backgroundColor:\n                    labelSelectedList.length > 0 && labelSelectedList[0] === index\n                      ? 'rgba(158, 158, 158, 0.18)'\n                      : '',\n                }}\n              >\n                {labelPanel(info.subSelected, index)}\n              </div>\n            </Panel>\n          </Collapse>\n        );\n      }\n      const key = inputList?.[basicIndex] ? inputList?.[basicIndex].value : 0;\n      const selectedAttribute =\n        currentTagResult?.result?.[key]?.split(';')?.indexOf(info.value) > -1 ? info.value : '';\n\n      if (inputList?.[basicIndex]?.isMulti === true) {\n        return (\n          <div className='singleBar' key={`${key}_${basicIndex}_${index}`}>\n            <CheckBoxList\n              attributeChanged={() => setLabel(basicIndex, index)}\n              selectedAttribute={[selectedAttribute]}\n              list={[{ value: info.value, label: info.key }]}\n              num={index + 1}\n            />\n          </div>\n        );\n      }\n      return (\n        <div className='singleBar' key={`${key}_${basicIndex}_${index}`}>\n          <RadioList\n            forbidColor\n            attributeChanged={() => setLabel(basicIndex, index)}\n            selectedAttribute={selectedAttribute}\n            list={[{ value: info.value, label: info.key }]}\n            num={index + 1}\n          />\n        </div>\n      );\n    });\n  };\n  const height = window.innerHeight - 61 - 80;\n\n  return (\n    <div className='tagOperationMenu' ref={sidebarRef}>\n      {inputList?.length === 0 ? (\n        <div style={{ padding: 20, textAlign: 'center' }}>{t('NoConfiguration')}</div>\n      ) : (\n        <div className='main' style={{ height }}>\n          {labelPanel(inputList)}\n        </div>\n      )}\n    </div>\n  );\n};\n\nfunction mapStateToProps(state: AppState) {\n  return { toolInstance: state.annotation.toolInstance, imgIndex: state.annotation.imgIndex };\n}\n\nexport default connect(mapStateToProps, null, null, { context: LabelBeeContext })(TagSidebar);\n"],"names":["clearSmallA","clearSmall","CheckBoxList","RadioList"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,CAAE,KAAU,CAAA,GAAA,QAAA,CAAA;AAEX,MAAM,aAAgB,GAAA,CAAC,CAAE,QAAA,CAAA,yCAC7B,kBAAD,EAAA;AAAA,EAAoB,MAAA,EAAQ,WAAW,EAAK,GAAA,CAAA;AAAA,CAAA,EAAA;AAG9C,MAAM,UAA+B,GAAA,CAAC,CAAE,YAAA,EAAc,QAAe,CAAA,KAAA;AACnE,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAA,CAAA,GAAoB,QAAmB,CAAA,EAAA,CAAA,CAAA;AAE7D,EAAA,MAAM,aAAa,MAAuB,CAAA,IAAA,CAAA,CAAA;AAC1C,EAAM,MAAA,GAAG,WAAA,CAAA,GAAe,QAAiB,CAAA,CAAA,CAAA,CAAA;AACzC,EAAM,MAAA,CAAC,gBAAkB,EAAA,mBAAA,CAAA,GAAuB,QAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AACzD,EAAA,MAAM,CAAE,CAAM,CAAA,GAAA,cAAA,EAAA,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAEhB,MAAA,gBAAA,CAAiB,aAAa,MAAO,CAAA,SAAA,CAAU,GAAI,CAAA,CAAC,MAAkB,CAAE,CAAA,KAAA,CAAA,CAAA,CAAA;AAGxE,MAAa,YAAA,CAAA,QAAA,CAAS,UAAU,MAAM;AACpC,QAAY,WAAA,CAAA,CAAC,MAAM,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAG1B,CAAC,YAAA,CAAA,CAAA,CAAA;AAEJ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAEhB,MAAA,YAAA,CAAa,SAAS,QAAU,EAAA,YAAA,CAAA,CAAA;AAEhC,MAAI,IAAA,YAAA,CAAa,iBAAkB,CAAA,MAAA,KAAW,CAAG,EAAA;AAC/C,QAAA,IAAI,OAAS,GAAA,CAAA,CAAA;AACb,QAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,YAAa,CAAA,iBAAA,CAAkB,IAAI,CAAK,EAAA,EAAA;AAC1D,UAAU,OAAA,IAAA,EAAA,CAAA;AACV,UAAU,SAAA,CAAA,CAAA,CAAA,IACR,cAAc,CAAO,CAAA,KAAA,EAAA,IACrB,UAAU,CAAG,CAAA,CAAA,WAAA,CAAY,OAAQ,CAAA,CAAC,EAAW,KAAA;AAC3C,YAAU,OAAA,IAAA,EAAA,CAAA;AAAA,WAAA,CAAA,CAAA;AAAA,SAAA;AAGhB,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAW,UAAA,CAAA,OAAA,CAAQ,QAAS,CAAA,CAAA,CAAA,CAAG,SAAY,GAAA,OAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAMnD,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAW,UAAA,CAAA,OAAA,CAAQ,QAAS,CAAA,CAAA,CAAA,CAAG,SAAY,GAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAE5C,CAAC,QAAA,CAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,MAAM;AA3E7B,IAAA,IAAA,EAAA,CAAA;AA4EI,IAAM,MAAA,KAAA,GAAQ,aAAa,iBAAkB,CAAA,CAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,KAAA,GAAQ,gBAAU,MAAO,CAAA,CAAC,GAAe,CAAc,KAAA,CAAA,KAAM,KAAO,CAAA,CAAA,CAAA,CAAA,KAA5D,IAAgE,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,CAAA;AAC9E,IAAA,gBAAA,CAAiB,OAAO,KAAO,EAAA,IAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAGjC,EAAA,MAAM,gBAAmB,GAAA,WAAA,CACvB,CAAC,KAAA,EAAe,OAAe,MAAqB,KAAA;AAClD,IAAA,MAAM,aAAa,SAAU,CAAA,aAAA,CAAA,CAAA;AAC7B,IAAA,IAAI,UAAW,CAAA,KAAA,CAAA,KAAW,EAAM,IAAA,MAAA,KAAW,IAAM,EAAA;AAC/C,MAAA,UAAA,CAAW,KAAS,CAAA,GAAA,KAAA,CAAA;AAAA,KACf,MAAA;AACL,MAAA,UAAA,CAAW,KAAS,CAAA,GAAA,EAAA,CAAA;AAAA,KAAA;AAEtB,IAAiB,gBAAA,CAAA,UAAA,CAAA,CAAA;AAAA,GAAA,EAEnB,CAAC,aAAA,CAAA,CAAA,CAAA;AAGH,EAAA,IAAI,CAAC,YAAA;AAAc,IAAO,OAAA,IAAA,CAAA;AAE1B,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,QAAQ,CAAE,SAAA,CAAA;AAAA,IACV,gBAAA;AAAA,IACA,QAAA;AAAA,GACE,GAAA,YAAA,CAAA;AAEJ,EAAM,MAAA,cAAA,GAAiB,CAAC,KAAkB,KAAA;AACxC,IAAA,IAAI,iBAAkB,CAAA,MAAA,GAAS,CAAK,IAAA,iBAAA,CAAkB,OAAO,KAAO,EAAA;AAClE,MAAA,2CAAQ,MAAD,EAAA;AAAA,QAAM,SAAU,EAAA,mBAAA;AAAA,OAAA,EAAqB,KAAQ,GAAA,CAAA,CAAA,CAAA;AAAA,KAAA;AAEtD,IAAA,2CAAQ,MAAD,EAAA;AAAA,MAAM,SAAU,EAAA,aAAA;AAAA,KAAA,EAAe,KAAQ,GAAA,CAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAIhD,EAAA,MAAM,UAAa,GAAA,CAAC,YAA4B,EAAA,UAAA,GAAa,CAAO,CAAA,KAAA;AAClE,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAO,OAAA,IAAA,CAAA;AAAA,KAAA;AAGT,IAAA,OAAO,YAAa,CAAA,GAAA,CAAI,CAAC,IAAA,EAAkB,KAAkB,KAAA;AApHjE,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAqHM,MAAA,IAAI,KAAK,WAAa,EAAA;AAEpB,QAAM,MAAA,QAAA,GAAW,SAAS,wBACxB,CAAA,IAAA,CAAK,OACL,CAAkB,EAAA,GAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,MAAA,KAAlB,IAA2B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAK,KAChC,CAAA,EAAA,SAAA,CAAA,CAAA;AAGF,QAAA,2CACG,QAAD,EAAA;AAAA,UACE,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA,aAAA;AAAA,UACZ,GAAA,EAAK,CAAY,SAAA,EAAA,KAAA,CAAA,CAAA,EAAS,UAAa,GAAA,CAAA,CAAA,CAAA;AAAA,UACvC,QAAU,EAAA,MAAM,gBAAiB,CAAA,KAAA,EAAO,IAAK,CAAA,KAAA,CAAA;AAAA,UAC7C,SAAA,EAAW,CAAC,aAAc,CAAA,KAAA,CAAA,CAAA;AAAA,SAAA,sCAEzB,KAAD,EAAA;AAAA,UACE,MAAA,sCACG,KAAD,EAAA;AAAA,YACE,KAAO,EAAA;AAAA,cACL,OAAS,EAAA,MAAA;AAAA,cACT,cAAgB,EAAA,eAAA;AAAA,cAChB,UAAY,EAAA,QAAA;AAAA,cACZ,IAAM,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA,sCAGP,MAAD,EAAA,IAAA,EACG,IAAK,CAAA,GAAA,sCACL,OAAD,EAAA;AAAA,YAAS,SAAU,EAAA,QAAA;AAAA,YAAS,OAAO,CAAE,CAAA,iBAAA,CAAA;AAAA,WAAA,sCAClC,KAAD,EAAA;AAAA,YACE,KAAO,EAAA,CAAE,UAAY,EAAA,CAAA,EAAG,MAAQ,EAAA,SAAA,CAAA;AAAA,YAChC,OAAA,EAAS,CAAC,CAAM,KAAA;AACd,cAAE,CAAA,CAAA,eAAA,EAAA,CAAA;AACF,cAAa,YAAA,CAAA,WAAA,CAAY,MAAM,IAAK,CAAA,KAAA,CAAA,CAAA;AAAA,aAAA;AAAA,YAEtC,GAAK,EAAA,gBAAA,KAAqB,KAAS,IAAA,QAAA,GAAWA,GAAc,GAAAC,KAAA;AAAA,YAC5D,cAAc,MAAM;AAClB,cAAoB,mBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,aAAA;AAAA,YAEtB,cAAc,MAAM;AAClB,cAAoB,mBAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,aAAA;AAAA,WAAA,CAAA,CAAA,EAIzB,QAAY,IAAA,aAAA,CAAc,KAAW,CAAA,KAAA,EAAA,wCAAO,KAAD,EAAA;AAAA,YAAO,KAAM,EAAA,SAAA;AAAA,WAG1D,CAAA,CAAA,EAAA,CAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,MAAS,IAAA,CAAA,IAAK,cAAe,CAAA,KAAA,CAAA,CAAA;AAAA,UAG7C,KAAK,IAAK,CAAA,KAAA;AAAA,SAAA,sCAET,KAAD,EAAA;AAAA,UACE,SAAU,EAAA,OAAA;AAAA,UACV,KAAO,EAAA;AAAA,YACL,iBACE,iBAAkB,CAAA,MAAA,GAAS,KAAK,iBAAkB,CAAA,CAAA,CAAA,KAAO,QACrD,2BACA,GAAA,EAAA;AAAA,WAAA;AAAA,SAGP,EAAA,UAAA,CAAW,KAAK,WAAa,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAAA;AAMxC,MAAA,MAAM,GAAM,GAAA,CAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAY,UAAc,CAAA,IAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAY,YAAY,KAAQ,GAAA,CAAA,CAAA;AACtE,MAAA,MAAM,iBACJ,GAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAkB,MAAlB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA2B,SAA3B,IAAiC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,CAAM,GAAvC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA6C,OAAQ,CAAA,IAAA,CAAK,KAAS,CAAA,IAAA,CAAA,CAAA,GAAK,KAAK,KAAQ,GAAA,EAAA,CAAA;AAEvF,MAAA,IAAI,CAAY,CAAA,EAAA,GAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,UAAA,CAAA,KAAZ,IAAyB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAA,MAAY,IAAM,EAAA;AAC7C,QAAA,2CACG,KAAD,EAAA;AAAA,UAAK,SAAU,EAAA,WAAA;AAAA,UAAY,GAAA,EAAK,CAAG,EAAA,GAAA,CAAA,CAAA,EAAO,UAAc,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,SAAA,sCACrDC,YAAD,EAAA;AAAA,UACE,gBAAA,EAAkB,MAAM,QAAA,CAAS,UAAY,EAAA,KAAA,CAAA;AAAA,UAC7C,mBAAmB,CAAC,iBAAA,CAAA;AAAA,UACpB,MAAM,CAAC,CAAE,OAAO,IAAK,CAAA,KAAA,EAAO,OAAO,IAAK,CAAA,GAAA,CAAA,CAAA;AAAA,UACxC,KAAK,KAAQ,GAAA,CAAA;AAAA,SAAA,CAAA,CAAA,CAAA;AAAA,OAAA;AAKrB,MAAA,2CACG,KAAD,EAAA;AAAA,QAAK,SAAU,EAAA,WAAA;AAAA,QAAY,GAAA,EAAK,CAAG,EAAA,GAAA,CAAA,CAAA,EAAO,UAAc,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,OAAA,sCACrDC,aAAD,EAAA;AAAA,QACE,WAAW,EAAA,IAAA;AAAA,QACX,gBAAA,EAAkB,MAAM,QAAA,CAAS,UAAY,EAAA,KAAA,CAAA;AAAA,QAC7C,iBAAA;AAAA,QACA,MAAM,CAAC,CAAE,OAAO,IAAK,CAAA,KAAA,EAAO,OAAO,IAAK,CAAA,GAAA,CAAA,CAAA;AAAA,QACxC,KAAK,KAAQ,GAAA,CAAA;AAAA,OAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAMvB,EAAM,MAAA,MAAA,GAAS,MAAO,CAAA,WAAA,GAAc,EAAK,GAAA,EAAA,CAAA;AAEzC,EAAA,2CACG,KAAD,EAAA;AAAA,IAAK,SAAU,EAAA,kBAAA;AAAA,IAAmB,GAAK,EAAA,UAAA;AAAA,GAAA,EACpC,CAAW,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,MAAA,MAAW,CACrB,mBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,KAAO,EAAA,CAAE,OAAS,EAAA,EAAA,EAAI,SAAW,EAAA,QAAA,CAAA;AAAA,GAAa,EAAA,CAAA,CAAE,iBAErD,CAAA,CAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,SAAU,EAAA,MAAA;AAAA,IAAO,OAAO,CAAE,MAAA,CAAA;AAAA,GAAA,EAC5B,UAAW,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA;AAOtB,SAAA,eAAA,CAAyB,KAAiB,EAAA;AACxC,EAAA,OAAO,CAAE,YAAc,EAAA,KAAA,CAAM,WAAW,YAAc,EAAA,QAAA,EAAU,MAAM,UAAW,CAAA,QAAA,CAAA,CAAA;AAAA,CAAA;AAGnF,mBAAe,QAAQ,eAAiB,EAAA,IAAA,EAAM,IAAM,EAAA,CAAE,SAAS,eAAmB,CAAA,CAAA,CAAA,UAAA,CAAA;;;;"}

package/es/views/MainView/sidebar/TextAreaFormat/index.js

@@ -1 +1,106 @@
-import{TEXT_ATTRIBUTE_MAX_LENGTH as m}from"../../../../data/enums/ToolType.js";import{TextUtils as C}from"../../../../utils/TextUtils.js";import{Tooltip as k,message as i,Input as A}from"antd/es";import t,{useState as r,useEffect as f}from"react";import I from"../../../../assets/annotation/common/icon_clearSmall_a.svg.js";import _ from"../../../../assets/annotation/common/icon_clearSmall.svg.js";import{classnames as T}from"../../../../utils/index.js";import{useTranslation as F}from"react-i18next";const L=v=>{const{t:n}=F(),{onChange:o,textValue:a,checkString:u,textCheckType:h}=v,[p,s]=r(0),[l,c]=r(!1),[g,x]=r(!1),[d,E]=r(!1),y=t.createElement("a",null,t.createElement(k,{placement:"bottom",title:n("EmptyTextInput")},t.createElement("img",{onMouseEnter:()=>E(!0),onMouseLeave:()=>E(!1),style:{marginLeft:6},src:d?I:_,onClick:e=>{e.stopPropagation(),o("")}}))),N=e=>{e.stopPropagation()};f(()=>{a&&s(a.length)},[]),f(()=>{var e;if(a===void 0||a==="")c(!1);else try{a&&c(!new RegExp(u).test(a))}catch(j){c(!0),i.destroy(),i.error(n("RegularExpIncorrectly"))}s((e=a==null?void 0:a.length)!=null?e:0)},[a]);const w=e=>{if(l||!new RegExp(u).test(e.target.value))return o(""),i.error(C.getErrorNotice(h)),!0;o(e.target.value,!0)};return t.createElement("div",{className:"textInputContainer"},t.createElement("div",{className:"label"},n("TextInput"),y),t.createElement("div",{className:T({textareaContainer:!0,focus:g})},t.createElement("div",{className:T({toolTextAreaBox:!0,toolTextAreaBoxFocus:g})},t.createElement(A.TextArea,{style:{resize:"none",height:120,wordBreak:"break-all"},maxLength:m,onKeyDownCapture:e=>{e.stopPropagation()},onKeyUpCapture:e=>{e.stopPropagation()},onChange:e=>{o(e.target.value),s(e.target.value.length)},onFocus:e=>x(!0),onBlur:e=>{w(e),x(!1)},value:a,onKeyDown:N,className:l?"warning":""}),t.createElement("div",{className:"textAreaFooter"},t.createElement("span",{className:"wordCount"},t.createElement("span",{className:p>m||l?"warning":""},p),"/",t.createElement("span",null,m))))))};export{L as default};
+import { TEXT_ATTRIBUTE_MAX_LENGTH } from '../../../../data/enums/ToolType.js';
+import { TextUtils } from '../../../../utils/TextUtils.js';
+import { Tooltip, message, Input } from 'antd/es';
+import React, { useState, useEffect } from 'react';
+import img from '../../../../assets/annotation/common/icon_clearSmall_a.svg.js';
+import img$1 from '../../../../assets/annotation/common/icon_clearSmall.svg.js';
+import { classnames } from '../../../../utils/index.js';
+import { useTranslation } from 'react-i18next';
+
+const TextAreaFormat = (props) => {
+  const {t} = useTranslation();
+  const {onChange, textValue, checkString, textCheckType} = props;
+  const [textLength, setTextLength] = useState(0);
+  const [error, setError] = useState(false);
+  const [onFocus, setOnFocus] = useState(false);
+  const [hoverDelete, setHoverDelete] = useState(false);
+  const clearIcon = /* @__PURE__ */ React.createElement("a", null, /* @__PURE__ */ React.createElement(Tooltip, {
+    placement: "bottom",
+    title: t("EmptyTextInput")
+  }, /* @__PURE__ */ React.createElement("img", {
+    onMouseEnter: () => setHoverDelete(true),
+    onMouseLeave: () => setHoverDelete(false),
+    style: {marginLeft: 6},
+    src: hoverDelete ? img : img$1,
+    onClick: (e) => {
+      e.stopPropagation();
+      onChange("");
+    }
+  })));
+  const keyDown = (e) => {
+    e.stopPropagation();
+  };
+  useEffect(() => {
+    if (textValue) {
+      setTextLength(textValue.length);
+    }
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (textValue === void 0 || textValue === "") {
+      setError(false);
+    } else {
+      try {
+        textValue && setError(!new RegExp(checkString).test(textValue));
+      } catch (error2) {
+        setError(true);
+        message.destroy();
+        message.error(t("RegularExpIncorrectly"));
+      }
+    }
+    setTextLength((_a = textValue == null ? void 0 : textValue.length) != null ? _a : 0);
+  }, [textValue]);
+  const checkText = (e) => {
+    if (error || !new RegExp(checkString).test(e.target.value)) {
+      onChange("");
+      message.error(TextUtils.getErrorNotice(textCheckType));
+      return true;
+    }
+    onChange(e.target.value, true);
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "textInputContainer"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "label"
+  }, t("TextInput"), clearIcon), /* @__PURE__ */ React.createElement("div", {
+    className: classnames({
+      textareaContainer: true,
+      focus: onFocus
+    })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: classnames({
+      toolTextAreaBox: true,
+      toolTextAreaBoxFocus: onFocus
+    })
+  }, /* @__PURE__ */ React.createElement(Input.TextArea, {
+    style: {resize: "none", height: 120, wordBreak: "break-all"},
+    maxLength: TEXT_ATTRIBUTE_MAX_LENGTH,
+    onKeyDownCapture: (e) => {
+      e.stopPropagation();
+    },
+    onKeyUpCapture: (e) => {
+      e.stopPropagation();
+    },
+    onChange: (e) => {
+      onChange(e.target.value);
+      setTextLength(e.target.value.length);
+    },
+    onFocus: (e) => setOnFocus(true),
+    onBlur: (e) => {
+      checkText(e);
+      setOnFocus(false);
+    },
+    value: textValue,
+    onKeyDown: keyDown,
+    className: error ? "warning" : ""
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "textAreaFooter"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "wordCount"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: textLength > TEXT_ATTRIBUTE_MAX_LENGTH || error ? "warning" : ""
+  }, textLength), "/", /* @__PURE__ */ React.createElement("span", null, TEXT_ATTRIBUTE_MAX_LENGTH))))));
+};
+
+export { TextAreaFormat as default };
+//# sourceMappingURL=index.js.map

package/es/views/MainView/sidebar/TextAreaFormat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/MainView/sidebar/TextAreaFormat/index.tsx"],"sourcesContent":["import { TEXT_ATTRIBUTE_MAX_LENGTH } from '@/data/enums/ToolType';\nimport { TextUtils } from '@/utils/TextUtils';\nimport { Input, message, Tooltip } from 'antd/es';\nimport React, { FocusEvent, useEffect, useState } from 'react';\nimport IconClearSmallA from '@/assets/annotation/common/icon_clearSmall_a.svg';\nimport IconClearSmall from '@/assets/annotation/common/icon_clearSmall.svg';\nimport { classnames } from '@/utils';\nimport { useTranslation } from 'react-i18next';\n\ninterface IProps {\n  onChange: (value: string, isSubmit?: boolean) => void;\n  textValue: string | undefined;\n  checkString: string;\n  textCheckType: number;\n}\n\nconst TextAreaFormat = (props: IProps) => {\n  const { t } = useTranslation();\n\n  const { onChange, textValue, checkString, textCheckType } = props;\n  const [textLength, setTextLength] = useState<number>(0);\n  const [error, setError] = useState<boolean>(false);\n  const [onFocus, setOnFocus] = useState<boolean>(false);\n  const [hoverDelete, setHoverDelete] = useState<boolean>(false);\n\n  const clearIcon = (\n    <a>\n      <Tooltip placement='bottom' title={t('EmptyTextInput')}>\n        <img\n          onMouseEnter={() => setHoverDelete(true)}\n          onMouseLeave={() => setHoverDelete(false)}\n          style={{ marginLeft: 6 }}\n          src={hoverDelete ? IconClearSmallA : IconClearSmall}\n          onClick={(e) => {\n            e.stopPropagation();\n            onChange('');\n          }}\n        />\n      </Tooltip>\n    </a>\n  );\n\n  const keyDown = (e: React.KeyboardEvent) => {\n    e.stopPropagation();\n  };\n\n  useEffect(() => {\n    if (textValue) {\n      setTextLength(textValue.length);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (textValue === undefined || textValue === '') {\n      setError(false);\n    } else {\n      try {\n        textValue && setError(!new RegExp(checkString).test(textValue));\n      } catch (error) {\n        setError(true);\n        message.destroy();\n        message.error(t('RegularExpIncorrectly'));\n      }\n    }\n    setTextLength(textValue?.length ?? 0);\n  }, [textValue]);\n\n  const checkText = (e: FocusEvent<HTMLTextAreaElement>) => {\n    if (error || !new RegExp(checkString).test(e.target.value)) {\n      onChange('');\n      message.error(TextUtils.getErrorNotice(textCheckType));\n      return true;\n    }\n    onChange(e.target.value, true); // 失焦的时候直接进行数据的提交\n  };\n\n  return (\n    <div className='textInputContainer'>\n      <div className='label'>\n        {t('TextInput')}\n        {clearIcon}\n      </div>\n      <div\n        className={classnames({\n          textareaContainer: true,\n          focus: onFocus,\n        })}\n      >\n        <div\n          className={classnames({\n            toolTextAreaBox: true,\n            toolTextAreaBoxFocus: onFocus,\n          })}\n        >\n          <Input.TextArea\n            style={{ resize: 'none', height: 120, wordBreak: 'break-all' }}\n            maxLength={TEXT_ATTRIBUTE_MAX_LENGTH}\n            onKeyDownCapture={(e) => {\n              e.stopPropagation();\n            }}\n            onKeyUpCapture={(e) => {\n              e.stopPropagation();\n            }}\n            onChange={(e) => {\n              onChange(e.target.value);\n              setTextLength(e.target.value.length);\n            }}\n            onFocus={(e) => setOnFocus(true)}\n            onBlur={(e) => {\n              checkText(e);\n              setOnFocus(false);\n            }}\n            value={textValue}\n            onKeyDown={keyDown}\n            className={error ? 'warning' : ''}\n          />\n          <div className='textAreaFooter'>\n            <span className='wordCount'>\n              <span className={textLength > TEXT_ATTRIBUTE_MAX_LENGTH || error ? 'warning' : ''}>\n                {textLength}\n              </span>\n              /<span>{TEXT_ATTRIBUTE_MAX_LENGTH}</span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default TextAreaFormat;\n"],"names":["IconClearSmallA","IconClearSmall"],"mappings":"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"}

package/es/views/MainView/sidebar/TextToolSidebar/index.js

@@ -1 +1,225 @@
-import n,{useState as d,useEffect as _,useRef as K}from"react";import{connect as R}from"react-redux";import{cloneDeep as j}from"lodash";import{classnames as C}from"../../../../utils/index.js";import{Input as D}from"antd/es";import{cKeyCode as $}from"@labelbee/lb-annotation";import{PageForward as q}from"../../../../store/annotation/actionCreators.js";import{ConfigUtils as B}from"../../../../utils/ConfigUtils.js";import{useTranslation as U}from"react-i18next";import{LabelBeeContext as M}from"../../../../store/ctx.js";var z=Object.defineProperty,I=Object.getOwnPropertySymbols,V=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable,S=(e,t,a)=>t in e?z(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,G=(e,t)=>{for(var a in t||(t={}))V.call(t,a)&&S(e,a,t[a]);if(I)for(var a of I(t))W.call(t,a)&&S(e,a,t[a]);return e};const L=$.default,F=e=>{e.stopPropagation(),e.nativeEvent.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},O=e=>{const{textareaProps:t,footer:a}=e;return n.createElement(n.Fragment,null,n.createElement(D.TextArea,G({bordered:!1,rows:6,onKeyDown:F,onKeyUp:F},t)),n.createElement("div",{className:C({textAreaLength:!0})},a))},k=e=>{var t;const a=K(null),[x,c]=d(!1),[w,g]=d(!1),{t:u}=U(),{disabled:l,config:i,result:v,updateText:E,index:T,switchToNextTextarea:h,hasMultiple:P,onNext:p}=e,{maxLength:m}=i,f=v?v[i.key]:"",b=(t=f==null?void 0:f.length)!=null?t:0,N=o=>{E&&(E(o,i.key),i.required&&g(!o))},y=P&&h,r={id:`textInput-${T}`,ref:a,disabled:l,value:f,maxLength:m,autoSize:{minRows:2,maxRows:6},onChange:o=>{const A=o.target.value;N(A)},onFocus:()=>{c(!0)},onBlur:o=>{c(!1),i.required&&g(!o.target.value)},style:{resize:"none",wordBreak:"break-all"},onKeyDownCapture:o=>{o.ctrlKey&&o.keyCode===L.Enter&&(p&&p(),o.preventDefault()),o.keyCode===L.Tab&&y&&(o.preventDefault(),o.nativeEvent.stopImmediatePropagation(),h(T)),o.nativeEvent.stopPropagation()}},s=n.createElement("div",{className:"textAreaFooter"},n.createElement("div",{className:"hotkeyTip"},y&&n.createElement("span",null,`[${u("Switch")}]Tab`),n.createElement("span",null,`[${u("TurnPage")}]Ctrl+Enter`)),n.createElement("div",{className:"wordCount"},n.createElement("span",{className:b>=m?"warning":""},b),"/",n.createElement("span",null,m)));return _(()=>{l&&c(!1)},[l]),n.createElement("div",{className:"textField"},n.createElement("div",{className:"label"},n.createElement("span",{className:C({required:i.required})},i.label),n.createElement("i",{className:C({clearText:!0,disabled:l}),onClick:()=>{l||N("")}})),n.createElement("div",{className:C({disabled:l,"textarea-outline":!0,"ant-input-focused":x,textareaContainer:!0,focus:x,invalid:w})},n.createElement(O,{footer:s,textareaProps:r})))},H=({toolInstance:e,imgIndex:t,dispatch:a,triggerEventAfterIndexChanged:x,step:c,stepList:w,basicResultList:g})=>{var u,l;const[i,v]=d([]),[E,T]=d(0),[,h]=d(0),P=r=>{const s=(r+1)%i.length;p(s)},p=r=>{setTimeout(()=>{const s=document.getElementById(`textInput-${r}`);s&&(T(r),s.focus(),s.select(),s.scrollIntoView({behavior:"smooth",block:"center"}))})};_(()=>{e&&(v(j(e.config.configList)),e.singleOn("valueUpdated",()=>{h(r=>r+1)}))},[e]);const m=(r,s)=>{e.updateTextValue(s,r)};_(()=>{t>-1&&x&&p(0)},[t]);const f=(l=(u=e.textList[0])==null?void 0:u.value)!=null?l:{},b=()=>{a(q(!0))},y=B.getStepConfig(w,c).dataSourceStep>0&&g.length===0;return n.createElement("div",{className:"textToolOperationMenu"},i.map((r,s)=>n.createElement(k,{config:r,key:r.key,index:s,result:f,updateText:m,switchToNextTextarea:P,hasMultiple:i.length>1,focus:E===s,onNext:b,disabled:y})))};function J(e){return{toolInstance:e.annotation.toolInstance,imgIndex:e.annotation.imgIndex,step:e.annotation.step,basicResultList:e.annotation.basicResultList,stepList:e.annotation.stepList,triggerEventAfterIndexChanged:e.annotation.triggerEventAfterIndexChanged}}var Q=R(J,null,null,{context:M})(H);export{k as SingleTextInput,O as TextareaWithFooter,Q as default};
+import React, { useState, useEffect, useRef } from 'react';
+import { connect } from 'react-redux';
+import { cloneDeep } from 'lodash';
+import { classnames } from '../../../../utils/index.js';
+import { Input } from 'antd/es';
+import { cKeyCode } from '@labelbee/lb-annotation';
+import { PageForward } from '../../../../store/annotation/actionCreators.js';
+import { ConfigUtils } from '../../../../utils/ConfigUtils.js';
+import { useTranslation } from 'react-i18next';
+import { LabelBeeContext } from '../../../../store/ctx.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const EKeyCode = cKeyCode.default;
+const syntheticEventStopPagination = (e) => {
+  e.stopPropagation();
+  e.nativeEvent.stopPropagation();
+  e.nativeEvent.stopImmediatePropagation();
+};
+const TextareaWithFooter = (props) => {
+  const {textareaProps, footer} = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Input.TextArea, __spreadValues({
+    bordered: false,
+    rows: 6,
+    onKeyDown: syntheticEventStopPagination,
+    onKeyUp: syntheticEventStopPagination
+  }, textareaProps)), /* @__PURE__ */ React.createElement("div", {
+    className: classnames({
+      textAreaLength: true
+    })
+  }, footer));
+};
+const SingleTextInput = (props) => {
+  var _a;
+  const ref = useRef(null);
+  const [textAreaFocus, setTextAreaFocus] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const {t} = useTranslation();
+  const {disabled, config, result, updateText, index, switchToNextTextarea, hasMultiple, onNext} = props;
+  const {maxLength} = config;
+  const value = result ? result[config.key] : "";
+  const textLength = (_a = value == null ? void 0 : value.length) != null ? _a : 0;
+  const updateTextWithKey = (newVal) => {
+    if (updateText) {
+      updateText(newVal, config.key);
+      if (config.required) {
+        setInvalid(!newVal);
+      }
+    }
+  };
+  const tabToSwitchEnabled = hasMultiple && switchToNextTextarea;
+  const textareaProps = {
+    id: `textInput-${index}`,
+    ref,
+    disabled,
+    value,
+    maxLength,
+    autoSize: {minRows: 2, maxRows: 6},
+    onChange: (e) => {
+      const value2 = e.target.value;
+      updateTextWithKey(value2);
+    },
+    onFocus: () => {
+      setTextAreaFocus(true);
+    },
+    onBlur: (e) => {
+      setTextAreaFocus(false);
+      if (config.required) {
+        setInvalid(!e.target.value);
+      }
+    },
+    style: {
+      resize: "none",
+      wordBreak: "break-all"
+    },
+    onKeyDownCapture: (e) => {
+      if (e.ctrlKey && e.keyCode === EKeyCode.Enter) {
+        if (onNext) {
+          onNext();
+        }
+        e.preventDefault();
+      }
+      if (e.keyCode === EKeyCode.Tab && tabToSwitchEnabled) {
+        e.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+        switchToNextTextarea(index);
+      }
+      e.nativeEvent.stopPropagation();
+    }
+  };
+  const TextareaFooter = /* @__PURE__ */ React.createElement("div", {
+    className: "textAreaFooter"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "hotkeyTip"
+  }, tabToSwitchEnabled && /* @__PURE__ */ React.createElement("span", null, `[${t("Switch")}]Tab`), /* @__PURE__ */ React.createElement("span", null, `[${t("TurnPage")}]Ctrl+Enter`)), /* @__PURE__ */ React.createElement("div", {
+    className: "wordCount"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: textLength >= maxLength ? "warning" : ""
+  }, textLength), "/", /* @__PURE__ */ React.createElement("span", null, maxLength)));
+  useEffect(() => {
+    if (disabled) {
+      setTextAreaFocus(false);
+    }
+  }, [disabled]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "textField"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "label"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: classnames({required: config.required})
+  }, config.label), /* @__PURE__ */ React.createElement("i", {
+    className: classnames({clearText: true, disabled}),
+    onClick: () => {
+      if (disabled) {
+        return;
+      }
+      updateTextWithKey("");
+    }
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: classnames({
+      disabled,
+      "textarea-outline": true,
+      "ant-input-focused": textAreaFocus,
+      textareaContainer: true,
+      focus: textAreaFocus,
+      invalid
+    })
+  }, /* @__PURE__ */ React.createElement(TextareaWithFooter, {
+    footer: TextareaFooter,
+    textareaProps
+  })));
+};
+const TextToolSidebar = ({
+  toolInstance,
+  imgIndex,
+  dispatch,
+  triggerEventAfterIndexChanged,
+  step,
+  stepList,
+  basicResultList
+}) => {
+  var _a, _b;
+  const [configList, setConfigList] = useState([]);
+  const [focusIndex, setFocusIndex] = useState(0);
+  const [, forceRender] = useState(0);
+  const switchToNextTextarea = (currentIndex) => {
+    const nextIndex = (currentIndex + 1) % configList.length;
+    textareaFocus(nextIndex);
+  };
+  const textareaFocus = (index) => {
+    setTimeout(() => {
+      const textarea = document.getElementById(`textInput-${index}`);
+      if (textarea) {
+        setFocusIndex(index);
+        textarea.focus();
+        textarea.select();
+        textarea.scrollIntoView({behavior: "smooth", block: "center"});
+      }
+    });
+  };
+  useEffect(() => {
+    if (toolInstance) {
+      setConfigList(cloneDeep(toolInstance.config.configList));
+      toolInstance.singleOn("valueUpdated", () => {
+        forceRender((s) => s + 1);
+      });
+    }
+  }, [toolInstance]);
+  const updateText = (v, k) => {
+    toolInstance.updateTextValue(k, v);
+  };
+  useEffect(() => {
+    if (imgIndex > -1 && triggerEventAfterIndexChanged) {
+      textareaFocus(0);
+    }
+  }, [imgIndex]);
+  const result = (_b = (_a = toolInstance.textList[0]) == null ? void 0 : _a.value) != null ? _b : {};
+  const onNext = () => {
+    dispatch(PageForward(true));
+  };
+  const stepConfig = ConfigUtils.getStepConfig(stepList, step);
+  const disabled = stepConfig.dataSourceStep > 0 && basicResultList.length === 0;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "textToolOperationMenu"
+  }, configList.map((i, index) => /* @__PURE__ */ React.createElement(SingleTextInput, {
+    config: i,
+    key: i.key,
+    index,
+    result,
+    updateText,
+    switchToNextTextarea,
+    hasMultiple: configList.length > 1,
+    focus: focusIndex === index,
+    onNext,
+    disabled
+  })));
+};
+function mapStateToProps(state) {
+  return {
+    toolInstance: state.annotation.toolInstance,
+    imgIndex: state.annotation.imgIndex,
+    step: state.annotation.step,
+    basicResultList: state.annotation.basicResultList,
+    stepList: state.annotation.stepList,
+    triggerEventAfterIndexChanged: state.annotation.triggerEventAfterIndexChanged
+  };
+}
+var TextToolSidebar$1 = connect(mapStateToProps, null, null, {context: LabelBeeContext})(TextToolSidebar);
+
+export { SingleTextInput, TextareaWithFooter, TextToolSidebar$1 as default };
+//# sourceMappingURL=index.js.map

package/es/views/MainView/sidebar/TextToolSidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/MainView/sidebar/TextToolSidebar/index.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, FocusEvent } from 'react';\nimport { connect } from 'react-redux';\nimport { AppState } from '@/store';\nimport { cloneDeep } from 'lodash';\nimport { classnames } from '@/utils';\nimport { Input } from 'antd/es';\nimport { cKeyCode } from '@labelbee/lb-annotation';\nimport { PageForward } from '@/store/annotation/actionCreators';\nimport { ConfigUtils } from '@/utils/ConfigUtils';\nimport { IStepInfo } from '@/types/step';\nimport TextToolOperation from '@labelbee/lb-annotation/dist/types/core/toolOperation/TextToolOperation';\nimport { useTranslation } from 'react-i18next';\nimport { LabelBeeContext } from '@/store/ctx';\n\nconst EKeyCode = cKeyCode.default;\n\nconst syntheticEventStopPagination = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n  e.stopPropagation();\n  e.nativeEvent.stopPropagation();\n  e.nativeEvent.stopImmediatePropagation();\n};\n\ninterface ITextareaWithFooterProps {\n  textareaProps?: any;\n  footer?: any;\n}\n\nexport const TextareaWithFooter = (props: ITextareaWithFooterProps) => {\n  const { textareaProps, footer } = props;\n\n  return (\n    <>\n      <Input.TextArea\n        bordered={false}\n        rows={6}\n        onKeyDown={syntheticEventStopPagination}\n        onKeyUp={syntheticEventStopPagination}\n        {...textareaProps}\n      />\n      <div\n        className={classnames({\n          textAreaLength: true,\n        })}\n      >\n        {footer}\n      </div>\n    </>\n  );\n};\n\ninterface IProps {\n  dispatch: Function;\n  toolInstance: TextToolOperation;\n  imgIndex: number;\n  triggerEventAfterIndexChanged: boolean;\n  step: number;\n  stepList: IStepInfo[];\n  basicResultList: any[];\n}\n\ninterface IConfigListItem {\n  label: string;\n  key: string;\n  required: boolean;\n  default: string;\n  maxLength: number;\n}\n\nexport const SingleTextInput = (props: any) => {\n  const ref = useRef(null);\n  const [textAreaFocus, setTextAreaFocus] = useState(false);\n  const [invalid, setInvalid] = useState(false);\n  const { t } = useTranslation();\n\n  const { disabled, config, result, updateText, index, switchToNextTextarea, hasMultiple, onNext } =\n    props;\n  const { maxLength } = config;\n\n  const value = result ? result[config.key] : '';\n  const textLength = value?.length ?? 0;\n\n  const updateTextWithKey = (newVal: string) => {\n    if (updateText) {\n      updateText(newVal, config.key);\n      if (config.required) {\n        setInvalid(!newVal);\n      }\n    }\n  };\n\n  const tabToSwitchEnabled = hasMultiple && switchToNextTextarea;\n\n  const textareaProps = {\n    id: `textInput-${index}`,\n    ref,\n    disabled,\n    value,\n    maxLength,\n    autoSize: { minRows: 2, maxRows: 6 },\n    onChange: (e: FocusEvent<HTMLTextAreaElement>) => {\n      const value = e.target.value;\n      updateTextWithKey(value);\n    },\n    onFocus: () => {\n      setTextAreaFocus(true);\n    },\n    onBlur: (e: FocusEvent<HTMLTextAreaElement>) => {\n      setTextAreaFocus(false);\n      if (config.required) {\n        setInvalid(!e.target.value);\n      }\n    },\n    style: {\n      resize: 'none',\n      wordBreak: 'break-all',\n    },\n    onKeyDownCapture: (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.keyCode === EKeyCode.Enter) {\n        if (onNext) {\n          onNext();\n        }\n        e.preventDefault();\n      }\n\n      if (e.keyCode === EKeyCode.Tab && tabToSwitchEnabled) {\n        e.preventDefault();\n        e.nativeEvent.stopImmediatePropagation();\n        switchToNextTextarea(index);\n      }\n\n      e.nativeEvent.stopPropagation();\n    },\n  };\n\n  const TextareaFooter = (\n    <div className='textAreaFooter'>\n      <div className='hotkeyTip'>\n        {tabToSwitchEnabled && <span>{`[${t('Switch')}]Tab`}</span>}\n        <span>{`[${t('TurnPage')}]Ctrl+Enter`}</span>\n      </div>\n      <div className='wordCount'>\n        <span className={textLength >= maxLength ? 'warning' : ''}>{textLength}</span>/\n        <span>{maxLength}</span>\n      </div>\n    </div>\n  );\n\n  useEffect(() => {\n    if (disabled) {\n      setTextAreaFocus(false);\n    }\n  }, [disabled]);\n\n  return (\n    <div className='textField'>\n      <div className='label'>\n        <span className={classnames({ required: config.required })}>{config.label}</span>\n        <i\n          className={classnames({ clearText: true, disabled: disabled })}\n          onClick={() => {\n            if (disabled) {\n              return;\n            }\n            updateTextWithKey('');\n          }}\n        />\n      </div>\n      <div\n        className={classnames({\n          disabled,\n          'textarea-outline': true,\n          'ant-input-focused': textAreaFocus,\n          textareaContainer: true,\n          focus: textAreaFocus,\n          invalid: invalid,\n        })}\n      >\n        <TextareaWithFooter footer={TextareaFooter} textareaProps={textareaProps} />\n      </div>\n    </div>\n  );\n};\n\nconst TextToolSidebar: React.FC<IProps> = ({\n  toolInstance,\n  imgIndex,\n  dispatch,\n  triggerEventAfterIndexChanged,\n  step,\n  stepList,\n  basicResultList,\n}) => {\n  const [configList, setConfigList] = useState<IConfigListItem[]>([]);\n  const [focusIndex, setFocusIndex] = useState(0);\n  const [, forceRender] = useState(0);\n\n  const switchToNextTextarea = (currentIndex: number) => {\n    const nextIndex = (currentIndex + 1) % configList.length;\n    textareaFocus(nextIndex);\n  };\n\n  const textareaFocus = (index: number) => {\n    setTimeout(() => {\n      const textarea = document.getElementById(`textInput-${index}`) as HTMLTextAreaElement;\n      if (textarea) {\n        setFocusIndex(index);\n        textarea.focus();\n        textarea.select();\n        textarea.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n    });\n  };\n\n  useEffect(() => {\n    if (toolInstance) {\n      setConfigList(cloneDeep(toolInstance.config.configList));\n      toolInstance.singleOn('valueUpdated', () => {\n        forceRender((s) => s + 1);\n      });\n    }\n  }, [toolInstance]);\n\n  const updateText = (v: string, k: string) => {\n    toolInstance.updateTextValue(k, v);\n  };\n\n  useEffect(() => {\n    if (imgIndex > -1 && triggerEventAfterIndexChanged) {\n      textareaFocus(0);\n    }\n  }, [imgIndex]);\n\n  const result = toolInstance.textList[0]?.value ?? {};\n\n  const onNext = () => {\n    dispatch(PageForward(true));\n  };\n\n  const stepConfig = ConfigUtils.getStepConfig(stepList, step);\n  const disabled = stepConfig.dataSourceStep > 0 && basicResultList.length === 0;\n\n  return (\n    <div className='textToolOperationMenu'>\n      {configList.map((i, index) => (\n        <SingleTextInput\n          config={i}\n          key={i.key}\n          index={index}\n          result={result}\n          updateText={updateText}\n          switchToNextTextarea={switchToNextTextarea}\n          hasMultiple={configList.length > 1}\n          focus={focusIndex === index}\n          onNext={onNext}\n          disabled={disabled}\n        />\n      ))}\n    </div>\n  );\n};\n\nfunction mapStateToProps(state: AppState) {\n  return {\n    toolInstance: state.annotation.toolInstance,\n    imgIndex: state.annotation.imgIndex,\n    step: state.annotation.step,\n    basicResultList: state.annotation.basicResultList,\n    stepList: state.annotation.stepList,\n    triggerEventAfterIndexChanged: state.annotation.triggerEventAfterIndexChanged,\n  };\n}\n\nexport default connect(mapStateToProps, null, null, { context: LabelBeeContext })(TextToolSidebar);\n"],"names":[],"mappings":"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"}