rox-react-components 0.0.44 → 0.0.46

package/dist/es/Popup/styles.js

@@ -1 +1,138 @@
-import{__assign as t}from"tslib";import{StyleSheet as a}from"aphrodite/no-important";function n(t){return{from:{opacity:t?0:1},to:{opacity:t?1:0}}}function i(t,a){var n="0",i="0";return t?(n=a?"-100%":"100%",i="0"):(n="0",i=a?"-100%":"100%"),{from:{transform:"translate3d(0, ".concat(n,", 0)")},to:{transform:"translate3d(0, ".concat(i,", 0)")}}}function o(t,a){var n="0",i="0";return t?(n=a?"-100%":"100%",i="0"):(n="0",i=a?"-100%":"100%"),{from:{transform:"translate3d(".concat(n,", 0, 0)")},to:{transform:"translate3d(".concat(i,", 0, 0)")}}}var e=a.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:[n(!0)]},fade_out:{animationName:[n(!1)]},slide_in_top:{animationName:[i(!0,!0)]},slide_out_top:{animationName:[i(!1,!0)]},slide_in_right:{animationName:[o(!0,!1)]},slide_out_right:{animationName:[o(!1,!1)]},slide_in_bottom:{animationName:[i(!0,!1)]},slide_out_bottom:{animationName:[i(!1,!1)]},slide_in_left:{animationName:[o(!0,!0)]},slide_out_left:{animationName:[o(!1,!0)]}}),r=function(n){var i=1===n[n.length-1]?n.slice(0,-1):n,o={},e={};if(i.length){var r=100/i.length;o=t(t({},m({step:"0%",value:i[0]})),m({step:"100%",value:1})),e=t(t({},m({step:"0%",value:1})),m({step:"100%",value:i[0]})),i.forEach((function(t,a){a>0&&(Object.assign(o,m({step:"".concat(r*a,"%"),value:t})),Object.assign(e,m({step:"".concat(r*(n.length-a),"%"),value:t})))}))}return a.create({scale_in:{animationName:[o]},scale_out:{animationName:[e]}})};function m(t){var a;return(a={})[t.step]={transform:"scale3d(".concat(t.value,", ").concat(t.value,", 1)")},a}export{r as animateStyles,e as default};
+import { __assign } from 'tslib';
+import { StyleSheet } from '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 = 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 = __assign(__assign({}, generateKeyFrame({ step: '0%', value: _scale[0] })), generateKeyFrame({ step: '100%', value: 1 }));
+        scaleOut = __assign(__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 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;
+}
+
+export { animateStyles, styles as default };

package/dist/es/ScrollView/ScrollView.js

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

package/dist/es/ScrollView/index.js

@@ -1 +1,5 @@
-import o from"./ScrollView.js";export{o as default};
+import ScrollView from './ScrollView.js';
+
+
+
+export { ScrollView as default };

package/dist/es/ScrollView/styles.js

@@ -1 +1,23 @@
-import{StyleSheet as o}from"aphrodite/no-important";var r=o.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"}}});export{r as default};
+import { StyleSheet } from 'aphrodite/no-important';
+
+var styles = 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',
+        },
+    },
+});
+
+export { styles as default };