musae 0.2.26 → 0.3.0

package/dist/components/watermark/hooks.cjs

@@ -0,0 +1,154 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+var painter = function painter(_ref) {
+  var _width = _ref.width,
+    _height = _ref.height,
+    _ref$ratio = _ref.ratio,
+    ratio = _ref$ratio === void 0 ? 1 : _ref$ratio;
+  var canvas = document.createElement("canvas");
+  var ctx = canvas.getContext("2d");
+  var width = _width * ratio;
+  var height = _height * ratio;
+  canvas.setAttribute("width", "".concat(width, "px"));
+  canvas.setAttribute("height", "".concat(height, "px"));
+  ctx.save();
+  return {
+    ctx: ctx,
+    canvas: canvas,
+    width: width,
+    height: height
+  };
+};
+/**
+ * @description
+ * watermarks
+ */
+var useWatermarks = function useWatermarks() {
+  var _useState = React.useState(function () {
+      return new Map();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    watermarks = _useState2[0],
+    setWatermarks = _useState2[1];
+  /// isWatermarkElement
+  var isWatermarkElement = relax.useEvent(function (element) {
+    return Array.from(watermarks.values()).includes(element);
+  });
+  var isWatermarkRewritten = relax.useEvent(function (mutation) {
+    // check is watermark removed
+    var isWatermarkRemoved = mutation.removedNodes.length > 0 && Array.from(mutation.removedNodes).some(function (node) {
+      return isWatermarkElement(node);
+    });
+    if (isWatermarkRemoved) return true;
+    // check is watermark changed
+    var isWatermarkChanged = mutation.type === "attributes" && isWatermarkElement(mutation.target);
+    return isWatermarkChanged;
+  });
+  /// add
+  var add = relax.useEvent(function (container, dataURL, size) {
+    var _watermarks$get;
+    if (!container) return null;
+    var watermarkElement = (_watermarks$get = watermarks.get(container)) !== null && _watermarks$get !== void 0 ? _watermarks$get : document.createElement("div");
+    watermarkElement.style.backgroundImage = "url('".concat(dataURL, "')");
+    watermarkElement.style.backgroundSize = "".concat(Math.floor(size), "px");
+    watermarkElement.style.width = "100%";
+    watermarkElement.style.height = "100%";
+    watermarkElement.style.visibility = "visible";
+    watermarkElement.style.position = "absolute";
+    watermarkElement.style.insetInlineStart = "0";
+    watermarkElement.style.insetBlockStart = "0";
+    // Prevents using the browser `Hide Element` to hide watermarks
+    watermarkElement.removeAttribute("class");
+    // add as a child
+    if (watermarkElement.parentElement !== container) {
+      container.append(watermarkElement);
+    }
+    // add into state
+    if (!watermarks.has(container)) {
+      setWatermarks(function (prev) {
+        return new Map(prev).set(container, watermarkElement);
+      });
+    }
+    return watermarkElement;
+  });
+  /// remove
+  var remove = function remove(container) {
+    var watermarkElement = watermarks.get(container);
+    if (!watermarkElement) return;
+    // remove child
+    container.removeChild(watermarkElement);
+    // remove from state
+    setWatermarks(function (prev) {
+      var next = new Map(prev);
+      next["delete"](container);
+      return next;
+    });
+  };
+  return {
+    isWatermarkElement: isWatermarkElement,
+    add: add,
+    remove: remove,
+    isWatermarkRewritten: isWatermarkRewritten
+  };
+};
+/**
+ * @description
+ * create clips
+ */
+var useClips = function useClips() {
+  var draw = relax.useEvent(function (mark, _ref2) {
+    var width = _ref2.width,
+      height = _ref2.height,
+      ratio = _ref2.ratio,
+      fontStyle = _ref2.fontStyle,
+      fontWeight = _ref2.fontWeight,
+      _fontSize = _ref2.fontSize,
+      fontFamily = _ref2.fontFamily,
+      textAlign = _ref2.textAlign,
+      color = _ref2.color;
+    var marked = painter({
+      width: width,
+      height: height,
+      ratio: ratio
+    });
+    if (mark instanceof HTMLImageElement) {
+      marked.ctx.drawImage(mark, 0, 0, marked.width, marked.height);
+    } else {
+      var marks = relax.toArray(mark);
+      var fontSize = Number(_fontSize) * ratio;
+      marked.ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(fontSize, "px/").concat(height, "px ").concat(fontFamily);
+      marked.ctx.fillStyle = color;
+      marked.ctx.textBaseline = "top";
+      marked.ctx.textAlign = textAlign;
+      marks.forEach(function (_mark, index) {
+        marked.ctx.fillText(_mark, marked.width / 2, index * fontSize);
+      });
+    }
+    // ==================== Rotate ====================
+    var angle = Math.PI / 180 * Number(-30);
+    var maxSize = Math.max(width, height);
+    var squareMark = painter({
+      height: maxSize,
+      width: maxSize,
+      ratio: ratio
+    });
+    // Copy from `ctx` and rotate
+    squareMark.ctx.translate(squareMark.width / 2, squareMark.height / 2);
+    squareMark.ctx.rotate(angle);
+    if (marked.width > 0 && marked.height > 0) {
+      squareMark.ctx.drawImage(marked.canvas, -marked.width / 2, -marked.height / 2);
+    }
+    return {
+      dataURL: squareMark.canvas.toDataURL(),
+      size: Math.max(squareMark.width / ratio, squareMark.height / ratio)
+    };
+  });
+  return {
+    draw: draw
+  };
+};
+
+exports.useClips = useClips;
+exports.useWatermarks = useWatermarks;

package/dist/components/watermark/watermark.cjs

@@ -0,0 +1,86 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+
+var Watermark = function Watermark(_ref) {
+  var children = _ref.children,
+    _mark = _ref.mark,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 120 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 64 : _ref$height,
+    _ref$font = _ref.font,
+    _ref$font2 = _ref$font === void 0 ? {} : _ref$font,
+    _ref$font2$color = _ref$font2.color,
+    color = _ref$font2$color === void 0 ? "rgba(0, 0, 0, 0.15)" : _ref$font2$color,
+    _ref$font2$fontSize = _ref$font2.fontSize,
+    fontSize = _ref$font2$fontSize === void 0 ? 16 : _ref$font2$fontSize,
+    _ref$font2$fontFamily = _ref$font2.fontFamily,
+    fontFamily = _ref$font2$fontFamily === void 0 ? "sans-serif" : _ref$font2$fontFamily,
+    _ref$font2$fontStyle = _ref$font2.fontStyle,
+    fontStyle = _ref$font2$fontStyle === void 0 ? "normal" : _ref$font2$fontStyle,
+    _ref$font2$fontWeight = _ref$font2.fontWeight,
+    fontWeight = _ref$font2$fontWeight === void 0 ? "normal" : _ref$font2$fontWeight,
+    _ref$font2$textAlign = _ref$font2.textAlign,
+    textAlign = _ref$font2$textAlign === void 0 ? "start" : _ref$font2$textAlign;
+  var watermarkRef = React.useRef(null);
+  var _useWatermarks = hooks.useWatermarks(),
+    add = _useWatermarks.add,
+    isWatermarkRewritten = _useWatermarks.isWatermarkRewritten;
+  var styled = {
+    watermark: {
+      className: "musaex-1n2onr6 musaex-b3r6kr"
+    },
+    marks: {
+      className: "musaex-1k094eu musaex-1xj1dsn"
+    }
+  };
+  var _useClips = hooks.useClips(),
+    draw = _useClips.draw;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mark = _React$useState2[0],
+    setMark = _React$useState2[1];
+  var ratio = relax.useDevicePixelRatio();
+  var sync = relax.useRaf(function () {
+    var canvas = document.createElement("canvas");
+    var ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    setMark(draw(_mark, {
+      ratio: ratio,
+      width: width,
+      height: height,
+      color: color,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      textAlign: textAlign
+    }));
+  });
+  relax.useMutateObserver(watermarkRef.current, function (mutations) {
+    mutations.forEach(function (mutation) {
+      if (!isWatermarkRewritten(mutation)) return;
+      sync();
+    });
+  });
+  React.useEffect(function () {
+    if (!mark) return;
+    add(watermarkRef.current, mark.dataURL, mark.size);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mark]);
+  React.useEffect(function () {
+    sync();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_mark, width, height, ratio, color, fontFamily, fontSize, fontStyle, fontWeight, textAlign]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.watermark.className,
+    style: styled.watermark.style,
+    ref: watermarkRef
+  }, children);
+};
+
+exports.default = Watermark;

package/dist/components/watermark/{watermark.js → watermark.mjs}

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useEffect } from 'react';
 import { useDevicePixelRatio, useRaf, useMutateObserver } from '@aiszlab/relax';
