UNPKG

33.4 kBTypeScriptView Raw
1/**
2 * react-native-material-kit, the toolkit introducing {@link https://material.io/design/introduction/ | Material Design} to {@link https://facebook.github.io/react-native/ | React Native}.
3 *
4 * Author: ywu on 15/6/1.
5 * @packageDocumentation
6 */
7
8import { Component } from 'react';
9import { GestureResponderEvent } from 'react-native';
10import { MeasureOnSuccessCallback } from 'react-native';
11import { ReactChild } from 'react';
12import { SFC } from 'react';
13import { StyleProp } from 'react-native';
14import { TextInputProps } from 'react-native';
15import { TextStyle } from 'react-native';
16import { TouchableWithoutFeedbackProps } from 'react-native';
17import { ViewProps } from 'react-native';
18
19/** Accent colored floating action button */
20export declare const AccentFab: SFC<ButtonProps>;
21
22/** Raised button with Accent color */
23export declare const AccentRaisedButton: SFC<ButtonProps>;
24
25declare class AttrReference {
26 attr: string;
27 constructor(attr: string);
28 get value(): AttrValue;
29}
30
31export declare type AttrValue = string | number | Theme | AttrReference;
32
33/**
34 * The `Button` component.
35 *
36 * @remarks
37 * With configurable shadow, ripple effect, and FAB style. See {@link ButtonProps} for the available props.
38 *
39 * Refer to {@link https://material.io/design/components/buttons.html# | Guideline} or {@link https://getmdl.io/components/index.html#buttons-section | MDL implementation}
40 */
41export declare class Button extends Component<ButtonProps, ButtonState> {
42 /** Default props */
43 static defaultProps: ButtonProps;
44 /** Reference to App's {@link Theme} */
45 private theme;
46 constructor(props: ButtonProps);
47 /** {@inheritDoc @types/react#Component.render} */
48 render(): JSX.Element;
49 /** `onLayout` handler */
50 private _onLayout;
51}
52
53/** Props of {@link Button}, which extends {@link RippleProps} and {@link @types/react-native#TouchableWithoutFeedbackProps | TouchableWithoutFeedbackProps} */
54export declare interface ButtonProps extends TouchableWithoutFeedbackProps, RippleProps {
55 /**
56 * Whether this's a FAB.
57 * @defaultValue `false`
58 */
59 fab?: boolean;
60 /**
61 * Whether the button is enabled.
62 * @defaultValue `true`
63 */
64 enabled?: boolean;
65}
66
67/**
68 * State of {@link Button}
69 * @internal
70 */
71declare interface ButtonState {
72 width: number;
73 height: number;
74}
75
76/** Pre-defined Button props/styles for common cases */
77export declare const ButtonStyles: {
78 buttonText: typeof buttonText;
79 buttonTextAccent: typeof buttonTextAccent;
80 buttonTextPrimary: typeof buttonTextPrimary;
81 coloredButtonText: typeof coloredButtonText;
82};
83
84/** Text style for buttons, default color is `black` */
85declare function buttonText(theme?: Theme, color?: AttrValue): TextStyle;
86
87/** Text style using accent color */
88declare function buttonTextAccent(theme?: Theme): TextStyle;
89
90/** Text style using primary color */
91declare function buttonTextPrimary(theme?: Theme): TextStyle;
92
93/**
94 * The `Checkbox` component.
95 *
96 * @remarks
97 * See {@link https://material.io/components/selection-controls/#checkboxes | Guideline} & {@link http://www.getmdl.io/components/index.html#toggles-section/checkbox | MDL implementation}
98 */
99export declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
100 /** Default props */
101 static defaultProps: CheckboxProps;
102 private theme;
103 private animatedTickAlpha;
104 constructor(props: CheckboxProps);
105 UNSAFE_componentWillMount(): void;
106 /**
107 * TODO using controlled components.
108 * @see https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html?#preferred-solutions
109 */
110 UNSAFE_componentWillReceiveProps(nextProps: CheckboxProps): void;
111 render(): JSX.Element;
112 private initView;
113 /** Layout event handler */
114 private onLayout;
115 /** Touch event handler */
116 private onTouch;
117 /** animate the checked state, by scaling the inner circle */
118 private aniToggle;
119 /** When a toggle action (from the given state) is confirmed. */
120 private confirmToggle;
121}
122
123/** Props of {@link Checkbox} */
124export declare type CheckboxProps = {
125 /** Color of the border (outer circle), when checked */
126 borderOnColor?: string;
127 /** Color of the border (outer circle), when unchecked */
128 borderOffColor?: string;
129 /** Toggle status */
130 checked?: boolean;
131 /** Callback when the toggle status is changed */
132 onCheckedChange?: CheckedListener;
133 /** How far the ripple can extend outside the Checkbox's border, `5` by default */
134 extraRippleRadius?: number;
135 /** Toggle Editable */
136 editable?: boolean;
137} & TickProps & RippleProps & TouchableWithoutFeedbackProps;
138
139/** State of {@link Checkbox} */
140declare interface CheckboxState {
141 checked: boolean;
142 width: number;
143 height: number;
144 rippleRadii: number;
145}
146
147export declare interface CheckedEvent {
148 checked: boolean;
149}
150
151export declare type CheckedListener = (event: CheckedEvent) => void;
152
153/** Text style for colored buttons */
154declare function coloredButtonText(theme?: Theme): TextStyle;
155
156/** Primary floating action button */
157export declare const ColoredFab: SFC<ButtonProps>;
158
159/** Primary raised button */
160export declare const ColoredRaisedButton: SFC<ButtonProps>;
161
162export declare interface Dimension {
163 width: number;
164 height: number;
165}
166
167/** Default floating action button */
168export declare const Fab: SFC<ButtonProps>;
169
170/** Flat button (text button) */
171export declare const FlatButton: SFC<ButtonProps>;
172
173/** Public props of {@link FloatingLabel} */
174declare interface FloatingLabelPublicProps {
175 /** Enable floating label effect */
176 floatingLabelEnabled?: boolean;
177 /** Duration of floating transition, also affect underline animation */
178 floatingLabelAniDuration?: number;
179 /** Spacing between floating label and input text */
180 floatingLabelBottomMargin?: number;
181 /** {@link TextStyle} of floating label */
182 floatingLabelFont?: TextStyle;
183}
184
185/** Retrieve a copy of the current theme */
186export declare function getTheme(): Theme;
187
188/**
189 * The `IconToggle` component.
190 *
191 * See {@link https://getmdl.io/components/index.html#toggles-section/icon-toggle | MDL implementation}
192 */
193export declare class IconToggle extends Component<IconToggleProps, IconToggleState> {
194 /** Default props */
195 static defaultProps: IconToggleProps;
196 private theme;
197 constructor(props: IconToggleProps);
198 UNSAFE_componentWillMount(): void;
199 UNSAFE_componentWillReceiveProps(nextProps: IconToggleProps): void;
200 render(): JSX.Element;
201 /**
202 * Select a child element to show for the current toggle status.
203 * @see [State List](http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList) in Android development
204 */
205 private renderChildren;
206 /** Touch event handler */
207 private onTouch;
208 /** When a toggle action (from the given state) is confirmed. */
209 private confirmToggle;
210}
211
212/** Props of {@link IconToggle} */
213export declare interface IconToggleProps extends RippleProps, TouchableWithoutFeedbackProps {
214 enabled?: boolean;
215 /** Toggle status */
216 checked?: boolean;
217 /** Callback when the toggle status is changed */
218 onCheckedChange?: CheckedListener;
219}
220
221/** Props of {@link IconToggle} */
222declare interface IconToggleState {
223 checked: boolean;
224}
225
226/**
227 * Indeterminate linear progress indicator.
228 *
229 * @remarks
230 * Continually growing and shrinking along the track until the process is complete. See {@link SimpleProgressProps} for the available props.
231 *
232 * Refer to {@link https://material.io/design/components/progress-indicators.html#linear-progress-indicators | Guideline} or {@link http://www.getmdl.io/components/index.html#loading-section/progress | MDL implementation}
233 */
234export declare class IndeterminateProgress extends Component<SimpleProgressProps> {
235 /** Defaults, see {@link defaultSimpleProps} */
236 static defaultProps: SimpleProgressProps;
237 /** Reference to App's {@link Theme} */
238 private theme;
239 /** line length when progress is 100% */
240 private _totalLength;
241 /** height of the progress or line width */
242 private _height;
243 /** state of the 1st progress block */
244 private _animatedBlock1;
245 /** state of the 2nd progress block */
246 private _animatedBlock2;
247 constructor(props: SimpleProgressProps);
248 /** {@inheritDoc @types/react#Component.render} */
249 render(): JSX.Element;
250 private _onLayout;
251 private _aniUpdateProgress;
252 private _getBlock2Ani;
253}
254
255/**
256 * The default palette.
257 * @public
258 * Created by ywu on 15/7/16.
259 */
260export declare const MKColor: {
261 Amber: string;
262 Blue: string;
263 BlueGrey: string;
264 Brown: string;
265 Cyan: string;
266 DeepOrange: string;
267 DeepPurple: string;
268 Green: string;
269 Grey: string;
270 Indigo: string;
271 LightBlue: string;
272 LightGreen: string;
273 Lime: string;
274 Orange: string;
275 Pink: string;
276 Purple: string;
277 Red: string;
278 Silver: string;
279 Teal: string;
280 Yellow: string;
281 Transparent: string;
282 RGBAmber: string;
283 RGBIndigo: string;
284 RGBPink: string;
285 RGBPurple: string;
286 RGBTeal: string;
287 palette_blue_400: string;
288 palette_green_500: string;
289 palette_red_500: string;
290 palette_yellow_600: string;
291};
292
293/** Props of {@link MKTouchable} */
294declare interface MKTouchableProps extends ViewProps {
295 /** Touch events callback */
296 onTouch?: (event: TouchEvent) => void;
297}
298
299export declare type NullableAttrValue = AttrValue | null | undefined;
300
301export declare type NullableReactChild = ReactChild | null | undefined;
302
303export declare type NullableString = string | null | undefined;
304
305export declare type NullableStyle = object | any[] | null | undefined;
306
307/** Numeric range */
308export declare interface NumRange {
309 min: number;
310 max: number;
311}
312
313declare type Pred = Prediction<RadioButton>;
314
315export declare type Prediction<T> = (obj?: T) => boolean;
316
317/**
318 * Determinate linear progress indicator.
319 *
320 * @remarks
321 * Increasing in width from 0 to 100% of the track, in sync with the process’s progress, with a simplified buffering effect.
322 * Refer to {@link https://material.io/design/components/progress-indicators.html#linear-progress-indicators | Guideline} or {@link http://www.getmdl.io/components/index.html#loading-section/progress | MDL implementation}
323 */
324export declare class Progress extends Component<ProgressProps> {
325 /** The indeterminate version of {@link Progress} */
326 static Indeterminate: typeof IndeterminateProgress;
327 /** Defaults, see {@link defaultSimpleProps} */
328 static defaultProps: ProgressProps;
329 /** Reference to App's {@link Theme} */
330 private theme;
331 /** current progress value, [0, 1] */
332 private _progress;
333 /** current buffering value, [0, 1] */
334 private _buffer;
335 /** line length when progress is 100% */
336 private _totalLength;
337 /** height of the progress or line width */
338 private _height;
339 private _animatedLength;
340 private _animatedBufferLength;
341 constructor(props: ProgressProps);
342 /** Update progress with animation */
343 set progress(value: number);
344 /** Get current progress */
345 get progress(): number;
346 /** Update buffering progress with animation */
347 set buffer(value: number);
348 /** Get current buffering progress */
349 get buffer(): number;
350 UNSAFE_componentWillMount(): void;
351 UNSAFE_componentWillReceiveProps(nextProps: ProgressProps): void;
352 /** {@inheritDoc @types/react#Component.render} */
353 render(): JSX.Element;
354 private _onLayout;
355 private _aniUpdateProgress;
356 private _aniUpdateBuffer;
357}
358
359/** Props of {@link Progress}, which extends {@link SimpleProgressProps} */
360export declare interface ProgressProps extends SimpleProgressProps {
361 /**
362 * Initial value of progress, Number: [0, 1.0]
363 * @defaultValue `0`
364 */
365 progress?: number;
366 /** Initial value of buffering, Number: [0, 1.0] */
367 buffer?: number;
368 /** Color of the buffering layer */
369 bufferColor?: string;
370 /** Duration of the buffering animation, in milliseconds */
371 bufferAniDuration?: number;
372}
373
374/**
375 * The `RadioButton` component.
376 *
377 * @remarks
378 * See {@link https://material.io/components/selection-controls/#radio-buttons | Guideline} & {@link http://www.getmdl.io/components/index.html#toggles-section/radio | MDL implementation}
379 */
380export declare class RadioButton extends Component<RadioButtonProps, RadioButtonState> {
381 /** Default props */
382 static defaultProps: RadioButtonProps;
383 private theme;
384 private animatedSize;
385 private animatedRadius;
386 private group?;
387 constructor(props: RadioButtonProps);
388 UNSAFE_componentWillMount(): void;
389 UNSAFE_componentWillReceiveProps(nextProps: RadioButtonProps): void;
390 componentWillUnmount(): void;
391 confirmToggle(): void;
392 confirmUncheck(): void;
393 render(): JSX.Element;
394 private initView;
395 private emitCheckedChange;
396 /** animate the checked state, by scaling the inner circle */
397 private aniChecked;
398 /** Layout event handler */
399 private onLayout;
400 /** Touch event handler */
401 private onTouch;
402}
403
404/**
405 * Managing a group of radio buttons.
406 */
407export declare class RadioButtonGroup {
408 private readonly onAdd?;
409 private readonly onRemove?;
410 private buttons;
411 constructor(onAdd?: Pred, onRemove?: Pred);
412 add(btn: RadioButton): void;
413 remove(btn: RadioButton): void;
414 onChecked(btn: RadioButton, checked: boolean): void;
415 private canAdd;
416 private canRemove;
417}
418
419/** Props of {@link RadioButton} */
420export declare interface RadioButtonProps extends RippleProps, TouchableWithoutFeedbackProps {
421 borderOnColor?: string;
422 borderOffColor?: string;
423 fillColor?: string;
424 checked?: boolean;
425 group?: RadioButtonGroup;
426 onCheckedChange?: CheckedListener;
427 extraRippleRadius?: number;
428}
429
430/** State of {@link RadioButton} */
431declare interface RadioButtonState {
432 checked: boolean;
433 height: number;
434 width: number;
435}
436
437/** Default raised button */
438export declare const RaisedButton: SFC<ButtonProps>;
439
440/**
441 * The `RangeSlider` component.
442 *
443 * @remarks
444 * See {@link RangeSliderProps} for the available props.
445 * Refer to {@link https://material.io/design/components/sliders.html | Guideline} or {@link http://www.getmdl.io/components/index.html#sliders-section | MDL implementation}
446 */
447export declare class RangeSlider extends Component<RangeSliderProps> {
448 /** Defaults, see {@link defaultProps} */
449 static defaultProps: RangeSliderProps;
450 /** Reference to App's {@link Theme} */
451 private theme;
452 private minThumbRef;
453 private maxThumbRef;
454 private trackRef;
455 private overrideThumb;
456 private _range;
457 private _trackTotalLength;
458 private _trackMarginH;
459 private _trackMarginV;
460 private _thumbRadiiWithBorder;
461 private readonly _lowerTrackLength;
462 private readonly _lowerTrackMin;
463 constructor(props: RangeSliderProps);
464 /** Public api to update the current `minValue` */
465 set minValue(value: number);
466 /** Retrieve the current `minValue` */
467 get minValue(): number;
468 /** Public api to update the current `maxValue` */
469 set maxValue(value: number);
470 /** Retrieve the current `maxValue` */
471 get maxValue(): number;
472 private get minThumb();
473 private get maxThumb();
474 UNSAFE_componentWillMount(): void;
475 UNSAFE_componentWillReceiveProps(nextProps: RangeSliderProps): void;
476 render(): JSX.Element;
477 /** callback when the Track component's layout changes */
478 private _onTrackLayout;
479 private _beginMove;
480 private _endMove;
481 private _updateValueByTouch;
482 private _snap;
483 private _defaultStepIncrement;
484 private _setRange;
485 private _toSliderScale;
486 private _toPixelScale;
487 private _internalSetValue;
488 private _emitChange;
489 private _emitConfirm;
490 private _updateValue;
491 private _validateMove;
492 private _moveThumb;
493 private _onThumbRadiiUpdate;
494 private _verifyStep;
495}
496
497/** Props of {@link RangeSlider} */
498export declare interface RangeSliderProps extends ViewProps {
499 /**
500 * Lower limit of the range, default is `0`
501 * @defaultValue `0`
502 */
503 min: number;
504 /**
505 * Upper limit of the range, default is `100`
506 * @defaultValue `100`
507 */
508 max: number;
509 /** Initial value of range */
510 range?: NumRange;
511 /** The thickness of the RangeSlider track */
512 trackSize?: number;
513 /** Radius of the thumb of the RangeSlider */
514 thumbRadius?: number;
515 /** Padding for the hitSlop on the RangeSlider thumb */
516 thumbPadding?: number;
517 /** Color of the lower part of the track, it's also the color of the thumb */
518 lowerTrackColor?: any;
519 /** Color of the upper part of the track */
520 upperTrackColor?: any;
521 /** Callback when drag gesture begins */
522 onStart?: ThumbGestureCallback;
523 /** Callback when value changed */
524 onChange?: (range: NumRange) => void;
525 /** Callback when the value is confirmed */
526 onConfirm?: (range: NumRange) => void;
527 /** Step value of the RangeSlider, must be a divisor of max */
528 step?: number;
529}
530
531/**
532 * Reusable `Ripple` effect.
533 */
534export declare class Ripple extends Component<RippleProps, RippleState> {
535 /** Default props */
536 static defaultProps: RippleProps;
537 private containerRef;
538 private maskRef;
539 private rippleRef;
540 private _animatedAlpha;
541 private _animatedRippleScale;
542 private _rippleAni?;
543 private _pendingRippleAni?;
544 constructor(props: RippleProps);
545 /**
546 * Measure the size of the `Ripple`.
547 * @param cb {@link MeasureOnSuccessCallback | measurement callback}
548 */
549 measure(cb: MeasureOnSuccessCallback): any;
550 /** Start the ripple effect */
551 showRipple(): void;
552 /** Stop the ripple effect */
553 hideRipple(): void;
554 /** {@inheritDoc @types/react#Component.render} */
555 render(): JSX.Element;
556 private _onLayout;
557 private _onLayoutChange;
558 private _calcMaskLayer;
559 private _calcRippleLayer;
560 private _onTouchEvent;
561 private _onPointerDown;
562 private _onPointerUp;
563}
564
565export declare type RippleLocation = 'tapLocation' | 'center';
566
567/** Props of {@link Ripple } */
568export declare type RippleProps = {
569 /** Color of the `Ripple` layer */
570 rippleColor?: string;
571 /** Duration of the ripple effect, in milliseconds */
572 rippleDuration?: number;
573 /** Hot-spot position of the ripple effect, see {@link RippleLocation} */
574 rippleLocation?: RippleLocation;
575 /**
576 * Whether a `Mask` layer should be used, to clip the ripple to the container’s bounds, default is `true`
577 * @defaultValue `true`
578 */
579 maskEnabled?: boolean;
580 /** Color of the `Mask` layer */
581 maskColor?: string;
582 /** Border width TODO move to `style`? */
583 borderWidth?: number;
584 /** Border radius of the `Mask` layer */
585 maskBorderRadius?: number;
586 /** Border radius of the `Mask` layer, in percentage (of min(width, height)) */
587 maskBorderRadiusInPercent?: number;
588 /** Duration of the mask effect (alpha), in milliseconds */
589 maskDuration?: number;
590 /** Animating the shadow (on pressed/released) or not */
591 shadowAniEnabled?: boolean;
592 /** Whether the component is disabled */
593 disabled?: boolean;
594} & MKTouchableProps;
595
596/** State of the {@link Ripple} */
597declare interface RippleState {
598 width: number;
599 height: number;
600 maskBorderRadius: number;
601 shadowOffsetY: number;
602 ripple: {
603 radii: number;
604 dia: number;
605 offset: {
606 top: number;
607 left: number;
608 };
609 };
610}
611
612/**
613 * Set the current theme.
614 * @param `aTheme` the new {@link Theme}
615 *
616 * See http://www.getmdl.io/customize
617 */
618export declare function setTheme(aTheme: Theme): void;
619
620/** Basic Props of {@link Progress}, which extends {@link ViewProps} */
621export declare interface SimpleProgressProps extends ViewProps {
622 /** Color of the progress layer */
623 progressColor?: string;
624 /** Animation duration (milliseconds) */
625 progressAniDuration?: number;
626}
627
628/**
629 * The `Slider` component.
630 *
631 * @remarks
632 * See {@link SliderProps} for the available props.
633 * Refer to {@link https://material.io/design/components/sliders.html | Guideline} or {@link http://www.getmdl.io/components/index.html#sliders-section | MDL implementation}
634 */
635export declare class Slider extends Component<SliderProps> {
636 /** Defaults, see {@link defaultProps} */
637 static defaultProps: SliderProps;
638 /** Reference to App's {@link Theme} */
639 private theme;
640 private thumbRef;
641 private _value;
642 private _trackMarginH;
643 private _trackMarginV;
644 private _trackTotalLength;
645 private _thumbRadiiWithBorder;
646 private _prevPointerX;
647 private _animatedTrackLength;
648 private _panResponder;
649 constructor(props: SliderProps);
650 set value(value: number);
651 get value(): number;
652 UNSAFE_componentWillMount(): void;
653 UNSAFE_componentWillReceiveProps(nextProps: SliderProps): void;
654 render(): JSX.Element;
655 private _onTrackLayout;
656 private _snap;
657 private _defaultStepIncrement;
658 private _internalSetValue;
659 private _emitChange;
660 private _emitOnPressIn;
661 private _emitOnPressOut;
662 private _emitConfirm;
663 private _aniUpdateValue;
664 private _onPanResponderEnd;
665 private _onTouchEvent;
666 private _getTouchOnTrack;
667 private _updateValueByTouch;
668 private _toSliderScale;
669 private _toPixelScale;
670 private _confirmUpdateValueByTouch;
671 private _moveThumb;
672 private _confirmMoveThumb;
673 private _onThumbRadiiUpdate;
674 private _verifyStep;
675}
676
677/** Props of {@link Slider} */
678export declare interface SliderProps extends ViewProps {
679 /**
680 * Minimum value of the range, default is `0`.
681 * @defaultValue `0`
682 */
683 min: number;
684 /**
685 * Maximum value of the range, default is `100`.
686 * @defaultValue `100`
687 */
688 max: number;
689 /**
690 * Current value
691 * @defaultValue `0`
692 */
693 value: number;
694 /** The thickness of the Slider track */
695 trackSize?: number;
696 /** Radius of the thumb of the Slider */
697 thumbRadius?: number;
698 /** Padding for the hitSlop on the Slider thumb */
699 thumbPadding?: number;
700 /** Color of the lower part of the track, it's also the color of the thumb */
701 lowerTrackColor?: any;
702 /** Color of the upper part of the track */
703 upperTrackColor?: any;
704 /** Callback when value changed */
705 onChange?: (value: number) => void;
706 /** Callback when slider is pressed anywhere */
707 onPressIn?: () => void;
708 /** Callback when slider stops being pressed */
709 onPressOut?: () => void;
710 /** Callback when the value is confirmed */
711 onConfirm?: (value: number) => void;
712 /** Step value of the Slider, must be a divisor of max */
713 step?: number;
714}
715
716/**
717 * The default `Spinner` component.
718 *
719 * @remarks
720 * See {@link SpinnerProps} for the available props.
721 *
722 * Refer to {@link https://material.io/design/components/progress-indicators.html#circular-progress-indicators | Guideline} or {@link http://www.getmdl.io/components/index.html#loading-section/spinner | MDL implementation}
723 */
724export declare class Spinner extends Component<SpinnerProps, SpinnerState> {
725 /** Default props of {@link Spinner} */
726 static defaultProps: SpinnerProps;
727 /** Reference to App's {@link Theme} */
728 private theme;
729 private _nextStrokeColorIndex;
730 private _animatedContainerAngle;
731 private _animatedArcAngle;
732 constructor(props: SpinnerProps);
733 /** {@inheritDoc @types/react#Component.render} */
734 render(): JSX.Element;
735 private _onLayout;
736 private _aniUpdateSpinner;
737 private _renderSpinnerLayer;
738 private _updateStrokeColor;
739}
740
741/** Props of {@link Spinner}, which extends {@link ViewProps} */
742export declare interface SpinnerProps extends ViewProps {
743 /**
744 * Colors of the progress stroke.
745 *
746 * type: {`Array`|`String`} can be a list of colors or a single one
747 */
748 strokeColor?: any;
749 /** Width of the progress stroke */
750 strokeWidth?: number;
751 /** Duration of the spinner animation, in milliseconds */
752 spinnerAniDuration?: number;
753}
754
755/** Sate of {@link Spinner} */
756declare interface SpinnerState {
757 dimen: Dimension;
758 strokeColor: any;
759}
760
761export declare type Style = object | any[];
762
763/**
764 * The `Switch` component.
765 *
766 * @remarks
767 * Which is made up of a `Track` and a {@link Thumb}.
768 *
769 * See {@link https://material.io/components/selection-controls/#switches | Guideline} & {@link http://bit.ly/1IcHMPo | MDL implementation}
770 */
771export declare class Switch extends Component<SwitchProps, SwitchState> {
772 /** Default props */
773 static defaultProps: SwitchProps;
774 private theme;
775 private thumbRef;
776 private animatedThumbLeft;
777 constructor(props: SwitchProps);
778 UNSAFE_componentWillMount(): void;
779 UNSAFE_componentWillReceiveProps(nextProps: SwitchProps): void;
780 /** {@inheritDoc @types/react#Component.render} */
781 render(): JSX.Element;
782 /**
783 * Un-boxing the `Thumb` node from `AnimatedComponent`,
784 * in order to access the component functions defined in `Thumb`
785 */
786 private get thumb();
787 private getBgColor;
788 private onPress;
789 private onPressIn;
790 private onPressOut;
791 /** Layout the thumb according to the size of the track */
792 private layoutThumb;
793 /** init layout according to the props */
794 private initLayout;
795 /** Move the thumb left or right according to the current state */
796 private translateThumb;
797 /** Calc the next position (x-axis) of the thumb */
798 private computeThumbX;
799 /** When a toggle action started. */
800 private startToggle;
801 /** When a toggle action is confirmed. */
802 private confirmToggle;
803 /** When a toggle action is finished (confirmed or canceled). */
804 private endToggle;
805}
806
807/** Props of {@link Switch} */
808export declare interface SwitchProps extends TouchableWithoutFeedbackProps {
809 /** Toggle status of the `Switch` */
810 checked?: boolean;
811 /** Callback when the toggle status is changed. */
812 onCheckedChange?: CheckedListener;
813 /** Color of the track, when switch is checked */
814 onColor?: string;
815 /** Color of the track, when switch is off */
816 offColor?: string;
817 /** The thickness of the Switch track */
818 trackSize?: number;
819 /** The length of the Switch track */
820 trackLength?: number;
821 /** Radius of the thumb button */
822 thumbRadius?: number;
823 /** Color of the thumb, when switch is checked */
824 thumbOnColor?: string;
825 /** Color of the thumb, when switch is off */
826 thumbOffColor?: string;
827 /** Duration of the thumb sliding animation, in milliseconds */
828 thumbAniDuration?: number;
829 /** Color of the ripple layer */
830 rippleColor?: string;
831 /** Duration of the ripple effect, in milliseconds */
832 rippleAniDuration?: number;
833}
834
835/** State of {@link Switch} */
836declare interface SwitchState {
837 checked: boolean;
838 thumbFrame: {
839 padding: number;
840 r: number;
841 rippleRadii: number;
842 x: number;
843 };
844 trackLength: number;
845 trackMargin: number;
846 trackRadii: number;
847 trackSize: number;
848}
849
850/**
851 * The `Textfield` component, which has an optional {@link FloatingLabel} and {@link Underline}.
852 * - TODO styling `read-only` & `disabled` mode
853 */
854export declare class Textfield extends Component<TextfieldProps, TextfieldState> {
855 /** Defaults, see {@link defaultProps} */
856 static defaultProps: Partial<TextfieldProps>;
857 private theme;
858 private readonly inputFrame;
859 private inputRef;
860 private labelRef;
861 private underlineRef;
862 private anim?;
863 private _bufferedValue;
864 constructor(props: TextfieldProps);
865 private set bufferedValue(value);
866 private get bufferedValue();
867 private set placeholder(value);
868 /**
869 * Requests focus for the given input or view. The exact behavior triggered
870 * will depend on the platform and type of view.
871 */
872 focus(): void;
873 /**
874 * Checks if the input is currently focused.
875 */
876 isFocused(): boolean;
877 /**
878 * Removes focus from an input or view. This is the opposite of `focus()`.
879 */
880 blur(): void;
881 UNSAFE_componentWillMount(): void;
882 UNSAFE_componentWillReceiveProps(nextProps: TextfieldProps): void;
883 componentDidMount(): void;
884 render(): JSX.Element;
885 private _onTextChange;
886 private _onFocus;
887 private _onBlur;
888 private startAnimations;
889 private _doMeasurement;
890 private _onLabelMeasured;
891 private _onInputMeasured;
892 private _aniFloatLabel;
893 private _aniStartHighlight;
894 private _aniStopHighlight;
895 private _callback;
896}
897
898/** Props of the {@link Textfield} component */
899export declare interface TextfieldProps extends TextInputProps, FloatingLabelPublicProps, UnderlinePublicProps {
900 /** alias to `onChangeText` */
901 onTextChange?: (text: string) => void;
902 /** Alias to `secureTextEntry` */
903 password?: boolean;
904 /** Color of the un-highlighted underline, and the placeholder
905 * - TODO cursor color is not affected for now
906 * @see https://github.com/facebook/react-native/issues/1685
907 */
908 tint?: any;
909 /** Color of the highlighted underline, and also the floating label */
910 highlightColor?: any;
911 /** Style applied to the `TextInput` component, ok to use `StyleSheet` */
912 textInputStyle?: StyleProp<TextStyle>;
913 /** Additional props passed directly to the react native `TextInput` component */
914 additionalInputProps?: TextInputProps;
915}
916
917/** State of the {@link Textfield} component */
918declare interface TextfieldState {
919 inputMarginTop: number;
920}
921
922export declare interface Theme {
923 [name: string]: AttrValue;
924}
925
926/** `Thumb` component of {@link Slider} and {@link RangeSlider}. */
927declare class Thumb extends Component<ThumbProps, ThumbState> {
928 /** Defaults, see {@link defaultProps} */
929 static defaultProps: ThumbProps;
930 /** current x-axis position */
931 x: number;
932 private _radii;
933 private _dia;
934 private _containerRadii;
935 private _containerDia;
936 private readonly _trackMarginH;
937 private _panResponder;
938 private _animatedLeft;
939 private _animatedScale;
940 constructor(props: ThumbProps);
941 UNSAFE_componentWillMount(): void;
942 componentDidMount(): void;
943 UNSAFE_componentWillReceiveProps(nextProps: ThumbProps): void;
944 componentWillUnmount(): void;
945 /**
946 * animate the sliding
947 * @param x target position, relative to the track
948 */
949 moveTo(x: number): void;
950 /** stop sliding */
951 confirmMoveTo(): void;
952 /** {@inheritDoc @types/react#Component.render} */
953 render(): JSX.Element;
954 private _onRadiiUpdate;
955 private _getOnSliding;
956 private _onExplode;
957 private _onCollapse;
958}
959
960/** Gesture event callback for the `Thumb` component. see {@link GestureResponderEvent} */
961declare type ThumbGestureCallback = (thumb: Thumb, event: GestureResponderEvent) => void;
962
963/** Props of {@link Thumb}, which extends {@link @types/react-native#ViewProps | ViewProps} */
964declare interface ThumbProps extends ViewProps {
965 /** Callback to handle onPanResponderGrant gesture */
966 onGrant?: ThumbGestureCallback;
967 /** Callback to handle onPanResponderMove gesture */
968 onMove?: ThumbGestureCallback;
969 /** Callback to handle onPanResponderRelease/Terminate gesture */
970 onEnd?: ThumbGestureCallback;
971 /** Color when thumb has no value */
972 disabledColor?: string;
973 /** Color when thumb has value */
974 enabledColor?: string;
975 /** Radius of thumb component */
976 radius?: number;
977 /** Padding for the hitSlop on the Thumb component */
978 touchPadding?: number;
979}
980
981/** State of {@link Thumb} component */
982declare interface ThumbState {
983 color: any;
984 borderColor: any;
985}
986
987declare interface TickProps extends ViewProps {
988 /** Background color of the tick */
989 fillColor?: string;
990 /** Insets of the tick */
991 inset?: number;
992}
993
994/** Touching event emitted by a {@link MKTouchable} */
995declare interface TouchEvent {
996 type: 'TOUCH_DOWN' | 'TOUCH_UP' | 'TOUCH_MOVE' | 'TOUCH_CANCEL';
997 x: number;
998 y: number;
999}
1000
1001/** Props of the {@link Underline} component */
1002declare interface UnderlinePublicProps {
1003 /** The highlighted bottom border effect */
1004 underlineEnabled?: boolean;
1005 /** The thickness of the Underline */
1006 underlineSize?: number;
1007}
1008
1009export { }
1010
\No newline at end of file