MR-Mostafa

import * as React from 'react';

type Rainbow = "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "violet";

type ButtonProps<C extends React.ElementType> = {
  as?: C;
  color?: Rainbow | "black";
};

type Props <C extends React.ElementType> = 

MR-Mostafa

/**
 * قبل از تغییر
*/
type Props <C extends React.ElementType> = React.PropsWithChildren<ButtonProps<C>> & React.ComponentPropsWithoutRef<C>;

/**
 * بعد از تغییر
*/
type Props <C extends React.ElementType> = 
React.PropsWithChildren<ButtonProps<C>> &   

MR-Mostafa

import * as React from 'react';

type Rainbow = "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "violet";


/**
 * از تایپ پایین، این دو مورد حذف شدند:
 * children: React.ReactNode
 * React.ComponentPropsWithoutRef<C>
*/

MR-Mostafa

import * as React from 'react';

type Rainbow = "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "violet";

type ButtonProps<C extends React.ElementType> = {
  as?: C;
  color?: Rainbow | "black"; // 👈 look here
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef<C>;

MR-Mostafa

import * as React from 'react';

type ButtonProps<C extends React.ElementType> = {
  as?: C;
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef<C>;

//                                                     👇 look here
export const Button = <C extends React.ElementType = 'button'>({ 
  as,

MR-Mostafa

import * as React from 'react';

type ButtonProps<C extends React.ElementType> = {
  as?: C;
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef<C>; // 👈 look here

export const Button = <C extends React.ElementType>({
  as,
  children,

MR-Mostafa

import * as React from 'react';

/**
 * یک جنریک تایپ است که بیانگر React.ElementType تایپ
 *  1. می‌باشد HTML تمامی تگ‌های ولید و معتبر
 *  2. می‌تواند یک کامپوننت ری‌اکتی باشد
 */
type ButtonProps<C extends React.ElementType> = {
  as?: C;
  children: React.ReactNode;

MR-Mostafa

import * as React from 'react';

const Button = ({as, children, ...otherProps}) => {
  /*
   * نمی‌توانیم به عنوان یک کامپوننت به صورت زیر استفاده کنیم as توجه داشته باشید که ما از پراپس
   * <as> ... </as>
   * به این دلیل که در ری‌اکت حتما نیاز هست که نام کامپوننت با حرف بزرگ شروع شود
   * @see https://t.ly/peF5w
  */

MR-Mostafa

// loginValidator.js
exports.loginValidator = {
 	email: {
		type: 'email',
		mode: 'precise',
		normalize: 'true',
  },
	password: {
		type: 'string',
		convert: true,

MR-Mostafa

People

:bowtie:	😄 :smile:	😆 :laughing:
😊 :blush:	😃 :smiley:	☺️ :relaxed:
😏 :smirk:	😍 :heart_eyes:	😘 :kissing_heart:
😚 :kissing_closed_eyes:	😳 :flushed:	😌 :relieved:
😆 :satisfied:	😁 :grin:	😉 :wink:
😜 :stuck_out_tongue_winking_eye:	😝 :stuck_out_tongue_closed_eyes:	😀 :grinning:
😗 :kissing:	😙 :kissing_smiling_eyes:	😛 :stuck_out_tongue: