@chlp-tech/rpa-ui 0.0.10 → 0.0.11-beta.10

package/dist/publish-account2/index.js

@@ -0,0 +1,144 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useState, useEffect } from "react";
+import { Avatar, Row, Col, Popover } from 'antd';
+import classNames from 'classnames';
+import TextEllipsis from "../text-ellipsis";
+import MediaAccountPreview from "../MediaAccountPreview";
+import Fb from "./imgs/fb.svg";
+import Ins from "./imgs/ins.svg";
+import Tk from "./imgs/tk.svg";
+import Yt from "./imgs/yt.svg";
+import Tt from "./imgs/tt.svg";
+import CloseIcon from "./imgs/close.svg";
+import styles from "./index.module.less";
+var AccountBlock = function AccountBlock(_ref) {
+  var _account$remark;
+  var active = _ref.active,
+    onClick = _ref.onClick,
+    account = _ref.account,
+    onErrorClose = _ref.onErrorClose,
+    width = _ref.width;
+  var isError = account.error;
+  return /*#__PURE__*/React.createElement(Popover, {
+    rootClassName: styles.previewPopBox,
+    content: /*#__PURE__*/React.createElement(MediaAccountPreview, {
+      nickname: account.label,
+      remark: account.remark,
+      language: account.language,
+      country: account.country,
+      width: 450,
+      ownerUsername: account.ownerUserName
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['account-wrap'], _defineProperty(_defineProperty({}, styles['error'], isError), styles['active'], active)),
+    onClick: onClick,
+    style: {
+      width: width,
+      background: active && isError ? '#FEECEC' : active && !isError ? '#E9F1FF' : '#F5F7FA'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['flex']
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: 24,
+    src: account.icon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['account-wrap_text'], " ").concat(isError ? styles['error-text'] : active ? styles['active'] : ''),
+    style: {
+      color: active && isError ? '#FA4441' : active && !isError ? '#004FD3' : '#142A51'
+    }
+  }, account.label), account.remark && ((_account$remark = account.remark) === null || _account$remark === void 0 ? void 0 : _account$remark.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: styles.remarkText
+  }, /*#__PURE__*/React.createElement(TextEllipsis, {
+    lines: 1,
+    showTooltip: false
+  }, account.remark)), isError && /*#__PURE__*/React.createElement("img", {
+    src: CloseIcon,
+    alt: "",
+    className: "".concat(styles['close-icon']),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (onErrorClose) {
+        onErrorClose(account);
+      }
+    }
+  }))));
+};
+var PublishAccount = function PublishAccount(_ref2) {
+  var accounts = _ref2.accounts,
+    onAccountSelect = _ref2.onAccountSelect,
+    onErrorClose = _ref2.onErrorClose,
+    boxWidth = _ref2.boxWidth;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedAccount = _useState2[0],
+    setSelectedAccount = _useState2[1];
+  var getFirstAvailableAccount = function getFirstAvailableAccount() {
+    for (var _i = 0, _arr = ['fb', 'ins', 'tk', 'yt']; _i < _arr.length; _i++) {
+      var platform = _arr[_i];
+      if (accounts[platform] && accounts[platform].length > 0) {
+        return accounts[platform][0];
+      }
+    }
+    return null;
+  };
+  useEffect(function () {
+    var firstAccount = getFirstAvailableAccount();
+    if (firstAccount) {
+      setSelectedAccount(firstAccount);
+      onAccountSelect(firstAccount);
+    }
+  }, [accounts]);
+  var renderAccounts = function renderAccounts(platform, icon) {
+    var _accounts$platform;
+    if (!accounts[platform] || accounts[platform].length === 0) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Row, {
+      gutter: 12,
+      style: {
+        marginBottom: 12
+      }
+    }, /*#__PURE__*/React.createElement(Col, {
+      span: 2
+    }, /*#__PURE__*/React.createElement("img", {
+      src: icon,
+      alt: platform
+    })), /*#__PURE__*/React.createElement(Col, {
+      span: 22
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 12
+      }
+    }, (_accounts$platform = accounts[platform]) === null || _accounts$platform === void 0 ? void 0 : _accounts$platform.map(function (account) {
+      return /*#__PURE__*/React.createElement(AccountBlock, {
+        key: account.value,
+        width: boxWidth,
+        active: (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.value) === account.value,
+        onClick: function onClick() {
+          setSelectedAccount(account);
+          onAccountSelect(account);
+        },
+        onErrorClose: onErrorClose,
+        account: account
+      });
+    }))));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderAccounts('fb', Fb), renderAccounts('ins', Ins), renderAccounts('tk', Tk), renderAccounts('yt', Yt), renderAccounts('tt', Tt));
+};
+var AccountComponent = {
+  PublishAccount: PublishAccount,
+  AccountBlock: AccountBlock
+};
+export default AccountComponent;

package/dist/publish-account2/index.module.less

