shopee-ui-react 0.0.1-security → 2.10.49

package/es/components/skeleton/Skeleton.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import ConfigProvider from '../config-provider';
+
+var Skeleton = function Skeleton(props) {
+  var customizePrefixCls = props.prefixCls,
+      half = props.half,
+      type = props.type,
+      children = props.children,
+      _props$className = props.className,
+      propsClassName = _props$className === void 0 ? '' : _props$className,
+      style = props.style;
+
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  var className = useMemo(function () {
+    return classNames(propsClassName, prefixCls, type ? "".concat(prefixCls, "__").concat(type) : "".concat(prefixCls, "__line"));
+  }, [propsClassName, type, prefixCls]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, type === 'line' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "__line-first")
+  }), !half && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "__line-second")
+  })), children);
+};
+
+Skeleton.defaultProps = {
+  type: 'line',
+  half: false
+};
+export default Skeleton;

package/es/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Skeleton from './Skeleton';
+export default Skeleton;

package/es/components/skeleton/index.js

@@ -0,0 +1,2 @@
+import Skeleton from './Skeleton';
+export default Skeleton;

package/es/components/skeleton/types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type Type = 'line' | 'square' | 'circle';
+export interface SkeletonProps {
+    /** prefix of classname */
+    prefixCls?: string;
+    /** type of skeleton, including line, square and circle */
+    type?: Type;
+    /** show half of skeleton, only when type is line */
+    half?: boolean;
+    /** custom class */
+    className?: string;
+    /** custom style */
+    style?: React.CSSProperties;
+    /** children */
+    children?: React.ReactNode;
+}
+export {};

package/es/components/slider/Slider.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { TooltipPlacement } from '../tooltip';
+export interface SliderMarks {
+    [key: number]: React.ReactNode | {
+        style: React.CSSProperties;
+        label: React.ReactNode;
+    };
+}
+interface HandleGeneratorInfo {
+    value?: number;
+    dragging?: boolean;
+    index: number;
+}
+export declare type HandleGeneratorFn = (config: {
+    tooltipPrefixCls?: string;
+    prefixCls?: string;
+    info: HandleGeneratorInfo;
+}) => React.ReactElement;
+export interface SliderBaseProps {
+    prefixCls?: string;
+    tooltipPrefixCls?: string;
+    reverse?: boolean;
+    min?: number;
+    max?: number;
+    step?: null | number;
+    marks?: SliderMarks;
+    dots?: boolean;
+    included?: boolean;
+    disabled?: boolean;
+    vertical?: boolean;
+    tipFormatter?: null | ((value?: number) => React.ReactNode);
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    tooltipVisible?: boolean;
+    tooltipPlacement?: TooltipPlacement;
+    getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    autoFocus?: boolean;
+}
+export interface SliderSingleProps extends SliderBaseProps {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    onAfterChange?: (value: number) => void;
+    handleStyle?: React.CSSProperties;
+    trackStyle?: React.CSSProperties;
+}
+export interface SliderRangeProps extends SliderBaseProps {
+    range: true | SliderRange;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+    onAfterChange?: (value: [number, number]) => void;
+    handleStyle?: React.CSSProperties[];
+    trackStyle?: React.CSSProperties[];
+}
+interface SliderRange {
+    draggableTrack?: boolean;
+}
+export declare type Visibles = {
+    [index: number]: boolean;
+};
+declare const Slider: React.ForwardRefExoticComponent<(SliderSingleProps & React.RefAttributes<unknown>) | (SliderRangeProps & React.RefAttributes<unknown>)>;
+export default Slider;

package/es/components/slider/Slider.js

