clxx 2.0.0 → 2.0.1

package/build/Picker/Wrapper.d.ts

@@ -0,0 +1,19 @@
+import { jsx } from "@emotion/react";
+import React from "react";
+export declare type OptionType = {
+    value: string | number;
+    label?: React.ReactNode;
+    [key: string]: any;
+};
+export interface PickerWrapperProps {
+    options: OptionType[];
+    defaultValue?: number;
+    renderOption?: (option: OptionType, index: number) => React.ReactNode;
+    onConfirm?: (option: OptionType, index: number) => void;
+    onCancel?: () => void;
+    renderCancel?: () => React.ReactNode;
+    renderConfirm?: () => React.ReactNode;
+    showTitle?: boolean;
+    renderTitle?: (option: OptionType, index: number) => React.ReactNode;
+}
+export declare function Wrapper(props: PickerWrapperProps): jsx.JSX.Element;

package/build/Picker/Wrapper.js

@@ -0,0 +1,84 @@
+import { jsx } from "@emotion/react";
+import { RowBetween } from "../Flex/Row";
+import { Col } from "../Flex/Col";
+import { style } from "./style";
+import { swiperStyle } from "./swiperStyle";
+import { Clickable } from "../Clickable";
+import Swiper from "swiper";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function Wrapper(props) {
+    const { onConfirm, onCancel, renderCancel, renderConfirm, options, renderOption, showTitle = true, renderTitle, defaultValue, } = props;
+    const getInitialSlide = useCallback(() => {
+        let initialSlide = 0;
+        if (Array.isArray(options)) {
+            let findIndex = options.findIndex((option) => option.value === defaultValue);
+            if (findIndex >= 0) {
+                initialSlide = findIndex;
+            }
+        }
+        return initialSlide;
+    }, [options, defaultValue]);
+    const swiperRef = useRef(null);
+    const [index, setIndex] = useState(getInitialSlide());
+    useEffect(() => {
+        const swiper = new Swiper(swiperRef.current, {
+            initialSlide: getInitialSlide(),
+            direction: "vertical",
+            slidesPerView: 5,
+            centeredSlides: true,
+            freeMode: true,
+            freeModeSticky: true,
+        });
+        swiper.on("init", () => {
+            setIndex(swiper.realIndex);
+        });
+        swiper.on("slideChange", () => {
+            setIndex(swiper.realIndex);
+        });
+        return () => {
+            swiper.destroy();
+        };
+    }, [getInitialSlide]);
+    const showTitleContent = () => {
+        if (showTitle) {
+            const option = options[index];
+            if (typeof renderTitle === "function") {
+                return renderTitle(option, index);
+            }
+            else {
+                return (jsx(Col, { css: style.title },
+                    jsx("span", null, "\u5F53\u524D\u9009\u62E9"),
+                    jsx("span", null, option.label)));
+            }
+        }
+    };
+    const showCancel = () => {
+        var _a;
+        return (_a = renderCancel === null || renderCancel === void 0 ? void 0 : renderCancel()) !== null && _a !== void 0 ? _a : jsx("div", { css: [style.btn, style.btnCancel] }, "\u53D6\u6D88");
+    };
+    const showConfirm = () => {
+        var _a;
+        return (_a = renderConfirm === null || renderConfirm === void 0 ? void 0 : renderConfirm()) !== null && _a !== void 0 ? _a : jsx("div", { css: [style.btn, style.btnConfirm] }, "\u786E\u5B9A");
+    };
+    const showOptions = () => {
+        if (Array.isArray(options)) {
+            return options.map((option, index) => {
+                let content = option.label;
+                if (typeof renderOption === "function") {
+                    content = renderOption(option, index);
+                }
+                return (jsx("div", { className: "swiper-slide", key: option.value }, content));
+            });
+        }
+    };
+    return (jsx("div", { css: [style.container] },
+        jsx(RowBetween, { css: style.header },
+            showTitleContent(),
+            jsx(Clickable, { onClick: onCancel }, showCancel()),
+            jsx(Clickable, { onClick: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(options[index], index) }, showConfirm())),
+        jsx("div", { css: [swiperStyle, style.body] },
+            jsx("div", { className: "swiper", css: style.swiper, ref: swiperRef },
+                jsx("div", { className: "swiper-wrapper" }, showOptions()),
+                jsx("div", { css: [style.mask, style.maskTop] }),
+                jsx("div", { css: [style.mask, style.maskBottom] })))));
+}

