@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/pagination/style/index.less

@@ -0,0 +1,176 @@
+@import '../../../style/mixin.less';
+
+
+.@{prefix}-pagination {
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .use-var(padding, pagination-padding);
+    &-prev-field, &-next-field {
+        flex: 1;
+        display: flex;
+        .use-var(color, font-color);
+    }
+    &-prev-field {
+        justify-content: flex-start;
+        &.flex-center {
+            justify-content: flex-end;
+            .use-var-with-rtl(margin-right, pagination-center-field-gutter);
+        }
+    }
+    &-next-field {
+        justify-content: flex-end;
+        &.flex-center {
+            justify-content: flex-start;
+            .use-var-with-rtl(margin-left, pagination-center-field-gutter);
+        }
+    }
+
+    &-field {
+        cursor: pointer;
+        text-align: center;
+        font-size: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        .use-var(font-size, pagination-field-font-size);
+        .use-var(line-height, pagination-field-line-height);
+        .noselect();
+        .btn-icon {
+            display: inline-flex;
+            align-items: center;
+            .style-with-rtl({
+                transform: scaleX(-1);
+            });
+            &.next {
+                transform: rotateY(180deg);
+                .style-with-rtl({
+                    transform: none;
+                });
+            }
+        }
+    }
+    &-field.button {
+        .use-var(padding, pagination-field-button-padding);
+        .use-var(border-radius, pagination-field-button-border-radius);
+        .use-var(min-height, pagination-field-button-min-height);
+        .use-var(background, pagination-field-default-background);
+        .use-var(color, pagination-field-default-text-color);
+        &.primary {
+            .use-var(background, pagination-field-primary-background);
+            .use-var(color, pagination-field-primary-text-color);
+        }
+        .btn-text {
+            .use-var(font-size, pagination-field-btn-text-font-size);
+        }
+        .btn-icon + .btn-text,
+        .btn-text + .btn-icon {
+            .use-var-with-rtl(margin-left, pagination-field-btn-icon-text-gutter);
+        }
+    }
+    &.android &-field.button {
+        .btn-text {
+            .rem(padding-top, 2);
+        }
+    }
+    &-field.text {
+        .use-var(color, pagination-field-default-text-color);
+        &.primary {
+            .use-var(color, pagination-field-text-primary-text-color);
+        }
+        &.disabled {
+            background: none;
+        }
+    }
+    &-field.disabled {
+        .use-var(background, pagination-field-disabled-background);
+        .use-var(color, pagination-field-disabled-text-color);
+    }
+
+    &-item {
+        flex: 0 0 auto;
+        text-align: center;
+        .use-var(font-size, pagination-item-font-size);
+        .use-var(line-height, pagination-item-line-height);
+        .use-var(color, pagination-item-default-text-color);
+        .active {
+            .use-var(color, pagination-item-primary-text-color);
+        }
+    }
+}
+.@{prefix}-pagination-simple {
+    justify-content: center;
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-pagination {
+    &-prev-field,
+    &-next-field {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+      }
+    }
+    &-field.button {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-pagination-field-default-background);
+        .use-var(color, dark-pagination-field-default-text-color);
+      }
+      &.primary {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-pagination-field-primary-background);
+          .use-var(color, dark-pagination-field-primary-text-color);
+        }
+      }
+    }
+    &-field.text {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-pagination-field-default-text-color);
+      }
+      &.primary {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-pagination-field-text-primary-text-color);
+        }
+      }
+    }
+    &-field.disabled {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-pagination-field-disabled-background);
+        .use-var(color, dark-pagination-field-disabled-text-color);
+      }
+    }
+    &-item {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-pagination-item-default-text-color);
+      }
+      .active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-pagination-item-primary-text-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/picker/index.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ValueType, PickerCellMovingStatus } from '../picker-view';
+import { PickerProps } from './type';
+export * from './type';
+export { MultiPicker, PickerCell, Cascader } from '../picker-view';
+export interface PickerRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 每一列的滑动状态
+     * @en Sliding state of each column
+     */
+    getCellMovingStatus: () => PickerCellMovingStatus[];
+    /**
+     * 手动更新元素布局
+     * @en Manually update the element layout
+     */
+    updateLayout: () => void;
+    /**
+     * 获取所有列的值
+     * @en Get all column values
+     */
+    getAllColumnValues: () => ValueType[];
+    /**
+     * 获取第 n 列的值
+     * @en Get the value of the nth column
+     */
+    getColumnValue: (index: number) => ValueType;
+    /**
+     * 直接跳到当前最近一行（调用时将中断滚动）
+     * @en Jump directly to the current most recent line (will break scrolling when called)
+     */
+    scrollToCurrentIndex: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<PickerRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 选择器组件，形式是弹起的浮层。
+ * @en The selector component, in the form of a popup layer.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 选择器
+ * @name_en Picker
+ * @displayName Picker
+ */
+export default _default;

