Skip to content

Commit cc6565c

Browse files
minheqminheq
committed
feat(popover): lean popover
1 parent 06abbeb commit cc6565c

10 files changed

Lines changed: 5288 additions & 8265 deletions

File tree

‎src/components/KitchenSink/KitchenSink.tsx‎

Lines changed: 23 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1111,175 +1111,34 @@ export const KitchenSink = () => {
11111111
</Box>
11121112

11131113
<Playground>
1114-
<Toggle>
1115-
{({ on, toggle }) => (
1116-
<Popover
1117-
isVisible={on}
1118-
onClose={toggle}
1119-
position="bottom"
1120-
isFullWidth={false}
1121-
// Use this prop to specify the position of the popover
1122-
targetMeasurements={{
1123-
height: 200,
1124-
pageX: window.innerWidth - 224,
1125-
pageY: -200,
1126-
width: 200,
1127-
x: 0,
1128-
y: 0,
1129-
}}
1130-
getStyles={(props, theme) => ({
1131-
positionerStyle: {},
1132-
modalContainerStyle: {},
1133-
popoverStyle: {},
1134-
})}
1135-
content={props => (
1136-
<Box>
1137-
<Text>
1138-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
1139-
do eiusmod tempor incididunt ut labore et dolore magna
1140-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
1141-
ullamco laboris nisi ut aliquip ex ea commodo consequat.
1142-
Duis aute irure dolor in reprehenderit in voluptate velit
1143-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
1144-
occaecat cupidatat non proident, sunt in culpa qui officia
1145-
deserunt mollit anim id est laborum.
1146-
</Text>
1147-
</Box>
1148-
)}
1149-
>
1150-
<Button onPress={toggle} title="Pop at right corner" />
1151-
</Popover>
1152-
)}
1153-
</Toggle>
1154-
</Playground>
1155-
1156-
<Playground>
1157-
<Box paddingBottom={64} zIndex={1}>
1158-
<Box flexDirection="row" justifyContent="space-between">
1159-
<Toggle>
1160-
{({ on, toggle }) => (
1161-
<Popover
1162-
isVisible={on}
1163-
onClose={toggle}
1164-
position="top-right"
1165-
content={() => <Box width={200} height={200} />}
1166-
>
1167-
<Button onPress={toggle} isInline title="Top right" />
1168-
</Popover>
1169-
)}
1170-
</Toggle>
1171-
<Toggle>
1172-
{({ on, toggle }) => (
1173-
<Popover
1174-
isVisible={on}
1175-
onClose={toggle}
1176-
position="top"
1177-
content={() => <Box width={200} height={200} />}
1178-
>
1179-
<Button onPress={toggle} isInline title="Top" />
1180-
</Popover>
1181-
)}
1182-
</Toggle>
1183-
<Toggle>
1184-
{({ on, toggle }) => (
1185-
<Popover
1186-
isVisible={on}
1187-
onClose={toggle}
1188-
position="top-left"
1189-
content={() => <Box width={200} height={200} />}
1190-
>
1191-
<Button onPress={toggle} isInline title="Top left" />
1192-
</Popover>
1193-
)}
1194-
</Toggle>
1195-
</Box>
1196-
</Box>
1197-
1198-
<Box paddingVertical={64} zIndex={2}>
1199-
<Box flexDirection="row" justifyContent="space-between">
1200-
<Toggle>
1201-
{({ on, toggle }) => (
1202-
<Popover
1203-
isVisible={on}
1204-
onClose={toggle}
1205-
position="left"
1206-
content={() => <Box width={200} height={200} />}
1207-
>
1208-
<Button onPress={toggle} isInline title="Left" />
1209-
</Popover>
1210-
)}
1211-
</Toggle>
1212-
<Toggle>
1213-
{({ on, toggle }) => (
1214-
<Popover
1215-
isVisible={on}
1216-
onClose={toggle}
1217-
position="right"
1218-
content={() => <Box width={200} height={200} />}
1219-
>
1220-
<Button onPress={toggle} isInline title="Right" />
1221-
</Popover>
1222-
)}
1223-
</Toggle>
1224-
</Box>
1225-
</Box>
1226-
1227-
<Box paddingTop={64} zIndex={3}>
1228-
<Box flexDirection="row" justifyContent="space-between">
1229-
<Toggle>
1230-
{({ on, toggle }) => (
1231-
<Popover
1232-
isVisible={on}
1233-
onClose={toggle}
1234-
position="bottom-right"
1235-
content={() => <Box width={200} height={200} />}
1236-
>
1237-
<Button onPress={toggle} isInline title="Bottom right" />
1238-
</Popover>
1239-
)}
1240-
</Toggle>
1241-
<Toggle>
1242-
{({ on, toggle }) => (
1243-
<Popover
1244-
isVisible={on}
1245-
onClose={toggle}
1246-
position="bottom"
1247-
content={() => <Box width={200} height={200} />}
1248-
>
1249-
<Button onPress={toggle} isInline title="Bottom" />
1250-
</Popover>
1251-
)}
1252-
</Toggle>
1253-
<Toggle>
1254-
{({ on, toggle }) => (
1255-
<Popover
1256-
isVisible={on}
1257-
onClose={toggle}
1258-
position="bottom-left"
1259-
content={() => <Box width={200} height={200} />}
1260-
>
1261-
<Button onPress={toggle} isInline title="Bottom left" />
1262-
</Popover>
1263-
)}
1264-
</Toggle>
1265-
</Box>
1266-
</Box>
1267-
</Playground>
1268-
1269-
<Playground>
1270-
<Box flex={1}>
1114+
<Box height={250}>
12711115
<Toggle>
12721116
{({ on, toggle }) => (
12731117
<Popover
12741118
isVisible={on}
1275-
isFullWidth
1276-
onClose={toggle}
1277-
position="top-left"
1278-
content={() => (
1279-
<Box width={200} height={200} backgroundColor="#67c6bb" />
1280-
)}
1119+
position="right"
1120+
getStyles={(props, theme) => ({
1121+
positionerStyle: {},
1122+
modalContainerStyle: {},
1123+
popoverStyle: {},
1124+
})}
1125+
content={
1126+
<Box width={200} height={200}>
1127+
<Text>
1128+
Due to variety and complexity involved in detecting touch
1129+
outside of the component on the web and in native, you
1130+
have to manage its open and closed state
1131+
</Text>
1132+
<Button
1133+
appearance="outline"
1134+
color="danger"
1135+
onPress={toggle}
1136+
title="Close popover"
1137+
/>
1138+
</Box>
1139+
}
12811140
>
1282-
<Button onPress={toggle} title="Pop" />
1141+
<Button onPress={toggle} title="Open popover" />
12831142
</Popover>
12841143
)}
12851144
</Toggle>

0 commit comments

Comments
 (0)