Skip to content

Commit a7ce27c

Browse files
surajahmedsurajahmed
authored
Merge pull request #4891 from GeekyAnts/release/3.4.0-rc.10
Release/3.4.0 rc.10
2 parents a9903ec + f69e3d5 commit a7ce27c

File tree

8 files changed

+115
-66
lines changed

8 files changed

+115
-66
lines changed

‎example/storybook/stories/components/composites/Actionsheet/Icon.tsx‎

Lines changed: 5 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -24,68 +24,28 @@ export function Example() {
2424
</Text>
2525
</Box>
2626
<Actionsheet.Item
27-
startIcon={
28-
<Icon
29-
as={MaterialIcons}
30-
color="trueGray.400"
31-
mr="1"
32-
size="6"
33-
name="delete"
34-
/>
35-
}
27+
startIcon={<Icon as={MaterialIcons} size="6" name="delete" />}
3628
>
3729
Delete
3830
</Actionsheet.Item>
3931
<Actionsheet.Item
40-
startIcon={
41-
<Icon
42-
as={MaterialIcons}
43-
name="share"
44-
color="trueGray.400"
45-
mr="1"
46-
size="6"
47-
/>
48-
}
32+
startIcon={<Icon as={MaterialIcons} name="share" size="6" />}
4933
>
5034
Share
5135
</Actionsheet.Item>
5236
<Actionsheet.Item
53-
startIcon={
54-
<Icon
55-
as={Ionicons}
56-
name="play-circle"
57-
color="trueGray.400"
58-
mr="1"
59-
size="6"
60-
/>
61-
}
37+
startIcon={<Icon as={Ionicons} name="play-circle" size="6" />}
6238
>
6339
Play
6440
</Actionsheet.Item>
6541
<Actionsheet.Item
66-
startIcon={
67-
<Icon
68-
as={MaterialIcons}
69-
color="trueGray.400"
70-
mr="1"
71-
size="6"
72-
name="favorite"
73-
/>
74-
}
42+
startIcon={<Icon as={MaterialIcons} size="6" name="favorite" />}
7543
>
7644
Favourite
7745
</Actionsheet.Item>
7846
<Actionsheet.Item
79-
p={3}
8047
startIcon={
81-
<Icon
82-
color="trueGray.400"
83-
mr="1"
84-
h="24"
85-
w="24"
86-
viewBox="0 0 24 24"
87-
fill="none"
88-
>
48+
<Icon viewBox="0 0 24 24" size="6" fill="none">
8949
<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" />
9050
</Icon>
9151
}

‎example/storybook/stories/components/composites/Actionsheet/Usage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function Example() {
2121
</Text>
2222
</Box>
2323
<Actionsheet.Item>Delete</Actionsheet.Item>
24-
<Actionsheet.Item>Share</Actionsheet.Item>
24+
<Actionsheet.Item isDisabled>Share</Actionsheet.Item>
2525
<Actionsheet.Item>Play</Actionsheet.Item>
2626
<Actionsheet.Item>Favourite</Actionsheet.Item>
2727
<Actionsheet.Item>Cancel</Actionsheet.Item>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"prettier --write"
3737
]
3838
},
39-
"version": "3.4.0-rc.7",
39+
"version": "3.4.0-rc.10",
4040
"license": "MIT",
4141
"private": false,
4242
"main": "lib/commonjs/index",

‎src/components/composites/Actionsheet/ActionsheetItem.tsx‎

Lines changed: 87 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,99 @@
11
import React, { memo, forwardRef } from 'react';
2-
import { Button } from '../../primitives/Button';
3-
import type { IActionsheetItemProps } from './types';
2+
import { Pressable } from '../../primitives/Pressable';
3+
import Box from '../../primitives/Box';
4+
import { HStack } from '../../primitives/Stack';
5+
import Spinner from '../../primitives/Spinner';
46
import { usePropsResolution } from '../../../hooks';
57
import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
8+
import type { IActionsheetItemProps } from './types';
69

