shopee-ui-react 0.0.1-security → 2.10.49

package/es/components/upload/utils.js

@@ -0,0 +1,57 @@
+var getFileEntryAsPromise = function getFileEntryAsPromise(entry) {
+  return new Promise(function (resolve, reject) {
+    entry.file(function (file) {
+      // set relativePath for file
+      // because webkitRelativePath of file is empty when drag
+      resolve(Object.assign({
+        relativePath: entry.fullPath
+      }, file));
+    }, function (e) {
+      reject(e);
+    });
+  });
+};
+
+export function filesAcceptFilter(files, accept) {
+  return files.filter(function (file) {
+    var type = file.type,
+        name = file.name;
+    var extension = name.indexOf('.') > -1 ? ".".concat(name.split('.').pop()) : '';
+    var baseType = type.replace(/\/.*$/, '');
+    return accept.split(',').map(function (str) {
+      return str.trim();
+    }).filter(Boolean).some(function (acceptedType) {
+      if (/^\..+$/.test(acceptedType)) {
+        return extension.toUpperCase() === acceptedType.toUpperCase();
+      }
+
+      if (/\/\*$/.test(acceptedType)) {
+        return baseType === acceptedType.replace(/\/\*$/, '');
+      }
+
+      if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
+        return type === acceptedType;
+      }
+
+      return false;
+    });
+  });
+}
+export var getDirectoryEntryAsPromise = function getDirectoryEntryAsPromise(directoryEntry) {
+  return new Promise(function (resolve) {
+    var directoryReader = directoryEntry.createReader();
+    directoryReader.readEntries(function (entries) {
+      resolve(Promise.all(entries.map(function (entry) {
+        if (entry.isDirectory) {
+          return getDirectoryEntryAsPromise(entry);
+        }
+
+        return getFileEntryAsPromise(entry);
+      })).then(function (res) {
+        return res.reduce(function (files, file) {
+          return files.concat(file);
+        }, []);
+      }));
+    });
+  });
+};

package/es/gatsby-theme-docz/components/Logo/index.d.ts

@@ -0,0 +1 @@
+export function Logo(): JSX.Element;

package/es/gatsby-theme-docz/components/Logo/index.js

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import logo from './shopee-logo.png';
+import * as styles from './styles';
+export var Logo = function Logo() {
+  return jsx("div", null, jsx("img", {
+    sx: styles.logo,
+    "data-testid": "logo",
+    src: logo,
+    alt: "Shopee Logo"
+  }), jsx("span", {
+    sx: styles.split
+  }), jsx("span", {
+    "data-testid": "title"
+  }, "Design & FE Team"));
+};

package/es/gatsby-theme-docz/components/Logo/styles.d.ts

@@ -0,0 +1,22 @@
+export namespace logo {
+    export const width: number;
+    export const height: number;
+    export const color: string;
+    export const mt: number;
+    export const verticalAlign: string;
+}
+export namespace split {
+    export const borderLeft: string;
+    export const opacity: number;
+    const height_1: number;
+    export { height_1 as height };
+    export const display: string;
+    export const margin: string;
+}
+export namespace logoTitle {
+    export const position: string;
+    export const top: number;
+    export const fontSize: number;
+    const color_1: string;
+    export { color_1 as color };
+}

package/es/gatsby-theme-docz/components/Logo/styles.js

@@ -0,0 +1,20 @@
+export var logo = {
+  width: 100,
+  height: 30,
+  color: '$primary-color',
+  mt: -12,
+  verticalAlign: 'middle'
+};
+export var split = {
+  borderLeft: '1px solid #555',
+  opacity: 0.6,
+  height: 14,
+  display: 'inline-block',
+  margin: '-1px 8px'
+};
+export var logoTitle = {
+  position: 'relative',
+  top: 2,
+  fontSize: 16,
+  color: '#666'
+};

package/es/gatsby-theme-docz/components/Props/index.d.ts

