dtable-ui-component 5.2.4 → 5.2.5-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 [document](https://seatable.github.io/dtable-ui-component/docs/)
 
-## Instructions for using font icons
+## Font icons
 
 When using dtable-ui-component component library, you need to import dtable-font font icon.
 
@@ -10,23 +10,48 @@ When using dtable-ui-component component library, you need to import dtable-font
 2. If the dtable-font font icon is not referenced in the application, you need to import the corresponding font icon when using dtable-ui-component
 
 ```js
-  import { CollaboratorEditor } from 'dtable-ui-component';
-  import 'dtable-ui-component/assets/dtable-font.css';
+import { CollaboratorEditor } from 'dtable-ui-component';
+import 'dtable-ui-component/assets/dtable-font.css';
+```
+
+## Internationalization (I18n)
 
-  ...
+If your UI component requires localization, you need to call the localization function.
+
+```js
+import { setLocale } from 'dtable-ui-component/lib/lang';
+
+let lang = 'en';
+setLocale(lang);
 ```
 
-## load demand
+## On-demand loading of components
+
+If you want to use on-demand loading, you need to install the following third-party libraries.
+
+~~~bash
+npm install babel-plugin-import --save-dev
+~~~
 
-If you want to use on-demand loading, add the following content to the ` .babelrc` file of your project 
+then add the following content to the ` .babelrc` file of your project 
 
 ```js
-"plugins": [
-    ["on-demand-loading", {"library": "dtable-ui-component"}]
- ]
+{
+  "plugins": [
+    [
+      "import", {
+        "libraryName": "dtable-ui-component",
+        "libraryDirectory": "lib",
+        "camel2DashComponentName": false,
+        "camel2UnderlineComponentName": false
+      },
+      "dtable-ui-component"
+    ],
+  ]
+}
 ```
 
-Long Text Formatter
+## Long Text Formatter
 
 If your project only uses a simple long text formatter, you can reference the SimpleLongTextFormatter component.
 

package/lib/CheckboxFormatter/index.css

@@ -5,6 +5,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 600;
 }

package/lib/DTableSelect/utils.js

@@ -101,7 +101,14 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     ...base,
     zIndex: 9999
   }),
-  indicatorSeparator: () => {}
+  indicatorSeparator: () => {},
+  clearIndicator: () => ({
+    // 仅用于测试
+    color: 'pink'
+  }),
+  indicatorContainer: () => ({
+    padding: '8px 4px'
+  })
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement("span", {

package/lib/ImagePreviewerLightbox/index.css

@@ -3,6 +3,19 @@
   outline: none;
 }
 
+.ril__outer .ril__toolbarItem {
+  height: 50px;
+  color: #fff;
+  display: inline-block;
+  font-size: 120%;
+  line-height: 50px;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ril-caption .ril__builtinButton {
   width: 24px;
 }

package/lib/RowExpandFormatter/index.js

@@ -231,10 +231,12 @@ class EditorFormatter extends _react.default.Component {
           }
         case _constants.CellType.CHECKBOX:
           {
+            var _column$data;
             return /*#__PURE__*/_react.default.createElement("div", {
               className: "checkbox-formatter-container"
             }, /*#__PURE__*/_react.default.createElement(_CheckboxFormatter.default, {
-              value: cellValue
+              value: cellValue,
+              checkboxStyle: ((_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style) || {}
             }));
           }
         case _constants.CellType.CREATOR:

package/package.json

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