@dpocean/chatui 1.0.0

package/lib/components/Radio/RadioGroup.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Radio = require("./Radio");
+var RadioGroup = exports.RadioGroup = function RadioGroup(props) {
+  var className = props.className,
+    options = props.options,
+    value = props.value,
+    name = props.name,
+    disabled = props.disabled,
+    block = props.block,
+    align = props.align,
+    maxPerRow = props.maxPerRow,
+    flex = props.flex,
+    _onChange = props.onChange;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('RadioGroup', {
+      'RadioGroup--block': block
+    }, className),
+    "data-align": align,
+    "data-layout": flex ? 'flex' : maxPerRow,
+    style: maxPerRow && !flex ? {
+      '--max-per-row': maxPerRow
+    } : undefined
+  }, options.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
+      label: item.label || item.value,
+      value: item.value,
+      name: name,
+      checked: value === item.value,
+      disabled: 'disabled' in item ? item.disabled : disabled,
+      onChange: function onChange(e) {
+        _onChange(item.value, e);
+      },
+      key: item.value
+    });
+  }));
+};

package/lib/components/Radio/index.d.ts

@@ -0,0 +1,4 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioValue } from './Radio';
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps } from './RadioGroup';

package/lib/components/Radio/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _Radio.Radio;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function get() {
+    return _RadioGroup.RadioGroup;
+  }
+});
+var _Radio = require("./Radio");
+var _RadioGroup = require("./RadioGroup");

package/lib/components/RateActions/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type RateActionsProps = {
+    upTitle?: string;
+    downTitle?: string;
+    onClick: (value: string) => void;
+};
+export declare const RateActions: (props: RateActionsProps) => React.JSX.Element;

package/lib/components/RateActions/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RateActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _IconButton = require("../IconButton");
+var _ConfigProvider = require("../ConfigProvider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var UP = 'up';
+var DOWN = 'down';
+var RateActions = exports.RateActions = function RateActions(props) {
+  var _useLocale = (0, _ConfigProvider.useLocale)('RateActions', {
+      up: 'Up vote',
+      down: 'Down vote'
+    }),
+    trans = _useLocale.trans;
+  var _props$upTitle = props.upTitle,
+    upTitle = _props$upTitle === void 0 ? trans('up') : _props$upTitle,
+    _props$downTitle = props.downTitle,
+    downTitle = _props$downTitle === void 0 ? trans('down') : _props$downTitle,
+    onClick = props.onClick;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  function handleClick(val) {
+    if (!value) {
+      setValue(val);
+      onClick(val);
+    }
+  }
+  function handleUpClick() {
+    handleClick(UP);
+  }
+  function handleDownClick() {
+    handleClick(DOWN);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "RateActions"
+  }, value !== DOWN && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: (0, _clsx.default)('RateBtn', {
+      active: value === UP
+    }),
+    title: upTitle,
+    "data-type": UP,
+    icon: "thumbs-up",
+    onClick: handleUpClick
+  }), value !== UP && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: (0, _clsx.default)('RateBtn', {
+      active: value === DOWN
+    }),
+    title: downTitle,
+    "data-type": DOWN,
+    icon: "thumbs-down",
+    onClick: handleDownClick
+  }));
+};

package/lib/components/Recorder/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface RecorderHandle {
+    stop: () => void;
+}
+export interface RecorderProps {
+    canRecord?: boolean;
+    volume?: number;
+    onStart?: () => void;
+    onEnd?: (data: {
+        duration: number;
+    }) => void;
+    onCancel?: () => void;
+    ref?: React.MutableRefObject<RecorderHandle>;
+}
+export declare const Recorder: React.ForwardRefExoticComponent<Omit<RecorderProps, "ref"> & React.RefAttributes<RecorderHandle>>;