@@ -0,0 +1,138 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import RcSlider, { Range as RcRange, Handle as RcHandle } from 'rc-slider';
+import SliderTooltip from './SliderTooltip';
+import ConfigProvider from '../config-provider';
+var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      getPopupContainer = _React$useContext.getPopupContainer;
+
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visibles = _React$useState2[0],
+      setVisibles = _React$useState2[1];
+
+  var toggleTooltipVisible = function toggleTooltipVisible(index, visible) {
+    setVisibles(function (prev) {
+      return Object.assign(Object.assign({}, prev), _defineProperty({}, index, visible));
+    });
+  };
+
+  var getTooltipPlacement = function getTooltipPlacement(tooltipPlacement, vertical) {
+    if (tooltipPlacement) {
+      return tooltipPlacement;
+    }
+
+    if (!vertical) {
+      return 'top';
+    }
+
+    return 'right';
+  };
+
+  var handleWithTooltip = function handleWithTooltip(_a) {
+    var tooltipPrefixCls = _a.tooltipPrefixCls,
+        prefixCls = _a.prefixCls,
+        _b = _a.info,
+        value = _b.value,
+        dragging = _b.dragging,
+        index = _b.index,
+        restProps = __rest(_b, ["value", "dragging", "index"]);
+
+    var tipFormatter = props.tipFormatter,
+        tooltipVisible = props.tooltipVisible,
+        tooltipPlacement = props.tooltipPlacement,
+        getTooltipPopupContainer = props.getTooltipPopupContainer,
+        vertical = props.vertical;
+    var isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
+    var visible = tooltipVisible || tooltipVisible === undefined && isTipFormatter;
+    return /*#__PURE__*/React.createElement(SliderTooltip, {
+      prefixCls: tooltipPrefixCls,
+      content: tipFormatter ? tipFormatter(value) : '',
+      visible: visible,
+      placement: getTooltipPlacement(tooltipPlacement, vertical),
+      key: index,
+      overlayClassName: "".concat(prefixCls, "-tooltip"),
+      getPopupContainer: getTooltipPopupContainer || getPopupContainer
+    }, /*#__PURE__*/React.createElement(RcHandle, _extends({}, restProps, {
+      value: value,
+      onMouseEnter: function onMouseEnter() {
+        return toggleTooltipVisible(index, true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return toggleTooltipVisible(index, false);
+      }
+    })));
+  };
+
+  var customizePrefixCls = props.prefixCls,
+      customizeTooltipPrefixCls = props.tooltipPrefixCls,
+      range = props.range,
+      className = props.className,
+      restProps = __rest(props, ["prefixCls", "tooltipPrefixCls", "range", "className"]);
+
+  var prefixCls = getPrefixCls('slider', customizePrefixCls);
+  var tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls); // extrack draggableTrack from range={{ ... }}
+
+  var draggableTrack;
+
+  if (_typeof(range) === 'object') {
+    draggableTrack = range.draggableTrack;
+  }
+
+  if (range) {
+    return /*#__PURE__*/React.createElement(RcRange, _extends({}, restProps, {
+      step: restProps.step,
+      draggableTrack: draggableTrack,
+      className: className,
+      ref: ref,
+      handle: function handle(info) {
+        return handleWithTooltip({
+          tooltipPrefixCls: tooltipPrefixCls,
+          prefixCls: prefixCls,
+          info: info
+        });
+      },
+      prefixCls: prefixCls
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(RcSlider, _extends({}, restProps, {
+    step: restProps.step,
+    className: className,
+    ref: ref,
+    handle: function handle(info) {
+      return handleWithTooltip({
+        tooltipPrefixCls: tooltipPrefixCls,
+        prefixCls: prefixCls,
+        info: info
+      });
+    },
+    prefixCls: prefixCls
+  }));
+});
+Slider.displayName = 'Slider';
+Slider.defaultProps = {
+  tipFormatter: function tipFormatter(value) {
+    return typeof value === 'number' ? value.toString() : '';
+  }
+};
+export default Slider;

package/es/components/slider/SliderTooltip.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SliderTooltip: React.ForwardRefExoticComponent<(import("../tooltip").TooltipPropsWithOverlay & React.RefAttributes<unknown>) | (import("../tooltip").TooltipPropsWithContent & React.RefAttributes<unknown>)>;
+export default SliderTooltip;

package/es/components/slider/SliderTooltip.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef, useEffect } from 'react';
+import { composeRef } from '../../utils/ref';
+import raf from '../../utils/raf';
+import Tooltip from '../tooltip';
+var SliderTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var visible = props.visible;
+  var innerRef = useRef(null);
+  var rafRef = useRef(null);
+
+  function cancelKeepAlign() {
+    raf.cancel(rafRef.current);
+    rafRef.current = null;
+  }
+
+  function keepAlign() {
+    rafRef.current = raf(function () {
+      if (innerRef.current) {
+        innerRef.current.forcePopupAlign();
+      }
+
+      rafRef.current = null;
+    });
+  }
+
+  useEffect(function () {
+    if (visible) {
+      keepAlign();
+    } else {
+      cancelKeepAlign();
+    }
+
+    return cancelKeepAlign;
+  }, [visible, props.content]);
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: composeRef(innerRef, ref)
+  }, props));
+});
+SliderTooltip.displayName = 'SliderTooltip';
+export default SliderTooltip;

package/es/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+import Slider from './Slider';
+export default Slider;

package/es/components/slider/index.js

@@ -0,0 +1,2 @@
+import Slider from './Slider';
+export default Slider;