@@ -0,0 +1,15 @@
+export function getDefaultValue({ defaultValue, type, flowType }: {
+    defaultValue: any;
+    type: any;
+    flowType: any;
+}): any;
+export function Prop({ propName, prop, getPropType }: {
+    propName: any;
+    prop: any;
+    getPropType: any;
+}): JSX.Element;
+export function Props({ props, getPropType, isToggle }: {
+    props: any;
+    getPropType: any;
+    isToggle: any;
+}): JSX.Element;

package/es/gatsby-theme-docz/components/Props/index.js

@@ -0,0 +1,76 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import * as styles from './styles';
+export var getDefaultValue = function getDefaultValue(_ref) {
+  var defaultValue = _ref.defaultValue,
+      type = _ref.type,
+      flowType = _ref.flowType;
+  var propType = flowType || type;
+  if (defaultValue === null || defaultValue === undefined || defaultValue.value === null || defaultValue.value === undefined) return null;
+
+  if (defaultValue.value === '\'\'') {
+    return '[Empty string]';
+  }
+
+  if (propType && propType.name === 'string') {
+    return defaultValue.value.replace(/'/g, '"');
+  }
+
+  if (_typeof(defaultValue.value) === 'object' && defaultValue.value !== null && defaultValue.value.toString) {
+    return defaultValue.value.toString();
+  }
+
+  return "".concat(defaultValue.value);
+};
+export var Prop = function Prop(_ref2) {
+  var propName = _ref2.propName,
+      prop = _ref2.prop,
+      getPropType = _ref2.getPropType;
+  if (!prop.type && !prop.flowType) return null;
+  var defaultValue = getDefaultValue(prop);
+  return jsx("tr", {
+    "data-testid": "prop",
+    sx: styles.tableBody
+  }, jsx("td", {
+    "data-testid": "prop-name",
+    sx: styles.propName
+  }, propName), jsx("td", {
+    "data-testid": "prop-type",
+    sx: styles.propType
+  }, getPropType(prop)), jsx("td", {
+    "data-testid": "prop-default-value",
+    sx: styles.propDefaultValue
+  }, defaultValue !== null ? jsx("code", null, jsx("em", null, defaultValue)) : '-'), jsx("td", {
+    "data-testid": "prop-required"
+  }, prop.required ? 'true' : 'false'), jsx("td", {
+    "data-testid": "prop-description",
+    sx: styles.propDesc
+  }, prop.description));
+};
+export var Props = function Props(_ref3) {
+  var props = _ref3.props,
+      getPropType = _ref3.getPropType,
+      isToggle = _ref3.isToggle;
+  var entries = Object.entries(props);
+  return jsx("table", {
+    "data-testid": "props",
+    sx: styles.table
+  }, jsx("thead", null, jsx("tr", {
+    sx: styles.tableHeader
+  }, jsx("th", null, "Property"), jsx("th", null, "Type"), jsx("th", null, "Default"), jsx("th", null, "Required"), jsx("th", null, "Description"))), jsx("tbody", null, entries.map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        prop = _ref5[1];
+
+    return jsx(Prop, {
+      key: key,
+      propName: key,
+      prop: prop,
+      getPropType: getPropType,
+      isToggle: isToggle
+    });
+  })));
+};

package/es/gatsby-theme-docz/components/Props/styles.d.ts

@@ -0,0 +1,46 @@
+export namespace tableHeader {
+    export const bg: string;
+}
+export const table: {
+    width: string;
+    lineHeight: string;
+    wordBreak: string;
+    borderCollapse: string;
+    borderSpacing: number;
+    fontFamily: string;
+    '& thead': {
+        textAlign: string;
+    };
+    '& td, & th': {
+        padding: number;
+        border: string;
+    };
+    '& tr:nth-of-type(2n)': {
+        backgroundColor: string;
+    };
+};
+export namespace tableBody {
+    export const borderBottom: string;
+}
+export namespace propName {
+    export const fontWeight: number;
+}
+export namespace propType {
+    export const maxWidth: number;
+}
+export const propDefaultValue: {
+    maxWidth: number;
+    '& code': {
+        bg: string;
+        padding: string;
+        fontSize: string;
+        fontFamily: string;
+        lineHeight: string;
+        borderRadius: number;
+    };
+};
+export namespace propDesc {
+    export const minWidth: number;
+    const maxWidth_1: number;
+    export { maxWidth_1 as maxWidth };
+}

