clxx 2.0.5 → 2.0.7

package/build/Cascader/Wrapper.js

@@ -1,105 +0,0 @@
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { RowBetween } from "../Flex/Row";
-import { style } from "./style";
-import { Column } from "./Column";
-import useUpdate from "../Effect/useUpdate";
-export function Wrapper(props) {
-    const { options, defaultValue, onSelect, renderTitle, renderCancel, renderConfirm } = props;
-    const update = useUpdate();
-    // 当前选中的值
-    let selectedValueArray = useRef(Array.isArray(defaultValue) ? defaultValue : []);
-    //   待渲染项，每一项渲染一个Column组件（Swiper组件）
-    const currentColumns = useRef([]);
-    // 获取options的最大深度以及所有子树
-    const { maxDepth, subOptionsRecord } = useMemo(() => {
-        let subOptionsRecord = {};
-        let maxDepth = 1;
-        const traverse = (options, currentDepth) => {
-            options.forEach((option) => {
-                if (Array.isArray(option.children) && option.children.length >= 1) {
-                    subOptionsRecord[option.value] = option.children;
-                    maxDepth = Math.max(currentDepth + 1, maxDepth);
-                    traverse(option.children, currentDepth + 1);
-                }
-            });
-        };
-        traverse(options, 1);
-        return { maxDepth, subOptionsRecord };
-    }, [options]);
-    // 常量函数，根据options以及初始值获取初始渲染列
-    const getInitColumns = useCallback((options, selectedValue) => {
-        var _a;
-        // 待渲染的Columns项,每一项最终渲染一个Column组件(独立的Swiper组件)
-        let initColumns = [options.map((item) => ({ value: item.value, label: item.label }))];
-        // 当前待搜索的子项
-        let currentSubOption = options;
-        // 根据初始值获取下一次的子项
-        for (let i = 0; i < maxDepth - 1; i++) {
-            let currentValue = selectedValue[i];
-            let nextIndex = currentSubOption.findIndex((item) => item.value === currentValue);
-            // 没有找到就取第一项作为下一次的子项
-            let nextSubOption = ((_a = currentSubOption[nextIndex === -1 ? 0 : nextIndex]) === null || _a === void 0 ? void 0 : _a.children) || [];
-            initColumns.push(nextSubOption.map((item) => ({
-                value: item.value,
-                label: item.label,
-            })));
-            currentSubOption = nextSubOption;
-        }
-        return initColumns;
-    }, []);
-    // 选项列表或初始值更新时，重新计算当前渲染项
-    useEffect(() => {
-        selectedValueArray.current = Array.isArray(defaultValue) ? defaultValue : [];
-        currentColumns.current = getInitColumns(options, selectedValueArray.current);
-        update();
-    }, [options, defaultValue]);
-    // 更新columns项，触发onSelect回调
-    const updateColumnsAndSelectedValues = useCallback((value, index) => {
-        let usedTree = subOptionsRecord[value];
-        // index之前的默认值不变
-        let updateValueArray = selectedValueArray.current.slice(0, index);
-        updateValueArray.push(value);
-        // index+1之前的columns不变
-        let updateCurrentColumns = currentColumns.current.slice(0, index + 1);
-        for (let i = 0; i < maxDepth - index - 1; i++) {
-            if (!usedTree) {
-                updateCurrentColumns.push([]);
-                continue;
-            }
-            updateValueArray.push(usedTree[0].value);
-            updateCurrentColumns.push(usedTree.map((item) => ({ value: item.value, label: item.label })));
-            usedTree = subOptionsRecord[usedTree[0].value];
-        }
-        // 更新当前选中值
-        selectedValueArray.current = updateValueArray;
-        // 触发onSelect回调
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(updateValueArray);
-        // 更新渲染项
-        currentColumns.current = updateCurrentColumns;
-        update();
-    }, []);
-    const showRenderContent = (render, defaultContent) => {
-        var _a;
-        return typeof render === "function" ? (_a = render()) !== null && _a !== void 0 ? _a : defaultContent : render !== null && render !== void 0 ? render : defaultContent;
-    };
-    return (jsx("div", { css: [style.container] },
-        jsx(RowBetween, { css: style.header },
-            jsx("div", { css: style.title }, showRenderContent(renderTitle, "")),
-            jsx("div", { css: [style.btn, style.btnCancel], onClick: () => {
-                    var _a;
-                    (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                } }, showRenderContent(renderCancel, "取消")),
-            jsx("div", { css: [style.btn, style.btnConfirm], onClick: () => {
-                    var _a;
-                    (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, selectedValueArray.current);
-                } }, showRenderContent(renderConfirm, "确认"))),
-        jsx(RowBetween, null, currentColumns.current.map((column, index) => {
-            return (jsx(Column, { updateColumns: (value) => {
-                    updateColumnsAndSelectedValues(value, index);
-                }, columnOptions: column, 
-                // defaultValue实际上只有初始化时有效
-                defaultValue: selectedValueArray.current[index], key: index }));
-        }))));
-}

package/build/Cascader/index.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import { WrapperProps } from "./Wrapper";
-export interface ShowCascaderProps extends WrapperProps {
-    blankClosable: boolean;
-    showMask?: boolean;
-    maskColor?: string;
-}
-export interface CascaderProps extends ShowCascaderProps, Omit<React.HTMLProps<HTMLDivElement>, "defaultValue" | "onSelect"> {
-    children?: React.ReactNode;
-}
-/**
- * 显示Cascader
- * @param option
- */
-export declare function showCascader(props: ShowCascaderProps): () => Promise<void>;
-/**
- * Cascader组件
- * @param props
- * @returns
- */
-export declare function Cascader(props: CascaderProps): JSX.Element;

package/build/Cascader/index.js

@@ -1,63 +0,0 @@
-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 React from "react";
-import { showDialog } from "../Dialog";
-import { Wrapper } from "./Wrapper";
-import { omit, pick } from "lodash";
-/**
- * 显示Cascader
- * @param option
- */
-export function showCascader(props) {
-    const { blankClosable, showMask, maskColor, onCancel, onConfirm } = props, extra = __rest(props, ["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: (values) => {
-                stop();
-                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(values);
-            } }))),
-        type: "pullUp",
-        blankClosable,
-        showMask,
-        maskColor,
-    });
-    return stop;
-}
-/**
- * Cascader组件
- * @param props
- * @returns
- */
-export function Cascader(props) {
-    const { children, onClick } = props, option = __rest(props, ["children", "onClick"]);
-    const cascaderProps = [
-        "blankClosable",
-        "showMask",
-        "maskColor",
-        "options",
-        "defaultValue",
-        "onSelect",
-        "renderCancel",
-        "renderConfirm",
-        "renderTitle",
-        "onConfirm",
-        "onCancel",
-    ];
-    const showPickerOption = pick(option, cascaderProps);
-    const boxProps = omit(option, cascaderProps);
-    return (React.createElement("div", Object.assign({ onClick: (event) => {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            showCascader(showPickerOption);
-        } }, boxProps), children));
-}

