rox-react-components 0.0.45 → 0.0.46

package/dist/lib/Popup/styles.js

@@ -1 +1,143 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("aphrodite/no-important");function e(t){return{from:{opacity:t?0:1},to:{opacity:t?1:0}}}function n(t,a){var e="0",n="0";return t?(e=a?"-100%":"100%",n="0"):(e="0",n=a?"-100%":"100%"),{from:{transform:"translate3d(0, ".concat(e,", 0)")},to:{transform:"translate3d(0, ".concat(n,", 0)")}}}function i(t,a){var e="0",n="0";return t?(e=a?"-100%":"100%",n="0"):(e="0",n=a?"-100%":"100%"),{from:{transform:"translate3d(".concat(e,", 0, 0)")},to:{transform:"translate3d(".concat(n,", 0, 0)")}}}var o=a.StyleSheet.create({container:{position:"absolute",display:"flex",width:"100%",height:"100%",top:0,left:0,zIndex:99},mask:{position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-10,backgroundColor:"var(--bg)"},animation_properties:{animationFillMode:"forwards",animationTimingFunction:"var(--curve)",animationDuration:"var(--duration)"},fade_in:{animationName:[e(!0)]},fade_out:{animationName:[e(!1)]},slide_in_top:{animationName:[n(!0,!0)]},slide_out_top:{animationName:[n(!1,!0)]},slide_in_right:{animationName:[i(!0,!1)]},slide_out_right:{animationName:[i(!1,!1)]},slide_in_bottom:{animationName:[n(!0,!1)]},slide_out_bottom:{animationName:[n(!1,!1)]},slide_in_left:{animationName:[i(!0,!0)]},slide_out_left:{animationName:[i(!1,!0)]}});function r(t){var a;return(a={})[t.step]={transform:"scale3d(".concat(t.value,", ").concat(t.value,", 1)")},a}exports.animateStyles=function(e){var n=1===e[e.length-1]?e.slice(0,-1):e,i={},o={};if(n.length){var s=100/n.length;i=t.__assign(t.__assign({},r({step:"0%",value:n[0]})),r({step:"100%",value:1})),o=t.__assign(t.__assign({},r({step:"0%",value:1})),r({step:"100%",value:n[0]})),n.forEach((function(t,a){a>0&&(Object.assign(i,r({step:"".concat(s*a,"%"),value:t})),Object.assign(o,r({step:"".concat(s*(e.length-a),"%"),value:t})))}))}return a.StyleSheet.create({scale_in:{animationName:[i]},scale_out:{animationName:[o]}})},exports.default=o;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var noImportant = require('aphrodite/no-important');
+
+function createFade(_in) {
+    var start = _in ? 0 : 1;
+    var end = _in ? 1 : 0;
+    return {
+        from: {
+            opacity: start,
+        },
+        to: {
+            opacity: end
+        },
+    };
+}
+function createVertical(_in, top) {
+    var start_y = '0', end_y = '0';
+    if (_in) {
+        start_y = top ? '-100%' : '100%';
+        end_y = '0';
+    }
+    else {
+        start_y = '0';
+        end_y = top ? '-100%' : '100%';
+    }
+    return {
+        from: {
+            transform: "translate3d(0, ".concat(start_y, ", 0)")
+        },
+        to: {
+            transform: "translate3d(0, ".concat(end_y, ", 0)")
+        }
+    };
+}
+function createHorizontal(_in, left) {
+    var start_x = '0', end_x = '0';
+    if (_in) {
+        start_x = left ? '-100%' : '100%';
+        end_x = '0';
+    }
+    else {
+        start_x = '0';
+        end_x = left ? '-100%' : '100%';
+    }
+    return {
+        from: {
+            transform: "translate3d(".concat(start_x, ", 0, 0)")
+        },
+        to: {
+            transform: "translate3d(".concat(end_x, ", 0, 0)")
+        }
+    };
+}
+var styles = noImportant.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        top: 0,
+        left: 0,
+        zIndex: 99,
+    },
+    mask: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: -10,
+        backgroundColor: 'var(--bg)',
+    },
+    animation_properties: {
+        animationFillMode: 'forwards',
+        animationTimingFunction: 'var(--curve)',
+        animationDuration: 'var(--duration)',
+    },
+    fade_in: {
+        animationName: [createFade(true)],
+    },
+    fade_out: {
+        animationName: [createFade(false)],
+    },
+    slide_in_top: {
+        animationName: [createVertical(true, true)]
+    },
+    slide_out_top: {
+        animationName: [createVertical(false, true)]
+    },
+    slide_in_right: {
+        animationName: [createHorizontal(true, false)]
+    },
+    slide_out_right: {
+        animationName: [createHorizontal(false, false)]
+    },
+    slide_in_bottom: {
+        animationName: [createVertical(true, false)]
+    },
+    slide_out_bottom: {
+        animationName: [createVertical(false, false)]
+    },
+    slide_in_left: {
+        animationName: [createHorizontal(true, true)]
+    },
+    slide_out_left: {
+        animationName: [createHorizontal(false, true)]
+    },
+});
+var animateStyles = function (scale) {
+    var _scale = scale[scale.length - 1] === 1 ? scale.slice(0, -1) : scale;
+    var scaleIn = {};
+    var scaleOut = {};
+    if (_scale.length) {
+        var step_1 = 100 / _scale.length;
+        scaleIn = tslib.__assign(tslib.__assign({}, generateKeyFrame({ step: '0%', value: _scale[0] })), generateKeyFrame({ step: '100%', value: 1 }));
+        scaleOut = tslib.__assign(tslib.__assign({}, generateKeyFrame({ step: '0%', value: 1 })), generateKeyFrame({ step: '100%', value: _scale[0] }));
+        _scale.forEach(function (item, index) {
+            if (index > 0) {
+                Object.assign(scaleIn, generateKeyFrame({ step: "".concat(step_1 * index, "%"), value: item }));
+                Object.assign(scaleOut, generateKeyFrame({ step: "".concat(step_1 * (scale.length - index), "%"), value: item }));
+            }
+        });
+    }
+    return noImportant.StyleSheet.create({
+        scale_in: {
+            animationName: [scaleIn]
+        },
+        scale_out: {
+            animationName: [scaleOut]
+        }
+    });
+};
+function generateKeyFrame(data) {
+    var _a;
+    return _a = {}, _a[data.step] = { transform: "scale3d(".concat(data.value, ", ").concat(data.value, ", 1)") }, _a;
+}
+
+exports.animateStyles = animateStyles;
+exports.default = styles;

