Skip to content

Commit 0b12f1c

Browse files
committed
chore(docs): Update readme on inheritance
1 parent 6ce349e commit 0b12f1c

File tree

1 file changed

+41
-9
lines changed

1 file changed

+41
-9
lines changed

README.md

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Abstraction over common JavaScript date management libraries.
1212
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
1313

1414
The project exposes an abstraction interface over [luxon](https://moment.github.io/luxon/), [date-fns v2](https://github.com/date-fns/date-fns), [dayjs](https://github.com/iamkun/dayjs) and [moment](https://momentjs.com/).
15-
It allows you to build any UI date or time components, while utilizing the same date management library in use within your user's project.
15+
It allows you to build any UI date or time components while utilizing the same date management library in use within your user's project.
1616

1717
It simplifies timezone management, allows your code to return the exact same type that your user expects and works with specific calendar systems (e.g. [Jalali calendar](https://en.wikipedia.org/wiki/Jalali_calendar))
1818

@@ -24,7 +24,7 @@ It simplifies timezone management, allows your code to return the exact same typ
2424
| @date-io/moment | [![npm download](https://img.shields.io/npm/dm/@date-io/moment.svg)](https://www.npmjs.org/package/@date-io/moment) |
2525
| @date-io/luxon | [![npm download](https://img.shields.io/npm/dm/@date-io/luxon.svg)](https://www.npmjs.org/package/@date-io/luxon) |
2626
| @date-io/dayjs | [![npm download](https://img.shields.io/npm/dm/@date-io/dayjs.svg)](https://www.npmjs.org/package/@date-io/dayjs) |
27-
| @date-io/js-joda | [![npm download](https://img.shields.io/npm/dm/@date-io/js-joda.svg)](https://www.npmjs.org/package/@date-io/js-joda) |
27+
| @date-io/js-joda | [![npm download](https://img.shields.io/npm/dm/@date-io/js-joda.svg)](https://www.npmjs.org/package/@date-io/js-joda) |
2828
| @date-io/date-fns-jalali | [![npm download](https://img.shields.io/npm/dm/@date-io/date-fns-jalali.svg)](https://www.npmjs.org/package/@date-io/date-fns-jalali) |
2929
| @date-io/jalaali | [![npm download](https://img.shields.io/npm/dm/@date-io/jalaali.svg)](https://www.npmjs.org/package/@date-io/jalaali) |
3030
| @date-io/hijri | [![npm download](https://img.shields.io/npm/dm/@date-io/hijri.svg)](https://www.npmjs.org/package/@date-io/hijri) |
@@ -56,6 +56,7 @@ Localized output will of course vary based on the locale and date library used.
5656
`moment` with the `en-US` locale.
5757

5858
<!--inline-interface-start-->
59+
5960
```tsx
6061
export interface DateIOFormats<TLibFormatToken = string> {
6162
/** Localized full date @example "Jan 1, 2019" */
@@ -221,15 +222,16 @@ export interface IUtils<TDate> {
221222
getMeridiemText(ampm: "am" | "pm"): string;
222223
}
223224
```
225+
224226
<!--inline-interface-end-->
225227

226228
### For library authors
227229

228-
If you are a library author that exposes date/time management utils or controls you may want to use date-io to interop with the most popular libraries. Here are some instructions of how to use date-fns as an adapter.
230+
If you are a library author that exposes date/time management utils or controls you may want to use date-io to interop with the most popular libraries. Here are some instructions on how to use date-fns as an adapter.
229231

230232
#### 1. Install the bindings
231233

232-
First of all it is required to provide the adapters for your users. We do not recommend to install the date-io directly by the end users, cause it may be easy to mismatch the version. The better way will be to reexport them.
234+
First of all, it is required to provide the adapters for your users. We do not recommend installing the date-io directly by the end users, cause it may be easy to mismatch the version. The better way will be to reexport them.
233235

234236
Firstly install all the adapters you want to support and lock the version.
235237

@@ -254,18 +256,46 @@ Firstly install all the adapters you want to support and lock the version.
254256
export { default } from "@date-io/date-fns";
255257
```
256258

257-
You can also manually extend the adapter if you need to. Create a custom interface:
259+
### Overriding behavior
260+
261+
It is possible to change or extend the behavior of any adapter by simply inheriting and overriding the base class of utils while saving the same interface.
262+
263+
Let's say you want to override `getYear` to always return 2007 and `getWeekdays` to contain only 2 weekends (let's admit that this is what we all desire) you can do the following:
264+
265+
```ts
266+
class CustomDateTime extends DayjsUtils implements IUtils<Dayjs> {
267+
getWeekdays = () => {
268+
const start = this.dayjs().startOf("week");
269+
return [0, 1].map((diff) => this.formatByString(start.add(diff, "day"), "dd"));
270+
};
271+
}
272+
```
273+
274+
Note: that you will need to do this with every adapter you want to support to be in sync.
275+
276+
### Extending behavior
277+
278+
It is possible also to add custom functionality to the adapter, in case the author of date-io doesn't want to add it. To do this create **your custom interface that extends IUtils** and inherit your adapters both from the base adapter and your custom interface.
258279

259280
```ts
260281
// your-awesome-lib/adapters/CustomAdapter
261282
import { IUtils } from "@date-io/core/IUtils";
283+
import DateIODateFnsAdapter from "@date-io/date-fns";
262284

263-
interface CustomUtils<TDate> extends IUtils<TDate> {
285+
interface CustomUtils<TDate> extends IUtils<TDate> {
264286
getDayOfYear(day: TDate): number;
265287
}
288+
289+
interface CustomDateFnsUtils extends DateIODateFnsAdapter implements CustomUtils<Date> {
290+
getDayOfYear(day: Date): number {
291+
return getDayOfYear(day);
292+
}
293+
}
266294
```
267295

268-
And extend date-io classes implementing your custom interface:
296+
### Build system
297+
298+
In some build systems (hello babel) it may be impossible to extend the methods because they are defined as class properties. While it should be standardized already there are still some issues with it. In this case you can use the following workaround:
269299

270300
```ts
271301
// you-awesome-lib/adapters/date-fns
@@ -294,13 +324,15 @@ export const createMyAdapter(options) {
294324

295325
#### 3. Use it for date-time management
296326

297-
Register it using your library context. It may be react context, dependency injection container or any other tool that allow user to register the used library **1 time**.
327+
Register it using your library context. It may be react context, dependency injection container or any other tool that allows the user to register the used library **1 time**.
298328

299329
```tsx
300330
// react example
301331
import { createMyAdapter } from "your-awesome-lib/adapters/date-fns";
302332

303-
<DateLibProvider adapter={createMyAdapter({ locale: "fr" })}>{/* ... */}</DateLibProvider>;
333+
<DateLibProvider adapter={createMyAdapter({ locale: "fr" })}>
334+
{/* ... */}
335+
</DateLibProvider>;
304336
```
305337

306338
And use the interface of date-io (or your custom interface).

0 commit comments

Comments
 (0)