tsfy all features example (#1852)

* chores: tsfy all features examples

* chores: minor polish

* chores: change class component to functional component

* chores: add redirect, fix propTypes issue

* chores: polish DropdownEditor in demo

* chores: address PR comments

* chores: tweak url; remove proptypes

* chores: address PR comment

Author: qili26

examples/demos/components/Editors/DropDownEditor.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { Column, Editor } from '../../../../src';
+
+interface Option {
+  id: string;
+  title: string;
+  value: string;
+  text: string;
+}
+
+interface DropDownEditorProps<TRow> {
+  column: Column<TRow>;
+  options: Array<Option | string>;
+  value?: string;
+  onBlur(): void;
+}
+
+type DropDownEditorHandle = Pick<Editor<{[key: string]: string | undefined}>, 'getInputNode' | 'getValue'>;
+
+function DropDownEditorWithRef<TRow>({ column, value, onBlur, options }: DropDownEditorProps<TRow>, ref: React.Ref<DropDownEditorHandle>): JSX.Element {
+  const selectRef = useRef<HTMLSelectElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    getInputNode() {
+      return selectRef.current;
+    },
+    getValue() {
+      return {
+        [column.key]: selectRef.current?.value
+      };
+    }
+  }));
+
+  return (
+    <select
+      ref={selectRef}
+      className="rdg-select-editor"
+      defaultValue={value}
+      onBlur={onBlur}
+      size={options.length}
+      style={{ maxHeight: 200, height: 'auto', overflowY: 'auto' }}
+    >
+      {options.map(name => typeof name === 'string' ? (
+        <option
+          key={name}
+          value={name}
+          onClick={onBlur}
+        >
+          {name}
+        </option>
+      ) : (
+        <option
+          key={name.id}
+          value={name.value}
+          title={name.title}
+          onClick={onBlur}
+        >
+          {name.text || name.value}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export default forwardRef(
+  DropDownEditorWithRef as React.RefForwardingComponent<DropDownEditorHandle, DropDownEditorProps<{ [key: string]: unknown }>>
+) as <R>(props: DropDownEditorProps<R> & { ref?: React.Ref<DropDownEditorHandle> }) => JSX.Element;

examples/demos/components/Formatters/ImageFormatter.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './rdg-image.less';
+
+interface Props {
+  /** image url, used as background-image */
+  value: string;
+}
+
+export default function ImageFormatter({ value }: Props) {
+  return (
+    <div className="rdg-image-cell-wrapper">
+      <div className="rdg-image-cell" style={{ backgroundImage: `url(${value})` }} />
+    </div>
+  );
+}

examples/demos/components/Formatters/rdg-image.less

@@ -0,0 +1,14 @@
+.rdg-image-cell {
+  background: #efefef;
+  background-size: 100%;
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  vertical-align: middle;
+  background-position: center;
+}
+
+.rdg-image-cell-wrapper {
+  display: flex;
+  justify-content: space-around;
+}

packages/react-data-grid-addons/src/toolbars/Toolbar.tsx renamed to examples/demos/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+import './rdg-toolbar.less';
 
 interface Props {
   onAddRow?(arg: { newRowIndex: number }): void;
@@ -7,16 +8,15 @@ interface Props {
   numberOfRows: number;
   addRowButtonText?: string;
   filterRowsButtonText?: string;
-  children: React.ReactNode;
 }
 
-export default function Toolbar(props: Props) {
+export default function Toolbar(props: PropsWithChildren<Props>) {
   function onAddRow() {
-    props.onAddRow!({ newRowIndex: props.numberOfRows });
+    props.onAddRow?.({ newRowIndex: props.numberOfRows });
   }
 
   return (
-    <div className="react-grid-Toolbar">
+    <div className="rdg-toolbar">
       <div className="tools">
         {props.onAddRow && (
           <button type="button" className="btn" onClick={onAddRow}>

packages/react-data-grid-addons/style/rdg-toolbar.less renamed to examples/demos/components/Toolbar/rdg-toolbar.less

@@ -1,4 +1,4 @@
-.react-grid-Toolbar {
+.rdg-toolbar {
   background-color: #ffffff;
   border-color: #e7eaec;
   border-image: none;
@@ -7,9 +7,9 @@
   color: inherit;
   margin-bottom: 0;
   padding: 14px 15px 7px;
-  height: 48px;
 }
-.react-grid-Toolbar .btn {
+
+.rdg-toolbar .btn {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
@@ -27,20 +27,24 @@
   background: white;
   border: 1px solid #e7eaec;
 }
-.react-grid-Toolbar .btn:hover {
+
+.rdg-toolbar .btn:hover {
   color: inherit;
   border: 1px solid #d2d2d2;
 }
-.react-grid-Toolbar .grouped-col-btn {
+
+.rdg-toolbar .grouped-col-btn {
   background-color: #428bca;
   color: white;
   border-color: #2b669a;
 }
-.react-grid-Toolbar .grouped-col-btn:hover {
+
+.rdg-toolbar .grouped-col-btn:hover {
   color: white;
   border-color: #2b669a;
 }
-.react-grid-Toolbar .grouped-col-btn + .grouped-col-btn {
+
+.rdg-toolbar .grouped-col-btn + .grouped-col-btn {
   margin-left: 5px;
 }
 
@@ -49,7 +53,7 @@
   vertical-align: middle;
 }
 
-.react-grid-Toolbar .tools {
+.rdg-toolbar .tools {
   float: right;
   position: relative;
   padding: 0;