mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 22:37:03 +00:00
* [@wordpres/components] run prettier on all files * fix: navigable-container props extend HTMLDivElement * fix: FormFileUpload should also accept "icon" prop for non-render variant * fix: Toolbar component "label" prop is not required * fix: RadioControl value can be any type, not just `string` * fix lint issue
This commit is contained in:
Derek Sifford
committed by
Benjamin Lichtman
Benjamin Lichtman
parent
e5baf0e613
commit
c56e525869
+6
-12
@@ -1,28 +1,22 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Animate {
|
||||
interface BaseProps {
|
||||
type: "appear" | "slide-in";
|
||||
type: 'appear' | 'slide-in';
|
||||
children(props: { className: string }): ReactNode;
|
||||
}
|
||||
|
||||
interface AppearProps extends BaseProps {
|
||||
type: "appear";
|
||||
type: 'appear';
|
||||
options?: {
|
||||
origin?:
|
||||
| "top"
|
||||
| "top left"
|
||||
| "top right"
|
||||
| "bottom"
|
||||
| "bottom left"
|
||||
| "bottom right";
|
||||
origin?: 'top' | 'top left' | 'top right' | 'bottom' | 'bottom left' | 'bottom right';
|
||||
};
|
||||
}
|
||||
|
||||
interface SlideInProps extends BaseProps {
|
||||
type: "slide-in";
|
||||
type: 'slide-in';
|
||||
options?: {
|
||||
origin?: "left";
|
||||
origin?: 'left';
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
+5
-7
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
import { Value } from '@wordpress/rich-text';
|
||||
|
||||
declare namespace Autocomplete {
|
||||
@@ -8,12 +8,12 @@ declare namespace Autocomplete {
|
||||
* - `replace`: Replace the current block with the block specified in
|
||||
* the `value` property.
|
||||
*/
|
||||
type Action = "insert-at-caret" | "replace";
|
||||
type Action = 'insert-at-caret' | 'replace';
|
||||
|
||||
type OptionCompletion =
|
||||
| ReactNode
|
||||
| { action: "insert-at-caret"; value: ReactNode }
|
||||
| { action: "replace"; value: Value };
|
||||
| { action: 'insert-at-caret'; value: ReactNode }
|
||||
| { action: 'replace'; value: Value };
|
||||
|
||||
interface Completer<T> {
|
||||
/**
|
||||
@@ -37,9 +37,7 @@ declare namespace Autocomplete {
|
||||
* those options are rendered and what their completions should be when
|
||||
* selected.
|
||||
*/
|
||||
options:
|
||||
| ((query: string) => PromiseLike<readonly T[]> | readonly T[])
|
||||
| readonly T[];
|
||||
options: ((query: string) => PromiseLike<readonly T[]> | readonly T[]) | readonly T[];
|
||||
|
||||
/**
|
||||
* A class name to apply to the autocompletion popup menu.
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace BaseControl {
|
||||
interface ControlProps {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace ButtonGroup {
|
||||
interface Props extends HTMLProps<HTMLDivElement> {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
declare namespace Button {
|
||||
interface BaseProps {
|
||||
|
||||
+4
-7
@@ -1,19 +1,16 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace CheckboxControl {
|
||||
interface Props
|
||||
extends Omit<
|
||||
HTMLProps<HTMLInputElement>,
|
||||
keyof BaseControl.ControlProps | "onChange"
|
||||
>,
|
||||
extends Omit<HTMLProps<HTMLInputElement>, keyof BaseControl.ControlProps | 'onChange'>,
|
||||
BaseControl.ControlProps {
|
||||
/**
|
||||
* A heading for the input field, that appears above the checkbox. If
|
||||
* the prop is not passed no heading will be rendered.
|
||||
*/
|
||||
heading?: BaseControl.ControlProps["label"];
|
||||
heading?: BaseControl.ControlProps['label'];
|
||||
/**
|
||||
* A function that receives the checked state (boolean) as input.
|
||||
*/
|
||||
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import Button from "../button";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
import Button from '../button';
|
||||
|
||||
declare namespace ClipboardButton {
|
||||
interface Props extends Button.ButtonProps {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace ColorPalette {
|
||||
interface Color {
|
||||
|
||||
+2
-7
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace ColorPicker {
|
||||
interface Props {
|
||||
@@ -9,12 +9,7 @@ declare namespace ColorPicker {
|
||||
/**
|
||||
* Function to be called when color value changes.
|
||||
*/
|
||||
onChangeComplete(value: {
|
||||
hex: string;
|
||||
hsl: string;
|
||||
hsv: string;
|
||||
rgb: string;
|
||||
}): void;
|
||||
onChangeComplete(value: { hex: string; hsl: string; hsv: string; rgb: string }): void;
|
||||
/**
|
||||
* Should alpha be disabled?
|
||||
*/
|
||||
|
||||
+290
-290
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, SVGProps } from "@wordpress/element";
|
||||
import { ComponentType, SVGProps } from '@wordpress/element';
|
||||
|
||||
declare namespace Dashicon {
|
||||
interface Props extends SVGProps<SVGSVGElement> {
|
||||
@@ -13,295 +13,295 @@ declare namespace Dashicon {
|
||||
size?: number;
|
||||
}
|
||||
type Icon =
|
||||
| "admin-appearance"
|
||||
| "admin-collapse"
|
||||
| "admin-comments"
|
||||
| "admin-customizer"
|
||||
| "admin-generic"
|
||||
| "admin-home"
|
||||
| "admin-links"
|
||||
| "admin-media"
|
||||
| "admin-multisite"
|
||||
| "admin-network"
|
||||
| "admin-page"
|
||||
| "admin-plugins"
|
||||
| "admin-post"
|
||||
| "admin-settings"
|
||||
| "admin-site-alt"
|
||||
| "admin-site-alt2"
|
||||
| "admin-site-alt3"
|
||||
| "admin-site"
|
||||
| "admin-tools"
|
||||
| "admin-users"
|
||||
| "album"
|
||||
| "align-center"
|
||||
| "align-full-width"
|
||||
| "align-left"
|
||||
| "align-none"
|
||||
| "align-pull-left"
|
||||
| "align-pull-right"
|
||||
| "align-right"
|
||||
| "align-wide"
|
||||
| "analytics"
|
||||
| "archive"
|
||||
| "arrow-down-alt"
|
||||
| "arrow-down-alt2"
|
||||
| "arrow-down"
|
||||
| "arrow-left-alt"
|
||||
| "arrow-left-alt2"
|
||||
| "arrow-left"
|
||||
| "arrow-right-alt"
|
||||
| "arrow-right-alt2"
|
||||
| "arrow-right"
|
||||
| "arrow-up-alt"
|
||||
| "arrow-up-alt2"
|
||||
| "arrow-up"
|
||||
| "art"
|
||||
| "awards"
|
||||
| "backup"
|
||||
| "block-default"
|
||||
| "book-alt"
|
||||
| "book"
|
||||
| "buddicons-activity"
|
||||
| "buddicons-bbpress-logo"
|
||||
| "buddicons-buddypress-logo"
|
||||
| "buddicons-community"
|
||||
| "buddicons-forums"
|
||||
| "buddicons-friends"
|
||||
| "buddicons-groups"
|
||||
| "buddicons-pm"
|
||||
| "buddicons-replies"
|
||||
| "buddicons-topics"
|
||||
| "buddicons-tracking"
|
||||
| "building"
|
||||
| "businessman"
|
||||
| "button"
|
||||
| "calendar-alt"
|
||||
| "calendar"
|
||||
| "camera"
|
||||
| "carrot"
|
||||
| "cart"
|
||||
| "category"
|
||||
| "chart-area"
|
||||
| "chart-bar"
|
||||
| "chart-line"
|
||||
| "chart-pie"
|
||||
| "clipboard"
|
||||
| "clock"
|
||||
| "cloud-saved"
|
||||
| "cloud-upload"
|
||||
| "cloud"
|
||||
| "columns"
|
||||
| "controls-back"
|
||||
| "controls-forward"
|
||||
| "controls-pause"
|
||||
| "controls-play"
|
||||
| "controls-repeat"
|
||||
| "controls-skipback"
|
||||
| "controls-skipforward"
|
||||
| "controls-volumeoff"
|
||||
| "controls-volumeon"
|
||||
| "cover-image"
|
||||
| "dashboard"
|
||||
| "desktop"
|
||||
| "dismiss"
|
||||
| "download"
|
||||
| "edit"
|
||||
| "editor-aligncenter"
|
||||
| "editor-alignleft"
|
||||
| "editor-alignright"
|
||||
| "editor-bold"
|
||||
| "editor-break"
|
||||
| "editor-code"
|
||||
| "editor-contract"
|
||||
| "editor-customchar"
|
||||
| "editor-expand"
|
||||
| "editor-help"
|
||||
| "editor-indent"
|
||||
| "editor-insertmore"
|
||||
| "editor-italic"
|
||||
| "editor-justify"
|
||||
| "editor-kitchensink"
|
||||
| "editor-ltr"
|
||||
| "editor-ol-rtl"
|
||||
| "editor-ol"
|
||||
| "editor-outdent"
|
||||
| "editor-paragraph"
|
||||
| "editor-paste-text"
|
||||
| "editor-paste-word"
|
||||
| "editor-quote"
|
||||
| "editor-removeformatting"
|
||||
| "editor-rtl"
|
||||
| "editor-spellcheck"
|
||||
| "editor-strikethrough"
|
||||
| "editor-table"
|
||||
| "editor-textcolor"
|
||||
| "editor-ul"
|
||||
| "editor-underline"
|
||||
| "editor-unlink"
|
||||
| "editor-video"
|
||||
| "ellipsis"
|
||||
| "email-alt"
|
||||
| "email-alt2"
|
||||
| "email"
|
||||
| "embed-audio"
|
||||
| "embed-generic"
|
||||
| "embed-photo"
|
||||
| "embed-post"
|
||||
| "embed-video"
|
||||
| "excerpt-view"
|
||||
| "exit"
|
||||
| "external"
|
||||
| "facebook-alt"
|
||||
| "facebook"
|
||||
| "feedback"
|
||||
| "filter"
|
||||
| "flag"
|
||||
| "format-aside"
|
||||
| "format-audio"
|
||||
| "format-chat"
|
||||
| "format-gallery"
|
||||
| "format-image"
|
||||
| "format-quote"
|
||||
| "format-status"
|
||||
| "format-video"
|
||||
| "forms"
|
||||
| "googleplus"
|
||||
| "grid-view"
|
||||
| "groups"
|
||||
| "hammer"
|
||||
| "heading"
|
||||
| "heart"
|
||||
| "hidden"
|
||||
| "html"
|
||||
| "id-alt"
|
||||
| "id"
|
||||
| "image-crop"
|
||||
| "image-filter"
|
||||
| "image-flip-horizontal"
|
||||
| "image-flip-vertical"
|
||||
| "image-rotate-left"
|
||||
| "image-rotate-right"
|
||||
| "image-rotate"
|
||||
| "images-alt"
|
||||
| "images-alt2"
|
||||
| "index-card"
|
||||
| "info-outline"
|
||||
| "info"
|
||||
| "insert-after"
|
||||
| "insert-before"
|
||||
| "insert"
|
||||
| "instagram"
|
||||
| "keyboard-hide"
|
||||
| "laptop"
|
||||
| "layout"
|
||||
| "leftright"
|
||||
| "lightbulb"
|
||||
| "list-view"
|
||||
| "location-alt"
|
||||
| "location"
|
||||
| "lock"
|
||||
| "marker"
|
||||
| "media-archive"
|
||||
| "media-audio"
|
||||
| "media-code"
|
||||
| "media-default"
|
||||
| "media-document"
|
||||
| "media-interactive"
|
||||
| "media-spreadsheet"
|
||||
| "media-text"
|
||||
| "media-video"
|
||||
| "megaphone"
|
||||
| "menu-alt"
|
||||
| "menu"
|
||||
| "microphone"
|
||||
| "migrate"
|
||||
| "minus"
|
||||
| "money"
|
||||
| "move"
|
||||
| "nametag"
|
||||
| "networking"
|
||||
| "no-alt"
|
||||
| "no"
|
||||
| "palmtree"
|
||||
| "paperclip"
|
||||
| "performance"
|
||||
| "phone"
|
||||
| "playlist-audio"
|
||||
| "playlist-video"
|
||||
| "plus-alt"
|
||||
| "plus-light"
|
||||
| "plus"
|
||||
| "portfolio"
|
||||
| "post-status"
|
||||
| "pressthis"
|
||||
| "products"
|
||||
| "randomize"
|
||||
| "redo"
|
||||
| "remove"
|
||||
| "rest-api"
|
||||
| "rss"
|
||||
| "saved"
|
||||
| "schedule"
|
||||
| "screenoptions"
|
||||
| "search"
|
||||
| "share-alt"
|
||||
| "share-alt2"
|
||||
| "share"
|
||||
| "shield-alt"
|
||||
| "shield"
|
||||
| "shortcode"
|
||||
| "slides"
|
||||
| "smartphone"
|
||||
| "smiley"
|
||||
| "sort"
|
||||
| "sos"
|
||||
| "star-empty"
|
||||
| "star-filled"
|
||||
| "star-half"
|
||||
| "sticky"
|
||||
| "store"
|
||||
| "table-col-after"
|
||||
| "table-col-before"
|
||||
| "table-col-delete"
|
||||
| "table-row-after"
|
||||
| "table-row-before"
|
||||
| "table-row-delete"
|
||||
| "tablet"
|
||||
| "tag"
|
||||
| "tagcloud"
|
||||
| "testimonial"
|
||||
| "text"
|
||||
| "thumbs-down"
|
||||
| "thumbs-up"
|
||||
| "tickets-alt"
|
||||
| "tickets"
|
||||
| "tide"
|
||||
| "translation"
|
||||
| "trash"
|
||||
| "twitter"
|
||||
| "undo"
|
||||
| "universal-access-alt"
|
||||
| "universal-access"
|
||||
| "unlock"
|
||||
| "update"
|
||||
| "upload"
|
||||
| "vault"
|
||||
| "video-alt"
|
||||
| "video-alt2"
|
||||
| "video-alt3"
|
||||
| "visibility"
|
||||
| "warning"
|
||||
| "welcome-add-page"
|
||||
| "welcome-comments"
|
||||
| "welcome-learn-more"
|
||||
| "welcome-view-site"
|
||||
| "welcome-widgets-menus"
|
||||
| "welcome-write-blog"
|
||||
| "wordpress-alt"
|
||||
| "wordpress"
|
||||
| "yes-alt"
|
||||
| "yes";
|
||||
| 'admin-appearance'
|
||||
| 'admin-collapse'
|
||||
| 'admin-comments'
|
||||
| 'admin-customizer'
|
||||
| 'admin-generic'
|
||||
| 'admin-home'
|
||||
| 'admin-links'
|
||||
| 'admin-media'
|
||||
| 'admin-multisite'
|
||||
| 'admin-network'
|
||||
| 'admin-page'
|
||||
| 'admin-plugins'
|
||||
| 'admin-post'
|
||||
| 'admin-settings'
|
||||
| 'admin-site-alt'
|
||||
| 'admin-site-alt2'
|
||||
| 'admin-site-alt3'
|
||||
| 'admin-site'
|
||||
| 'admin-tools'
|
||||
| 'admin-users'
|
||||
| 'album'
|
||||
| 'align-center'
|
||||
| 'align-full-width'
|
||||
| 'align-left'
|
||||
| 'align-none'
|
||||
| 'align-pull-left'
|
||||
| 'align-pull-right'
|
||||
| 'align-right'
|
||||
| 'align-wide'
|
||||
| 'analytics'
|
||||
| 'archive'
|
||||
| 'arrow-down-alt'
|
||||
| 'arrow-down-alt2'
|
||||
| 'arrow-down'
|
||||
| 'arrow-left-alt'
|
||||
| 'arrow-left-alt2'
|
||||
| 'arrow-left'
|
||||
| 'arrow-right-alt'
|
||||
| 'arrow-right-alt2'
|
||||
| 'arrow-right'
|
||||
| 'arrow-up-alt'
|
||||
| 'arrow-up-alt2'
|
||||
| 'arrow-up'
|
||||
| 'art'
|
||||
| 'awards'
|
||||
| 'backup'
|
||||
| 'block-default'
|
||||
| 'book-alt'
|
||||
| 'book'
|
||||
| 'buddicons-activity'
|
||||
| 'buddicons-bbpress-logo'
|
||||
| 'buddicons-buddypress-logo'
|
||||
| 'buddicons-community'
|
||||
| 'buddicons-forums'
|
||||
| 'buddicons-friends'
|
||||
| 'buddicons-groups'
|
||||
| 'buddicons-pm'
|
||||
| 'buddicons-replies'
|
||||
| 'buddicons-topics'
|
||||
| 'buddicons-tracking'
|
||||
| 'building'
|
||||
| 'businessman'
|
||||
| 'button'
|
||||
| 'calendar-alt'
|
||||
| 'calendar'
|
||||
| 'camera'
|
||||
| 'carrot'
|
||||
| 'cart'
|
||||
| 'category'
|
||||
| 'chart-area'
|
||||
| 'chart-bar'
|
||||
| 'chart-line'
|
||||
| 'chart-pie'
|
||||
| 'clipboard'
|
||||
| 'clock'
|
||||
| 'cloud-saved'
|
||||
| 'cloud-upload'
|
||||
| 'cloud'
|
||||
| 'columns'
|
||||
| 'controls-back'
|
||||
| 'controls-forward'
|
||||
| 'controls-pause'
|
||||
| 'controls-play'
|
||||
| 'controls-repeat'
|
||||
| 'controls-skipback'
|
||||
| 'controls-skipforward'
|
||||
| 'controls-volumeoff'
|
||||
| 'controls-volumeon'
|
||||
| 'cover-image'
|
||||
| 'dashboard'
|
||||
| 'desktop'
|
||||
| 'dismiss'
|
||||
| 'download'
|
||||
| 'edit'
|
||||
| 'editor-aligncenter'
|
||||
| 'editor-alignleft'
|
||||
| 'editor-alignright'
|
||||
| 'editor-bold'
|
||||
| 'editor-break'
|
||||
| 'editor-code'
|
||||
| 'editor-contract'
|
||||
| 'editor-customchar'
|
||||
| 'editor-expand'
|
||||
| 'editor-help'
|
||||
| 'editor-indent'
|
||||
| 'editor-insertmore'
|
||||
| 'editor-italic'
|
||||
| 'editor-justify'
|
||||
| 'editor-kitchensink'
|
||||
| 'editor-ltr'
|
||||
| 'editor-ol-rtl'
|
||||
| 'editor-ol'
|
||||
| 'editor-outdent'
|
||||
| 'editor-paragraph'
|
||||
| 'editor-paste-text'
|
||||
| 'editor-paste-word'
|
||||
| 'editor-quote'
|
||||
| 'editor-removeformatting'
|
||||
| 'editor-rtl'
|
||||
| 'editor-spellcheck'
|
||||
| 'editor-strikethrough'
|
||||
| 'editor-table'
|
||||
| 'editor-textcolor'
|
||||
| 'editor-ul'
|
||||
| 'editor-underline'
|
||||
| 'editor-unlink'
|
||||
| 'editor-video'
|
||||
| 'ellipsis'
|
||||
| 'email-alt'
|
||||
| 'email-alt2'
|
||||
| 'email'
|
||||
| 'embed-audio'
|
||||
| 'embed-generic'
|
||||
| 'embed-photo'
|
||||
| 'embed-post'
|
||||
| 'embed-video'
|
||||
| 'excerpt-view'
|
||||
| 'exit'
|
||||
| 'external'
|
||||
| 'facebook-alt'
|
||||
| 'facebook'
|
||||
| 'feedback'
|
||||
| 'filter'
|
||||
| 'flag'
|
||||
| 'format-aside'
|
||||
| 'format-audio'
|
||||
| 'format-chat'
|
||||
| 'format-gallery'
|
||||
| 'format-image'
|
||||
| 'format-quote'
|
||||
| 'format-status'
|
||||
| 'format-video'
|
||||
| 'forms'
|
||||
| 'googleplus'
|
||||
| 'grid-view'
|
||||
| 'groups'
|
||||
| 'hammer'
|
||||
| 'heading'
|
||||
| 'heart'
|
||||
| 'hidden'
|
||||
| 'html'
|
||||
| 'id-alt'
|
||||
| 'id'
|
||||
| 'image-crop'
|
||||
| 'image-filter'
|
||||
| 'image-flip-horizontal'
|
||||
| 'image-flip-vertical'
|
||||
| 'image-rotate-left'
|
||||
| 'image-rotate-right'
|
||||
| 'image-rotate'
|
||||
| 'images-alt'
|
||||
| 'images-alt2'
|
||||
| 'index-card'
|
||||
| 'info-outline'
|
||||
| 'info'
|
||||
| 'insert-after'
|
||||
| 'insert-before'
|
||||
| 'insert'
|
||||
| 'instagram'
|
||||
| 'keyboard-hide'
|
||||
| 'laptop'
|
||||
| 'layout'
|
||||
| 'leftright'
|
||||
| 'lightbulb'
|
||||
| 'list-view'
|
||||
| 'location-alt'
|
||||
| 'location'
|
||||
| 'lock'
|
||||
| 'marker'
|
||||
| 'media-archive'
|
||||
| 'media-audio'
|
||||
| 'media-code'
|
||||
| 'media-default'
|
||||
| 'media-document'
|
||||
| 'media-interactive'
|
||||
| 'media-spreadsheet'
|
||||
| 'media-text'
|
||||
| 'media-video'
|
||||
| 'megaphone'
|
||||
| 'menu-alt'
|
||||
| 'menu'
|
||||
| 'microphone'
|
||||
| 'migrate'
|
||||
| 'minus'
|
||||
| 'money'
|
||||
| 'move'
|
||||
| 'nametag'
|
||||
| 'networking'
|
||||
| 'no-alt'
|
||||
| 'no'
|
||||
| 'palmtree'
|
||||
| 'paperclip'
|
||||
| 'performance'
|
||||
| 'phone'
|
||||
| 'playlist-audio'
|
||||
| 'playlist-video'
|
||||
| 'plus-alt'
|
||||
| 'plus-light'
|
||||
| 'plus'
|
||||
| 'portfolio'
|
||||
| 'post-status'
|
||||
| 'pressthis'
|
||||
| 'products'
|
||||
| 'randomize'
|
||||
| 'redo'
|
||||
| 'remove'
|
||||
| 'rest-api'
|
||||
| 'rss'
|
||||
| 'saved'
|
||||
| 'schedule'
|
||||
| 'screenoptions'
|
||||
| 'search'
|
||||
| 'share-alt'
|
||||
| 'share-alt2'
|
||||
| 'share'
|
||||
| 'shield-alt'
|
||||
| 'shield'
|
||||
| 'shortcode'
|
||||
| 'slides'
|
||||
| 'smartphone'
|
||||
| 'smiley'
|
||||
| 'sort'
|
||||
| 'sos'
|
||||
| 'star-empty'
|
||||
| 'star-filled'
|
||||
| 'star-half'
|
||||
| 'sticky'
|
||||
| 'store'
|
||||
| 'table-col-after'
|
||||
| 'table-col-before'
|
||||
| 'table-col-delete'
|
||||
| 'table-row-after'
|
||||
| 'table-row-before'
|
||||
| 'table-row-delete'
|
||||
| 'tablet'
|
||||
| 'tag'
|
||||
| 'tagcloud'
|
||||
| 'testimonial'
|
||||
| 'text'
|
||||
| 'thumbs-down'
|
||||
| 'thumbs-up'
|
||||
| 'tickets-alt'
|
||||
| 'tickets'
|
||||
| 'tide'
|
||||
| 'translation'
|
||||
| 'trash'
|
||||
| 'twitter'
|
||||
| 'undo'
|
||||
| 'universal-access-alt'
|
||||
| 'universal-access'
|
||||
| 'unlock'
|
||||
| 'update'
|
||||
| 'upload'
|
||||
| 'vault'
|
||||
| 'video-alt'
|
||||
| 'video-alt2'
|
||||
| 'video-alt3'
|
||||
| 'visibility'
|
||||
| 'warning'
|
||||
| 'welcome-add-page'
|
||||
| 'welcome-comments'
|
||||
| 'welcome-learn-more'
|
||||
| 'welcome-view-site'
|
||||
| 'welcome-widgets-menus'
|
||||
| 'welcome-write-blog'
|
||||
| 'wordpress-alt'
|
||||
| 'wordpress'
|
||||
| 'yes-alt'
|
||||
| 'yes';
|
||||
}
|
||||
declare const Dashicon: ComponentType<Dashicon.Props>;
|
||||
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace DatePicker {
|
||||
interface Props {
|
||||
|
||||
+5
-5
@@ -1,11 +1,11 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import { default as DatePicker } from "./date";
|
||||
import { default as DatePicker } from './date';
|
||||
|
||||
export { default as TimePicker } from "./time";
|
||||
export { default as DatePicker } from "./date";
|
||||
export { default as TimePicker } from './time';
|
||||
export { default as DatePicker } from './date';
|
||||
|
||||
export namespace DateTimePicker {
|
||||
type Props = Omit<DatePicker.Props, "isInvalidDate">;
|
||||
type Props = Omit<DatePicker.Props, 'isInvalidDate'>;
|
||||
}
|
||||
export const DateTimePicker: ComponentType<DateTimePicker.Props>;
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace TimePicker {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, Consumer, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, Consumer, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Disabled {
|
||||
interface Props {
|
||||
|
||||
+2
-5
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, DragEventHandler, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, DragEventHandler, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Draggable {
|
||||
interface Props {
|
||||
@@ -22,10 +22,7 @@ declare namespace Draggable {
|
||||
* Render prop providing `onDragStart` and `onDragEnd` for the
|
||||
* draggable element.
|
||||
*/
|
||||
children(props: {
|
||||
onDraggableStart: DragEventHandler;
|
||||
onDraggableEnd: DragEventHandler;
|
||||
}): ReactNode;
|
||||
children(props: { onDraggableStart: DragEventHandler; onDraggableEnd: DragEventHandler }): ReactNode;
|
||||
}
|
||||
}
|
||||
declare const Draggable: ComponentType<Draggable.Props>;
|
||||
|
||||
+4
-7
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, DragEvent } from "@wordpress/element";
|
||||
import { ComponentType, DragEvent } from '@wordpress/element';
|
||||
|
||||
declare namespace DropZone {
|
||||
interface Props {
|
||||
@@ -35,14 +35,11 @@ declare namespace DropZone {
|
||||
* @param position - Indicates whether the drop event happened closer
|
||||
* to the top or bottom edges and left or right ones.
|
||||
*/
|
||||
onDrop?(
|
||||
event: DragEvent<HTMLDivElement>,
|
||||
position: HoverPosition
|
||||
): void;
|
||||
onDrop?(event: DragEvent<HTMLDivElement>, position: HoverPosition): void;
|
||||
}
|
||||
type HoverPosition = {
|
||||
x: "left" | "right";
|
||||
y: "top" | "bottom";
|
||||
x: 'left' | 'right';
|
||||
y: 'top' | 'bottom';
|
||||
} | null;
|
||||
}
|
||||
declare const DropZone: ComponentType<DropZone.Props>;
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare const DropZoneProvider: ComponentType<{children: ReactNode}>;
|
||||
declare const DropZoneProvider: ComponentType<{ children: ReactNode }>;
|
||||
|
||||
export default DropZoneProvider;
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import Dashicon from "../dashicon";
|
||||
import Dropdown from "../dropdown";
|
||||
import Dashicon from '../dashicon';
|
||||
import Dropdown from '../dropdown';
|
||||
import Popover from '../popover';
|
||||
|
||||
declare namespace DropdownMenu {
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import Popover from '../popover';
|
||||
|
||||
@@ -41,7 +41,7 @@ declare namespace Dropdown {
|
||||
*
|
||||
* @defaultValue "firstElement"
|
||||
*/
|
||||
focusOnMount?: "firstElement" | "container" | false;
|
||||
focusOnMount?: 'firstElement' | 'container' | false;
|
||||
renderToggle(props: RenderProps): JSX.Element;
|
||||
renderContent(props: RenderProps): JSX.Element;
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
declare namespace ExternalLink {
|
||||
type Props = HTMLProps<HTMLAnchorElement>;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace FocalPointPicker {
|
||||
interface Props extends BaseControl.ControlProps {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps, RefObject } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps, RefObject } from '@wordpress/element';
|
||||
|
||||
declare namespace FocusableIframe {
|
||||
interface Props extends HTMLProps<HTMLIFrameElement> {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace FontSizePicker {
|
||||
interface Props {
|
||||
|
||||
+3
-5
@@ -1,6 +1,6 @@
|
||||
import { ChangeEventHandler, ComponentType } from "@wordpress/element";
|
||||
import { ChangeEventHandler, ComponentType } from '@wordpress/element';
|
||||
|
||||
import IconButton from "../icon-button";
|
||||
import IconButton from '../icon-button';
|
||||
|
||||
declare namespace FormFileUpload {
|
||||
interface BaseProps {
|
||||
@@ -20,9 +20,7 @@ declare namespace FormFileUpload {
|
||||
*/
|
||||
onChange: ChangeEventHandler<HTMLInputElement>;
|
||||
}
|
||||
interface IconButtonProps
|
||||
extends BaseProps,
|
||||
Partial<Omit<IconButton.Props, "onChange" | "icon">> {
|
||||
interface IconButtonProps extends BaseProps, Partial<Omit<IconButton.Props, 'onChange'>> {
|
||||
render?: never;
|
||||
}
|
||||
interface RenderProps extends BaseProps {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
declare const FormToggle: ComponentType<HTMLProps<HTMLInputElement>>;
|
||||
|
||||
|
||||
+2
-6
@@ -1,8 +1,4 @@
|
||||
import {
|
||||
ComponentType,
|
||||
FocusEventHandler,
|
||||
MouseEventHandler
|
||||
} from "@wordpress/element";
|
||||
import { ComponentType, FocusEventHandler, MouseEventHandler } from '@wordpress/element';
|
||||
|
||||
declare namespace FormTokenField {
|
||||
interface Props {
|
||||
@@ -81,7 +77,7 @@ declare namespace FormTokenField {
|
||||
/**
|
||||
* Applies styles to token.
|
||||
*/
|
||||
status?: "error" | "validating" | "success";
|
||||
status?: 'error' | 'validating' | 'success';
|
||||
/**
|
||||
* Adds a title to the token.
|
||||
*/
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
// prettier-ignore
|
||||
export default function navigateRegions<T extends ComponentType<any>>(wrapped: T):
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
// prettier-ignore
|
||||
export default function withConstrainedTabbing<T>(wrapped: T):
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
// prettier-ignore
|
||||
export default function withFallbackStyles<FSP>(
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
// prettier-ignore
|
||||
declare function withFilters(hookName: string): <T>(wrapped: T) =>
|
||||
T extends ComponentType<infer U> ? ComponentType<U> : never;
|
||||
|
||||
declare function withFilters<P>(
|
||||
hookName: string
|
||||
): (wrapped: ComponentType<any>) => ComponentType<P>; // tslint:disable-line:no-unnecessary-generics
|
||||
declare function withFilters<P>(hookName: string): (wrapped: ComponentType<any>) => ComponentType<P>; // tslint:disable-line:no-unnecessary-generics
|
||||
|
||||
export default withFilters;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, ComponentClass, ComponentType } from "@wordpress/element";
|
||||
import { Component, ComponentClass, ComponentType } from '@wordpress/element';
|
||||
|
||||
export interface HFOComponent<P = {}, S = any> extends ComponentClass<P, S> {
|
||||
new (props: P, context?: any): Component<P, S> & {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
export interface WFROptions {
|
||||
onFocusReturn?(): boolean | void;
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import NoticeList from "../../notice/list";
|
||||
import NoticeList from '../../notice/list';
|
||||
|
||||
declare namespace withNotices {
|
||||
interface Props {
|
||||
noticeList: readonly NoticeList.Notice[];
|
||||
noticeOperations: {
|
||||
createNotice(
|
||||
notice: Partial<NoticeList.Notice> &
|
||||
Pick<NoticeList.Notice, "content">
|
||||
): void;
|
||||
createNotice(notice: Partial<NoticeList.Notice> & Pick<NoticeList.Notice, 'content'>): void;
|
||||
createErrorNotice(message: string): void;
|
||||
removeAllNotices(): void;
|
||||
removeNotice(noticeId: string): void;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
// prettier-ignore
|
||||
export default function withSpokenMessages<T extends ComponentType<any>>(wrapped: T):
|
||||
|
||||
+4
-4
@@ -1,8 +1,8 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import Button from "../button";
|
||||
import Dashicon from "../dashicon";
|
||||
import Popover from "../popover";
|
||||
import Button from '../button';
|
||||
import Dashicon from '../dashicon';
|
||||
import Popover from '../popover';
|
||||
import Shortcut from '../shortcut';
|
||||
|
||||
declare namespace IconButton {
|
||||
|
||||
+2
-7
@@ -1,11 +1,6 @@
|
||||
import {
|
||||
ComponentType,
|
||||
SVGProps,
|
||||
ReactComponentElement,
|
||||
ReactDOM
|
||||
} from "@wordpress/element";
|
||||
import { ComponentType, SVGProps, ReactComponentElement, ReactDOM } from '@wordpress/element';
|
||||
|
||||
import Dashicon from "../dashicon";
|
||||
import Dashicon from '../dashicon';
|
||||
|
||||
declare namespace Icon {
|
||||
type IconType<P> = Dashicon.Icon | ComponentType<P> | JSX.Element;
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 3.5
|
||||
|
||||
export * from "./primitives";
|
||||
export * from './primitives';
|
||||
|
||||
//
|
||||
// Components
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
declare namespace IsolatedEventContainer {
|
||||
type Props = HTMLProps<HTMLDivElement>;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace KeyboardShortcuts {
|
||||
interface BaseProps {
|
||||
@@ -28,7 +28,7 @@ declare namespace KeyboardShortcuts {
|
||||
* To override this, pass `eventName` with the name of a specific keyboard
|
||||
* event.
|
||||
*/
|
||||
eventName?: "keydown" | "keypress" | "keyup";
|
||||
eventName?: 'keydown' | 'keypress' | 'keyup';
|
||||
}
|
||||
interface PropsWithChildren extends BaseProps {
|
||||
children: ReactNode;
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace MenuGroup {
|
||||
interface Props {
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import IconButton from "../icon-button";
|
||||
import IconButton from '../icon-button';
|
||||
|
||||
declare namespace MenuItem {
|
||||
interface Props extends Partial<IconButton.Props> {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import Shortcut from '../shortcut';
|
||||
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Modal {
|
||||
interface Props extends HTMLProps<HTMLDivElement> {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import TabbableContainer from "./tabbable";
|
||||
import TabbableContainer from './tabbable';
|
||||
|
||||
declare namespace NavigableMenu {
|
||||
interface Props extends TabbableContainer.Props {
|
||||
@@ -8,7 +8,7 @@ declare namespace NavigableMenu {
|
||||
* The orientation of the menu.
|
||||
* @defaultValue "vertical"
|
||||
*/
|
||||
orientation?: "vertical" | "horizontal" | "both";
|
||||
orientation?: 'vertical' | 'horizontal' | 'both';
|
||||
}
|
||||
}
|
||||
declare const NavigableMenu: ComponentType<NavigableMenu.Props>;
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
import {
|
||||
ComponentType,
|
||||
KeyboardEventHandler,
|
||||
ReactNode
|
||||
} from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps, KeyboardEventHandler, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace TabbableContainer {
|
||||
interface Props {
|
||||
interface Props extends HTMLProps<HTMLDivElement> {
|
||||
/**
|
||||
* A boolean which tells the component whether or not to cycle from the
|
||||
* end back to the beginning and vice versa.
|
||||
|
||||
+2
-6
@@ -1,8 +1,4 @@
|
||||
import {
|
||||
ComponentType,
|
||||
MouseEventHandler,
|
||||
ReactNode
|
||||
} from "@wordpress/element";
|
||||
import { ComponentType, MouseEventHandler, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Notice {
|
||||
interface Props {
|
||||
@@ -20,7 +16,7 @@ declare namespace Notice {
|
||||
* @defaultValue true
|
||||
*/
|
||||
isDismissible?: boolean;
|
||||
status?: "success" | "warning" | "error";
|
||||
status?: 'success' | 'warning' | 'error';
|
||||
/**
|
||||
* Function called when dismissing the notice.
|
||||
*/
|
||||
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import Notice from "./";
|
||||
import Notice from './';
|
||||
|
||||
declare namespace NoticeList {
|
||||
interface Props {
|
||||
@@ -14,7 +14,7 @@ declare namespace NoticeList {
|
||||
onRemove?(noticeId: string): void;
|
||||
className?: string;
|
||||
}
|
||||
interface Notice extends Omit<Notice.Props, "children" | "onRemove"> {
|
||||
interface Notice extends Omit<Notice.Props, 'children' | 'onRemove'> {
|
||||
id: string;
|
||||
content: ReactNode;
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import Icon from "../icon";
|
||||
import Icon from '../icon';
|
||||
|
||||
declare namespace PanelBody {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace PanelHeader {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Panel {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace PanelRow {
|
||||
interface Props {
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import Icon from "../icon";
|
||||
import Icon from '../icon';
|
||||
|
||||
declare namespace Placeholder {
|
||||
interface Props extends HTMLProps<HTMLDivElement> {
|
||||
|
||||
+12
-14
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, HTMLProps, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps, ReactNode } from '@wordpress/element';
|
||||
|
||||
declare namespace Popover {
|
||||
interface Props extends HTMLProps<HTMLDivElement> {
|
||||
@@ -35,7 +35,7 @@ declare namespace Popover {
|
||||
*
|
||||
* @defaultValue "firstElement"
|
||||
*/
|
||||
focusOnMount?: "firstElement" | "container" | false;
|
||||
focusOnMount?: 'firstElement' | 'container' | false;
|
||||
/**
|
||||
* Set this to customize the text that is shown in popover's header
|
||||
* when it is fullscreen on mobile.
|
||||
@@ -57,9 +57,7 @@ declare namespace Popover {
|
||||
* Function that should return a `DOMRect` of where to position the
|
||||
* popover.
|
||||
*/
|
||||
getAnchorRect?(
|
||||
currentAnchorElement: HTMLSpanElement | null
|
||||
): DOMRect | ClientRect | undefined;
|
||||
getAnchorRect?(currentAnchorElement: HTMLSpanElement | null): DOMRect | ClientRect | undefined;
|
||||
/**
|
||||
* A callback invoked when the popover should be closed.
|
||||
*/
|
||||
@@ -77,15 +75,15 @@ declare namespace Popover {
|
||||
* node. Specify y- and x-axis as a space-separated string.
|
||||
*/
|
||||
type Position =
|
||||
| "top left"
|
||||
| "top right"
|
||||
| "top center"
|
||||
| "middle left"
|
||||
| "middle right"
|
||||
| "middle center"
|
||||
| "bottom left"
|
||||
| "bottom right"
|
||||
| "bottom center";
|
||||
| 'top left'
|
||||
| 'top right'
|
||||
| 'top center'
|
||||
| 'middle left'
|
||||
| 'middle right'
|
||||
| 'middle center'
|
||||
| 'bottom left'
|
||||
| 'bottom right'
|
||||
| 'bottom center';
|
||||
}
|
||||
declare const Popover: ComponentType<Popover.Props>;
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
export const BlockQuotation: "blockquote";
|
||||
export const BlockQuotation: 'blockquote';
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
export const Circle: ComponentType<JSX.IntrinsicElements['circle']>;
|
||||
export const G: ComponentType<JSX.IntrinsicElements['g']>;
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace QueryControls {
|
||||
type Order = "asc" | "desc";
|
||||
type OrderBy = "date" | "title";
|
||||
type Order = 'asc' | 'desc';
|
||||
type OrderBy = 'date' | 'title';
|
||||
type CategoryProps =
|
||||
| {
|
||||
categoriesList: ReadonlyArray<{
|
||||
|
||||
+9
-8
@@ -1,21 +1,21 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace RadioControl {
|
||||
interface Props extends BaseControl.ControlProps {
|
||||
options?: readonly Option[];
|
||||
interface Props<T> extends BaseControl.ControlProps {
|
||||
options?: ReadonlyArray<Option<T>>;
|
||||
/**
|
||||
* The value property of the currently selected option.
|
||||
*/
|
||||
selected?: Option["value"];
|
||||
selected?: T;
|
||||
/**
|
||||
* A function that receives the value of the new option that is being
|
||||
* selected as input.
|
||||
*/
|
||||
onChange(value: Option["value"]): void;
|
||||
onChange(value?: T): void;
|
||||
}
|
||||
interface Option {
|
||||
interface Option<T> {
|
||||
/**
|
||||
* The label to be shown to the user.
|
||||
*/
|
||||
@@ -23,9 +23,10 @@ declare namespace RadioControl {
|
||||
/**
|
||||
* The internal value compared against select and passed to `onChange`.
|
||||
*/
|
||||
value: string;
|
||||
value: T;
|
||||
}
|
||||
}
|
||||
declare const RadioControl: ComponentType<RadioControl.Props>;
|
||||
// tslint:disable-next-line:no-unnecessary-generics
|
||||
declare function RadioControl<T>(props: RadioControl.Props<T>): JSX.Element;
|
||||
|
||||
export default RadioControl;
|
||||
|
||||
+4
-7
@@ -1,14 +1,11 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import Dashicon from "../dashicon";
|
||||
import BaseControl from '../base-control';
|
||||
import Dashicon from '../dashicon';
|
||||
|
||||
declare namespace RangeControl {
|
||||
interface Props
|
||||
extends Omit<
|
||||
HTMLProps<HTMLInputElement>,
|
||||
keyof BaseControl.ControlProps | "onChange"
|
||||
>,
|
||||
extends Omit<HTMLProps<HTMLInputElement>, keyof BaseControl.ControlProps | 'onChange'>,
|
||||
BaseControl.ControlProps {
|
||||
/**
|
||||
* If this property is added, a `DashIcon` component will be rendered
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
import { ResizableProps } from 're-resizable';
|
||||
|
||||
declare namespace ResizableBox {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactChild } from "@wordpress/element";
|
||||
import { ComponentType, ReactChild } from '@wordpress/element';
|
||||
|
||||
declare namespace ResponsiveWrapper {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, FocusEventHandler } from "@wordpress/element";
|
||||
import { ComponentType, FocusEventHandler } from '@wordpress/element';
|
||||
|
||||
declare namespace SandBox {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace ScrollLock {
|
||||
interface Props {
|
||||
|
||||
+4
-6
@@ -1,6 +1,6 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace SelectControl {
|
||||
interface Option {
|
||||
@@ -16,7 +16,7 @@ declare namespace SelectControl {
|
||||
}
|
||||
type Props<T extends string | readonly string[]> = Omit<
|
||||
HTMLProps<HTMLSelectElement>,
|
||||
keyof BaseControl.ControlProps | "multiple" | "onChange" | "value"
|
||||
keyof BaseControl.ControlProps | 'multiple' | 'onChange' | 'value'
|
||||
> &
|
||||
BaseControl.ControlProps & {
|
||||
options?: readonly Option[];
|
||||
@@ -28,9 +28,7 @@ declare namespace SelectControl {
|
||||
* is a single value with the new selected value.
|
||||
*/
|
||||
onChange(value: T): void;
|
||||
} & (T extends readonly string[]
|
||||
? { multiple: true }
|
||||
: { multiple?: false });
|
||||
} & (T extends readonly string[] ? { multiple: true } : { multiple?: false });
|
||||
}
|
||||
declare function SelectControl<T extends string | readonly string[]>(
|
||||
// tslint:disable-next-line:no-unnecessary-generics
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace Shortcut {
|
||||
interface ShortcutObj {
|
||||
|
||||
+2
-9
@@ -1,8 +1,4 @@
|
||||
import {
|
||||
Component,
|
||||
ComponentType,
|
||||
Consumer as ContextConsumer
|
||||
} from "@wordpress/element";
|
||||
import { Component, ComponentType, Consumer as ContextConsumer } from '@wordpress/element';
|
||||
|
||||
export interface SlotFillContext {
|
||||
registerSlot(name: string, instance: Component): void;
|
||||
@@ -12,10 +8,7 @@ export interface SlotFillContext {
|
||||
// FIXME: instance is not correctly typed. but there's a bug in the code that assumes this type.
|
||||
unregisterFill(name: string, instance: Component): void;
|
||||
getSlot(name: string): Component;
|
||||
getFills(
|
||||
name: string,
|
||||
instance: Component
|
||||
): ReadonlyArray<Component & { occurrence?: number }>;
|
||||
getFills(name: string, instance: Component): ReadonlyArray<Component & { occurrence?: number }>;
|
||||
}
|
||||
|
||||
declare const SlotFillProvider: ComponentType;
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType, ReactNode, ReactPortal } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode, ReactPortal } from '@wordpress/element';
|
||||
|
||||
declare namespace Fill {
|
||||
interface Props {
|
||||
|
||||
+4
-4
@@ -1,8 +1,8 @@
|
||||
import { FC } from "@wordpress/element";
|
||||
import { FC } from '@wordpress/element';
|
||||
|
||||
import Slot from "./slot";
|
||||
import Fill from "./fill";
|
||||
import Provider, { Consumer } from "./context";
|
||||
import Slot from './slot';
|
||||
import Fill from './fill';
|
||||
import Provider, { Consumer } from './context';
|
||||
|
||||
export { Slot, Fill, Provider, Consumer };
|
||||
|
||||
|
||||
+2
-4
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace Slot {
|
||||
interface Props {
|
||||
@@ -13,9 +13,7 @@ declare namespace Slot {
|
||||
* `Fill`s as a param. It allows to perform additional processing and
|
||||
* wrap `fills` conditionally.
|
||||
*/
|
||||
children?(
|
||||
fills: ReadonlyArray<readonly JSX.Element[]>
|
||||
): JSX.Element | null;
|
||||
children?(fills: ReadonlyArray<readonly JSX.Element[]>): JSX.Element | null;
|
||||
/**
|
||||
* Changes event bubbling behavior.
|
||||
*
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import Notice from "../notice";
|
||||
import Notice from '../notice';
|
||||
|
||||
declare namespace Snackbar {
|
||||
interface Props {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import NoticeList from '../notice/list';
|
||||
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace Spinner {
|
||||
interface Props {
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
declare namespace TabPanel {
|
||||
interface Tab {
|
||||
@@ -46,7 +46,7 @@ declare namespace TabPanel {
|
||||
* The orientation of the tablist.
|
||||
* @defaultValue "horizontal"
|
||||
*/
|
||||
orientation?: "horizontal" | "vertical";
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
tabs: readonly Tab[];
|
||||
/**
|
||||
* The function called when a tab has been selected. It is passed the
|
||||
|
||||
+3
-6
@@ -1,13 +1,10 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace TextControl {
|
||||
interface Props
|
||||
extends Omit<
|
||||
HTMLProps<HTMLInputElement>,
|
||||
keyof BaseControl.ControlProps | "onChange"
|
||||
>,
|
||||
extends Omit<HTMLProps<HTMLInputElement>, keyof BaseControl.ControlProps | 'onChange'>,
|
||||
BaseControl.ControlProps {
|
||||
/**
|
||||
* The current value of the input.
|
||||
|
||||
+3
-6
@@ -1,13 +1,10 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace TextareaControl {
|
||||
interface Props
|
||||
extends Omit<
|
||||
HTMLProps<HTMLTextAreaElement>,
|
||||
keyof BaseControl.ControlProps | "onChange"
|
||||
>,
|
||||
extends Omit<HTMLProps<HTMLTextAreaElement>, keyof BaseControl.ControlProps | 'onChange'>,
|
||||
BaseControl.ControlProps {
|
||||
/**
|
||||
* The number of rows the textarea should contain.
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import BaseControl from "../base-control";
|
||||
import BaseControl from '../base-control';
|
||||
|
||||
declare namespace ToggleControl {
|
||||
interface Props extends BaseControl.ControlProps {
|
||||
|
||||
+4
-6
@@ -1,12 +1,10 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import DropdownMenu from "../dropdown-menu";
|
||||
import IconButton from "../icon-button";
|
||||
import DropdownMenu from '../dropdown-menu';
|
||||
import IconButton from '../icon-button';
|
||||
|
||||
declare namespace ToolbarButton {
|
||||
interface Props
|
||||
extends DropdownMenu.Control,
|
||||
Pick<IconButton.Props, "shortcut"> {
|
||||
interface Props extends DropdownMenu.Control, Pick<IconButton.Props, 'shortcut'> {
|
||||
/**
|
||||
* Anything to add into the containing element after the button.
|
||||
*/
|
||||
|
||||
+4
-4
@@ -1,12 +1,12 @@
|
||||
import { ComponentType, HTMLProps } from "@wordpress/element";
|
||||
import { ComponentType, HTMLProps } from '@wordpress/element';
|
||||
|
||||
import DropdownMenu from "../dropdown-menu";
|
||||
import DropdownMenu from '../dropdown-menu';
|
||||
import ToolbarButton from '../toolbar-button';
|
||||
|
||||
declare namespace Toolbar {
|
||||
interface Props
|
||||
extends Omit<HTMLProps<HTMLDivElement>, "controls" | "label">,
|
||||
Pick<DropdownMenu.Props, "icon" | "label"> {
|
||||
extends Omit<HTMLProps<HTMLDivElement>, 'controls' | 'label'>,
|
||||
Partial<Pick<DropdownMenu.Props, 'icon' | 'label'>> {
|
||||
/**
|
||||
* Class to set on the container div.
|
||||
*/
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
import { ComponentType, ReactNode } from "@wordpress/element";
|
||||
import { ComponentType, ReactNode } from '@wordpress/element';
|
||||
|
||||
import Popover from "../popover";
|
||||
import Shortcut from "../shortcut";
|
||||
import Popover from '../popover';
|
||||
import Shortcut from '../shortcut';
|
||||
|
||||
declare namespace Tooltip {
|
||||
interface Props {
|
||||
|
||||
+3
-4
@@ -1,10 +1,9 @@
|
||||
import { ComponentType } from "@wordpress/element";
|
||||
import { ComponentType } from '@wordpress/element';
|
||||
|
||||
import SelectControl from "../select-control";
|
||||
import SelectControl from '../select-control';
|
||||
|
||||
declare namespace TreeSelect {
|
||||
interface Props
|
||||
extends Omit<SelectControl.Props<string>, "options" | "value"> {
|
||||
interface Props extends Omit<SelectControl.Props<string>, 'options' | 'value'> {
|
||||
/**
|
||||
* If this property is added, an option will be added with this label
|
||||
* to represent empty selection.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as C from "@wordpress/components";
|
||||
import { Component } from "@wordpress/element";
|
||||
import * as C from '@wordpress/components';
|
||||
import { Component } from '@wordpress/element';
|
||||
|
||||
//
|
||||
// primitives
|
||||
@@ -10,7 +10,7 @@ import { Component } from "@wordpress/element";
|
||||
//
|
||||
// animate
|
||||
//
|
||||
<C.Animate type="appear" options={{ origin: "top left" }}>
|
||||
<C.Animate type="appear" options={{ origin: 'top left' }}>
|
||||
{({ className }) => <h1 className={className}>Hello World</h1>}
|
||||
</C.Animate>;
|
||||
|
||||
@@ -25,14 +25,14 @@ interface MyCompleteOption {
|
||||
<C.Autocomplete<MyCompleteOption>
|
||||
completers={[
|
||||
{
|
||||
name: "fruit",
|
||||
name: 'fruit',
|
||||
// The prefix that triggers this completer
|
||||
triggerPrefix: "~",
|
||||
triggerPrefix: '~',
|
||||
// The option data
|
||||
options: [
|
||||
{ visual: "🍎", name: "Apple", id: 1 },
|
||||
{ visual: "🍊", name: "Orange", id: 2 },
|
||||
{ visual: "🍇", name: "Grapes", id: 3 }
|
||||
{ visual: '🍎', name: 'Apple', id: 1 },
|
||||
{ visual: '🍊', name: 'Orange', id: 2 },
|
||||
{ visual: '🍇', name: 'Grapes', id: 3 },
|
||||
],
|
||||
// Returns a label for an option like "🍊 Orange"
|
||||
getOptionLabel: option => (
|
||||
@@ -44,12 +44,10 @@ interface MyCompleteOption {
|
||||
// Declares that options should be matched by their name
|
||||
getOptionKeywords: option => [option.name],
|
||||
// Declares that the Grapes option is disabled
|
||||
isOptionDisabled: option => option.name === "Grapes",
|
||||
isOptionDisabled: option => option.name === 'Grapes',
|
||||
// Declares completions should be inserted as abbreviations
|
||||
getOptionCompletion: option => (
|
||||
<abbr title={option.name}>{option.visual}</abbr>
|
||||
)
|
||||
}
|
||||
getOptionCompletion: option => <abbr title={option.name}>{option.visual}</abbr>,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{({ isExpanded, listBoxId, activeId }) => (
|
||||
@@ -97,11 +95,7 @@ interface MyCompleteOption {
|
||||
//
|
||||
// clipboard-button
|
||||
//
|
||||
<C.ClipboardButton
|
||||
isPrimary
|
||||
text="Copy this"
|
||||
onFinishCopy={() => console.log("copied!")}
|
||||
/>;
|
||||
<C.ClipboardButton isPrimary text="Copy this" onFinishCopy={() => console.log('copied!')} />;
|
||||
|
||||
//
|
||||
// color-indicator
|
||||
@@ -113,21 +107,18 @@ interface MyCompleteOption {
|
||||
//
|
||||
<C.ColorPalette
|
||||
colors={[
|
||||
{ name: "red", color: "#ff0000" },
|
||||
{ name: "green", color: "#00ff00" },
|
||||
{ name: "blue", color: "#0000ff" }
|
||||
{ name: 'red', color: '#ff0000' },
|
||||
{ name: 'green', color: '#00ff00' },
|
||||
{ name: 'blue', color: '#0000ff' },
|
||||
]}
|
||||
value={{ name: "red", color: "#ff0000" }}
|
||||
value={{ name: 'red', color: '#ff0000' }}
|
||||
onChange={color => color && console.log(color.name)}
|
||||
/>;
|
||||
|
||||
//
|
||||
// color-picker
|
||||
//
|
||||
<C.ColorPicker
|
||||
color="#ff0000"
|
||||
onChangeComplete={color => console.log(color.hex)}
|
||||
/>;
|
||||
<C.ColorPicker color="#ff0000" onChangeComplete={color => console.log(color.hex)} />;
|
||||
|
||||
//
|
||||
// dashicon
|
||||
@@ -137,15 +128,8 @@ interface MyCompleteOption {
|
||||
//
|
||||
// date-time
|
||||
//
|
||||
<C.DatePicker
|
||||
isInvalidDate={date => isNaN(date.valueOf())}
|
||||
onChange={date => console.log(date.toUpperCase())}
|
||||
/>;
|
||||
<C.TimePicker
|
||||
currentTime={new Date().toISOString()}
|
||||
onChange={time => console.log(time.toUpperCase())}
|
||||
is12Hour
|
||||
/>;
|
||||
<C.DatePicker isInvalidDate={date => isNaN(date.valueOf())} onChange={date => console.log(date.toUpperCase())} />;
|
||||
<C.TimePicker currentTime={new Date().toISOString()} onChange={time => console.log(time.toUpperCase())} is12Hour />;
|
||||
<C.DateTimePicker onChange={date => console.log(date.toUpperCase())} />;
|
||||
|
||||
//
|
||||
@@ -154,20 +138,14 @@ interface MyCompleteOption {
|
||||
<C.Disabled>
|
||||
<input type="text" />
|
||||
</C.Disabled>;
|
||||
<C.Disabled.Consumer>
|
||||
{isDisabled => <button style={{ opacity: isDisabled ? 0.5 : 1 }} />}
|
||||
</C.Disabled.Consumer>;
|
||||
<C.Disabled.Consumer>{isDisabled => <button style={{ opacity: isDisabled ? 0.5 : 1 }} />}</C.Disabled.Consumer>;
|
||||
|
||||
//
|
||||
// draggable
|
||||
//
|
||||
<C.Draggable elementId="draggable-panel" transferData={{}}>
|
||||
{({ onDraggableStart, onDraggableEnd }) => (
|
||||
<div
|
||||
onDragStart={onDraggableStart}
|
||||
onDragEnd={onDraggableEnd}
|
||||
draggable={true}
|
||||
/>
|
||||
<div onDragStart={onDraggableStart} onDragEnd={onDraggableEnd} draggable={true} />
|
||||
)}
|
||||
</C.Draggable>;
|
||||
|
||||
@@ -212,25 +190,25 @@ interface MyCompleteOption {
|
||||
label="Select a direction"
|
||||
controls={[
|
||||
{
|
||||
title: "Up",
|
||||
icon: "arrow-up-alt",
|
||||
onClick: () => console.log("up")
|
||||
title: 'Up',
|
||||
icon: 'arrow-up-alt',
|
||||
onClick: () => console.log('up'),
|
||||
},
|
||||
{
|
||||
title: "Right",
|
||||
icon: "arrow-right-alt",
|
||||
onClick: () => console.log("right")
|
||||
title: 'Right',
|
||||
icon: 'arrow-right-alt',
|
||||
onClick: () => console.log('right'),
|
||||
},
|
||||
{
|
||||
title: "Down",
|
||||
icon: "arrow-down-alt",
|
||||
onClick: () => console.log("down")
|
||||
title: 'Down',
|
||||
icon: 'arrow-down-alt',
|
||||
onClick: () => console.log('down'),
|
||||
},
|
||||
{
|
||||
title: "Left",
|
||||
icon: "arrow-left-alt",
|
||||
onClick: () => console.log("left")
|
||||
}
|
||||
title: 'Left',
|
||||
icon: 'arrow-left-alt',
|
||||
onClick: () => console.log('left'),
|
||||
},
|
||||
]}
|
||||
/>;
|
||||
|
||||
@@ -251,10 +229,7 @@ interface MyCompleteOption {
|
||||
//
|
||||
// focusable-iframe
|
||||
//
|
||||
<C.FocusableIframe
|
||||
src="/my-iframe-url"
|
||||
onFocus={() => console.log("iframe is focused")}
|
||||
/>;
|
||||
<C.FocusableIframe src="/my-iframe-url" onFocus={() => console.log('iframe is focused')} />;
|
||||
|
||||
//
|
||||
// font-size-picker
|
||||
@@ -262,15 +237,15 @@ interface MyCompleteOption {
|
||||
<C.FontSizePicker
|
||||
fontSizes={[
|
||||
{
|
||||
name: "Small",
|
||||
slug: "small",
|
||||
size: 12
|
||||
name: 'Small',
|
||||
slug: 'small',
|
||||
size: 12,
|
||||
},
|
||||
{
|
||||
name: "Big",
|
||||
slug: "big",
|
||||
size: 26
|
||||
}
|
||||
name: 'Big',
|
||||
slug: 'big',
|
||||
size: 26,
|
||||
},
|
||||
]}
|
||||
value={16}
|
||||
fallbackFontSize={16}
|
||||
@@ -280,39 +255,37 @@ interface MyCompleteOption {
|
||||
//
|
||||
// form-file-upload
|
||||
//
|
||||
<C.FormFileUpload accept="image/*" onChange={() => console.log("new image")}>
|
||||
<C.FormFileUpload accept="image/*" icon="welcome-learn-more" onChange={() => console.log('new image')}>
|
||||
Upload
|
||||
</C.FormFileUpload>;
|
||||
<C.FormFileUpload
|
||||
multiple
|
||||
accept="application/pdf"
|
||||
onChange={() => console.log("changed")}
|
||||
render={({ openFileDialog }) => (
|
||||
<button onClick={openFileDialog}>Open dialog</button>
|
||||
)}
|
||||
onChange={() => console.log('changed')}
|
||||
render={({ openFileDialog }) => <button onClick={openFileDialog}>Open dialog</button>}
|
||||
/>;
|
||||
|
||||
//
|
||||
// form-toggle
|
||||
//
|
||||
<C.FormToggle checked={true} onChange={() => console.log("changed")} />;
|
||||
<C.FormToggle checked={true} onChange={() => console.log('changed')} />;
|
||||
|
||||
//
|
||||
// form-token-field
|
||||
//
|
||||
<C.FormTokenField
|
||||
value={[
|
||||
"foo",
|
||||
'foo',
|
||||
{
|
||||
value: "bar",
|
||||
status: "success"
|
||||
value: 'bar',
|
||||
status: 'success',
|
||||
},
|
||||
"baz",
|
||||
'baz',
|
||||
{
|
||||
value: "qux"
|
||||
}
|
||||
value: 'qux',
|
||||
},
|
||||
]}
|
||||
suggestions={["foo", "bar", "baz", "qux"]}
|
||||
suggestions={['foo', 'bar', 'baz', 'qux']}
|
||||
onChange={tokens => console.log(tokens)}
|
||||
/>;
|
||||
|
||||
@@ -341,16 +314,16 @@ const IconFunctionComponent = (props: { foo: number; bar: number }) => (
|
||||
// icon-button
|
||||
//
|
||||
<C.IconButton icon="ellipsis" label="More" />;
|
||||
<C.IconButton icon={() => <i>foo</i>} onClick={() => console.log("clicked")} />;
|
||||
<C.IconButton icon={() => <i>foo</i>} onClick={() => console.log('clicked')} />;
|
||||
|
||||
//
|
||||
// keyboard-shortcuts
|
||||
//
|
||||
const kbshortcutActionOne = () => console.log("action 1");
|
||||
const kbshortcutActionTwo = () => console.log("action 1");
|
||||
const kbshortcutActionOne = () => console.log('action 1');
|
||||
const kbshortcutActionTwo = () => console.log('action 1');
|
||||
const kbshortcuts = {
|
||||
"mod+a": kbshortcutActionOne,
|
||||
"ctrl+shift+j": kbshortcutActionTwo
|
||||
'mod+a': kbshortcutActionOne,
|
||||
'ctrl+shift+j': kbshortcutActionTwo,
|
||||
};
|
||||
<C.KeyboardShortcuts shortcuts={kbshortcuts} eventName="keyup">
|
||||
<div>Hello world</div>
|
||||
@@ -361,12 +334,7 @@ const kbshortcuts = {
|
||||
// menu-group, menu-item
|
||||
//
|
||||
<C.MenuGroup>
|
||||
<C.MenuItem
|
||||
icon="yes"
|
||||
isSelected={true}
|
||||
onClick={() => console.log("clicked")}
|
||||
isLarge
|
||||
>
|
||||
<C.MenuItem icon="yes" isSelected={true} onClick={() => console.log('clicked')} isLarge>
|
||||
Toggle
|
||||
</C.MenuItem>
|
||||
</C.MenuGroup>;
|
||||
@@ -377,22 +345,22 @@ const kbshortcuts = {
|
||||
<C.MenuItemsChoice
|
||||
choices={[
|
||||
{
|
||||
value: "visual",
|
||||
label: "Visual Editor"
|
||||
value: 'visual',
|
||||
label: 'Visual Editor',
|
||||
},
|
||||
{
|
||||
value: "text",
|
||||
label: "Code Editor",
|
||||
shortcut: "ctrl+shift+c"
|
||||
value: 'text',
|
||||
label: 'Code Editor',
|
||||
shortcut: 'ctrl+shift+c',
|
||||
},
|
||||
{
|
||||
value: "other",
|
||||
label: "Other Editor",
|
||||
value: 'other',
|
||||
label: 'Other Editor',
|
||||
shortcut: {
|
||||
display: "ctrl+alt+o",
|
||||
ariaLabel: "use some other editor"
|
||||
}
|
||||
}
|
||||
display: 'ctrl+alt+o',
|
||||
ariaLabel: 'use some other editor',
|
||||
},
|
||||
},
|
||||
]}
|
||||
value="visual"
|
||||
onSelect={value => console.log(`selected value is ${value}`)}
|
||||
@@ -401,22 +369,14 @@ const kbshortcuts = {
|
||||
//
|
||||
// modal
|
||||
//
|
||||
<C.Modal
|
||||
title="This is my modal"
|
||||
onRequestClose={() => console.log("closing modal")}
|
||||
>
|
||||
<button onClick={() => console.log("clicked")}>
|
||||
My custom close button
|
||||
</button>
|
||||
<C.Modal title="This is my modal" onRequestClose={() => console.log('closing modal')}>
|
||||
<button onClick={() => console.log('clicked')}>My custom close button</button>
|
||||
</C.Modal>;
|
||||
|
||||
//
|
||||
// navigable-container
|
||||
//
|
||||
<C.NavigableMenu
|
||||
onNavigate={(idx, el) => console.log(el.nodeName)}
|
||||
orientation="horizontal"
|
||||
>
|
||||
<C.NavigableMenu onNavigate={(idx, el) => console.log(el.nodeName)} orientation="horizontal">
|
||||
<button>Item 1</button>
|
||||
<button>Item 2</button>
|
||||
<button>Item 3</button>
|
||||
@@ -434,20 +394,20 @@ const kbshortcuts = {
|
||||
<C.Notice
|
||||
actions={[
|
||||
{
|
||||
label: "Action One",
|
||||
className: "foo",
|
||||
label: 'Action One',
|
||||
className: 'foo',
|
||||
onClick() {
|
||||
console.log("clicked");
|
||||
}
|
||||
console.log('clicked');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Action Two",
|
||||
url: "https://wordpress.org",
|
||||
noDefaultClasses: true
|
||||
}
|
||||
label: 'Action Two',
|
||||
url: 'https://wordpress.org',
|
||||
noDefaultClasses: true,
|
||||
},
|
||||
]}
|
||||
status="success"
|
||||
onRemove={() => console.log("notice removed")}
|
||||
onRemove={() => console.log('notice removed')}
|
||||
>
|
||||
<h1>Hello World</h1>
|
||||
</C.Notice>;
|
||||
@@ -455,10 +415,10 @@ const kbshortcuts = {
|
||||
className="my-notice-list"
|
||||
notices={[
|
||||
{
|
||||
id: "1",
|
||||
content: "Hello",
|
||||
actions: [{ label: "Action One", url: "https://wordpress.org" }]
|
||||
}
|
||||
id: '1',
|
||||
content: 'Hello',
|
||||
actions: [{ label: 'Action One', url: 'https://wordpress.org' }],
|
||||
},
|
||||
]}
|
||||
></C.NoticeList>;
|
||||
|
||||
@@ -466,20 +426,12 @@ const kbshortcuts = {
|
||||
// panel
|
||||
//
|
||||
<C.Panel header="My Panel" className="foo">
|
||||
<C.PanelBody
|
||||
title="Panel Body One"
|
||||
icon={() => <i>icon</i>}
|
||||
initialOpen={true}
|
||||
>
|
||||
<C.PanelBody title="Panel Body One" icon={() => <i>icon</i>} initialOpen={true}>
|
||||
<C.PanelRow>My Panel Inputs and Labels</C.PanelRow>
|
||||
</C.PanelBody>
|
||||
</C.Panel>;
|
||||
<C.Panel header="My Other Panel">
|
||||
<C.PanelBody
|
||||
title="Panel Body Two"
|
||||
icon="welcome-widgets-menus"
|
||||
initialOpen={true}
|
||||
>
|
||||
<C.PanelBody title="Panel Body Two" icon="welcome-widgets-menus" initialOpen={true}>
|
||||
<C.PanelRow className="foo">My Panel Inputs and Labels</C.PanelRow>
|
||||
</C.PanelBody>
|
||||
</C.Panel>;
|
||||
@@ -509,10 +461,7 @@ const kbshortcuts = {
|
||||
//
|
||||
// query-controls
|
||||
//
|
||||
<C.QueryControls
|
||||
numberOfItems={3}
|
||||
onNumberOfItemsChange={n => console.log(Math.floor(n))}
|
||||
/>;
|
||||
<C.QueryControls numberOfItems={3} onNumberOfItemsChange={n => console.log(Math.floor(n))} />;
|
||||
<C.QueryControls
|
||||
orderBy="title"
|
||||
order="asc"
|
||||
@@ -522,19 +471,19 @@ const kbshortcuts = {
|
||||
categoriesList={[
|
||||
{
|
||||
id: 1,
|
||||
name: "Category 1",
|
||||
parent: 0
|
||||
name: 'Category 1',
|
||||
parent: 0,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Category 1b",
|
||||
parent: 1
|
||||
name: 'Category 1b',
|
||||
parent: 1,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Category 2",
|
||||
parent: 0
|
||||
}
|
||||
name: 'Category 2',
|
||||
parent: 0,
|
||||
},
|
||||
]}
|
||||
selectedCategoryId={1}
|
||||
onCategoryChange={categoryId => console.log(Math.floor(categoryId))}
|
||||
@@ -548,21 +497,21 @@ const kbshortcuts = {
|
||||
label="User type"
|
||||
help="The type of the current user"
|
||||
selected="a"
|
||||
options={[{ label: "Author", value: "a" }, { label: "Editor", value: "e" }]}
|
||||
onChange={value => console.log(value.toUpperCase())}
|
||||
options={[{ label: 'Author', value: 'a' }, { label: 'Editor', value: 'e' }]}
|
||||
onChange={value => value && console.log(value.toUpperCase())}
|
||||
/>;
|
||||
<C.RadioControl
|
||||
label="User type"
|
||||
help="The type of the current user"
|
||||
selected={{ foo: 'bar' }}
|
||||
options={[{ label: 'Author', value: { foo: 'bar' } }, { label: 'Editor', value: { foo: 'baz' } }]}
|
||||
onChange={value => value && console.log(value.foo)}
|
||||
/>;
|
||||
|
||||
//
|
||||
// range-control
|
||||
//
|
||||
<C.RangeControl
|
||||
beforeIcon="move"
|
||||
label="Columns"
|
||||
value={5}
|
||||
min={2}
|
||||
max={10}
|
||||
onChange={value => console.log(value)}
|
||||
/>;
|
||||
<C.RangeControl beforeIcon="move" label="Columns" value={5} min={2} max={10} onChange={value => console.log(value)} />;
|
||||
|
||||
//
|
||||
// resizable-box
|
||||
@@ -570,7 +519,7 @@ const kbshortcuts = {
|
||||
<C.ResizableBox
|
||||
size={{
|
||||
height: 100,
|
||||
width: 100
|
||||
width: 100,
|
||||
}}
|
||||
minHeight="50"
|
||||
minWidth={50}
|
||||
@@ -582,7 +531,7 @@ const kbshortcuts = {
|
||||
topRight: false,
|
||||
bottomRight: true,
|
||||
bottomLeft: false,
|
||||
topLeft: false
|
||||
topLeft: false,
|
||||
}}
|
||||
/>;
|
||||
|
||||
@@ -590,10 +539,7 @@ const kbshortcuts = {
|
||||
// responsive-wrapper
|
||||
//
|
||||
<C.ResponsiveWrapper naturalWidth={2000} naturalHeight={680}>
|
||||
<img
|
||||
src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
|
||||
alt="WordPress"
|
||||
/>
|
||||
<img src="https://s.w.org/style/images/about/WordPress-logotype-standard.png" alt="WordPress" />
|
||||
</C.ResponsiveWrapper>;
|
||||
|
||||
//
|
||||
@@ -612,22 +558,14 @@ const kbshortcuts = {
|
||||
<C.SelectControl
|
||||
label="Size"
|
||||
value="50%"
|
||||
options={[
|
||||
{ label: "Big", value: "100%" },
|
||||
{ label: "Medium", value: "50%" },
|
||||
{ label: "Small", value: "25%" }
|
||||
]}
|
||||
options={[{ label: 'Big', value: '100%' }, { label: 'Medium', value: '50%' }, { label: 'Small', value: '25%' }]}
|
||||
onChange={size => console.log(size)}
|
||||
/>;
|
||||
<C.SelectControl
|
||||
label="Size"
|
||||
value={["50%"]}
|
||||
value={['50%']}
|
||||
multiple
|
||||
options={[
|
||||
{ label: "Big", value: "100%" },
|
||||
{ label: "Medium", value: "50%" },
|
||||
{ label: "Small", value: "25%" }
|
||||
]}
|
||||
options={[{ label: 'Big', value: '100%' }, { label: 'Medium', value: '50%' }, { label: 'Small', value: '25%' }]}
|
||||
onChange={size => console.log(size)}
|
||||
/>;
|
||||
|
||||
@@ -638,19 +576,19 @@ const kbshortcuts = {
|
||||
<C.Snackbar
|
||||
actions={[
|
||||
{
|
||||
label: "Action One",
|
||||
className: "foo",
|
||||
label: 'Action One',
|
||||
className: 'foo',
|
||||
onClick() {
|
||||
console.log("clicked");
|
||||
}
|
||||
console.log('clicked');
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Action Two",
|
||||
url: "https://wordpress.org",
|
||||
noDefaultClasses: true
|
||||
}
|
||||
label: 'Action Two',
|
||||
url: 'https://wordpress.org',
|
||||
noDefaultClasses: true,
|
||||
},
|
||||
]}
|
||||
onRemove={() => console.log("removed")}
|
||||
onRemove={() => console.log('removed')}
|
||||
>
|
||||
Post published successfully.
|
||||
</C.Snackbar>;
|
||||
@@ -658,10 +596,10 @@ const kbshortcuts = {
|
||||
className="my-notice-list"
|
||||
notices={[
|
||||
{
|
||||
id: "1",
|
||||
content: "Hello",
|
||||
actions: [{ label: "Action One", url: "https://wordpress.org" }]
|
||||
}
|
||||
id: '1',
|
||||
content: 'Hello',
|
||||
actions: [{ label: 'Action One', url: 'https://wordpress.org' }],
|
||||
},
|
||||
]}
|
||||
/>;
|
||||
|
||||
@@ -679,15 +617,15 @@ const kbshortcuts = {
|
||||
onSelect={tabName => console.log(tabName.toUpperCase())}
|
||||
tabs={[
|
||||
{
|
||||
name: "tab1",
|
||||
title: "Tab 1",
|
||||
className: "tab-one"
|
||||
name: 'tab1',
|
||||
title: 'Tab 1',
|
||||
className: 'tab-one',
|
||||
},
|
||||
{
|
||||
name: "tab2",
|
||||
title: "Tab 2",
|
||||
foo: "bar"
|
||||
}
|
||||
name: 'tab2',
|
||||
title: 'Tab 2',
|
||||
foo: 'bar',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{tab => <p>{tab.title}</p>}
|
||||
@@ -696,17 +634,8 @@ const kbshortcuts = {
|
||||
//
|
||||
// text-control
|
||||
//
|
||||
<C.TextControl
|
||||
label="My text value"
|
||||
value={"foo"}
|
||||
onChange={value => console.log(value.toUpperCase())}
|
||||
/>;
|
||||
<C.TextControl
|
||||
type="number"
|
||||
label="My numeric value"
|
||||
value={3}
|
||||
onChange={value => console.log(value.toUpperCase())}
|
||||
/>;
|
||||
<C.TextControl label="My text value" value={'foo'} onChange={value => console.log(value.toUpperCase())} />;
|
||||
<C.TextControl type="number" label="My numeric value" value={3} onChange={value => console.log(value.toUpperCase())} />;
|
||||
|
||||
//
|
||||
// textarea-control
|
||||
@@ -721,11 +650,7 @@ const kbshortcuts = {
|
||||
//
|
||||
// toggle-control
|
||||
//
|
||||
<C.ToggleControl
|
||||
label="Controlled"
|
||||
checked={true}
|
||||
onChange={isChecked => console.log(isChecked)}
|
||||
/>;
|
||||
<C.ToggleControl label="Controlled" checked={true} onChange={isChecked => console.log(isChecked)} />;
|
||||
<C.ToggleControl label="Uncontrolled" />;
|
||||
|
||||
//
|
||||
@@ -737,72 +662,68 @@ const kbshortcuts = {
|
||||
label="Testing array of controls"
|
||||
controls={[
|
||||
{
|
||||
icon: "yes",
|
||||
title: "Yes",
|
||||
icon: 'yes',
|
||||
title: 'Yes',
|
||||
onClick() {},
|
||||
shortcut: {
|
||||
display: "Yes"
|
||||
display: 'Yes',
|
||||
},
|
||||
isDisabled: false
|
||||
isDisabled: false,
|
||||
},
|
||||
{
|
||||
icon: "no",
|
||||
title: "No",
|
||||
icon: 'no',
|
||||
title: 'No',
|
||||
onClick() {},
|
||||
subscript: "no",
|
||||
subscript: 'no',
|
||||
isActive: false,
|
||||
shortcut: "No"
|
||||
}
|
||||
shortcut: 'No',
|
||||
},
|
||||
]}
|
||||
/>;
|
||||
<C.Toolbar
|
||||
isCollapsed
|
||||
icon="wordpress-alt"
|
||||
label="Testing array of 'control sets'"
|
||||
title="Testing array of 'control sets'"
|
||||
controls={[
|
||||
[
|
||||
{
|
||||
icon: "yes",
|
||||
title: "Yes",
|
||||
onClick() {}
|
||||
icon: 'yes',
|
||||
title: 'Yes',
|
||||
onClick() {},
|
||||
},
|
||||
{
|
||||
icon: "no",
|
||||
title: "No",
|
||||
onClick() {}
|
||||
}
|
||||
icon: 'no',
|
||||
title: 'No',
|
||||
onClick() {},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
icon: "carrot",
|
||||
title: "Carrots are delicious",
|
||||
onClick() {}
|
||||
}
|
||||
]
|
||||
icon: 'carrot',
|
||||
title: 'Carrots are delicious',
|
||||
onClick() {},
|
||||
},
|
||||
],
|
||||
]}
|
||||
/>;
|
||||
|
||||
//
|
||||
// toolbar-button
|
||||
//
|
||||
<C.ToolbarButton
|
||||
icon="editor-help"
|
||||
title="Minimal Button"
|
||||
onClick={() => console.log("clicked")}
|
||||
/>;
|
||||
<C.ToolbarButton icon="editor-help" title="Minimal Button" onClick={() => console.log('clicked')} />;
|
||||
<C.ToolbarButton
|
||||
className="bar"
|
||||
containerClassName="foo"
|
||||
extraProps={{
|
||||
labelPosition: "bottom right",
|
||||
labelPosition: 'bottom right',
|
||||
onFocus(e) {
|
||||
console.log(e.currentTarget.nodeName);
|
||||
}
|
||||
},
|
||||
}}
|
||||
icon="editor-code"
|
||||
subscript="hi"
|
||||
title="Toolbar Button"
|
||||
onClick={() => console.log("clicked")}
|
||||
onClick={() => console.log('clicked')}
|
||||
/>;
|
||||
|
||||
//
|
||||
@@ -814,7 +735,7 @@ const kbshortcuts = {
|
||||
<C.Tooltip text="Hello world" position="bottom center" shortcut="ctrl+s">
|
||||
<button>Hover me for more information</button>
|
||||
</C.Tooltip>;
|
||||
<C.Tooltip text={<h1>Hello world</h1>} shortcut={{ display: "ctrl+s" }}>
|
||||
<C.Tooltip text={<h1>Hello world</h1>} shortcut={{ display: 'ctrl+s' }}>
|
||||
<button>Hover me for more information</button>
|
||||
</C.Tooltip>;
|
||||
|
||||
@@ -828,41 +749,41 @@ const kbshortcuts = {
|
||||
selectedId="foo"
|
||||
tree={[
|
||||
{
|
||||
id: "grandparent-1",
|
||||
name: "first grandparent",
|
||||
id: 'grandparent-1',
|
||||
name: 'first grandparent',
|
||||
children: [
|
||||
{
|
||||
id: "parent-1",
|
||||
name: "parent",
|
||||
id: 'parent-1',
|
||||
name: 'parent',
|
||||
children: [
|
||||
{
|
||||
id: "child-1",
|
||||
name: "child"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
id: 'child-1',
|
||||
name: 'child',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "grandparent-2",
|
||||
name: "second grandparent",
|
||||
id: 'grandparent-2',
|
||||
name: 'second grandparent',
|
||||
children: [
|
||||
{
|
||||
id: "parent-2",
|
||||
name: "parent",
|
||||
id: 'parent-2',
|
||||
name: 'parent',
|
||||
children: [
|
||||
{
|
||||
id: "child-2",
|
||||
name: "child"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
id: 'child-2',
|
||||
name: 'child',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "no children",
|
||||
name: "Childless"
|
||||
}
|
||||
id: 'no children',
|
||||
name: 'Childless',
|
||||
},
|
||||
]}
|
||||
onChange={id => console.log(id)}
|
||||
/>;
|
||||
@@ -870,10 +791,7 @@ const kbshortcuts = {
|
||||
//
|
||||
// isolated-event-container
|
||||
//
|
||||
<C.IsolatedEventContainer
|
||||
className="component-some_component"
|
||||
onClick={e => console.log(e.currentTarget.nodeName)}
|
||||
>
|
||||
<C.IsolatedEventContainer className="component-some_component" onClick={e => console.log(e.currentTarget.nodeName)}>
|
||||
<p>This is an isolated component</p>
|
||||
</C.IsolatedEventContainer>;
|
||||
|
||||
@@ -898,13 +816,13 @@ const MySlotFillProvider = () => {
|
||||
);
|
||||
};
|
||||
(() => {
|
||||
const { Fill, Slot } = C.createSlotFill("Toolbar");
|
||||
const { Fill, Slot } = C.createSlotFill('Toolbar');
|
||||
|
||||
const ToolbarItem = () => <Fill>My item</Fill>;
|
||||
|
||||
const Toolbar = () => (
|
||||
<div className="toolbar">
|
||||
<Slot bubblesVirtually fillProps={{ foo: "bar" }} />
|
||||
<Slot bubblesVirtually fillProps={{ foo: 'bar' }} />
|
||||
</div>
|
||||
);
|
||||
})();
|
||||
@@ -924,13 +842,11 @@ const MySlotFillProvider = () => {
|
||||
// higher-order/navigate-regions
|
||||
//
|
||||
(() => {
|
||||
const EnhancedComponent = C.navigateRegions(
|
||||
({ foo, bar }: { foo: string; bar: number }) => (
|
||||
<div>
|
||||
{foo} and {bar}{" "}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
const EnhancedComponent = C.navigateRegions(({ foo, bar }: { foo: string; bar: number }) => (
|
||||
<div>
|
||||
{foo} and {bar}{' '}
|
||||
</div>
|
||||
));
|
||||
<EnhancedComponent foo="hello" bar={123} />;
|
||||
})();
|
||||
|
||||
@@ -938,13 +854,11 @@ const MySlotFillProvider = () => {
|
||||
// higher-order/with-constrained-tabbing
|
||||
//
|
||||
(() => {
|
||||
const EnhancedComponent = C.withConstrainedTabbing(
|
||||
({ foo, bar }: { foo: string; bar: number }) => (
|
||||
<div>
|
||||
{foo} and {bar}{" "}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
const EnhancedComponent = C.withConstrainedTabbing(({ foo, bar }: { foo: string; bar: number }) => (
|
||||
<div>
|
||||
{foo} and {bar}{' '}
|
||||
</div>
|
||||
));
|
||||
<EnhancedComponent foo="hello" bar={123} />;
|
||||
})();
|
||||
|
||||
@@ -952,15 +866,11 @@ const MySlotFillProvider = () => {
|
||||
// higher-order/with-fallback-styles
|
||||
//
|
||||
(() => {
|
||||
const OriginalComponent = (props: {
|
||||
foo: string;
|
||||
bar: string;
|
||||
baz: string;
|
||||
}) => <div>{JSON.stringify(props)}</div>;
|
||||
const OriginalComponent = (props: { foo: string; bar: string; baz: string }) => <div>{JSON.stringify(props)}</div>;
|
||||
const EnhancedComponent = C.withFallbackStyles((node, ownProps) => {
|
||||
console.log(node.nodeName);
|
||||
return {
|
||||
baz: "baz"
|
||||
baz: 'baz',
|
||||
};
|
||||
})(OriginalComponent);
|
||||
<EnhancedComponent foo="" bar="" />;
|
||||
@@ -970,17 +880,11 @@ const MySlotFillProvider = () => {
|
||||
// higher-order/with-filters
|
||||
//
|
||||
(() => {
|
||||
const OriginalComponent = (props: { foo: string; bar: string }) => (
|
||||
<div>{JSON.stringify(props)}</div>
|
||||
);
|
||||
const EnhancedComponentSameProps = C.withFilters("myFilter")(
|
||||
OriginalComponent
|
||||
);
|
||||
const OriginalComponent = (props: { foo: string; bar: string }) => <div>{JSON.stringify(props)}</div>;
|
||||
const EnhancedComponentSameProps = C.withFilters('myFilter')(OriginalComponent);
|
||||
<EnhancedComponentSameProps foo="" bar="" />;
|
||||
|
||||
const EnhancedComponentNewProps = C.withFilters<{ baz: number }>(
|
||||
"myFilter"
|
||||
)(OriginalComponent);
|
||||
const EnhancedComponentNewProps = C.withFilters<{ baz: number }>('myFilter')(OriginalComponent);
|
||||
<EnhancedComponentNewProps baz={25} />;
|
||||
})();
|
||||
|
||||
@@ -991,7 +895,7 @@ const MySlotFillProvider = () => {
|
||||
const EnhancedComponentClassExpression = C.withFocusOutside(
|
||||
class extends Component<{ foo: string }> {
|
||||
handleFocusOutside() {
|
||||
console.log("Hello World!");
|
||||
console.log('Hello World!');
|
||||
}
|
||||
render() {
|
||||
return <div>{this.props.foo}</div>;
|
||||
@@ -1002,15 +906,13 @@ const MySlotFillProvider = () => {
|
||||
|
||||
class PredefinedComponentClass extends Component<{ bar: number }> {
|
||||
handleFocusOutside() {
|
||||
console.log("Hello World!");
|
||||
console.log('Hello World!');
|
||||
}
|
||||
render() {
|
||||
return <div>{this.props.bar}</div>;
|
||||
}
|
||||
}
|
||||
const EnhancedComponentPredefinedClass = C.withFocusOutside(
|
||||
PredefinedComponentClass
|
||||
);
|
||||
const EnhancedComponentPredefinedClass = C.withFocusOutside(PredefinedComponentClass);
|
||||
<EnhancedComponentPredefinedClass bar={1} />;
|
||||
})();
|
||||
|
||||
@@ -1018,27 +920,21 @@ const MySlotFillProvider = () => {
|
||||
// higher-order/with-focus-return
|
||||
//
|
||||
(() => {
|
||||
const EnhancedComponentDefaultBehavior = C.withFocusReturn(
|
||||
(props: { foo: string; bar: string }) => (
|
||||
<div>{JSON.stringify(props)}</div>
|
||||
)
|
||||
);
|
||||
const EnhancedComponentDefaultBehavior = C.withFocusReturn((props: { foo: string; bar: string }) => (
|
||||
<div>{JSON.stringify(props)}</div>
|
||||
));
|
||||
<EnhancedComponentDefaultBehavior foo="foo" bar="bar" />;
|
||||
|
||||
const EnhancedComponentCustomBehavior = C.withFocusReturn({
|
||||
onFocusReturn() {
|
||||
console.log("Hello World!");
|
||||
}
|
||||
})((props: { foo: string; bar: string }) => (
|
||||
<div>{JSON.stringify(props)}</div>
|
||||
));
|
||||
console.log('Hello World!');
|
||||
},
|
||||
})((props: { foo: string; bar: string }) => <div>{JSON.stringify(props)}</div>);
|
||||
<EnhancedComponentCustomBehavior foo="foo" bar="bar" />;
|
||||
|
||||
const EnhancedComponentCustomBehaviorDefault = C.withFocusReturn({})(
|
||||
(props: { foo: string; bar: string }) => (
|
||||
<div>{JSON.stringify(props)}</div>
|
||||
)
|
||||
);
|
||||
const EnhancedComponentCustomBehaviorDefault = C.withFocusReturn({})((props: { foo: string; bar: string }) => (
|
||||
<div>{JSON.stringify(props)}</div>
|
||||
));
|
||||
<EnhancedComponentCustomBehaviorDefault foo="foo" bar="bar" />;
|
||||
})();
|
||||
|
||||
@@ -1046,16 +942,8 @@ const MySlotFillProvider = () => {
|
||||
// higher-order/with-notices
|
||||
//
|
||||
(() => {
|
||||
const OriginalComponent = (
|
||||
props: { foo: string } & C.withNotices.Props
|
||||
) => (
|
||||
<button
|
||||
onClick={() =>
|
||||
props.noticeOperations.createErrorNotice("Hello World!")
|
||||
}
|
||||
>
|
||||
{props.foo}
|
||||
</button>
|
||||
const OriginalComponent = (props: { foo: string } & C.withNotices.Props) => (
|
||||
<button onClick={() => props.noticeOperations.createErrorNotice('Hello World!')}>{props.foo}</button>
|
||||
);
|
||||
const WrappedComponent = C.withNotices(OriginalComponent);
|
||||
<WrappedComponent foo="Hello World!" />;
|
||||
@@ -1070,15 +958,11 @@ const MySlotFillProvider = () => {
|
||||
debouncedSpeak: any;
|
||||
foo: string;
|
||||
}
|
||||
const MyComponentWithSpokenMessages = C.withSpokenMessages(
|
||||
({ speak, debouncedSpeak, foo }: Props) => (
|
||||
<div>
|
||||
<button onClick={() => speak("Spoken message")}>Speak</button>
|
||||
<button onClick={() => debouncedSpeak("Delayed message")}>
|
||||
Debounced Speak
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
const MyComponentWithSpokenMessages = C.withSpokenMessages(({ speak, debouncedSpeak, foo }: Props) => (
|
||||
<div>
|
||||
<button onClick={() => speak('Spoken message')}>Speak</button>
|
||||
<button onClick={() => debouncedSpeak('Delayed message')}>Debounced Speak</button>
|
||||
</div>
|
||||
));
|
||||
<MyComponentWithSpokenMessages foo="Hello World!" />;
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user