@arco-design/mobile-react 2.19.0

package/cjs/date-picker/index.js

@@ -0,0 +1,346 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {
+  YEAR: true
+};
+exports.default = exports.YEAR = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _picker = _interopRequireDefault(require("../picker"));
+
+var _contextProvider = require("../context-provider");
+
+var _helper = require("./helper");
+
+var _type = require("./type");
+
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _type[key]) return;
+  exports[key] = _type[key];
+});
+var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var allTypes = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+
+var defaultFormatter = function defaultFormatter(value) {
+  return value < 10 ? "0" + value : String(value);
+};
+
+var YEAR = 12 * 30 * 24 * 60 * 60 * 1000;
+exports.YEAR = YEAR;
+var initMinDate = Date.now() - 10 * YEAR;
+var initMaxDate = Date.now() + 10 * YEAR;
+var initDate = Date.now();
+
+/**
+ * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
+ * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 日期时间选择器
+ * @name_en DatePicker
+ */
+var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$currentTs = props.currentTs,
+      userSetCurrentTs = _props$currentTs === void 0 ? initDate : _props$currentTs,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      onOk = props.onOk,
+      onChange = props.onChange,
+      onValueChange = props.onValueChange,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'datetime' : _props$mode,
+      _props$typeArr = props.typeArr,
+      typeArr = _props$typeArr === void 0 ? [] : _props$typeArr,
+      _props$minTs = props.minTs,
+      minTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
+      _props$maxTs = props.maxTs,
+      maxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
+      _props$formatter = props.formatter,
+      formatter = _props$formatter === void 0 ? defaultFormatter : _props$formatter,
+      _props$valueFilter = props.valueFilter,
+      valueFilter = _props$valueFilter === void 0 ? function () {
+    return true;
+  } : _props$valueFilter,
+      columnsProcessor = props.columnsProcessor,
+      touchToStop = props.touchToStop,
+      _props$useUTC = props.useUTC,
+      useUTC = _props$useUTC === void 0 ? false : _props$useUTC,
+      otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+
+  var _useState = (0, _react.useState)([[]]),
+      data = _useState[0],
+      setData = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var currentDateObjRef = (0, _react.useRef)(_convertTsToDateObj(currentTs));
+  var minDateObjRef = (0, _react.useRef)(_convertTsToDateObj(minTs));
+  var maxDateObjRef = (0, _react.useRef)(_convertTsToDateObj(maxTs));
+  var keyOptions = (0, _react.useMemo)(function () {
+    return _getKeyOptions();
+  }, [mode, typeArr]);
+  var pickerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: pickerRef.current ? pickerRef.current.dom : null
+    };
+  });
+
+  function _getColumns() {
+    var dateObj = {};
+    allTypes.forEach(function (type) {
+      dateObj[type] = _getActualArray(type, currentDateObjRef.current);
+    });
+    var columns = keyOptions.map(function (opt) {
+      return dateObj[opt];
+    });
+
+    if (columnsProcessor) {
+      columns = columnsProcessor(columns, currentDateObjRef.current);
+    }
+
+    return {
+      columns: columns,
+      dateObj: dateObj
+    };
+  }
+
+  function _getSelectValue(columns) {
+    var val = keyOptions.map(function (opt, index) {
+      var _curCol$Math$max;
+
+      var curCol = columns[index] || [];
+      var selectIndex = curCol.findIndex(function (col) {
+        return col.value === currentDateObjRef.current[opt];
+      });
+      return (_curCol$Math$max = curCol[Math.max(selectIndex, 0)]) == null ? void 0 : _curCol$Math$max.value;
+    });
+    return val;
+  }
+
+  function _initData() {
+    var _getColumns2 = _getColumns(),
+        columns = _getColumns2.columns;
+
+    var val = _getSelectValue(columns);
+
+    setData(function () {
+      return columns;
+    });
+    setValue(function () {
+      return val;
+    });
+  } // 根据当前选中的日期动态改变其他列的options
+  // @en Dynamically change the options of other columns based on the currently selected date
+
+
+  function _getActualArray(type, nowDateObj) {
+    var normalRange = _getNormalRange(type, nowDateObj);
+
+    var range = [];
+
+    switch (type) {
+      case 'year':
+        range = [minDateObjRef.current.year, maxDateObjRef.current.year];
+        break;
+
+      default:
+        {
+          var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
+          range = normalRange;
+
+          if ((0, _helper.judgeObj)(nowDateObj, minDateObjRef.current, checkKeys)) {
+            range[0] = minDateObjRef.current[type];
+          }
+
+          if ((0, _helper.judgeObj)(nowDateObj, maxDateObjRef.current, checkKeys)) {
+            range[range.length - 1] = maxDateObjRef.current[type];
+          }
+        }
+    }
+
+    return _convertRangeToArr(type, range);
+  }
+
+  function _convertRangeToArr(type, range) {
+    var _range$ = range[0],
+        start = _range$ === void 0 ? 0 : _range$,
+        _range$2 = range[1],
+        end = _range$2 === void 0 ? 0 : _range$2;
+    var arr = [];
+
+    for (var i = start; i <= end; i += 1) {
+      if (valueFilter(type, i)) {
+        var text = formatter(i, type);
+        arr.push({
+          label: text === void 0 ? defaultFormatter(i) : text,
+          value: i
+        });
+      }
+    }
+
+    return arr;
+  }
+
+  function _getNormalRange(type, nowDateObj) {
+    switch (type) {
+      case 'month':
+        return [1, 12];
+
+      case 'date':
+        if (nowDateObj.month === 2) {
+          // 闰年2月29天
+          // @en February 29th in leap year
+          return nowDateObj.year % 4 === 0 ? [1, 29] : [1, 28];
+        }
+
+        return (0, _helper.oneOf)(nowDateObj.month, [1, 3, 5, 7, 8, 10, 12]) ? [1, 31] : [1, 30];
+
+      case 'hour':
+        return [0, 23];
+
+      case 'minute':
+      case 'second':
+        return [0, 59];
+
+      default:
+        return [];
+    }
+  }
+
+  function _convertObjToTs(obj, defaultTs) {
+    return (0, _helper.convertObjToTs)(obj, defaultTs, useUTC);
+  }
+
+  function _convertTsToDateObj(ts) {
+    return (0, _helper.convertTsToDateObj)(ts, useUTC);
+  }
+
+  function _handlePickerChange(values, index) {
+    var type = keyOptions[index];
+    var nowDateObj = {};
+    values.forEach(function (i, keyIndex) {
+      nowDateObj[keyOptions[keyIndex]] = i;
+    });
+
+    if (~keyOptions.slice(0, keyOptions.length - 1).indexOf(type)) {
+      currentDateObjRef.current = nowDateObj;
+
+      var _getColumns3 = _getColumns(),
+          columns = _getColumns3.columns,
+          dateObj = _getColumns3.dateObj; // 校准选中日期，比如先选中2020-02-29 年份改为2019，则2月没有29日；需要校准
+      // @en Calibration selected date, For example, if you first select 2020-02-29 and change the year to 2019, there will be no 29th in February; calibration is required
+
+
+      keyOptions.forEach(function (key) {
+        if (dateObj[key].findIndex(function (item) {
+          return item.value === nowDateObj[key];
+        }) < 0) {
+          nowDateObj[key] = dateObj[key][dateObj[key].length - 1].value;
+        }
+      });
+
+      var val = _getSelectValue(columns);
+
+      setData(columns);
+      setValue(val);
+    }
+
+    if (onValueChange) {
+      onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
+    }
+  }
+
+  function _handlePickerConfirm(values) {
+    var nowDateObj = {};
+    values.forEach(function (index, keyIndex) {
+      nowDateObj[keyOptions[keyIndex]] = index;
+    });
+
+    var newTs = _convertObjToTs(nowDateObj, currentTs);
+
+    if (onOk) {
+      onOk(newTs, nowDateObj);
+    }
+
+    if (onChange) {
+      onChange(newTs, nowDateObj);
+    }
+  }
+
+  function _getKeyOptions() {
+    if (typeArr && typeArr.length) {
+      return typeArr;
+    }
+
+    var options = [];
+
+    switch (mode) {
+      case 'date':
+        options = allTypes.slice(0, 3);
+        break;
+
+      case 'time':
+        options = allTypes.slice(3);
+        break;
+
+      default:
+        options = allTypes;
+    }
+
+    return options;
+  }
+
+  (0, _react.useEffect)(function () {
+    minDateObjRef.current = _convertTsToDateObj(minTs);
+    currentDateObjRef.current = _convertTsToDateObj(currentTs);
+    maxDateObjRef.current = _convertTsToDateObj(maxTs);
+
+    _initData();
+  }, [currentTs, minTs, maxTs, useUTC]);
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      currentDateObjRef.current = _convertTsToDateObj(currentTs);
+
+      _initData();
+    }
+  }, [visible]);
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/_react.default.createElement(_picker.default, (0, _extends2.default)({}, otherProps, {
+      ref: pickerRef,
+      visible: visible,
+      className: (0, _mobileUtils.cls)(className, prefixCls + "-date-picker"),
+      cascade: false,
+      data: data,
+      value: value,
+      onPickerChange: _handlePickerChange,
+      onOk: _handlePickerConfirm,
+      touchToStop: touchToStop
+    }));
+  });
+});
+var _default = DatePicker;
+exports.default = _default;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../picker/style/css");
+
+require("./index.css");

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../picker/style");
+
+require("./index.less");

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

