react-vant-nova 1.0.0-test

package/lib/toast/Toast.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+function _icons() {
+  const data = require("@react-vant/icons");
+  _icons = function () {
+    return data;
+  };
+  return data;
+}
+var _popup = _interopRequireDefault(require("../popup"));
+var _loading = _interopRequireDefault(require("../loading"));
+var _lockClick = require("./lock-click");
+var _utils = require("../utils");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [bem] = (0, _utils.createNamespace)('toast');
+const Toast = p => {
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    type: 'info',
+    duration: 2000,
+    position: 'middle',
+    transition: 'rv-fade',
+    loadingType: 'circular',
+    overlay: false
+  });
+  const onClick = () => {
+    if (props.closeOnClick) {
+      props.onClose();
+    }
+  };
+  (0, _react().useEffect)(() => {
+    if (!props.visible) {
+      (0, _lockClick.lockClick)(false);
+      return;
+    }
+    let clickable = false;
+    const newValue = props.visible && props.forbidClick;
+    if (clickable !== newValue) {
+      clickable = newValue;
+      (0, _lockClick.lockClick)(clickable);
+    }
+  }, [props.visible, props.forbidClick]);
+  const renderIcon = () => {
+    const {
+      icon,
+      type,
+      iconSize,
+      loadingType
+    } = props;
+    const hasIcon = icon || type === 'success' || type === 'fail';
+    if (hasIcon) {
+      const buildInIcon = type === 'fail' ? (0, _jsxRuntime().jsx)(_icons().Cross, {}) : (0, _jsxRuntime().jsx)(_icons().Success, {});
+      return _react().default.cloneElement(icon || buildInIcon, {
+        className: (0, _clsx().default)(bem('icon')),
+        fontSize: iconSize
+      });
+    }
+    if (type === 'loading') {
+      return (0, _jsxRuntime().jsx)(_loading.default, {
+        className: (0, _clsx().default)(bem('loading')),
+        type: loadingType
+      });
+    }
+    return null;
+  };
+  const renderMessage = () => {
+    const {
+      message
+    } = props;
+    if ((0, _utils.isDef)(message) && message !== '') {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('info'))
+      }, {
+        children: message
+      }));
+    }
+    return null;
+  };
+  return (0, _jsxRuntime().jsxs)(_popup.default, Object.assign({
+    className: (0, _clsx().default)([bem([props.position, {
+      [props.type]: !props.icon
+    }]), props.className]),
+    visible: props.visible,
+    overlay: props.overlay,
+    transition: props.transition,
+    overlayClass: props.overlayClass,
+    overlayStyle: props.overlayStyle,
+    closeOnClickOverlay: props.closeOnClickOverlay,
+    lockScroll: false,
+    onClick: onClick,
+    onClose: props.onClose,
+    onClosed: props.onClosed,
+    onOpened: props.onOpened,
+    teleport: props.teleport
+  }, {
+    children: [renderIcon(), renderMessage()]
+  }));
+};
+var _default = exports.default = Toast;

package/lib/toast/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Toast from './method';
+export default Toast;
+export { Toast };
+export type { ToastType, ToastPosition, ToastOptions, ToastReturnType, } from './PropsType';

