@mirai/ui 1.1.0-f → 1.1.2

package/build/components/Progress/Progress.js

@@ -26,6 +26,7 @@ var Progress = function Progress(_ref) {
     role: others.role || 'progress',
     className: (0, _helpers.styles)(_ProgressModule.default.progress, visible && _ProgressModule.default.visible, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    role: "progress-value",
     className: (0, _helpers.styles)(_ProgressModule.default.value, indeterminate && _ProgressModule.default.indeterminate),
     style: !indeterminate ? {
       width: "".concat(value, "%")
@@ -33,6 +34,7 @@ var Progress = function Progress(_ref) {
   }));
 };
 exports.Progress = Progress;
+Progress.displayName = 'Component:Progress';
 Progress.propTypes = {
   indeterminate: _propTypes.default.bool,
   value: _propTypes.default.number,

package/build/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["Progress","indeterminate","value","visible","others","role","styles","style","progress","className","width","undefined","propTypes","PropTypes","bool","number"],"sources":["../../../src/components/Progress/Progress.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport style from './Progress.module.css';\n\nconst Progress = ({ indeterminate = false, value = 0, visible = false, ...others }) => (\n  <View\n    {...others}\n    role={others.role || 'progress'}\n    className={styles(style.progress, visible && style.visible, others.className)}\n  >\n    <View\n      className={styles(style.value, indeterminate && style.indeterminate)}\n      style={!indeterminate ? { width: `${value}%` } : undefined}\n    />\n  </View>\n);\n\nProgress.propTypes = {\n  indeterminate: PropTypes.bool,\n  value: PropTypes.number,\n  visible: PropTypes.bool,\n};\n\nexport { Progress };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ;EAAA,8BAAMC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAKC,MAAM;EAAA,oBAC9E,6BAAC,gBAAI,eACCA,MAAM;IACV,IAAI,EAAEA,MAAM,CAACC,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEL,OAAO,IAAII,uBAAK,CAACJ,OAAO,EAAEC,MAAM,CAACK,SAAS;EAAE,iBAE9E,6BAAC,gBAAI;IACH,SAAS,EAAE,IAAAH,eAAM,EAACC,uBAAK,CAACL,KAAK,EAAED,aAAa,IAAIM,uBAAK,CAACN,aAAa,CAAE;IACrE,KAAK,EAAE,CAACA,aAAa,GAAG;MAAES,KAAK,YAAKR,KAAK;IAAI,CAAC,GAAGS;EAAU,EAC3D,CACG;AAAA,CACR;AAAC;AAEFX,QAAQ,CAACY,SAAS,GAAG;EACnBX,aAAa,EAAEY,kBAAS,CAACC,IAAI;EAC7BZ,KAAK,EAAEW,kBAAS,CAACE,MAAM;EACvBZ,OAAO,EAAEU,kBAAS,CAACC;AACrB,CAAC"}
+{"version":3,"file":"Progress.js","names":["Progress","indeterminate","value","visible","others","role","styles","style","progress","className","width","undefined","displayName","propTypes","PropTypes","bool","number"],"sources":["../../../src/components/Progress/Progress.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { View } from '../../primitives';\nimport style from './Progress.module.css';\n\nconst Progress = ({ indeterminate = false, value = 0, visible = false, ...others }) => (\n  <View\n    {...others}\n    role={others.role || 'progress'}\n    className={styles(style.progress, visible && style.visible, others.className)}\n  >\n    <View\n      role=\"progress-value\"\n      className={styles(style.value, indeterminate && style.indeterminate)}\n      style={!indeterminate ? { width: `${value}%` } : undefined}\n    />\n  </View>\n);\n\nProgress.displayName = 'Component:Progress';\n\nProgress.propTypes = {\n  indeterminate: PropTypes.bool,\n  value: PropTypes.number,\n  visible: PropTypes.bool,\n};\n\nexport { Progress };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ;EAAA,8BAAMC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAKC,MAAM;EAAA,oBAC9E,6BAAC,gBAAI,eACCA,MAAM;IACV,IAAI,EAAEA,MAAM,CAACC,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEL,OAAO,IAAII,uBAAK,CAACJ,OAAO,EAAEC,MAAM,CAACK,SAAS;EAAE,iBAE9E,6BAAC,gBAAI;IACH,IAAI,EAAC,gBAAgB;IACrB,SAAS,EAAE,IAAAH,eAAM,EAACC,uBAAK,CAACL,KAAK,EAAED,aAAa,IAAIM,uBAAK,CAACN,aAAa,CAAE;IACrE,KAAK,EAAE,CAACA,aAAa,GAAG;MAAES,KAAK,YAAKR,KAAK;IAAI,CAAC,GAAGS;EAAU,EAC3D,CACG;AAAA,CACR;AAAC;AAEFX,QAAQ,CAACY,WAAW,GAAG,oBAAoB;AAE3CZ,QAAQ,CAACa,SAAS,GAAG;EACnBZ,aAAa,EAAEa,kBAAS,CAACC,IAAI;EAC7Bb,KAAK,EAAEY,kBAAS,CAACE,MAAM;EACvBb,OAAO,EAAEW,kBAAS,CAACC;AACrB,CAAC"}

package/build/components/Progress/__tests__/__snapshots__/Progress.test.jsx.snap

@@ -2,78 +2,78 @@
 
 exports[`component:<Progress> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view progress mirai"
   >
-    <ui_view
+    <div
       class="view value"
       style="width: 0%;"
     />
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<Progress> prop:indeterminate 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view progress"
   >
-    <ui_view
+    <div
       class="view value indeterminate"
     />
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<Progress> prop:value 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view progress"
   >
-    <ui_view
+    <div
       class="view value"
       style="width: 50%;"
     />
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<Progress> prop:visible 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view progress visible"
   >
-    <ui_view
+    <div
       class="view value"
       style="width: 50%;"
     />
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<Progress> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view progress"
   >
-    <ui_view
+    <div
       class="view value"
       style="width: 0%;"
     />
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`component:<Progress> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view progress"
     data-testid="mirai"
   >
-    <ui_view
+    <div
       class="view value"
       style="width: 0%;"
     />
-  </ui_view>
+  </div>
 </DocumentFragment>
 `;

package/build/components/Slider/Slider.constants.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PRELOAD_IMAGES = void 0;
+exports.SCROLL_DELAY = exports.PRELOAD_IMAGES = void 0;
 var PRELOAD_IMAGES = 2;
 exports.PRELOAD_IMAGES = PRELOAD_IMAGES;
+var SCROLL_DELAY = 1000;
+exports.SCROLL_DELAY = SCROLL_DELAY;
 //# sourceMappingURL=Slider.constants.js.map

package/build/components/Slider/Slider.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 2;\n\nexport { PRELOAD_IMAGES };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC"}
+{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES","SCROLL_DELAY"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 2;\n\nconst SCROLL_DELAY = 1000;\n\nexport { PRELOAD_IMAGES, SCROLL_DELAY };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC;AAEzB,IAAMC,YAAY,GAAG,IAAI;AAAC"}

package/build/components/Slider/Slider.js

@@ -10,10 +10,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
-var _helpers2 = require("./helpers");
+var _theme = require("../../theme");
+var _Progress = require("../Progress");
 var _Slider = require("./Slider.constants");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
-var _excluded = ["auto", "captions", "fullScreen", "height", "images", "index", "thumbnails", "width", "onChange", "onFullScreen"];
+var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "indicator", "replay", "width", "onChange", "onCounter"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,38 +37,36 @@ var timeout;
 var Slider = function Slider(_ref) {
   var _ref$auto = _ref.auto,
     auto = _ref$auto === void 0 ? false : _ref$auto,
+    _ref$behavior = _ref.behavior,
+    behavior = _ref$behavior === void 0 ? 'smooth' : _ref$behavior,
     _ref$captions = _ref.captions,
     captions = _ref$captions === void 0 ? [] : _ref$captions,
-    _ref$fullScreen = _ref.fullScreen,
-    propFullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
     _ref$height = _ref.height,
     propHeight = _ref$height === void 0 ? 240 : _ref$height,
     _ref$images = _ref.images,
     images = _ref$images === void 0 ? [] : _ref$images,
     _ref$index = _ref.index,
     propIndex = _ref$index === void 0 ? 0 : _ref$index,
-    _ref$thumbnails = _ref.thumbnails,
-    thumbnails = _ref$thumbnails === void 0 ? [] : _ref$thumbnails,
+    _ref$indicator = _ref.indicator,
+    indicator = _ref$indicator === void 0 ? false : _ref$indicator,
+    _ref$replay = _ref.replay,
+    replay = _ref$replay === void 0 ? true : _ref$replay,
     _ref$width = _ref.width,
     propWidth = _ref$width === void 0 ? 320 : _ref$width,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    _ref$onFullScreen = _ref.onFullScreen,
-    onFullScreen = _ref$onFullScreen === void 0 ? function () {} : _ref$onFullScreen,
+    onCounter = _ref.onCounter,
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
-    screenHeight = _useDevice.height,
-    isDesktop = _useDevice.isDesktop,
-    isLandscape = _useDevice.isLandscape,
-    screenWidth = _useDevice.width;
-  var _useState = (0, _react.useState)(false),
+    isDesktop = _useDevice.isDesktop;
+  var _useState = (0, _react.useState)(true),
     _useState2 = _slicedToArray(_useState, 2),
-    focus = _useState2[0],
-    setFocus = _useState2[1];
-  var _useState3 = (0, _react.useState)(propFullScreen),
+    disabledScroll = _useState2[0],
+    setDisabledScroll = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    fullScreen = _useState4[0],
-    setFullScreen = _useState4[1];
+    focus = _useState4[0],
+    setFocus = _useState4[1];
   var _useState5 = (0, _react.useState)(propIndex),
     _useState6 = _slicedToArray(_useState5, 2),
     index = _useState6[0],
@@ -84,23 +83,28 @@ var Slider = function Slider(_ref) {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   (0, _react.useEffect)(function () {
-    return onChange(index);
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      return setDisabledScroll(false);
+    }, _Slider.SCROLL_DELAY);
+    onChange(index);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  (0, _react.useEffect)(function () {
-    return onFullScreen(fullScreen);
-  }, [fullScreen]);
-  var height = fullScreen ? screenHeight * (isLandscape ? 0.9 : 0.4) : propHeight;
-  var width = fullScreen ? screenWidth * (isLandscape ? 0.85 : 0.9) : propWidth;
+  var height = propHeight;
+  var width = propWidth;
+  var handleIndex = function handleIndex(nextIndex) {
+    setDisabledScroll(true);
+    setIndex(Math.abs(nextIndex) === images.length ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));
+  };
   var handleScroll = function handleScroll() {
     var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       x = _ref2.x;
-    clearTimeout(timeout);
-    timeout = setTimeout(function () {
-      setIndex(x < width ? 0 : Math.round(x / width));
-    }, (0, _helpers2.getMotionExpand)());
+    var nextIndex = x < width ? 0 : Math.round(x / width);
+    if (nextIndex !== index) setIndex(nextIndex);
   };
+  var defaultDirection = _theme.Theme.getDirection() === _theme.DIRECTION_TYPE.LEFT;
+  var hasImages = images.length > 1;
+  var isEnd = Math.abs(index) >= images.length - 1;
   return /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     role: "slider",
     onMouseEnter: isDesktop ? function () {
@@ -109,23 +113,25 @@ var Slider = function Slider(_ref) {
     onMouseLeave: isDesktop ? function () {
       return setFocus(false);
     } : undefined,
-    className: (0, _helpers.styles)(_SliderModule.default.slider, fullScreen && _SliderModule.default.fullScreen, others.className),
-    style: _objectSpread(_objectSpread({}, !fullScreen ? others.style : undefined), {}, {
-      width: fullScreen ? screenWidth : width
+    className: (0, _helpers.styles)(_SliderModule.default.container, others.className),
+    style: _objectSpread(_objectSpread({}, others.style), {}, {
+      width: width
     })
-  }), !fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  }), hasImages && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: function onPress() {
-      return setIndex(index - 1);
+      return handleIndex(index - 1);
     },
-    className: (0, _helpers.styles)(_SliderModule.default.button, (index <= 0 || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.back)
+    className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? index <= 0 : replay ? false : isEnd) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.first)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: _primitives.ICON.LEFT
+    value: replay && !defaultDirection && isEnd ? _primitives.ICON.REPLAY : _primitives.ICON.LEFT
   })), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
+    behavior: behavior,
     horizontal: true,
+    scrollEventThrottle: _Slider.SCROLL_DELAY,
     scrollTo: index * Math.floor(width),
     snap: true,
     width: width,
-    onScroll: handleScroll,
+    onScroll: disabledScroll ? undefined : handleScroll,
     className: _SliderModule.default.scrollView
   }, images.map(function (image, imageIndex) {
     return /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -133,12 +139,9 @@ var Slider = function Slider(_ref) {
       className: _SliderModule.default.item
     }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
       role: "image",
-      onClick: function onClick() {
-        return setFullScreen(!fullScreen);
-      },
       className: _SliderModule.default.image,
       style: {
-        backgroundImage: fullScreen || imageIndex >= index - _Slider.PRELOAD_IMAGES && imageIndex <= index + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
+        backgroundImage: replay || imageIndex >= Math.abs(index) - _Slider.PRELOAD_IMAGES && imageIndex <= Math.abs(index) + _Slider.PRELOAD_IMAGES ? "url(".concat(image, ")") : undefined,
         height: height,
         width: width
       }
@@ -147,44 +150,42 @@ var Slider = function Slider(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
       bold: true,
       small: true,
-      className: _SliderModule.default.text
+      className: [_SliderModule.default.overlay, _SliderModule.default.text]
     }, captions[imageIndex])));
-  })), !fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  })), hasImages && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: function onPress() {
-      return setIndex(index + 1);
+      return handleIndex(index + 1);
     },
-    className: (0, _helpers.styles)(_SliderModule.default.button, (index >= images.length - 1 || isDesktop && !focus) && _SliderModule.default.hide && _SliderModule.default.hide, _SliderModule.default.forward)
+    className: (0, _helpers.styles)(_SliderModule.default.button, ((defaultDirection ? replay ? false : isEnd : index === 0) || isDesktop && !focus) && _SliderModule.default.hide, _SliderModule.default.second)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    value: _primitives.ICON.RIGHT
-  })), fullScreen && /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
-    horizontal: true,
-    snap: true,
-    className: _SliderModule.default.thumbnails
-  }, images.map(function (image, imageIndex) {
-    return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-      key: imageIndex,
-      onPress: function onPress() {
-        return setIndex(imageIndex);
-      },
-      className: (0, _helpers.styles)(_SliderModule.default.thumbnail, index === imageIndex && _SliderModule.default.active),
-      style: {
-        backgroundImage: "url(".concat(thumbnails[imageIndex] || image, ")")
-      }
-    });
-  })));
+    value: replay && defaultDirection && index === images.length - 1 ? _primitives.ICON.REPLAY : _primitives.ICON.RIGHT
+  })), hasImages && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: onCounter,
+    className: (0, _helpers.styles)(_SliderModule.default.overlay, _SliderModule.default.counter, !defaultDirection && _SliderModule.default.reverse)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    action: true,
+    value: _primitives.ICON.PHOTO_LIBRARY
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    bold: true,
+    small: true
+  }, images.length)), indicator && /*#__PURE__*/_react.default.createElement(_Progress.Progress, {
+    value: index * 100 / (images.length - 1),
+    className: (0, _helpers.styles)(_SliderModule.default.progress, index > 0 && _SliderModule.default.visible)
+  }));
 };
 exports.Slider = Slider;
 Slider.displayName = 'Component:Slider';
 Slider.propTypes = {
   auto: _propTypes.default.bool,
+  behavior: _propTypes.default.string,
   captions: _propTypes.default.arrayOf(_propTypes.default.string),
-  fullScreen: _propTypes.default.bool,
   height: _propTypes.default.number.isRequired,
   images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
   index: _propTypes.default.number,
-  thumbnails: _propTypes.default.arrayOf(_propTypes.default.string),
+  indicator: _propTypes.default.bool,
+  replay: _propTypes.default.bool,
   width: _propTypes.default.number.isRequired,
   onChange: _propTypes.default.func,
-  onFullScreen: _propTypes.default.func
+  onCounter: _propTypes.default.func
 };
 //# sourceMappingURL=Slider.js.map

package/build/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","fullScreen","propFullScreen","height","propHeight","images","index","propIndex","thumbnails","width","propWidth","onChange","onFullScreen","others","useDevice","screenHeight","isDesktop","isLandscape","screenWidth","useState","focus","setFocus","setFullScreen","setIndex","useEffect","setInterval","length","clearInterval","handleScroll","x","clearTimeout","setTimeout","Math","round","getMotionExpand","undefined","styles","style","slider","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","text","forward","RIGHT","thumbnail","active","displayName","propTypes","PropTypes","bool","arrayOf","string","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  captions = [],\n  fullScreen: propFullScreen = false,\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  thumbnails = [],\n  width: propWidth = 320,\n  onChange = () => {},\n  onFullScreen = () => {},\n  ...others\n}) => {\n  const { height: screenHeight, isDesktop, isLandscape, width: screenWidth } = useDevice();\n\n  const [focus, setFocus] = useState(false);\n  const [fullScreen, setFullScreen] = useState(propFullScreen);\n  const [index, setIndex] = useState(propIndex);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onChange(index), [index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => onFullScreen(fullScreen), [fullScreen]);\n\n  const height = fullScreen ? screenHeight * (isLandscape ? 0.9 : 0.4) : propHeight;\n\n  const width = fullScreen ? screenWidth * (isLandscape ? 0.85 : 0.9) : propWidth;\n\n  const handleScroll = ({ x } = {}) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      setIndex(x < width ? 0 : Math.round(x / width));\n    }, getMotionExpand());\n  };\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.slider, fullScreen && style.fullScreen, others.className)}\n      style={{ ...(!fullScreen ? others.style : undefined), width: fullScreen ? screenWidth : width }}\n    >\n      {!fullScreen && (\n        <Pressable\n          onPress={() => setIndex(index - 1)}\n          className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n        >\n          <Icon value={ICON.LEFT} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        horizontal\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} className={style.item}>\n            <View\n              role=\"image\"\n              onClick={() => setFullScreen(!fullScreen)}\n              className={style.image}\n              style={{\n                backgroundImage:\n                  fullScreen || (imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES)\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={style.text}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n      </ScrollView>\n\n      {!fullScreen && (\n        <Pressable\n          onPress={() => setIndex(index + 1)}\n          className={styles(\n            style.button,\n            (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n            style.forward,\n          )}\n        >\n          <Icon value={ICON.RIGHT} />\n        </Pressable>\n      )}\n\n      {fullScreen && (\n        <ScrollView horizontal snap className={style.thumbnails}>\n          {images.map((image, imageIndex) => (\n            <Pressable\n              key={imageIndex}\n              onPress={() => setIndex(imageIndex)}\n              className={styles(style.thumbnail, index === imageIndex && style.active)}\n              style={{ backgroundImage: `url(${thumbnails[imageIndex] || image})` }}\n            />\n          ))}\n        </ScrollView>\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  fullScreen: PropTypes.bool,\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  thumbnails: PropTypes.arrayOf(PropTypes.string),\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onFullScreen: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","indicator","replay","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","Math","abs","defaultDirection","handleScroll","x","round","Theme","getDirection","DIRECTION_TYPE","LEFT","hasImages","isEnd","undefined","styles","style","container","className","button","hide","first","ICON","REPLAY","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","second","RIGHT","counter","reverse","PHOTO_LIBRARY","progress","visible","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { Progress } from '../Progress';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n  auto = false,\n  behavior = 'smooth',\n  captions = [],\n  height: propHeight = 240,\n  images = [],\n  index: propIndex = 0,\n  indicator = false,\n  replay = true,\n  width: propWidth = 320,\n  onChange = () => {},\n  onCounter,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const [disabledScroll, setDisabledScroll] = useState(true);\n  const [focus, setFocus] = useState(false);\n  const [index, setIndex] = useState(propIndex);\n\n  useEffect(() => {\n    if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [auto, index]);\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n    onChange(index);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [index]);\n\n  const height = propHeight;\n\n  const width = propWidth;\n\n  const handleIndex = (nextIndex) => {\n    setDisabledScroll(true);\n    setIndex(Math.abs(nextIndex) === images.length ? 0 : Math.abs(nextIndex) * (defaultDirection ? 1 : -1));\n  };\n\n  const handleScroll = ({ x } = {}) => {\n    const nextIndex = x < width ? 0 : Math.round(x / width);\n\n    if (nextIndex !== index) setIndex(nextIndex);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const hasImages = images.length > 1;\n  const isEnd = Math.abs(index) >= images.length - 1;\n\n  return (\n    <View\n      {...others}\n      role=\"slider\"\n      onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n      onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n      className={styles(style.container, others.className)}\n      style={{ ...others.style, width }}\n    >\n      {hasImages && (\n        <Pressable\n          onPress={() => handleIndex(index - 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? index <= 0 : replay ? false : isEnd) || (isDesktop && !focus)) && style.hide,\n            style.first,\n          )}\n        >\n          <Icon value={replay && !defaultDirection && isEnd ? ICON.REPLAY : ICON.LEFT} />\n        </Pressable>\n      )}\n\n      <ScrollView\n        behavior={behavior}\n        horizontal\n        scrollEventThrottle={SCROLL_DELAY}\n        scrollTo={index * Math.floor(width)}\n        snap\n        width={width}\n        onScroll={disabledScroll ? undefined : handleScroll}\n        className={style.scrollView}\n      >\n        {images.map((image, imageIndex) => (\n          <View key={imageIndex} className={style.item}>\n            <View\n              role=\"image\"\n              className={style.image}\n              style={{\n                backgroundImage:\n                  replay ||\n                  (imageIndex >= Math.abs(index) - PRELOAD_IMAGES && imageIndex <= Math.abs(index) + PRELOAD_IMAGES)\n                    ? `url(${image})`\n                    : undefined,\n                height,\n                width,\n              }}\n            />\n            {captions[imageIndex] && (\n              <View className={style.caption}>\n                <Text bold small className={[style.overlay, style.text]}>\n                  {captions[imageIndex]}\n                </Text>\n              </View>\n            )}\n          </View>\n        ))}\n      </ScrollView>\n\n      {hasImages && (\n        <Pressable\n          onPress={() => handleIndex(index + 1)}\n          className={styles(\n            style.button,\n            ((defaultDirection ? (replay ? false : isEnd) : index === 0) || (isDesktop && !focus)) && style.hide,\n            style.second,\n          )}\n        >\n          <Icon value={replay && defaultDirection && index === images.length - 1 ? ICON.REPLAY : ICON.RIGHT} />\n        </Pressable>\n      )}\n\n      {hasImages && onCounter && (\n        <Pressable\n          onPress={onCounter}\n          className={styles(style.overlay, style.counter, !defaultDirection && style.reverse)}\n        >\n          <Icon action value={ICON.PHOTO_LIBRARY} />\n          <Text bold small>\n            {images.length}\n          </Text>\n        </Pressable>\n      )}\n\n      {indicator && (\n        <Progress\n          value={(index * 100) / (images.length - 1)}\n          className={styles(style.progress, index > 0 && style.visible)}\n        />\n      )}\n    </View>\n  );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n  auto: PropTypes.bool,\n  behavior: PropTypes.string,\n  captions: PropTypes.arrayOf(PropTypes.string),\n  height: PropTypes.number.isRequired,\n  images: PropTypes.arrayOf(PropTypes.string).isRequired,\n  index: PropTypes.number,\n  indicator: PropTypes.bool,\n  replay: PropTypes.bool,\n  width: PropTypes.number.isRequired,\n  onChange: PropTypes.func,\n  onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}

package/build/components/Slider/Slider.module.css

@@ -1,24 +1,15 @@
-.slider {
+.container {
   align-items: center;
   justify-content: center;
   overflow: hidden;
   position: relative;
 }
 
-.slider.fullScreen {
-  background-color: var(--mirai-ui-slider-background);
-  height: 100vh;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-}
-
 .button {
   align-items: center;
-  background-color: var(--mirai-ui-slider-overlay);
+  background-color: var(--mirai-ui-slider-button);
   border-radius: 50%;
+  box-shadow: var(--mirai-ui-modal-shadow);
   display: flex;
   height: var(--mirai-ui-button-squared);
   justify-content: center;
@@ -33,20 +24,16 @@
   transform: scale(0);
 }
 
-.button > * {
-  color: var(--mirai-ui-slider-color);
-}
-
-.button.back {
-  left: var(--mirai-ui-space-M);
+.button > [data-role='icon'] {
+  color: var(--mirai-ui-slider-button-icon);
 }
 
-.button.forward {
-  right: var(--mirai-ui-space-M);
+.button.first {
+  left: var(--mirai-ui-space-S);
 }
 
-.fullScreen .scrollView {
-  gap: var(--mirai-ui-space-M);
+.button.second {
+  right: var(--mirai-ui-space-S);
 }
 
 .item {
@@ -54,17 +41,13 @@
 }
 
 .item .image {
-  background-color: var(--mirai-ui-content-background);
+  background-color: var(--mirai-ui-content-border);
+  background-position: center;
   background-size: cover;
-  cursor: pointer;
   height: 100%;
   width: 100%;
 }
 
-.fullScreen .item .image {
-  border-radius: var(--mirai-ui-slider-border-radius);
-}
-
 .item .caption {
   align-items: center;
   bottom: var(--mirai-ui-space-S);
@@ -74,45 +57,65 @@
 }
 
 .item .caption .text {
-  background-color: var(--mirai-ui-slider-overlay);
-  border-radius: var(--mirai-ui-slider-border-radius);
-  color: var(--mirai-ui-slider-color);
-  padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
+  color: var(--mirai-ui-slider-overlay-color);
+}
+
+.counter {
+  align-items: center;
+  bottom: var(--mirai-ui-space-S);
+  display: flex;
+  flex-direction: row;
+  gap: var(--mirai-ui-space-XXS);
+  position: absolute;
 }
 
-.thumbnails {
-  margin-top: var(--mirai-ui-space-S);
-  gap: var(--mirai-ui-space-S);
-  max-width: 90vw;
+.counter:not(.reverse) {
+  right: var(--mirai-ui-space-S);
 }
 
-.thumbnail {
-  background-size: cover;
+.counter.reverse {
+  left: var(--mirai-ui-space-S);
+}
+
+.counter [data-role] {
+  color: var(--mirai-ui-slider-color);
+}
+
+.overlay {
+  background-color: var(--mirai-ui-slider-overlay);
   border-radius: var(--mirai-ui-slider-border-radius);
-  min-height: var(--mirai-ui-space-XL);
-  opacity: 0.66;
-  transition: all var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
-  width: var(--mirai-ui-space-XXL);
-  min-width: var(--mirai-ui-space-XXL);
+  padding: var(--mirai-ui-space-XXS) var(--mirai-ui-space-XS);
+}
+
+.overlay [data-role] {
+  color: var(--mirai-ui-slider-overlay-color);
 }
 
-.thumbnail:hover {
-  opacity: 1;
+.progress {
+  background-color: var(--mirai-ui-slider-overlay);
+  bottom: 0;
+  height: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
 }
 
-.thumbnail.active {
-  box-shadow: inset 0 0 0 2px var(--mirai-ui-slider-color);
-  opacity: 1;
+.progress.visible {
+  height: calc(var(--mirai-ui-space-XS) / 1);
 }
 
 /* S */
 @media only screen and (max-width: 430px) {
-  .thumbnails {
-    position: absolute;
-    bottom: var(--mirai-ui-space-M);
-  }
 }
 
 /* M & L */
 @media only screen and (min-width: 431px) {
+  .item .caption {
+    transition: opacity var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+    opacity: 0;
+  }
+
+  .item:hover .caption {
+    opacity: 1;
+  }
 }

package/build/components/Slider/Slider.stories.js

@@ -22,12 +22,12 @@ var Story = function Story(props) {
       }
       return (_console = console).log.apply(_console, ['onChange'].concat(params));
     },
-    onFullScreen: function onFullScreen() {
+    onCounter: function onCounter() {
       var _console2;
       for (var _len2 = arguments.length, params = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         params[_key2] = arguments[_key2];
       }
-      return (_console2 = console).log.apply(_console2, ['onFullScreen'].concat(params));
+      return (_console2 = console).log.apply(_console2, ['onCounter'].concat(params));
     }
   }));
 };
@@ -35,17 +35,20 @@ exports.Story = Story;
 Story.storyName = 'Slider';
 Story.args = {
   auto: false,
+  behavior: 'smooth',
   captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],
-  height: 200,
-  index: 1,
+  height: 208,
   images: ['https://picsum.photos/seed/@soyjavi/1024/768', 'https://picsum.photos/seed/@jose/1024/768', 'https://picsum.photos/seed/@mario1/1024/768', 'https://picsum.photos/seed/@victor/1024/768', 'https://picsum.photos/seed/@svet/1024/768', 'https://picsum.photos/seed/@mario2/1024/768', 'https://picsum.photos/seed/1/1024/768', 'https://picsum.photos/seed/2/1024/768', 'https://picsum.photos/seed/3/1024/768', 'https://picsum.photos/seed/4/1024/768', 'https://picsum.photos/seed/5/1024/768', 'https://picsum.photos/seed/6/1024/768', 'https://picsum.photos/seed/7/1024/768', 'https://picsum.photos/seed/8/1024/768', 'https://picsum.photos/seed/9/1024/768', 'https://picsum.photos/seed/10/1024/768', 'https://picsum.photos/seed/11/1024/768', 'https://picsum.photos/seed/12/1024/768'],
   fullScreen: false,
   thumbnails: ['https://picsum.photos/seed/@soyjavi/128/128', 'https://picsum.photos/seed/@jose/128/128', 'https://picsum.photos/seed/@mario1/128/128', 'https://picsum.photos/seed/@victor/128/128', 'https://picsum.photos/seed/@svet/128/128', 'https://picsum.photos/seed/@mario2/128/128', 'https://picsum.photos/seed/1/128/128', 'https://picsum.photos/seed/2/128/128', 'https://picsum.photos/seed/3/128/128', 'https://picsum.photos/seed/4/128/128', 'https://picsum.photos/seed/5/128/128', 'https://picsum.photos/seed/6/128/128', 'https://picsum.photos/seed/7/128/128', 'https://picsum.photos/seed/8/128/128', 'https://picsum.photos/seed/9/128/128', 'https://picsum.photos/seed/10/128/128', 'https://picsum.photos/seed/11/128/128', 'https://picsum.photos/seed/12/128/128'],
-  width: 320,
+  index: 0,
+  indicator: true,
+  replay: true,
+  width: 408,
   // inherited properties
   testId: 'test-story',
   style: {
-    borderRadius: 16
+    borderRadius: 2
   }
 };
 Story.argTypes = {};