dtable-ui-component 6.0.113-mba.9 → 6.0.113-mzn.2

package/lib/DTableFiltersPopover/index.js

@@ -193,10 +193,11 @@ var _jsxRuntime = require("react/jsx-runtime");
           className: "filter-popover-footer",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
             disabled: readOnly,
-            className: "mr-2",
+            className: "dtable-button mr-2",
             onClick: this.onClosePopover,
             children: (0, _lang.getLocale)('Cancel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            className: "dtable-button",
             disabled: this.state.isSubmitDisabled || readOnly,
             color: "primary",
             onClick: this.onSubmitFilters,

package/lib/DTableModalHeader/index.js

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
@@ -26,7 +27,8 @@ const DTableModalHeader = _ref => {
     onClick: props.toggle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       icon: "x",
-      className: "dtable-modal-close-inner"
+      className: "dtable-modal-close-inner",
+      title: (0, _lang.getLocale)('Close')
     })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {

package/lib/DTableToolTip/index.css

@@ -1,10 +1,11 @@
 .dtable-tooltip {
   position: absolute;
-  z-index: 1070;
+  z-index: 99999;
 }
 
 .dtable-tooltip .tooltip {
   max-width: 242px;
+  min-width: max-content;
   opacity: 1;
 }
 
@@ -17,7 +18,6 @@
   padding: 4px 8px;
   line-height: 20px;
   font-weight: normal;
-  white-space: normal;
 }
 
 .dtable-tooltip-shortcut-inner {

package/lib/DeleteTip/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _lang = require("../lang");
+var _reactstrap = require("reactstrap");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DeleteTip extends _react.default.Component {
@@ -42,12 +43,13 @@ class DeleteTip extends _react.default.Component {
             children: deleteTip
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "d-flex justify-content-end",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              className: "btn btn-secondary mr-2",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+              className: "dtable-button mr-2",
               onClick: toggle,
               children: (0, _lang.getLocale)('Cancel')
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              className: "btn btn-primary",
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+              className: "dtable-button",
+              color: "primary",
               onClick: handleDelete,
               children: (0, _lang.getLocale)('Delete')
             })]

package/lib/DigitalSignEditor/pc-editor/index.js

@@ -180,11 +180,13 @@ class PCDigitalSignEditor extends _react.Component {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
           onClick: this.props.onCommitCancel,
           color: "secondary",
+          className: "dtable-button",
           children: (0, _lang.getLocale)('Cancel')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
           onClick: this.saveSignature,
           color: "primary",
           disabled: saving,
+          className: "dtable-button",
           children: (0, _lang.getLocale)(saving ? 'Saving' : 'Save')
         })]
       })]

package/lib/GeolocationEditor/pc-editor/location-editor.js

@@ -340,10 +340,12 @@ class LocationEditor extends _react.Component {
         children: this.state.errMessage
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableCustomFooter.default, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          className: "dtable-button",
           onClick: this.props.onCancel,
           color: "secondary",
           children: (0, _lang.getLocale)('Cancel')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          className: "dtable-button",
           onClick: this.onSubmit,
           color: "primary",
           children: (0, _lang.getLocale)('Submit')

package/lib/GeolocationEditor/pc-editor/province-city-editor.js

@@ -261,10 +261,12 @@ class ProvinceCityEditor extends _react.Component {
         children: this.state.errMessage
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableCustomFooter.default, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          className: "dtable-button",
           onClick: this.props.onCancel,
           color: "secondary",
           children: (0, _lang.getLocale)('Cancel')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          className: "dtable-button",
           onClick: this.onSubmit,
           color: "primary",
           autoFocus: true,

package/lib/IconButton/index.js

@@ -1,33 +1,56 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
+var _dtableUtils = require("dtable-utils");
+require("../css/icon-button-styles.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disabled", "className", "icon", "children"];
+const _excluded = ["disabled", "className", "icon", "color", "children", "title", "tooltipPlacement", "outline", "noBackground"];
 const IconButton = _ref => {
   let {
       disabled,
       className,
       icon,
-      children
+      color,
+      children,
+      title,
+      tooltipPlacement,
+      outline,
+      noBackground
     } = _ref,
     otherProperties = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    className: (0, _classnames.default)('seatable-icon-btn', className, {
-      'disabled': disabled
-    })
-  }, otherProperties), {}, {
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
-      "aria-hidden": "true"
-    }), children]
-  }));
+  const buttonIdRef = (0, _react.useRef)("dtable-icon-button-".concat((0, _dtableUtils.generatorBase64Code)(8)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      id: buttonIdRef.current,
+      className: (0, _classnames.default)('dtable-icon-btn', className, {
+        'disabled': disabled,
+        'outline': outline,
+        'no-background': noBackground
+      }),
+      "aria-label": title
+    }, otherProperties), {}, {
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
+        "aria-hidden": "true",
+        style: color ? {
+          color
+        } : undefined
+      }), children]
+    })), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
+      placement: tooltipPlacement || 'bottom',
+      target: buttonIdRef.current,
+      children: title
+    })]
+  });
 };
 var _default = exports.default = IconButton;

