shopee-ui-react 0.0.1-security → 2.10.49

package/es/components/steps/Steps.js

@@ -0,0 +1,177 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { cloneElement, Children, useRef, useState, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import debounce from '../../utils/debounce';
+import ConfigProvider from '../config-provider';
+import { DISTANCE } from './types';
+import ArrowIcon from './arrow-icon';
+
+var Steps = function Steps(props) {
+  var _classNames;
+
+  var customizePrefixCls = props.prefixCls,
+      _props$current = props.current,
+      current = _props$current === void 0 ? 0 : _props$current,
+      _props$labelPlacement = props.labelPlacement,
+      labelPlacement = _props$labelPlacement === void 0 ? 'horizontal' : _props$labelPlacement,
+      _props$progressDot = props.progressDot,
+      progressDot = _props$progressDot === void 0 ? false : _props$progressDot,
+      isScrollable = props.isScrollable,
+      children = props.children;
+  var stepsWrapRef = useRef();
+  var stepsRef = useRef();
+  var stepTailRef = useRef();
+
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('steps', customizePrefixCls);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMaxWidth = _useState2[0],
+      setIsMaxWidth = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      disabledForward = _useState4[0],
+      setDisabledForward = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showArrow = _useState6[0],
+      setShowArrow = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      containerSize = _useState8[0],
+      setContainerSize = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      allItemsOffset = _useState10[0],
+      setAllItemsOffset = _useState10[1];
+
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      offset = _useState12[0],
+      setOffset = _useState12[1];
+
+  var _useState13 = useState(DISTANCE),
+      _useState14 = _slicedToArray(_useState13, 2),
+      distance = _useState14[0],
+      setDistance = _useState14[1];
+
+  var updateStyle = function updateStyle() {
+    var _a;
+
+    var maxWidth = progressDot ? 160 : 120;
+    setIsMaxWidth(((_a = stepTailRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) > maxWidth);
+  }; // 计算是否该显示arrow
+
+
+  var computedShowArrow = function computedShowArrow() {
+    var _a, _b; // 计算容器长度
+
+
+    var stepsWrapWidth = (_a = stepsWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    setContainerSize(stepsWrapWidth); // 计算总长度
+
+    var stepsWidth = (_b = stepsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth;
+    setAllItemsOffset(stepsWidth);
+    var curShowArrow = stepsWrapWidth < stepsWidth ? true : !!offset;
+    setShowArrow(curShowArrow);
+
+    if (curShowArrow) {
+      // 移动最大偏移量最小为容器长度
+      setDistance(stepsWrapWidth > DISTANCE ? DISTANCE : stepsWrapWidth);
+    }
+  }; // 向后偏移
+
+
+  var moveForward = function moveForward() {
+    if (disabledForward) {
+      return;
+    }
+
+    var stepsContent = stepsRef.current;
+    var remainingDistance = allItemsOffset - containerSize - offset;
+    var curOffset = remainingDistance < distance ? offset + remainingDistance : offset + distance;
+    setOffset(curOffset);
+    setDisabledForward(curOffset + containerSize >= allItemsOffset); // 偏移量 & 动画
+
+    stepsContent.style.cssText = "transform: translateX(".concat(-curOffset, "px);transition: transform 1s;");
+  }; // 向前偏移
+
+
+  var moveBackward = function moveBackward() {
+    if (offset === 0) {
+      return;
+    }
+
+    var stepsContent = stepsRef.current;
+    var curOffset = offset > distance ? offset - distance : 0;
+    setOffset(curOffset); // 重新计算是否可以向前偏移
+
+    var isDisabledForward = curOffset + containerSize >= allItemsOffset;
+    setDisabledForward(isDisabledForward); // 重新计算是否需要显示箭头
+
+    setShowArrow(!(curOffset === 0 && isDisabledForward)); // 偏移量 & 动画
+
+    stepsContent.style.cssText = "transform: translateX(".concat(-curOffset, "px);transition: transform 1s;");
+  };
+
+  var resetArrowConfig = debounce(function () {
+    computedShowArrow();
+  }, 300);
+  useLayoutEffect(function () {
+    updateStyle();
+
+    if (isScrollable) {
+      computedShowArrow();
+      window.addEventListener('resize', resetArrowConfig, false);
+    }
+
+    return function () {
+      if (resetArrowConfig) {
+        window.removeEventListener('resize', resetArrowConfig, false);
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var virtualLabelPlacement = progressDot ? 'vertical' : labelPlacement;
+  var filteredChildren = Children.toArray(children).filter(function (c) {
+    return !!c;
+  });
+  var classSteps = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(virtualLabelPlacement), true), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), progressDot), _defineProperty(_classNames, "".concat(prefixCls, "-max-width"), isMaxWidth), _defineProperty(_classNames, "".concat(prefixCls, "-fix-width"), isScrollable), _classNames));
+  var prevButton = /*#__PURE__*/React.createElement("span", {
+    onClick: moveBackward,
+    className: classNames(["".concat(prefixCls, "-btn")], ["".concat(prefixCls, "-btn-pre")], _defineProperty({}, "".concat(prefixCls, "-btn-not-display"), offset === 0))
+  }, /*#__PURE__*/React.createElement(ArrowIcon, null));
+  var nextButton = /*#__PURE__*/React.createElement("span", {
+    onClick: moveForward,
+    className: classNames(["".concat(prefixCls, "-btn")], ["".concat(prefixCls, "-btn-next")], _defineProperty({}, "".concat(prefixCls, "-btn-not-display"), disabledForward))
+  }, /*#__PURE__*/React.createElement(ArrowIcon, null));
+  var stepsContent = /*#__PURE__*/React.createElement("div", {
+    className: classSteps,
+    ref: stepsRef
+  }, Children.map(filteredChildren, function (child, index) {
+    if (!child) {
+      return null;
+    }
+
+    var childProps = Object.assign({
+      index: index,
+      current: current,
+      isDot: progressDot,
+      ref: index === 0 ? stepTailRef : null
+    }, child.props);
+    return /*#__PURE__*/cloneElement(child, childProps);
+  }));
+  return isScrollable ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-wrap"),
+    ref: stepsWrapRef
+  }, stepsContent, showArrow && prevButton, showArrow && nextButton) : stepsContent;
+};
+
+export default Steps;

package/es/components/steps/arrow-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SvgComponent: (props: any) => JSX.Element;
+export default SvgComponent;

package/es/components/steps/arrow-icon.js

@@ -0,0 +1,24 @@
+/* eslint-disable */
+import * as React from 'react';
+
+var SvgComponent = function SvgComponent(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    opacity: "0.01",
+    y: "24",
+    width: "24",
+    height: "24",
+    transform: "rotate(-90 0 24)",
+    fill: "black"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.657 12.125L8.29092 6.75888C7.80277 6.27073 7.80277 5.47927 8.29092 4.99112C8.77908 4.50296 9.57053 4.50296 10.0587 4.99112L16.3087 11.2411C16.7968 11.7293 16.7968 12.5207 16.3087 13.0089L10.0587 19.2589C9.57053 19.747 8.77908 19.747 8.29092 19.2589C7.80277 18.7707 7.80277 17.9793 8.29092 17.4911L13.657 12.125Z",
+    fill: "#758196"
+  }));
+};
+
+export default SvgComponent;

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

