ydb-components-material 0.1.98 → 0.1.99

package/es/components/message/index.d.ts

@@ -4,13 +4,12 @@ export interface MessageProps {
     /**
      * 类型
      */
-    type?: "error" | "warning" | "success";
     title: string;
     text: string;
-    goBack?: () => void;
-    retry?: () => void;
-    skip?: () => void;
-    close: () => void;
+    cancelText: string;
+    okText: string;
+    cancel?: () => void;
+    ok?: () => void;
 }
 declare const Message: React.FC<MessageProps>;
 export default Message;

package/es/components/message/index.js

@@ -1,51 +1,29 @@
 import * as React from 'react';
-import ErrorIcon from "./icons/icon_error.svg";
-import WarningIcon from "./icons/icon_warning.svg";
 import "./index.scss";
 var Message = function Message(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'error' : _ref$type,
-    title = _ref.title,
+  var title = _ref.title,
     text = _ref.text,
-    goBack = _ref.goBack,
-    retry = _ref.retry,
-    skip = _ref.skip,
-    close = _ref.close;
-  console.log('goBack', goBack, type);
-  var icon = type === 'error' ? ErrorIcon : WarningIcon;
+    cancelText = _ref.cancelText,
+    okText = _ref.okText,
+    cancel = _ref.cancel,
+    ok = _ref.ok;
   return /*#__PURE__*/React.createElement("div", {
     className: "message"
   }, /*#__PURE__*/React.createElement("div", {
     className: "content"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "icon",
-    src: icon,
-    alt: "",
-    onClick: function onClick() {
-      return goBack();
-    }
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: "text"
   }, text), /*#__PURE__*/React.createElement("div", {
     className: "btns"
-  }, goBack && /*#__PURE__*/React.createElement("div", {
-    className: "blue_btn btn",
-    onClick: goBack
-  }, "\u8FD4\u56DE\u4FEE\u6539"), retry && skip && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "black_btn",
-    onClick: retry
-  }, "\u518D\u8BD5\u4E00\u6B21"), /*#__PURE__*/React.createElement("div", {
-    className: "blue_btn",
-    onClick: skip
-  }, "\u4EBA\u5DE5\u5BA1\u6838")), skip && close && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "black_btn btn",
-    onClick: skip
-  }, "\u5FFD\u7565\uFF0C\u7EE7\u7EED\u63D0\u4EA4"), /*#__PURE__*/React.createElement("div", {
-    className: "blue_btn btn",
-    onClick: close
-  }, "\u6211\u518D\u60F3\u60F3")))));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left_btn btn",
+    onClick: cancel
+  }, cancelText), /*#__PURE__*/React.createElement("div", {
+    className: "right_btn btn",
+    onClick: ok
+  }, okText))));
 };
 Message.displayName = 'Message';
 export default Message;

package/es/components/message/index.scss

@@ -19,47 +19,50 @@
     justify-content: center;
     align-items: center;
 
