Fundamental React: Fix 0.8.0 types (#43067)

* fix(fundamental-react): Fix 0.8.0 types

* fix(fundamental-react): Complete 0.8.0 types and tests
This commit is contained in:
Sam Kvale 2020-03-12 20:11:10 -05:00 committed by GitHub
parent 64cb3541bc
commit a806d97668
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
63 changed files with 1313 additions and 1158 deletions

File diff suppressed because it is too large Load Diff

View File

@ -7,23 +7,21 @@
// TypeScript Version: 2.8
export { default as ActionBar } from "./lib/ActionBar/ActionBar";
export { default as Alert } from "./lib/Alert/Alert";
export { default as Badge } from "./lib/Badge/Badge";
export { default as Breadcrumb } from "./lib/Breadcrumb/Breadcrumb";
export { default as Button } from "./lib/Button/Button";
export { default as ButtonGroup } from "./lib/Button/ButtonGroup";
export { default as Calendar } from "./lib/Calendar/Calendar";
export { default as ComboboxInput } from "./lib/ComboboxInput/ComboboxInput";
export { default as Counter } from "./lib/Badge/Counter";
export { default as Counter } from "./lib/Counter/Counter";
export { default as DatePicker } from "./lib/DatePicker/DatePicker";
export { default as Dropdown } from "./lib/Dropdown/Dropdown";
export { default as Dialog } from "./lib/Dialog/Dialog";
export { default as Checkbox } from "./lib/Forms/Checkbox";
export { default as FormFieldset } from "./lib/Forms/FormFieldset";
export { default as FormGroup } from "./lib/Forms/FormGroup";
export { default as FormInput } from "./lib/Forms/FormInput";
export { default as FormItem } from "./lib/Forms/FormItem";
export { default as FormLabel } from "./lib/Forms/FormLabel";
export { default as FormLegend } from "./lib/Forms/FormLegend";
export { default as FormMessage } from "./lib/Forms/FormMessage";
export { default as FormRadioGroup } from "./lib/Forms/FormRadioGroup";
export { default as FormRadioItem } from "./lib/Forms/FormRadioItem";
export { default as FormSelect } from "./lib/Forms/FormSelect";
@ -32,31 +30,32 @@ export { default as FormTextarea } from "./lib/Forms/FormTextarea";
export { default as Icon } from "./lib/Icon/Icon";
export { default as Identifier } from "./lib/Identifier/Identifier";
export { default as Image } from "./lib/Image/Image";
export { default as InfoLabel } from "./lib/InfoLabel/InfoLabel";
export { default as InlineHelp } from "./lib/InlineHelp/InlineHelp";
export { default as InputGroup } from "./lib/InputGroup/InputGroup";
export { default as Label } from "./lib/Badge/Label";
export { default as LayoutGrid } from "./lib/LayoutGrid/LayoutGrid";
export { default as Link } from "./lib/Link/Link";
export { default as ListGroup } from "./lib/ListGroup/ListGroup";
export { default as Status } from "./lib/Badge/Status";
export { default as List } from "./lib/List/List";
export {
default as LocalizationEditor
} from "./lib/LocalizationEditor/LocalizationEditor";
export { default as Menu } from "./lib/Menu/Menu";
export { default as Modal } from "./lib/Modal/Modal";
export { default as MessageStrip } from "./lib/MessageStrip/MessageStrip";
export { default as MultiInput } from "./lib/MultiInput/MultiInput";
export { default as Pagination } from "./lib/Pagination/Pagination";
export { default as Panel } from "./lib/Panel/Panel";
export { default as Popover } from "./lib/Popover/Popover";
export { default as SearchInput } from "./lib/SearchInput/SearchInput";
export { default as Select } from "./lib/Select/Select";
export { default as Shellbar } from "./lib/Shellbar/Shellbar";
export { default as SideNav } from "./lib/SideNavigation/SideNav";
export { default as StepInput } from "./lib/StepInput/StepInput";
export { default as Switch } from "./lib/Switch/Switch";
export { default as Tab } from "./lib/Tabs/Tab";
export { default as TabGroup } from "./lib/Tabs/TabGroup";
export { default as Table } from "./lib/Table/Table";
export { default as Tile } from "./lib/Tile/Tile";
export { default as Time } from "./lib/Time/Time";
export { default as TimePicker } from "./lib/TimePicker/TimePicker";
export { default as Toggle } from "./lib/Toggle/Toggle";
export { default as Token } from "./lib/Token/Token";
export { default as TreeView } from "./lib/TreeView/TreeView";

View File

@ -1,43 +1,23 @@
import * as React from "react";
export type ActionBarProps = {
className?: string;
customStyles?: { [x: string]: any };
disableStyles?: boolean;
ref?: React.Ref<HTMLDivElement>;
} & React.HTMLAttributes<HTMLDivElement>;
export type ActionBarActionsProps = {
className?: string;
ref?: React.Ref<HTMLDivElement>;
} & React.HTMLAttributes<HTMLDivElement>;
export type ActionBarBackProps = {
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
className?: string;
disableStyles?: boolean;
buttonProps?: { [x: string]: any };
ref?: React.Ref<HTMLDivElement>;
} & React.HTMLAttributes<HTMLDivElement>;
export type ActionBarHeaderProps = {
title: string;
className?: string;
/* Localized text for the description. */
description?: string;
/* Additional props to be spread to the description's `<p>` element. */
descriptionProps?: { [x: string]: any };
/* Heading level. `<h1>` is reserved for the page title. */
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
ref?: React.Ref<HTMLDivElement>;
titleProps?: { [x: string]: any };
} & React.HTMLAttributes<HTMLDivElement>;
title: string,
actionClassName?: string,
actionProps?: any,
actions?: React.ReactNode,
buttonContainerClassName?: string,
buttonProps?: any,
className?: string,
description?: string,
descriptionProps?: any,
disableStyles?: boolean,
headingLevel?: any,
titleProps?: any,
onBackClick?: (...args: any[]) => any
} & Pick<React.HTMLAttributes<HTMLDivElement>, Exclude<keyof React.HTMLAttributes<HTMLDivElement>, 'children'>>;
export const ActionBar: React.FunctionComponent<ActionBarProps> & {
displayName: "ActionBar";
Actions: React.FunctionComponent<ActionBarActionsProps> & {displayName: "ActionBar.Actions"};
Back: React.FunctionComponent<ActionBarBackProps> & {displayName: "ActionBar.Back"};
Header: React.FunctionComponent<ActionBarHeaderProps> & {displayName: "ActionBar.Header"};
};
export default ActionBar;

View File

