Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

Commit

Permalink
Add picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@jxom
jxom committed Jul 13, 2021
1 parent 6ee7494 commit e155603
Show file tree
Hide file tree
Showing 9 changed files with 823 additions and 367 deletions.
83 changes: 83 additions & 0 deletions native-playground/src/routes/components/Picker.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { Box, Heading } from 'bumbag-native';
import { Picker } from '@bumbag-native/picker';
import { PickerIOS } from '@bumbag-native/picker/PickerIOS';
import { Preview } from '../../components/Preview';
import { PreviewSection } from '../../components/PreviewSection';

Expand All @@ -22,6 +23,88 @@ export default function App() {
/>
</Preview>
</PreviewSection>
<PreviewSection title="Native iOS">
<Preview>
<PickerIOS
options={[
{ label: 'Sunny', value: 'sunny' },
{ label: 'Windy', value: 'windy' },
{ label: 'Overcast', value: 'overcast' },
]}
onChange={(value) => setValue(value)}
value={value}
/>
</Preview>
</PreviewSection>
<PreviewSection title="Disabled">
<Preview>
<Picker
disabled
options={[
{ label: 'Sunny', value: 'sunny' },
{ label: 'Windy', value: 'windy' },
{ label: 'Overcast', value: 'overcast' },
]}
onChange={(value) => setValue(value)}
value={value}
/>
<Picker
options={[
{ label: 'Sunny', value: 'sunny', disabled: true },
{ label: 'Windy', value: 'windy' },
{ label: 'Overcast', value: 'overcast' },
]}
onChange={(value) => setValue(value)}
value={value}
/>
</Preview>
</PreviewSection>
<PreviewSection title="Check icon alignment">
<Preview>
<Picker
alignCheck="right"
options={[
{ label: 'Sunny', value: 'sunny' },
{ label: 'Windy', value: 'windy' },
{ label: 'Overcast', value: 'overcast' },
]}
onChange={(value) => setValue(value)}
value={value}
/>
</Preview>
</PreviewSection>
<PreviewSection title="Icons">
<Preview>
<Picker
alignCheck="right"
options={[
{ label: 'Sunny', value: 'sunny', iconBefore: 'chevron-down' },
{ label: 'Windy', value: 'windy', iconBefore: 'chevron-down' },
{
label: 'Overcast',
value: 'overcast',
iconBefore: 'chevron-down',
},
]}
onChange={(value) => setValue(value)}
value={value}
/>
<Picker
alignCheck="left"
options={[
{ label: 'Sunny', value: 'sunny', iconAfter: 'chevron-down' },
{ label: 'Windy', value: 'windy', iconAfter: 'chevron-down' },
{
label: 'Overcast',
value: 'overcast',
iconAfter: 'chevron-down',
},
]}
onChange={(value) => setValue(value)}
value={value}
/>
</Preview>
</PreviewSection>
</Box>
);
}
117 changes: 9 additions & 108 deletions packages/bumbag-native-picker/src/Picker/Picker.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,20 @@
import { Box } from 'bumbag-native/Box';
import { Icon } from 'bumbag-native/Icon';
import { Text } from 'bumbag-native/Text';
import { Menu, MenuOptionGroup, MenuOptionItem } from 'bumbag-native/Menu';
import { styled } from 'bumbag-native/styled';
import { palette, space, theme } from 'bumbag-native/utils/theme';
import { theme } from 'bumbag-native/utils/theme';

export const StyledPicker = styled(Box)`
export const Picker = styled(Box)`
${theme('native.Picker', 'styles.base')};
`;

export const StyledPickerItem = styled(Box.Touchable)`
flex-direction: row;
align-items: center;
height: ${(props) => `${space('major-6')(props)}px`};
padding-left: ${(props) => (props.alignCheckIcon === 'left' ? `${space('major-1')(props)}px` : `0px`)};
${(props) =>
!props.disabled
? `
cursor: pointer;
`
: ''}
${(props) =>
props.hover && !props.disabled
? `
background-color: ${palette('white600')(props)};
${theme('native.Picker', 'Item.styles.hover')};
`
: ''}
${(props) =>
props.hoveractive && !props.disabled
? `
background-color: ${palette('white700')(props)};
${theme('native.Picker', 'Item.styles.hoveractive')};
`
: ''}
${(props) =>
props.focus && !props.disabled
? `
background-color: ${palette('white600')(props)};
${theme('native.Picker', 'Item.styles.focus')};
`
: ''}
${(props) =>
props.disabled
? `
opacity: 0.5;
`
: ''}
${theme('native.Picker', 'Item.styles.base')};
export const PickerMenu = styled(Menu)`
${theme('native.Picker', 'Menu.styles.base')};
`;

export const StyledPickerItemLabel = styled(Text)`
font-weight: 500;
${(props) =>
props.checked
? `
color: ${palette(props.palette || 'primary')(props)};
${theme('native.Picker', 'ItemLabel.styles.checked')(props)};
`
: ''}
${theme('native.Picker', 'ItemLabel.styles.base')};
`;

export const StyledPickerItemLabelWrapper = styled(Box)`
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 100%;
padding-right: ${(props) =>
props.alignCheckIcon === 'left' ? `${space('major-1')(props)}px` : `${space('major-2')(props)}px`};
padding-left: ${(props) => (props.alignCheckIcon === 'left' ? `0px` : `${space('major-2')(props)}px`)};
${(props) =>
props.hasDivider
? `
border-bottom-width: 1px;
border-bottom-color: ${palette('white800')(props)};
`
: ''}
${theme('native.Picker', 'ItemLabelWrapper.styles.base')};
`;

export const StyledPickerItemIconWrapper = styled(Box)`
width: ${(props) => `${space('major-2')(props)}px`};
${(props) =>
props.alignCheckIcon === 'left'
? `
margin-right: ${space('major-1')(props)}px;
`
: ''};
${(props) =>
props.alignCheckIcon === 'right'
? `
margin-left: ${space('major-1')(props)}px;
`
: ''};
${theme('native.Picker', 'ItemIconWrapper.styles.base')};
export const PickerMenuOptionGroup = styled(MenuOptionGroup)`
${theme('native.Picker', 'OptionGroup.styles.base')};
`;

export const StyledPickerItemIcon = styled(Icon)`
${theme('native.Picker', 'ItemIcon.styles.base')};
export const PickerMenuOptionItem = styled(MenuOptionItem)`
${theme('native.Picker', 'OptionItem.styles.base')};
`;
Loading

0 comments on commit e155603

Please sign in to comment.