@arco-design/mobile-react 2.31.6 → 2.33.0

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

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

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

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

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

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

package/esnext/input/style/index.js

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

package/esnext/input/style/index.less

@@ -0,0 +1,195 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-input-container {
+    width: 100%;
+    .use-var(color, font-color);
+    position: relative;
+    .@{prefix}-input-label {
+        .use-var(min-width, input-label-min-width);
+    }
+}
+
+.@{prefix}-input-label {
+
+    &.required::before {
+        content: "* ";
+        .use-var(color, danger-color);
+    }
+    padding-top: 1PX;
+
+    .disabled & {
+        .use-var(color, input-disabled-color);
+    }
+}
+
+.@{prefix}-input-wrap {
+    position: relative;
+    .use-var(height, input-height);
+    .use-var(padding, input-horizontal-padding, 0);
+    display: flex;
+    align-items: center;
+
+    textarea,
+    input {
+        flex: 1;
+        background: transparent;
+
+        &:disabled {
+            .use-var(color, input-disabled-color);
+            // reset for ios
+            .use-var(-webkit-text-fill-color, input-disabled-color);
+            opacity: 1;
+        }
+    }
+
+    &.textarea {
+        height: auto;
+        align-items: flex-start;
+        .use-var(padding, textarea-padding);
+
+        &.has-stat {
+            .use-var(padding, textarea-has-stat-padding);
+        }
+    }
+
+    &.border {
+
+        &-all {
+            .hairline-var(line-color);
+        }
+
+        &-half {
+            .hairline-var(line-color, top);
+            .hairline-var(line-color, bottom);
+        }
+
+        &-bottom {
+            .hairline-var(line-color, bottom);
+        }
+    }
+}
+
+.@{prefix}-input-prefix, .@{prefix}-input-suffix, .@{prefix}-input-clear {
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+.@{prefix}-input-prefix {
+    .use-var-with-rtl(padding-right, input-label-gutter);
+}
+.@{prefix}-input-clear,
+.@{prefix}-input-suffix {
+    .use-var-with-rtl(padding-left, input-horizontal-padding);
+}
+.@{prefix}-input-clear {
+    .use-var(color, input-clear-icon-color);
+    .use-var(font-size, input-clear-icon-font-size);
+}
+
+.@{prefix}-input {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    .use-var(caret-color, input-caret-color);
+    .use-var(padding, input-vertical-padding, "", 0);
+    .use-var(color, font-color);
+
+    &::placeholder {
+        .use-var(color, input-placeholder-color);
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-input-container {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-font-color);
+    }
+  }
+  .@{prefix}-input-label {
+    &.required::before {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-danger-color);
+      }
+    }
+    .disabled & {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-input-disabled-color);
+      }
+    }
+  }
+  .@{prefix}-input-wrap {
+    textarea,
+    input {
+      &:disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-input-disabled-color);
+          .use-var(-webkit-text-fill-color, dark-input-disabled-color);
+        }
+      }
+    }
+    &.border {
+      &-all {
+        @{arco-dark-mode-selector} & {
+          .hairline-var(dark-line-color);
+        }
+      }
+      &-half {
+        @{arco-dark-mode-selector} & {
+          .hairline-var(dark-line-color, top);
+          .hairline-var(dark-line-color, bottom);
+        }
+      }
+      &-bottom {
+        @{arco-dark-mode-selector} & {
+          .hairline-var(dark-line-color, bottom);
+        }
+      }
+    }
+  }
+  .@{prefix}-input-clear {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-input-clear-icon-color);
+    }
+  }
+  .@{prefix}-input {
+    @{arco-dark-mode-selector} & {
+      .use-var(caret-color, dark-input-caret-color);
+      .use-var(color, dark-font-color);
+    }
+    &::placeholder {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-input-placeholder-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/keyboard/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { KeyboardProps, KeyboardRef } from './type';
+export * from './type';
+/**
+ * 数字键盘组件
+ * @en Keyboard component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 数字键盘
+ * @name_en Keyboard
+ */
+declare const Keyboard: React.ForwardRefExoticComponent<KeyboardProps & React.RefAttributes<KeyboardRef>>;
+export default Keyboard;

package/esnext/keyboard/index.js

@@ -0,0 +1,159 @@
+import { cls, defaultLocale } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle, useMemo, useCallback, useEffect, useContext, } from 'react';
+import { GlobalContext } from '../context-provider';
+import { IconKeyboard, IconKeyboardDelete } from '../icon';
+import Popup from '../popup';
+export * from './type';
+// 键盘乱序
+// @en let keyboard random
+const makeArrayRandom = (targetArray) => {
+    const randomFn = () => {
+        return Math.random() - 0.5;
+    };
+    return targetArray.sort(randomFn);
+};
+const splitArray = (target) => {
+    return target.reduce((acc, cur) => {
+        if (!acc[acc.length - 1] || acc[acc.length - 1].length >= 3) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(cur);
+        return acc;
+    }, []);
+};
+// 纯数字类字符
+// @en Pure numeric characters
+const contentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+/**
+ * 数字键盘组件
+ * @en Keyboard component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 数字键盘
+ * @name_en Keyboard
+ */
+const Keyboard = forwardRef((props, ref) => {
+    const { normalKeyClass, normalKeyStyle, className = '', style, type = 'number', randomOrder = false, title, rightColumns, confirmClosable, confirmButton, deleteButton, keyboardButton, close, onConfirm, onDelete, onChange, ...resetProps } = props;
+    const popupRef = useRef(null);
+    const keyboardRef = useRef(null);
+    const { prefixCls, locale = defaultLocale } = useContext(GlobalContext);
+    const prefix = `${prefixCls}-keyboard`;
+    // 3x4键盘的按键内容
+    // @en 3x4 Keyboard button content
+    const displayData = useMemo(() => {
+        const numberArr = randomOrder ? makeArrayRandom(contentArray) : contentArray;
+        const lastNum = numberArr.slice(-1)[0];
+        const finalData = splitArray(numberArr.slice(0, -1));
+        switch (type) {
+            case 'confirm':
+                finalData.push([lastNum, '.']);
+                break;
+            case 'tool':
+                finalData.push(['.', lastNum, { type: 'delete' }]);
+                break;
+            case 'number':
+            default:
+                finalData.push([{ type: 'keyboard' }, lastNum, { type: 'delete' }]);
+                break;
+        }
+        return finalData;
+    }, [type]);
+    // 右边一列
+    // @en Right column
+    const rightColumn = useMemo(() => {
+        switch (type) {
+            case 'number':
+                return [];
+            case 'confirm': {
+                return [{ type: 'delete' }];
+            }
+            case 'tool':
+                return ['+', '-', '×', '÷'];
+            default:
+                return [];
+        }
+    }, [type]);
+    // 确认按钮需要在type为confirm时展示
+    // @en Display then confirm button when type is confirm
+    const getConfirmButton = useCallback(() => {
+        if (type !== 'confirm') {
+            return null;
+        }
+        return (React.createElement("div", { onClick: () => {
+                confirmClosable && close();
+                onConfirm?.();
+            }, className: cls(`${prefix}-key`, `${prefix}-key-confirm`) }, confirmButton || locale.Keyboard.confirm));
+    }, [type]);
+    // 点击空白处关闭键盘
+    // @en Close keyboard when clicked the blank space
+    useEffect(() => {
+        const handlerDocumentClick = (e) => {
+            if (!keyboardRef.current) {
+                return;
+            }
+            if (!keyboardRef.current.contains(e.target) &&
+                e.target !== keyboardRef.current) {
+                close();
+            }
+        };
+        document.addEventListener('click', handlerDocumentClick);
+        return () => {
+            document.removeEventListener('click', handlerDocumentClick);
+        };
+    }, []);
+    useImperativeHandle(ref, () => ({
+        keyboard: keyboardRef.current,
+        ...popupRef.current,
+    }));
+    const handleButtonClick = (ele) => {
+        switch (ele.type) {
+            case 'delete':
+                onDelete?.();
+                break;
+            case 'keyboard':
+                close();
+                break;
+            default:
+                onChange?.(ele.value);
+        }
+    };
+    const renderButtonContent = (ele) => {
+        switch (ele.type) {
+            case 'delete':
+                return deleteButton || React.createElement(IconKeyboardDelete, null);
+            case 'keyboard':
+                return keyboardButton || React.createElement(IconKeyboard, null);
+            default:
+                return ele.content;
+        }
+    };
+    const renderButton = (data, key, extraClass) => {
+        const ele = typeof data === 'string' || typeof data === 'number'
+            ? {
+                type: 'content',
+                content: data,
+                value: data,
+            }
+            : data;
+        return (React.createElement("button", { onClick: () => handleButtonClick(ele), className: cls(`${prefix}-key`, normalKeyClass, extraClass), key: key, style: normalKeyStyle }, renderButtonContent(ele)));
+    };
+    const renderKeyboardRightColumns = () => {
+        if (rightColumns) {
+            return rightColumns;
+        }
+        return rightColumn.length > 0 ? (React.createElement("div", { className: `${prefix}-col` },
+            rightColumn.map((item, index) => renderButton(item, String(index))),
+            getConfirmButton())) : null;
+    };
+    return (React.createElement(Popup, Object.assign({ ref: popupRef, maskClass: `${prefix}-popup`, close: close }, resetProps),
+        React.createElement("div", { className: cls(prefix, `${className}`), style: style, ref: keyboardRef },
+            title,
+            React.createElement("div", { className: `${prefix}-wrapper` },
+                React.createElement("div", { className: `${prefix}-key-wrapper` }, displayData.map((item, index) => (React.createElement("div", { className: `${prefix}-row`, key: index }, item.map((e, idx) => renderButton(e, String(idx), {
+                    [`${prefix}-key-special`]: type === 'confirm' &&
+                        index === displayData.length - 1 &&
+                        idx === 0,
+                })))))),
+                renderKeyboardRightColumns()))));
+});
+export default Keyboard;