@mirai/ui 1.0.0

package/build/primitives/ScrollView/ScrollView.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollView = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _ScrollViewModule = _interopRequireDefault(require("./ScrollView.module.css"));
+
+var _excluded = ["behavior", "children", "height", "horizontal", "scrollEventThrottle", "scrollIndicator", "scrollTo", "tag", "width", "onScroll"];
+
+var ScrollView = function ScrollView(_ref) {
+  var _ref$behavior = _ref.behavior,
+      behavior = _ref$behavior === void 0 ? 'smooth' : _ref$behavior,
+      children = _ref.children,
+      height = _ref.height,
+      horizontal = _ref.horizontal,
+      _ref$scrollEventThrot = _ref.scrollEventThrottle,
+      scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 16 : _ref$scrollEventThrot,
+      scrollIndicator = _ref.scrollIndicator,
+      scrollTo = _ref.scrollTo,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+      width = _ref.width,
+      onScroll = _ref.onScroll,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var ref = (0, _react.useRef)();
+  var timeout = null;
+  (0, _react.useEffect)(function () {
+    var _current$scrollTo;
+
+    var _ref2 = ref || {},
+        _ref2$current = _ref2.current,
+        current = _ref2$current === void 0 ? {} : _ref2$current;
+
+    if (!current.scrollTo || !scrollTo) return;
+    current.scrollTo((_current$scrollTo = {}, (0, _defineProperty2.default)(_current$scrollTo, horizontal ? 'left' : 'top', scrollTo), (0, _defineProperty2.default)(_current$scrollTo, "behavior", behavior), _current$scrollTo)); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollTo]);
+
+  var handleScroll = function handleScroll(_ref3) {
+    var _ref3$target = _ref3.target;
+    _ref3$target = _ref3$target === void 0 ? {} : _ref3$target;
+    var clientHeight = _ref3$target.clientHeight,
+        clientWidth = _ref3$target.clientWidth,
+        scrollHeight = _ref3$target.scrollHeight,
+        scrollWidth = _ref3$target.scrollWidth,
+        scrollTop = _ref3$target.scrollTop,
+        scrollLeft = _ref3$target.scrollLeft;
+    var x = parseInt(scrollLeft, 10);
+    var y = parseInt(scrollTop, 10);
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      onScroll({
+        x: x,
+        y: y,
+        percentX: parseInt(x * 100 / (scrollWidth - clientWidth), 10),
+        percentY: parseInt(y * 100 / (scrollHeight - clientHeight), 10)
+      });
+    }, scrollEventThrottle);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(tag, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
+    ref: ref,
+    className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, horizontal && _ScrollViewModule.default.horizontal, scrollIndicator && _ScrollViewModule.default.indicator, others.className),
+    style: {
+      height: height,
+      width: width
+    },
+    onScroll: onScroll ? handleScroll : undefined
+  }), children);
+};
+
+exports.ScrollView = ScrollView;
+ScrollView.displayName = 'Primitive:ScrollView';
+//# sourceMappingURL=ScrollView.js.map