package/lib/components/Recorder/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Recorder = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Flex = require("../Flex");
+var _Icon = require("../Icon");
+var _ConfigProvider = require("../ConfigProvider");
+var _canUse = _interopRequireDefault(require("../../utils/canUse"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var canPassive = (0, _canUse.default)('passiveListener');
+var listenerOpts = canPassive ? {
+  passive: true
+} : false;
+var listenerOptsWithoutPassive = canPassive ? {
+  passive: false
+} : false;
+var MOVE_INTERVAL = 80;
+var btnTextMap = {
+  inited: 'hold2talk',
+  recording: 'release2send',
+  willCancel: 'release2send'
+};
+var ts = 0;
+var startY = 0;
+var Recorder = exports.Recorder = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var volume = props.volume,
+    onStart = props.onStart,
+    onEnd = props.onEnd,
+    onCancel = props.onCancel;
+  var _useState = (0, _react.useState)('inited'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var btnRef = (0, _react.useRef)(null);
+  var _useLocale = (0, _ConfigProvider.useLocale)('Recorder'),
+    trans = _useLocale.trans;
+  var doEnd = (0, _react.useCallback)(function () {
+    var duration = Date.now() - ts;
+    if (onEnd) {
+      onEnd({
+        duration: duration
+      });
+    }
+  }, [onEnd]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      stop: function stop() {
+        setStatus('inited');
+        doEnd();
+        ts = 0;
+      }
+    };
+  });
+  (0, _react.useEffect)(function () {
+    var wrapper = btnRef.current;
+    function handleTouchStart(e) {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      var touch0 = e.touches[0];
+      startY = touch0.pageY;
+      ts = Date.now();
+      setStatus('recording');
+      if (onStart) {
+        onStart();
+      }
+    }
+    function handleTouchMove(e) {
+      if (!ts) return;
+      var nowY = e.touches[0].pageY;
+      var isCancel = startY - nowY > MOVE_INTERVAL;
+      setStatus(isCancel ? 'willCancel' : 'recording');
+    }
+    function handleTouchEnd(e) {
+      if (!ts) return;
+      var endY = e.changedTouches[0].pageY;
+      var isRecording = startY - endY < MOVE_INTERVAL;
+      setStatus('inited');
+      if (isRecording) {
+        doEnd();
+      } else if (onCancel) {
+        onCancel();
+      }
+    }
+    wrapper.addEventListener('touchstart', handleTouchStart, listenerOptsWithoutPassive);
+    wrapper.addEventListener('touchmove', handleTouchMove, listenerOpts);
+    wrapper.addEventListener('touchend', handleTouchEnd);
+    wrapper.addEventListener('touchcancel', handleTouchEnd);
+    return function () {
+      wrapper.removeEventListener('touchstart', handleTouchStart);
+      wrapper.removeEventListener('touchmove', handleTouchMove);
+      wrapper.removeEventListener('touchend', handleTouchEnd);
+      wrapper.removeEventListener('touchcancel', handleTouchEnd);
+    };
+  }, [doEnd, onCancel, onStart]);
+  var isCancel = status === 'willCancel';
+  var wavesStyle = {
+    transform: "scale(".concat((volume || 1) / 100 + 1, ")")
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Recorder', {
+      'Recorder--cancel': isCancel
+    }),
+    ref: btnRef
+  }, status !== 'inited' && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "RecorderToast",
+    direction: "column",
+    center: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "RecorderToast-waves",
+    hidden: status !== 'recording',
+    style: wavesStyle
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "RecorderToast-wave-1",
+    type: "hexagon"
+  }), /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "RecorderToast-wave-2",
+    type: "hexagon"
+  }), /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "RecorderToast-wave-3",
+    type: "hexagon"
+  })), /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "RecorderToast-icon",
+    type: isCancel ? 'cancel' : 'mic'
+  }), /*#__PURE__*/_react.default.createElement("span", null, trans(isCancel ? 'release2cancel' : 'releaseOrSwipe'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Recorder-btn",
+    role: "button",
+    "aria-label": trans('hold2talk')
+  }, /*#__PURE__*/_react.default.createElement("span", null, trans(btnTextMap[status]))));
+});

