From fe3fcd77c952fdc23670f0a1c66431384c10862c Mon Sep 17 00:00:00 2001 From: Tom Crockett Date: Wed, 11 Apr 2018 14:34:31 -0700 Subject: [PATCH] [React] Remove string index fallback for CSS properties (#24911) * [React] Remove string index fallback for CSS properties (resolves #24568) * Require a minimum version of 2.2 for csstype * Fix aphrodite types * Fix react-confirm test * Use Omit * Fix react-geosuggest types * Fix victory test * Make customStyle and customStyleOnEditCell into functions --- types/aphrodite/index.d.ts | 37 +++++++++++++-------- types/aphrodite/package.json | 6 ++++ types/react-bootstrap-table/index.d.ts | 4 +-- types/react-confirm/react-confirm-tests.tsx | 6 ++-- types/react-geosuggest/index.d.ts | 10 +++++- types/react/index.d.ts | 6 +--- types/react/package.json | 2 +- types/victory/victory-tests.tsx | 2 +- 8 files changed, 46 insertions(+), 27 deletions(-) create mode 100644 types/aphrodite/package.json diff --git a/types/aphrodite/index.d.ts b/types/aphrodite/index.d.ts index 96848955883c23..583e84e9966f7e 100644 --- a/types/aphrodite/index.d.ts +++ b/types/aphrodite/index.d.ts @@ -4,27 +4,36 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 -import * as React from "react"; +import * as CSS from "csstype"; + +type BaseCSSProperties = CSS.Properties; type FontFamily = - | React.CSSProperties['fontFamily'] - | Pick + | BaseCSSProperties['fontFamily'] + | CSS.FontFace; + +// Replace with Exclude once on 2.8+ +type Diff = ( + & { [P in T]: P } + & { [P in U]: never } + & { [x: string]: never } +)[T]; +type Omit = Pick>; + +type CSSProperties = Omit & { + fontFamily?: FontFamily | FontFamily[]; +}; + +// For pseudo selectors and media queries +interface OpenCSSProperties extends CSSProperties { + [k: string]: CSSProperties[keyof CSSProperties] | CSSProperties; +} /** * Aphrodite style declaration */ export interface StyleDeclaration { - [key: string]: Pick & { - fontFamily?: FontFamily | FontFamily[]; - }; + [key: string]: OpenCSSProperties; } interface StyleSheetStatic { diff --git a/types/aphrodite/package.json b/types/aphrodite/package.json new file mode 100644 index 00000000000000..e6696d08e7060c --- /dev/null +++ b/types/aphrodite/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/react-bootstrap-table/index.d.ts b/types/react-bootstrap-table/index.d.ts index 1ad6b3be730f7b..6e9fd1dea8bf18 100644 --- a/types/react-bootstrap-table/index.d.ts +++ b/types/react-bootstrap-table/index.d.ts @@ -1857,7 +1857,7 @@ export interface KeyboardNavigation { /** * Return a style object which will be applied on the navigating cell. */ - customStyle?: CSSProperties; + customStyle?(cell: any, row: any): CSSProperties; /** * Set to false to disable click to navigate, usually user wants to click to select row instead of navigation. */ @@ -1865,7 +1865,7 @@ export interface KeyboardNavigation { /** * Return a style object which will be applied on the both of navigating and editing cell. */ - customStyleOnEditCell?: CSSProperties; + customStyleOnEditCell?(cell: any, row: any): CSSProperties; /** * When set to true, pressing ENTER will begin to edit the cell if cellEdit is also enabled. */ diff --git a/types/react-confirm/react-confirm-tests.tsx b/types/react-confirm/react-confirm-tests.tsx index a062b1e2a271f7..cfa3499ffc6de1 100644 --- a/types/react-confirm/react-confirm-tests.tsx +++ b/types/react-confirm/react-confirm-tests.tsx @@ -6,13 +6,13 @@ interface CustomModalProps { } class CustomModal extends React.Component { - modalStyle(): string { - return this.props.show ? "display: none;" : ""; + modalStyle() { + return this.props.show ? { display: 'none' } : undefined; } render() { return ( -
+

{this.props.title}

diff --git a/types/react-geosuggest/index.d.ts b/types/react-geosuggest/index.d.ts index 2537754b02a02d..344e768b08a7b0 100644 --- a/types/react-geosuggest/index.d.ts +++ b/types/react-geosuggest/index.d.ts @@ -16,7 +16,15 @@ export default class Geosuggest extends Component { selectSuggest(value?: Suggest): void; } -export interface GeosuggestProps extends InputHTMLAttributes { +// Replace with Exclude once on 2.8+ +export type Diff = ( + & { [P in T]: P } + & { [P in U]: never } + & { [x: string]: never } +)[T]; +export type Omit = Pick>; + +export interface GeosuggestProps extends Omit, 'style'> { placeholder?: string; initialValue?: string; className?: string; diff --git a/types/react/index.d.ts b/types/react/index.d.ts index c1be48ddce5e9d..50dca5578b2f6a 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -897,11 +897,7 @@ declare namespace React { onTransitionEndCapture?: TransitionEventHandler; } - export interface CSSProperties extends CSS.Properties { - // The string index signature fallback is needed at least until csstype - // provides SVG CSS properties: https://github.com/frenic/csstype/issues/4 - [propertyName: string]: any; - } + export interface CSSProperties extends CSS.Properties {} interface HTMLAttributes extends DOMAttributes { // React-specific Attributes diff --git a/types/react/package.json b/types/react/package.json index f3be220fbc2251..e6696d08e7060c 100644 --- a/types/react/package.json +++ b/types/react/package.json @@ -1,6 +1,6 @@ { "private": true, "dependencies": { - "csstype": "^2.0.0" + "csstype": "^2.2.0" } } diff --git a/types/victory/victory-tests.tsx b/types/victory/victory-tests.tsx index 56f9d34b542e45..3b882c75839807 100644 --- a/types/victory/victory-tests.tsx +++ b/types/victory/victory-tests.tsx @@ -158,7 +158,7 @@ test = ( grid: {strokeWidth: 2}, ticks: {stroke: "red"}, tickLabels: {fontSize: 12}, - axisLabel: {fontsize: 16} + axisLabel: {fontSize: 16} }} label="Planets" tickValues={[