package/build/primitives/ScrollView/ScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","tag","width","onScroll","others","ref","timeout","current","handleScroll","target","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","clearTimeout","setTimeout","percentX","percentY","React","createElement","className","style","scrollview","indicator","undefined","displayName"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAYb;AAAA,2BAXJC,QAWI;AAAA,MAXJA,QAWI,8BAXO,QAWP;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,MASI,QATJA,MASI;AAAA,MARJC,UAQI,QARJA,UAQI;AAAA,mCAPJC,mBAOI;AAAA,MAPJA,mBAOI,sCAPkB,EAOlB;AAAA,MANJC,eAMI,QANJA,eAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,sBAJJC,GAII;AAAA,MAJJA,GAII,yBAJE,KAIF;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,MACC;AACJ,MAAMC,GAAG,GAAG,oBAAZ;AAEA,MAAIC,OAAO,GAAG,IAAd;AAEA,wBAAU,YAAM;AAAA;;AACd,gBAAyBD,GAAG,IAAI,EAAhC;AAAA,8BAAQE,OAAR;AAAA,QAAQA,OAAR,8BAAkB,EAAlB;;AACA,QAAI,CAACA,OAAO,CAACP,QAAT,IAAqB,CAACA,QAA1B,EAAoC;AAEpCO,IAAAA,OAAO,CAACP,QAAR,2EAAoBH,UAAU,GAAG,MAAH,GAAY,KAA1C,EAAkDG,QAAlD,gEAA4DN,QAA5D,uBAJc,CAKd;AACD,GAND,EAMG,CAACM,QAAD,CANH;;AAQA,MAAMQ,YAAY,GAAG,SAAfA,YAAe,QAEf;AAAA,6BADJC,MACI;AAAA,6CADsF,EACtF;AAAA,QADMC,YACN,gBADMA,YACN;AAAA,QADoBC,WACpB,gBADoBA,WACpB;AAAA,QADiCC,YACjC,gBADiCA,YACjC;AAAA,QAD+CC,WAC/C,gBAD+CA,WAC/C;AAAA,QAD4DC,SAC5D,gBAD4DA,SAC5D;AAAA,QADuEC,UACvE,gBADuEA,UACvE;AACJ,QAAMC,CAAC,GAAGC,QAAQ,CAACF,UAAD,EAAa,EAAb,CAAlB;AACA,QAAMG,CAAC,GAAGD,QAAQ,CAACH,SAAD,EAAY,EAAZ,CAAlB;AAEAK,IAAAA,YAAY,CAACb,OAAD,CAAZ;AACAA,IAAAA,OAAO,GAAGc,UAAU,CAAC,YAAM;AACzBjB,MAAAA,QAAQ,CAAC;AACPa,QAAAA,CAAC,EAADA,CADO;AAEPE,QAAAA,CAAC,EAADA,CAFO;AAGPG,QAAAA,QAAQ,EAAEJ,QAAQ,CAAED,CAAC,GAAG,GAAL,IAAaH,WAAW,GAAGF,WAA3B,CAAD,EAA0C,EAA1C,CAHX;AAIPW,QAAAA,QAAQ,EAAEL,QAAQ,CAAEC,CAAC,GAAG,GAAL,IAAaN,YAAY,GAAGF,YAA5B,CAAD,EAA4C,EAA5C;AAJX,OAAD,CAAR;AAMD,KAPmB,EAOjBZ,mBAPiB,CAApB;AAQD,GAfD;;AAiBA,sBAAOyB,eAAMC,aAAN,CACLvB,GADK,8DAGAG,MAHA;AAIHC,IAAAA,GAAG,EAAHA,GAJG;AAKHoB,IAAAA,SAAS,EAAE,qBACTC,0BAAMC,UADG,EAET9B,UAAU,IAAI6B,0BAAM7B,UAFX,EAGTE,eAAe,IAAI2B,0BAAME,SAHhB,EAITxB,MAAM,CAACqB,SAJE,CALR;AAWHC,IAAAA,KAAK,EAAE;AAAE9B,MAAAA,MAAM,EAANA,MAAF;AAAUM,MAAAA,KAAK,EAALA;AAAV,KAXJ;AAYHC,IAAAA,QAAQ,EAAEA,QAAQ,GAAGK,YAAH,GAAkBqB;AAZjC,MAcLlC,QAdK,CAAP;AAgBD,CA1DD;;;AA4DAF,UAAU,CAACqC,WAAX,GAAyB,sBAAzB","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n  behavior = 'smooth',\n  children,\n  height,\n  horizontal,\n  scrollEventThrottle = 16, // * 60fps\n  scrollIndicator,\n  scrollTo,\n  tag = 'div',\n  width,\n  onScroll,\n  ...others\n}) => {\n  const ref = useRef();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current = {} } = ref || {};\n    if (!current.scrollTo || !scrollTo) return;\n\n    current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollTo]);\n\n  const handleScroll = ({\n    target: { clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {},\n  }) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      onScroll({\n        x,\n        y,\n        percentX: parseInt((x * 100) / (scrollWidth - clientWidth), 10),\n        percentY: parseInt((y * 100) / (scrollHeight - clientHeight), 10),\n      });\n    }, scrollEventThrottle);\n  };\n\n  return React.createElement(\n    tag,\n    {\n      ...others,\n      ref,\n      className: styles(\n        style.scrollview,\n        horizontal && style.horizontal,\n        scrollIndicator && style.indicator,\n        others.className,\n      ),\n      style: { height, width },\n      onScroll: onScroll ? handleScroll : undefined,\n    },\n    children,\n  );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n  behavior: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  height: PropTypes.number,\n  horizontal: PropTypes.bool,\n  scrollEventThrottle: PropTypes.number,\n  scrollIndicator: PropTypes.bool,\n  scrollTo: PropTypes.number,\n  tag: PropTypes.string,\n  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"file":"ScrollView.js"}

package/build/primitives/ScrollView/ScrollView.module.css

@@ -0,0 +1,35 @@
+.scrollview {
+  align-items: flex-start;
+  display: flex;
+  height: fit-content;
+  width: fit-content;
+}
+
+.scrollview:not(.horizontal) {
+  flex-direction: column;
+  scroll-snap-type: y mandatory;
+  overflow-y: scroll;
+}
+
+.scrollview.horizontal {
+  flex-direction: row;
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+}
+
+.indicator {
+  /*  */
+}
+
+.scrollview:not(.indicator) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollview:not(.indicator)::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollview > * {
+  scroll-snap-align: start;
+}

package/build/primitives/ScrollView/__tests__/__snapshots__/ScrollView.test.js.snap

@@ -0,0 +1,535 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<ScrollView> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview mirai"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:height 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+    style="height: 256px;"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview horizontal"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:scrollIndicator 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview indicator"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:scrollto 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:tag 1`] = `
+<DocumentFragment>
+  <section
+    class="scrollview"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </section>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> prop:width 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+    style="width: 256px;"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<ScrollView> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="scrollview"
+    data-testid="mirai"
+  >
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      1
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      2
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      3
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      4
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      5
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      6
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      7
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      8
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      9
+    </div>
+    <div
+      style="height: 128px; width: 128px;"
+    >
+      10
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/build/primitives/ScrollView/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ScrollView = require("./ScrollView");
+
+Object.keys(_ScrollView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScrollView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ScrollView[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/ScrollView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/ScrollView/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ScrollView';\n"],"file":"index.js"}