package/esnext/picker/index.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';
+import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Popup from '../popup';
+import PickerView from '../picker-view';
+import { useLatestRef, useListenResize } from '../_helpers';
+export * from './type';
+export { MultiPicker, PickerCell, Cascader } from '../picker-view';
+const Picker = forwardRef((props, ref) => {
+    const { className, itemStyle, cascade = true, cols = 3, rows = 5, data, okText, dismissText, disabled = false, clickable = true, hideEmptyCols = false, title = '', visible: userSetVisible, value, needBottomOffset = false, onDismiss, onOk, onChange, maskClosable = false, onHide, onPickerChange, touchToStop, gestureOutOfControl = true, renderLinkedContainer, ...otherProps } = props;
+    const scrollValueRef = useLatestRef(value);
+    const domRef = useRef(null);
+    const pickerViewRef = useRef(null);
+    const [linkVisible, setLinkVisible] = useState(false);
+    const [linkArgs, setLinkArgs] = useState(() => getCurrentValueData());
+    // 来自linkedContainer的visible变化，优先级高于受控值
+    // @en Visible changes from linkedContainer which have priority over controlled values
+    const visible = linkVisible || userSetVisible || false;
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        getCellMovingStatus: () => pickerViewRef.current?.getCellMovingStatus() || [],
+        getAllColumnValues: () => pickerViewRef.current?.getAllColumnValues() || [],
+        getColumnValue: index => pickerViewRef.current?.getColumnValue(index) || '',
+        updateLayout: () => pickerViewRef.current?.updateLayout(),
+        scrollToCurrentIndex: () => pickerViewRef.current?.scrollToCurrentIndex(),
+    }));
+    useEffect(() => {
+        nextTick(() => {
+            setLinkArgs(getCurrentValueData());
+        });
+    }, [value]);
+    function hidePicker(scene) {
+        setLinkVisible(false);
+        onHide?.(scene);
+    }
+    function handleDismiss() {
+        if (onDismiss) {
+            onDismiss();
+        }
+        hidePicker('dismiss');
+    }
+    function getCurrentValueData() {
+        const val = pickerViewRef.current?.getAllColumnValues() || scrollValueRef.current || [];
+        const selectedData = pickerViewRef.current?.getAllColumnData() || [];
+        return {
+            value: val,
+            data: selectedData,
+        };
+    }
+    function handleConfirm() {
+        pickerViewRef.current?.scrollToCurrentIndex();
+        nextTick(() => {
+            const { value: val, data: selectedData } = getCurrentValueData();
+            setLinkArgs({ value: val, data: selectedData });
+            if (onOk) {
+                onOk(val, selectedData);
+            }
+            if (onChange) {
+                onChange(val);
+            }
+            hidePicker('confirm');
+        });
+    }
+    useListenResize(updateLayoutByVisible, [visible]);
+    // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）
+    function updateLayoutByVisible() {
+        if (visible && pickerViewRef.current) {
+            pickerViewRef.current.updateLayout();
+        }
+    }
+    useEffect(() => {
+        updateLayoutByVisible();
+    }, [visible]);
+    return (React.createElement(ContextLayout, null, ({ prefixCls, locale }) => (React.createElement(React.Fragment, null,
+        renderLinkedContainer ? (React.createElement("div", { className: `${prefixCls}-picker-linked-container`, onClick: () => setLinkVisible(true) }, renderLinkedContainer(linkArgs.value, linkArgs.data))) : null,
+        React.createElement(Popup, Object.assign({ visible: visible, className: cls(className, `${prefixCls}-picker all-border-box`), close: () => hidePicker('mask'), direction: "bottom", maskClosable: maskClosable, needBottomOffset: needBottomOffset, gestureOutOfControl: gestureOutOfControl }, otherProps),
+            React.createElement("div", { className: `${prefixCls}-picker-wrap`, ref: domRef },
+                React.createElement("div", { className: `${prefixCls}-picker-header` },
+                    React.createElement("div", { className: `${prefixCls}-picker-header-btn left`, onClick: handleDismiss }, dismissText || locale?.Picker.cancelText),
+                    React.createElement("div", { className: `${prefixCls}-picker-header-title` }, title),
+                    React.createElement("div", { className: `${prefixCls}-picker-header-btn right`, onClick: handleConfirm }, okText || locale?.Picker.okText)),
+                React.createElement(PickerView, { ref: pickerViewRef, data: data, cascade: cascade, cols: cols, rows: rows, disabled: disabled, value: value, onPickerChange: onPickerChange, itemStyle: itemStyle, clickable: clickable, hideEmptyCols: hideEmptyCols, touchToStop: touchToStop })))))));
+});
+/**
+ * 选择器组件，形式是弹起的浮层。
+ * @en The selector component, in the form of a popup layer.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 选择器
+ * @name_en Picker
+ * @displayName Picker
+ */
+export default componentWrapper(Picker, 'Picker');