@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/carousel/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/carousel/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/carousel/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/carousel/style/index.js

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/carousel/style/index.less

@@ -0,0 +1,263 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-carousel {
+
+    &-wrap {
+        position: relative;
+        font-size: 0;
+        width: 100%;
+    }
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    transition: height .3s;
+    box-sizing: content-box;
+
+    &.wrap-placeholder {
+        display: none;
+    }
+
+    &-inner {
+        overflow: visible;
+
+        &:not(.vertical) {
+            white-space: nowrap;
+        }
+
+        &.auto,
+        &.auto &-item-inner {
+            .use-var(transition-timing-function, carousel-auto-transition);
+        }
+
+        &.slide,
+        &.slide &-item-inner {
+            .use-var(transition-timing-function, carousel-slide-transition);
+        }
+    }
+
+    &-item {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        vertical-align: top;
+        white-space: normal;
+        position: relative;
+
+        &.ssr-float {
+            max-height: 0;
+            overflow: visible;
+        }
+
+        &.vertical > *,
+        &.vertical &-inner > * {
+            height: 100%;
+        }
+
+        & > img,
+        &-inner > img,
+        .carousel-item-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        .carousel-item-text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            .use-var(padding, carousel-item-text-padding);
+            .use-var(font-size, carousel-item-text-font-size);
+            .use-var(height, carousel-item-text-height);
+            .use-var(color, carousel-item-text-color);
+            .use-var(background, carousel-item-text-background);
+        }
+
+        &-inner {
+            width: 100%;
+            height: 100%;
+        }
+
+        &-inner {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &-indicator {
+        position: absolute;
+        .use-var(bottom, carousel-indicator-position);
+        z-index: 1;
+        will-change: transform;
+        box-sizing: border-box;
+
+        &.pos-start {
+            .use-var-with-rtl(left, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, left);
+        }
+
+        &.pos-center {
+            left: 50%;
+            transform: translate3d(-50%, 0, 0);
+            text-align: center;
+        }
+
+        &.pos-end {
+            .use-var-with-rtl(right, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, right);
+        }
+
+        &-vertical {
+
+            .indicator {
+                display: block;
+                box-sizing: border-box;
+                .use-var(height, carousel-square-indicator-width);
+                .use-var(width, carousel-square-indicator-height);
+
+                &:not(:last-of-type) {
+                    margin: 0;
+                    .use-var(margin-bottom, carousel-square-indicator-gutter);
+                }
+
+                &.type-circle:not(:last-of-type) {
+                    margin: 0;
+                    .use-var(margin-bottom, carousel-circle-indicator-gutter);
+                }
+            }
+
+            &.pos-start {
+                .use-var(top, carousel-indicator-safe-padding);
+            }
+
+            &.pos-center {
+                bottom: 50%;
+                transform: translate3d(0, 50%, 0);
+            }
+
+            &.pos-end {
+                .use-var(bottom, carousel-indicator-safe-padding);
+            }
+
+            &.ver-pos-left {
+                left: auto;
+                right: auto;
+                .use-var-with-rtl(left, carousel-indicator-position);
+            }
+
+            &.ver-pos-right {
+                left: auto;
+                right: auto;
+                .use-var-with-rtl(right, carousel-indicator-position);
+            }
+        }
+
+        &.inverse {
+
+            .indicator {
+                .use-var(background-color, carousel-indicator-inverse-background);
+
+                &.active {
+                    .use-var(background-color, carousel-indicator-active-inverse-background);
+                }
+            }
+        }
+
+        &.outside {
+            position: relative;
+            left: 0;
+            transform: none;
+            bottom: 0;
+            .use-var(padding, carousel-indicator-outside-padding);
+        }
+
+        .indicator {
+            transition: all .2s;
+            .use-var(background-color, carousel-indicator-background);
+
+            &.active {
+                .use-var(background-color, carousel-indicator-active-background);
+            }
+        }
+
+        &-horizontal .indicator {
+            display: inline-block;
+            .use-var(width, carousel-square-indicator-width);
+            .use-var(height, carousel-square-indicator-height);
+
+            &:not(:last-of-type) {
+                .use-var-with-rtl(margin-right, carousel-square-indicator-gutter);
+            }
+        }
+
+        .circle-indicator,
+        .indicator.type-circle {
+            .use-var(width, carousel-circle-indicator-size);
+            .use-var(height, carousel-circle-indicator-size);
+            border-radius: 50%;
+
+            &:not(:last-of-type) {
+                .use-var-with-rtl(margin-right, carousel-circle-indicator-gutter);
+            }
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-carousel {
+    &-item {
+      .carousel-item-text {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-carousel-item-text-color);
+        }
+      }
+    }
+    &-indicator {
+      &.inverse {
+        .indicator {
+          @{arco-dark-mode-selector} & {
+            .use-var(background-color, dark-carousel-indicator-inverse-background);
+          }
+          &.active {
+            @{arco-dark-mode-selector} & {
+              .use-var(background-color, dark-carousel-indicator-active-inverse-background);
+            }
+          }
+        }
+      }
+      .indicator {
+        &.active {
+          @{arco-dark-mode-selector} & {
+            .use-var(background-color, dark-carousel-indicator-active-background);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/cell/arrow.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Arrow(): JSX.Element;

package/esnext/cell/arrow.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function Arrow() {
+    return (React.createElement("svg", { viewBox: "0 0 8 14", fill: "none", className: "arrow-icon-svg" },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.594858 1.24219C0.399596 1.43745 0.399596 1.75403 0.594859 1.94929L5.59905 6.95348L0.636039 11.9165C0.440776 12.1118 0.440776 12.4283 0.636038 12.6236L0.989592 12.9771C1.18485 13.1724 1.50144 13.1724 1.6967 12.9771L7.35355 7.3203C7.5296 7.14425 7.54692 6.86959 7.40553 6.67413C7.38216 6.62774 7.35111 6.58423 7.31237 6.54549L1.65552 0.888634C1.46026 0.693372 1.14367 0.693372 0.948411 0.888634L0.594858 1.24219Z" })));
+}

package/esnext/cell/cell.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CellProps, CellRef } from './type';
+export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<CellRef>>;

package/esnext/cell/cell.js

@@ -0,0 +1,24 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Arrow from './arrow';
+import { GroupContext } from './group';
+export const Cell = forwardRef((props, ref) => {
+    const { className = '', style, icon, label, desc, text, children, showArrow, arrow, prepend, append, bordered = true, onClick, } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(GroupContext.Consumer, null, ({ isFromGroup }) => (React.createElement("div", { className: cls(`${prefixCls}-cell`, 'all-border-box', { 'without-group': !isFromGroup }, { bordered }, className), style: style, ref: domRef, onClick: e => onClick && onClick(e) },
+        prepend,
+        React.createElement("div", { className: cls(`${prefixCls}-cell-inner`, { 'has-desc': desc }) },
+            icon ? React.createElement("div", { className: "cell-label-icon" }, icon) : null,
+            label || desc ? (React.createElement("div", { className: "cell-label" },
+                React.createElement("div", { className: "cell-title" }, label),
+                desc ? React.createElement("div", { className: "cell-desc" }, desc) : null)) : null,
+            React.createElement("div", { className: `cell-content ${label || desc ? 'has-label' : ''}` },
+                text ? React.createElement("div", { className: "cell-text" }, text) : null,
+                children),
+            showArrow ? (React.createElement("div", { className: "cell-arrow-icon" }, arrow || React.createElement(Arrow, null))) : null),
+        append))))));
+});

package/esnext/cell/group.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CellGroupProps, CellGroupRef, CellProps, CellRef } from './type';
+export interface GroupContextParams {
+    isFromGroup: boolean;
+}
+export declare const GroupContext: React.Context<GroupContextParams>;
+export declare function componentGenerator<P extends CellProps = CellProps, R extends CellRef = CellRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<CellGroupProps<P> & React.RefAttributes<CellGroupRef>>;

package/esnext/cell/group.js

@@ -0,0 +1,26 @@
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+export const GroupContext = React.createContext({
+    isFromGroup: false,
+});
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const { className = '', style, header, footer, bordered = true, options, children, onClick, } = props;
+        const domRef = useRef(null);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        function handleClick(e) {
+            onClick && onClick(e);
+        }
+        return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-cell-group`, 'all-border-box', className), ref: domRef, onClick: handleClick, style: style },
+            header ? React.createElement("div", { className: "cell-group-header" }, header) : null,
+            React.createElement("div", { className: cls('cell-group-body', { bordered }) },
+                React.createElement(GroupContext.Provider, { value: { isFromGroup: true } },
+                    children,
+                    options &&
+                        options.map((option, index) => (React.createElement(Comp, Object.assign({ key: index }, option)))))),
+            footer ? React.createElement("div", { className: "cell-group-footer" }, footer) : null))));
+    });
+}

package/esnext/cell/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").CellProps & import("react").RefAttributes<import("./type").CellRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").CellGroupProps<import("./type").CellProps & import("react").RefAttributes<import("./type").CellRef>> & import("react").RefAttributes<import("./type").CellGroupRef>>;
+};
+/**
+ * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
+ * @en Cell, including cells and cell group, are often used to set items, forms, etc.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 单元格
+ * @name_en Cell
+ */
+export default _default;

package/esnext/cell/index.js

@@ -0,0 +1,16 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './group';
+import { Cell } from './cell';
+export * from './type';
+const Group = componentGenerator(Cell);
+/**
+ * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
+ * @en Cell, including cells and cell group, are often used to set items, forms, etc.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 单元格
+ * @name_en Cell
+ */
+export default componentWrapper(Cell, {
+    Group,
+});