@ -1,33 +0,0 @@
import * as React from "react";
export type AlertType = "warning" | "error" | "success" | "information";
export type AlertProps = {
buttonProps?: { [x: string]: any };
className?: string;
customStyles?: { [x: string]: any };
disableStyles?: boolean;
/* Set to **true** to show a dismiss button. */
dismissible?: boolean;
/* Value to be applied to the anchor's `href` attribute. */
link?: string;
/* Additional props to be spread to the link's `<a>` element. */
linkProps?: { [x: string]: any };
/* Localized display text of the link. */
linkText?: string;
localizedText?: {
/* Value for aria-label on the close <button> element. */
close: string;
};
type?: AlertType;
/* Callback function passing event when close button is clicked. */
onCloseClicked?: (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;
} & React.HTMLAttributes<HTMLDivElement>;
declare class Alert extends React.Component<AlertProps> {
static displayName: "Alert";
}
export default Alert;

View File

@ -1,14 +0,0 @@
export type BadgeModifiers = "pill" | "filled";
export type BadgeTypes = "success" | "warning" | "error";
export type BadgeProps = {
className?: string;
customStyles?: { [x: string]: any };
disableStyles?: boolean;
modifier?: BadgeModifiers;
type?: BadgeTypes;
} & { [x: string]: any };
declare const Badge: React.RefForwardingComponent<HTMLDivElement, BadgeProps>;
export default Badge;

View File

@ -1,13 +0,0 @@
export type CounterProps = {
className?: string;
localizedText?: {
/* The aria-label for the <span> element. */
counterLabel: string;
};
/* Set to **true** to enable counter with notification. */
notification?: boolean;
} & { [x: string]: any };
declare const Counter: React.FunctionComponent<CounterProps>;
export default Counter;

View File

@ -1,10 +0,0 @@
export type LabelTypes = "success" | "warning" | "error";
export type LabelProps = {
className?: string;
type?: LabelTypes;
} & { [x: string]: any };
declare const Label: React.FunctionComponent<LabelProps>;
export default Label;

View File

@ -1,18 +0,0 @@
export type StatusType =
| "success"
| "warning"
| "error"
| "available"
| "away"
| "busy"
| "offline";
export type StatusProps = {
className?: string;
glyph?: string;
type?: StatusType;
} & { [x: string]: any };
declare const Status: React.FunctionComponent<StatusProps>;
export default Status;

View File

@ -1,16 +1,14 @@
import * as React from "react";
export type BreadcrumbProps = {
customStyles?: {[x: string]: any};
disableStyles?: boolean;
ref?: React.Ref<HTMLUListElement>
} & Pick<React.HTMLAttributes<HTMLUListElement>, Exclude<keyof React.HTMLAttributes<HTMLUListElement>, 'className'>>;
export type BreadcrumbItemProps = {
/* Text for the internal anchor tag. */
name?: string;
/* An anchor tag will be generated and set to the url prop. Name or child text must be provided. */
url?: string;
className?: string,
name?: string,
url?: string
} & React.HTMLAttributes<HTMLLIElement>;
declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps> & {

View File

@ -1,25 +1,19 @@
import * as React from "react";
export type ButtonOptions = "emphasized" | "light";
export type ButtonOptions = "emphasized" | "transparent";
export type ButtonTypes = "standard" | "positive" | "negative" | "medium";
export type ButtonProps = {
className?: string;
compact?: boolean;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
glyph?: string;
/* Set to **true** if button is part of global navbar. */
navbar?: boolean;
/* Indicates the importance of the button. */
option?: ButtonOptions;
ref?: React.RefObject<HTMLButtonElement>;
/* Set to **true** to set state of the button to "selected". */
selected?: boolean;
type?: ButtonTypes;
/* Value for the `type` attribute on the `<button>` element. */
typeAttr?: "submit" | "reset" | "button";
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
} & React.HTMLAttributes<HTMLButtonElement>;

View File

@ -1,7 +1,6 @@
import * as React from "react";
export type ButtonGroupProps = {
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
} & React.HTMLAttributes<HTMLDivElement>;

View File

@ -1,90 +1,28 @@
import * as React from "react";
export interface CalendarBaseProps {
/* Blocks dates that are in between the blocked dates. */
blockedDates?: Date[];
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Disables dates of a calendar that come after the specified date. */
disableAfterDate?: Date;
/* Disables dates of a calendar that come before the specified date. */
disableBeforeDate?: Date;
/* Disables dates that are in between the disabled dates. */
disabledDates?: Date[];
/* Set to **true** to disable dates after today's date. */
disableFutureDates?: boolean;
/* Set to **true** to disable dates before today's date. */
disablePastDates?: boolean;
/* Disables dates that match a weekday. */
disableWeekday?: string[];
/* Set to **true** to disables dates that match a weekend. */
disableWeekends?: boolean;
localizedText?: {
nextMonth?: string
previousMonth?: string
show12NextYears?: string
show12PreviousYears?: string
};
}
export type CalendarProps = CalendarBaseProps & {
localizedText?: {
/* Full name for Sunday. */
day1Sun: string;
/* Full name for Monday. */
day2Mon: string;
/* Full name for Tuesday. */
day3Tues: string;
/* Full name for Wednesday. */
day4Wed: string;
/* Full name for Thursday. */
day5Thurs: string;
/* Full name for Friday. */
day6Fri: string;
/* Full name for Saturday. */
day7Sat: string;
/* Single character for Sunday. */
dayChar1Sun: string;
/* Single character for Monday. */
dayChar2Mon: string;
/* Single character for Tuesday. */
dayChar3Tues: string;
/* Single character for Wednesday. */
dayChar4Wed: string;
/* Single character for Thursday. */
dayChar5Thurs: string;
/* Single character for Friday. */
dayChar6Fri: string;
/* Single character for Saturday. */
dayChar7Sat: string;
/* Full name for January. */
month01Jan: string;
/* Full name for February. */
month02Feb: string;
/* Full name for March. */
month03Mar: string;
/* Full name for April. */
month04Apr: string;
/* Full name for May. */
month05May: string;
/* Full name for June. */
month06Jun: string;
/* Full name for July. */
month07Jul: string;
/* Full name for August. */
month08Aug: string;
/* Full name for September. */
month09Sep: string;
/* Full name for October. */
month10Oct: string;
/* Full name for November. */
month11Nov: string;
/* Full name for December. */
month12Dec: string;
};
/* Additional props to be spread to the month's `<ul>` element. */
monthListProps?: { [x: string]: any };
/* Additional props to be spread to the `<tbody>` element. */
tableBodyProps?: { [x: string]: any };
/* 'Additional props to be spread to the `<thead>` element.' */
tableHeaderProps?: { [x: string]: any };
/* Additional props to be spread to the `<table>` element. */
tableProps?: { [x: string]: any };
/* Additional props to be spread to the year's `<ul>` element. */
yearListProps?: { [x: string]: any };
onChange?: (date: Date) => void;
} & { [x: string]: any };

View File

@ -2,16 +2,21 @@ import * as React from "react";
import { MenuProps } from "../Menu/Menu";
export type ComboboxInputProps = {
/* An object containing a `Menu` component. */
menu: React.ReactElement<MenuProps>;
buttonProps?: object;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
className?: string;
compact?: boolean;
disableStyles?: boolean;
inputProps?: object;
list: React.ReactNode;
/* An object containing a `Menu` component. */
menu: React.ReactElement<MenuProps>;
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
placeholder?: string;
popoverProps?: object;
validationState?: {
state?: 'error' | 'warning' | 'information' | 'success';
text?: string
}
} & { [x: string]: any };
declare const ComboboxInput: React.FunctionComponent<ComboboxInputProps>;

View File

@ -0,0 +1,13 @@
import * as React from "react";
export type CounterProps = {
disableStyles?: boolean;
localizedText?: {
counterLabel?: string;
};
notification?: boolean;
} & React.HTMLAttributes<HTMLSpanElement>;
declare const Counter: React.FunctionComponent<CounterProps> & {displayName: "Counter"};
export default Counter;

View File

@ -2,12 +2,18 @@ import * as React from "react";
import { CalendarBaseProps } from "../Calendar/Calendar";
export type DatePickerProps = CalendarBaseProps & {
buttonLabel?: string;
buttonProps?: { [x: string]: any };
compact?: boolean;
/* Set to **true** to enable the selection of a date range (begin and end). */
defaultValue?: string;
enableRangeSelection?: boolean;
inputProps?: { [x: string]: any };
locale?: string;
onBlur?: ({date, formattedDate}: {date: Date, formattedDate: string}) => void;
validationState?: {
state?: 'error' | 'warning' | 'information' | 'success';
text?: string
}
} & { [x: string]: any };
declare class DatePicker extends React.Component<DatePickerProps> {}

View File

@ -0,0 +1,24 @@
import * as React from "react";
export type DialogProps = {
actions: React.ReactNode[];
title: string;
backdropClassName?: string;
bodyProps?: any;
className?: string;
contentProps?: any;
disableStyles?: boolean;
footerProps?: any;
header?: string;
headerProps?: any;
headingLevel?: any;
show?: boolean;
size?: any;
subheader?: string;
titleProps?: any;
onClose?: (...args: any[]) => any;
} & React.HTMLAttributes<HTMLSpanElement>;
declare class Dialog extends React.Component<DialogProps> {}
export default Dialog;

View File

@ -1,13 +0,0 @@
import * as React from "react";
export type DropdownProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Set to **true** to enable a dropdown for toolbar. */
standard?: boolean;
} & { [x: string]: any };
declare const Dropdown: React.FunctionComponent<DropdownProps>;
export default Dropdown;

View File

@ -0,0 +1,24 @@
import * as React from "react";
export type CheckboxProps = {
checked?: boolean;
className?: string;
compact?: boolean;
defaultChecked?: boolean;
disabled?: boolean;
disableStyles?: boolean;
id?: string;
indeterminate?: boolean;
inline?: boolean;
inputProps?: any;
labelClasses?: string;
labelProps?: any;
name?: string;
state?: any;
value?: string;
onChange?: (...args: any[]) => any;
} & { [x: string]: any };
declare const Checkbox: React.FunctionComponent<CheckboxProps>;
export default Checkbox;

View File

@ -2,7 +2,6 @@ import * as React from "react";
export type FormFieldsetProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & { [x: string]: any };

View File

@ -1,5 +1,9 @@
import * as React from "react";
declare const FormGroup: React.FunctionComponent<{ [x: string]: any }>;
export type FormGroupProps = {
disableStyles?: boolean;
} & { [x: string]: any };
declare const FormGroup: React.FunctionComponent<FormGroupProps> & {displayName: "FormGroup"};
export default FormGroup;

View File

@ -1,24 +1,20 @@
import * as React from "react";
export type InputType = "normal" | "valid" | "invalid" | "warning";
export type FormInputProps = {
className?: string;
compact?: boolean;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
id?: string;
/* Value for the `name` attribute on the input. */
name?: string;
placeholder?: string;
readOnly?: boolean;
/* Sets the state of the input. Can be left empty for default styles. */
state?: InputType;
/* Value for the `type` attribute on the input. */
type?: string;
/* Value for the `value` attribute on the input. */
value?: string;
validationState?: {
state?: 'error' | 'warning' | 'information' | 'success';
text?: string;
};
value?: string | number;
} & { [x: string]: any };
declare const FormInput: React.FunctionComponent<FormInputProps>;

View File

@ -2,11 +2,8 @@ import * as React from "react";
export type FormItemProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Set to **true** to render an `<input>` with `type` of **checkbox**. */
isCheck?: boolean;
/* Set to **true** to display radio buttons and checkboxes in a row. */
isHorizontal?: boolean;
isInline?: boolean;
} & { [x: string]: any };