package/es/gatsby-theme-docz/components/Props/styles.js

@@ -0,0 +1,45 @@
+export var tableHeader = {
+  bg: '#f5f7f9'
+};
+export var table = {
+  width: '100%',
+  lineHeight: '1.5rem',
+  wordBreak: 'normal',
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+  fontFamily: 'Lato, sans-serif',
+  '& thead': {
+    textAlign: 'left'
+  },
+  '& td, & th': {
+    padding: 15,
+    border: '1px solid #dfe2e5'
+  },
+  '& tr:nth-of-type(2n)': {
+    backgroundColor: '#f6f8fa'
+  }
+};
+export var tableBody = {
+  borderBottom: '1px solid rgb(209, 212, 219)'
+};
+export var propName = {
+  fontWeight: 600
+};
+export var propType = {
+  maxWidth: 200
+};
+export var propDefaultValue = {
+  maxWidth: 300,
+  '& code': {
+    bg: 'rgb(245, 247, 249)',
+    padding: '4px 6px',
+    fontSize: '85%',
+    fontFamily: 'Source Code Pro,Menlo,monospace',
+    lineHeight: '1.3rem',
+    borderRadius: 4
+  }
+};
+export var propDesc = {
+  minWidth: 300,
+  maxWidth: 500
+};

package/es/hooks/clickoutside.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export default function useOnClickOutside(params: {
+    refs: RefObject<any>[];
+    handler: Function;
+}): void;