package/es/components/slider/types.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+export interface SliderMarks {
+    [key: number]: React.ReactNode | string;
+}
+export interface SliderProps {
+    /**
+     * prefix of classname
+     */
+    prefixCls?: string;
+    /**
+     * the value of slider, when range is false, it should be a number, otherwise,
+     * it should be a number array of two
+     */
+    value?: number | [number, number];
+    /**
+     * the minimum value the slider can slide to
+     */
+    min?: number;
+    /**
+     * the maximum value the slider can slide to
+     */
+    max?: number;
+    /**
+     * tick mark of slider, key must be number and in closed interval [min, max]
+     */
+    marks?: SliderMarks;
+    /**
+     * the granularity the slider can step through values,
+     * and should greater than 0. When marks is not null, it can be null
+     */
+    step?: number;
+    /**
+     * whether to display breakpoints, when marks is not null, it is preferably false
+     */
+    showStops?: boolean;
+    /**
+     * whether to use the dual thumb mode
+     */
+    range?: boolean;
+    /**
+     * whether to disable the slider
+     */
+    disabled?: boolean;
+    /**
+     * whether is vertical mode
+     */
+    vertical?: boolean;
+    /**
+     * tooltip display controler
+     */
+    showTip?: 'hover' | 'always' | 'never';
+    /**
+     * format the value to be displayed in tooltip, and will hide tooltip when return false
+     */
+    tipFormatter?: (value?: number) => React.ReactNode;
+    /**
+     * custom class of tooltip
+     */
+    tipClass?: string;
+    /**
+     * customized class
+     */
+    className?: string;
+    /** children */
+    children?: React.ReactNode;
+    /**
+     * 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入
+     */
+    onChange?: (value: number | [number, number]) => void;
+}

package/es/components/spin/Spin.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SpinProps } from './types';
+declare const Spin: React.FC<SpinProps>;
+export default Spin;

package/es/components/spin/Spin.js

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import classNames from 'classnames';
+import ConfigProvider from '../config-provider';
+var loadingIcon = /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M9.51163278,0.397486945 C10.0116767,0.49640704 10.4986446,0.644240639 10.9666762,0.838315664 C11.9071267,1.22828493 12.7610325,1.80087735 13.4800776,2.51992245 C14.9236179,3.96346282 15.75,5.91724948 15.75,8 C15.75,10.0827505 14.9236179,12.0365372 13.4800776,13.4800776 C12.7610325,14.1991226 11.9071267,14.7717151 10.9666762,15.1616843 C10.4986446,15.3557594 10.0116767,15.503593 9.51163278,15.6025131 C9.10529372,15.6828962 8.71072743,15.4186567 8.63034431,15.0123176 C8.54996118,14.6059786 8.81420066,14.2114123 9.22053972,14.1310292 C9.62322346,14.0513691 10.0152596,13.9323549 10.3921205,13.7760849 C11.1501019,13.4617787 11.8390044,12.9998304 12.4194174,12.4194174 C13.5844418,11.2543929 14.25,9.68083668 14.25,8 C14.25,6.31916332 13.5844418,4.74560706 12.4194174,3.58058262 C11.8390044,3.00016965 11.1501019,2.53822134 10.3921205,2.22391508 C10.0152596,2.0676451 9.62322346,1.94863086 9.22053972,1.86897083 C8.81420066,1.7885877 8.54996118,1.39402141 8.63034431,0.987682358 C8.70402884,0.615204891 9.0417145,0.362130533 9.41046829,0.3844536 L9.51163278,0.397486945 Z"
+}));
+
+var Spin = function Spin(props) {
+  var customizePrefixCls = props.prefixCls,
+      fix = props.fix,
+      mask = props.mask,
+      tips = props.tips,
+      size = props.size,
+      color = props.color,
+      children = props.children,
+      _props$spinClass = props.spinClass,
+      spinClass = _props$spinClass === void 0 ? '' : _props$spinClass,
+      _props$spinning = props.spinning,
+      spinning = _props$spinning === void 0 ? true : _props$spinning;
+
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('spin', customizePrefixCls);
+  var iconPrefixCls = getPrefixCls('icon', customizePrefixCls);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, spinClass, _defineProperty({}, "".concat(prefixCls, "__fix"), fix && mask))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-content"), color, _defineProperty({}, "".concat(prefixCls, "-content__fix"), fix))
+  }, /*#__PURE__*/React.createElement("i", {
+    className: classNames(size ? "".concat(prefixCls, "-icon__").concat(size) : "".concat(prefixCls, "-icon__normal"), 'shopee-seller-iconfont', iconPrefixCls, _defineProperty({}, "".concat(iconPrefixCls, "-spin"), spinning))
+  }, loadingIcon), !!tips && !children && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content-tips")
+  }, tips), children));
+};
+
+Spin.defaultProps = {
+  spinning: true,
+  color: 'orange',
+  size: 'normal',
+  fix: false,
+  mask: false
+};
+export default Spin;