View File

@ -2,9 +2,9 @@ import * as React from "react";
export type FormLabelProps = {
className?: string;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
/* Set to **true** for required input fields. */
isInlineHelp?: boolean;
required?: boolean;
} & { [x: string]: any };

View File

@ -2,7 +2,6 @@ import * as React from "react";
export type FormLegendProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & { [x: string]: any };

View File

@ -1,14 +0,0 @@
import * as React from "react";
export type FormMessageType = "error" | "warning" | "help";
export type FormMessageProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
type?: FormMessageType;
} & { [x: string]: any };
declare const FormMessage: React.FunctionComponent<FormMessageProps>;
export default FormMessage;

View File

@ -1,10 +1,10 @@
import * as React from "react";
export type FormRadioGroupProps = {
customStyles?: {[x: string]: any};
className?: string;
compact?: boolean;
disabled?: boolean;
disableStyles?: boolean;
/* Set to **true** to display radio buttons in a row. */
inline?: boolean;
onChange?: (...args: any[]) => any;
} & { [x: string]: any };

View File

@ -1,18 +1,18 @@
import * as React from "react";
export type FormRadioItemProps = {
/* Set to **true** when radio input is checked and a controlled component. */
checked?: boolean;
className?: string;
/* Set to **true** when the radio input is checked and an uncontrolled component. */
compact?: boolean;
defaultChecked?: boolean;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
id?: string;
/* Sets the `name` for the radio input. */
inline?: boolean;
inputProps?: any;
labelProps?: any;
name?: string;
/* Sets the `value` for the radio input. */
state?: any;
value?: string;
} & { [x: string]: any };

View File

@ -2,9 +2,10 @@ import * as React from "react";
export type FormSelectProps = {
className?: string;
customStyles?: {[x: string]: any};
compact?: boolean;
disabled?: boolean;
disableStyles?: boolean;
state?: any;
} & { [x: string]: any };
declare const FormSelect: React.FunctionComponent<FormSelectProps>;

View File

@ -2,7 +2,6 @@ import * as React from "react";
export type FormSetProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & { [x: string]: any };

View File

@ -2,8 +2,11 @@ import * as React from "react";
export type FormTextareaProps = {
className?: string;
customStyles?: {[x: string]: any};
compact?: boolean;
disabled?: boolean;
disableStyles?: boolean;
readOnly?: boolean;
state?: any;
} & { [x: string]: any };
declare const FormTextarea: React.FunctionComponent<FormTextareaProps>;

View File

