@easyv/react-components 0.0.50 → 0.2.0

package/dist/ColorsPicker/utils.js

@@ -0,0 +1,233 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import tinycolor from 'tinycolor2';
+export function toHex(x) {
+  return ('0' + parseInt(x).toString(16)).slice(-2);
+}
+export function resolveColor(colorParam) {
+  if (!colorParam || typeof colorParam !== 'string') {
+    return {};
+  }
+
+  // 转为小写并去除空格
+  var color = colorParam.toLowerCase().replace(/\s+/g, '');
+  var hexReg = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/;
+  var rgbReg = /^(rgb\(\d+,\d+,\d+\)|rgba\(\d+,\d+,\d+,(\d+)?(\.)?(\d+)?\))$/;
+  // const rgbReg1 = /^(rgb\(\d+,\d+,\d+\)|rgba\((\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?\))$/;
+
+  var r, g, b, a;
+  if (hexReg.test(color)) {
+    if (color.length === 4) {
+      r = parseInt(color.slice(1, 2) + color.slice(1, 2), 16);
+      g = parseInt(color.slice(2, 3) + color.slice(2, 3), 16);
+      b = parseInt(color.slice(3, 4) + color.slice(3, 4), 16);
+    } else {
+      r = parseInt(color.slice(1, 3), 16);
+      g = parseInt(color.slice(3, 5), 16);
+      b = parseInt(color.slice(5, 7), 16);
+    }
+    a = 1;
+  } else if (rgbReg.test(color)) {
+    var colors = color.replace(/rgba|rgb|\(|\)/g, '').split(',');
+    r = Number(colors[0]);
+    g = Number(colors[1]);
+    b = Number(colors[2]);
+    a = colors.length === 4 ? Number(colors[3]) : 1;
+  } else {
+    return {};
+  }
+
+  // return { r: Math.floor(r), g: Math.floor(g), b: Math.floor(b), a, hex: `#${toHex(r)}${toHex(g)}${toHex(b)}` };
+  return {
+    r: r,
+    g: g,
+    b: b,
+    a: a,
+    hex: "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b))
+  };
+}
+export function transformColor(color, a) {
+  var _resolveColor = resolveColor(color),
+    r = _resolveColor.r,
+    g = _resolveColor.g,
+    b = _resolveColor.b,
+    hex = _resolveColor.hex;
+  return a === 1 ? hex : "RGBA(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+}
+export function getBackgroundAccordingColor(color, fixedAngle) {
+  if (typeof color === 'string') {
+    return {
+      background: color
+    };
+  } else if (Array.isArray(color)) {
+    var rebaseStops = color.concat();
+    rebaseStops.sort(function (a, b) {
+      return a.offset - b.offset;
+    });
+    var colors = rebaseStops.map(function (item, index) {
+      var _resolveColor2 = resolveColor(item.color),
+        r = _resolveColor2.r,
+        g = _resolveColor2.g,
+        b = _resolveColor2.b,
+        a = _resolveColor2.a;
+      if (a === 1 || index === rebaseStops.length - 1) {
+        return "".concat(item.color, " ").concat(item.offset, "%");
+      } else {
+        var _resolveColor3 = resolveColor(rebaseStops[index + 1].color),
+          nextR = _resolveColor3.r,
+          nextG = _resolveColor3.g,
+          nextB = _resolveColor3.b,
+          nextA = _resolveColor3.a;
+        var stepOpacity = (nextA - a) / 5;
+        var stepOffset = (rebaseStops[index + 1].offset - item.offset) / 5;
+        var stepR = (nextR - r) / 5;
+        var stepG = (nextG - g) / 5;
+        var stepB = (nextB - b) / 5;
+        return Array.from({
+          length: 5
+        }).map(function (d, i) {
+          return "".concat(transformColor("rgb(".concat(Math.round(r + stepR * i), ",").concat(Math.round(g + stepG * i), ",").concat(Math.round(b + stepB * i), ")"), a + stepOpacity * i), " ").concat(item.offset + stepOffset * i, "%");
+        }).join(',');
+      }
+    });
+    return {
+      backgroundImage: "linear-gradient(".concat(fixedAngle || 0, "deg, ").concat(colors.join(','), ")")
+    };
+  } else if (_typeof(color) === 'object') {
+    var _color$type = color.type,
+      type = _color$type === void 0 ? 'pure' : _color$type,
+      _color$linear = color.linear,
+      _color$linear2 = _color$linear === void 0 ? {
+        stops: [{
+          offset: 0,
+          color: '#000'
+        }, {
+          offset: 100,
+          color: '#fff'
+        }],
+        angle: 0,
+        opacity: 1
+      } : _color$linear,
+      stops = _color$linear2.stops,
+      angle = _color$linear2.angle,
+      opacity = _color$linear2.opacity,
+      _color$pure = color.pure,
+      pureColor = _color$pure === void 0 ? '#000' : _color$pure;
+    if (type === 'linear') {
+      var _rebaseStops = stops.concat();
+      _rebaseStops.sort(function (a, b) {
+        return a.offset - b.offset;
+      });
+      var _colors = _rebaseStops.map(function (item, index) {
+        var _resolveColor4 = resolveColor(item.color),
+          r = _resolveColor4.r,
+          g = _resolveColor4.g,
+          b = _resolveColor4.b,
+          a = _resolveColor4.a;
+        if (a === 1 || index === _rebaseStops.length - 1) {
+          return "".concat(transformColor(item.color, a * opacity), " ").concat(item.offset, "%");
+        } else {
+          var _resolveColor5 = resolveColor(_rebaseStops[index + 1].color),
+            nextR = _resolveColor5.r,
+            nextG = _resolveColor5.g,
+            nextB = _resolveColor5.b,
+            nextA = _resolveColor5.a;
+          var stepOpacity = (nextA - a) / 5;
+          var stepOffset = (_rebaseStops[index + 1].offset - item.offset) / 5;
+          var stepR = (nextR - r) / 5;
+          var stepG = (nextG - g) / 5;
+          var stepB = (nextB - b) / 5;
+          return Array.from({
+            length: 5
+          }).map(function (d, i) {
+            return "".concat(transformColor("rgb(".concat(Math.round(r + stepR * i), ",").concat(Math.round(g + stepG * i), ",").concat(Math.round(b + stepB * i), ")"), (a + stepOpacity * i) * opacity), " ").concat(item.offset + stepOffset * i, "%");
+          }).join(',');
+        }
+      });
+      return {
+        backgroundImage: "linear-gradient(".concat(fixedAngle ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
+      };
+    } else {
+      return {
+        background: pureColor
+      };
+    }
+  }
+}
+export function getMiddleColor(colors, offset) {
+  var leftColor, rightColor;
+  var leftColors = colors.filter(function (d) {
+    return d.offset < offset;
+  });
+  var rightColors = colors.filter(function (d) {
+    return d.offset > offset;
+  });
+  if (leftColors.length) {
+    leftColors.sort(function (a, b) {
+      return b.offset - a.offset;
+    });
+    leftColor = leftColors[0];
+  }
+  if (rightColors.length) {
+    rightColors.sort(function (a, b) {
+      return a.offset - b.offset;
+    });
+    rightColor = rightColors[0];
+  }
+  if (!leftColor) {
+    return rightColor.color;
+  }
+  if (!rightColor) {
+    return leftColor.color;
+  }
+
+  // console.log(leftColor, rightColor, leftColors, rightColors, '计算color');
+
+  var _resolveColor6 = resolveColor(leftColor.color),
+    leftR = _resolveColor6.r,
+    leftG = _resolveColor6.g,
+    leftB = _resolveColor6.b,
+    leftA = _resolveColor6.a;
+  var _resolveColor7 = resolveColor(rightColor.color),
+    rightR = _resolveColor7.r,
+    rightG = _resolveColor7.g,
+    rightB = _resolveColor7.b,
+    rightA = _resolveColor7.a;
+
+  // console.log(resolveColor(leftColor.color), resolveColor(rightColor.color), '计算color');
+
+  var newR = Math.round((rightR - leftR) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftR);
+  var newG = Math.round((rightG - leftG) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftG);
+  var newB = Math.round((rightB - leftB) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftB);
+  var newA = (rightA - leftA) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftA;
+  return newA === 1 ? "#".concat(toHex(newR)).concat(toHex(newG)).concat(toHex(newB)) : "RGBA(".concat(newR, ",").concat(newG, ",").concat(newB, ",").concat(newA, ")");
+}
+export function getHexValue(hex) {
+  var result = hex.replace(/^#/, '');
+  if (result.length === 1) {
+    result = result.repeat(6);
+  } else if (result.length === 2) {
+    result = result.repeat(3);
+  } else if (result.length === 3) {
+    result = result.replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3');
+  } else if (result.length === 4 || result.length === 5) {
+    result = result.slice(0, 3).replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3');
+  } else if (result.length > 6) {
+    result = result.slice(0, 6);
+  }
+  return '#' + result;
+}
+export function getLinearGradientStyle(color) {
+  var stops = color.stops,
+    angle = color.angle,
+    opacity = color.opacity;
+  var sortedColors = stops.concat().sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+  var linearString = sortedColors.map(function (d) {
+    return "".concat(tinycolor(d.color).toRgbString(), " ").concat(d.offset, "%");
+  }).join(', ');
+  return {
+    backgroundImage: "linear-gradient(".concat(angle, "deg, ").concat(linearString, ")"),
+    opacity: opacity
+  };
+}

package/dist/Watermark/index.d.ts

@@ -0,0 +1,2 @@
+import { Watermark } from '@arco-design/web-react';
+export default Watermark;

package/dist/Watermark/index.js

@@ -0,0 +1,2 @@
+import { Watermark } from '@arco-design/web-react';
+export default Watermark;

package/dist/Watermark/interface.d.ts

@@ -0,0 +1 @@
+export { WatermarkProps } from '@arco-design/web-react';

package/dist/Watermark/interface.js

@@ -0,0 +1 @@
+export { WatermarkProps } from '@arco-design/web-react';

package/dist/global.d.ts

@@ -0,0 +1,13 @@
+interface Window {
+  EyeDropper?: {
+    new (): EyeDropper;
+  };
+}
+
+interface EyeDropper {
+  open(): Promise<EyeDropperResult>;
+}
+
+interface EyeDropperResult {
+  sRGBHex: string;
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useClickOutside';
+export * from './useEventListener';
+export * from './useTheme';

package/dist/index.d.ts

@@ -131,5 +131,9 @@ export { default as Space } from './Space';
 export type { SpaceProps } from './Space/interface';
 export { default as Tag } from './Tag';
 export type { TagProps } from './Tag/interface';
+export { default as ColorsPicker } from './ColorsPicker';
+export type { ColorsPickerProps } from './ColorsPicker/interface';
 export { default as Color } from './Color';
 export { default as RangeColor } from './RangeColor';
+export { default as Watermark } from './Watermark';
+export type { WatermarkProps } from './Watermark/interface';

package/dist/index.js

@@ -65,7 +65,7 @@ export { default as Radio } from "./Radio";
 export { default as Select } from "./Select";
 export { default as Space } from "./Space";
 export { default as Tag } from "./Tag";
-// export { default as ColorPicker } from './ColorPicker';
-
+export { default as ColorsPicker } from "./ColorsPicker";
 export { default as Color } from "./Color";
-export { default as RangeColor } from "./RangeColor";
+export { default as RangeColor } from "./RangeColor";
+export { default as Watermark } from "./Watermark";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.0.50",
+  "version": "0.2.0",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "module": "dist/index.js",
@@ -47,23 +47,26 @@
     ]
   },
   "dependencies": {
-    "@easyv/react-icons": "4.14.0",
-    "ahooks": "^3.7.8",
+    "@easyv/react-icons": "4.24.0",
+    "ahooks": "^3.7.11",
     "classnames": "^2.3.2",
-    "rc-color-picker": "1.2.6"
+    "rc-color-picker": "1.2.6",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
-    "@arco-design/web-react": "2.57.2",
-    "@arco-themes/react-dtable": "0.0.40",
-    "@arco-themes/react-easytwin": "0.0.23",
+    "@arco-design/web-react": "2.62.0",
+    "@arco-themes/react-dtable": "0.0.44",
+    "@arco-themes/react-easytwin": "0.0.24",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@easyv/sync-to-mirror": "^0.0.2",
+    "@types/color": "^3.0.6",
     "@types/lodash": "^4.14.197",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/react-resizable": "^3.0.4",
     "@types/react-sticky": "^6.0.4",
+    "@types/tinycolor2": "^1.4.6",
     "@umijs/lint": "^4.0.0",
     "dayjs": "^1.11.9",
     "dnd-core": "^16.0.1",