-    .icon {
-      width: 32px;
-      height: 32px;
-      margin-bottom: 8px;
-      margin-top: 32px;
-    }
-
     .title {
+      margin-top: 12px;
       font-size: 16px;
-      color: #FF6237;
-      margin-bottom: 16px;
+      width: 90%;
+      color: #333333;
+      margin-bottom: 12px;
+      font-weight: 400;
     }
 
     .text {
       font-size: 14px;
-      color: #333333;
+      color: #666666;
       margin: 0 29px 17px;
       text-align: center;
     }
 
     .btns {
-      border-top: 1px solid rgba(0, 0, 0, 0.102);
       width: 100%;
       display: flex;
       flex: 1;
       height: 56px;
+      gap: 20px;
+      justify-content: center;
+      margin-bottom: 12px;
+
 
       .btn {
-        font-size: 16px;
-        width: 100%;
-        height: 56px;
-        line-height: 56px;
+        font-size: 12px;
+        padding: 0px 12px;
+        height: 28px;
+        line-height: 28px;
         text-align: center;
+        border-radius: 3px;
       }
 
-      .blue_btn {
-        color: #1678FF;
+      .left_btn {
+        color: #ffffff;
+        background-color: #3e71f7;
+
       }
 
-      .left_btn {
-        border-right: 1px solid rgba(0, 0, 0, 0.102);
+      .right_btn {
+        border: 1px solid #3e71f7;
+        color: #3e71f7;
       }
     }
 

package/es/components/scene-tree/index.js

@@ -1,4 +1,6 @@
 import _Checkbox from "@alifd/next/es/checkbox";
+import _Balloon from "@alifd/next/es/balloon";
+import _Icon from "@alifd/next/es/icon";
 import _extends from "@babel/runtime/helpers/extends";
 import _Radio from "@alifd/next/es/radio";
 function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -64,16 +66,40 @@ var SceneTree = function SceneTree(_ref) {
     var targetNodeOfCurTree = _findNodeById(curTree, targetId, targetPId);
     // 删除当前题目的子题目先 可能还留有上次带出来的题目
     targetNodeOfCurTree.children = [];
+    // 如果不是初始化的时候就禁用了 重置一下禁用状态和
+    targetNodeOfOriginTree.options.forEach(function (option) {
+      if (option.preDisabled !== true) {
+        option.disabled = false;
+        option.showMutuallyExclusivePrompt = false;
+      }
+    });
     console.log('targetNodeOfCurTree----', targetNodeOfCurTree);
     // 可能是个多选题 val会是个数组
     if (Array.isArray(val)) {
       if (val.length) {
         var optionNameList = [];
         val.forEach(function (item) {
+          // 找到当前选项在当前树中
+          var curOption = targetNodeOfCurTree.options.find(function (option) {
+            return option.id === item;
+          });
+          curOption.showMutuallyExclusivePrompt = true;
           // 找到对应的选项在源数据中
           var targetOption = targetNodeOfOriginTree.options.find(function (option) {
             return option.id === item;
           });
+          // 如果当前选项有互斥选项，找出来禁用掉
+          if (Array.isArray(targetOption.mutuallyExclusiveOptions) && targetOption.mutuallyExclusiveOptions.length) {
+            targetOption.mutuallyExclusiveOptions.forEach(function (mutuallyExclusiveOption) {
+              var targetMutuallyExclusiveOption = targetNodeOfCurTree.options.find(function (option) {
+                return option.id === mutuallyExclusiveOption;
+              });
+              console.log('targetMutuallyExclusiveOption--', targetMutuallyExclusiveOption);
+              if (targetMutuallyExclusiveOption) {
+                targetMutuallyExclusiveOption.disabled = true;
+              }
+            });
+          }
           optionNameList.push(targetOption.name);
           // 拿到这个选中的选项会带出来的子题目 虽然是个数组。但是只有一项 只会带出来一个题目
           var targetNodeChildList = (targetOption.children || []).filter(Boolean).map(function (n) {
@@ -142,6 +168,13 @@ var SceneTree = function SceneTree(_ref) {
     setCurTree(_extends({}, curTree));
     valChange(curTree);
   };
+  var trigger = function trigger(style) {
+    return /*#__PURE__*/React.createElement(_Icon, {
+      type: "help",
+      size: "xs",
+      style: style
+    });
+  };
   var _TreeNode = function TreeNode(_ref2) {
     var node = _ref2.node,
       otherStyle = _ref2.style;
@@ -161,7 +194,19 @@ var SceneTree = function SceneTree(_ref) {
       className: !isPC ? 'title' : 'title_pc'
     }, /*#__PURE__*/React.createElement("span", {
       className: "required"
-    }, "*"), node.title, !!+node.isMultipleChoice && '(多选)'), !+node.isMultipleChoice ? /*#__PURE__*/React.createElement(RadioGroup, {
+    }, "*"), node.title, !!+node.isMultipleChoice && '(多选)', node.description && /*#__PURE__*/React.createElement(_Balloon, {
+      v2: true,
+      trigger: trigger({
+        color: '#666',
+        marginTop: '-4px',
+        marginLeft: '5px'
+      }),
+      triggerType: "click",
+      align: "t",
+      arrowPointToCenter: true,
+      title: "",
+      delay: 20
+    }, node.description)), !+node.isMultipleChoice ? /*#__PURE__*/React.createElement(RadioGroup, {
       className: isPC && 'options_pc',
       value: node.value,
       onChange: onValChange,
@@ -169,32 +214,76 @@ var SceneTree = function SceneTree(_ref) {
     }, node.options.map(function (option, index) {
       console.log('optionsVal', option.value);
       var isOverFlow = option.name.length > 4;
-      return /*#__PURE__*/React.createElement(_Radio, {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          marginTop: index > 0 ? '10px' : '',
+          flexWrap: 'wrap'
+        }
+      }, /*#__PURE__*/React.createElement(_Radio, {
         id: option.pid + "+" + node.pid,
         key: option.id + node.pid + option.value + index,
         value: option.id,
-        disabled: node.disabled,
-        style: isOverFlow && index > 0 ? {
-          width: '100%',
-          marginTop: '10px'
-        } : undefined
-      }, option.name);
+        disabled: option.disabled
+      }, option.name), option.description && /*#__PURE__*/React.createElement(_Balloon, {
+        v2: true,
+        trigger: trigger({
+          color: '#666',
+          left: '-10px',
+          position: 'relative',
+          top: '1px'
+        }),
+        triggerType: "click",
+        align: "t",
+        arrowPointToCenter: true,
+        title: "",
+        delay: 20
+      }, option.description));
     })) : /*#__PURE__*/React.createElement(_Checkbox.Group, {
       value: node.value,
       onChange: onValChange,
       className: isPC && 'options_pc'
     }, node.options.map(function (option, index) {
-      var isOverFlow = option.name.length > 4;
-      return /*#__PURE__*/React.createElement(_Checkbox, {
+      var showMutualExclusionPrompt = option.mutualExclusionPrompt;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          marginTop: index > 0 ? '10px' : '',
+          flexWrap: 'wrap'
+        }
+      }, /*#__PURE__*/React.createElement(_Checkbox, {
         id: option.pid + "+" + node.pid,
         key: option.id + node.pid + option.value + index,
         value: option.id,
-        disabled: node.disabled,
-        style: isOverFlow && index > 0 ? {
-          width: '100%',
-          marginTop: '10px'
-        } : undefined
-      }, option.name);
+        disabled: option.disabled
+      }, option.name), option.description && /*#__PURE__*/React.createElement(_Balloon, {
+        v2: true,
+        trigger: trigger({
+          color: '#666',
+          left: '-10px',
+          position: 'relative',
+          top: '1px'
+        }),
+        triggerType: "click",
+        align: "t",
+        arrowPointToCenter: true,
+        title: "",
+        delay: 20
+      }, node.description), option.showMutuallyExclusivePrompt && option.mutualExclusionPrompt && /*#__PURE__*/React.createElement("div", {
+        className: "mutualExclusionPrompt"
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "prompt",
+        size: "xs",
+        style: {
+          color: '#FF6237',
+          marginRight: '4px'
+        }
+      }), option.mutualExclusionPrompt));
     }))), node.children && (node.children || []).map(function (item, index) {
       var _node$children, _node$children2, _node$children3, _node$children4;
       console.log('----', ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) > 1 && index !== ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) - 1);

package/es/components/scene-tree/index.scss

@@ -12,6 +12,13 @@
     margin-bottom: 16px;
   }
 
