dtable-ui-component 6.0.26-beta2 → 6.0.26-beta4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/DateEditor/index.js +2 -2
  2. package/lib/DateEditor/lg.js +3 -3
  3. package/lib/DateEditor/sm/index.js +94 -82
  4. package/lib/RowExpandEditor/RowExpandDateEditor/sm.js +0 -2
  5. package/lib/utils/editor-utils.js +6 -2
  6. package/package.json +1 -1
package/lib/DateEditor/index.js CHANGED
@@ -35,7 +35,7 @@ const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
35
35
  return (column === null || column === void 0 ? void 0 : column.data) && (column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.format) || _dtableUtils.DEFAULT_DATE_FORMAT;
36
36
  }, [column]);
37
37
  const showHourAndMinute = (0, _react.useMemo)(() => format.indexOf('HH:mm') > -1, [format]);
38
- const onValueChanged = (0, _react.useCallback)(newValue => {
38
+ const handelCommit = (0, _react.useCallback)(newValue => {
39
39
  if (value !== newValue) {
40
40
  setValue(newValue);
41
41
  onCommit(newValue);
@@ -54,7 +54,7 @@ const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
54
54
  showHourAndMinute,
55
55
  firstDayOfWeek,
56
56
  className,
57
- onValueChanged,
57
+ onCommit: handelCommit,
58
58
  onClose: hideCalendar
59
59
  };
60
60
  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
package/lib/DateEditor/lg.js CHANGED
@@ -28,10 +28,10 @@ class Large extends _react.default.Component {
28
28
  value: value,
29
29
  open: true // if value changed, don't close datePicker
30
30
  });
31
- this.props.onValueChanged(value.format(dateFormat));
31
+ this.props.onCommit(value.format(dateFormat));
32
32
  };
33
33
  this.onBlur = () => {
34
- this.props.onValueChanged(this.getValue());
34
+ this.props.onCommit(this.getValue());
35
35
  };
36
36
  this.getValue = () => {
37
37
  let {
@@ -67,7 +67,7 @@ class Large extends _react.default.Component {
67
67
  this.setState({
68
68
  value: null
69
69
  });
70
- this.props.onValueChanged(null);
70
+ this.props.onCommit(null);
71
71
  };
72
72
  this.onFocusDatePicker = () => {
73
73
  this.setState({
package/lib/DateEditor/sm/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
@@ -10,83 +9,73 @@ var _datePicker = _interopRequireDefault(require("antd-mobile/lib/date-picker"))
10
9
  var _react = _interopRequireDefault(require("react"));
11
10
  var _classnames = _interopRequireDefault(require("classnames"));
12
11
  var _dayjs = _interopRequireDefault(require("dayjs"));
12
+ require("dayjs/locale/zh-cn");
13
+ require("dayjs/locale/en-gb");
13
14
  var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
14
- var SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
15
+ var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
15
16
  var _lang = require("../../lang");
16
17
  var _editorUtils = require("../../utils/editor-utils");
17
18
  var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
18
19
  require("@seafile/seafile-calendar/assets/index.css");
19
20
  require("./index.css");
21
+ let now = (0, _dayjs.default)();
20
22
  class Small extends _react.default.PureComponent {
21
23
  constructor(props) {
22
24
  super(props);
23
25
  this.handleDateChange = date => {
24
- let {
25
- dateFormat,
26
- showHourAndMinute
27
- } = this.props;
28
- let newValue = (0, _dayjs.default)(date);
29
- if (showHourAndMinute) {
30
- const {
31
- datePickerValue
32
- } = this.state;
33
- const HM = datePickerValue.format('HH:mm');
34
- const format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
35
- const newDate = (0, _dayjs.default)(date).format(format) + ' ' + HM;
36
- newValue = (0, _dayjs.default)(newDate);
26
+ if (this.showTime) {
27
+ const HM = (0, _dayjs.default)(this.state.time).format('HH:mm');
28
+ // In iOS, the time standard is ISO-8601, new Date("YYYY-MM-DD") will be wrong, new Date("YYYY/MM/DD") will be OK.
29
+ const newTime = (0, _dayjs.default)(date).format('YYYY/MM/DD') + ' ' + HM;
30
+ this.setState({
31
+ time: new Date(newTime)
32
+ });
33
+ } else {
34
+ this.setState({
35
+ time: date
36
+ });
37
37
  }
38
- this.setState({
39
- datePickerValue: (0, _dayjs.default)(date)
40
- });
41
- this.props.onValueChanged(newValue.format(dateFormat));
42
38
  };
43
39
  this.handleTimeChange = time => {
44
- const {
45
- datePickerValue
46
- } = this.state;
47
- const {
48
- dateFormat
49
- } = this.props;
50
- const format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
51
- const YMD = datePickerValue.format(format);
52
- const newDate = YMD + ' ' + (0, _dayjs.default)(time).format('HH:mm');
53
- const newValue = (0, _dayjs.default)(newDate);
40
+ // In iOS, the time standard is ISO-8601, new Date("YYYY-MM-DD") will be wrong, new Date("YYYY/MM/DD") will be OK.
41
+ const YMD = (0, _dayjs.default)(this.state.time).format('YYYY/MM/DD');
42
+ const newTime = YMD + ' ' + (0, _dayjs.default)(time).format('HH:mm');
54
43
  this.setState({
55
- datePickerValue: newValue
44
+ time: new Date(newTime)
56
45
  });
57
- this.props.onValueChanged(datePickerValue.format(dateFormat));
46
+ };
47
+ this.onSave = () => {
48
+ const value = (0, _dayjs.default)(this.state.time).format(this.format);
49
+ this.props.onCommit(value);
50
+ this.props.onClose();
58
51
  };
59
52
  this.deleteDate = () => {
60
- this.props.onValueChanged('');
53
+ this.props.onCommit(null);
61
54
  this.props.onClose();
62
55
  };
56
+ this.getCalendarContainer = () => {
57
+ return this.calendarContainerRef.current;
58
+ };
63
59
  this.onChange = value => {
64
60
  if (!value) return;
65
- let {
66
- dateFormat
67
- } = this.props;
61
+ const newTime = (0, _dayjs.default)(value.format(this.format));
68
62
  this.setState({
69
- datePickerValue: value
63
+ time: newTime
70
64
  });
71
- this.props.onValueChanged(value.format(dateFormat));
72
- };
73
- this.getCalendarContainer = () => {
74
- return this.calendarContainerRef.current;
75
65
  };
76
- this.getCalender = () => {
77
- let {
78
- dateFormat,
66
+ this.renderCalender = () => {
67
+ const {
68
+ time,
79
69
  lang,
80
70
  className,
81
71
  firstDayOfWeek
82
72
  } = this.props;
83
- let defaultValue = (0, _dayjs.default)().clone();
84
- return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
73
+ const calendar = /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
85
74
  className: (0, _classnames.default)('dtable-rc-calendar', className),
86
75
  locale: (0, _editorUtils.initDateEditorLanguage)(lang),
87
- format: dateFormat,
88
- defaultValue: defaultValue,
89
76
  dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
77
+ format: this.format,
78
+ defaultValue: this.defaultCalendarValue,
90
79
  showDateInput: false,
91
80
  focusablePanel: false,
92
81
  showToday: false,
@@ -97,38 +86,28 @@ class Small extends _react.default.PureComponent {
97
86
  },
98
87
  firstDayOfWeek: firstDayOfWeek
99
88
  });
100
- };
101
- this.renderDataPicker = () => {
102
- let {
103
- dateFormat
104
- } = this.props;
105
- let {
106
- datePickerValue
107
- } = this.state;
108
- let calendar = this.getCalender();
109
- return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
89
+ return /*#__PURE__*/_react.default.createElement(_Picker.default, {
90
+ calendar: calendar,
91
+ value: time,
92
+ onChange: this.onChange,
93
+ getCalendarContainer: this.getCalendarContainer,
110
94
  open: true,
111
95
  style: {
112
96
  width: '100%'
113
- },
114
- calendar: calendar,
115
- value: datePickerValue,
116
- getCalendarContainer: this.getCalendarContainer,
117
- onChange: this.onChange
97
+ }
118
98
  }, _ref => {
119
99
  let {
120
- value
100
+ time
121
101
  } = _ref;
122
- value = value && value.format(dateFormat);
123
102
  return /*#__PURE__*/_react.default.createElement("div", {
124
103
  tabIndex: "0",
125
104
  onFocus: this.onReadOnlyFocus
126
105
  }, /*#__PURE__*/_react.default.createElement("input", {
127
- placeholder: (0, _lang.getLocale)('Please_select'),
106
+ placeholder: (0, _lang.getLocale)('please_select'),
128
107
  readOnly: true,
129
108
  tabIndex: "-1",
130
- className: "form-control",
131
- value: value || ''
109
+ className: "ant-calendar-picker-input ant-input form-control",
110
+ value: time ? (0, _dayjs.default)(time).format(this.getFormat()) : ''
132
111
  }), /*#__PURE__*/_react.default.createElement("div", {
133
112
  ref: this.calendarContainerRef,
134
113
  style: {
@@ -137,28 +116,51 @@ class Small extends _react.default.PureComponent {
137
116
  }));
138
117
  });
139
118
  };
119
+ const {
120
+ dateFormat,
121
+ showHourAndMinute
122
+ } = props;
140
123
  this.state = {
141
- datePickerValue: props.value ? (0, _dayjs.default)(props.value) : (0, _dayjs.default)().clone()
124
+ time: null
142
125
  };
143
126
  this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
127
+ this.leftFormat = dateFormat ? dateFormat.indexOf(' ') === -1 ? dateFormat : dateFormat.slice(0, dateFormat.indexOf(' ')) : 'YYYY-MM-DD';
128
+ this.rightFormat = 'HH:mm';
129
+ this.showTime = showHourAndMinute;
130
+ this.format = showHourAndMinute ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
131
+ }
132
+ componentDidMount() {
133
+ let {
134
+ value,
135
+ lang
136
+ } = this.props;
137
+ const iszhcn = lang === 'zh-cn';
138
+ if (iszhcn) {
139
+ now = now.locale('zh-cn');
140
+ } else {
141
+ now = now.locale('en-gb');
142
+ }
143
+ if (!value) {
144
+ value = new Date(Date.now());
145
+ }
146
+ this.defaultCalendarValue = now.clone();
147
+ this.setState({
148
+ time: iszhcn ? (0, _dayjs.default)(value).locale('zh-cn') : (0, _dayjs.default)(value).locale('en-gb')
149
+ });
144
150
  }
145
151
  render() {
146
152
  const {
147
153
  lang,
148
- column,
149
- dateFormat,
150
- showHourAndMinute
154
+ column
151
155
  } = this.props;
152
- const leftFormat = dateFormat.split(' ')[0];
153
- const rightFormat = dateFormat.split(' ')[1];
154
156
  const {
155
- datePickerValue
157
+ time
156
158
  } = this.state;
157
159
  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
158
160
  className: "mobile-dtable-ui-date-editor",
159
161
  onClose: this.props.onClose,
160
162
  onLeftClick: this.props.onClose,
161
- onRightClick: this.props.onClose
163
+ onRightClick: this.onSave
162
164
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement("span", {
163
165
  style: {
164
166
  color: '#f09f3f'
@@ -166,26 +168,36 @@ class Small extends _react.default.PureComponent {
166
168
  }, (0, _lang.getLocale)('Done')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
167
169
  className: "mobile-dtable-ui-date-editor-input"
168
170
  }, /*#__PURE__*/_react.default.createElement("div", {
169
- className: "date-input"
171
+ className: "date-input",
172
+ style: this.showTime ? {
173
+ width: '50%'
174
+ } : {
175
+ width: '100%'
176
+ }
170
177
  }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
171
178
  mode: "date",
179
+ minDate: _editorUtils.minDate,
180
+ maxDate: _editorUtils.maxDate,
172
181
  locale: (0, _editorUtils.initDateEditorLanguage)(lang),
173
- value: this.state.value,
182
+ value: time,
174
183
  onChange: this.handleDateChange
175
184
  }, /*#__PURE__*/_react.default.createElement("div", {
176
185
  className: "date-input-day"
177
- }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
178
- className: "date-input"
186
+ }, (0, _dayjs.default)(time).format(this.leftFormat)))), this.showTime && /*#__PURE__*/_react.default.createElement("div", {
187
+ className: "date-input",
188
+ style: {
189
+ width: '50%'
190
+ }
179
191
  }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
180
192
  mode: "time",
181
193
  locale: (0, _editorUtils.initDateEditorLanguage)(lang),
182
- value: this.state.value,
194
+ value: time,
183
195
  onChange: this.handleTimeChange
184
196
  }, /*#__PURE__*/_react.default.createElement("div", {
185
197
  className: "date-input-day"
186
- }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
198
+ }, (0, _dayjs.default)(time).format(this.rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
187
199
  className: "dtable-ui mobile-dtable-ui-date-editor-picker"
188
- }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
200
+ }, this.renderCalender()), /*#__PURE__*/_react.default.createElement("div", {
189
201
  className: "mobile-dtable-ui-date-editor-clear"
190
202
  }, /*#__PURE__*/_react.default.createElement("div", {
191
203
  onClick: this.deleteDate,
package/lib/RowExpandEditor/RowExpandDateEditor/sm.js CHANGED
@@ -55,7 +55,6 @@ class Small extends _react.default.Component {
55
55
  render() {
56
56
  let {
57
57
  column,
58
- isInModal,
59
58
  lang
60
59
  } = this.props;
61
60
  let {
@@ -72,7 +71,6 @@ class Small extends _react.default.Component {
72
71
  },
73
72
  onClick: this.toggleEditor
74
73
  }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
75
- isInModal: isInModal,
76
74
  value: value,
77
75
  lang: lang,
78
76
  column: column,
package/lib/utils/editor-utils.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
6
+ exports.minDate = exports.maxDate = exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
7
7
  const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
8
8
  const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
9
9
  const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
@@ -66,4 +66,8 @@ exports.getSelectOptionItem = getSelectOptionItem;
66
66
  const getTrimmedString = value => {
67
67
  return typeof value === 'string' ? value.trim() : '';
68
68
  };
69
- exports.getTrimmedString = getTrimmedString;
69
+
70
+ // min date and max date for mobile date picker
71
+ exports.getTrimmedString = getTrimmedString;
72
+ const minDate = exports.minDate = new Date('1900/01/01');
73
+ const maxDate = exports.maxDate = new Date('2100/12/31');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dtable-ui-component",
3
- "version": "6.0.26beta2",
3
+ "version": "6.0.26beta4",
4
4
  "main": "./lib/index.js",
5
5
  "dependencies": {
6
6
  "@seafile/react-image-lightbox": "4.0.2",