package/es/components/spin/index.d.ts

@@ -0,0 +1,3 @@
+import Spin from './Spin';
+export * from './types';
+export default Spin;

package/es/components/spin/index.js

@@ -0,0 +1,3 @@
+import Spin from './Spin';
+export * from './types';
+export default Spin;

package/es/components/spin/types.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+declare type Color = 'orange' | 'white' | 'grey';
+declare type Size = 'normal' | 'small';
+export interface SpinProps {
+    /**
+     * prefix of classname
+     */
+    prefixCls?: string;
+    /**
+     * whether Spin is spinning
+     */
+    spinning?: boolean;
+    /**
+     * the color of loading icon
+     */
+    color?: Color;
+    /**
+     * the size of loading icon
+     */
+    size?: Size;
+    /**
+     * whether show element vertical center
+     * require parent element position to be relative or absolute
+     */
+    fix?: boolean;
+    /**
+     * whether show spin mask, only when fix is true
+     */
+    mask?: boolean;
+    /**
+     * the loading text
+     */
+    tips?: string;
+    /**
+     * custom classname
+     */
+    spinClass?: string;
+    /** children */
+    children?: React.ReactNode;
+}
+export {};

package/es/components/steps/Step.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StepProps } from './types';
+declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;
+export default Step;

package/es/components/steps/Step.js

@@ -0,0 +1,128 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/* eslint-disable class-methods-use-this */
+import React, { forwardRef, useRef, useEffect, useState, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import ConfigProvider from '../config-provider';
+import Icon from '../icon';
+import Tooltip from '../tooltip';
+var Step = /*#__PURE__*/forwardRef(function Step(_ref, ref) {
+  var customizePrefixCls = _ref.prefixCls,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$desc = _ref.desc,
+      desc = _ref$desc === void 0 ? '' : _ref$desc,
+      icon = _ref.icon,
+      svg = _ref.svg,
+      index = _ref.index,
+      current = _ref.current,
+      isDot = _ref.isDot;
+  var titleRef = useRef();
+  var descRef = useRef();
+  var tailRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      descOverflow = _useState2[0],
+      setDescOverflow = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      titleOverflow = _useState4[0],
+      setTitleOverflow = _useState4[1];
+
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('step', customizePrefixCls);
+
+  var isOverflow = function isOverflow(ele, lineNum) {
+    var flag = false;
+
+    if (ele) {
+      var rectList = ele.getClientRects();
+
+      if (rectList.length > lineNum) {
+        flag = true;
+      }
+    }
+
+    return flag;
+  };
+
+  useEffect(function () {
+    setTitleOverflow(isOverflow(titleRef.current, 2));
+    setDescOverflow(isOverflow(descRef.current, 2));
+  }, []);
+  useImperativeHandle(ref, function () {
+    return tailRef.current;
+  });
+
+  var stepHead = function () {
+    if (icon) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        type: icon,
+        className: "".concat(prefixCls, "__head-icon")
+      });
+    }
+
+    if (svg) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        svg: svg,
+        className: "".concat(prefixCls, "__head-icon")
+      });
+    }
+
+    if (isDot) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "__head-dot")
+      });
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "__head-step")
+    }, index + 1);
+  }();
+
+  var stepTitle = titleOverflow ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: title
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: titleRef
+  }, title))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: titleRef
+  }, title));
+  var stepDesc = descOverflow ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: desc
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-desc")
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: descRef
+  }, desc))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-desc")
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: descRef
+  }, desc));
+  var classStep = classNames(prefixCls, _defineProperty({
+    finished: index < current,
+    active: index === current,
+    disabled: index > current
+  }, "".concat(prefixCls, "-dot"), isDot && !icon));
+  var classStepContent = classNames("".concat(prefixCls, "__content"), _defineProperty({}, "".concat(prefixCls, "__content-single"), !titleOverflow));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classStep,
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "__head")
+  }, stepHead), /*#__PURE__*/React.createElement("div", {
+    className: classStepContent
+  }, stepTitle, stepDesc), /*#__PURE__*/React.createElement("div", {
+    ref: tailRef,
+    className: "".concat(prefixCls, "__tail")
+  }));
+});
+export default Step;

package/es/components/steps/Steps.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StepsProps } from './types';
+declare const Steps: React.FC<StepsProps>;
+export default Steps;