+  .mutualExclusionPrompt {
+    color: #FF6237;
+    font-size: 12px;
+    margin-top: 3px;
+    width: 100%;
+  }
+
   .title_pc {
     .required {
       color: #FF3D3D;

package/es/style.js

@@ -2,6 +2,6 @@ import '@alifd/next/es/icon/style';
 import '@alifd/next/es/message/style';
 import '@alifd/next/es/radio/style';
 import '@alifd/next/es/checkbox/style';
-import 'antd/es/cascader/style';
 import '@alifd/next/es/balloon/style';
+import 'antd/es/cascader/style';
 import './index.scss';

package/lib/components/message/index.d.ts

@@ -4,13 +4,12 @@ export interface MessageProps {
     /**
      * 类型
      */
-    type?: "error" | "warning" | "success";
     title: string;
     text: string;
-    goBack?: () => void;
-    retry?: () => void;
-    skip?: () => void;
-    close: () => void;
+    cancelText: string;
+    okText: string;
+    cancel?: () => void;
+    ok?: () => void;
 }
 declare const Message: React.FC<MessageProps>;
 export default Message;

package/lib/components/message/index.js

@@ -1,57 +1,34 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _icon_error = _interopRequireDefault(require("./icons/icon_error.svg"));
-var _icon_warning = _interopRequireDefault(require("./icons/icon_warning.svg"));
 require("./index.scss");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var Message = function Message(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'error' : _ref$type,
-    title = _ref.title,
+  var title = _ref.title,
     text = _ref.text,
-    goBack = _ref.goBack,
-    retry = _ref.retry,
-    skip = _ref.skip,
-    close = _ref.close;
-  console.log('goBack', goBack, type);
-  var icon = type === 'error' ? _icon_error["default"] : _icon_warning["default"];
+    cancelText = _ref.cancelText,
+    okText = _ref.okText,
+    cancel = _ref.cancel,
+    ok = _ref.ok;
   return /*#__PURE__*/React.createElement("div", {
     className: "message"
   }, /*#__PURE__*/React.createElement("div", {
     className: "content"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "icon",
-    src: icon,
-    alt: "",
-    onClick: function onClick() {
-      return goBack();
-    }
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: "text"
   }, text), /*#__PURE__*/React.createElement("div", {
     className: "btns"
-  }, goBack && /*#__PURE__*/React.createElement("div", {
-    className: "blue_btn btn",
-    onClick: goBack
-  }, "\u8FD4\u56DE\u4FEE\u6539"), retry && skip && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "black_btn",
-    onClick: retry
-  }, "\u518D\u8BD5\u4E00\u6B21"), /*#__PURE__*/React.createElement("div", {
-    className: "blue_btn",
-    onClick: skip
-  }, "\u4EBA\u5DE5\u5BA1\u6838")), skip && close && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "black_btn btn",
-    onClick: skip
-  }, "\u5FFD\u7565\uFF0C\u7EE7\u7EED\u63D0\u4EA4"), /*#__PURE__*/React.createElement("div", {
-    className: "blue_btn btn",
-    onClick: close
-  }, "\u6211\u518D\u60F3\u60F3")))));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left_btn btn",
+    onClick: cancel
+  }, cancelText), /*#__PURE__*/React.createElement("div", {
+    className: "right_btn btn",
+    onClick: ok
+  }, okText))));
 };
 Message.displayName = 'Message';
 var _default = exports["default"] = Message;