package/build/Cascader/style.d.ts

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

package/build/Cascader/style.js

@@ -1,111 +0,0 @@
-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})`, // todo
-    },
-};
-// 标题栏和每个选项通用的高度
-const itemHeight = 90;
-export const style = {
-    container: [
-        {
-            backgroundColor: "#fff",
-            overflow: "hidden",
-            position: "relative",
-        },
-        adaptive({
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-        }),
-    ],
-    header: [
-        {
-            position: "relative",
-            backgroundColor: "#fafafa",
-            "&:after,&::after": {
-                bottom: 0,
-            },
-        },
-        tinyLine,
-        adaptive({
-            height: itemHeight,
-        }),
-    ],
-    title: [
-        {
-            position: "absolute",
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%,-50%)",
-        },
-        adaptive({
-            fontSize: 28,
-        }),
-    ],
-    btn: [
-        {
-            textAlign: "center",
-        },
-        adaptive({
-            fontSize: 32,
-            minWidth: 120,
-        }),
-    ],
-    btnCancel: {
-        color: "#666",
-    },
-    btnConfirm: {
-        color: "#007afe",
-    },
-    body: {
-        overflow: "hidden",
-        position: "relative",
-        flex: "1 1 0",
-    },
-    swiper: [
-        {
-            position: "relative",
-            overflow: "hidden",
-            flex: "1 1 0",
-        },
-        adaptive({
-            height: itemHeight * 5,
-        }),
-    ],
-    mask: [
-        {
-            position: "absolute",
-            width: "100%",
-            zIndex: 2,
-            left: 0,
-        },
-        tinyLine,
-        adaptive({
-            height: itemHeight * 2,
-        }),
-    ],
-    maskTop: [
-        {
-            top: 0,
-            background: "linear-gradient(#fefefe, transparent)",
-            "&:after,&::after": {
-                bottom: 0,
-            },
-        },
-    ],
-    maskBottom: [
-        {
-            bottom: 0,
-            background: "linear-gradient(transparent, #fefefe)",
-            "&:after,&::after": {
-                top: 0,
-            },
-        },
-    ],
-};

package/build/Picker/Wrapper.d.ts

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-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

@@ -1,92 +0,0 @@
-/** @jsx jsx */
-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 jsx("div", { css: style.title }, renderTitle(option, index));
-            }
-            else {
-                return (jsx(Col, { css: style.title },
-                    jsx("span", { css: style.titleLabel }, "\u5F53\u524D\u9009\u62E9"),
-                    jsx("span", { css: style.titleContent }, 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");
-    };
-    /**
-     * 显示选项列表
-     * @returns
-     */
-    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, { css: style.btnBox, onClick: onCancel }, showCancel()),
-            jsx(Clickable, { css: style.btnBox, 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

@@ -1,21 +0,0 @@
-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;
-}
-/**
- * 显示picker
- * @param option
- */
-export declare function showPicker(option: ShowPickerOption): void;
-/**
- * picker组件
- * @param props
- * @returns
- */
-export declare function Picker(props: PickerOption): JSX.Element;

package/build/Picker/index.js

@@ -1,64 +0,0 @@
-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";
-/**
- * 显示picker
- * @param option
- */
-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,
-    });
-}
-/**
- * picker组件
- * @param props
- * @returns
- */
-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

@@ -1,3 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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",
-            "&:after,&::after": {
-                bottom: 0,
-            },
-        },
-        tinyLine,
-        adaptive({
-            height: itemHeight,
-        }),
-    ],
-    title: {
-        position: "absolute",
-        left: "50%",
-        top: "50%",
-        transform: "translate(-50%, -50%)",
-        zIndex: 1,
-    },
-    titleLabel: [
-        {
-            color: "#666",
-            lineHeight: 1,
-        },
-        adaptive({
-            fontSize: 20,
-            marginBottom: 5,
-        }),
-    ],
-    titleContent: [
-        {
-            color: "#333",
-            lineHeight: 1,
-        },
-        adaptive({
-            fontSize: 28,
-        }),
-    ],
-    btnBox: {
-        zIndex: 2,
-    },
-    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

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