package/lib/NotificationPopover/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class NotificationPopover extends _react.default.Component {
@@ -61,6 +62,7 @@ class NotificationPopover extends _react.default.Component {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "notification-header",
           children: [headerText, /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            title: (0, _lang.getLocale)('Close'),
             icon: "x",
             onClick: this.props.onNotificationListToggle
           })]

package/lib/RowExpandDialog/index.js

@@ -223,10 +223,12 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           children: children[1]
         })), (!saveImmediately || isInsertingRow) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.ModalFooter, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            className: "dtable-button",
             onClick: toggle,
             color: "secondary",
             children: (0, _lang.getLocale)('Cancel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+            className: "dtable-button",
             onClick: onSubmit,
             disabled: isSaving || !isChangedRef.current,
             color: "primary",

package/lib/css/button-styles.css

@@ -0,0 +1,152 @@
+.dtable-button {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  padding: 0 12px !important;
+  min-height: 32px !important;
+  font-size: 14px !important;
+  font-weight: normal !important;
+  border-radius: 3px !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+  white-space: nowrap !important;
+  outline: none !important;
+  font-family: inherit !important;
+  border: 1px solid transparent !important;
+}
+
+.dtable-button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.dtable-button:active:focus {
+  box-shadow: none !important;
+}
+
+.btn-sm.dtable-button,
+.dtable-button.btn-sm {
+  min-height: 26px !important;
+  padding: 0 8px !important;
+  font-size: 12px !important;
+  gap: 4px !important;
+}
+
+.btn-lg.dtable-button,
+.dtable-button.btn-lg {
+  min-height: 38px !important;
+  padding: 0 16px !important;
+  font-size: 14px !important;
+}
+
+.dtable-button.btn-warning,
+.btn-warning.dtable-button {
+  background-color: #FF8000 !important;
+  color: #FFFFFF !important;
+  border-color: #FF8000 !important;
+}
+
+.dtable-button.btn-warning:hover:not(:disabled),
+.btn-warning.dtable-button:hover:not(:disabled) {
+  background-color: #ED7109 !important;
+  border-color: #ED7109 !important;
+  color: #FFFFFF !important;
+}
+
+.dtable-button.btn-warning:active:not(:disabled),
+.btn-warning.dtable-button:active:not(:disabled) {
+  background-color: #E16B09 !important;
+  border-color: #E16B09 !important;
+  color: #FFFFFF !important;
+}
+
+/* light color - 映射到 DTable 默认样式 */
+.dtable-button.btn-light,
+.btn-light.dtable-button {
+  background-color: #FFFFFF !important;
+  color: #ED7109 !important;
+  border-color: #ED7109 !important;
+}
+
+.dtable-button.btn-light:hover:not(:disabled),
+.btn-light.dtable-button:hover:not(:disabled) {
+  background-color: #ED7109 !important;
+  color: #FFFFFF !important;
+  border-color: #ED7109 !important;
+}
+
+.dtable-button.btn-light:active:not(:disabled),
+.btn-light.dtable-button:active:not(:disabled) {
+  background-color: #E16B09 !important;
+  color: #FFFFFF !important;
+  border-color: #E16B09 !important;
+}
+
+.dtable-button.btn-secondary,
+.btn-secondary.dtable-button {
+  background-color: #FFFFFF !important;
+  color: #212529 !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-button.btn-secondary:hover:not(:disabled),
+.btn-secondary.dtable-button:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  color: #212529 !important;
+}
+
+.dtable-button.btn-secondary:active:not(:disabled),
+.btn-secondary.dtable-button:active:not(:disabled) {
+  background-color: #E9E9E9 !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  color: #212529 !important;
+}
+
+.dtable-button.btn-primary,
+.btn-primary.dtable-button {
+  background-color: #FF8000 !important;
+  color: #FFFFFF !important;
+  border-color: #FF8000 !important;
+}
+
+.dtable-button.btn-primary:hover:not(:disabled),
+.btn-primary.dtable-button:hover:not(:disabled) {
+  background-color: #ED7109 !important;
+  border-color: #ED7109 !important;
+  color: #FFFFFF !important;
+}
+
+.dtable-button.btn-primary:active:not(:disabled),
+.btn-primary.dtable-button:active:not(:disabled) {
+  background-color: #E16B09 !important;
+  border-color: #E16B09 !important;
+  color: #FFFFFF !important;
+}
+
+.dtable-button:disabled,
+.dtable-button.disabled {
+  opacity: 0.65 !important;
+  cursor: not-allowed !important;
+}
+
+.dtable-button.block {
+  display: flex !important;
+  width: 100% !important;
+}
+
+.dtable-button i,
+.dtable-button svg,
+.dtable-button .icon {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
+  margin: 0;
+}
+
+.btn-sm.dtable-button i,
+.btn-sm.dtable-button svg,
+.btn-sm.dtable-button .icon {
+  font-size: 12px;
+}

package/lib/css/icon-button-styles.css

@@ -0,0 +1,141 @@
+.dtable-icon-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+  color: #666666 !important;
+  cursor: pointer;
+  transition: all 0.2s ease !important;
+  outline: none !important;
+  border-radius: 3px !important;
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.dtable-icon-btn:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.dtable-icon-btn:active:focus {
+  box-shadow: none !important;
+}
+
+.dtable-icon-btn.btn-lg,
+.dtable-icon-btn.size-lg {
+  min-width: 40px !important;
+  min-height: 40px !important;
+}
+
+.dtable-icon-btn.btn-lg .dtable-icon-btn__icon,
+.dtable-icon-btn.size-lg .dtable-icon-btn__icon {
+  font-size: 20px !important;
+}
+
+.dtable-icon-btn .dtable-icon-btn__icon {
+  font-size: 16px !important;
+}
+
+.dtable-icon-btn.btn-sm,
+.dtable-icon-btn.size-sm {
+  min-width: 24px !important;
+  min-height: 24px !important;
+}
+
+.dtable-icon-btn.btn-sm .dtable-icon-btn__icon,
+.dtable-icon-btn.size-sm .dtable-icon-btn__icon {
+  font-size: 14px !important;
+}
+
+.dtable-icon-btn.size-xs {
+  min-width: 20px !important;
+  min-height: 20px !important;
+}
+
+.dtable-icon-btn.size-xs .dtable-icon-btn__icon {
+  font-size: 12px !important;
+}
+
+.dtable-icon-btn:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+.dtable-icon-btn:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+.dtable-icon-btn.outline,
+.dtable-icon-btn.outlined {
+  background-color: #FFFFFF !important;
+  border: 1px solid rgba(0, 40, 100, 0.12) !important;
+  color: #666666 !important;
+}
+
+.dtable-icon-btn.outline:hover:not(:disabled),
+.dtable-icon-btn.outlined:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-icon-btn.outline:active:not(:disabled),
+.dtable-icon-btn.outlined:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-icon-btn.no-background,
+.dtable-icon-btn.no-display-bac {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn.no-background:hover:not(:disabled),
+.dtable-icon-btn.no-display-bac:hover:not(:disabled) {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn.no-background:active:not(:disabled),
+.dtable-icon-btn.no-display-bac:active:not(:disabled) {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn:disabled,
+.dtable-icon-btn.disabled {
+  opacity: 0.65 !important;
+  cursor: not-allowed !important;
+}
+
+.dtable-icon-btn__icon {
+  display: inline-block;
+  line-height: 1;
+  margin: 0;
+  font-weight: normal;
+}
+
+.dtable-icon-btn.btn-primary,
+.dtable-icon-btn.color-primary {
+  color: #FF8000 !important;
+}
+
+.dtable-icon-btn.btn-primary:hover:not(:disabled),
+.dtable-icon-btn.color-primary:hover:not(:disabled) {
+  color: #ED7109 !important;
+  background-color: rgba(255, 128, 0, 0.1) !important;
+}
+
+.dtable-icon-btn.btn-secondary,
+.dtable-icon-btn.color-secondary {
+  color: #212529 !important;
+}
+
+.dtable-icon-btn.btn-danger,
+.dtable-icon-btn.color-danger {
+  color: #dc3545 !important;
+}
+
+.dtable-icon-btn.btn-danger:hover:not(:disabled),
+.dtable-icon-btn.color-danger:hover:not(:disabled) {
+  color: #c82333 !important;
+  background-color: rgba(220, 53, 69, 0.1) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.113mba.9",
+  "version": "6.0.113mzn.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.6",
@@ -134,6 +134,7 @@
     "storybook": "^9.1.19",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.2.5",
+    "url": "^0.11.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.105.4",
     "webpack-dev-server": "^5.2.3",