package/lib/components/RedPacket/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type RedPacketStatus = 'normal' | 'nearExpired' | 'expired' | 'used';
+export interface RedPacketProps {
+    className?: string;
+    name: string;
+    value?: number;
+    condition?: string;
+    endAt?: number;
+    dateDesc?: React.ReactNode;
+    desc?: React.ReactNode;
+    image?: string;
+    status?: RedPacketStatus;
+    tag?: string;
+    inList?: boolean;
+    variant?: 'redPacket' | 'cash' | 'image';
+    btnText?: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export declare const RedPacket: (props: RedPacketProps) => React.JSX.Element;
+export {};

package/lib/components/RedPacket/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RedPacket = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Price = require("../Price");
+var _Button = require("../Button");
+var _Flex = require("../Flex");
+var _Text = require("../Text");
+var _Image = require("../Image");
+var _Ribbon = require("../Ribbon");
+var _date = require("../../utils/date");
+var statusLabelMap = {
+  normal: '',
+  nearExpired: '快失效',
+  expired: '已过期',
+  used: '已使用'
+};
+var RedPacket = exports.RedPacket = function RedPacket(props) {
+  var className = props.className,
+    value = props.value,
+    condition = props.condition,
+    name = props.name,
+    endAt = props.endAt,
+    dateDesc = props.dateDesc,
+    desc = props.desc,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'normal' : _props$status,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'redPacket' : _props$variant,
+    tag = props.tag,
+    image = props.image,
+    _props$inList = props.inList,
+    inList = _props$inList === void 0 ? false : _props$inList,
+    _props$btnText = props.btnText,
+    btnText = _props$btnText === void 0 ? '查看' : _props$btnText,
+    onClick = props.onClick;
+  var statusLabel = statusLabelMap[status] || '';
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: (0, _clsx.default)('RedPacket', className),
+    "data-variant": variant,
+    "data-status": status,
+    "data-in-list": inList,
+    onClick: inList ? undefined : onClick
+  }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "RedPacket-object",
+    center: true,
+    direction: "column"
+  }, image ? /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    className: "RedPacket-img",
+    src: image,
+    width: "70",
+    height: "53"
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value && /*#__PURE__*/_react.default.createElement(_Price.Price, {
+    className: "RedPacket-value",
+    price: value,
+    currency: "\xA5",
+    autoFit: true
+  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "RedPacket-condition",
+    truncate: true
+  }, condition)), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "RedPacket-arc",
+    width: "12",
+    height: "80",
+    viewBox: "0 0 24 160",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "var(--red-packet-arc-color)",
+    d: "M0 160h24V0H.4C6.77 20.445 10.7 48.462 10.7 79.369 10.701 110.917 6.607 139.454 0 160"
+  }))), /*#__PURE__*/_react.default.createElement(_Flex.FlexItem, {
+    className: "RedPacket-main"
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "RedPacket-name",
+    truncate: true
+  }, name), dateDesc ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "RedPacket-desc",
+    truncate: true
+  }, dateDesc) : endAt ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "RedPacket-desc",
+    truncate: true
+  }, (0, _date.formatExpireTime)(endAt)) : null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    className: "RedPacket-desc",
+    truncate: true
+  }, desc)), onClick && /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    className: "RedPacket-actions",
+    center: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    className: "RedPacket-btn",
+    onClick: inList ? onClick : undefined
+  }, btnText)), statusLabel && /*#__PURE__*/_react.default.createElement(_Ribbon.Ribbon, {
+    color: ['expired', 'used'].includes(status) ? 'gray' : 'primary',
+    position: "right",
+    size: "sm"
+  }, statusLabel), tag && /*#__PURE__*/_react.default.createElement(_Ribbon.Ribbon, null, tag));
+};

package/lib/components/Ribbon/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface RibbonProps {
+    className?: string;
+    position?: 'left' | 'center' | 'right';
+    size?: 'sm' | 'md';
+    color?: 'primary' | 'gray';
+    children?: React.ReactNode;
+}
+export declare const Ribbon: (props: RibbonProps) => React.JSX.Element;

package/lib/components/Ribbon/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Ribbon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var Arc = function Arc(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    className: (0, _clsx.default)('Arc', className),
+    viewBox: "0 0 12 12",
+    width: 6,
+    height: 6
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12 0C5.373 0 0 5.373 0 12V0z"
+  }));
+};
+var Ribbon = exports.Ribbon = function Ribbon(props) {
+  var className = props.className,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'left' : _props$position,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'md' : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'primary' : _props$color,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Ribbon', className),
+    "data-position": position,
+    "data-size": size,
+    "data-color": color
+  }, /*#__PURE__*/_react.default.createElement(Arc, {
+    className: "Arc-1"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "Ribbon-text"
+  }, children), /*#__PURE__*/_react.default.createElement(Arc, {
+    className: "Arc-2"
+  }));
+};

