From 28071fcdca0325bc7843707f031ff798c05a8f6b Mon Sep 17 00:00:00 2001 From: Uyadav207 Date: Sat, 20 Mar 2021 09:39:24 +0530 Subject: [PATCH 1/3] fix: Updated props and resolved conflicts --- src/content/AirbnbRating/index.jsx | 2 +- src/content/Avatar/index.jsx | 2 +- src/content/Badge/index.jsx | 2 +- src/content/BottomSheet/index.jsx | 2 +- src/content/Button/index.jsx | 2 +- src/content/ButtonGroup/index.jsx | 2 +- src/content/Card/index.jsx | 2 +- src/content/CheckBox/index.jsx | 2 +- src/content/Divider/index.jsx | 2 +- src/content/Header/index.jsx | 2 +- src/content/Icon/index.jsx | 2 +- src/content/Image/index.jsx | 2 +- src/content/Input/index.jsx | 2 +- 13 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/AirbnbRating/index.jsx b/src/content/AirbnbRating/index.jsx index 0a17b8d..e8b83e3 100644 --- a/src/content/AirbnbRating/index.jsx +++ b/src/content/AirbnbRating/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./searchbar.playground.jsx"; -const Content = lazy(() => importMDX("../Props/rating.md")); +const Content = lazy(() => importMDX("../Props/airbnb.md")); export default function AirbnbPlayground() { return ( diff --git a/src/content/Avatar/index.jsx b/src/content/Avatar/index.jsx index 516c60e..f123665 100644 --- a/src/content/Avatar/index.jsx +++ b/src/content/Avatar/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./avatar.playground.jsx"; -const Content = lazy(() => importMDX("../Props/avatar.md")); +const Content = lazy(() => importMDX("../Props/avatar.mdx")); export default function Avatar() { return ( diff --git a/src/content/Badge/index.jsx b/src/content/Badge/index.jsx index ceffdf5..b60adef 100644 --- a/src/content/Badge/index.jsx +++ b/src/content/Badge/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./badge.playground.jsx"; -const Content = lazy(() => importMDX("../Props/badge.md")); +const Content = lazy(() => importMDX("../Props/badge.mdx")); export default function TilePlayground() { return (
diff --git a/src/content/BottomSheet/index.jsx b/src/content/BottomSheet/index.jsx index b9579bf..04164b5 100644 --- a/src/content/BottomSheet/index.jsx +++ b/src/content/BottomSheet/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./bottomsheet.playground.jsx"; -const Content = lazy(() => importMDX("../Props/rating.md")); +const Content = lazy(() => importMDX("../Props/bottomsheet.mdx")); export default function BottomSheetPlayground() { return (
diff --git a/src/content/Button/index.jsx b/src/content/Button/index.jsx index 587129a..a43a44a 100644 --- a/src/content/Button/index.jsx +++ b/src/content/Button/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./button.playground.jsx"; -const Content = lazy(() => importMDX("../Props/button.md")); +const Content = lazy(() => importMDX("../Props/button.mdx")); class App extends Component { render() { return ( diff --git a/src/content/ButtonGroup/index.jsx b/src/content/ButtonGroup/index.jsx index 3fa7805..e9446e1 100644 --- a/src/content/ButtonGroup/index.jsx +++ b/src/content/ButtonGroup/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./buttongroup.playground.jsx"; -const Content = lazy(() => importMDX("../Props/button_group.md")); +const Content = lazy(() => importMDX("../Props/button_group.mdx")); export default function ButtonGroupPlayground() { return ( diff --git a/src/content/Card/index.jsx b/src/content/Card/index.jsx index faa6e18..1235216 100644 --- a/src/content/Card/index.jsx +++ b/src/content/Card/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./card.playground.jsx"; -const Content = lazy(() => importMDX("../Props/rating.md")); +const Content = lazy(() => importMDX("../Props/card.mdx")); export default function CardPlayground() { return ( diff --git a/src/content/CheckBox/index.jsx b/src/content/CheckBox/index.jsx index 141fef9..68f62b9 100644 --- a/src/content/CheckBox/index.jsx +++ b/src/content/CheckBox/index.jsx @@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./checkbox.playground.jsx"; -const Content = lazy(() => importMDX("../Props/checkbox.md")); +const Content = lazy(() => importMDX("../Props/checkbox.mdx")); export default function CheckBoxPlayground() { return ( diff --git a/src/content/Divider/index.jsx b/src/content/Divider/index.jsx index bbf798c..15a42d1 100644 --- a/src/content/Divider/index.jsx +++ b/src/content/Divider/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./divider.playground.jsx"; -const Content = lazy(() => importMDX("../Props/divider.md")); +const Content = lazy(() => importMDX("../Props/divider.mdx")); export default function DividerPlayground() { return ( diff --git a/src/content/Header/index.jsx b/src/content/Header/index.jsx index 4d37cc0..ed2e04e 100644 --- a/src/content/Header/index.jsx +++ b/src/content/Header/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./header.playground.jsx"; -const Content = lazy(() => importMDX("../Props/header.md")); +const Content = lazy(() => importMDX("../Props/header.mdx")); export default function HeaderPlayground() { return ( diff --git a/src/content/Icon/index.jsx b/src/content/Icon/index.jsx index 8ff4d5e..639b64f 100644 --- a/src/content/Icon/index.jsx +++ b/src/content/Icon/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./icon.playground.jsx"; -const Content = lazy(() => importMDX("../Props/icon.md")); +const Content = lazy(() => importMDX("../Props/icon.mdx")); export default function IconPlayground() { return ( diff --git a/src/content/Image/index.jsx b/src/content/Image/index.jsx index 21a7096..ead7cf4 100644 --- a/src/content/Image/index.jsx +++ b/src/content/Image/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./input.playground.jsx"; -const Content = lazy(() => importMDX("../Props/image.md")); +const Content = lazy(() => importMDX("../Props/image.mdx")); export default function ImagePlayground() { return ( diff --git a/src/content/Input/index.jsx b/src/content/Input/index.jsx index 8e249e9..de95db5 100644 --- a/src/content/Input/index.jsx +++ b/src/content/Input/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./input.playground.jsx"; -const Content = lazy(() => importMDX("../Props/rating.md")); +const Content = lazy(() => importMDX("../Props/input.mdx")); export default function InputPlayground() { return ( From 2b4142de880dca35bdd5527160665137b66be5d5 Mon Sep 17 00:00:00 2001 From: Uyadav207 Date: Sat, 20 Mar 2021 09:42:15 +0530 Subject: [PATCH 2/3] hot-fix: removed conflicts andd UI breaking --- src/components/playground/index.jsx | 2 +- src/content/AirbnbRating/index.jsx | 2 +- src/content/ListItem/index.jsx | 7 ++++++- src/content/Overlay/index.jsx | 2 +- src/content/Pricing/index.jsx | 2 +- src/content/Rating/index.jsx | 2 +- src/content/SearchBar/index.jsx | 2 +- src/content/Slider/index.jsx | 2 +- src/content/SocialIcon/index.jsx | 2 +- src/content/Text/index.jsx | 2 +- src/content/Tile/index.jsx | 2 +- src/content/ToolTip/index.jsx | 2 +- 12 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/playground/index.jsx b/src/components/playground/index.jsx index ab1f539..31f794a 100644 --- a/src/components/playground/index.jsx +++ b/src/components/playground/index.jsx @@ -24,8 +24,8 @@ export default ({ params }) => { placeholder={Placeholder} />
- + diff --git a/src/content/AirbnbRating/index.jsx b/src/content/AirbnbRating/index.jsx index e8b83e3..7fecd40 100644 --- a/src/content/AirbnbRating/index.jsx +++ b/src/content/AirbnbRating/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./searchbar.playground.jsx"; -const Content = lazy(() => importMDX("../Props/airbnb.md")); +const Content = lazy(() => importMDX("../Props/airbnb.mdx")); export default function AirbnbPlayground() { return ( diff --git a/src/content/ListItem/index.jsx b/src/content/ListItem/index.jsx index 9bc172a..9c236ed 100644 --- a/src/content/ListItem/index.jsx +++ b/src/content/ListItem/index.jsx @@ -5,12 +5,17 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./listitem.playground.jsx"; -const Content = lazy(() => importMDX("../Props/listitem.md")); +const Content = lazy(() => importMDX("../Props/listitem.mdx")); export default function ListItemPlayground() { return (
+ Loading...
}> + + + +
); } diff --git a/src/content/Overlay/index.jsx b/src/content/Overlay/index.jsx index e5bdf6d..7972377 100644 --- a/src/content/Overlay/index.jsx +++ b/src/content/Overlay/index.jsx @@ -3,7 +3,7 @@ import Playground from "./overlay.playground.jsx"; import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; -const Content = lazy(() => importMDX("../Props/overlay.md")); +const Content = lazy(() => importMDX("../Props/overlay.mdx")); export default function OverlayPlayground() { return ( diff --git a/src/content/Pricing/index.jsx b/src/content/Pricing/index.jsx index 23b12c6..26a5e48 100644 --- a/src/content/Pricing/index.jsx +++ b/src/content/Pricing/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./pricing.playground.jsx"; -const Content = lazy(() => importMDX("../Props/pricing.md")); +const Content = lazy(() => importMDX("../Props/pricing.mdx")); export default function PricingPlayground() { return ( diff --git a/src/content/Rating/index.jsx b/src/content/Rating/index.jsx index bf662f3..a232011 100644 --- a/src/content/Rating/index.jsx +++ b/src/content/Rating/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./searchbar.playground.jsx"; -const Content = lazy(() => importMDX("../Props/searchbar.md")); +const Content = lazy(() => importMDX("../Props/rating.mdx")); export default function RatingPlayground() { return ( diff --git a/src/content/SearchBar/index.jsx b/src/content/SearchBar/index.jsx index a804f45..d92e756 100644 --- a/src/content/SearchBar/index.jsx +++ b/src/content/SearchBar/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./searchbar.playground.jsx"; -const Content = lazy(() => importMDX("../Props/searchbar.md")); +const Content = lazy(() => importMDX("../Props/searchbar.mdx")); export default function SearchBarPlayground() { return ( diff --git a/src/content/Slider/index.jsx b/src/content/Slider/index.jsx index 09b7109..5a3a04e 100644 --- a/src/content/Slider/index.jsx +++ b/src/content/Slider/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./slider.playground.jsx"; -const Content = lazy(() => importMDX("../Props/slider.md")); +const Content = lazy(() => importMDX("../Props/slider.mdx")); export default function SliderPlayground() { return ( diff --git a/src/content/SocialIcon/index.jsx b/src/content/SocialIcon/index.jsx index 42fa5d2..f99471d 100644 --- a/src/content/SocialIcon/index.jsx +++ b/src/content/SocialIcon/index.jsx @@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./socialicon.playground.jsx"; -const Content = lazy(() => importMDX("../Props/rating.md")); +const Content = lazy(() => importMDX("../Props/socialicon.mdx")); export default function SocialIconPlayground() { return ( diff --git a/src/content/Text/index.jsx b/src/content/Text/index.jsx index 3a782d5..c685689 100644 --- a/src/content/Text/index.jsx +++ b/src/content/Text/index.jsx @@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./tooltip.playground.jsx"; -const Content = lazy(() => importMDX("../Props/text.md")); +const Content = lazy(() => importMDX("../Props/text.mdx")); export default function TextPlayground() { return ( diff --git a/src/content/Tile/index.jsx b/src/content/Tile/index.jsx index 3f5e839..37a0053 100644 --- a/src/content/Tile/index.jsx +++ b/src/content/Tile/index.jsx @@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer"; import Playground from "./tile.playground.jsx"; -const Content = lazy(() => importMDX("../Props/tile.md")); +const Content = lazy(() => importMDX("../Props/tile.mdx")); export default function TilePlayground() { return ( diff --git a/src/content/ToolTip/index.jsx b/src/content/ToolTip/index.jsx index b094503..c9c7064 100644 --- a/src/content/ToolTip/index.jsx +++ b/src/content/ToolTip/index.jsx @@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro"; import PropDrawer from "../../components/PropDrawer"; import Playground from "./tooltip.playground.jsx"; -const Content = lazy(() => importMDX("../Props/tooltip.md")); +const Content = lazy(() => importMDX("../Props/tooltip.mdx")); export default function ToolTipPlayground() { return ( From 84d8e0499ae78d7d02580a3e6fec17e1c04dab11 Mon Sep 17 00:00:00 2001 From: Uyadav207 Date: Sat, 20 Mar 2021 11:53:50 +0530 Subject: [PATCH 3/3] resolved compilation error: No directory found --- .gitignore | 2 +- src/content/Props/airbnb.mdx | 49 +++++ src/content/Props/avatar.mdx | 240 +++++++++++++++++++++ src/content/Props/badge.mdx | 156 ++++++++++++++ src/content/Props/bottomsheet.mdx | 39 ++++ src/content/Props/button.mdx | 260 +++++++++++++++++++++++ src/content/Props/button_group.mdx | 226 ++++++++++++++++++++ src/content/Props/card.mdx | 50 +++++ src/content/Props/checkbox.mdx | 237 +++++++++++++++++++++ src/content/Props/divider.mdx | 18 ++ src/content/Props/header.mdx | 169 +++++++++++++++ src/content/Props/icon.mdx | 203 ++++++++++++++++++ src/content/Props/image.mdx | 97 +++++++++ src/content/Props/input.mdx | 218 +++++++++++++++++++ src/content/Props/listitem.mdx | 152 ++++++++++++++ src/content/Props/overlay.mdx | 152 ++++++++++++++ src/content/Props/pricing.mdx | 126 +++++++++++ src/content/Props/rating.mdx | 237 +++++++++++++++++++++ src/content/Props/searchbar.mdx | 322 +++++++++++++++++++++++++++++ src/content/Props/slider.mdx | 254 +++++++++++++++++++++++ src/content/Props/socialicon.mdx | 214 +++++++++++++++++++ src/content/Props/text.mdx | 103 +++++++++ src/content/Props/tile.mdx | 219 ++++++++++++++++++++ src/content/Props/tooltip.mdx | 231 +++++++++++++++++++++ 24 files changed, 3973 insertions(+), 1 deletion(-) create mode 100644 src/content/Props/airbnb.mdx create mode 100644 src/content/Props/avatar.mdx create mode 100644 src/content/Props/badge.mdx create mode 100644 src/content/Props/bottomsheet.mdx create mode 100644 src/content/Props/button.mdx create mode 100644 src/content/Props/button_group.mdx create mode 100644 src/content/Props/card.mdx create mode 100644 src/content/Props/checkbox.mdx create mode 100644 src/content/Props/divider.mdx create mode 100644 src/content/Props/header.mdx create mode 100644 src/content/Props/icon.mdx create mode 100644 src/content/Props/image.mdx create mode 100644 src/content/Props/input.mdx create mode 100644 src/content/Props/listitem.mdx create mode 100644 src/content/Props/overlay.mdx create mode 100644 src/content/Props/pricing.mdx create mode 100644 src/content/Props/rating.mdx create mode 100644 src/content/Props/searchbar.mdx create mode 100644 src/content/Props/slider.mdx create mode 100644 src/content/Props/socialicon.mdx create mode 100644 src/content/Props/text.mdx create mode 100644 src/content/Props/tile.mdx create mode 100644 src/content/Props/tooltip.mdx diff --git a/.gitignore b/.gitignore index 5ec98d8..8a8ebd0 100644 --- a/.gitignore +++ b/.gitignore @@ -26,5 +26,5 @@ yarn-error.log* yarn.lock # Remote docs -src/content/Props +# src/content/Props react-native-elements diff --git a/src/content/Props/airbnb.mdx b/src/content/Props/airbnb.mdx new file mode 100644 index 0000000..8675610 --- /dev/null +++ b/src/content/Props/airbnb.mdx @@ -0,0 +1,49 @@ +# Props + +- [`count`](#count) +- [`defaultRating`](#defaultRating) +- [`onFinishRating`](#onFinishRating) +- [`reviews`](#reviews) +- [`showRating`](#showRating) + +--- + +# Reference + +### `count` + +Total number of ratings to display + +| Type | Default | +| :----: | :-----: | +| number | 5 | + +--- + +### `defaultRating` + +Initial value for the rating defaultRating + +| Type | Default | +| :------------: | :-----: | +| number | 1 | + +--- + +### `reviews` + +Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label + +| Type | Default | +| :------: | :------------------------------------------: | +| string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] | + +--- + +### `onFinishRating` + +Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) + +| Type | Default | +| :------------: | :-----: | +| function | none | diff --git a/src/content/Props/avatar.mdx b/src/content/Props/avatar.mdx new file mode 100644 index 0000000..ad924df --- /dev/null +++ b/src/content/Props/avatar.mdx @@ -0,0 +1,240 @@ +# Props + +- [`activeOpacity`](#activeopacity) +- [`avatarStyle`](#avatarstyle) +- [`Component`](#Component) +- [`containerStyle`](#containerstyle) +- [`icon`](#icon) +- [`iconStyle`](#iconstyle) +- [`ImageComponent`](#imagecomponent) +- [`imageProps`](#imageprops) +- [`onLongPress`](#onlongpress) +- [`onPress`](#onpress) +- [`overlayContainerStyle`](#overlaycontainerstyle) +- [`placeholderStyle`](#placeholderstyle) +- [`renderPlaceholderContent`](#renderplaceholdercontent) +- [`rounded`](#rounded) +- [`size`](#size) +- [`source`](#source) +- [`title`](#title) +- [`titleStyle`](#titlestyle) + +--- + +## Child Components + +### Accessory + +> Receives either all [Icon](icon.md#props) or [Image](image.md#props) props. + +--- + +## Reference + +### `accessory` + +Icon or Image used as small overlay. +If a `source` key is used in the object, then an Image will be used. + +| Type | Default | +| :--------------------------------------------------------------------: | :---------------------------------------------------------------------------: | +| {[...Icon props](icon.md#props)} or {[...Image props](image.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } | + +--- + +### `activeOpacity` + +Opacity when pressed + +| Type | Default | +| :----: | :-----: | +| number | 0.2 | + +--- + +### `avatarStyle` + +Style for avatar image + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `Component` + +Component for enclosing element (eg: TouchableHighlight, View, etc) + +| Type | Default | +| :------: | :----------------: | +| function | TouchableHighlight | + +--- + +### `containerStyle` + +Styling for outer container + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `icon` + +Displays an icon as the main content of the Avatar. **Cannot be used alongside +title**. When used with the `source` prop it will be used as the placeholder. + +| Type | Default | +| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | +| object {name: string, color: string, size: number, type: string (default is material, or choose from [supported icon sets](icon.md#available-icon-sets)), iconStyle: object(style)} | none | + +--- + +### `iconStyle` + +Extra styling for icon component (optional) + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `ImageComponent` + +Custom ImageComponent for Avatar + +| Type | Default | +| :------------------------: | :-----: | +| React component or element | Image | + +### `imageProps` + +Optional properties to pass to the avatar e.g "resizeMode" + +| Type | Default | +| :--------------------------------: | :-----: | +| {[...Image props](image.md#props)} | none | + +--- + +### `onAccessoryPress` + +Callback function when pressing on the accessory + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onLongPress` + +Callback function when long pressing component + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onPress` + +Callback function when pressing component + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `overlayContainerStyle` + +Style for the view outside image or icon + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `placeholderStyle` + +Adds style to the placeholder wrapper + +| Type | Default | +| :------------: | :------------------------------: | +| object (style) | `{ backgroundColor: '#BDBDBD' }` | + +--- + +### `renderPlaceholderContent` + +Custom placeholder element (by default, it's the title) + +| Type | Default | +| :------------------------: | :-----: | +| React component or element | none | + +--- + +### `rounded` + +Makes the avatar circular + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `showAccessory` + +Shows an accessory over the avatar (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `size` + +Size of the avatar + +| Type | Default | +| :----------------------------------------------------: | :-----: | +| string(`small`, `medium`, `large`, `xlarge`) or number | `small` | + +--- + +### `source` + +Image source + +| Type | Default | +| :----------------------------------------------------------------: | :-----: | +| [ImageSource](https://facebook.github.io/react-native/docs/images) | none | + +--- + +### `title` + +Renders title in the placeholder + +| Type | Default | +| :----: | :-----: | +| string | none | + +--- + +### `titleStyle` + +Style for the title + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | \ No newline at end of file diff --git a/src/content/Props/badge.mdx b/src/content/Props/badge.mdx new file mode 100644 index 0000000..fd8f1e0 --- /dev/null +++ b/src/content/Props/badge.mdx @@ -0,0 +1,156 @@ +## Props + +- [`badgeStyle`](#badgestyle) +- [`Component`](#Component) +- [`containerStyle`](#containerstyle) +- [`onPress`](#onpress) +- [`status`](#status) +- [`textProps`](#textprops) +- [`textStyle`](#textstyle) +- [`value`](#value) + +--- + +## Reference + +### `badgeStyle` + +Additional styling for badge (background) view component (optional) + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `Component` + +Custom component to replace the badge outer component + +| Type | Default | +| :--------------------: | :----------------------------------------: | +| React Native Component | View, if `onPress` then `TouchableOpacity` | + +--- + +### `containerStyle` + +Style for the container (optional) + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `onPress` + +Function called when pressed on the badge + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `status` + +Determines color of the indicator + +| Type | Default | +| :--------------------------------------: | :-----: | +| `primary`, `success`, `warning`, `error` | primary | + +--- + +### `textProps` + +Extra props for text component (optional) + +| Type | Default | +| :-----------------: | :-----: | +| Text props (object) | none | + +--- + +### `textStyle` + +Extra styling for icon component (optional) + +| Type | Default | +| :-----------------: | :------------: | +| Text style (object) | Internal Style | + +--- + +### `value` + +Text value to be displayed by badge, defaults to empty + +| Type | Default | +| :----------------------------------------: | :-----: | +| String OR Number OR React Native Component | none | + +--- + +## Props for withBadge + +- [`options`](#options) +- [`value`](#value) + +--- + +## Reference for withBadge + +### `options` + +> Also receives all +> [Badge](badge.md#props) props. + +Object with the following (optional) keys: + +#### `bottom` + +| Type | Default | +| :---------------: | :-------: | +| number (optional) | undefined | + +#### `left` + +| Type | Default | +| :---------------: | :-------: | +| number (optional) | undefined | + +#### `right` + +| Type | Default | +| :---------------: | :------------------------------------------: | +| number (optional) | -16 (-3 with MiniBadge aka. without `value`) | + +#### `top` + +| Type | Default | +| :---------------: | :-------------------: | +| number (optional) | -1 (3 with MiniBadge) | + +#### `hidden` + +| Type | Default | +| :----------------: | :-----: | +| boolean (optional) | false | + +#### `containerStyle` + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `value` + +Text value to be displayed by badge, defaults to empty + +| Type | Default | +| :-------------------------------------------------------------------------------------: | :-----: | +| String OR Number OR React Native Component OR Function, which returns one of the former | none | diff --git a/src/content/Props/bottomsheet.mdx b/src/content/Props/bottomsheet.mdx new file mode 100644 index 0000000..c719cf1 --- /dev/null +++ b/src/content/Props/bottomsheet.mdx @@ -0,0 +1,39 @@ +# Props + +- [`containerStyle`](#containerStyle) +- [`isVisible`](#isvisible) +- [`modalProps`](#modalprops) + +--- + +# Reference + +### `containerStyle` + +Style of the bottom sheet's container + +Use this to change the color of the underlay + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `isVisible` + +Is the modal component shown + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `modalProps` + +Additional props handed to the `Modal` + +| Type | Default | +| :----------------------------------------------------------: | :-----: | +| [Modal Props](https://reactnative.dev/docs/modal.html#props) | {} | diff --git a/src/content/Props/button.mdx b/src/content/Props/button.mdx new file mode 100644 index 0000000..d9e6153 --- /dev/null +++ b/src/content/Props/button.mdx @@ -0,0 +1,260 @@ +## Props + +> Also receives all +> [TouchableNativeFeedback](http://facebook.github.io/react-native/docs/touchablenativefeedback.html#props) +> (Android) or +> [TouchableOpacity](http://facebook.github.io/react-native/docs/touchableopacity.html#props) +> (iOS) props + +- [`buttonStyle`](#buttonstyle) +- [`containerStyle`](#containerstyle) +- [`disabled`](#disabled) +- [`disabledStyle`](#disabledstyle) +- [`disabledTitleStyle`](#disabledtitlestyle) +- [`icon`](#icon) +- [`iconContainerStyle`](#iconcontainerstyle) +- [`iconRight`](#iconright) +- [`linearGradientProps`](#lineargradientprops) +- [`loading`](#loading) +- [`loadingProps`](#loadingprops) +- [`loadingStyle`](#loadingstyle) +- [`onPress`](#onpress) +- [`raised`](#raised) +- [`title`](#title) +- [`titleProps`](#titleprops) +- [`titleStyle`](#titlestyle) +- [`TouchableComponent`](#touchablecomponent) +- [`type`](#type) +- [`ViewComponent`](#viewcomponent) + +--- + +## Reference + +### `buttonStyle` + +add additional styling for button component (optional) + +| Type | Default | +| :-----------------: | :-----: | +| View style (object) | none | + +--- + +### `containerStyle` + +styling for Component container + +| Type | Default | +| :-----------------: | :-----: | +| View style (object) | none | + +--- + +### `disabled` + +disables user interaction + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `disabledStyle` + +style of the button when disabled + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `disabledTitleStyle` + +style of the title when disabled + +| Type | Default | +| :-----------------: | :------------: | +| Text style (object) | Internal Style | + +--- + +### `icon` + +displays a centered icon (when no title) or to the left (with text). (can be +used along with iconRight as well). Can be an object or a custom component. + +| Type | Default | +| :--------------------------------------------------------: | :-----: | +| {[...Icon props](icon.md#props)}
**OR**
component | none | + +--- + +### `iconContainerStyle` + +styling for Icon Component container + +| Type | Default | +| :-----------------: | :-----: | +| View style (object) | none | + +--- + +### `iconRight` + +displays Icon to the right of title. Needs to be used along with `icon` prop + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `linearGradientProps` + +displays a linear gradient. See [usage](#lineargradient-usage). + +| Type | Default | +| :------------------------------------------------------------------------------------------------------------: | :-----: | +| {[...Gradient props](https://github.com/react-native-community/react-native-linear-gradient#additional-props)} | none | + +--- + +### `loading` + +prop to display a loading spinner (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `loadingProps` + +add additional props for ActivityIndicator component (optional) + +| Type | Default | +| :--------------------------------------------------------------------------------------------------: | :-------------: | +| {[...ActivityIndicator props](https://facebook.github.io/react-native/docs/activityindicator#props)} | Internal object | + +--- + +### `loadingStyle` + +add additional styling for loading component (optional) + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `onPress` + +onPress method (optional) + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `raised` + +Add raised button styling (optional). Has no effect if `type="clear"`. + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `title` + +button title (optional) + +| Type | Default | +| :----: | :-----: | +| string | none | + +--- + +### `titleProps` + +add additional props for Text component (optional) + +| Type | Default | +| :------------------------------------------------------------------------: | :-----: | +| {[...Text props](https://facebook.github.io/react-native/docs/text#props)} | none | + +--- + +### `titleStyle` + +add additional styling for title component (optional) + +| Type | Default | +| :-----------------: | :-----: | +| Text style (object) | none | + +--- + +### `TouchableComponent` + +component for user interaction + +| Type | Default | +| :-----------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | +| Touchable Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) or TouchableOpacity (android, if [`linearGradientProps`](###linearGradientProps) exists) | + +--- + +### `type` + +Type of button (optional) + +| Type | Default | +| :-------------------------: | :-----: | +| `solid`, `clear`, `outline` | solid | + +--- + +### `ViewComponent` + +component for container + +| Type | Default | +| :--------------------: | :-----: | +| React Native Component | View | + +--- + +## LinearGradient Usage + +Using LinearGradient in React Native Elements is supported through the +[react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient) +package. If you're using expo or create-react-native-app then you can use +`linearGradientProps` prop right out the box with no additional setup. + +For react-native-cli users, make sure to follow the +[installation instructions](https://github.com/react-native-community/react-native-linear-gradient#add-it-to-your-project) +and use it like this: + +```jsx +import { Button } from 'react-native-elements'; +import LinearGradient from 'react-native-linear-gradient'; + +... + +