package/build/Picker/index.d.ts

@@ -0,0 +1,12 @@
+import { PickerWrapperProps } from "./Wrapper";
+import React from "react";
+export interface ShowPickerOption extends PickerWrapperProps {
+    blankClosable?: boolean;
+    showMask?: boolean;
+    maskColor?: string;
+}
+export interface PickerOption extends ShowPickerOption, Omit<React.HTMLProps<HTMLDivElement>, "defaultValue"> {
+    children?: React.ReactNode;
+}
+export declare function showPicker(option: ShowPickerOption): void;
+export declare function Picker(props: PickerOption): JSX.Element;

package/build/Picker/index.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { showDialog } from "../Dialog";
+import { Wrapper } from "./Wrapper";
+import React from "react";
+import pick from "lodash/pick";
+import omit from "lodash/omit";
+export function showPicker(option) {
+    const { blankClosable, showMask, maskColor, onCancel, onConfirm } = option, extra = __rest(option, ["blankClosable", "showMask", "maskColor", "onCancel", "onConfirm"]);
+    const stop = showDialog({
+        content: (React.createElement(Wrapper, Object.assign({}, extra, { onCancel: () => {
+                stop();
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            }, onConfirm: (option, index) => {
+                stop();
+                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(option, index);
+            } }))),
+        type: "pullUp",
+        blankClosable,
+        showMask,
+        maskColor,
+    });
+}
+export function Picker(props) {
+    const { children, onClick } = props, option = __rest(props, ["children", "onClick"]);
+    const pickerProps = [
+        "blankClosable",
+        "showMask",
+        "maskColor",
+        "options",
+        "defaultValue",
+        "renderOption",
+        "onConfirm",
+        "onCancel",
+        "renderCancel",
+        "renderConfirm",
+        "showTitle",
+        "renderTitle",
+    ];
+    const showPickerOption = pick(option, pickerProps);
+    const boxProps = omit(option, pickerProps);
+    return (React.createElement("div", Object.assign({ onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            showPicker(showPickerOption);
+        } }, boxProps), children));
+}

package/build/Picker/style.d.ts

@@ -0,0 +1,3 @@
+import { Interpolation, Theme } from "@emotion/react";
+export declare const tinyLine: Interpolation<Theme>;
+export declare const style: Record<string, Interpolation<Theme>>;

package/build/Picker/style.js

