diff --git a/docs/src/structure.ts b/docs/src/structure.ts index 1bccce731..33c9e9908 100644 --- a/docs/src/structure.ts +++ b/docs/src/structure.ts @@ -288,6 +288,15 @@ export const structure = [ }, ], }, + { + type: 'tabs', + name: 'Card', + icon: 'card.svg', + source: [ + 'Card', + 'CardHeader', + ], + }, { type: 'tabs', name: 'Layout', diff --git a/package-lock.json b/package-lock.json index 9a244b8c5..710200df7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5689,8 +5689,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -5711,14 +5710,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5733,20 +5730,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -5863,8 +5857,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -5876,7 +5869,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5891,7 +5883,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5899,14 +5890,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5925,7 +5914,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6006,8 +5994,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -6019,7 +6006,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6105,8 +6091,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -6142,7 +6127,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6162,7 +6146,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6206,14 +6189,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/src/framework/ui/card/card.component.tsx b/src/framework/ui/card/card.component.tsx new file mode 100644 index 000000000..b1df8dbf0 --- /dev/null +++ b/src/framework/ui/card/card.component.tsx @@ -0,0 +1,235 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import React from 'react'; +import { + StyleSheet, + View, + StyleProp, + TextStyle, + ViewStyle, + TouchableOpacity, + TouchableOpacityProps, + GestureResponderEvent, +} from 'react-native'; +import { + styled, + StyledComponentProps, + StyleType, +} from '@kitten/theme'; +import { + Divider, + DividerElement, +} from '../divider/divider.component'; +import { CardHeaderElement } from './cardHeader.component'; +import { allWithPrefix } from '../support/services'; + +interface HeaderStyles { + style: StyleProp; + accent: StyleProp; + title: StyleProp; + description: StyleProp; +} + +type HeaderProp = React.ReactElement | CardHeaderElement; +type FooterProp = React.ReactElement; +export type CardFooterElement = FooterProp; + +interface ComponentProps { + appearance?: string; + status?: string; + children: React.ReactNode; + header?: () => HeaderProp; + footer?: () => FooterProp; +} + +export type CardProps = StyledComponentProps & TouchableOpacityProps & ComponentProps; +export type CardElement = React.ReactElement; + +/** + * Styled `Card` component is a basic content container component. + * + * @extends React.Component + * + * @property {string} status - Determines the status of the component. + * Can be `basic`, `primary`, `success`, `info`, `warning`, `danger`. + * Default is `basic`. + * + * @property {string} appearance - Determines the appearance of the component. + * Can be `filled` or `outline`. + * Default is `outline`. + * + * @property {React.ReactNode} children - Determines text of the component. + * + * @property {() => HeaderProp} header - Determines header of the component. + * + * @property {() => FooterProp} footer - Determines footer of the component. + * + * @property {TouchableOpacityProps} - Any props applied to TouchableOpacity component. + * + * @property {StyledComponentProps} - Any props applied to `styled` component. + * + * @overview-example CardSimpleUsage + * + * @overview-example CardStatuses + * + * @overview-example CardEvaHeader + * + * @overview-example CardCustomHeader + * + * @overview-example CardFooter + * + * @overview-example CardHeaderFooter + */ + +class CardComponent extends React.Component { + + static styledComponentName: string = 'Card'; + + private getComponentStyle = (source: StyleType): StyleType => { + const { + backgroundColor, + borderRadius, + borderWidth, + borderColor, + } = source; + + const headerStyles: StyleType = allWithPrefix(source, 'header'); + const bodyStyles: StyleType = allWithPrefix(source, 'body'); + const footerStyles: StyleType = allWithPrefix(source, 'footer'); + const accentStyles: StyleType = allWithPrefix(source, 'accent'); + const titleStyles: StyleType = allWithPrefix(source, 'title'); + const descriptionStyles: StyleType = allWithPrefix(source, 'description'); + + return { + container: { + backgroundColor: backgroundColor, + borderRadius: borderRadius, + borderWidth: borderWidth, + borderColor: borderColor, + }, + header: { + paddingVertical: headerStyles.headerPaddingVertical, + paddingHorizontal: headerStyles.headerPaddingHorizontal, + }, + body: { + paddingVertical: bodyStyles.bodyPaddingVertical, + paddingHorizontal: bodyStyles.bodyPaddingHorizontal, + }, + footer: { + paddingVertical: footerStyles.footerPaddingVertical, + paddingHorizontal: footerStyles.footerPaddingHorizontal, + }, + title: { + fontFamily: titleStyles.titleFontFamily, + fontSize: titleStyles.titleFontSize, + fontWeight: titleStyles.titleFontWeight, + lineHeight: titleStyles.titleLineHeight, + color: titleStyles.titleColor, + marginHorizontal: titleStyles.titleMarginHorizontal, + }, + description: { + fontFamily: descriptionStyles.titleFontFamily, + fontSize: descriptionStyles.titleFontSize, + fontWeight: descriptionStyles.titleFontWeight, + lineHeight: descriptionStyles.titleLineHeight, + color: descriptionStyles.descriptionColor, + marginHorizontal: descriptionStyles.descriptionMarginHorizontal, + }, + accent: { + backgroundColor: accentStyles.accentBackgroundColor, + height: accentStyles.accentHeight, + }, + }; + }; + + private renderDivider = (): DividerElement => { + return ( + + ); + }; + + private renderHeader = (headerStyles: HeaderStyles): HeaderProp => { + const header: HeaderProp = this.props.header(); + + return React.cloneElement(header, { + headerStyle: [styles.header, headerStyles.style, header.props.style], + accentStyle: headerStyles.accent, + titleStyle: headerStyles.title, + descriptionStyle: headerStyles.description, + }); + }; + + private renderFooter = (style: StyleType): FooterProp => { + const footer: FooterProp = this.props.footer(); + + return React.cloneElement(footer, { + style: [style, styles.footer, footer.props.style], + }); + }; + + private renderBody = (style: StyleType): React.ReactNode => { + return ( + + {this.props.children} + + ); + }; + + private renderComponentChildren = (style: StyleType): React.ReactNodeArray => { + const { header, footer } = this.props; + + const headerStyles: HeaderStyles = { + style: style.header, + accent: style.accent, + title: style.title, + description: style.description, + }; + + return [ + header && this.renderHeader(headerStyles), + this.renderBody(style.body), + footer && this.renderFooter(style.footer), + ]; + }; + + public render(): CardElement { + const { themedStyle, style, children, ...restProps } = this.props; + const { container, ...childrenStyles } = this.getComponentStyle(themedStyle); + const [header, body, footer] = this.renderComponentChildren(childrenStyles); + + return ( + + {header} + {header && this.renderDivider()} + {body} + {footer && this.renderDivider()} + {footer} + + ); + } +} + +const styles = StyleSheet.create({ + container: { + overflow: 'hidden', + justifyContent: 'space-between', + }, + header: { + backgroundColor: 'transparent', + }, + body: { + backgroundColor: 'transparent', + }, + footer: { + backgroundColor: 'transparent', + }, +}); + +export const Card = styled(CardComponent); diff --git a/src/framework/ui/card/card.spec.tsx b/src/framework/ui/card/card.spec.tsx new file mode 100644 index 000000000..67a6e5f57 --- /dev/null +++ b/src/framework/ui/card/card.spec.tsx @@ -0,0 +1,139 @@ +import React from 'react'; +import { + Image, + ViewProps, + View, +} from 'react-native'; +import { + render, + RenderAPI, +} from 'react-native-testing-library'; +import { + ApplicationProvider, + ApplicationProviderProps, +} from '@kitten/theme'; +import { + Card, + CardProps, + CardFooterElement, + CardHeaderElement, +} from './card.component'; +import { CardHeader } from './cardHeader.component'; +import { + mapping, + theme, +} from '../support/tests'; +import { Button, Text } from '@kitten/ui'; +import { ReactTestInstance } from 'react-test-renderer'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust.'; +const headerImageUri: string = 'https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704__340.jpg'; + +export const CardBodyContent = (): React.ReactElement => { + return ( + + + {bodyText} + + + ); +}; + +const Mock = (props?: Partial): React.ReactElement => { + return ( + + } + /> + + ); +}; + +describe('@card: component checks', () => { + + it('* header title renders properly', () => { + const title: string = 'Title'; + const Header = (): CardHeaderElement => ( + + ); + const element: RenderAPI = render(); + const textElement: ReactTestInstance = element.getByText(title); + + expect(textElement).toBeTruthy(); + expect(textElement.props.children).toBe(title); + }); + + it('* header description renders properly', () => { + const description: string = 'Description'; + const Header = (): CardHeaderElement => ( + + ); + const element: RenderAPI = render(); + const textElement: ReactTestInstance = element.getByText(description); + + expect(textElement).toBeTruthy(); + expect(textElement.props.children).toBe(description); + }); + + it('* custom header renders properly', () => { + const Header = (): CardHeaderElement => ( + + + + ); + const element: RenderAPI = render(); + const imageElement: ReactTestInstance = element.getByType(Image); + + expect(imageElement.props.source.uri).toBe(headerImageUri); + expect(imageElement).toBeTruthy(); + }); + + it('* body element renders properly', () => { + const element: RenderAPI = render(); + + const bodyTextElement: ReactTestInstance = element.getByText(bodyText); + + expect(bodyTextElement).toBeTruthy(); + expect(bodyTextElement.props.children).toBe(bodyText); + }); + + it(' footer renders properly', () => { + const Footer = (): CardFooterElement => ( + + + + + ); + const element: RenderAPI = render(); + + expect(element.getAllByType(Button)[0]).toBeTruthy(); + expect(element.getAllByType(Button)[1]).toBeTruthy(); + }); + + it('statuses works properly', () => { + const expectedAccentHeight: number = 4; + const Header = (): CardHeaderElement => ( + + ); + const element: RenderAPI = render( + , + ); + + expect(element.getByType(CardHeader).props.accentStyle.height).toBe(expectedAccentHeight); + }); +}); + + diff --git a/src/framework/ui/card/cardHeader.component.tsx b/src/framework/ui/card/cardHeader.component.tsx new file mode 100644 index 000000000..b08fb1313 --- /dev/null +++ b/src/framework/ui/card/cardHeader.component.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { + View, + ViewProps, + StyleProp, + ViewStyle, + TextStyle, +} from 'react-native'; +import { ListItem } from '../list/listItem.component'; + +interface ComponentProps { + title: string; + description?: string; + titleStyle?: StyleProp; + descriptionStyle?: StyleProp; + headerStyle?: StyleProp; + accentStyle?: StyleProp; +} + +export type CardHeaderProps = ViewProps & ComponentProps; +export type CardHeaderElement = React.ReactElement; + +/** + * Styled `CardHeader` component can be used like `header` in the `Card` component. + * + * @extends React.Component + * + * @property {string} title - Determines the title of the ListItem. + * + * @property {string} description - Determines the description of the ListItem's title. + * + * @property {StyleProp} titleStyle - Customizes title style. + * + * @property {StyleProp} descriptionStyle - Customizes description style. + * + * @property {StyleProp} accentStyle - Determines style of the stripe element. + * + * @property {StyleProp} headerStyle - Determines style of the header container element. + * + * @property {ViewProps} - Any props applied to View component. + */ + +export class CardHeader extends React.Component { + + public render(): React.ReactFragment { + const { accentStyle, style, headerStyle, ...restProps } = this.props; + + return ( + + + + + ); + } +} diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts index a72fcd63f..f88d863f6 100644 --- a/src/framework/ui/index.ts +++ b/src/framework/ui/index.ts @@ -29,6 +29,17 @@ export { CalendarElement, CalendarProps, } from './calendar/calendar.component'; +export { + Card, + CardProps, + CardElement, + CardFooterElement, +} from './card/card.component'; +export { + CardHeader, + CardHeaderProps, + CardHeaderElement, +} from './card/cardHeader.component'; export { RangeCalendar, RangeCalendarProps, diff --git a/src/framework/ui/support/tests/mapping.json b/src/framework/ui/support/tests/mapping.json index 743408349..8230c7452 100644 --- a/src/framework/ui/support/tests/mapping.json +++ b/src/framework/ui/support/tests/mapping.json @@ -1092,6 +1092,178 @@ } } }, + "Card": { + "meta": { + "scope": "all", + "parameters": { + "backgroundColor": { + "type": "string" + }, + "borderRadius": { + "type": "number" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + }, + "headerPaddingHorizontal": { + "type": "number" + }, + "headerPaddingVertical": { + "type": "number" + }, + "titleFontFamily": { + "type": "string" + }, + "titleFontSize": { + "type": "number" + }, + "titleLineHeight": { + "type": "number" + }, + "titleFontWeight": { + "type": "string" + }, + "titleColor": { + "type": "string" + }, + "titleMarginHorizontal": { + "type": "number" + }, + "descriptionColor": { + "type": "string" + }, + "descriptionFontFamily": { + "type": "string" + }, + "descriptionFontSize": { + "type": "number" + }, + "descriptionFontWeight": { + "type": "string" + }, + "descriptionLineHeight": { + "type": "number" + }, + "descriptionMarginHorizontal": { + "type": "number" + }, + "bodyPaddingHorizontal": { + "type": "number" + }, + "bodyPaddingVertical": { + "type": "number" + }, + "footerPaddingHorizontal": { + "type": "number" + }, + "footerPaddingVertical": { + "type": "number" + }, + "accentBackgroundColor": { + "type": "string" + }, + "accentHeight": { + "type": "number" + } + }, + "appearances": { + "filled": { + "default": false + }, + "outline": { + "default": true + } + }, + "variantGroups": { + "status": { + "basic": { + "default": true + }, + "primary": { + "default": false + }, + "success": { + "default": false + }, + "info": { + "default": false + }, + "warning": { + "default": false + }, + "danger": { + "default": false + } + } + }, + "states": {} + }, + "appearances": { + "outline": { + "mapping": { + "backgroundColor": "background-basic-color-1", + "borderRadius": 4, + "borderColor": "border-basic-color-4", + "borderWidth": 1, + "headerPaddingHorizontal": 24, + "headerPaddingVertical": 16, + "titleFontFamily": "text-font-family", + "titleFontSize": "text-heading-6-font-size", + "titleFontWeight": "text-heading-6-font-weight", + "titleLineHeight": "text-heading-6-line-height", + "titleColor": "text-basic-color", + "titleMarginHorizontal": 0, + "descriptionFontFamily": "text-font-family", + "descriptionFontSize": "text-subtitle-2-font-size", + "descriptionFontWeight": "text-subtitle-2-font-weight", + "descriptionLineHeight": "text-subtitle-2-line-height", + "descriptionMarginHorizontal": 0, + "descriptionColor": "text-basic-color", + "bodyPaddingHorizontal": 24, + "bodyPaddingVertical": 16, + "footerPaddingHorizontal": 24, + "footerPaddingVertical": 16 + }, + "variantGroups": { + "status": { + "basic": { + "accentBackgroundColor": "transparent", + "accentHeight": 0 + }, + "primary": { + "accentBackgroundColor": "color-primary-default", + "accentHeight": 4 + }, + "success": { + "accentBackgroundColor": "color-success-default", + "accentHeight": 4 + }, + "info": { + "accentBackgroundColor": "color-info-default", + "accentHeight": 4 + }, + "warning": { + "accentBackgroundColor": "color-warning-default", + "accentHeight": 4 + }, + "danger": { + "accentBackgroundColor": "color-danger-default", + "accentHeight": 4 + } + } + } + }, + "filled": { + "mapping": { + "borderWidth": 0, + "borderColor": "transparent" + } + } + } + }, "Calendar": { "meta": { "scope": "all", diff --git a/src/playground/package-lock.json b/src/playground/package-lock.json index f1c33e149..283d1d904 100644 --- a/src/playground/package-lock.json +++ b/src/playground/package-lock.json @@ -818,6 +818,24 @@ "regexpu-core": "^4.6.0" } }, + "@babel/polyfill": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.6.0.tgz", + "integrity": "sha512-q5BZJI0n/B10VaQQvln1IlDK3BTBJFbADx7tv+oXDPIDZuTo37H5Adb9jhlXm/fEN4Y7/64qD9mnrJJG7rmaTw==", + "dev": true, + "requires": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.2" + }, + "dependencies": { + "core-js": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz", + "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==", + "dev": true + } + } + }, "@babel/preset-env": { "version": "7.6.3", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.6.3.tgz", @@ -1052,15 +1070,16 @@ } }, "@expo/webpack-config": { - "version": "0.7.12", - "resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-0.7.12.tgz", - "integrity": "sha512-FIMtCZMvmJ37wTBXIfetCcdGb/h4f4ivYfRRbfCPK9jXFuUVIyKK5+V6Oc47AmMt49eFl7uAJUnkyvhgPmG0QA==", + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-0.7.6.tgz", + "integrity": "sha512-zCYhUaZMdiaoA76A6P8oYYb5U6MF0FqRenCV45Ok3FdCGR4ml4OE0Ek7TUnpk+b00/lzroF0fcPDvMdMLSbruA==", "dev": true, "requires": { "@babel/core": "^7.0.0", + "@babel/polyfill": "^7.2.5", "@babel/runtime": "^7.3.4", - "@expo/config": "^2.2.0", - "@expo/webpack-pwa-manifest-plugin": "^1.2.7", + "@expo/config": "^2.1.5", + "@expo/webpack-pwa-manifest-plugin": "^1.2.5", "@types/yup": "^0.26.24", "babel-loader": "^8.0.5", "brotli-webpack-plugin": "^1.1.0", @@ -3405,20 +3424,16 @@ } }, "console-browserify": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz", - "integrity": "sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=", - "dev": true, - "requires": { - "date-now": "^0.1.4" - } + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz", + "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==", + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "constants-browserify": { "version": "1.0.0", @@ -3741,13 +3756,21 @@ "dev": true }, "css-tree": { - "version": "1.0.0-alpha.33", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz", - "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==", + "version": "1.0.0-alpha.37", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", + "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==", "dev": true, "requires": { "mdn-data": "2.0.4", - "source-map": "^0.5.3" + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } } }, "css-unit-converter": { @@ -3846,30 +3869,12 @@ "dev": true }, "csso": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz", - "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz", + "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==", "dev": true, "requires": { - "css-tree": "1.0.0-alpha.29" - }, - "dependencies": { - "css-tree": { - "version": "1.0.0-alpha.29", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz", - "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==", - "dev": true, - "requires": { - "mdn-data": "~1.1.0", - "source-map": "^0.5.3" - } - }, - "mdn-data": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz", - "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==", - "dev": true - } + "css-tree": "1.0.0-alpha.37" } }, "csstype": { @@ -3884,12 +3889,6 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, - "date-now": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", - "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=", - "dev": true - }, "debounce": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", @@ -3918,7 +3917,6 @@ "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", "dev": true, - "optional": true, "requires": { "mimic-response": "^2.0.0" } @@ -4043,8 +4041,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", - "dev": true, - "optional": true + "dev": true }, "detect-port-alt": { "version": "1.1.6", @@ -6037,8 +6034,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -6056,13 +6052,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6075,18 +6069,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -6189,8 +6180,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -6200,7 +6190,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6213,20 +6202,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6243,7 +6229,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6316,8 +6301,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -6327,7 +6311,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6403,8 +6386,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -6434,7 +6416,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6452,7 +6433,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6491,13 +6471,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -7089,16 +7067,16 @@ "dev": true }, "iltorb": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/iltorb/-/iltorb-2.4.3.tgz", - "integrity": "sha512-cr/kC07Cf9sW3TWH7yUxV2QkNjby4LMCsXGmxPCQs5x//QzTpF3GLPNY7L66G+DkNGaTRCgY+vYZ+dyAcuDOnQ==", + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/iltorb/-/iltorb-2.4.4.tgz", + "integrity": "sha512-7Qk6O7TK3rSWVRVRkPehcNTSN+P2i7MsG9pWmw6iVw/W6NcoNj0rFKOuBDM6fbZV6NNGuUW3JBRem6Ozn4KXhg==", "dev": true, "optional": true, "requires": { "detect-libc": "^1.0.3", - "nan": "^2.13.2", + "nan": "^2.14.0", "npmlog": "^4.1.2", - "prebuild-install": "^5.3.0", + "prebuild-install": "^5.3.2", "which-pm-runs": "^1.0.0" }, "dependencies": { @@ -8443,8 +8421,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.0.0.tgz", "integrity": "sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==", - "dev": true, - "optional": true + "dev": true }, "min-document": { "version": "2.19.0", @@ -8495,7 +8472,6 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8505,8 +8481,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true, - "optional": true + "dev": true } } }, @@ -8727,9 +8702,9 @@ } }, "node-abi": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.11.0.tgz", - "integrity": "sha512-kuy/aEg75u40v378WRllQ4ZexaXJiCvB68D2scDXclp/I4cRq6togpbOoKhmN07tns9Zldu51NNERo0wehfX9g==", + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.12.0.tgz", + "integrity": "sha512-VhPBXCIcvmo/5K8HPmnWJyyhvgKxnHTUMXR/XwGHV68+wrgkzST4UmQrY/XszSWA5dtnXpNp528zkcyJ/pzVcw==", "dev": true, "optional": true, "requires": { @@ -9492,9 +9467,9 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "postcss": { - "version": "7.0.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz", - "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==", + "version": "7.0.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz", + "integrity": "sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -12206,15 +12181,13 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.0.tgz", "integrity": "sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY=", - "dev": true, - "optional": true + "dev": true }, "simple-get": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz", "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==", "dev": true, - "optional": true, "requires": { "decompress-response": "^4.2.0", "once": "^1.3.1", @@ -12732,17 +12705,17 @@ } }, "svgo": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz", - "integrity": "sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.1.tgz", + "integrity": "sha512-2iv3AHKL+x2/nAvkg+vTv01aK94OFU6wTRbnv/K43mf1OdKEEA8xaQl7Wjs5Vrh9AlyXvyPd8fg6s6YzYdQTnQ==", "dev": true, "requires": { "chalk": "^2.4.1", "coa": "^2.0.2", "css-select": "^2.0.0", "css-select-base-adapter": "^0.1.1", - "css-tree": "1.0.0-alpha.33", - "csso": "^3.5.1", + "css-tree": "1.0.0-alpha.37", + "csso": "^4.0.2", "js-yaml": "^3.13.1", "mkdirp": "~0.5.1", "object.values": "^1.1.0", @@ -13152,7 +13125,6 @@ "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.0.1" } @@ -14065,15 +14037,13 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz", "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=", - "dev": true, - "optional": true + "dev": true }, "wide-align": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, - "optional": true, "requires": { "string-width": "^1.0.2 || 2" } diff --git a/src/playground/src/navigation/navigation.component.tsx b/src/playground/src/navigation/navigation.component.tsx index ff2e93c1f..710b2a1d2 100644 --- a/src/playground/src/navigation/navigation.component.tsx +++ b/src/playground/src/navigation/navigation.component.tsx @@ -36,6 +36,7 @@ import { CalendarContainer, DatepickerContainer, RangeCalendarContainer, + CardContainer, } from '../ui/screen'; import { DrawerNavigation } from './drawerNavigation.component'; import { sharingHeightContainer } from './sharingHeight.container'; @@ -51,6 +52,7 @@ const routes: NavigationRouteConfigMap = { ['Button']: ButtonContainer, ['Button Group']: ButtonGroupContainer, ['Calendar']: CalendarContainer, + ['Card']: CardContainer, ['Range Calendar']: RangeCalendarContainer, ['Checkbox']: CheckBoxContainer, ['Drawer']: DrawerContainer, diff --git a/src/playground/src/ui/screen/card/card.container.tsx b/src/playground/src/ui/screen/card/card.container.tsx new file mode 100644 index 000000000..fb76ea48c --- /dev/null +++ b/src/playground/src/ui/screen/card/card.container.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { + CardElement, + CardProps, +} from 'react-native-ui-kitten'; +import { CardShowcase } from './cardShowcase.component'; +import { + cardSettings, + cardShowcase, +} from './type'; +import { ShowcaseContainer } from '../common/showcase.container'; + +export class CardContainer extends React.Component { + + private renderItem = (props: CardProps): CardElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} diff --git a/src/playground/src/ui/screen/card/cardExamples.tsx b/src/playground/src/ui/screen/card/cardExamples.tsx new file mode 100644 index 000000000..2740ec29b --- /dev/null +++ b/src/playground/src/ui/screen/card/cardExamples.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { + View, + ViewProps, + StyleSheet, + Image, +} from 'react-native'; +import { + Text, + CardFooterElement, + CardHeaderElement, + CardHeader, + Button, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; +const headerImageUri: string = 'https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704__340.jpg'; + +export const CardBodyContent = (): React.ReactElement => { + return ( + + + {bodyText} + + + ); +}; + +export const EvaCardHeader = (): CardHeaderElement => { + return ( + + ); +}; + +export const CustomCardHeader = (): CardHeaderElement => { + return ( + + + + + Title + + + + ); +}; + +export const CardFooter = (): CardFooterElement => { + return ( + + + + + ); +}; + +const styles = StyleSheet.create({ + bodyText: { + fontSize: 15, + lineHeight: 20, + color: 'gray', + }, + headerTextContainer: { + paddingHorizontal: 24, + paddingVertical: 16, + }, + headerText: { + color: '#6e5f5e', + }, + headerImage: { + width: '100%', + height: 230, + }, + footerContainer: { + flexDirection: 'row', + justifyContent: 'flex-end', + }, + footerControl: { + marginRight: 12, + }, +}); diff --git a/src/playground/src/ui/screen/card/cardShowcase.component.tsx b/src/playground/src/ui/screen/card/cardShowcase.component.tsx new file mode 100644 index 000000000..f9c1a6e6c --- /dev/null +++ b/src/playground/src/ui/screen/card/cardShowcase.component.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { + Card, + CardProps, + CardElement, +} from 'react-native-ui-kitten'; + +export const CardShowcase = (props: CardProps): CardElement => { + return ( + + ); +}; diff --git a/src/playground/src/ui/screen/card/type.tsx b/src/playground/src/ui/screen/card/type.tsx new file mode 100644 index 000000000..cc09c2377 --- /dev/null +++ b/src/playground/src/ui/screen/card/type.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, + ComponentShowcaseSetting, +} from '../common/type'; +import { + CardBodyContent, + CardFooter, + CustomCardHeader, + EvaCardHeader, +} from './cardExamples'; + +const defaultCard: ComponentShowcaseItem = { + props: { + children: , + }, +}; + +const defaultSection: ComponentShowcaseSection = { + title: 'Default', + items: [ + defaultCard, + ], +}; + +const evaHeaderCard: ComponentShowcaseItem = { + props: { + children: , + header: EvaCardHeader, + }, +}; + +const evaHeaderSection: ComponentShowcaseSection = { + title: 'Eva Header', + items: [ + evaHeaderCard, + ], +}; + +const customHeaderCard: ComponentShowcaseItem = { + props: { + children: , + header: CustomCardHeader, + }, +}; + +const customHeaderSection: ComponentShowcaseSection = { + title: 'Custom Header', + items: [ + customHeaderCard, + ], +}; + +const footerCard: ComponentShowcaseItem = { + props: { + children: , + footer: CardFooter, + }, +}; + +const footerSection: ComponentShowcaseSection = { + title: 'Footer', + items: [ + footerCard, + ], +}; + +const headerFooterCard: ComponentShowcaseItem = { + props: { + children: , + header: EvaCardHeader, + footer: CardFooter, + }, +}; + +const headerFooterSection: ComponentShowcaseSection = { + title: 'Header + Footer', + items: [ + headerFooterCard, + ], +}; + +export const cardShowcase: ComponentShowcase = { + sections: [ + defaultSection, + evaHeaderSection, + customHeaderSection, + footerSection, + headerFooterSection, + ], +}; + +export const cardSettings: ComponentShowcaseSetting[] = [ + { + propertyName: 'appearance', + value: 'outline', + }, + { + propertyName: 'appearance', + value: 'filled', + }, + { + propertyName: 'status', + value: 'primary', + }, + { + propertyName: 'status', + value: 'success', + }, + { + propertyName: 'status', + value: 'info', + }, + { + propertyName: 'status', + value: 'warning', + }, + { + propertyName: 'status', + value: 'danger', + }, +]; diff --git a/src/playground/src/ui/screen/home.component.tsx b/src/playground/src/ui/screen/home.component.tsx index f332d2c2f..341bc7008 100644 --- a/src/playground/src/ui/screen/home.component.tsx +++ b/src/playground/src/ui/screen/home.component.tsx @@ -22,6 +22,7 @@ export const routes: RouteType[] = [ { name: 'Button' }, { name: 'Button Group' }, { name: 'Calendar' }, + { name: 'Card' }, { name: 'Range Calendar' }, { name: 'Checkbox' }, { name: 'Datepicker' }, diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts index 5d838677b..db688392b 100644 --- a/src/playground/src/ui/screen/index.ts +++ b/src/playground/src/ui/screen/index.ts @@ -25,5 +25,6 @@ export { ModalContainer } from './modal/modal.container'; export { SelectContainer } from './select/select.container'; export { DatepickerContainer } from './datepicker/datepicker.container'; export { RangeCalendarContainer } from './rangeCalendar/rangeCalendar.container'; +export { CardContainer } from './card/card.container'; export { default as Home } from './home.component'; diff --git a/src/playground/src/ui/screen/showcases/card/cardCustomHeader.component.tsx b/src/playground/src/ui/screen/showcases/card/cardCustomHeader.component.tsx new file mode 100644 index 000000000..ec47bf31e --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/cardCustomHeader.component.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { + Image, + StyleSheet, + View, +} from 'react-native'; +import { + Layout, + Card, + Text, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; +const headerImageUri: string = 'https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704__340.jpg'; + +export const CustomHeader = () => { + return ( + + + + + Title + + + + ); +}; + +export const CardCustomHeaderShowcase = () => ( + + + + {bodyText} + + + +); + +const styles = StyleSheet.create({ + container: { + paddingVertical: 4, + paddingHorizontal: 4, + }, + card: { + marginVertical: 6, + }, + bodyText: { + color: '#8f8b8b', + }, + headerTextContainer: { + paddingHorizontal: 24, + paddingVertical: 16, + }, + headerText: { + color: '#6e5f5e', + }, + headerImage: { + width: '100%', + height: 230, + }, +}); diff --git a/src/playground/src/ui/screen/showcases/card/cardEvaHeader.component.tsx b/src/playground/src/ui/screen/showcases/card/cardEvaHeader.component.tsx new file mode 100644 index 000000000..5c8b04cb4 --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/cardEvaHeader.component.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { + Layout, + Card, + CardHeader, + Text, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; + +const Header = () => ( + +); + +export const CardEvaHeaderShowcase = () => ( + + + + {bodyText} + + + +); + +const styles = StyleSheet.create({ + container: { + paddingVertical: 4, + paddingHorizontal: 4, + }, + card: { + marginVertical: 6, + }, + bodyText: { + color: '#8f8b8b', + }, +}); diff --git a/src/playground/src/ui/screen/showcases/card/cardFooter.component.tsx b/src/playground/src/ui/screen/showcases/card/cardFooter.component.tsx new file mode 100644 index 000000000..ad8e6e497 --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/cardFooter.component.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { + StyleSheet, + View, +} from 'react-native'; +import { + Layout, + Card, + Text, + Button, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; + +const Footer = () => { + return ( + + + + + ); +}; + +export const CardFooterShowcase = () => ( + + + + {bodyText} + + + +); + +const styles = StyleSheet.create({ + container: { + paddingVertical: 4, + paddingHorizontal: 4, + }, + card: { + marginVertical: 6, + }, + bodyText: { + color: '#8f8b8b', + }, + footerContainer: { + flexDirection: 'row', + justifyContent: 'flex-end', + }, + footerControl: { + marginRight: 12, + }, +}); diff --git a/src/playground/src/ui/screen/showcases/card/cardHeaderFooter.component.tsx b/src/playground/src/ui/screen/showcases/card/cardHeaderFooter.component.tsx new file mode 100644 index 000000000..790012847 --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/cardHeaderFooter.component.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { + StyleSheet, + View, +} from 'react-native'; +import { + Layout, + Card, + Text, + Button, + CardHeader, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; + +const Footer = () => { + return ( + + + + + ); +}; + +const Header = () => ( + +); + +export const CardHeaderFooterShowcase = () => ( + + + + {bodyText} + + + +); + +const styles = StyleSheet.create({ + container: { + paddingVertical: 4, + paddingHorizontal: 4, + }, + card: { + marginVertical: 6, + }, + bodyText: { + color: '#8f8b8b', + }, + footerContainer: { + flexDirection: 'row', + justifyContent: 'flex-end', + }, + footerControl: { + marginRight: 12, + }, +}); diff --git a/src/playground/src/ui/screen/showcases/card/cardSimpleUsage.component.tsx b/src/playground/src/ui/screen/showcases/card/cardSimpleUsage.component.tsx new file mode 100644 index 000000000..058efde0f --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/cardSimpleUsage.component.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { + Layout, + Card, + Text, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; + +export const CardSimpleUsageShowcase = () => ( + + + + {bodyText} + + + +); + +const styles = StyleSheet.create({ + container: { + paddingVertical: 4, + paddingHorizontal: 4, + }, + card: { + marginVertical: 6, + }, + bodyText: { + color: '#8f8b8b', + }, +}); diff --git a/src/playground/src/ui/screen/showcases/card/cardStatuses.component.tsx b/src/playground/src/ui/screen/showcases/card/cardStatuses.component.tsx new file mode 100644 index 000000000..bd1a9bfe6 --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/cardStatuses.component.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { + Card, + CardHeader, + Text, + List, +} from 'react-native-ui-kitten'; + +const bodyText: string = 'A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. ' + + 'Originally, nebula was a name for any diffuse astronomical object, including galaxies beyond the Milky Way.'; + +export class CardStatusesShowcase extends React.Component { + + statuses = [ + 'primary', + 'success', + 'info', + 'warning', + 'danger', + ]; + + renderHeader = () => ( + + ); + + renderItem = (info) => ( + + + {bodyText} + + + ); + + render() { + return ( + + ); + } +} + +const styles = StyleSheet.create({ + container: { + height: 500, + paddingVertical: 4, + paddingHorizontal: 4, + }, + card: { + marginVertical: 4, + }, + bodyText: { + color: '#8f8b8b', + }, +}); diff --git a/src/playground/src/ui/screen/showcases/card/index.ts b/src/playground/src/ui/screen/showcases/card/index.ts new file mode 100644 index 000000000..263b53435 --- /dev/null +++ b/src/playground/src/ui/screen/showcases/card/index.ts @@ -0,0 +1,6 @@ +export { CardCustomHeaderShowcase } from './cardCustomHeader.component'; +export { CardEvaHeaderShowcase } from './cardEvaHeader.component'; +export { CardFooterShowcase } from './cardFooter.component'; +export { CardHeaderFooterShowcase } from './cardHeaderFooter.component'; +export { CardSimpleUsageShowcase } from './cardSimpleUsage.component'; +export { CardStatusesShowcase } from './cardStatuses.component';