package/es/hooks/clickoutside.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { findNode } from '../utils/dom';
+export default function useOnClickOutside(params) {
+  var refs = params.refs,
+      handler = params.handler;
+  useEffect(function () {
+    var listener = function listener(event) {
+      // Do nothing if clicking ref's element or descendent elements
+      var contains = refs.some(function (ref) {
+        if (!ref.current) {
+          return true;
+        }
+
+        var node = findNode(ref.current);
+
+        if (!node) {
+          return true;
+        }
+
+        var tmp = node.contains(event.target);
+        return tmp;
+      });
+
+      if (contains) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [refs, handler]);
+}

package/es/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import useOnClickOutside from './clickoutside';
+import useTiming from './useTiming';
+export { useOnClickOutside, useTiming, };

package/es/hooks/index.js

@@ -0,0 +1,3 @@
+import useOnClickOutside from './clickoutside';
+import useTiming from './useTiming';
+export { useOnClickOutside, useTiming };

package/es/hooks/useFlexGapSupport.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => boolean;
+export default _default;

package/es/hooks/useFlexGapSupport.js

@@ -0,0 +1,14 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { detectFlexGapSupported } from '../utils/styleChecker';
+export default (function () {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      flexible = _React$useState2[0],
+      setFlexible = _React$useState2[1];
+
+  React.useEffect(function () {
+    setFlexible(detectFlexGapSupported());
+  }, []);
+  return flexible;
+});

package/es/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useForceUpdate(): React.DispatchWithoutAction;

package/es/hooks/useForceUpdate.js

@@ -0,0 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+export default function useForceUpdate() {
+  var _React$useReducer = React.useReducer(function (x) {
+    return x + 1;
+  }, 0),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      forceUpdate = _React$useReducer2[1];
+
+  return forceUpdate;
+}

package/es/hooks/useMergedState.d.ts

@@ -0,0 +1,6 @@
+export default function useMergedState<T, R = T>(defaultStateValue: T | (() => T), option?: {
+    defaultValue?: T | (() => T);
+    value?: T;
+    onChange?: (value: T, prevValue: T) => void;
+    postState?: (value: T) => T;
+}): [R, (value: T) => void];

package/es/hooks/useMergedState.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+export default function useMergedState(defaultStateValue, option) {
+  var _ref = option || {},
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      postState = _ref.postState;
+
+  var _React$useState = React.useState(function () {
+    if (value !== undefined) {
+      return value;
+    }
+
+    if (defaultValue !== undefined) {
+      return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
+    }
+
+    return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      innerValue = _React$useState2[0],
+      setInnerValue = _React$useState2[1];
+
+  var mergedValue = React.useMemo(function () {
+    var result = value !== undefined ? value : innerValue;
+    return postState ? postState(result) : result; // just watch value and innerValue
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, innerValue]);
+
+  function triggerChange(newVal) {
+    var newValue = postState ? postState(newVal) : newVal;
+    setInnerValue(newValue);
+
+    if (mergedValue !== newValue && onChange) {
+      onChange(newValue, mergedValue);
+    }
+  } // Effect of reset value to `undefined`
+
+
+  var firstRenderRef = React.useRef(true);
+  React.useEffect(function () {
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      return;
+    }
+
+    if (value === undefined) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [mergedValue, triggerChange];
+}

package/es/hooks/useOverflow.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+export declare type BasicTarget<T = HTMLElement> = (() => T | null) | T | null | MutableRefObject<T | null | undefined>;
+declare type TargetElement = HTMLElement | Element | Document | Window;
+export declare function getTargetElement(target?: BasicTarget<TargetElement>, defaultElement?: TargetElement): TargetElement | undefined | null;
+interface Overflow {
+    x?: boolean;
+    y?: boolean;
+}
+declare function useOverflow(target: BasicTarget): Overflow;
+export default useOverflow;

package/es/hooks/useOverflow.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useLayoutEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+export function getTargetElement(target, defaultElement) {
+  if (!target) {
+    return defaultElement;
+  }
+
+  var targetElement;
+
+  if (typeof target === 'function') {
+    targetElement = target();
+  } else if ('current' in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
+  }
+
+  return targetElement;
+}
+
+function getOverflow(node) {
+  return {
+    x: node ? node.offsetWidth < node.scrollWidth : false,
+    // node.offsetHeight 直接和 node.scrollHeight 比较有点问题
+    // 参考 shopee-ui 设置为 10
+    y: node ? node.offsetHeight < node.scrollHeight - 10 : false
+  };
+}
+
+function useOverflow(target) {
+  var _useState = useState(function () {
+    var el = getTargetElement(target);
+    return getOverflow(el);
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  useLayoutEffect(function () {
+    var el = getTargetElement(target);
+
+    if (!el) {
+      return;
+    }
+
+    var resizeObserver = new ResizeObserver(function (entries) {
+      entries.forEach(function (entry) {
+        setState(getOverflow(entry.target));
+      });
+    });
+    resizeObserver.observe(el);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [target]);
+  return state;
+}
+
+export default useOverflow;

package/es/hooks/useSyncState.d.ts

@@ -0,0 +1,3 @@
+declare type UseSyncStateProps<T> = [() => T, (newValue: T) => void];
+export default function useSyncState<T>(initialValue: T): UseSyncStateProps<T>;
+export {};

package/es/hooks/useSyncState.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import useForceUpdate from './useForceUpdate';
+export default function useSyncState(initialValue) {
+  var ref = React.useRef(initialValue);
+  var forceUpdate = useForceUpdate();
+  return [function () {
+    return ref.current;
+  }, function (newValue) {
+    ref.current = newValue; // re-render
+
+    forceUpdate();
+  }];
+}

package/es/hooks/useTiming.d.ts

@@ -0,0 +1,2 @@
+declare const useTiming: (startTime?: number, step?: number) => number;
+export default useTiming;

package/es/hooks/useTiming.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect } from 'react';
+
+var useTiming = function useTiming() {
+  var startTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+
+  // startTime 为起始计时的时间戳
+  // initialTime 用来对照，当前时间减去初始时间等于累计的时间
+  // currentSeconds 当前计时的秒数，一开始为startSeconds
+  var _useState = useState(startTime),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentTime = _useState2[0],
+      setCurrentTime = _useState2[1];
+
+  useEffect(function () {
+    var mountTime = Date.now();
+    var timer = setInterval(function () {
+      var now = Date.now();
+      setCurrentTime(startTime + now - mountTime);
+    }, step);
+    return function () {
+      clearInterval(timer);
+    };
+  }, [startTime, step]);
+  return currentTime;
+};
+
+export default useTiming;