@@ -0,0 +1,83 @@
+.account-wrap {
+  padding: 6px 8px 6px 8px;
+  background: #F5F7FA;
+  border-radius: 8px;
+  border: 1px solid #F5F7FA;
+  cursor: pointer;
+  display: inline-block;
+
+  &.error {
+    border-color: #FA4441;
+
+    &.error-active {
+      background: #FEECEC;
+
+      &_text {
+        color: #FA4441;
+      }
+    }
+  }
+
+  &:hover {
+    &.error .close-icon {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .close-icon {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s;
+  }
+
+  &.active {
+    border-color: #004FD3;
+    background: #E9F1FF;
+  }
+
+  &_icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 60%;
+  }
+
+  &_text {
+    flex: 1;
+    font-weight: 500;
+    font-size: 14px;
+    color: #142A51;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    overflow: hidden;
+    transition: all 0.3s;
+    // 单行省略
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &.active {
+      color: #004FD3;
+    }
+  }
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.remarkText {
+  width: 80px;
+  font-size: 12px;
+  color: #9EA7B5;
+}
+
+.previewPopBox {
+  :global {
+    .ant-popover-inner {
+      padding: 0px !important;
+    }
+  }
+}

package/dist/release-video-card/index.d.ts

@@ -19,6 +19,7 @@ interface Props {
     isAd?: boolean;
     id: string | number;
     onDelete?: (id: string | number) => void;
+    onPauseOrStart?: (id: string | number) => void;
     mediaInfo: {
         url: string[];
         type: string;

package/dist/release-video-card/index.js

@@ -110,6 +110,25 @@ var MediaCardList = function MediaCardList(props) {
 };
 var ReleaseVideoCard = function ReleaseVideoCard(props) {
   var _props$mediaInfo, _props$countData$view, _props$countData, _props$countData$like, _props$countData2, _props$countData$comm, _props$countData3, _ref2, _props$editComponent, _props$detailComponen;
+  var dropMenus = function dropMenus() {
+    var list = [];
+    // if ([1, 6].includes(props.status)) {
+    //   list.push({
+    //     label: <div>{props.status === 1 ? '暂停' : '启用'}</div>,
+    //     key: 'pause',
+    //     onClick: () => props?.onPauseOrStart?.(props.id),
+    //   })
+    // }
+    list.push({
+      label: '删除',
+      key: 'delete',
+      onClick: function onClick() {
+        var _props$onDelete;
+        return props === null || props === void 0 || (_props$onDelete = props.onDelete) === null || _props$onDelete === void 0 ? void 0 : _props$onDelete.call(props, props.id);
+      }
+    });
+    return list;
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: styles['card']
   }, /*#__PURE__*/React.createElement("div", {
@@ -194,16 +213,10 @@ var ReleaseVideoCard = function ReleaseVideoCard(props) {
       marginRight: 12,
       cursor: 'pointer'
     }
-  }, [0, 1].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$editComponent = props.editComponent) !== null && _props$editComponent !== void 0 ? _props$editComponent : /*#__PURE__*/React.createElement("span", null, "\u7F16\u8F91")) : [2, 3].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$detailComponen = props.detailComponent) !== null && _props$detailComponen !== void 0 ? _props$detailComponen : /*#__PURE__*/React.createElement("span", null, "\u8BE6\u60C5")) : null), /*#__PURE__*/React.createElement(Dropdown, {
+  }, [0, 1].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$editComponent = props.editComponent) !== null && _props$editComponent !== void 0 ? _props$editComponent : /*#__PURE__*/React.createElement("span", null, "\u7F16\u8F91")) : [2, 3].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$detailComponen = props.detailComponent) !== null && _props$detailComponen !== void 0 ? _props$detailComponen : /*#__PURE__*/React.createElement("span", null, "\u8BE6\u60C5")) : null), [0, 1, 6].includes(props.status) ? /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
     menu: {
-      items: [{
-        label: '删除',
-        key: 'delete',
-        onClick: function onClick() {
-          return (props === null || props === void 0 ? void 0 : props.onDelete) && props.onDelete(props.id);
-        }
-      }]
+      items: dropMenus()
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -212,7 +225,7 @@ var ReleaseVideoCard = function ReleaseVideoCard(props) {
   }, /*#__PURE__*/React.createElement(Image, {
     src: More,
     preview: false
-  }))))), props.isNew && /*#__PURE__*/React.createElement("div", {
+  }))) : null)), props.isNew && /*#__PURE__*/React.createElement("div", {
     className: styles['new-position']
   }, /*#__PURE__*/React.createElement(Image, {
     src: New,

package/dist/release-video-card/index.module.less

@@ -24,6 +24,7 @@
     text-align: left;
     font-style: normal;
     flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-around;

package/dist/text-ellipsis/index.js

@@ -27,7 +27,7 @@ var TextEllipsis = function TextEllipsis(_ref) {
         var parentElement = parentRef.current;
         var parentWidth = parentElement.clientWidth;
         var textWidth = textElement.scrollWidth;
-        setIsTruncated(textWidth > parentWidth);
+        setIsTruncated(textWidth >= parentWidth);
       }
     };
     checkTruncation();
@@ -41,17 +41,21 @@ var TextEllipsis = function TextEllipsis(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['text-ellipsis'],
     ref: parentRef,
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: textRef,
     style: {
       display: '-webkit-box',
+      width: 'max-content',
+      maxWidth: '100%',
       WebkitBoxOrient: 'vertical',
       WebkitLineClamp: lines,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      width: '100%',
       wordBreak: 'break-all'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: textRef
   }, children)));
 };
 export default TextEllipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chlp-tech/rpa-ui",
-  "version": "0.0.10",
+  "version": "0.0.11-beta.10",
   "description": "rpa-ui",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.18.0",
-    "antd": ">=4.18.0",
+    "antd": ">=5.25.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@webav/av-cliper": "^1.0.11",
+    "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "js-md5": "^0.8.3",
     "styled-components": "^6.1.12"