@@ -0,0 +1,119 @@
+import { adaptive } from "../utils/cssUtil";
+export const tinyLine = {
+    "&:after,&::after": {
+        content: "''",
+        position: "absolute",
+        left: 0,
+        right: 0,
+        height: "1px",
+        backgroundColor: "#c0c0c0",
+        transform: `scale(1, ${1 / window.devicePixelRatio})`,
+    },
+};
+const itemHeight = 90;
+export const style = {
+    container: [
+        {
+            backgroundColor: "#fff",
+            overflow: "hidden",
+            position: "relative",
+        },
+        adaptive({
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+        }),
+    ],
+    header: [
+        {
+            position: "relative",
+            backgroundColor: "#fafafa",
+            zIndex: 2,
+            "&:after,&::after": {
+                bottom: 0,
+            },
+        },
+        tinyLine,
+        adaptive({
+            height: itemHeight,
+        }),
+    ],
+    title: {
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 1,
+        "span:nth-of-type(1)": [
+            {
+                color: "#666",
+                lineHeight: 1,
+            },
+            adaptive({
+                fontSize: 20,
+                marginBottom: 5,
+            }),
+        ],
+        "span:nth-of-type(2)": [
+            {
+                color: "#333",
+                lineHeight: 1,
+            },
+            adaptive({
+                fontSize: 28,
+            }),
+        ],
+    },
+    btn: [
+        { textAlign: "center", lineHeight: 2 },
+        adaptive({
+            width: 120,
+            fontSize: 32,
+        }),
+    ],
+    btnCancel: {
+        color: "#666",
+    },
+    btnConfirm: {
+        color: "#007afe",
+    },
+    body: {
+        overflow: "hidden",
+        position: "relative",
+    },
+    swiper: [
+        adaptive({ height: itemHeight * 5, fontSize: 32 }),
+        {
+            ".swiper-slide": {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            },
+        },
+    ],
+    mask: [
+        {
+            position: "absolute",
+            left: 0,
+            width: "100%",
+            zIndex: 2,
+        },
+        tinyLine,
+        adaptive({
+            height: itemHeight * 2,
+        }),
+    ],
+    maskTop: {
+        top: 0,
+        backgroundImage: "linear-gradient(180deg, #fefefe, transparent)",
+        "&:after,&::after": {
+            bottom: 0,
+        },
+    },
+    maskBottom: {
+        backgroundImage: "linear-gradient(0deg, #fefefe, transparent)",
+        bottom: 0,
+        "&:after,&::after": {
+            top: 0,
+        },
+    },
+};

package/build/Picker/swiperStyle.d.ts

@@ -0,0 +1 @@
+export declare const swiperStyle: import("@emotion/utils").SerializedStyles;

package/build/Picker/swiperStyle.js

@@ -0,0 +1,66 @@
+import { css } from "@emotion/react";
+export const swiperStyle = css `
+  .swiper-container {
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    z-index: 1;
+  }
+  .swiper-container-vertical > .swiper-wrapper {
+    flex-direction: column;
+  }
+  .swiper-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+    transition-property: transform;
+    box-sizing: content-box;
+  }
+  .swiper-container-android .swiper-slide,
+  .swiper-wrapper {
+    transform: translate3d(0px, 0, 0);
+  }
+  .swiper-container-multirow > .swiper-wrapper {
+    flex-wrap: wrap;
+  }
+  .swiper-container-multirow-column > .swiper-wrapper {
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+  .swiper-container-free-mode > .swiper-wrapper {
+    transition-timing-function: ease-out;
+    margin: 0 auto;
+  }
+  .swiper-container-pointer-events {
+    touch-action: pan-y;
+    &.swiper-container-vertical {
+      touch-action: pan-x;
+    }
+  }
+  .swiper-slide {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition-property: transform;
+  }
+  .swiper-slide-invisible-blank {
+    visibility: hidden;
+  }
+  .swiper-container-autoheight {
+    &,
+    .swiper-slide {
+      height: auto;
+    }
+
+    .swiper-wrapper {
+      align-items: flex-start;
+      transition-property: transform, height;
+    }
+  }
+`;

package/build/index.d.ts

@@ -28,3 +28,4 @@ export { AutoGrid } from "./AutoGrid";
 export { showAlert } from "./Alert";
 export { ScrollView } from "./ScrollView";
 export { CarouselNotice } from "./CarouselNotice";
+export { showPicker, Picker } from "./Picker";

package/build/index.js

@@ -28,3 +28,4 @@ export { AutoGrid } from "./AutoGrid";
 export { showAlert } from "./Alert";
 export { ScrollView } from "./ScrollView";
 export { CarouselNotice } from "./CarouselNotice";
+export { showPicker, Picker } from "./Picker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -36,6 +36,7 @@
     "@types/lodash": "^4.14.175",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "@types/swiper": "^5.4.3",
     "csstype": "^3.0.9",
     "typescript": "^4.4.3"
   },
@@ -45,6 +46,7 @@
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "swiper": "^6.8.4"
   }
 }