giorgosart / react-easy-edit

Inline editing library for React
https://giorgosart.gitbook.io/react-easy-edit/
MIT License
249 stars 45 forks source link

Add typescript types #197

Open Leiloukou opened 10 months ago

Leiloukou commented 10 months ago

I'm always frustrated when I don't have Typescript types. Everyone uses TS, and this library should too.

Could you please add Typescript? It's not even that hard, and it can be done slowly and incrementally.

I believe this is the MOST important thing to do with this library at the moment, and I am willing to help too.

giorgosart commented 10 months ago

Hi @Leiloukou thanks for creating this ticket!

I don't really know how to do that so feel free to create a PR with the changes you need and then I'll follow your lead?

Leiloukou commented 10 months ago

I am not familiar with this library and have never even used it before, but I would be happy to help in the near future. I am currently working on a personal project as well as school, but I will try to help as soon as I can. I will probably be free in December, as I will have less school. See you then!

Leiloukou commented 9 months ago

Update: I'm a little busy, but I still want to help. I might be able to in the near future, sorry 😞

jayanti-prajapati commented 1 month ago

@Leiloukou You can create a custom type declaration file for now to use with typescript.

  1. Create a new file named react-easy-edit.d.ts in your src directory (or in a types directory if you have one).
  2. Add the following declaration inside the react-easy-edit.d.ts file:

    
    declare module 'react-easy-edit' {
    import * as React from 'react';
    
    export interface EasyEditProps {
    type: 'text' | 'textarea' | 'number' | 'date' | 'time' | 'select';
    onSave: (value: any) => void;
    onCancel?: () => void;
    value: any;
    saveButtonLabel?: string;
    cancelButtonLabel?: string;
    attributes?: object;
    instructions?: string;
    placeholder?: string;
    validationMessage?: string;
    allowEdit?: boolean;
    viewAttributes?: object;
    editAttributes?: object;
    options?: Array<{ label: string, value: any }>;
    hideIcons?: boolean;
    buttonsPosition?: 'before' | 'after';
    saveButtonStyle?: object;
    cancelButtonStyle?: object;
    saveButtonClassName?: string;
    cancelButtonClassName?: string;
    validation?: (value: any) => boolean;
    }
    
    const EasyEdit: React.FC<EasyEditProps>;
    
    export default EasyEdit;
    export const Types: {
    TEXT: 'text';
    TEXTAREA: 'textarea';
    NUMBER: 'number';
    DATE: 'date';
    TIME: 'time';
    SELECT: 'select';
    };
    }
Leiloukou commented 1 month ago

@Leiloukou You can create a custom type declaration file for now to use with typescript.

Thank you :heart: