Skip to content

Commit

Permalink
feat: removed date-fns dependency. DateEditor now uses fecha
Browse files Browse the repository at this point in the history
  • Loading branch information
ngduc committed Apr 9, 2020
1 parent 225c041 commit 789567e
Show file tree
Hide file tree
Showing 12 changed files with 919 additions and 35 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
## [0.11.1] - 2020-04-08
## [0.11.5] - 2020-04-08

### Changed
- BREAKING: removed date-fns dependency. DateEditor now uses taylorhakes/fecha code: Date format string changed to 'MM/DD/YYYY'.

- merged PRs #141 #168
- upgraded tabulator to 4.6.1
- use TODO.md - https://marketplace.visualstudio.com/items?itemName=coddx.coddx-alpha
Expand Down
4 changes: 2 additions & 2 deletions lib/React15Tabulator.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ var default_1 = /** @class */ (function (_super) {
var that = this;
var _a = this.props, columns = _a.columns, data = _a.data, options = _a.options;
var propOptions = ConfigUtils_1.propsToOptions(this.props);
new Tabulator(domEle, __assign({ columns: columns }, propOptions, { layout: 'fitColumns', // fit columns to width of table (optional)
new Tabulator(domEle, __assign(__assign(__assign(__assign({ columns: columns }, propOptions), { layout: 'fitColumns', // fit columns to width of table (optional)
tableBuilding: function () {
that.table = this; // keep table instance
that.props.tableBuilding ? that.props.tableBuilding() : '';
},
dataLoaded: function () {
that.props.dataLoaded ? that.props.dataLoaded() : '';
} }, options, { data: data }));
} }), options), { data: data }));
// await table.setData(data);
// console.log('- componentDidMount');
if (data && data.length > 0) {
Expand Down
13 changes: 10 additions & 3 deletions lib/ReactTabulator.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ var __assign = (this && this.__assign) || function () {
};
return __assign.apply(this, arguments);
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
exports.__esModule = true;
var React = require("react");
var ReactDOM = require("react-dom");
Expand Down Expand Up @@ -57,14 +64,14 @@ var default_1 = /** @class */ (function (_super) {
var that = this;
var _a = this.props, columns = _a.columns, data = _a.data, options = _a.options;
var propOptions = ConfigUtils_1.propsToOptions(this.props);
new Tabulator(domEle, __assign({ columns: columns }, propOptions, { layout: 'fitColumns', // fit columns to width of table (optional)
new Tabulator(domEle, __assign(__assign(__assign(__assign({ columns: columns }, propOptions), { layout: 'fitColumns', // fit columns to width of table (optional)
tableBuilding: function () {
that.table = this; // keep table instance
that.props.tableBuilding ? that.props.tableBuilding() : '';
},
dataLoaded: function () {
that.props.dataLoaded ? that.props.dataLoaded() : '';
} }, options, { // props.options are passed to Tabulator's options.
} }), options), { // props.options are passed to Tabulator's options.
data: data }));
// await table.setData(data);
// console.log('- componentDidMount');
Expand All @@ -91,7 +98,7 @@ var default_1 = /** @class */ (function (_super) {
// this triggers componentDidUpdate
if (!Utils_1.isSameArray(state.data, props.data)) {
// console.log('data changed!');
return __assign({}, state, { data: props.data.slice() });
return __assign(__assign({}, state), { data: __spreadArrays(props.data) });
}
}
return {};
Expand Down
6 changes: 3 additions & 3 deletions lib/ReactTabulatorExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ var __extends = (this && this.__extends) || (function () {
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var _a;
exports.__esModule = true;
var React = require("react");
var ReactTabulator_1 = require("./ReactTabulator");
var DateEditor_1 = require("./editors/DateEditor");
Expand All @@ -28,7 +28,7 @@ var columns = [
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress' },
{ title: 'Favourite Color', field: 'color' },
{ title: 'Date Of Birth', field: 'dob' },
{ title: 'Date Of Birth', field: 'dob', sorter: 'date' },
{ title: 'Rating', field: 'rating', hozAlign: 'center', formatter: 'star' },
{ title: 'Passed?', field: 'passed', hozAlign: 'center', formatter: 'tickCross' },
{ title: 'Custom', field: 'custom', hozAlign: 'center', formatter: Utils_1.reactFormatter(React.createElement(SimpleButton, null)) },
Expand Down Expand Up @@ -65,7 +65,7 @@ var editableColumns = [
headerFilter: 'select',
headerFilterParams: { values: colorOptions }
},
{ title: 'Date Of Birth', field: 'dob', editor: DateEditor_1["default"], editorParams: { format: 'MM/dd/yyyy' } },
{ title: 'Date Of Birth', field: 'dob', editor: DateEditor_1["default"], editorParams: { format: 'MM/DD/YYYY' } },
{
title: 'Pets',
field: 'pets',
Expand Down
43 changes: 34 additions & 9 deletions lib/editors/DateEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ var __extends = (this && this.__extends) || (function () {
exports.__esModule = true;
var React = require("react");
var react_dom_1 = require("react-dom");
var date_fns_1 = require("date-fns");
var DEFAULT_DATE_INPUT_FORMAT = 'yyyy-MM-dd';
// import { parse, format } from 'date-fns';
var DateEditorUtils_1 = require("./DateEditorUtils");
var DEFAULT_DATE_INPUT_FORMAT = 'YYYY-MM-DD'; // date-fns 'yyyy-MM-dd';
var inputCss = {
width: '100%',
height: '100%',
Expand All @@ -29,14 +30,28 @@ var Editor = /** @class */ (function (_super) {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { value: '' };
_this.ref = null;
_this.format = _this.props.editorParams.format || 'MM/dd/yyyy'; // TODO: detect from user locale & set default.
// date-fns format 'MM/dd/yyyy'
_this.format = _this.props.editorParams.format || 'MM/DD/YYYY'; // TODO: detect from user locale & set default.
_this.setValueOnSuccess = function (value) {
if (value === void 0) { value = _this.state.value; }
var success = _this.props.success;
if (!value) {
// user deleted value in the cell => set to ''
// const result = format(new Date(), this.format);
success('');
return;
}
var result = value;
if (result.indexOf('-') > 0) {
// value is "yyyy-MM-dd" => parse it
result = date_fns_1.format(value, _this.format);
try {
if (result.indexOf('-') > 0) {
// value is "yyyy-MM-dd" => parse it
var valueDate = DateEditorUtils_1.parse(value, 'YYYY-MM-DD');
result = DateEditorUtils_1.format(valueDate, _this.format);
}
}
catch (err) {
console.error('ERROR', err);
result = DateEditorUtils_1.format(new Date(), DEFAULT_DATE_INPUT_FORMAT);
}
success(result);
};
Expand All @@ -47,7 +62,10 @@ var Editor = /** @class */ (function (_super) {
_this.onKeyPress = function (ev) {
var cancel = _this.props.cancel;
if (ev.keyCode === 13) {
_this.setValueOnSuccess();
// Enter pressed. If value is '' => set to today:
var today = DateEditorUtils_1.format(new Date(), DEFAULT_DATE_INPUT_FORMAT);
var value = _this.state.value || today;
_this.setValueOnSuccess(value);
}
else if (ev.keyCode === 27) {
cancel();
Expand All @@ -69,8 +87,15 @@ var Editor = /** @class */ (function (_super) {
Editor.prototype.render = function () {
var _this = this;
var cell = this.props.cell;
var valueDt = date_fns_1.parse(cell.getValue(), this.format, new Date(), { awareOfUnicodeTokens: true });
var value = date_fns_1.format(valueDt, DEFAULT_DATE_INPUT_FORMAT);
var valueDt = DateEditorUtils_1.parse(cell.getValue(), this.format);
// console.log('this.format', this.format);
// console.log('cell.getValue()', cell.getValue());
// console.log('valueDt', valueDt);
var value = DateEditorUtils_1.format(new Date(), DEFAULT_DATE_INPUT_FORMAT);
try {
value = DateEditorUtils_1.format(valueDt, DEFAULT_DATE_INPUT_FORMAT);
}
catch (err) { }
return (React.createElement("input", { type: "date", ref: function (r) { return (_this.ref = r); }, defaultValue: value,
// value={value}
onBlur: this.onBlur, onChange: this.onChange, onKeyUp: this.onKeyPress, style: inputCss }));
Expand Down
52 changes: 52 additions & 0 deletions lib/editors/DateEditorUtils.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
export declare type I18nSettings = {
amPm: [string, string];
dayNames: Days;
dayNamesShort: Days;
monthNames: Months;
monthNamesShort: Months;
DoFn(dayOfMonth: number): string;
};
export declare type I18nSettingsOptional = Partial<I18nSettings>;
export declare type Days = [string, string, string, string, string, string, string];
export declare type Months = [string, string, string, string, string, string, string, string, string, string, string, string];
export declare function assign<A>(a: A): A;
export declare function assign<A, B>(a: A, b: B): A & B;
export declare function assign<A, B, C>(a: A, b: B, c: C): A & B & C;
export declare function assign<A, B, C, D>(a: A, b: B, c: C, d: D): A & B & C & D;
declare const defaultI18n: I18nSettings;
declare const setGlobalDateI18n: (i18n: Partial<I18nSettings>) => I18nSettings;
declare const setGlobalDateMasks: (masks: {
[key: string]: string;
}) => {
[key: string]: string;
};
/***
* Format a date
* @method format
* @param {Date|number} dateObj
* @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'
* @returns {string} Formatted date string
*/
declare const format: (dateObj: Date, mask?: string, i18n?: Partial<I18nSettings>) => string;
/**
* Parse a date string into a Javascript Date object /
* @method parse
* @param {string} dateStr Date string
* @param {string} format Date parse format
* @param {i18n} I18nSettingsOptional Full or subset of I18N settings
* @returns {Date|null} Returns Date object. Returns null what date string is invalid or doesn't match format
*/
declare function parse(dateStr: string, format: string, i18n?: I18nSettingsOptional): Date | null;
declare const _default: {
format: (dateObj: Date, mask?: string, i18n?: Partial<I18nSettings>) => string;
parse: typeof parse;
defaultI18n: I18nSettings;
setGlobalDateI18n: (i18n: Partial<I18nSettings>) => I18nSettings;
setGlobalDateMasks: (masks: {
[key: string]: string;
}) => {
[key: string]: string;
};
};
export default _default;
export { format, parse, defaultI18n, setGlobalDateI18n, setGlobalDateMasks };
Loading

0 comments on commit 789567e

Please sign in to comment.