Skip to content

Commit

Permalink
Merge pull request #4891 from GeekyAnts/release/3.4.0-rc.10
Browse files Browse the repository at this point in the history
Release/3.4.0 rc.10
  • Loading branch information
surajahmed authored Apr 7, 2022
2 parents a9903ec + f69e3d5 commit a7ce27c
Show file tree
Hide file tree
Showing 8 changed files with 115 additions and 66 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,68 +24,28 @@ export function Example() {
</Text>
</Box>
<Actionsheet.Item
startIcon={
<Icon
as={MaterialIcons}
color="trueGray.400"
mr="1"
size="6"
name="delete"
/>
}
startIcon={<Icon as={MaterialIcons} size="6" name="delete" />}
>
Delete
</Actionsheet.Item>
<Actionsheet.Item
startIcon={
<Icon
as={MaterialIcons}
name="share"
color="trueGray.400"
mr="1"
size="6"
/>
}
startIcon={<Icon as={MaterialIcons} name="share" size="6" />}
>
Share
</Actionsheet.Item>
<Actionsheet.Item
startIcon={
<Icon
as={Ionicons}
name="play-circle"
color="trueGray.400"
mr="1"
size="6"
/>
}
startIcon={<Icon as={Ionicons} name="play-circle" size="6" />}
>
Play
</Actionsheet.Item>
<Actionsheet.Item
startIcon={
<Icon
as={MaterialIcons}
color="trueGray.400"
mr="1"
size="6"
name="favorite"
/>
}
startIcon={<Icon as={MaterialIcons} size="6" name="favorite" />}
>
Favourite
</Actionsheet.Item>
<Actionsheet.Item
p={3}
startIcon={
<Icon
color="trueGray.400"
mr="1"
h="24"
w="24"
viewBox="0 0 24 24"
fill="none"
>
<Icon viewBox="0 0 24 24" size="6" fill="none">
<Path d="M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z" />
</Icon>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function Example() {
</Text>
</Box>
<Actionsheet.Item>Delete</Actionsheet.Item>
<Actionsheet.Item>Share</Actionsheet.Item>
<Actionsheet.Item isDisabled>Share</Actionsheet.Item>
<Actionsheet.Item>Play</Actionsheet.Item>
<Actionsheet.Item>Favourite</Actionsheet.Item>
<Actionsheet.Item>Cancel</Actionsheet.Item>
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"prettier --write"
]
},
"version": "3.4.0-rc.7",
"version": "3.4.0-rc.10",
"license": "MIT",
"private": false,
"main": "lib/commonjs/index",
Expand Down
99 changes: 87 additions & 12 deletions src/components/composites/Actionsheet/ActionsheetItem.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,99 @@
import React, { memo, forwardRef } from 'react';
import { Button } from '../../primitives/Button';
import type { IActionsheetItemProps } from './types';
import { Pressable } from '../../primitives/Pressable';
import Box from '../../primitives/Box';
import { HStack } from '../../primitives/Stack';
import Spinner from '../../primitives/Spinner';
import { usePropsResolution } from '../../../hooks';
import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
import type { IActionsheetItemProps } from './types';

const ActionsheetItem = (props: IActionsheetItemProps, ref?: any) => {
const resolvedProps = usePropsResolution(
'ActionsheetItem',
props,
undefined,
{
cascadePseudoProps: true,
}
);
const ActionsheetItem = (
{
//@ts-ignore
children,
startIcon,
rightIcon,
leftIcon,
endIcon,
spinner,
isDisabled,
isLoading,
spinnerPlacement = 'start',
...props
}: IActionsheetItemProps,
ref: any
) => {
const {
_text,
_stack,
_icon,
_spinner,
isLoadingText,
...resolvedProps
} = usePropsResolution('ActionsheetItem', props, undefined, {
cascadePseudoProps: true,
});
//TODO: refactor for responsive prop
if (useHasResponsiveProps(props)) {
return null;
}

return <Button {...resolvedProps} ref={ref} />;
if (leftIcon) {
startIcon = leftIcon;
}
if (rightIcon) {
endIcon = rightIcon;
}
if (endIcon && React.isValidElement(endIcon)) {
endIcon = React.Children.map(
endIcon,
(child: JSX.Element, index: number) => {
return React.cloneElement(child, {
key: `button-end-icon-${index}`,
..._icon,
...child.props,
});
}
);
}
if (startIcon && React.isValidElement(startIcon)) {
startIcon = React.Children.map(
startIcon,
(child: JSX.Element, index: number) => {
return React.cloneElement(child, {
key: `button-start-icon-${index}`,
..._icon,
...child.props,
});
}
);
}
const spinnerElement = spinner ? (
spinner
) : (
<Spinner color={_text?.color} {..._spinner} />
);

const boxChildren = (child: any) => {
return child ? <Box _text={_text}>{child}</Box> : null;
};

return (
<Pressable disabled={isDisabled || isLoading} {...resolvedProps} ref={ref}>
<HStack {..._stack} test={true}>
{startIcon && !isLoading ? startIcon : null}
{isLoading && spinnerPlacement === 'start' ? spinnerElement : null}
{isLoading
? isLoadingText
? boxChildren(isLoadingText)
: null
: boxChildren(children)}

{endIcon && !isLoading ? endIcon : null}
{isLoading && spinnerPlacement === 'end' ? spinnerElement : null}
</HStack>
</Pressable>
);
};

export default memo(forwardRef(ActionsheetItem));
3 changes: 2 additions & 1 deletion src/components/composites/Actionsheet/types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ export interface IActionsheetFooterProps
extends InterfaceBoxProps<IActionsheetFooterProps> {}
export interface IActionsheetHeaderProps
extends InterfaceBoxProps<IActionsheetHeaderProps> {}
export interface IActionsheetItemProps extends InterfaceButtonProps {}
export interface IActionsheetItemProps
extends Omit<InterfaceButtonProps, 'variant' | 'size' | 'colorScheme'> {}

export type IActionsheetComponentType = ((
props: IActionsheetProps & { ref?: MutableRefObject<any> }
Expand Down
4 changes: 3 additions & 1 deletion src/components/primitives/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,6 @@ export { VisuallyHidden } from './VisuallyHidden';
export { default as ZStack } from './ZStack';
export type { IZStackProps } from './ZStack';

export { Overlay, IOverlayProps } from './Overlay';
export { Overlay } from './Overlay';

export type { IOverlayProps } from './Overlay';
4 changes: 3 additions & 1 deletion src/hooks/useThemeProps/usePropsResolution.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,9 @@ export const usePropsResolutionWithComponentTheme = (
'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'
);
}
let [flattenProps, specificityMap] = callPropsFlattener(
//TODO: hack
let flattenProps: any, specificityMap;
[flattenProps, specificityMap] = callPropsFlattener(
incomingWithDefaultProps,
{},
2
Expand Down
17 changes: 13 additions & 4 deletions src/theme/components/actionsheet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,22 @@ export const ActionsheetItem = {
baseStyle: () => ({
width: '100%',
justifyContent: 'flex-start',
_stack: {
space: 4,
},
p: 4,
_text: {
fontSize: 16,
fontSize: 'md',
fontWeight: 'normal',
},
_disabled: {
opacity: 40,
},
_light: {
bg: 'muted.50',
_icon: {
color: 'muted.500',
},
_text: {
color: 'text.900',
},
Expand All @@ -77,6 +86,9 @@ export const ActionsheetItem = {
},
_dark: {
bg: 'muted.800',
_icon: {
color: 'muted.400',
},
_text: {
color: 'muted.50',
},
Expand All @@ -95,7 +107,4 @@ export const ActionsheetItem = {
},
},
}),
defaultProps: {
variant: 'unstyled',
},
};

1 comment on commit a7ce27c

@vercel
Copy link

@vercel vercel bot commented on a7ce27c Apr 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.