package/lib/toast/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _method.default;
+  }
+});
+exports.default = void 0;
+require("./style/index.css");
+var _method = _interopRequireDefault(require("./method"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _method.default;

package/lib/toast/lock-click.d.ts

@@ -0,0 +1 @@
+export declare function lockClick(lock: boolean): void;

package/lib/toast/lock-click.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lockClick = lockClick;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let lockCount = 0;
+function lockClick(lock) {
+  if (lock) {
+    if (!lockCount) {
+      document.body.classList.add('rv-toast--unclickable');
+    }
+    lockCount += 1;
+  } else if (lockCount) {
+    lockCount -= 1;
+    if (!lockCount) {
+      document.body.classList.remove('rv-toast--unclickable');
+    }
+  }
+}

package/lib/toast/method.d.ts

@@ -0,0 +1,3 @@
+import { ToastInstance } from './PropsType';
+declare const _default: ToastInstance;
+export default _default;

package/lib/toast/method.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../utils");
+var _getContainer = require("../utils/dom/getContainer");
+var _lockClick = require("./lock-click");
+var _Toast = _interopRequireDefault(require("./Toast"));
+var _render = require("../utils/dom/render");
+var _canUseDom = _interopRequireDefault(require("../utils/dom/canUseDom"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const defaultOptions = {
+  message: '',
+  className: '',
+  type: 'info',
+  position: 'middle',
+  forbidClick: false,
+  duration: 2000,
+  teleport: () => document.body
+};
+const toastArray = [];
+let allowMultiple = false;
+let currentOptions = (0, _utils.extend)({}, defaultOptions);
+// default options of specific type
+const defaultOptionsMap = new Map();
+// 同步的销毁
+function syncClear() {
+  let fn = toastArray.pop();
+  while (fn) {
+    fn();
+    fn = toastArray.pop();
+  }
+}
+// 针对 toast 还没弹出来就立刻销毁的情况，将销毁放到下一个 event loop 中，避免销毁失败。
+function nextTickClear() {
+  setTimeout(syncClear);
+}
+// 可返回用于销毁此弹窗的方法
+const ToastObj = p => {
+  if (!(0, _canUseDom.default)()) return null;
+  const props = parseOptions(p);
+  const update = {
+    config: () => {},
+    clear: () => null
+  };
+  let timer = 0;
+  const {
+    onClose,
+    teleport
+  } = props;
+  const container = document.createElement('div');
+  const bodyContainer = (0, _getContainer.resolveContainer)(teleport);
+  bodyContainer.appendChild(container);
+  const TempToast = () => {
+    const options = Object.assign({
+      duration: 2000
+    }, props);
+    const [visible, setVisible] = (0, _react().useState)(false);
+    const [state, setState] = (0, _react().useState)(Object.assign({}, options));
+    // clearDOM after animation
+    const internalOnClosed = (0, _react().useCallback)(() => {
+      if (state.forbidClick) {
+        (0, _lockClick.lockClick)(false);
+      }
+      setVisible(false);
+      window.setTimeout(() => {
+        const unmountResult = (0, _render.unmount)(container);
+        if (unmountResult && container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+      }, +state.duration || +defaultOptions.duration);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [container]);
+    // close with animation
+    const destroy = (0, _react().useCallback)(() => {
+      setVisible(false);
+      if (onClose) onClose();
+    }, []);
+    update.clear = internalOnClosed;
+    update.config = (0, _react().useCallback)(nextState => {
+      setState(prev => typeof nextState === 'function' ? Object.assign(Object.assign({}, prev), nextState(prev)) : Object.assign(Object.assign({}, prev), nextState));
+    }, [setState]);
+    (0, _react().useEffect)(() => {
+      setVisible(true);
+      if (!allowMultiple) syncClear();
+      toastArray.push(internalOnClosed);
+      if (state.duration !== 0 && 'duration' in state) {
+        timer = window.setTimeout(destroy, +state.duration);
+      }
+      return () => {
+        if (timer !== 0) {
+          window.clearTimeout(timer);
+        }
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (0, _jsxRuntime().jsx)(_Toast.default, Object.assign({}, state, {
+      visible: visible,
+      teleport: () => container,
+      onClose: destroy,
+      onClosed: internalOnClosed
+    }));
+  };
+  (0, _render.render)((0, _jsxRuntime().jsx)(TempToast, {}), container);
+  return update;
+};
+function parseOptions(message) {
+  if ((0, _utils.isObject)(message)) {
+    return message;
+  }
+  return {
+    message
+  };
+}
+const createMethod = type => options => ToastObj(Object.assign(Object.assign(Object.assign(Object.assign({}, currentOptions), defaultOptionsMap.get(type)), parseOptions(options)), {
+  type
+}));
+['info', 'loading', 'success', 'fail'].forEach(method => {
+  ToastObj[method] = createMethod(method);
+});
+ToastObj.allowMultiple = (value = true) => {
+  allowMultiple = value;
+};
+ToastObj.clear = nextTickClear;
+function setDefaultOptions(type, options) {
+  if (typeof type === 'string') {
+    defaultOptionsMap.set(type, options);
+  } else {
+    (0, _utils.extend)(currentOptions, type);
+  }
+}
+ToastObj.setDefaultOptions = setDefaultOptions;
+ToastObj.resetDefaultOptions = type => {
+  if (typeof type === 'string') {
+    defaultOptionsMap.delete(type);
+  } else {
+    currentOptions = (0, _utils.extend)({}, defaultOptions);
+    defaultOptionsMap.clear();
+  }
+};
+const Toast = ToastObj;
+var _default = exports.default = Toast;

package/lib/toast/style/index.css

@@ -0,0 +1,72 @@
+:root {
+  --rv-toast-max-width: 70%;
+  --rv-toast-font-size: var(--rv-font-size-md);
+  --rv-toast-text-color: var(--rv-white);
+  --rv-toast-loading-icon-color: var(--rv-white);
+  --rv-toast-line-height: var(--rv-line-height-md);
+  --rv-toast-border-radius: var(--rv-border-radius-lg);
+  --rv-toast-background-color: rgba(0, 0, 0, 0.7);
+  --rv-toast-icon-size: 36px;
+  --rv-toast-text-min-width: 96px;
+  --rv-toast-text-padding: var(--rv-padding-xs) var(--rv-padding-sm);
+  --rv-toast-default-padding: var(--rv-padding-md);
+  --rv-toast-default-width: 88px;
+  --rv-toast-default-min-height: 88px;
+  --rv-toast-position-top-distance: 20%;
+  --rv-toast-position-bottom-distance: 20%;
+}
+.rv-toast--unclickable {
+  overflow: hidden;
+  cursor: not-allowed;
+}
+.rv-toast--unclickable * {
+  pointer-events: none;
+}
+.rv-toast.rv-popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  width: var(--rv-toast-default-width);
+  max-width: var(--rv-toast-max-width);
+  min-height: var(--rv-toast-default-min-height);
+  padding: var(--rv-toast-default-padding);
+  color: var(--rv-toast-text-color);
+  font-size: var(--rv-toast-font-size);
+  line-height: var(--rv-toast-line-height);
+  white-space: pre-wrap;
+  text-align: center;
+  word-break: break-all;
+  background-color: var(--rv-toast-background-color);
+  border-radius: var(--rv-toast-border-radius);
+  transition: all var(--rv-animation-duration-fast);
+}
+.rv-toast.rv-toast--info,
+.rv-toast.rv-toast--html {
+  width: fit-content;
+  min-width: var(--rv-toast-text-min-width);
+  min-height: 0;
+  padding: var(--rv-toast-text-padding);
+}
+.rv-toast.rv-toast--info .rv-toast__info,
+.rv-toast.rv-toast--html .rv-toast__info {
+  margin-top: 0;
+}
+.rv-toast.rv-toast--top {
+  top: var(--rv-toast-position-top-distance);
+}
+.rv-toast.rv-toast--bottom {
+  top: auto;
+  bottom: var(--rv-toast-position-bottom-distance);
+}
+.rv-toast__icon {
+  font-size: var(--rv-toast-icon-size);
+}
+.rv-toast__loading {
+  padding: var(--rv-padding-base);
+  color: var(--rv-toast-loading-icon-color);
+}
+.rv-toast__info {
+  margin-top: var(--rv-padding-xs);
+}

package/lib/typography/Ellipsis.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { EllipsisProps } from './PropsType';
+declare const Ellipsis: FC<EllipsisProps>;
+export default Ellipsis;

package/lib/typography/Ellipsis.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../hooks");
+var _useResizeEffect = require("../hooks/use-resize-effect");
+var _event = require("../utils/dom/event");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Ellipsis = p => {
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    rows: 1,
+    expandText: '',
+    collapseText: '',
+    suffixText: '',
+    symbol: '...',
+    stopPropagationForActionButtons: []
+  });
+  const rootRef = (0, _react().useRef)(null);
+  const [ellipsised, setEllipsised] = (0, _react().useState)({});
+  const [expanded, setExpanded] = (0, _react().useState)(false);
+  const [exceeded, setExceeded] = (0, _react().useState)(false);
+  const suffixStr = (0, _react().useMemo)(() => {
+    if (props.suffixText) return props.suffixText;
+    if (props.suffixCount > 0) {
+      return props.children.slice(-props.suffixCount).trim();
+    }
+    return '';
+  }, [props.suffixCount, props.suffixText]);
+  function calcEllipsised() {
+    const root = rootRef.current;
+    if (!root) return;
+    const originStyle = window.getComputedStyle(root);
+    const container = document.createElement('div');
+    const styleNames = Array.prototype.slice.apply(originStyle);
+    styleNames.forEach(name => {
+      container.style.setProperty(name, originStyle.getPropertyValue(name));
+    });
+    container.style.position = 'fixed';
+    container.style.left = '999999px';
+    container.style.top = '999999px';
+    container.style.zIndex = '-1000';
+    container.style.height = 'auto';
+    container.style.minHeight = 'auto';
+    container.style.maxHeight = 'auto';
+    container.style.textOverflow = 'clip';
+    container.style.whiteSpace = 'normal';
+    container.style.webkitLineClamp = 'unset';
+    container.style.display = 'block';
+    const lineHeight = pxToNumber(originStyle.lineHeight);
+    const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
+    container.innerHTML = props.children;
+    document.body.appendChild(container);
+    if (container.offsetHeight <= maxHeight) {
+      setExceeded(false);
+    } else {
+      setExceeded(true);
+      const end = props.children.length;
+      const actionText = expanded ? props.collapseText : props.expandText;
+      // eslint-disable-next-line no-inner-declarations
+      function check(left, right) {
+        if (right - left <= 1) {
+          return {
+            leading: props.children.slice(0, left) + props.symbol
+          };
+        }
+        const middle = Math.round((left + right) / 2);
+        container.innerHTML = props.children.slice(0, middle) + props.symbol + suffixStr + actionText;
+        if (container.offsetHeight <= maxHeight) {
+          return check(middle, right);
+        }
+        return check(left, middle);
+      }
+      const ellipsised = check(0, end);
+      setEllipsised(ellipsised);
+    }
+    document.body.removeChild(container);
+  }
+  (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
+    calcEllipsised();
+  }, [props.children, props.rows, suffixStr, props.expandText, props.collapseText]);
+  const onExpandClick = isExpend => {
+    var _a;
+    (_a = props.onExpend) === null || _a === void 0 ? void 0 : _a.call(props, isExpend);
+    setExpanded(isExpend);
+  };
+  const expandActionElement = exceeded && props.expandText ? (0, _event.withStopPropagation)(props.stopPropagationForActionButtons, (0, _jsxRuntime().jsx)("a", Object.assign({
+    onClick: () => {
+      onExpandClick(true);
+    }
+  }, {
+    children: props.expandText
+  }))) : null;
+  const collapseActionElement = exceeded && props.expandText ? (0, _event.withStopPropagation)(props.stopPropagationForActionButtons, (0, _jsxRuntime().jsx)("a", Object.assign({
+    onClick: () => {
+      onExpandClick(false);
+    }
+  }, {
+    children: props.collapseText
+  }))) : null;
+  const renderContent = () => {
+    if (!exceeded) {
+      return props.children;
+    }
+    if (expanded) {
+      return (0, _jsxRuntime().jsxs)(_jsxRuntime().Fragment, {
+        children: [props.children, collapseActionElement]
+      });
+    } else {
+      return (0, _jsxRuntime().jsxs)(_jsxRuntime().Fragment, {
+        children: [ellipsised.leading, suffixStr, expandActionElement]
+      });
+    }
+  };
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    ref: rootRef,
+    className: (0, _clsx().default)('rv-typography__ellipsis', props.className),
+    style: props.style
+  }, {
+    children: renderContent()
+  }));
+};
+function pxToNumber(value) {
+  if (!value) return 0;
+  const match = value.match(/^\d*(\.\d*)?/);
+  return match ? Number(match[0]) : 0;
+}
+var _default = exports.default = Ellipsis;

package/lib/typography/PropsType.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BaseTypeProps, PropagationEvent } from '../utils';
+export declare type EllipsisProps = {
+    children: string;
+    rows?: number;
+    symbol?: string;
+    expandText?: string;
+    collapseText?: string;
+    suffixText?: string;
+    suffixCount?: number;
+    stopPropagationForActionButtons?: PropagationEvent[];
+    onExpend?: (isExpend: boolean) => void;
+    onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & Omit<BaseTypeProps, 'children'>;
+export declare type TypographyType = 'danger' | 'secondary' | 'light' | 'primary' | 'success' | 'warning';
+export declare type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export declare type TypographyTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface TypographyBaseProps extends BaseTypeProps {
+    type?: TypographyType;
+    color?: string | TypographyType;
+    size?: TypographySize;
+    level?: TypographyTitleLevel;
+    disabled?: boolean;
+    delete?: boolean;
+    underline?: boolean;
+    center?: boolean;
+    strong?: boolean;
+    ellipsis?: boolean | number | Omit<EllipsisProps, 'children'>;
+    onClick?: (event: React.MouseEvent) => void;
+    tag?: string;
+}
+export declare type TypographyTextProps = Omit<TypographyBaseProps, 'level'>;
+export declare type TypographyTitleProps = Omit<TypographyBaseProps, 'size' | 'tag'>;
+export declare type TypographyLinkProps = Omit<TypographyBaseProps, 'level'> & React.AnchorHTMLAttributes<HTMLAnchorElement>;

package/lib/typography/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/typography/Typography.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TypographyBaseProps } from './PropsType';
+declare const TypographyBase: React.FC<TypographyBaseProps & {
+    renderType: string;
+}>;
+export default TypographyBase;