From 06297c393ea62e57ba53c20677acd2445bcba8c6 Mon Sep 17 00:00:00 2001 From: sami Date: Wed, 9 Aug 2023 12:00:42 +0200 Subject: [PATCH 1/3] feat: add new ButtonsBar component --- .../src/app/sandbox/docs/buttons-bar.doc.tsx | 47 ++++++++ packages/sandbox/src/app/sandbox/index.ts | 6 +- .../components/buttons-bar/buttons-bar.tsx | 100 ++++++++++++++++++ packages/streamline/src/index.ts | 1 + packages/streamline/src/types.ts | 1 + 5 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 packages/sandbox/src/app/sandbox/docs/buttons-bar.doc.tsx create mode 100644 packages/streamline/src/components/buttons-bar/buttons-bar.tsx diff --git a/packages/sandbox/src/app/sandbox/docs/buttons-bar.doc.tsx b/packages/sandbox/src/app/sandbox/docs/buttons-bar.doc.tsx new file mode 100644 index 00000000..39cff293 --- /dev/null +++ b/packages/sandbox/src/app/sandbox/docs/buttons-bar.doc.tsx @@ -0,0 +1,47 @@ +import { Box, ButtonsBar, ButtonProps } from '@getluko/streamline'; +import React from 'react'; + +const buttonsArray1: ButtonProps[] = [ + { text: 'One', onPress: () => console.log('onPress One') }, +]; + +const buttonsArray2: ButtonProps[] = [ + { text: 'One', onPress: () => console.log('onPress One') }, + { text: 'Two', onPress: () => console.log('onPress Two') }, +]; + +const buttonsArray3: ButtonProps[] = [ + { text: 'One', onPress: () => console.log('onPress One') }, + { text: 'Two', onPress: () => console.log('onPress Two') }, + { text: 'Three', onPress: () => console.log('onPress Three') }, +]; + +const buttonsArray4: ButtonProps[] = [ + { text: 'One', onPress: () => console.log('onPress One') }, + { text: 'Two', onPress: () => console.log('onPress Two') }, + { text: 'Three', onPress: () => console.log('onPress Three') }, + { text: 'Four', onPress: () => console.log('onPress Four') }, +]; + +const buttonsArray5: ButtonProps[] = [ + { text: 'One', onPress: () => console.log('onPress One') }, + { text: 'Two', onPress: () => console.log('onPress Two') }, + { text: 'Three', onPress: () => console.log('onPress Three') }, + { text: 'Four', onPress: () => console.log('onPress Four') }, + { text: 'Five', onPress: () => console.log('onPress Five') }, +]; + +const buttonsArray0: ButtonProps[] = []; + +export const ButtonsBarSandbox = () => { + return ( + + + + + + + + + ); +}; diff --git a/packages/sandbox/src/app/sandbox/index.ts b/packages/sandbox/src/app/sandbox/index.ts index c42bda15..78e7fce1 100644 --- a/packages/sandbox/src/app/sandbox/index.ts +++ b/packages/sandbox/src/app/sandbox/index.ts @@ -2,6 +2,7 @@ import { ButtonDockSandbox } from './docs/button-dock.doc'; import { ButtonIconSandbox } from './docs/button-icon.doc'; import { ButtonMiniSandbox } from './docs/button-mini.doc'; import { ButtonSandbox } from './docs/button.doc'; +import { ButtonsBarSandbox } from './docs/buttons-bar.doc'; import { CardCalloutSandbox } from './docs/card-callout.doc'; import { CardSummarySandbox } from './docs/card-summary.doc'; import { CardTipSandbox } from './docs/card-tip.doc'; @@ -22,7 +23,7 @@ import { ListItemValueSandbox } from './docs/list-item-value.doc'; import { ListItemSandbox } from './docs/list-item.doc'; import { MarkdownSandbox } from './docs/markdown.doc'; import { NavigationBarProgressSandbox } from './docs/navigation-bar-progress.doc'; -import {NavigationBarTrailSandbox} from "./docs/navigation-bar-trail.doc"; +import { NavigationBarTrailSandbox } from './docs/navigation-bar-trail.doc'; import { NavigationTitleSandbox } from './docs/navigation-title.doc'; import { ProgressBarSandbox } from './docs/progress-bar.doc'; import { RadioSandbox } from './docs/radio.doc'; @@ -58,6 +59,7 @@ export const sandboxItems: SandBoxSectionType[] = [ { title: 'Buttons', items: [ + { title: 'ButtonBar', SandBox: ButtonsBarSandbox }, { title: 'Button', SandBox: ButtonSandbox }, { title: 'ButtonIcon', SandBox: ButtonIconSandbox }, { title: 'ButtonMini', SandBox: ButtonMiniSandbox }, @@ -118,7 +120,7 @@ export const sandboxItems: SandBoxSectionType[] = [ SandBox: NavigationBarProgressSandbox, }, { title: 'NavigationTitle', SandBox: NavigationTitleSandbox }, - { title: 'NavigationBarTrail', SandBox: NavigationBarTrailSandbox } + { title: 'NavigationBarTrail', SandBox: NavigationBarTrailSandbox }, ], }, { diff --git a/packages/streamline/src/components/buttons-bar/buttons-bar.tsx b/packages/streamline/src/components/buttons-bar/buttons-bar.tsx new file mode 100644 index 00000000..7f962493 --- /dev/null +++ b/packages/streamline/src/components/buttons-bar/buttons-bar.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { ScrollView } from 'react-native'; + +import { Box } from '../../primitives/box/box'; +import { Skeleton } from '../../primitives/skeleton/skeleton'; +import { Button } from '../buttons/button/button'; +import { ButtonProps } from '../buttons/button/button.types'; + +type Props = { + buttons: ButtonProps[]; + isSkeleton?: boolean; +}; + +export const ButtonsBar = ({ buttons, isSkeleton = false }: Props) => { + return buttons.length === 0 || isSkeleton ? ( + + ) : ( + + + {buttons.map((button) => ( + +