package/lib/components/RichText/configDOMPurify.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/RichText/configDOMPurify.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _dompurify = _interopRequireDefault(require("dompurify"));
+if (_dompurify.default.isSupported) {
+  _dompurify.default.addHook('beforeSanitizeAttributes', function (node) {
+    if (node instanceof HTMLElement && node.hasAttribute('href')) {
+      var href = node.getAttribute('href');
+      if (href) {
+        node.dataset.cuiHref = href;
+      }
+      if (node.getAttribute('target') === '_blank') {
+        node.dataset.cuiTarget = '1';
+      }
+    }
+  });
+  _dompurify.default.addHook('afterSanitizeAttributes', function (node) {
+    if (node instanceof HTMLElement) {
+      if (node.dataset.cuiHref && node.hasAttribute('href')) {
+        node.removeAttribute('data-cui-href');
+      }
+      if (node.dataset.cuiTarget) {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+        node.removeAttribute('data-cui-target');
+      }
+    }
+  });
+}

package/lib/components/RichText/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import DOMPurify from 'dompurify';
+import './configDOMPurify';
+export interface RichTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    className?: string;
+    options?: DOMPurify.Config;
+}
+export declare const RichText: React.ForwardRefExoticComponent<RichTextProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/RichText/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichText = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+require("./configDOMPurify");
+var _excluded = ["className", "content", "options"];
+var RichText = exports.RichText = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    content = props.content,
+    _props$options = props.options,
+    options = _props$options === void 0 ? {} : _props$options,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var html = {
+    __html: _dompurify.default.sanitize(content, options)
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('RichText', className)
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: html,
+    role: "article",
+    ref: ref
+  }, other));
+});

package/lib/components/ScrollGrid/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ScrollGridProps {
+    wrap?: boolean;
+    onIndicatorToggle?: (show: boolean) => void;
+    children: React.ReactNode;
+}
+export declare function ScrollGrid({ wrap, children, onIndicatorToggle }: ScrollGridProps): React.JSX.Element;

package/lib/components/ScrollGrid/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollGrid = ScrollGrid;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useLatest = require("../../hooks/useLatest");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var indicatorWidth = 20;
+function ScrollGrid(_ref) {
+  var _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children,
+    onIndicatorToggle = _ref.onIndicatorToggle;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showIndicator = _useState2[0],
+    setShowIndicator = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    barWidth = _useState4[0],
+    setBarWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    barLeft = _useState6[0],
+    setBarLeft = _useState6[1];
+  var scrollerRef = (0, _react.useRef)(null);
+  var ratioRef = (0, _react.useRef)(0.04);
+  var onIndicatorToggleRef = (0, _useLatest.useLatest)(onIndicatorToggle);
+  (0, _react.useEffect)(function () {
+    if (wrap) return;
+    function updateIndicator() {
+      var scroller = scrollerRef.current;
+      if (!scroller) return;
+      var scrollWidth = scroller.scrollWidth,
+        clientWidth = scroller.clientWidth;
+      if (scrollWidth === clientWidth) {
+        setShowIndicator(false);
+        return;
+      }
+      var ratio = indicatorWidth / scrollWidth;
+      ratioRef.current = ratio;
+      setShowIndicator(true);
+      setBarWidth(clientWidth * ratio);
+    }
+    updateIndicator();
+    window.addEventListener('resize', updateIndicator);
+    return function () {
+      window.removeEventListener('resize', updateIndicator);
+    };
+  }, [wrap]);
+  (0, _react.useEffect)(function () {
+    var _onIndicatorToggleRef;
+    (_onIndicatorToggleRef = onIndicatorToggleRef.current) === null || _onIndicatorToggleRef === void 0 || _onIndicatorToggleRef.call(onIndicatorToggleRef, showIndicator);
+  }, [onIndicatorToggleRef, showIndicator]);
+  var handleScroll = function handleScroll(e) {
+    var _ref2 = e.target,
+      scrollLeft = _ref2.scrollLeft;
+    setBarLeft(scrollLeft * ratioRef.current);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollGrid",
+    "data-wrap": wrap
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollGrid-scroller",
+    ref: scrollerRef,
+    onScroll: wrap ? undefined : handleScroll
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollGrid-inner"
+  }, children)), showIndicator && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollGrid-indicator"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ScrollGrid-indicatorBar",
+    style: {
+      width: barWidth,
+      transform: "translateX(".concat(barLeft, "px)")
+    }
+  })));
+}

package/lib/components/ScrollView/Item.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type ScrollViewEffect = 'slide' | 'fade' | '';
+export type ScrollViewItemProps = {
+    item: any;
+    effect?: ScrollViewEffect;
+    onIntersect?: (item?: any, entry?: IntersectionObserverEntry) => boolean | void;
+    children?: React.ReactNode;
+};
+export declare const Item: (props: ScrollViewItemProps) => React.JSX.Element;