-import { useWatermarks, useClips } from './hooks.js';
+import { useWatermarks, useClips } from './hooks.mjs';
 
 var Watermark = function Watermark(_ref) {
   var children = _ref.children,
@@ -80,6 +80,5 @@ var Watermark = function Watermark(_ref) {
     ref: watermarkRef
   }, children);
 };
-var Watermark$1 = Watermark;
 
-export { Watermark$1 as default };
+export { Watermark as default };

package/dist/hooks/use-class-names.cjs

@@ -0,0 +1,12 @@
+var React = require('react');
+var context = require('../components/config/context.cjs');
+
+/**
+ * @description
+ * the component class names
+ */
+var useClassNames = function useClassNames(token) {
+  return React.useContext(context.default).classNames[token];
+};
+
+exports.useClassNames = useClassNames;

package/dist/hooks/use-class-names.d.ts

@@ -210,6 +210,7 @@ export declare const useClassNames: <T extends ComponentToken = ComponentToken>(
         0: string;
         1: string;
         2: string;
+        3: string;
     };
     38: {
         0: string;

package/dist/hooks/{use-class-names.js → use-class-names.mjs}

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import Context from '../components/config/context.js';
+import Context from '../components/config/context.mjs';
 
 /**
  * @description

package/dist/hooks/use-closable.cjs

@@ -0,0 +1,61 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+var button = require('../components/button/button.cjs');
+var keyboard = require('../utils/keyboard.cjs');
+var close = require('../components/icon/icons/navigation/close.cjs');
+
+/**
+ * @description
+ * for dialog, close means some events or some elements
+ * in musae, we use a hook to handle this
+ *
+ * by default, closable may be different type, like `false` | ['esc'] | undefined
+ * resolve these types, we convert to `Set<Closable>`
+ */
+var useClosable = function useClosable(_ref) {
+  var onClose = _ref.onClose,
+    closable = _ref.closable;
+  // convert closable to enum sets
+  var triggers = React.useMemo(function () {
+    if (relax.isUndefined(closable) || closable === true) {
+      return new Set(["close", "esc", "overlay"]);
+    }
+    return new Set(closable || []);
+  }, [closable]);
+  // closer react element for dialog
+  var closer = React.useMemo(function () {
+    if (!triggers.has("close")) return null;
+    var styled = {
+      className: "musaex-167ikqz musaex-134unf5"
+    };
+    return /*#__PURE__*/React.createElement(button.Button, {
+      shape: "circular",
+      variant: "text",
+      prefix: /*#__PURE__*/React.createElement(close.default, null),
+      onClick: onClose,
+      className: styled.className,
+      style: _objectSpread(_objectSpread({}, styled.style), {}, {
+        position: "absolute"
+      }),
+      size: "small"
+    });
+  }, [triggers, onClose]);
+  /// overlay click callback
+  var onOverlayClick = relax.useEvent(function () {
+    if (!triggers.has("overlay")) return;
+    onClose === null || onClose === void 0 || onClose();
+  });
+  /// esc key press callback
+  var onKeyDown = relax.useEvent(function (e) {
+    if (e.key !== keyboard.Keyboard.Escape) return;
+    onClose === null || onClose === void 0 || onClose();
+  });
+  return {
+    closer: closer,
+    onOverlayClick: onOverlayClick,
+    onKeyDown: onKeyDown
+  };
+};
+
+exports.useClosable = useClosable;

package/dist/hooks/use-closable.d.ts

@@ -8,7 +8,7 @@ export type Closable = "esc" | "overlay" | "close";
  * by default, closable may be different type, like `false` | ['esc'] | undefined
  * resolve these types, we convert to `Set<Closable>`
  */
-export declare const useClosable: ({ onClose, closable }: {
+export declare const useClosable: ({ onClose, closable, }: {
     onClose?: VoidFunction;
     closable: boolean | Closable[];
 }) => {

package/dist/hooks/{use-closable.js → use-closable.mjs}

@@ -1,9 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { isUndefined, useEvent } from '@aiszlab/relax';
 import React, { useMemo } from 'react';
-import Button from '../components/button/button.js';
-import { Keyboard } from '../utils/keyboard.js';
-import Close from '../components/icon/icons/navigation/close.js';
+import { Button } from '../components/button/button.mjs';
+import { Keyboard } from '../utils/keyboard.mjs';
+import Close from '../components/icon/icons/navigation/close.mjs';
 
 /**
  * @description

package/dist/hooks/use-container.cjs

@@ -0,0 +1,28 @@
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * container
+ */
+var useContainer = function useContainer(_ref) {
+  var _container = _ref.container,
+    _ref$useBody = _ref.useBody,
+    useBody = _ref$useBody === void 0 ? true : _ref$useBody;
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var container = React.useMemo(function () {
+    if (relax.isFunction(_container)) return _container();
+    return _container !== null && _container !== void 0 ? _container : relax.isDomUsable() && useBody ? document.body : null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_container, useBody].concat(_toConsumableArray(deps)));
+  var isDocumentBody = React.useMemo(function () {
+    return relax.isDomUsable() && _container === document.body;
+  }, [_container]);
+  return {
+    container: container,
+    isDocumentBody: isDocumentBody
+  };
+};
+
+exports.useContainer = useContainer;

package/dist/hooks/use-expandable.cjs

@@ -0,0 +1,74 @@
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var relax = require('@aiszlab/relax');
+
+/**
+ * @description
+ * expand handler
+ */
+var useExpandable = function useExpandable() {
+  var expand = relax.useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+      var _ref3, element, animate;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _ref3 = _slicedToArray(_ref, 2), element = _ref3[0], animate = _ref3[1];
+            // style play like display: none
+            element.current.style.height = "0";
+            element.current.style.overflow = "hidden";
+            element.current.style.display = "inherit";
+            _context.next = 6;
+            return animate(element.current, {
+              height: "auto"
+            });
+          case 6:
+            element.current.style.height = "";
+            element.current.style.overflow = "";
+            element.current.style.display = "";
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+  var collapse = relax.useEvent(/*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref4) {
+      var _ref6, element, animate;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _ref6 = _slicedToArray(_ref4, 2), element = _ref6[0], animate = _ref6[1];
+            element.current.style.overflow = "hidden";
+            element.current.style.height = "auto";
+            element.current.style.display = "inherit";
+            _context2.next = 6;
+            return animate(element.current, {
+              height: 0
+            });
+          case 6:
+            element.current.style.height = "";
+            element.current.style.overflow = "";
+            element.current.style.display = "none";
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x2) {
+      return _ref5.apply(this, arguments);
+    };
+  }());
+  return {
+    expand: expand,
+    collapse: collapse
+  };
+};
+
+exports.useExpandable = useExpandable;

package/dist/hooks/use-gutters.cjs

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var useGutters = function useGutters(_ref) {
+  var gutter = _ref.gutter;
+  var columnGutter = typeof gutter === "number" ? gutter : gutter[0];
+  var rowGutter = typeof gutter === "number" ? gutter : gutter[1];
+  /// col gutter and row gutter
+  return React.useMemo(function () {
+    return [columnGutter, rowGutter];
+  }, [columnGutter, rowGutter]);
+};
+
+exports.useGutters = useGutters;

package/dist/hooks/use-lazy-boolean.cjs

@@ -0,0 +1,64 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+var useLazyBoolean = function useLazyBoolean() {
+  var _useBoolean = relax.useBoolean(),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isTrue = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    _turnOn = _useBoolean2$.turnOn,
+    _turnOff = _useBoolean2$.turnOff,
+    _toggle = _useBoolean2$.toggle;
+  var _useTimer = relax.useTimer(),
+    timeout = _useTimer.timeout;
+  var turnOn = React.useCallback(function () {
+    timeout(function () {
+      _turnOn();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var turnOff = React.useCallback(function () {
+    timeout(function () {
+      _turnOff();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var appear = React.useCallback(function () {
+    var _Promise$withResolver = Promise.withResolvers(),
+      resolve = _Promise$withResolver.resolve,
+      promise = _Promise$withResolver.promise;
+    timeout(function () {
+      turnOn();
+      resolve();
+    }, 100);
+    return promise;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var disappear = React.useCallback(function () {
+    var _Promise$withResolver2 = Promise.withResolvers(),
+      resolve = _Promise$withResolver2.resolve,
+      promise = _Promise$withResolver2.promise;
+    timeout(function () {
+      turnOff();
+      resolve();
+    }, 100);
+    return promise;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var toggle = React.useCallback(function () {
+    timeout(function () {
+      _toggle();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return [isTrue, {
+    turnOn: turnOn,
+    turnOff: turnOff,
+    toggle: toggle,
+    appear: appear,
+    disappear: disappear
+  }];
+};
+
+exports.useLazyBoolean = useLazyBoolean;