package/dist/lib/ScrollView/ScrollView.js

@@ -1 +1,109 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("aphrodite/no-important"),t=require("react"),n=require("../utils.js"),u=require("./styles.js"),l={style:{width:"100%",height:"100%"},horizontal:!1,vertical:!0,onScroll:function(){return null},threshold:50,onReachTop:function(e){return e()},onReachBottom:function(e){return e()},onReachLeft:function(e){return e()},onReachRight:function(e){return e()}},o={x:0,y:0,animation:!1};var c=t.forwardRef((function(c,a){void 0===c&&(c=l);var s=e.__assign(e.__assign({},l),c),i=s.style,f=s.children,d=s.horizontal,h=s.vertical,_=s.onScroll,v=s.threshold,R=s.onReachTop,m=s.onReachBottom,b=s.onReachLeft,p=s.onReachRight,g=t.useRef(null),y=t.useRef(0),x=t.useRef(0),T=t.useRef(!1),w=t.useRef(!1),q=t.useRef(!1),k=t.useRef(!1),C=t.useMemo((function(){return e.__assign(e.__assign({},l.style),i)}),[i]),L=t.useMemo((function(){return{overflowX:d?"scroll":"hidden",overflowY:h?"scroll":"hidden",scrollbarWidth:"none",msOverflowStyle:"none"}}),[d,h]),S=t.useCallback((function(e){var r=e.currentTarget,t=r.scrollTop,u=r.scrollHeight,l=r.clientHeight;t>y.current?t+l>=u-v&&!w.current&&(w.current=!0,m((function(){return n.default.sleep(60).then((function(){return w.current=!1}))}))):t<y.current&&t<=0&&!T.current&&(T.current=!0,R((function(){return n.default.sleep(60).then((function(){return T.current=!1}))}))),y.current=t}),[v,m,R]),j=t.useCallback((function(e){var r=e.currentTarget,t=r.scrollLeft,u=r.scrollWidth,l=r.clientWidth;t>x.current?t+l>=u-v&&!k.current&&(k.current=!0,p((function(){return n.default.sleep(60).then((function(){return k.current=!1}))}))):t<x.current&&t<=0&&!q.current&&(q.current=!0,b((function(){return n.default.sleep(60).then((function(){return q.current=!1}))}))),x.current=t}),[v,b,p]),E=t.useCallback((function(e){j(e),S(e)}),[j,S]),H=t.useCallback((function(e){var r=e.currentTarget,t=r.scrollTop,n=r.scrollLeft;_({x:n,y:t}),d&&h?E(e):d?j(e):h&&S(e)}),[d,h,_,j,S,E]);return t.useImperativeHandle(a,(function(){return{to:function(r){if(void 0===r&&(r=o),g.current){var t=e.__assign(e.__assign({},o),r),n=t.x,u=t.y,l=t.animation;g.current.scrollTo({left:n,top:u,behavior:l?"smooth":"auto"})}}}}),[]),t.createElement("div",{style:C,className:r.css(u.default.border_box)},t.createElement("div",{className:r.css(u.default.w_full,u.default.h_full,u.default.border_box)},t.createElement("div",{ref:g,onScroll:H,style:L,className:r.css(u.default.border_box,u.default.w_full,u.default.h_full,u.default.scroll_bar_hide)},f)))}));exports.default=c;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var noImportant = require('aphrodite/no-important');
+var React = require('react');
+var utils = require('../utils.js');
+var styles = require('./styles.js');
+
+var keyframe = 60;
+var initScrollViewProps = {
+    style: { width: '100%', height: '100%' },
+    horizontal: false,
+    vertical: true,
+    onScroll: function () { return null; },
+    threshold: 50,
+    onReachTop: function (done) { return done(); },
+    onReachBottom: function (done) { return done(); },
+    onReachLeft: function (done) { return done(); },
+    onReachRight: function (done) { return done(); },
+};
+var initScrollPosition = {
+    x: 0,
+    y: 0,
+    animation: false,
+};
+function ScrollView(props, ref) {
+    if (props === void 0) { props = initScrollViewProps; }
+    var _a = tslib.__assign(tslib.__assign({}, initScrollViewProps), props), style = _a.style, children = _a.children, horizontal = _a.horizontal, vertical = _a.vertical, onScroll = _a.onScroll, threshold = _a.threshold, onReachTop = _a.onReachTop, onReachBottom = _a.onReachBottom, onReachLeft = _a.onReachLeft, onReachRight = _a.onReachRight;
+    var scroll_el = React.useRef(null);
+    var start_y = React.useRef(0);
+    var start_x = React.useRef(0);
+    var triggerred_top = React.useRef(false); // 是否触发过事件了
+    var triggerred_bottom = React.useRef(false); // 是否触发过事件了
+    var triggerred_left = React.useRef(false); // 是否触发过事件了
+    var triggerred_right = React.useRef(false); // 是否触发过事件了
+    var container_box_style = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, initScrollViewProps.style), style)); }, [style]);
+    var scroll_box_style = React.useMemo(function () { return ({
+        overflowX: horizontal ? 'scroll' : 'hidden',
+        overflowY: vertical ? 'scroll' : 'hidden',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+    }); }, [horizontal, vertical]);
+    var onVerticalScroll = React.useCallback(function (ev) {
+        var _a = ev.currentTarget, y = _a.scrollTop, boundary = _a.scrollHeight, h = _a.clientHeight;
+        if (y > start_y.current) {
+            if (y + h >= boundary - threshold && !triggerred_bottom.current) {
+                triggerred_bottom.current = true;
+                onReachBottom(function () { return utils.default.sleep(keyframe).then(function () { return (triggerred_bottom.current = false); }); });
+            }
+        }
+        else if (y < start_y.current) {
+            if (y <= 0 && !triggerred_top.current) {
+                triggerred_top.current = true;
+                onReachTop(function () { return utils.default.sleep(keyframe).then(function () { return (triggerred_top.current = false); }); });
+            }
+        }
+        start_y.current = y;
+    }, [threshold, onReachBottom, onReachTop]);
+    var onHorizontalScroll = React.useCallback(function (ev) {
+        var _a = ev.currentTarget, x = _a.scrollLeft, boundary = _a.scrollWidth, w = _a.clientWidth;
+        if (x > start_x.current) {
+            if (x + w >= boundary - threshold && !triggerred_right.current) {
+                triggerred_right.current = true;
+                onReachRight(function () { return utils.default.sleep(keyframe).then(function () { return (triggerred_right.current = false); }); });
+            }
+        }
+        else if (x < start_x.current) {
+            if (x <= 0 && !triggerred_left.current) {
+                triggerred_left.current = true;
+                onReachLeft(function () { return utils.default.sleep(keyframe).then(function () { return (triggerred_left.current = false); }); });
+            }
+        }
+        start_x.current = x;
+    }, [threshold, onReachLeft, onReachRight]);
+    var onBothScroll = React.useCallback(function (ev) {
+        onHorizontalScroll(ev);
+        onVerticalScroll(ev);
+    }, [onHorizontalScroll, onVerticalScroll]);
+    var handleScroll = React.useCallback(function (ev) {
+        var _a = ev.currentTarget, y = _a.scrollTop, x = _a.scrollLeft;
+        onScroll({ x: x, y: y });
+        if (horizontal && vertical) {
+            onBothScroll(ev);
+        }
+        else if (horizontal) {
+            onHorizontalScroll(ev);
+        }
+        else if (vertical) {
+            onVerticalScroll(ev);
+        }
+    }, [horizontal, vertical, onScroll, onHorizontalScroll, onVerticalScroll, onBothScroll]);
+    React.useImperativeHandle(ref, function () { return ({
+        to: function (pos) {
+            if (pos === void 0) { pos = initScrollPosition; }
+            if (scroll_el.current) {
+                var _a = tslib.__assign(tslib.__assign({}, initScrollPosition), pos), x = _a.x, y = _a.y, animation = _a.animation;
+                scroll_el.current.scrollTo({ left: x, top: y, behavior: animation ? 'smooth' : 'auto' });
+            }
+        },
+    }); }, []);
+    return (React.createElement("div", { style: container_box_style, className: noImportant.css(styles.default.border_box) },
+        React.createElement("div", { className: noImportant.css(styles.default.w_full, styles.default.h_full, styles.default.border_box) },
+            React.createElement("div", { ref: scroll_el, onScroll: handleScroll, style: scroll_box_style, className: noImportant.css(styles.default.border_box, styles.default.w_full, styles.default.h_full, styles.default.scroll_bar_hide) }, children))));
+}
+var ScrollView$1 = React.forwardRef(ScrollView);
+
+exports.default = ScrollView$1;

package/dist/lib/ScrollView/index.js

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./ScrollView.js");exports.default=e.default;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ScrollView = require('./ScrollView.js');
+
+
+
+exports.default = ScrollView.default;

package/dist/lib/ScrollView/styles.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},h_full:{height:"100%"},scroll_bar_hide:{"scrollbar-width":"none","-ms-overflow-style":"none","::-webkit-scrollbar":{display:"none"}}});exports.default=e;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var noImportant = require('aphrodite/no-important');
+
+var styles = noImportant.StyleSheet.create({
+    border_box: {
+        boxSizing: 'border-box',
+    },
+    w_full: {
+        width: '100%',
+    },
+    h_full: {
+        height: '100%',
+    },
+    scroll_bar_hide: {
+        'scrollbar-width': 'none', // firefox
+        '-ms-overflow-style': 'none', // ie and edge
+        '::-webkit-scrollbar': {
+            // chrome、safari and opera
+            display: 'none',
+        },
+    },
+});
+
+exports.default = styles;