@@ -0,0 +1,5 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-date-picker {
+
+}

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

@@ -0,0 +1,108 @@
+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'> {
+    /**
+     * 点击选中时执行的回调
+     * @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[][];
+}

package/cjs/date-picker/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/dialog/demo/style/css/mobile.css

@@ -0,0 +1,28 @@
+#demo-dialog {
+  padding-bottom: 0.54rem;
+}
+#demo-dialog .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+.dialog-input-demo-input {
+  margin-top: 0.16rem;
+  padding: 0.16rem 0.24rem;
+  font-size: 0.28rem;
+  line-height: 0.4rem;
+  background-color: #F2F3F5;
+  width: 100%;
+  caret-color:  #165dff ;
+}
+.dialog-input-demo-hint {
+  color:  #86909c ;
+  margin-top: 0.16rem;
+  font-size: 0.26rem;
+  line-height: 0.36rem;
+}
+.dialog-input-demo .arco-dialog-footer .dialog-footer-button.cancel {
+  color:  #1d2129 ;
+}

package/cjs/dialog/demo/style/mobile.less

@@ -0,0 +1,35 @@
+@import '../../../../style/mixin.less';
+
+#demo-dialog {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+}
+
+.dialog-input-demo {
+    &-input {
+        .rem(margin-top, 8);
+        .rem(padding, 8, 12);
+        .rem(font-size, 14);
+        .rem(line-height, 20);
+        background-color: #F2F3F5;
+        width: 100%;
+        .use-var(caret-color, primary-color);
+    }
+    &-hint {
+        .use-var(color, sub-info-font-color);
+        .rem(margin-top, 8);
+        .rem(font-size, 13);
+        .rem(line-height, 18);
+    }
+    .@{prefix}-dialog-footer {
+        .dialog-footer-button.cancel {
+            .use-var(color, font-color);
+        }
+    }
+}