dtable-ui-component 5.2.3-alpha.3 → 5.2.3

package/lib/CheckboxFormatter/index.js

@@ -36,7 +36,7 @@ class CheckboxFormatter extends _react.default.PureComponent {
       style: {
         width: '16px',
         height: '16px',
-        color: checkboxStyle.color
+        fill: checkboxStyle.color
       }
     }, /*#__PURE__*/_react.default.createElement("use", {
       xlinkHref: "#".concat(checkboxStyle.type)

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -32,7 +32,7 @@ function DepartmentMultipleSelectFilter(props) {
         name
       } = option;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item d-flex align-items-center",
+        className: "department-item",
         key: index,
         onClick: event => selectDepartment(event, type)
       }, /*#__PURE__*/_react.default.createElement("input", {

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -37,7 +37,7 @@ function DepartmentSingleSelectFilter(props) {
         name
       } = option;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item department-item d-flex align-items-center",
+        className: "department-item",
         key: index,
         onClick: event => onSelect(event, type)
       }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -301,7 +301,6 @@
   width: 100%;
 }
 
-.dropdown-item .collaborator,
 .filters-list .option-group .option-group-content .collaborator {
   background-color: unset;
 }

package/lib/Department-editor/department-multiple-select/index.css

@@ -1,4 +1,10 @@
 .departments-container.dtable-ui {
+  position: absolute;
+  background-color: #fff;
+  border-radius: 3px;
+  min-width: 12rem;
+  height: 285px;
+  box-shadow: 0 0 5px #ccc;
   top: -4px;
   left: -3px;
   width: calc(100% + 8px);
@@ -52,12 +58,14 @@
   cursor: pointer;
 }
 
-.departments-container.dtable-ui .dropdown-item {
-  padding-left: 10px;
+.departments-container.dtable-ui .department-item {
+  padding: 4px 15px 4px 10px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.departments-container.dtable-ui .dropdown-item:hover {
+.departments-container.dtable-ui .department-item:hover {
   background: #f5f5f5;
   color: #212529;
 }

package/lib/Department-editor/department-multiple-select/index.js

@@ -92,7 +92,7 @@ function DepartmentMultipleSelect(props) {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: id
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-item d-flex align-items-center",
+      className: "department-item",
       onClick: event => onSelectDepartment(event, id)
     }, /*#__PURE__*/_react.default.createElement("input", {
       type: "checkbox",
@@ -123,7 +123,7 @@ function DepartmentMultipleSelect(props) {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
+      className: "departments-container dtable-ui ".concat(classNamePrefix)
     }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick

package/lib/Department-editor/department-single-select.js

@@ -146,7 +146,7 @@ class DepartmentSingleSelect extends _react.Component {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: id
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item department-item d-flex align-items-center",
+        className: "department-item",
         onClick: event => this.onSelectDepartment(event, id),
         style: itemStyle
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -250,7 +250,7 @@ class DepartmentSingleSelect extends _react.Component {
   }
   render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-menu department-editor-list dtable-ui show m-0 p-0",
+      className: "department-editor-list dtable-ui",
       style: this.props.menuStyle || {},
       ref: ref => this.departmentsRef = ref,
       onClick: this.onStopPropagation,

package/lib/Department-editor/index.css

@@ -1,6 +1,14 @@
 .dtable-ui.department-editor-list {
+  position: absolute;
+  left: 0;
+  z-index: 1000;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 3px;
+  min-width: 12rem;
   width: 300px;
   height: 285px;
+  box-shadow: 0 0 5px #ccc;
 }
 
 .dtable-ui.department-editor-list .editor-department-container {
@@ -44,13 +52,14 @@
   display: initial !important;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .dropdown-item {
-  padding-left: 10px;
-  padding-right: 15px;
+.dtable-ui.department-editor-list .editor-department-container .department-item {
+  padding: 4px 15px 4px 10px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .dropdown-item:hover {
+.dtable-ui.department-editor-list .editor-department-container .department-item:hover {
   background: #f5f5f5;
   color: #212529;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.3-alpha.3",
+  "version": "5.2.3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",