@@ -0,0 +1,9 @@
+import Steps from './Steps';
+import Step from './Step';
+declare type InternalStepsType = typeof Steps;
+interface ExportStepsInterface extends InternalStepsType {
+    Step: typeof Step;
+}
+declare const StepsExport: ExportStepsInterface;
+export { Step };
+export default StepsExport;

package/es/components/steps/index.js

@@ -0,0 +1,6 @@
+import Steps from './Steps';
+import Step from './Step';
+var StepsExport = Steps;
+StepsExport.Step = Step;
+export { Step };
+export default StepsExport;

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

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+export interface StepsProps {
+    prefixCls?: string;
+    /**
+     * current activation step, counting from 0
+     */
+    current?: number;
+    /**
+     * support vertial title, placed to the right of icon by default
+     */
+    labelPlacement?: string;
+    /**
+     * steps with progress dot style, labelPlacement will be vertical when set to true
+     */
+    progressDot?: boolean;
+    /**
+     * children of steps
+     */
+    children?: React.ReactNode;
+    /**
+     * whether you can click to scroll left and right
+     */
+    isScrollable?: boolean;
+}
+export declare const DISTANCE = 560;
+export interface StepProps {
+    prefixCls?: string;
+    /**
+     * title of the step
+     */
+    title?: string;
+    /**
+     * description of the step
+     */
+    desc?: string;
+    /**
+     * icon of the step
+     */
+    icon?: string;
+    /**
+     * svg icon of the step
+     */
+    svg?: string | React.ReactElement | Function;
+    /**
+     * index of step
+     */
+    index?: number;
+    /**
+     * index of current step
+     */
+    current?: number;
+    /**
+     * whether is dot stype
+     */
+    isDot?: boolean;
+    /** children */
+    children?: React.ReactNode;
+}