@ -2,12 +2,633 @@ import * as React from "react";
export type IconSize = "s" | "m" | "l" | "xl";
export type IconGlyph =
| 'accelerated'
| 'accept'
| 'accidental-leave'
| 'account'
| 'accounting-document-verification'
| 'action'
| 'action-settings'
| 'activate'
| 'activities'
| 'activity-2'
| 'activity-assigned-to-goal'
| 'activity-individual'
| 'activity-items'
| 'add'
| 'add-activity'
| 'add-activity-2'
| 'add-contact'
| 'add-coursebook'
| 'add-document'
| 'add-equipment'
| 'add-favorite'
| 'add-filter'
| 'add-photo'
| 'add-process'
| 'add-product'
| 'address-book'
| 'addresses'
| 'alert'
| 'along-stacked-chart'
| 'alphabetical-order'
| 'appointment'
| 'appointment-2'
| 'approvals'
| 'area-chart'
| 'arobase'
| 'arrow-bottom'
| 'arrow-down'
| 'arrow-left'
| 'arrow-right'
| 'arrow-top'
| 'attachment'
| 'attachment-audio'
| 'attachment-e-pub'
| 'attachment-html'
| 'attachment-photo'
| 'attachment-text-file'
| 'attachment-video'
| 'attachment-zip-file'
| 'back-to-top'
| 'background'
| 'badge'
| 'bar-chart'
| 'bar-code'
| 'basket'
| 'batch-payments'
| 'bbyd-active-sales'
| 'bbyd-dashboard'
| 'bed'
| 'begin'
| 'bell'
| 'blank-tag'
| 'blank-tag-2'
| 'bo-strategy-management'
| 'bold-text'
| 'bookmark'
| 'border'
| 'broken-link'
| 'bubble-chart'
| 'building'
| 'bullet-text'
| 'burglary'
| 'bus-public-transport'
| 'business-by-design'
| 'business-card'
| 'business-objects-experience'
| 'business-objects-explorer'
| 'business-objects-mobile'
| 'business-one'
| 'calendar'
| 'call'
| 'camera'
| 'cancel'
| 'cancel-maintenance'
| 'cancel-share'
| 'capital-projects'
| 'car-rental'
| 'card'
| 'cargo-train'
| 'cart'
| 'cart-2'
| 'cart-3'
| 'cart-4'
| 'cart-5'
| 'cart-approval'
| 'cart-full'
| 'cause'
| 'chain-link'
| 'chalkboard'
| 'chart-axis'
| 'chart-table-view'
| 'Chart-Tree-Map'
| 'check-availability'
| 'checklist'
| 'checklist-2'
| 'checklist-item'
| 'checklist-item-2'
| 'chevron-phase'
| 'chevron-phase-2'
| 'choropleth-chart'
| 'circle-task'
| 'circle-task-2'
| 'citizen-connect'
| 'clear-filter'
| 'clinical-order'
| 'clinical-tast-tracker'
| 'close-command-field'
| 'cloud'
| 'co'
| 'collaborate'
| 'collapse'
| 'collapse-group'
| 'collections-insight'
| 'collections-management'
| 'collision'
| 'color-fill'
| 'column-chart-dual-axis'
| 'comment'
| 'commission-check'
| 'company-view'
| 'compare'
| 'compare-2'
| 'competitor'
| 'complete'
| 'connected'
| 'contacts'
| 'copy'
| 'course-book'
| 'course-program'
| 'create'
| 'create-entry-time'
| 'create-form'
| 'create-leave-request'
| 'create-session'
| 'credit-card'
| 'crm-sales'
| 'crm-service-manager'
| 'crop'
| 'crossed-line-chart'
| 'curriculum'
| 'cursor'
| 'customer'
| 'customer-and-contacts'
| 'customer-and-supplier'
| 'customer-briefing'
| 'customer-financial-fact-sheet'
| 'customer-history'
| 'customer-order-entry'
| 'customer-view'
| 'customize'
| 'database'
| 'date-time'
| 'decision'
| 'decline'
| 'decrease-line-height'
| 'delete'
| 'detail-view'
| 'developer-settings'
| 'dimension'
| 'disconnected'
| 'discussion'
| 'discussion-2'
| 'dishwasher'
| 'display'
| 'display-more'
| 'doc-attachment'
| 'doctor'
| 'document'
| 'document-text'
| 'documents'
| 'donut-chart'
| 'down'
| 'download'
| 'download-from-cloud'
| 'draw-rectangle'
| 'drill-down'
| 'drill-up'
| 'drop-down-list'
| 'dropdown'
| 'duplicate'
| 'e-care'
| 'e-learning'
| 'eam-work-order'
| 'edit'
| 'edit-outside'
| 'education'
| 'electrocardiogram'
| 'electronic-medical-record'
| 'email'
| 'email-read'
| 'employee'
| 'employee-approvals'
| 'employee-lookup'
| 'employee-pane'
| 'employee-rejections'
| 'end-user-experience-monitoring'
| 'endoscopy'
| 'energy-saving-lightbulb'
| 'enter-more'
| 'eraser'
| 'error'
| 'example'
| 'excel-attachment'
| 'exitfullscreen'
| 'expand'
| 'expand-group'
| 'expense-report'
| 'explorer'
| 'factory'
| 'fallback'
| 'family-care'
| 'family-protection'
| 'favorite'
| 'favorite-list'
| 'fax-machine'
| 'feed'
| 'feeder-arrow'
| 'filter'
| 'filter-analytics'
| 'filter-facets'
| 'filter-fields'
| 'flag'
| 'flight'
| 'fob-watch'
| 'folder'
| 'folder-blank'
| 'folder-full'
| 'form'
| 'forward'
| 'fridge'
| 'full-screen'
| 'full-stacked-chart'
| 'full-stacked-column-chart'
| 'functional-location'
| 'future'
| 'gantt-bars'
| 'general-leave-request'
| 'generate-shortcut'
| 'geographic-bubble-chart'
| 'globe'
| 'goal'
| 'goalseek'
| 'grid'
| 'group'
| 'group-2'
| 'header'
| 'heading-1'
| 'heading-2'
| 'heading-3'
| 'headset'
| 'heating-cooling'
| 'heatmap-chart'
| 'hello-world'
| 'hide'
| 'hint'
| 'history'
| 'home'
| 'home-share'
| 'horizontal-bar-chart'
| 'horizontal-bar-chart-2'
| 'horizontal-bullet-chart'
| 'horizontal-grip'
| 'horizontal-stacked-chart'
| 'horizontal-waterfall-chart'
| 'hr-approval'
| 'idea-wall'
| 'image-viewer'
| 'inbox'
| 'incident'
| 'incoming-call'
| 'increase-line-height'
| 'indent'
| 'initiative'
| 'inspect'
| 'inspect-down'
| 'inspection'
| 'instance'
| 'insurance-car'
| 'insurance-house'
| 'insurance-life'
| 'internet-browser'
| 'inventory'
| 'ipad'
| 'ipad-2'
| 'iphone'
| 'iphone-2'
| 'it-host'
| 'it-instance'
| 'it-system'
| 'italic-text'
| 'jam'
| 'journey-arrive'
| 'journey-change'
| 'journey-depart'
| 'key'
| 'key-user-settings'
| 'kpi-corporate-performance'
| 'kpi-managing-my-area'
| 'lab'
| 'laptop'
| 'lateness'
| 'lead'
| 'lead-outdated'
| 'leads'
| 'learning-assistant'
| 'legend'
| 'less'
| 'letter'
| 'lightbulb'
| 'line-chart'
| 'line-chart-dual-axis'
| 'line-chart-time-axis'
| 'line-charts'
| 'list'
| 'loan'
| 'locate-me'
| 'locked'
| 'log'
| 'machine'
| 'manager'
| 'manager-insight'
| 'map'
| 'map-2'
| 'map-3'
| 'marketing-campaign'
| 'master-task-triangle'
| 'master-task-triangle-2'
| 'meal'
| 'measure'
| 'measurement-document'
| 'measuring-point'
| 'media-forward'
| 'media-pause'
| 'media-play'
| 'media-reverse'
| 'media-rewind'
| 'meeting-room'
| 'menu'
| 'menu2'
| 'message-error'
| 'message-information'
| 'message-popup'
| 'message-success'
| 'message-warning'
| 'microphone'
| 'mileage'
| 'minimize'
| 'mirrored-task-circle'
| 'mirrored-task-circle-2'
| 'money-bills'
| 'monitor-payments'
| 'move'
| 'mri-scan'
| 'multiple-bar-chart'
| 'multiple-line-chart'
| 'multiple-pie-chart'
| 'multiple-radar-chart'
| 'multiselect'
| 'multiselect-all'
| 'multiselect-none'
| 'my-sales-order'
| 'my-view'
| 'nav-back'
| 'navigation-down-arrow'
| 'navigation-left-arrow'
| 'navigation-right-arrow'
| 'navigation-up-arrow'
| 'negative'
| 'Netweaver-business-client'
| 'newspaper'
| 'notes'
| 'notification-2'
| 'number-sign'
| 'numbered-text'
| 'nurse'
| 'nutrition-activity'
| 'official-service'
| 'offsite-work'
| 'open-command-field'
| 'open-folder'
| 'opportunities'
| 'opportunity'
| 'order-status'
| 'org-chart'
| 'outbox'
| 'outdent'
| 'outgoing-call'
| 'overflow'
| 'overlay'
| 'overview-chart'
| 'paging'
| 'paid-leave'
| 'palette'
| 'paper-plane'
| 'passenger-train'
| 'past'
| 'paste'
| 'pause'
| 'payment-approval'
| 'pdf-attachment'
| 'pdf-reader'
| 'pending'
| 'per-diem'
| 'performance'
| 'permission'
| 'person-placeholder'
| 'personnel-view'
| 'pharmacy'
| 'phone'
| 'photo-voltaic'
| 'physical-activity'
| 'picture'
| 'pie-chart'
| 'pipeline-analysis'
| 'play'
| 'pool'
| 'popup-window'
| 'positive'
| 'post'
| 'ppt-attachment'
| 'present'
| 'print'
| 'private'
| 'process'
| 'product'
| 'program-triangles'
| 'program-triangles-2'
| 'project-definition-triangle'
| 'project-definition-triangle-2'
| 'projector'
| 'provision'
| 'pull-down'
| 'pushpin-off'
| 'pushpin-on'
| 'puzzle'
| 'quality-issue'
| 'question-mark'
| 'radar-chart'
| 'receipt'
| 'record'
| 'redo'
| 'refresh'
| 'repost'
| 'request'
| 'reset'
| 'resize'
| 'resize-corner'
| 'resize-horizontal'
| 'resize-vertical'
| 'response'
| 'restart'
| 'retail-store'
| 'retail-store-manager'
| 'rhombus-milestone'
| 'rhombus-milestone-2'
| 'role'
| 'sales-document'
| 'sales-notification'
| 'sales-order'
| 'sales-order-item'
| 'sales-quote'
| 'sap-box'
| 'sap-logo-shape'
| 'sap-ui5'
| 'save'
| 'scatter-chart'
| 'scissors'
| 'screen-split-one'
| 'screen-split-three'
| 'screen-split-two'
| 'search'
| 'settings'
| 'share'
| 'share-2'
| 'shelf'
| 'shield'
| 'shipping-status'
| 'shortcut'
| 'show'
| 'signature'
| 'simple-payment'
| 'simulate'
| 'slim-arrow-down'
| 'slim-arrow-left'
| 'slim-arrow-right'
| 'slim-arrow-up'
| 'soccor'
| 'sonography'
| 'sort'
| 'sort-ascending'
| 'sort-descending'
| 'sorting-ranking'
| 'sound'
| 'sound-loud'
| 'sound-off'
| 'source-code'
| 'status-critical'
| 'status-inactive'
| 'status-negative'
| 'status-positive'
| 'step'
| 'stethoscope'
| 'stop'
| 'study-leave'
| 'subway-train'
| 'suitcase'
| 'supplier'
| 'survey'
| 'switch-classes'
| 'switch-views'
| 'synchronize'
| 'syntax'
| 'syringe'
| 'sys-add'
| 'sys-back'
| 'sys-back-2'
| 'sys-cancel'
| 'sys-cancel-2'
| 'sys-enter'
| 'sys-enter-2'
| 'sys-find'
| 'sys-find-next'
| 'sys-first-page'
| 'sys-help'
| 'sys-help-2'
| 'sys-last-page'
| 'sys-minus'
| 'sys-monitor'
| 'sys-next-page'
| 'sys-prev-page'
| 'system-exit'
| 'system-exit-2'
| 'table-chart'
| 'table-view'
| 'tag'
| 'tag-cloud-chart'
| 'tags'
| 'target-group'
| 'task'
| 'taxi'
| 'technical-object'
| 'temperature'
| 'text-align-center'
| 'text-align-justified'
| 'text-align-left'
| 'text-align-right'
| 'text-formatting'
| 'theater'
| 'thing-type'
| 'thumb-down'
| 'thumb-up'
| 'time-account'
| 'time-entry-request'
| 'time-overtime'
| 'timesheet'
| 'to-be-reviewed'
| 'toaster-down'
| 'toaster-top'
| 'toaster-up'
| 'tools-opportunity'
| 'travel-expense'
| 'travel-expense-report'
| 'travel-itinerary'
| 'travel-request'
| 'tree'
| 'trend-down'
| 'trend-up'
| 'trip-report'
| 'ui-notifications'
| 'umbrella'
| 'underline-text'
| 'undo'
| 'unfavorite'
| 'unlocked'
| 'unpaid-leave'
| 'unwired'
| 'up'
| 'upload'
| 'upload-to-cloud'
| 'upstacked-chart'
| 'user-edit'
| 'user-settings'
| 'value-help'
| 'vds-file'
| 'vehicle-repair'
| 'vertical-bar-chart'
| 'vertical-bar-chart-2'
| 'vertical-bullet-chart'
| 'vertical-grip'
| 'vertical-stacked-chart'
| 'vertical-waterfall-chart'
| 'video'
| 'visits'
| 'waiver'
| 'wallet'
| 'warning'
| 'warning2'
| 'washing-machine'
| 'weather-proofing'
| 'web-cam'
| 'widgets'
| 'windows-doors'
| 'work-history'
| 'workflow-tasks'
| 'world'
| 'wounds-doc'
| 'wrench'
| 'write-new'
| 'write-new-document'
| 'x-ray'
| 'zoom-in'
| 'zoom-out';
export type IconProps = {
glyph: string;
glyph: IconGlyph;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Size of the icon. Options include **xs**, **s**, **compact**, and **l**. If no size is provided, default (normal) will be used. */
size?: IconSize;
} & { [x: string]: any };

