dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/RowExpandView/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -20,34 +21,46 @@ var _MobileFullScreenPage = _interopRequireDefault(require("../MobileFullScreenP
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["saveImmediately", "readonly", "isInsertingRow", "zIndex", "title", "className", "valueKey", "row", "columns", "commit", "onToggle", "uploadFile", "copyURL", "children", "historyCallback"];
-const {
-  Header,
-  Body: MobileFullScreenPageBody
-} = _MobileFullScreenPage.default;
+const Header = _MobileFullScreenPage.default.Header,
+  MobileFullScreenPageBody = _MobileFullScreenPage.default.Body;
 const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-      saveImmediately = true,
-      readonly = false,
-      isInsertingRow = false,
-      zIndex,
-      title,
-      className,
-      valueKey = 'name',
-      // name or key
-      row: defaultRow,
-      columns: defaultColumns,
-      commit,
-      onToggle,
-      uploadFile,
-      copyURL,
-      children = [],
-      historyCallback
-    } = _ref,
+  let _ref$saveImmediately = _ref.saveImmediately,
+    saveImmediately = _ref$saveImmediately === void 0 ? true : _ref$saveImmediately,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    _ref$isInsertingRow = _ref.isInsertingRow,
+    isInsertingRow = _ref$isInsertingRow === void 0 ? false : _ref$isInsertingRow,
+    zIndex = _ref.zIndex,
+    title = _ref.title,
+    className = _ref.className,
+    _ref$valueKey = _ref.valueKey,
+    valueKey = _ref$valueKey === void 0 ? 'name' : _ref$valueKey,
+    defaultRow = _ref.row,
+    defaultColumns = _ref.columns,
+    commit = _ref.commit,
+    onToggle = _ref.onToggle,
+    uploadFile = _ref.uploadFile,
+    copyURL = _ref.copyURL,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    historyCallback = _ref.historyCallback,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const [isLoading, setLoading] = (0, _react.useState)(true);
-  const [isSaving, setSaving] = (0, _react.useState)(false);
-  const [row, setRow] = (0, _react.useState)({});
-  const [columns, setColumns] = (0, _react.useState)([]);
+  const _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLoading = _useState2[0],
+    setLoading = _useState2[1];
+  const _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isSaving = _useState4[0],
+    setSaving = _useState4[1];
+  const _useState5 = (0, _react.useState)({}),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    row = _useState6[0],
+    setRow = _useState6[1];
+  const _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    columns = _useState8[0],
+    setColumns = _useState8[1];
   const isChangedRef = (0, _react.useRef)(false);
   const update = (0, _react.useRef)({});
   const checkEditable = (0, _react.useCallback)(column => {
@@ -75,10 +88,9 @@ const RowExpandView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onToggle();
   }, [isSaving, onToggle]);
   const onSave = (0, _react.useCallback)(function (updated) {
-    let {
-      successCallback,
-      failCallback
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      successCallback = _ref2.successCallback,
+      failCallback = _ref2.failCallback;
     commit(updated, columns, {
       successCallback,
       failCallback

package/lib/SelectItem/index.js

@@ -11,13 +11,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const SelectItem = _ref => {
-  let {
-    option,
-    fontSize,
-    className,
-    isShowRemove,
-    onRemove
-  } = _ref;
+  let option = _ref.option,
+    fontSize = _ref.fontSize,
+    className = _ref.className,
+    isShowRemove = _ref.isShowRemove,
+    onRemove = _ref.onRemove;
   const selectItemStyle = (0, _react.useMemo)(() => {
     return {
       fontSize: fontSize || 13,

package/lib/SelectOptionGroup/index.css

@@ -6,34 +6,28 @@
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding-top: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0;
+  box-shadow: var(--bs-border-secondary-shadow);
   background: #fff;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-  border-radius: 3px;
+  border: 1px solid var(--bs-border-secondary-color);
+  border-radius: 4px;
   z-index: 10001;
 }
 
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-}
-
-.option-group .option-group-content .label-space {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
+  padding: 0 10px 6px;
 }
 
 .option-group-search .form-control {
-  height: 32px;
-  border-radius: 4px;
+  height: 31px;
 }
 
 .option-group .none-search-result {
   height: 100px;
   width: 100%;
+  padding: 10px;
   color: #666666;
 }
 
@@ -41,18 +35,13 @@
   flex: 1;
   max-height: 252px;
   overflow-y: auto;
-  padding: 8px;
-}
-
-.option-group .option-group-top {
-  padding-top: 8px !important;
 }
 
 .option {
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 8px;
+  padding: 0.25rem 10px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -61,38 +50,34 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-radius: 4px;
 }
 
-.option-group .option-group-search .form-control {
-  border: none;
-  border-radius: 4px 4px 0 0;
-  padding: .375rem 0 .375rem 1rem;
-  height: 100%;
+.option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
 }
 
-.option-group .option-group-search .form-control:focus {
-  border-color: transparent !important;
-  box-shadow: none !important;
+.option:hover .header-icon .dtable-font,
+.option:hover .header-icon .multicolor-icon,
+.option.option-active .select-option-name {
+  color: #fff;
 }
 
-
-.option-group-content .label-check-icon {
-  margin-left: 16px;
+.option.option-active .header-icon .dtable-font,
+.option.option-active .header-icon .multicolor-icon {
+  color: #fff;
 }
 
-.option-group-content .dtable-icon-check {
-  font-size: 14px !important;
-  color: var(--bs-icon-color);
+.option:not(.option-active):hover .header-icon .dtable-font,
+.option:not(.option-active):hover .header-icon .multicolor-icon {
+  color: #aaa;
 }
 
-.option.option-active {
-  background-color: #f5f5f5;
-  color: #212529;
-  cursor: pointer;
+.option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
 }
 
-
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }
@@ -112,7 +97,7 @@
 
 .option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
   font-size: 12px;
-  color: var(--bs-icon-color);
+  color: #798d99;
 }
 
 .option-group-dtable-ui-single-select-selector .option:hover,
@@ -126,16 +111,3 @@
 .option-group-selector-multiple-select .option.option-active .select-option-name {
   color: #212529;
 }
-
-.option-group-selector-single-select .option .select-option-name .single-select-option {
-  margin: 0;
-}
-
-.option-group-selector-single-select .form-control {
-  padding: .375rem .5rem !important;
-}
-
-.pre-fill-dialog .single-select-option,
-.pre-fill-dialog .multiple-select-option {
-  padding: 0 !important;
-}

package/lib/SelectOptionGroup/index.js

@@ -20,15 +20,13 @@ class SelectOptionGroup extends _react.Component {
     super(props);
     this.resetMenuStyle = () => {
       if (!this.optionGroupRef) return;
-      const {
-        isInModal,
-        position
-      } = this.props;
-      const {
-        top,
-        height,
-        width
-      } = this.optionGroupRef.getBoundingClientRect();
+      const _this$props = this.props,
+        isInModal = _this$props.isInModal,
+        position = _this$props.position;
+      const _this$optionGroupRef$ = this.optionGroupRef.getBoundingClientRect(),
+        top = _this$optionGroupRef$.top,
+        height = _this$optionGroupRef$.height,
+        width = _this$optionGroupRef$.width;
       if (isInModal) {
         if (position.y + position.height + height > window.innerHeight) {
           this.optionGroupRef.style.top = position.y - height + 'px';
@@ -82,9 +80,7 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.onMouseDown = e => {
-      const {
-        isInModal
-      } = this.props;
+      const isInModal = this.props.isInModal;
       // prevent event propagation when click option or search input
       if (isInModal) {
         e.stopPropagation();
@@ -96,10 +92,9 @@ class SelectOptionGroup extends _react.Component {
       }
     };
     this.scrollContent = () => {
-      const {
-        offsetHeight,
-        scrollTop
-      } = this.optionGroupContentRef;
+      const _this$optionGroupCont = this.optionGroupContentRef,
+        offsetHeight = _this$optionGroupCont.offsetHeight,
+        scrollTop = _this$optionGroupCont.scrollTop;
       this.setState({
         disableHover: true
       });
@@ -132,18 +127,10 @@ class SelectOptionGroup extends _react.Component {
         });
       }
     };
-    this.isEqual = (obj1, obj2) => {
-      if (obj1 === obj2) return true;
-      if (!obj1 || !obj2) return false;
-      return JSON.stringify(obj1) === JSON.stringify(obj2);
-    };
     this.renderOptGroup = searchVal => {
-      let {
-        noOptionsPlaceholder,
-        onSelectOption,
-        value,
-        supportMultipleSelect
-      } = this.props;
+      let _this$props2 = this.props,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        onSelectOption = _this$props2.onSelectOption;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -154,7 +141,6 @@ class SelectOptionGroup extends _react.Component {
       return this.filterOptions.map((opt, i) => {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
-        let isSelected = value && typeof value === 'object' && !supportMultipleSelect ? this.isEqual(value.value, opt.value) : Array.isArray(value.value) ? value.value.includes(opt.value.column_key) : false;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
@@ -163,26 +149,10 @@ class SelectOptionGroup extends _react.Component {
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "label-space",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [" ", opt.label]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "label-check-icon",
-              children: [" ", isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                className: "dtable-font dtable-icon-check"
-              })]
-            })]
-          })
+          children: opt.label
         }, "".concat(key, "-").concat(i));
       });
     };
-    this.clearValue = () => {
-      this.setState({
-        searchVal: '',
-        activeIndex: -1
-      });
-    };
     this.state = {
       searchVal: '',
       activeIndex: -1,
@@ -204,27 +174,22 @@ class SelectOptionGroup extends _react.Component {
     window.removeEventListener('keydown', this.onHotKey);
   }
   render() {
-    const {
-      searchable,
-      searchPlaceholder,
-      top,
-      left,
-      minWidth,
-      value,
-      isShowSelected,
-      isInModal,
-      position,
-      className,
-      addOptionAble,
-      component,
-      supportMultipleSelect
-    } = this.props;
-    const {
-      AddOption
-    } = component || {};
-    let {
-      searchVal
-    } = this.state;
+    const _this$props3 = this.props,
+      searchable = _this$props3.searchable,
+      searchPlaceholder = _this$props3.searchPlaceholder,
+      top = _this$props3.top,
+      left = _this$props3.left,
+      minWidth = _this$props3.minWidth,
+      value = _this$props3.value,
+      isShowSelected = _this$props3.isShowSelected,
+      isInModal = _this$props3.isInModal,
+      position = _this$props3.position,
+      className = _this$props3.className,
+      addOptionAble = _this$props3.addOptionAble,
+      component = _this$props3.component;
+    const _ref = component || {},
+      AddOption = _ref.AddOption;
+    let searchVal = this.state.searchVal;
     let style = {
       top: top || 0,
       left: left || 0
@@ -245,6 +210,7 @@ class SelectOptionGroup extends _react.Component {
         opacity: 0
       };
     }
+    style.top = style.top + 4;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
       ref: ref => this.clickOutsideRef = ref,
       onClickOutside: this.props.onClickOutside,
@@ -257,34 +223,20 @@ class SelectOptionGroup extends _react.Component {
         style: style,
         onMouseDown: this.onMouseDown,
         children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "editor-list-delete",
+          className: "editor-list-delete mb-2",
           onClick: e => e.stopPropagation(),
           children: value.label || ''
-        }), searchable && this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "option-group-search",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
             autoFocus: true,
-            ref: this.searchInputRef,
-            clearValue: this.clearValue,
-            isClearable: true,
-            components: {
-              ClearIndicator: props => {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: (0, _classnames.default)('select-search-text-clear input-icon-addon seatable-icon dtable-font dtable-icon-x'),
-                  onClick: e => {
-                    e.stopPropagation();
-                    e.nativeEvent.stopImmediatePropagation();
-                    props.clearValue();
-                  }
-                });
-              }
-            }
+            ref: this.searchInputRef
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-content ".concat(!searchable && !supportMultipleSelect ? 'option-group-top' : ''),
+          className: "option-group-content",
           ref: ref => this.optionGroupContentRef = ref,
           children: this.renderOptGroup(searchVal)
         }), addOptionAble && AddOption]