7-
const ActionsheetItem = (props: IActionsheetItemProps, ref?: any) => {
8-
const resolvedProps = usePropsResolution(
9-
'ActionsheetItem',
10-
props,
11-
undefined,
12-
{
13-
cascadePseudoProps: true,
14-
}
15-
);
10+
const ActionsheetItem = (
11+
{
12+
//@ts-ignore
13+
children,
14+
startIcon,
15+
rightIcon,
16+
leftIcon,
17+
endIcon,
18+
spinner,
19+
isDisabled,
20+
isLoading,
21+
spinnerPlacement = 'start',
22+
...props
23+
}: IActionsheetItemProps,
24+
ref: any
25+
) => {
26+
const {
27+
_text,
28+
_stack,
29+
_icon,
30+
_spinner,
31+
isLoadingText,
32+
...resolvedProps
33+
} = usePropsResolution('ActionsheetItem', props, undefined, {
34+
cascadePseudoProps: true,
35+
});
1636
//TODO: refactor for responsive prop
1737
if (useHasResponsiveProps(props)) {
1838
return null;
1939
}
2040

21-
return <Button {...resolvedProps} ref={ref} />;
41+
if (leftIcon) {
42+
startIcon = leftIcon;
43+
}
44+
if (rightIcon) {
45+
endIcon = rightIcon;
46+
}
47+
if (endIcon && React.isValidElement(endIcon)) {
48+
endIcon = React.Children.map(
49+
endIcon,
50+
(child: JSX.Element, index: number) => {
51+
return React.cloneElement(child, {
52+
key: `button-end-icon-${index}`,
53+
..._icon,
54+
...child.props,
55+
});
56+
}
57+
);
58+
}
59+
if (startIcon && React.isValidElement(startIcon)) {
60+
startIcon = React.Children.map(
61+
startIcon,
62+
(child: JSX.Element, index: number) => {
63+
return React.cloneElement(child, {
64+
key: `button-start-icon-${index}`,
65+
..._icon,
66+
...child.props,
67+
});
68+
}
69+
);
70+
}
71+
const spinnerElement = spinner ? (
72+
spinner
73+
) : (
74+
<Spinner color={_text?.color} {..._spinner} />
75+
);
76+
77+
const boxChildren = (child: any) => {
78+
return child ? <Box _text={_text}>{child}</Box> : null;
79+
};
80+
81+
return (
82+
<Pressable disabled={isDisabled || isLoading} {...resolvedProps} ref={ref}>
83+
<HStack {..._stack} test={true}>
84+
{startIcon && !isLoading ? startIcon : null}
85+
{isLoading && spinnerPlacement === 'start' ? spinnerElement : null}
86+
{isLoading
87+
? isLoadingText
88+
? boxChildren(isLoadingText)
89+
: null
90+
: boxChildren(children)}
91+
92+
{endIcon && !isLoading ? endIcon : null}
93+
{isLoading && spinnerPlacement === 'end' ? spinnerElement : null}
94+
</HStack>
95+
</Pressable>
96+
);
2297
};
2398

2499
export default memo(forwardRef(ActionsheetItem));

‎src/components/composites/Actionsheet/types.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ export interface IActionsheetFooterProps
4848
extends InterfaceBoxProps<IActionsheetFooterProps> {}
4949
export interface IActionsheetHeaderProps
5050
extends InterfaceBoxProps<IActionsheetHeaderProps> {}
51-
export interface IActionsheetItemProps extends InterfaceButtonProps {}
51+
export interface IActionsheetItemProps
52+
extends Omit<InterfaceButtonProps, 'variant' | 'size' | 'colorScheme'> {}
5253

5354
export type IActionsheetComponentType = ((
5455
props: IActionsheetProps & { ref?: MutableRefObject<any> }

‎src/components/primitives/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,6 @@ export { VisuallyHidden } from './VisuallyHidden';
6868
export { default as ZStack } from './ZStack';
6969
export type { IZStackProps } from './ZStack';
7070

71-
export { Overlay, IOverlayProps } from './Overlay';
71+
export { Overlay } from './Overlay';
72+
73+
export type { IOverlayProps } from './Overlay';

‎src/hooks/useThemeProps/usePropsResolution.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,9 @@ export const usePropsResolutionWithComponentTheme = (
342342
'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'
343343
);
344344
}
345-
let [flattenProps, specificityMap] = callPropsFlattener(
345+
//TODO: hack
346+
let flattenProps: any, specificityMap;
347+
[flattenProps, specificityMap] = callPropsFlattener(
346348
incomingWithDefaultProps,
347349
{},
348350
2

‎src/theme/components/actionsheet.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,22 @@ export const ActionsheetItem = {
5050
baseStyle: () => ({
5151
width: '100%',
5252
justifyContent: 'flex-start',
53+
_stack: {
54+
space: 4,
55+
},
5356
p: 4,
5457
_text: {
55-
fontSize: 16,
58+
fontSize: 'md',
5659
fontWeight: 'normal',
5760
},
61+
_disabled: {
62+
opacity: 40,
63+
},
5864
_light: {
5965
bg: 'muted.50',
66+
_icon: {
67+
color: 'muted.500',
68+
},
6069
_text: {
6170
color: 'text.900',
6271
},
@@ -77,6 +86,9 @@ export const ActionsheetItem = {
7786
},
7887
_dark: {
7988
bg: 'muted.800',
89+
_icon: {
90+
color: 'muted.400',
91+
},
8092
_text: {
8193
color: 'muted.50',
8294
},
@@ -95,7 +107,4 @@ export const ActionsheetItem = {
95107
},
96108
},
97109
}),
98-
defaultProps: {
99-
variant: 'unstyled',
100-
},
101110
};

0 commit comments

Comments
 (0)