package/es/components/steps/types.js

@@ -0,0 +1 @@
+export var DISTANCE = 560;

package/es/components/switch/Switch.d.ts

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

package/es/components/switch/Switch.js

@@ -0,0 +1,68 @@
+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 React from 'react';
+import classNames from 'classnames';
+import useMergedState from '../../hooks/useMergedState';
+import ConfigProvider from '../config-provider';
+
+var Switch = function Switch(_a) {
+  var _classNames;
+
+  var _a$size = _a.size,
+      size = _a$size === void 0 ? 'normal' : _a$size,
+      customizePrefixCls = _a.prefixCls,
+      value = _a.value,
+      defaultValue = _a.defaultValue,
+      disabled = _a.disabled,
+      checkedContent = _a.checkedContent,
+      uncheckedContent = _a.uncheckedContent,
+      className = _a.className,
+      onChange = _a.onChange,
+      restProps = __rest(_a, ["size", "prefixCls", "value", "defaultValue", "disabled", "checkedContent", "uncheckedContent", "className", "onChange"]);
+
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('switch', customizePrefixCls);
+
+  var _useMergedState = useMergedState(false, {
+    value: value,
+    defaultValue: defaultValue,
+    onChange: onChange
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      innerValue = _useMergedState2[0],
+      setInnerValue = _useMergedState2[1];
+
+  var handleToggle = function handleToggle() {
+    if (disabled) return;
+    setInnerValue(!innerValue);
+  };
+
+  var classes = classNames(className, prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "--open"), innerValue), _defineProperty(_classNames, "".concat(prefixCls, "--close"), !innerValue), _defineProperty(_classNames, "".concat(prefixCls, "--").concat(size), true), _defineProperty(_classNames, "".concat(prefixCls, "--disabled"), disabled), _classNames));
+  var labelClasses = classNames("".concat(prefixCls, "__label"), _defineProperty({}, "".concat(prefixCls, "__label--inactive"), !innerValue));
+  var text = innerValue ? checkedContent : uncheckedContent;
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: classes,
+    onClick: handleToggle
+  }), text && /*#__PURE__*/React.createElement("div", {
+    className: labelClasses
+  }, text));
+};
+
+export default Switch;

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

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

package/es/components/switch/index.js

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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare type SwitchSize = 'normal' | 'small';
+export interface SwitchProps {
+    prefixCls?: string;
+    size?: string;
+    value?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    checkedContent?: React.ReactNode;
+    uncheckedContent?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    onChange?: (checked: boolean) => void;
+}

package/es/components/table/ExpandIcon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface DefaultExpandIconProps<RecordType> {
+    prefixCls: string;
+    onExpand: (record: RecordType, e: React.MouseEvent<HTMLElement>) => void;
+    record: RecordType;
+    expanded: boolean;
+    expandable: boolean;
+}
+declare function renderExpandIcon(): <RecordType>({ prefixCls, onExpand, record, expanded, expandable, }: DefaultExpandIconProps<RecordType>) => JSX.Element;
+export default renderExpandIcon;

package/es/components/table/ExpandIcon.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as React from 'react';
+import cx from 'classnames';
+import Icon from '../icon';
+
+function renderExpandIcon() {
+  return function expandIcon(_ref) {
+    var _cx;
+
+    var prefixCls = _ref.prefixCls,
+        onExpand = _ref.onExpand,
+        record = _ref.record,
+        expanded = _ref.expanded,
+        expandable = _ref.expandable;
+    var iconPrefix = "".concat(prefixCls, "-row-expand-icon");
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(iconPrefix, (_cx = {}, _defineProperty(_cx, "".concat(iconPrefix, "-spaced"), !expandable), _defineProperty(_cx, "".concat(iconPrefix, "-expanded"), expandable && expanded), _cx))
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-right",
+      style: {
+        lineHeight: '16px'
+      },
+      className: "".concat(iconPrefix, "-arrow"),
+      onClick: function onClick(e) {
+        return onExpand(record, e);
+      }
+    }));
+  };
+}
+
+export default renderExpandIcon;

package/es/components/table/Table.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TableProps } from './types';
+declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): JSX.Element;
+declare namespace Table {
+    var defaultProps: {
+        rowKey: string;
+        bordered: boolean;
+        pagination: boolean;
+    };
+}
+export default Table;