View File

@ -1,32 +1,19 @@
import * as React from "react";
import { IconGlyph } from "../Icon/Icon";
export type IdentifierModifiers = "circle" | "transparent";
export type IdentifierSizes = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
export type IdentifierProps = {
/* Image URL. */
backgroundImageUrl?: string;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Applies a background color. */
backgroundImageUrl?: string,
className?: string,
color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
glyph?: string;
/* Localized text for label. */
label?: string;
modifier?: IdentifierModifiers;
/* Applies an aria-role. Set to button if Identifier opens a Popover or Modal. */
role?: string;
/* Size of the image. These sizes are available:
**xxs** (extra extra small) - 20px,
**xs** (extra small) - 28px,
**s** (small) - 32px,
**m** (medium) - 48px,
**l** (large) - 64px,
**xl** (extra lagre) - 88px,
and **xxl** (extra extra large).
Default matches the base font size (14px). */
disableStyles?: boolean,
glyph?: IconGlyph,
label?: string,
modifier?: IdentifierModifiers,
role?: string,
size: IdentifierSizes;
} & { [x: string]: any };

View File

@ -3,11 +3,9 @@ import * as React from "react";
export type imageSize = "s" | "m" | "l";
export type imageType = "circle";
export type ImageProps = {
/* Picture URL. */
photo: string;
size: imageSize;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
type?: imageType;
} & { [x: string]: any };

View File

@ -0,0 +1,14 @@
import * as React from "react";
import { IconGlyph } from "../Icon/Icon";
export type InfoLabelProps = {
className?: string;
color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
disableStyles?: boolean;
glyph?: IconGlyph;
numeric?: boolean;
} & { [x: string]: any };
declare const InfoLabel: React.FunctionComponent<InfoLabelProps>;
export default InfoLabel;

View File