package/lib/components/message/index.scss

@@ -19,47 +19,50 @@
     justify-content: center;
     align-items: center;
 
-    .icon {
-      width: 32px;
-      height: 32px;
-      margin-bottom: 8px;
-      margin-top: 32px;
-    }
-
     .title {
+      margin-top: 12px;
       font-size: 16px;
-      color: #FF6237;
-      margin-bottom: 16px;
+      width: 90%;
+      color: #333333;
+      margin-bottom: 12px;
+      font-weight: 400;
     }
 
     .text {
       font-size: 14px;
-      color: #333333;
+      color: #666666;
       margin: 0 29px 17px;
       text-align: center;
     }
 
     .btns {
-      border-top: 1px solid rgba(0, 0, 0, 0.102);
       width: 100%;
       display: flex;
       flex: 1;
       height: 56px;
+      gap: 20px;
+      justify-content: center;
+      margin-bottom: 12px;
+
 
       .btn {
-        font-size: 16px;
-        width: 100%;
-        height: 56px;
-        line-height: 56px;
+        font-size: 12px;
+        padding: 0px 12px;
+        height: 28px;
+        line-height: 28px;
         text-align: center;
+        border-radius: 3px;
       }
 
-      .blue_btn {
-        color: #1678FF;
+      .left_btn {
+        color: #ffffff;
+        background-color: #3e71f7;
+
       }
 
-      .left_btn {
-        border-right: 1px solid rgba(0, 0, 0, 0.102);
+      .right_btn {
+        border: 1px solid #3e71f7;
+        color: #3e71f7;
       }
     }