@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/date-picker/style/css/index.css

@@ -0,0 +1,526 @@
+/**
+ * @type mixin-var
+ * @name GeneralMixinVars
+ * @name_en General Mixin
+ */
+/**
+ * 根据 base-font-size，设置单位尺寸为 rem
+ * @desc {en} set the unit size to rem based on base-font-size
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+ * @param @values {en} css property value, the values can be separated by commas when the style is composite
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .rem(font-size, 14);
+ *     .rem(padding, 16, 0);
+ * }
+ * ```
+ */
+/**
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
+ * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+ * @param @values {en} css property value, the values can be separated by commas when the style is composite
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .rem-with-rtl(font-size, 14);
+ *     .rem-with-rtl(padding, 16, 0);
+ * }
+ * ```
+ */
+/**
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
+ * @param @rules 对应的暗黑模式规则
+ * @param @rules {en} Corresponding dark mode rules
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-dark-mode-query({
+ *         background-color: #000;
+ *     });
+ * }
+ * ```
+ */
+/**
+ * 为属性设置 arco 提供的 token 变量
+ * @desc {en} set the token variable provided by Arco for the attribute
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @variables token变量名
+ * @param @variables {en} token variable name
+ * @param @preValues 复合属性css变量前缀
+ * @param @preValues {en} prefix for Compound Attribute CSS Variables
+ * @param @nextValues 复合属性css变量后缀
+ * @param @nextValues {en} suffix for Compound Attribute CSS Variables
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-var(background, primary-color);
+ *     .use-var(border, primary-color, 1px solid);
+ *     .use-var(border, cell-border-width, '', solid black);
+ * }
+ * ```
+ */
+/**
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
+ * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
+ * @param @property css 属性名
+ * @param @property {en} css property
+ * @param @variables token 变量名
+ * @param @variables {en} token variable name
+ * @param @preValues
+ * @param @preValues {en}
+ * @param @nextValues
+ * @param @nextValues {en}
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
+/**
+ * 0.5px 的边框线
+ * @desc {en} a border line of 0.5 pixels
+ * @param @color 使用 css 变量为线设置颜色
+ * @param @color {en} set border-color by CSS variable
+ * @param @direction 边框方向，默认为全部方向
+ * @param @direction {en} border direction，default to all directions.
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-var(line-color);
+ *     .hairline-var(line-color, top);
+ * }
+ * ```
+ */
+/**
+ * 字体加粗
+ * @desc {en} font bold
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color {en} set color by CSS variable
+ * @param @stroke 字体粗细，默认 0.3px
+ * @param @stroke {en} font weight, default 0.3 pixel
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .text-medium-var();
+ *    .text-medium-var(primary-color, 0.5PX);
+ * }
+ * ```
+ */
+/**
+ * 1px 边框
+ * @desc {en} 1 pixel border
+ * @param @direction 边框方向
+ * @param @direction {en} border direction
+ * @param @borderColor 使用 css 变量设置边框颜色
+ * @param @borderColor {en} set border-color by CSS variable
+ * @param @borderRadius border-radius，默认为 0
+ * @param @borderRadius {en} border-radius, default value is 0
+ * @param @borderWidth border-width，默认为 1px
+ * @param @borderWidth {en} border-width, default value is 1 pixel
+ * @param @borderStyle border-style，默认为 solid
+ * @param @borderStyle {en} border-style, default value is solid
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .onepx-border-var(top, line-color);
+ *    .onepx-border-var(all, line-color, 2, 2px, dashed);
+ * }
+ * ```
+ */
+/**
+ * 元素右下 0.5px 边框
+ * @desc {en} 0.5px border on bottom right
+ * @param @color 使用 css 变量设置边框颜色
+ * @param @color {en} set border-color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .hairline-bottom-right-var(line-color);
+ * }
+ * ```
+ */
+/**
+ * 元素左上 0.5px 边框
+ * @desc {en} 0.5px border on top left
+ * @param @color 使用 css 变量设置边框颜色
+ * @param @color {en} set border-color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .hairline-top-left-var(line-color);
+ * }
+ * ```
+ */
+/**
+ * 设置 Loading 组件颜色
+ * @desc {en} set Loading component color
+ * @param @color 使用 css 变量设置颜色
+ * @param @color {en} set color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-loading-color-var(primary-color);
+ * }
+ * ```
+ */
+/**
+ * 设置最小字号
+ * @desc {en} set minimum font-size
+ * @param @size 使用 css 变量设置最小字号
+ * @param @size {en} set minimum font-size by CSS variable
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
+ * @param @scale {en} set minimum font-size down text scale，default value is 0.9
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-font-size-var(badge-font-size);
+ *    .set-font-size-var(badge-font-size, 0.5);
+ * }
+ * ```
+ */
+/**
+ * 设置 content-box 盒模型下元素宽度
+ * @desc {en} set box width in content-box
+ * @param @property css 属性名
+ * @param @property {en} css property
+ * @param @width 元素总宽度，包含内边距
+ * @param @width element width, include padding
+ * @param @padding-left 左侧内边距
+ * @param @padding-left {en} padding-left
+ * @param @padding-right 右侧内边距
+ * @param @padding-right {en} padding-right
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
+ * }
+ * ```
+ */
+/**
+ * 设置 Steps 组件颜色
+ * @desc {en} set Steps component color
+ * @param @color 使用 css 变量设置主颜色
+ * @param @color {en} set main step color by CSS variable
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
+ * @param @finish-color {en} set finished step color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-steps-color-var(primary-color, lighter-primary-color);
+ * }
+ * ```
+ */
+/**
+ * @type mixin
+ * @name GeneralMixin
+ * @name_en General Mixin
+ */
+/**
+ * 文本溢出，支持1行/多行文本
+ * @desc {en} text overflow, support single line or multiple lines
+ * @param @lines 最大展示行数，默认为1行
+ * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ * .demo1{
+ *   .text-overflow();
+ * }
+ * .demo2 {
+ *   .text-overflow(2);
+ * }
+ * ```
+ */
+/**
+ * 禁用用户选择文本
+ * @desc {en} disable user selection of text
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .noselect();
+ * }
+ */
+/**
+ * 全屏布局
+ * @desc {en} full-screen layout
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .full-screen();
+ * }
+ */
+/**
+ * 文本加粗，兼容安卓设备
+ * @desc {en} text-bold, compatible with Android devices
+ * @param @color 文本颜色，默认为currentColor
+ * @param @color {en} text color, default to currentColor
+ * @param @stroke 文本字符笔触宽度，默认为0.3PX
+ * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo1 {
+ *   .text-medium();
+ * }
+ * .demo2 {
+ *   .text-medium(#fff, 0.5px);
+ * }
+ */
+/**
+ * 消除文本加粗样式，兼容安卓设备
+ * @desc {en} remove text-bold, compatible with Android devices
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .remove-text-medium();
+ * }
+ */
+/**
+ * 1px(物理像素)边框
+ * @desc {en} a border line of 1 pixel
+ * @param @direction 边框方向
+ * @param @direction {en} border direction
+ * @param @borderColor 边框颜色，默认inherit
+ * @param @borderColor {en} border color, default to inherit
+ * @param @borderRadius 边框圆角，默认0
+ * @param @borderRadius {en} border radius, default to 0
+ * @param @borderWidth 边框宽度，默认1px
+ * @param @borderWidth {en} border width, default to 1px
+ * @param @borderStyle 边框样式，默认solid
+ * @param @borderStyle {en} border style, default to solid
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .onepx-border();
+ * }
+ */
+/**
+ * 移除0.5px的边框线
+ * @desc {en} remove border line of 0.5 pixels
+ * @param @direction 边框方向，默认为全部方向
+ * @param @direction {en} border direction，default to all directions.
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *     .remove-hairline(all);
+ * }
+ * ```
+ */
+/**
+ * 元素右下 0.5px border
+ * @desc {en} 0.5px border on bottom right
+ * @param @color 边框颜色
+ * @param @color {en} border-color
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-bottom-right(#000);
+ * }
+ * ```
+ */
+/**
+ * 元素左上 0.5px border
+ * @desc {en} 0.5px border on top left
+ * @param @color 边框颜色
+ * @param @color {en} border-color
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-top-left(#000);
+ * }
+ * ```
+ */
+/**
+ * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
+ * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
+ * @param @origin-property css属性名
+ * @param @origin-property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
+ * }
+ * ```
+ */
+/**
+ * 设置Loading组件颜色
+ * @desc {en} set Loading component color
+ * @param @color 颜色
+ * @param @color {en} color
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-loading-color(#000);
+ * }
+ * ```
+ */
+/**
+ * 设置最小字号
+ * @desc {en} set minimum font-size
+ * @param @size 最小字号
+ * @param @size {en} minimum font-size
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-font-size(10px);
+ * }
+ * ```
+ */
+/**
+ * 设置content-box盒模型下元素宽度
+ * @desc {en} set box width in content-box
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @width 元素总宽度，包含内边距
+ * @param @width element width, include padding
+ * @param @padding-left 左侧内边距
+ * @param @padding-left {en} padding-left
+ * @param @padding-right 右侧内边距
+ * @param @padding-right {en} padding-right
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-content-box-width(min-width, 300px, 10px, 10px);
+ * }
+ * ```
+ */
+/**
+ * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
+ * @desc {en} set Steps component color
+ * @param @color 当前步骤背景、标题文本颜色
+ * @param @color {en} color of current step background and title text
+ * @param @finish-color 已完成步骤背景色
+ * @param @finish-color {en} color of finished step background
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-steps-color(#FFB400);
+ * }
+ * ```
+ */
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+.arco-theme-dark .process-bg-color-with-config,
+.arco-theme-dark .process-custom-icon-bg-color-with-config {
+  color:  rgba(255, 255, 255, 0.9) ;
+}
+.arco-theme-dark .wait-custom-icon-bg-color-with-config {
+  background:  #2e2e30 ;
+  color:  #929293 ;
+}
+/********************* End *************************/