@ -8,13 +8,10 @@ export type InlineHelpPlacement =
| "bottom-center";
export type InlineHelpProps = {
/* Location to display the inline help pop-up relative to the image. */
className?: string,
contentClassName?: string,
disableStyles?: boolean,
placement: InlineHelpPlacement;
/* Localized text to display in the inline help pop-up. */
text: string;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & { [x: string]: any };
declare const InlineHelp: React.FunctionComponent<InlineHelpProps>;

View File

@ -6,49 +6,20 @@ export type InputGroupTypes = "text" | "number" | "search";
export interface InputGroupAddonProps {
className?: string;
/* Set to **true** if add-on is a button. */
compact?: boolean;
isButton?: boolean;
}
export type InputGroupProps = {
/* Set to **true** to enable an input with actions. Actions can be shown with a text label or icon. */
actions?: boolean;
/* The value of the add-on. */
addon?: string;
/* Location of the add-on relative to the input. */
addonPos?: InputGroupAddonPosition;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
compact?: boolean;
glyph?: string;
/* CSS class(es) to add to the `<input>` element. */
inputClassName?: string;
/* Value for the `id` attribute on the `<input>` element. */
inputId?: string;
/* Value for the `name` attribute on the `<input>` element. */
inputName?: string;
/* Value for the `placeholder` attribute on the `<input>` element. */
inputPlaceholder?: string;
inputProps?: { [x: string]: any };
/* Value for the `type` attribute on the `<input>` element. */
inputType?: InputGroupTypes;
/* Value for the `value` attribute on the `<input>` element. */
inputValue?: any;
localizedText?: {
/* Value for aria-label on the clear <button> element. */
clear: string;
/* Value for aria-label on the down <button> element. */
down: string;
/* Value for aria-label on the up <button> element. */
up: string;
disabled?: boolean;
disableStyles?: boolean;
validationState?: {
state?: 'error' | 'warning' | 'information' | 'success';
text?: string;
};
/* Additional props to be spread to the down `<button>` element (for inputType='number'). */
numberDownButtonProps?: { [x: string]: any };
/* Additional props to be spread to the up `<button>` element (for inputType='number'). */
numberUpButtonProps?: { [x: string]: any };
/* Additional props to be spread to the `<button>` element. */
searchButtonProps?: { [x: string]: any };
props?: any;
} & { [x: string]: any };
declare class InputGroup extends React.Component<InputGroupProps> {

View File

@ -1,14 +1,12 @@
import * as React from "react";
export type LayoutGridProps = {
className?: string;
/* The number of columns in the grid. */
className?: string,
cols?: 1 | 2 | 3 | 4 | 5 | 6;
customStyles?: { [x: string]: any };
disableStyles?: boolean;
colSpan?: any,
disableStyles?: boolean,
nogap?: boolean
ref?: React.Ref<HTMLDivElement>;
/* Set to **true** to remove the margins between the panels. */
nogap?: boolean;
} & React.HTMLAttributes<HTMLAnchorElement>;
declare const LayoutGrid: React.FunctionComponent<LayoutGridProps> & {

View File

@ -2,7 +2,7 @@ import * as React from "react";
export type LinkProps = {
className?: string;
customStyles?: {[x: string]: any};
href?: string;
disabled?: boolean;
disableStyles?: boolean;
ref?: React.Ref<HTMLAnchorElement>;

View File

@ -0,0 +1,46 @@
import * as React from "react";
import { IconGlyph } from "../Icon/Icon";
export type ListProps = {
className?: string;
compact?: boolean;
disableStyles?: boolean;
noBorder?: boolean;
ref?: React.Ref<HTMLAnchorElement>;
} & React.HTMLAttributes<HTMLAnchorElement>;
export interface ListFooterProps {
className?: string;
}
export interface ListHeaderProps {
className?: string;
}
export interface ListIconProps {
glyph: IconGlyph;
className?: string;
}
export interface ListItemProps {
className?: string;
selected?: boolean;
onClick?: (...args: any[]) => any;
}
export interface ListTextProps {
className?: string;
noWrap?: boolean;
secondary?: boolean;
}
declare const List: React.FunctionComponent<ListProps> & {
displayName: 'List';
Footer: React.FunctionComponent<ListFooterProps> & { displayName: 'List.Footer' };
Header: React.FunctionComponent<ListHeaderProps> & { displayName: 'List.Header' };
Icon: React.FunctionComponent<ListIconProps> & { displayName: 'List.Icon' };
Item: React.FunctionComponent<ListItemProps> & { displayName: 'List.Item' };
Text: React.FunctionComponent<ListTextProps> & { displayName: 'List.Text' };
};
export default List;

View File

@ -1,30 +0,0 @@
import * as React from "react";
export type ListGroupProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & { [x: string]: any };
export type ListGroupItemProps = {
className?: string;
} & { [x: string]: any };
export type ListGroupItemActionsProps = {
className?: string;
} & { [x: string]: any };
export type ListGroupItemCheckboxProps = {
className?: string;
inputProps?: { [x: string]: any };
labelProps?: { [x: string]: any };
} & { [x: string]: any };
declare const ListGroup: React.FunctionComponent<ListGroupProps> & {
displayName: "ListGroup";
Item: React.FunctionComponent<ListGroupItemProps> & {displayName: "ListGroup.Item"};
ItemActions: React.FunctionComponent<ListGroupItemActionsProps> & {displayName: "ListGroup.ItemActions"};
ItemCheckbox: React.FunctionComponent<ListGroupItemCheckboxProps> & {displayName: "ListGroup.ItemCheckbox"};
};
export default ListGroup;

View File

@ -1,18 +1,14 @@
import * as React from "react";
export type LocalizationEditorProps = {
/* A collection of properties to apply to the `<label>`, `<input>`/`<textarea>` and `<button>` elements. */
control: {
buttonProps?: { [x: string]: any };
inputProps?: { [x: string]: any };
labelProps?: { [x: string]: any };
/* Localized text for the `<label>` element. */
label?: string;
placeholder?: string;
/* Text to display on the `<button>` element. Meant to be the language of the text in the `<input>`/`<textarea>` element. */
language?: string;
};
/* An array of objects that represent the values of the elements in the dropdown menu. The shape of the objects in the array is `{ placeholder: string, language: string, inputProps: object }`. */
menu: Array<{
inputProps?: { [x: string]: any };
placeholder?: string;
@ -20,12 +16,11 @@ export type LocalizationEditorProps = {
}>;
className?: string;
compact?: boolean;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
id?: string;
listProps?: { [x: string]: any };
popoverProps?: { [x: string]: any };
/* Set to **true** to enable a Localization Editor with a textarea. */
inputClassName?: string;
listProps?: any;
popoverProps?: any;
textarea?: boolean;
} & React.HTMLAttributes<HTMLDivElement>;

View File

@ -1,10 +1,8 @@
import * as React from "react";
export type MenuProps = {
/* Set to **true** enables menu items with add-on before. */
addonBefore?: boolean;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & React.HTMLAttributes<HTMLElement>;
@ -16,23 +14,20 @@ export type MenuGroupProps = {
} & React.HTMLAttributes<HTMLDivElement>;
export type MenuItemProps = {
/* Name of the SAP icon to be applied as an add-on before. */
addon?: string;
/* Additional props to be spread to the add-on section. */
addonProps?: { [x: string]: any };
addonBefore?: string;
addonProps?: any;
className?: string;
/* Set to **true** to style as a link. */
isLink?: boolean;
/* Set to **true** to add a horizontal line (separator). */
separator?: boolean;
/* Enables use of `<a>` element. Value to be applied to the anchor's `href` attribute. Should use either `link` or `url`, but not both. */
onclick?: (...args: any[]) => any;
url?: string;
/* Additional props to be spread to the Menu Item links (when using `url`). */
urlProps?: { [x: string]: any };
urlProps?: any;
} & React.HTMLAttributes<HTMLLIElement>;
export type MenuListProps = {
addonBefore?: boolean;
className?: string;
separated?: boolean;
} & React.HTMLAttributes<HTMLUListElement>;
declare const Menu: React.FunctionComponent<MenuProps> & {

View File

@ -0,0 +1,21 @@
import * as React from "react";
export interface MessageStripProps {
buttonProps?: any;
className?: string;
disableStyles?: boolean;
dismissible?: boolean;
link?: string;
linkProps?: any;
linkText?: string;
localizedText?: any;
noGlyph?: boolean;
type?: any;
onCloseClicked?: (...args: any[]) => any;
}
declare const MessageStrip: React.FunctionComponent<MessageStripProps> & {
displayName: "MessageStrip";
};
export default MessageStrip;

View File

@ -1,33 +0,0 @@
import * as React from "react";
export type ModalProps = {
title: string;
/* Node(s) to render within the footer of the dialog. */
actions?: React.ReactNode;
/* Additional props to be spread to the body section of the dialog. */
bodyProps?: { [x: string]: any };
/* Additional props to be spread to the close `<button>` element. */
closeProps?: { [x: string]: any };
/* Additional props to be spread to the content section of the dialog. */
contentProps?: { [x: string]: any };
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Additional props to be spread to the footer of the dialog. */
footerProps?: { [x: string]: any };
/* Additional props to be spread to the header of the dialog. */
headerProps?: { [x: string]: any };
headingLevel?: 2 | 3 | 4 | 5 | 6;
localizedText?: {
/* Aria-label for <button> element. */
closeButton: string;
};
/* Set to **true** to make the dialog visible. */
show?: boolean;
titleProps?: { [x: string]: any };
/* Callback function passing event when close button is clicked. */
onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
} & { [x: string]: any };
declare class Modal extends React.Component<ModalProps> {}
export default Modal;

View File

@ -1,26 +1,22 @@
import * as React from "react";
export type MultiInputProps = {
/* Collection of items to display in the list. */
data: Array<string | number | string[]>;
buttonProps?: { [x: string]: any };
data: any[];
buttonProps?: any;
className?: string;
compact?: boolean;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
inputProps?: { [x: string]: any };
listProps?: { [x: string]: any };
localizedText?: {
/* Aria-label in <div> element for image. */
imageLabel: string;
inputProps?: any;
listProps?: any;
placeholder?: string;
popoverProps?: any;
tagProps?: any;
validationState?: {
state?: any,
text?: string
};
/* Localized placeholder text of the input. */
placeHolder?: string;
popoverProps?: { [x: string]: any };
/* Additional props to be spread to the tags `<div>` element. */
tagProps?: { [x: string]: any };
/* Callback function when a tag is added or removed. Returns array of tags selected. */
onTagsUpdate: (tags: string[]) => void;
onTagsUpdate?: (...args: any[]) => any;
} & { [x: string]: any };
declare class MultiInput extends React.Component<MultiInputProps> {}

View File

@ -1,33 +1,23 @@
import * as React from "react";
export type PaginationProps = {
/* Total number of items. itemsTotal / itemsPerPage calculates how many navigation items should be shown in the control. */
itemsTotal: number;
onClick: (page: number) => void;
onClick: (...args: any[]) => any;
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Set to **true** to show total number of items along with `totalText` string. */
displayTotal?: boolean;
displayTotalProps?: {[x: string]: any};
/* Initial page to be selected. */
displayTotalProps?: any;
initialPage?: number;
/* Number of items to display on page. */
itemsPerPage?: number;
/* Additional props to be spread to the page number `<a>` elements. */
linkProps?: { [x: string]: any };
linkProps?: any;
localizedText?: {
/* Value for aria-label on the next <a> element. */
next: string;
/* Value for aria-label on the previous <a> element. */
previous: string;
};
/* Additional props to be spread to the next arrow `<a>` element. */
nextProps?: { [x: string]: any };
/* Additional props to be spread to the previous arrow `<a>` element. */
prevProps?: { [x: string]: any };
/* Localized text to display next to the total number of items. Used with `displayTotal`. */
nextProps?: any;
prevProps?: any;
totalText?: string;
visiblePageTotal?: number;
} & { [x: string]: any };
declare class Pagination extends React.Component<PaginationProps> {}

View File

@ -2,9 +2,7 @@ import * as React from "react";
export type PanelProps = {
className?: string;
/* The number of columns to span inside a `LayoutGrid`. */
colSpan?: 1 | 2 | 3 | 4 | 5 | 6;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
} & { [x: string]: any };
@ -26,10 +24,8 @@ export type PanelFooterProps = {
export type PanelHeadProps = {
className?: string;
/* Localized text for the description of the panel. */
description?: string;
headingLevel?: 2 | 3 | 4 | 5 | 6;
/* Localized text for the title of the panel. */
title?: string;
} & { [x: string]: any };

View File

@ -29,32 +29,22 @@ export type PopperSizingTypes =
| "maxTarget";
export type PopoverProps = {
/* Node(s) to render in the overlay. */
body: React.ReactNode;
/* Node to render as the reference element (that the `body` will be placed in relation to). */
control: React.ReactNode;
className?: string;
customStyles?: {[x: string]: any};
disabled?: boolean;
/* Set to **true** to render popover without edge detection so popover will not flip from top to bottom with scroll. */
disableEdgeDetection?: boolean;
/* Set to **true** to remove onKeyPress handler and aria-* roles. Only do so if the control is a complex component such as a FormInput with Button. */
disableKeyPressHandler?: boolean;
disableStyles?: boolean;
/* Set to **true** to render a popover without an arrow. */
noArrow?: boolean;
/* Initial position of the `body` (overlay) related to the `control`. */
placement?: PopperPlacement;
/* Additional props to be spread to the overlay element. */
popperProps?: { [x: string]: any };
/* Indicates the type of popup - "dialog", "grid", "listbox", "menu", or "tree". This value is attached to aria-haspopup and is useful to assistive tech. Defaulted to boolean true. */
popperClassName?: string;
popperProps?: any;
type?: PopoverTypes;
/* Callback for consumer clicking outside of popover body. */
onClickOutside?: (event: MouseEvent | TouchEvent | FocusEvent) => void;
/* Callback when escape key is pressed when popover body is visible. */
onEscapeKey?: () => void;
useArrowKeyNavigation?: boolean;
widthSizingType?: PopperSizingTypes;
onClickOutside?: (event: MouseEvent | TouchEvent | FocusEvent) => void;
onEscapeKey?: () => void;
} & React.HTMLAttributes<HTMLDivElement>;
declare class Popover extends React.Component<PopoverProps> {}

View File

@ -3,20 +3,25 @@ import * as React from "react";
export type SearchInputProps = {
className?: string;
compact?: boolean;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
inputProps?: { [x: string]: any };
inputGroupAddonProps?: any;
inputGroupProps?: any;
inputProps?: any;
inShellbar?: boolean;
listProps?: { [x: string]: any };
/* Set to **true** to render without a search button. */
listProps?: any;
noSearchBtn?: boolean;
placeholder?: string;
/* Additional props to be spread to the search `<button>` element. */
searchBtnProps?: { [x: string]: any };
/* Collection of items to display in the dropdown list. */
searchList?: Array<{ text: string; callback: () => void }>;
popoverProps?: any;
searchBtnProps?: any;
searchList?: Array<{
text: string,
callback?: (...args: any[]) => any
}>;
validationState?: {
state?: any,
text?: string
};
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
/* Callback function when the user hits the <Enter> key. */
onEnter?: (value?: string | number | string[]) => void;
} & { [x: string]: any };

View File

@ -0,0 +1,21 @@
import * as React from "react";
export interface SelectProps {
className?: string;
compact?: boolean;
disabled?: boolean;
disableStyles?: boolean;
id?: string;
placeholder?: string;
validationState?: {
state?: 'error' | 'warning' | 'information' | 'success';
text?: string;
};
onClick?: (...args: any[]) => any;
}
declare const Select: React.FunctionComponent<SelectProps> & {
displayName: "Select";
};
export default Select;

View File

@ -2,42 +2,29 @@ import * as React from "react";
import { IconSize } from "../Icon/Icon";
export type ShellbarProps = {
/* Holds all product actions and links. */
actions?: Array<{
menu?: React.ReactNode;
label?: string;
glyph: string;
notificationCount: number;
callback?: (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;
callback?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}>;
className?: string;
/* For use with applications that utilize CoPilot. */
copilot?: boolean;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
localizedText?: {
/* Aria-label for <span> element within the <button> element. */
counterLabel: string;
/* Aria-label for <button> element. */
notificationsButton: string;
};
/* Provide an img tag for a logo other than the SAP logo. One of the two props (`logo` or `logoSAP`) should be set. */
logo?: React.ReactNode;
/* Renders the SAP logo in the Shellbar. One of the two props (`logo` or `logoSAP`) should be set. */
logoSAP?: boolean;
/* Information about pending notifications. */
notifications?: {
notificationsBody?: React.ReactNode;
noNotificationsBody?: React.ReactNode;
notificationCount: number;
label?: string;
callback?: (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;
callback?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
};
/* Holds product titles and navigation. */
productMenu?: Array<{
link?: string;
callback?: (...args: any[]) => void;
@ -46,30 +33,21 @@ export type ShellbarProps = {
size?: IconSize;
name?: React.ReactNode;
}>;
/* For navigating between products. */
productSwitcher?: object;
/* List of the products. */
productSwitcherList?: Array<{
productSwitch?: object;
productSwitchList?: Array<{
title: string;
link?: string;
url?: string;
glyph: string;
image: string;
callback?: (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;
callback?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}>;
/* Displays the current application when no product menu is used. */
productTitle?: string;
/* User information (_e.g._ name, initials, etc.) */
profile?: { [x: string]: any };
/* List of items for the profile menu. */
profileMenu?: Array<{ [x: string]: any }>;
/* Holds `searchInput` properties. */
searchInput?: { [x: string]: any };
/* Displays an application context. Should be used rarely. */
subtitle?: string;
} & { [x: string]: any };
} & React.HTMLAttributes<Element>;
declare class Shellbar extends React.Component<ShellbarProps> {
static displayName: "Shellbar";

View File

@ -1,35 +1,41 @@
import * as React from "react";
import { IconGlyph } from "../Icon/Icon";
export type SideNavProps = {
className?: string;
customStyles?: {[x: string]: any};
compact?: boolean;
condensed?: boolean;
disableStyles?: boolean;
/* Set to **true** to only render icons for each `SideNavListItem`. */
icons?: boolean;
/* The `id` of the selected `SideNavListItem`. */
selectedId?: string;
/* Callback function when a navigation item is selected. Arguments passed are the event and the id of the selected item. */
onItemSelect?: (e: any, id: any) => void;
} & { [x: string]: any };
} & React.HTMLAttributes<Element>;
export type SideNavListProps = {
className?: string;
headingLevel?: 2 | 3 | 4 | 5 | 6;
compact?: boolean;
condensed?: boolean;
hasParent?: boolean;
isUtility?: boolean;
level?: number;
open?: boolean;
selectedId?: string;
title?: string;
titleProps?: { [x: string]: any };
} & { [x: string]: any };
titleProps?: any;
onItemSelect?: (...args: any[]) => any;
} & React.HTMLAttributes<Element>;
export type SideNavListItemProps = {
/* Set to **true** to have this item initially render as expanded and its children items shown. */
expanded?: boolean;
glyph?: string;
glyph?: IconGlyph;
id?: string;
/* Localized text for the item (when `url` is provided). */
isSubItem?: boolean;
name?: string;
/* Enables use of `<a>` element. Value to be applied to the anchor\'s `href` attribute. */
selected?: boolean;
selectedId?: string;
url?: string;
onClick?: (e: React.MouseEvent) => void;
} & { [x: string]: any };
onClick?: (...args: any[]) => any;
onItemSelect?: (...args: any[]) => any;
} & React.HTMLAttributes<Element>;
declare class SideNav extends React.Component<SideNavProps> {
static displayName: "SideNav";

View File

@ -0,0 +1,21 @@
import * as React from "react";
export interface StepInputProps {
className?: string;
disabled?: boolean;
disableStyles?: boolean;
localizedText?: any;
placeholder?: string;
readOnly?: boolean;
validationState?: {
state?: 'error' | 'warning' | 'information' | 'success';
text?: string;
};
value?: number;
}
declare const StepInput: React.FunctionComponent<StepInputProps> & {
displayName: "StepInput";
};
export default StepInput;

View File

@ -0,0 +1,24 @@
import * as React from "react";
export interface SwitchProps {
checked?: boolean;
className?: string;
compact?: boolean;
disabled?: boolean;
disableStyles?: boolean;
id?: string;
inputProps?: any;
internalLabels?: {
checked?: any;
unchecked?: any;
};
labelProps?: any;
semantic?: boolean;
onChange?: (...args: any[]) => any;
}
declare const Switch: React.FunctionComponent<SwitchProps> & {
displayName: "Switch";
};
export default Switch;

View File

@ -1,33 +1,19 @@
import * as React from "react";
export type TableProps = {
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Array of localized text strings for the column headers. */
headers: Array<string | React.ReactNode>;
/* Array of objects that contain one property: `rowData` (an array of strings containing data for each column in the row). */
tableData?: Array<{ rowData: Array<string | React.ReactNode> }>;
className?: string;
/* Additional classes to the `<tr>` element within `<thead>`. */
tableHeaderRowClassName?: string;
/* Additional classes to be added to the `<thead>` elements. */
tableHeaderClassName?: string;
/* Additional classes to be added to the `<tr>` elements. */
tableRowClassName?: string;
/* Additional classes to be added to the `<td>` elements. */
tableCellClassName?: string;
/* Additional classes to be added to the `<tbody>` element. */
disableStyles?: boolean;
tableBodyClassName?: string;
/* Additional props to be spread to the `<tbody>` element. */
tableBodyProps?: { [x: string]: any };
/* Additional props to be spread to the `<tr>` elements within `<tbody>`. If using a function, the parameters passed will be an object representing the row (from `tableData`) and the row index. */
tableBodyRowProps?:
| { [x: string]: any }
| ((rowData: string[], index: number) => void);
/* Additional props to be spread to the `<thead>` element. */
tableHeaderProps?: { [x: string]: any };
/* Additional props to be spread to the `<tr>` element within `<thead>`. */
tableHeaderRowProps?: { [x: string]: any };
tableBodyProps?: any;
tableBodyRowProps?: { [x: string]: any } | ((rowData: string[], index: number) => void);
tableCellClassName?: string;
tableHeaderClassName?: string;
tableHeaderProps?: any;
tableHeaderRowClassName?: string;
tableHeaderRowProps?: any;
tableRowClassName?: string;
} & { [x: string]: any };
declare const Table: React.FunctionComponent<TableProps> & {

View File

@ -1,19 +1,17 @@
import * as React from "react";
import { IconGlyph } from "../Icon/Icon";
export type TabProps = {
className?: string;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
/* Icon to display on the tab. */
glyph?: string;
glyph?: IconGlyph;
id?: string;
/* Additional props to be spread to the tab\'s <a> element. */
linkProps?: { [x: string]: any };
/* Additional props to be spread to the tab content's <div> element. */
tabContentProps?: { [x: string]: any };
/* Localized text to display on the tab. */
index?: number;
linkProps?: any;
selected?: boolean;
tabContentProps?: any;
title?: string;
onClick?: (...args: any[]) => any;
} & { [x: string]: any };
declare const Tab: React.FunctionComponent<TabProps> & {

View File

@ -2,11 +2,10 @@ import * as React from "react";
export type TabGroupProps = {
className?: string;
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* The index of the selected tab. */
selectedIndex?: number;
/* Callback function when the user clicks on a tab. Parameters passed to the function are `event` and `index`. */
size?: any;
tabGroupProps?: any;
onTabClick?: (event: React.MouseEvent, index: number) => void;
} & { [x: string]: any };

View File

@ -1,18 +1,12 @@
export type TileProps = {
/* Sets a background color class. */
backgroundColor?: number;
className?: string;
customStyles?: {[x: string]: any};
/* Sets a background color accent class. Options include numbers from 1 to 9. */
colorAccent?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
/* Number of columns the tile covers. */
columnSpan?: 1 | 2 | 3 | 4 | 5 | 6;
disabled?: boolean;
disableStyles?: boolean;
/* Set to **true** to mark component as a product tile. */
productTile?: boolean;
/* Number of rows the tile covers. */
rowSpan?: number;
active?: boolean,
backgroundImage?: string,
className?: string,
disabled?: boolean,
disableStyles?: boolean,
productTile?: boolean,
tabIndex?: number,
onClick?: (...args: any[]) => any
} & { [x: string]: any };
export type TileActionsProps = {
@ -20,14 +14,16 @@ export type TileActionsProps = {
} & { [x: string]: any };
export type TileContentProps = {
title: string;
className?: string;
title: string,
className?: string,
headingLevel?: 2 | 3 | 4 | 5 | 6;
titleProps?: { [x: string]: any };
productTile?: boolean,
titleProps?: any
} & { [x: string]: any };
export type TileMediaProps = {
className?: string;
productTile?: boolean;
} & { [x: string]: any };
declare const Tile: React.FunctionComponent<TileProps> & {

View File

@ -1,64 +1,35 @@
import * as React from "react";
export interface TimeBaseProps {
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Set to **true** to use the 12-hour clock (hours ranging from 01 to 12) and to display a meridiem control. */
format12Hours?: boolean;
/* Enables the input for hours. */
showHour?: boolean;
/* Enables the input for minutes. */
showMinute?: boolean;
/* Enables the input for seconds. */
showSecond?: boolean;
/* Set to **true** to show up/down buttons for each input. */
spinners?: boolean;
/* The time component values. Contains four properties:
**hour** (with values from 01 to 12 when `format12Hours` is true or 00 to 23 when `format12Hours` is false),
**minute** (with values from 00 to 59), **second** (with values from 00 to 59),
**meridiem** (with values 0 for AM or 1 for PM). */
time?: { hour: string; minute: string; second: string; meridiem: 0 | 1 };
}
export type TimeProps = TimeBaseProps & {
disabled?: boolean;
/* Additional props to be spread to the hours down `<button>` element. */
hoursDownButtonProps?: { [x: string]: any };
/* Additional props to be spread to the hours `<input>` element. */
hoursInputProps?: { [x: string]: any };
/* Additional props to be spread to the hours up `<button>` element. */
hoursUpButtonProps?: { [x: string]: any };
hoursDownButtonProps?: any;
hoursInputProps?: any;
hoursUpButtonProps?: any;
id?: string;
localizedText?: {
/* Ante meridiem for 12 hour clock. */
meridiemAM: string;
/* Post meridiem for 12 hour clock. */
meridiemPM: string;
meridiemAM?: string;
meridiemPM?: string;
};
/* Additional props to be spread to the meridiem down `<button>` element. */
meridiemDownButtonProps?: { [x: string]: any };
/* Additional props to be spread to the meridiem `<input>` element. */
meridiemInputProps?: { [x: string]: any };
/* Additional props to be spread to the meridiem up `<button>` element. */
meridiemUpButtonProps?: { [x: string]: any };
/* Additional props to be spread to the minutes down `<button>` element. */
minutesDownButtonProps?: { [x: string]: any };
/* Additional props to be spread to the minutes `<input>` element. */
minutesInputProps?: { [x: string]: any };
/* Additional props to be spread to the minutes up `<button>` element. */
minutesUpButtonProps?: { [x: string]: any };
/* Additional props to be spread to the seconds down `<button>` element. */
secondsDownButtonProps?: { [x: string]: any };
/* Additional props to be spread to the seconds `<input>` element. */
secondsInputProps?: { [x: string]: any };
/* Additional props to be spread to the seconds up `<button>` element. */
secondsUpButtonProps?: { [x: string]: any };
onChange?: (time: {
hour: string;
minute: string;
second: string;
meridiem: 0 | 1;
}) => void;
meridiemDownButtonProps?: any;
meridiemInputProps?: any;
meridiemUpButtonProps?: any;
minutesDownButtonProps?: any;
minutesInputProps?: any;
minutesUpButtonProps?: any;
secondsDownButtonProps?: any;
secondsInputProps?: any;
secondsUpButtonProps?: any;
onChange?: (time: { hour: string; minute: string; second: string; meridiem: 0 | 1 }) => void;
} & { [x: string]: any };
declare class Time extends React.Component<TimeProps> {

View File

@ -7,16 +7,13 @@ export type TimePickerProps = TimeBaseProps & {
id?: string;
inputProps?: { [x: string]: any };
localizedText?: {
/* Ante meridiem for 12 hour clock. */
meridiemAM: string;
/* Post meridiem for 12 hour clock. */
meridiemPM: string;
};
popoverProps?: { [x: string]: any };
/* Additional props to be spread to the `Time` component. */
timeProps?: { [x: string]: any };
/* Initial time value for the input. */
value?: string;
onChange?: (...args: any[]) => any;
} & { [x: string]: any };
declare class TimePicker extends React.Component<TimePickerProps> {

View File

@ -1,24 +0,0 @@
import * as React from "react";
import { FormItemProps } from '../Forms/FormItem';
import { FormLabelProps } from '../Forms/FormLabel';
export type ToggleSize = "xs" | "s" | "m" | "l";
export type ToggleProps = {
checked?: boolean;
className?: string;
customStyles?: {[x: string]: any};
disabled?: boolean;
disableStyles?: boolean;
id?: string;
inputProps?: { [x: string]: any };
labelProps?: FormLabelProps;
size?: ToggleSize;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
} & FormItemProps;
declare class Toggle extends React.Component<ToggleProps> {
static displayName: "Toggl";
}
export default Toggle;

View File

@ -2,8 +2,10 @@ import * as React from "react";
export type TokenProps = {
className?: string;
customStyles?: {[x: string]: any};
compact?: boolean;
disableStyles?: boolean;
readOnly?: boolean;
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
} & React.HTMLAttributes<HTMLDivElement>;
declare const Token: React.FunctionComponent<TokenProps>;

View File

@ -1,13 +1,9 @@
import * as React from "react";
export type TreeViewProps = {
customStyles?: {[x: string]: any};
disableStyles?: boolean;
/* Object with rowId keys and boolean values representing whether that row is expanded. This variable is handled internally, but can be overridden by the consumer through this prop. */
expandData?: { [rowId: string]: boolean };
/* Set to *true* for an expanded tree. This variable is handled internally, but can be overridden by the consumer through this prop */
isExpandAll?: boolean;
/* Callback that is called whenever the internal expand/collapse state changes. The argument is an an object with rowId keys and boolean values representing whether that row is expanded. */
onExpandChange?: (expandData: { [rowId: string]: boolean }) => void;
} & React.HTMLAttributes<HTMLDivElement>;
@ -16,19 +12,23 @@ export type TreeColProps = {
} & React.HTMLAttributes<HTMLDivElement>;
export type TreeHeadProps = {
/* Additional props to be spread to the header expand/collapse `<button>` element. */
buttonProps?: { [x: string]: any };
className?: string;
isExpanded?: boolean;
onExpandAll?: (...args: any[]) => any;
} & React.HTMLAttributes<HTMLDivElement>;
export type TreeItemProps = {
/* Set to *true* for expanded tree item. This variable is handled internally, but can be overridden by the consumer through this prop. */
isExpanded?: boolean;
/* ID used to track the expanded/collapsed state of the row. This variable is handled internally, but can be overridden by the consumer through this prop. */
rowId?: string;
} & React.HTMLAttributes<HTMLLIElement>;
export type TreeRowProps = {} & React.HTMLAttributes<HTMLDivElement>;
export type TreeRowProps = {
isExpanded?: boolean;
isParent?: boolean;
rowId?: string;
onExpandClick?: (...args: any[]) => any;
} & React.HTMLAttributes<HTMLDivElement>;
declare class TreeView extends React.Component<TreeViewProps> {
displayName: "TreeView";