dtable-ui-component 5.1.1 → 5.1.2-alpha2

package/lib/DTableColorPicker/utils.js

@@ -4,33 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toPercentage = exports.rgbaToHex = exports.isLightColor = exports.hexToRgba = exports.getInitialHexVal = void 0;
+const defaultColor = '#ffffff';
 const hexRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i;
 const rgbaRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/i;
 const hexToRgba = color => {
-  if (rgbaRegex.test(color)) return color;
-  let r;
-  let g;
-  let b;
-  let a = 1;
-  const hex = color.replace(/^#/, '');
-  if (hex.length === 6 || hex.length === 8) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = hex.length === 8 ? Math.round(parseInt(hex.slice(6, 8), 16) / 255 * 100) / 100 : 1;
-  } else if (hex.length === 3) {
-    r = parseInt(hex[0] + hex[0], 16);
-    g = parseInt(hex[1] + hex[1], 16);
-    b = parseInt(hex[2] + hex[2], 16);
-  } else {
-    throw new Error('Invalid HEX color.');
+  try {
+    if (rgbaRegex.test(color)) return color;
+    let r;
+    let g;
+    let b;
+    let a = 1;
+    const hex = color.replace(/^#/, '');
+    if (hex.length === 6 || hex.length === 8) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+      a = hex.length === 8 ? Math.round(parseInt(hex.slice(6, 8), 16) / 255 * 100) / 100 : 1;
+    } else if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else {
+      throw new Error('Invalid HEX color.');
+    }
+    return {
+      r,
+      g,
+      b,
+      a
+    };
+  } catch (error) {
+    console.error(error.message);
+    return hexToRgba(defaultColor);
   }
-  return {
-    r,
-    g,
-    b,
-    a
-  };
 };
 exports.hexToRgba = hexToRgba;
 const rgbaToHex = function (color) {

package/lib/DTableSelect/user-select.css

@@ -0,0 +1,46 @@
+.user-select .select-module-container {
+  display: flex;
+  align-items: center;
+}
+
+.user-select .select-module.select-module-avatar {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+}
+
+.user-select .true__value-container .select-module-container {
+  display: block;
+}
+
+.user-select .true__value-container .select-module.select-module-avatar {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+}
+
+.user-select .true__value-container .true__multi-value__label {
+  padding: 0px;
+}
+
+.user-select .true__value-container .true__multi-value__label .select-module.select-module-avatar {
+  transform: translateY(-2px);
+}
+
+.user-select .true__value-container .select-module.select-module-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1;
+  line-height: 20px;
+  margin-left: 5px;
+}
+
+.user-select .true__control.true__control--is-focused,
+.user-select .true__control.true__control--is-focused:hover {
+  background-color: #ffffff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}

package/lib/DTableSelect/utils.js

@@ -4,9 +4,76 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
+const UserSelectStyle = exports.UserSelectStyle = {
+  option: (provided, state) => {
+    const {
+      isDisabled,
+      isFocused
+    } = state;
+    return {
+      ...provided,
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
+    };
+  },
+  control: provided => ({
+    ...provided,
+    fontSize: '14px',
+    cursor: 'pointer',
+    lineHeight: '1.5'
+  }),
+  indicatorSeparator: () => ({
+    display: 'none'
+  }),
+  dropdownIndicator: () => ({
+    display: 'none'
+  }),
+  clearIndicator: () => ({
+    display: 'none'
+  }),
+  multiValue: provided => {
+    return {
+      ...provided,
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0 10px 0 0',
+      padding: '0 0 0 2px'
+    };
+  },
+  multiValueLabel: provided => {
+    return {
+      ...provided,
+      padding: '0px'
+    };
+  },
+  multiValueRemove: provided => {
+    return {
+      ...provided,
+      color: '#666',
+      ':hover': {
+        backgroundColor: 'transparent',
+        color: '#555555'
+      }
+    };
+  },
+  singleValue: provided => {
+    return {
+      ...provided,
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0',
+      padding: '0 2px',
+      width: 'fit-content'
+    };
+  }
+};
 const MenuSelectStyle = exports.MenuSelectStyle = {
   option: (provided, state) => {
     const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.1.1",
+  "version": "5.1.2-alpha2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",