dtable-ui-component 6.0.38 → 6.0.39-al63

package/lib/DTableFiltersPopover/widgets/filter-calendar.js

@@ -14,6 +14,7 @@ var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _lang = require("../../lang");
 var _columnUtils = require("../../utils/column-utils");
+var _dateFormat = require("../../utils/dateFormat.js");
 require("@seafile/seafile-calendar/assets/index.css");
 let now = (0, _dayjs.default)();
 class FilterCalendar extends _react.Component {
@@ -26,12 +27,18 @@ class FilterCalendar extends _react.Component {
       const {
         onChange
       } = this.props;
-      const searchFormat = 'YYYY-MM-DD';
+      const searchFormat = this.columnDataFormat;
       this.setState({
         value
       }, () => {
         if (this.state.value) {
-          onChange(this.state.value.format(searchFormat));
+          console.log('value', this.state.value);
+          const filterStr = this.state.value.format(this.getCalendarFormat()[0]);
+          if (typeof filterStr === 'string') {
+            const changeVal = (0, _dateFormat.filterChangeValue)(filterStr, searchFormat);
+            console.log('changeVal', changeVal);
+            onChange(changeVal);
+          }
         }
       });
     };
@@ -85,6 +92,9 @@ class FilterCalendar extends _react.Component {
     this.columnDataFormat = DataFormat.split(' ')[0];
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
     this.defaultCalendarValue = null;
+    this.formatDay = this.props.value ? (0, _dateFormat.getDay)(this.props.value, this.getCalendarFormat()[0]) : null;
+    this.formatMonth = this.props.value ? (0, _dateFormat.getMonth)(this.props.value, this.getCalendarFormat()[0]) : null;
+    this.formatYear = this.props.value ? (0, _dateFormat.getYear)(this.props.value, this.getCalendarFormat()[0]) : null;
   }
   componentDidMount() {
     const {
@@ -92,6 +102,9 @@ class FilterCalendar extends _react.Component {
       lang
     } = this.props;
     const iszhcn = lang === 'zh-cn';
+    console.log('formatDay', this.formatDay);
+    console.log('formatMonth', this.formatMonth);
+    console.log('formatYear', this.formatYear);
     if (iszhcn) {
       now = now.locale('zh-cn');
     } else {
@@ -101,7 +114,7 @@ class FilterCalendar extends _react.Component {
     if (value && (0, _dayjs.default)(value).isValid()) {
       let validValue = (0, _dayjs.default)(value).isValid() ? (0, _dayjs.default)(value) : (0, _dayjs.default)(this.defaultCalendarValue);
       this.setState({
-        value: iszhcn ? (0, _dayjs.default)(validValue).locale('zh-cn') : (0, _dayjs.default)(validValue).locale('en-gb')
+        value: iszhcn ? (0, _dayjs.default)(validValue).year(this.formatYear).month(this.formatMonth).date(this.formatDay).locale('zh-cn') : (0, _dayjs.default)(validValue).year(this.formatYear).month(this.formatMonth).date(this.formatDay).locale('en-gb')
       });
     }
   }
@@ -111,12 +124,16 @@ class FilterCalendar extends _react.Component {
       firstDayOfWeek
     } = this.props;
     const state = this.state;
+    const calendarFormat = this.getCalendarFormat();
+    const inputStr = state.value ? state.value.format(this.columnDataFormat) : '';
+    const displayContentValue = (0, _dateFormat.renderFilterInputFormat)(inputStr, calendarFormat[0], (0, _dateFormat.delimate)(calendarFormat[0]));
     if (isReadOnly) return /*#__PURE__*/_react.default.createElement("input", {
       className: "ant-calendar-picker-input ant-input form-control",
-      value: state.value ? state.value.format(this.columnDataFormat) : '',
+      value: displayContentValue,
       disabled: true
     });
-    const calendarFormat = this.getCalendarFormat();
+    const calendarFormat1 = ['YYYY-MM-DD'];
+    console.log('calendarFormat', calendarFormat, displayContentValue);
     const clearStyle = {
       position: 'absolute',
       top: '15px',
@@ -134,7 +151,7 @@ class FilterCalendar extends _react.Component {
       style: {
         zIndex: 1001
       },
-      format: calendarFormat,
+      format: calendarFormat1,
       defaultValue: this.defaultCalendarValue,
       showDateInput: true,
       focusablePanel: false,
@@ -165,7 +182,7 @@ class FilterCalendar extends _react.Component {
         tabIndex: "-1",
         readOnly: true,
         className: "ant-calendar-picker-input ant-input form-control",
-        value: value ? value.format(this.columnDataFormat) : '',
+        value: displayContentValue,
         onMouseDown: this.handleMouseDown
       }), /*#__PURE__*/_react.default.createElement("div", {
         ref: this.calendarContainerRef

package/lib/DateEditor/mb-editor/index.js

@@ -76,10 +76,11 @@ class MBDateEditor extends _react.default.PureComponent {
       const {
         time
       } = this.state;
+      const calanderFormat = Array.of(this.format);
       const calendar = /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
-        format: this.format,
+        format: calanderFormat,
         defaultValue: this.defaultCalendarValue,
         showDateInput: false,
         focusablePanel: false,
@@ -189,7 +190,7 @@ class MBDateEditor extends _react.default.PureComponent {
       onChange: this.handleDateChange
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input-day"
-    }, (0, _dayjs.default)(time).format(this.leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
+    }, 'gzc'))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input",
       style: {
         width: '50%'

package/lib/DateEditor/pc-editor.js

@@ -143,13 +143,14 @@ class PCDateEditor extends _react.default.Component {
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
       const defaultTime = this.getDefaultTime();
+      const calanderFormat = Array.isArray(dateFormat) ? dateFormat : Array.of(dateFormat);
       return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
         style: {
           zIndex: 1001
         },
-        format: dateFormat,
+        format: calanderFormat,
         defaultValue: defaultValue,
         showHourAndMinute: showHourAndMinute,
         defaultMinutesTime: defaultTime,

package/lib/DateFormatter/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
+var _dateFormat = require("../utils/dateFormat.js");
 require("./index.css");
 class DateFormatter extends _react.default.Component {
   render() {
@@ -18,7 +18,7 @@ class DateFormatter extends _react.default.Component {
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container date-formatter', containerClassName);
     if (date !== '') {
-      date = (0, _dtableUtils.getDateDisplayString)(date, format);
+      date = (0, _dateFormat.renderDisplayContent)(date, format, (0, _dateFormat.delimate)(format));
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       title: date,

package/lib/GeolocationEditor/mb-editor/map-editor/index.js

@@ -472,6 +472,9 @@ class MapEditor extends _react.default.Component {
       }
       return;
     }
+    this.setState({
+      isLoading: false
+    });
   }
   componentWillUnmount() {
     let center = {};

package/lib/InputItem/custom-input.js

@@ -262,7 +262,9 @@ class NumberInput extends React.Component {
         getContainer: () => this.getContainer()
       }, this.getComponent());
     } else {
-      customNumberKeyboard = ReactDOM.unstable_renderSubtreeIntoContainer(this, this.getComponent(), this.getContainer());
+      const container = this.getContainer();
+      const root = ReactDOM.createRoot(container);
+      root.render(this.getComponent());
     }
   }
   renderPortal() {

package/lib/utils/dateFormat.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.currentYear = exports.currentTime = exports.DATE_FORMATS = void 0;
+exports.delimate = delimate;
+exports.filterChangeValue = filterChangeValue;
+exports.formatDateLocal = formatDateLocal;
+exports.fullValidYear = fullValidYear;
+exports.getDay = getDay;
+exports.getMonth = getMonth;
+exports.getYear = getYear;
+exports.renderDisplayContent = renderDisplayContent;
+exports.renderFilterInputFormat = renderFilterInputFormat;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
+_dayjs.default.extend(_utc.default);
+const currentTime = exports.currentTime = (0, _dayjs.default)().format('HH:mm');
+const currentYear = exports.currentYear = (0, _dayjs.default)().year();
+const DATE_FORMATS = exports.DATE_FORMATS = {
+  ISO: 'yyyy-mm-dd',
+  ISOAndTime: 'yyyy-mm-dd hh:mm',
+  US: 'm/d/yyyy',
+  USAndTime: 'm/d/yyyy hh:mm',
+  European: 'dd/mm/yyyy',
+  EuropeanAndTime: 'dd/mm/yyyy hh:mm',
+  Germany_Russia_etc: 'dd.mm.yyyy',
+  Germany_Russia_etcAndTime: 'dd.mm.yyyy hh:mm'
+};
+function fullValidYear(yearStr) {
+  const year = yearStr;
+  if (!year || isNaN(year)) return currentYear;
+  if (year.length === 2) {
+    if (Number(year) >= 0 && Number(year) < 69) {
+      return year ? "20".concat(year) : currentYear;
+    } else if (Number(year) >= 69 && Number(year) < 100) {
+      return year ? "19".concat(year) : currentYear;
+    }
+  }
+  if (year.length === 4) {
+    return year;
+  }
+  return year ? year.padStart(4, '0') : currentYear;
+}
+function formatDateLocal(formatStr, localeFormat) {
+  const str = formatStr || '';
+  const format = String(localeFormat).toLowerCase();
+  let cleanStr;
+  switch (format) {
+    case DATE_FORMATS.ISO:
+    case DATE_FORMATS.ISOAndTime:
+      cleanStr = str.replace(/[^0-9]+/g, '-');
+      return cleanStr.split('-').filter(Boolean).map(String);
+    case DATE_FORMATS.US:
+    case DATE_FORMATS.USAndTime:
+    case DATE_FORMATS.European:
+    case DATE_FORMATS.EuropeanAndTime:
+      cleanStr = str.replace(/[^0-9]+/g, '/');
+      return cleanStr.split('/').filter(Boolean).map(String);
+    case DATE_FORMATS.Germany_Russia_etc:
+    case DATE_FORMATS.Germany_Russia_etcAndTime:
+      cleanStr = str.replace(/[^0-9]+/g, '.');
+      return cleanStr.split('.').filter(Boolean).map(String);
+    default:
+      return [];
+  }
+}
+function delimate(localeFormat) {
+  const formatPrefix = String(localeFormat).toLowerCase();
+  let delimiter;
+  if (formatPrefix === DATE_FORMATS.Germany_Russia_etc || formatPrefix === DATE_FORMATS.Germany_Russia_etcAndTime) {
+    delimiter = '.';
+  } else if (formatPrefix === DATE_FORMATS.ISO || formatPrefix === DATE_FORMATS.ISOAndTime) {
+    delimiter = '-';
+  } else {
+    delimiter = '/';
+  }
+  return delimiter;
+}
+function renderDisplayContent(str, localeFormat, delimiter) {
+  const format = String(localeFormat).toLowerCase();
+  const parts = formatDateLocal(str, localeFormat);
+  if (parts.length < 3) {
+    return '';
+  }
+  let day = parts[2];
+  let month = parts[1];
+  let year = String(fullValidYear(parts[0])).padStart(4, '0');
+  let time = "".concat(parts[3], ":").concat(parts[4]) || currentTime;
+  if (format === DATE_FORMATS.ISO) {
+    return "".concat(year).concat(delimiter).concat(month).concat(delimiter).concat(day);
+  }
+  if (format === DATE_FORMATS.ISOAndTime) {
+    return "".concat(year).concat(delimiter).concat(month).concat(delimiter).concat(day, " ").concat(time);
+  }
+  if (format === DATE_FORMATS.US) {
+    return "".concat(Number(month)).concat(delimiter).concat(Number(day)).concat(delimiter).concat(year);
+  }
+  if (format === DATE_FORMATS.USAndTime) {
+    return "".concat(Number(month)).concat(delimiter).concat(Number(day)).concat(delimiter).concat(year, " ").concat(time);
+  }
+  if (format === DATE_FORMATS.European || format === DATE_FORMATS.Germany_Russia_etc) {
+    return "".concat(Number(day)).concat(delimiter).concat(Number(month)).concat(delimiter).concat(year);
+  }
+  if (format === DATE_FORMATS.EuropeanAndTime || format === DATE_FORMATS.Germany_Russia_etcAndTime) {
+    return "".concat(Number(day)).concat(delimiter).concat(Number(month)).concat(delimiter).concat(year, " ").concat(time);
+  }
+}
+function renderFilterInputFormat(str, localeFormat, delimiter) {
+  const format = String(localeFormat).toLowerCase();
+  const parts = formatDateLocal(str, localeFormat);
+  // console.log('parts', str, parts);
+  if (parts.length < 3) {
+    return '';
+  }
+  let day;
+  let month;
+  let year;
+  let time = "".concat(parts[3], ":").concat(parts[4]) || currentTime;
+  if (format === DATE_FORMATS.ISO) {
+    day = parts[2];
+    month = parts[1];
+    year = String(fullValidYear(parts[0])).padStart(4, '0');
+    return "".concat(year).concat(delimiter).concat(month).concat(delimiter).concat(day);
+  }
+  if (format === DATE_FORMATS.ISOAndTime) {
+    day = parts[2];
+    month = parts[1];
+    year = String(fullValidYear(parts[0])).padStart(4, '0');
+    return "".concat(year).concat(delimiter).concat(month).concat(delimiter).concat(day, " ").concat(time);
+  }
+  if (format === DATE_FORMATS.US) {
+    day = parts[1];
+    month = parts[0];
+    year = String(fullValidYear(parts[2])).padStart(4, '0');
+    return "".concat(Number(month)).concat(delimiter).concat(Number(day)).concat(delimiter).concat(year);
+  }
+  if (format === DATE_FORMATS.USAndTime) {
+    day = parts[1];
+    month = parts[0];
+    year = String(fullValidYear(parts[2])).padStart(4, '0');
+    return "".concat(Number(month)).concat(delimiter).concat(Number(day)).concat(delimiter).concat(year, " ").concat(time);
+  }
+  if (format === DATE_FORMATS.European || format === DATE_FORMATS.Germany_Russia_etc) {
+    day = parts[0];
+    month = parts[1];
+    year = String(fullValidYear(parts[2])).padStart(4, '0');
+    return "".concat(Number(day)).concat(delimiter).concat(Number(month)).concat(delimiter).concat(year);
+  }
+  if (format === DATE_FORMATS.EuropeanAndTime || format === DATE_FORMATS.Germany_Russia_etcAndTime) {
+    day = parts[0];
+    month = parts[1];
+    year = String(fullValidYear(parts[2])).padStart(4, '0');
+    return "".concat(Number(day)).concat(delimiter).concat(Number(month)).concat(delimiter).concat(year, " ").concat(time);
+  }
+}
+function filterChangeValue(str, localeFormat) {
+  const format = String(localeFormat).toLowerCase();
+  const parts = formatDateLocal(str, format);
+  if (parts.length < 3) {
+    return '';
+  }
+  let day;
+  let month;
+  let year;
+  if (format === DATE_FORMATS.ISO || format === DATE_FORMATS.ISOAndTime) {
+    day = parts[2];
+    month = parts[1];
+    year = fullValidYear(parts[0]);
+  }
+  if (format === DATE_FORMATS.US || format === DATE_FORMATS.USAndTime) {
+    day = parts[1];
+    month = parts[0];
+    year = fullValidYear(parts[2]);
+  }
+  if (format === DATE_FORMATS.European || format === DATE_FORMATS.Germany_Russia_etc || format === DATE_FORMATS.EuropeanAndTime || format === DATE_FORMATS.Germany_Russia_etcAndTime) {
+    day = parts[0];
+    month = parts[1];
+    year = fullValidYear(parts[2]);
+  }
+  return "".concat(String(year).padStart(4, '0'), "-").concat(String(month).padStart(2, '0'), "-").concat(String(day).padStart(2, '0'));
+}
+function getDay(str, localeFormat, mode) {
+  const format = String(localeFormat).toLowerCase();
+  const parts = formatDateLocal(str, format);
+  if (parts.length < 3) {
+    return '';
+  }
+  if (!mode) {
+    if (format === DATE_FORMATS.ISO || format === DATE_FORMATS.ISOAndTime) {
+      return String(parts[2]).padStart(2, '0');
+    }
+    return String(Number(parts[2]));
+  }
+  if (format === DATE_FORMATS.ISO || format === DATE_FORMATS.ISOAndTime) {
+    return String(parts[2]).padStart(2, '0');
+  }
+  if (format === DATE_FORMATS.US || format === DATE_FORMATS.USAndTime) {
+    return String(Number(parts[1]));
+  }
+  return String(Number(parts[0]));
+}
+function getMonth(str, localeFormat, mode) {
+  const format = String(localeFormat).toLowerCase();
+  const parts = formatDateLocal(str, format);
+  if (parts.length < 3) {
+    return '';
+  }
+  if (!mode) {
+    if (format === DATE_FORMATS.ISO || format === DATE_FORMATS.ISOAndTime) {
+      return String(Number(parts[1]) - 1).padStart(2, '0');
+    }
+    return String(Number(parts[1]) - 1);
+  }
+  if (format === DATE_FORMATS.ISO || format === DATE_FORMATS.ISOAndTime) {
+    return String(Number(parts[1]) - 1).padStart(2, '0');
+  }
+  if (format === DATE_FORMATS.US || format === DATE_FORMATS.USAndTime) {
+    return String(Number(parts[0]) - 1);
+  }
+  return String(Number(parts[1]) - 1);
+}
+function getYear(str, localeFormat, mode) {
+  const format = String(localeFormat).toLowerCase();
+  const parts = formatDateLocal(str, format);
+  if (parts.length < 3) {
+    return '';
+  }
+  if (!mode) {
+    return String(fullValidYear(parts[0])).padStart(4, '0');
+  }
+  if (format === DATE_FORMATS.ISO || format === DATE_FORMATS.ISOAndTime) {
+    return String(fullValidYear(parts[0])).padStart(4, '0');
+  }
+  return String(fullValidYear(parts[2])).padStart(4, '0');
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.38",
+  "version": "6.0.39-al63",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",
-    "@seafile/seafile-calendar": "0.0.29",
+    "@seafile/seafile-calendar": "^0.0.29-alpha79",
     "@seafile/seafile-editor": "~2.0.6",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",