package/lib/SelectedDepartments/index.js

@@ -12,12 +12,12 @@ var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function SelectedDepartments(_ref) {
-  let {
-    value,
-    removeDepartment,
-    isShowRemoveIcon = false,
-    departments = []
-  } = _ref;
+  let value = _ref.value,
+    removeDepartment = _ref.removeDepartment,
+    _ref$isShowRemoveIcon = _ref.isShowRemoveIcon,
+    isShowRemoveIcon = _ref$isShowRemoveIcon === void 0 ? false : _ref$isShowRemoveIcon,
+    _ref$departments = _ref.departments,
+    departments = _ref$departments === void 0 ? [] : _ref$departments;
   const idDepartmentMap = (0, _react.useMemo)(() => {
     let idDepartmentMap = {};
     departments.forEach(department => {
@@ -40,9 +40,7 @@ function SelectedDepartments(_ref) {
     }
     const department = idDepartmentMap[content];
     if (department) {
-      const {
-        name
-      } = department;
+      const name = department.name;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "department mr-1",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/SimpleLongTextFormatter/index.js

@@ -56,20 +56,17 @@ class SimpleLongTextFormatter extends _react.default.Component {
       });
     };
     this.translateValue = () => {
-      const {
-        value
-      } = this.props;
+      const value = this.props.value;
       if (!value) return {};
       const valueType = Object.prototype.toString.call(value);
       if (valueType === '[object String]') {
         const isMarkdown = true;
         const previewTextNeedSlice = false;
-        const {
-          previewText,
-          images,
-          links,
-          checklist
-        } = (0, _seafileEditor.getPreviewContent)(value, isMarkdown, previewTextNeedSlice);
+        const _getPreviewContent = (0, _seafileEditor.getPreviewContent)(value, isMarkdown, previewTextNeedSlice),
+          previewText = _getPreviewContent.previewText,
+          images = _getPreviewContent.images,
+          links = _getPreviewContent.links,
+          checklist = _getPreviewContent.checklist;
         const newValue = Object.assign({}, {
           text: value,
           preview: previewText,
@@ -142,13 +139,10 @@ class SimpleLongTextFormatter extends _react.default.Component {
     this.clearClosePreviewTimer();
   }
   render() {
-    const {
-      isPreview
-    } = this.state;
-    const {
-      containerClassName,
-      previewClassName
-    } = this.props;
+    const isPreview = this.state.isPreview;
+    const _this$props = this.props,
+      containerClassName = _this$props.containerClassName,
+      previewClassName = _this$props.previewClassName;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     const value = this.translateValue();
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/SimpleLongTextFormatter/normalize-long-text-value.js

@@ -46,10 +46,9 @@ const getPreviewContent = markdownContent => {
   }
   const hrefList = markdownContent.match(hrefReg);
   if (hrefList) {
-    const {
-      images,
-      links
-    } = getLinks(hrefList);
+    const _getLinks = getLinks(hrefList),
+      images = _getLinks.images,
+      links = _getLinks.links;
     return {
       preview,
       images,

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -14,17 +14,12 @@ class LongTextPreview extends _react.default.PureComponent {
   constructor(props) {
     super(props);
     this.getStyle = () => {
-      let {
-        formatterStyle
-      } = this.props;
-      let {
-        left,
-        top
-      } = formatterStyle;
-      const {
-        height,
-        opacity
-      } = this.state;
+      let formatterStyle = this.props.formatterStyle;
+      let left = formatterStyle.left,
+        top = formatterStyle.top;
+      const _this$state = this.state,
+        height = _this$state.height,
+        opacity = _this$state.opacity;
       const width = 520;
       const padding = 6;
       left = left - width > 0 ? left - width - 12 : 0;
@@ -53,15 +48,12 @@ class LongTextPreview extends _react.default.PureComponent {
     setTimeout(() => {
       var _value$images;
       if (!this.ref) return;
-      const {
-        value
-      } = this.props;
+      const value = this.props.value;
 
       // If image is included, sets the preview height to the maximum height
       const hasImage = (value === null || value === void 0 ? void 0 : (_value$images = value.images) === null || _value$images === void 0 ? void 0 : _value$images.length) >= 2 ? true : false;
-      let {
-        height: domHeight
-      } = this.ref.getBoundingClientRect();
+      let _this$ref$getBounding = this.ref.getBoundingClientRect(),
+        domHeight = _this$ref$getBounding.height;
       domHeight = hasImage ? 450 : domHeight;
       this.setState({
         height: Math.min(domHeight, 450),
@@ -70,10 +62,9 @@ class LongTextPreview extends _react.default.PureComponent {
     }, 10);
   }
   render() {
-    const {
-      className,
-      value
-    } = this.props;
+    const _this$props = this.props,
+      className = _this$props.className,
+      value = _this$props.value;
     const markdownContent = value ? value.text : '';
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('longtext-modal-dialog longtext-preview', className),

package/lib/SimpleLongTextFormatter/widgets/dtable-markdown-viewer.js

@@ -51,10 +51,9 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
         }
       });
     }
-    const {
-      showTOC,
-      markdownContent
-    } = this.props;
+    const _this$props = this.props,
+      showTOC = _this$props.showTOC,
+      markdownContent = _this$props.markdownContent;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileEditor.MarkdownViewer, {
       value: markdownContent,
       isShowOutline: showTOC

package/lib/SingleSelectEditor/index.js

@@ -13,9 +13,7 @@ var _selectEditor = _interopRequireDefault(require("../select-editor"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value"];
 const SingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-      value: oldValue
-    } = _ref,
+  let oldValue = _ref.value,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const value = oldValue ? [oldValue] : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {

package/lib/SingleSelectFormatter/index.js

@@ -14,11 +14,11 @@ class SingleSelectFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getOption = () => {
-      let {
-        value,
-        options = [],
-        fontSize
-      } = this.props;
+      let _this$props = this.props,
+        value = _this$props.value,
+        _this$props$options = _this$props.options,
+        options = _this$props$options === void 0 ? [] : _this$props$options,
+        fontSize = _this$props.fontSize;
       let option = options.find(item => item.id === value || item.name === value);
       if (option) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
@@ -29,10 +29,9 @@ class SingleSelectFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const {
-      containerClassName,
-      value
-    } = this.props;
+    const _this$props2 = this.props,
+      containerClassName = _this$props2.containerClassName,
+      value = _this$props2.value;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classname,