package/esnext/date-picker/style/css/index.d.ts

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

package/esnext/date-picker/style/css/index.js

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

package/esnext/date-picker/style/index.d.ts

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

package/esnext/date-picker/style/index.js

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

package/esnext/date-picker/style/index.less

@@ -0,0 +1,30 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-date-picker {
+
+}
+
+/***************************************************
+ *                                                 *
+ *               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);
+    }
+  }
+}
+/********************* End *************************/

package/esnext/date-picker/type.d.ts

@@ -0,0 +1,114 @@
+import { ReactNode } from 'react';
+import { PickerProps } from '../picker';
+import { PickerData } from '../picker-view';
+export declare type ItemType = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
+export interface IDateObj {
+    /**
+     * 年
+     * @en year
+     * */
+    year: number;
+    /**
+     * 月
+     * @en month
+     * */
+    month: number;
+    /**
+     * 日
+     * @en date
+     * */
+    date: number;
+    /**
+     * 时
+     * @en hour
+     *  */
+    hour: number;
+    /**
+     * 分
+     * @en minute
+     */
+    minute: number;
+    /**
+     * 秒
+     * @en second
+     * */
+    second: number;
+}
+export declare type mode = 'date' | 'time' | 'datetime';
+export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' | 'cols' | 'value' | 'onChange' | 'onPickerChange' | 'onOk' | 'renderLinkedContainer'> {
+    /**
+     * 点击选中时执行的回调
+     * @en Callback when clicking OK
+     */
+    onOk?: (timestamp: number, obj: IDateObj) => void;
+    /**
+     * 当前选中的时间，timestamp
+     * @en The currently selected time, timestamp
+     * @default Date.now()
+     */
+    currentTs?: number;
+    /**
+     * 选中后的回调
+     * @en Callback when value is changed
+     */
+    onChange?: (timestamp: number, obj: IDateObj) => void;
+    /**
+     * 每列数据选择变化后的回调函数
+     * @en The callback function after each column data selection changes
+     */
+    onValueChange?: (timestamp: number, obj: IDateObj, index: number) => void;
+    /**
+     * 可选列类型，date - 年月日，time - 时分秒，datetime - 年月日时分秒
+     * @en Optional column type, date means year, month and day, time means hour, minute and second, datetime means year, month, day, hour, minute and second
+     * @default "datetime"
+     */
+    mode?: mode;
+    /**
+     * 可选列数组
+     * @en optional column list
+     * @default []
+     */
+    typeArr?: ItemType[];
+    /**
+     * 最小可选日期，timestamp
+     * @en Minimum selectable date, timestamp
+     * @default 当前时间的前十年
+     * @default_en 10 years ago from the current time
+     */
+    minTs?: number;
+    /**
+     * 最大可选日期，timestamp
+     * @en Maximum selectable date, timestamp
+     * @default 当前时间的后十年
+     * @default_en Next decade from current time
+     */
+    maxTs?: number;
+    /**
+     * 是否使用 UTC 时间
+     * @en Whether to use UTC
+     * @default false
+     */
+    useUTC?: boolean;
+    /**
+     * 各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字
+     * @en The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned.
+     * @default (value: number) => (value < 10 ? \`0${value}\` : String(value))
+     */
+    formatter?: (value: number, type: ItemType) => string;
+    /**
+     * 可选择行过滤方法，参数type为ItemType，参数value为当前行的值，返回true表示该行可选择
+     * @en Row filtering method, the parameter type is ItemType, the parameter value is the value of the current row, and returns true to indicate that the row can be selected
+     * @default () => true
+     */
+    valueFilter?: (type: ItemType, value: number) => boolean;
+    /**
+     * 选择器列表项干预，可插入自定义选项
+     * @en Selector list item intervention to insert custom options.
+     */
+    columnsProcessor?: (columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][];
+    /**
+     * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
+     * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
+     */
+    renderLinkedContainer?: (currentTs: number, itemTypes: ItemType[]) => ReactNode;
+}

package/esnext/date-picker/type.js

@@ -0,0 +1 @@
+export {};