@artsy/palette-mobile 13.2.33 → 13.2.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Theme.js +9 -13
- package/dist/animation/CssTransition.js +8 -12
- package/dist/animation/index.js +1 -17
- package/dist/constants.js +4 -8
- package/dist/elements/ArtsyKeyboardAvoidingView/ArtsyKeyboardAvoidingView.js +19 -23
- package/dist/elements/ArtsyKeyboardAvoidingView/index.js +1 -17
- package/dist/elements/Autocomplete/Autocomplete.js +4 -8
- package/dist/elements/Autocomplete/Autocomplete.tests.js +9 -11
- package/dist/elements/Autocomplete/index.js +1 -17
- package/dist/elements/Avatar/Avatar.js +17 -44
- package/dist/elements/Avatar/Avatar.stories.js +7 -11
- package/dist/elements/Avatar/Avatar.tests.js +8 -10
- package/dist/elements/Avatar/index.js +1 -17
- package/dist/elements/BackButton/BackButton.js +9 -14
- package/dist/elements/BackButton/BackButton.stories.js +8 -12
- package/dist/elements/BackButton/index.js +1 -17
- package/dist/elements/Banner/Banner.js +14 -18
- package/dist/elements/Banner/Banner.stories.js +7 -11
- package/dist/elements/Banner/index.js +1 -17
- package/dist/elements/BorderBox/BorderBox.js +9 -15
- package/dist/elements/BorderBox/index.js +1 -17
- package/dist/elements/Box/Box.js +11 -17
- package/dist/elements/Box/Box.stories.js +14 -20
- package/dist/elements/Box/index.js +1 -17
- package/dist/elements/Button/Button.js +30 -37
- package/dist/elements/Button/Button.stories.js +18 -25
- package/dist/elements/Button/CTAButton.js +3 -7
- package/dist/elements/Button/FollowButton.js +7 -11
- package/dist/elements/Button/LinkButton.js +4 -8
- package/dist/elements/Button/colors.js +3 -7
- package/dist/elements/Button/index.js +4 -20
- package/dist/elements/ButtonNew/Button.js +32 -62
- package/dist/elements/ButtonNew/Button.stories.js +36 -50
- package/dist/elements/ButtonNew/Button.tests.js +13 -15
- package/dist/elements/ButtonNew/CTAButton.js +3 -7
- package/dist/elements/ButtonNew/FollowButton.js +7 -11
- package/dist/elements/ButtonNew/LinkButton.js +4 -8
- package/dist/elements/ButtonNew/colors.js +3 -7
- package/dist/elements/ButtonNew/index.js +4 -20
- package/dist/elements/Checkbox/Check.js +29 -56
- package/dist/elements/Checkbox/Checkbox.js +22 -30
- package/dist/elements/Checkbox/Checkbox.stories.js +8 -12
- package/dist/elements/Checkbox/index.js +2 -18
- package/dist/elements/ClassTheme/ClassTheme.js +5 -9
- package/dist/elements/ClassTheme/index.js +1 -17
- package/dist/elements/Collapse/Collapse.js +4 -8
- package/dist/elements/Collapse/Collapse.stories.js +9 -13
- package/dist/elements/Collapse/index.js +1 -17
- package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js +18 -21
- package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js +30 -38
- package/dist/elements/CollapsibleMenuItem/index.js +1 -17
- package/dist/elements/Dialog/Dialog.js +20 -24
- package/dist/elements/Dialog/Dialog.stories.js +14 -16
- package/dist/elements/Dialog/Dialog.tests.js +12 -14
- package/dist/elements/Dialog/index.js +1 -17
- package/dist/elements/EntityHeader/EntityHeader.js +14 -18
- package/dist/elements/EntityHeader/EntityHeader.stories.js +17 -25
- package/dist/elements/EntityHeader/index.js +1 -17
- package/dist/elements/Flex/Flex.js +4 -7
- package/dist/elements/Flex/index.js +1 -17
- package/dist/elements/Header/ArtsyLogoHeader.js +8 -12
- package/dist/elements/Header/index.js +1 -17
- package/dist/elements/Histogram/Histogram.js +6 -10
- package/dist/elements/Histogram/index.js +1 -17
- package/dist/elements/Image/Image.js +26 -55
- package/dist/elements/Image/Image.stories.js +14 -16
- package/dist/elements/Image/index.js +1 -17
- package/dist/elements/Input/Input.js +127 -157
- package/dist/elements/Input/Input.stories.js +9 -11
- package/dist/elements/Input/Input.tests.js +17 -19
- package/dist/elements/Input/InputTitle.js +4 -8
- package/dist/elements/Input/helpers.d.ts +1 -1
- package/dist/elements/Input/helpers.js +51 -56
- package/dist/elements/Input/index.js +3 -19
- package/dist/elements/Input/maskValue.js +5 -10
- package/dist/elements/Input/maskValue.tests.js +11 -13
- package/dist/elements/Join/Join.js +6 -10
- package/dist/elements/Join/index.js +1 -17
- package/dist/elements/LazyFlatlist/LazyFlatlist.js +3 -7
- package/dist/elements/LazyFlatlist/index.js +2 -18
- package/dist/elements/LazyFlatlist/useHasSeenItem.js +6 -10
- package/dist/elements/LegacyScreen/LegacyScreen.js +51 -59
- package/dist/elements/LegacyScreen/index.js +1 -17
- package/dist/elements/LegacyTabs/ContentTabs.js +8 -12
- package/dist/elements/LegacyTabs/NavigationalTabs.js +11 -15
- package/dist/elements/LegacyTabs/StepTabs.js +15 -19
- package/dist/elements/LegacyTabs/Tab.js +9 -13
- package/dist/elements/LegacyTabs/TabBarContainer.js +28 -34
- package/dist/elements/LegacyTabs/index.js +9 -15
- package/dist/elements/List/BulletedItem.js +7 -11
- package/dist/elements/List/List.stories.js +8 -10
- package/dist/elements/List/index.js +1 -17
- package/dist/elements/MeasuredView/MeasuredView.js +10 -15
- package/dist/elements/MeasuredView/index.js +1 -17
- package/dist/elements/MenuItem/MenuItem.js +9 -13
- package/dist/elements/MenuItem/MenuItem.stories.js +5 -9
- package/dist/elements/MenuItem/index.js +1 -17
- package/dist/elements/Message/Message.js +15 -19
- package/dist/elements/Message/Message.stories.js +10 -12
- package/dist/elements/Message/Message.tests.js +9 -11
- package/dist/elements/Message/index.js +1 -17
- package/dist/elements/Pill/Pill.js +53 -83
- package/dist/elements/Pill/Pill.stories.js +16 -18
- package/dist/elements/Pill/Pill.tests.js +8 -10
- package/dist/elements/Pill/index.js +1 -17
- package/dist/elements/PopIn/PopIn.js +8 -12
- package/dist/elements/PopIn/index.js +1 -17
- package/dist/elements/Popover/Popover.js +21 -28
- package/dist/elements/Popover/Popover.stories.js +15 -17
- package/dist/elements/Popover/index.js +1 -17
- package/dist/elements/ProgressBar/ProgressBar.js +16 -43
- package/dist/elements/ProgressBar/ProgressBar.stories.js +6 -8
- package/dist/elements/ProgressBar/ProgressBar.tests.js +7 -9
- package/dist/elements/ProgressBar/index.js +1 -17
- package/dist/elements/Radio/RadioButton.js +20 -28
- package/dist/elements/Radio/RadioButton.stories.js +13 -15
- package/dist/elements/Radio/RadioDot.js +10 -14
- package/dist/elements/Radio/index.js +2 -7
- package/dist/elements/Screen/Background.js +3 -7
- package/dist/elements/Screen/Body.js +9 -13
- package/dist/elements/Screen/BottomView.js +9 -16
- package/dist/elements/Screen/FloatingHeader.js +9 -13
- package/dist/elements/Screen/FullWidthDivider.js +5 -9
- package/dist/elements/Screen/FullWidthItem.js +5 -9
- package/dist/elements/Screen/Header.js +21 -49
- package/dist/elements/Screen/Screen.stories.js +18 -20
- package/dist/elements/Screen/ScreenBase.js +9 -13
- package/dist/elements/Screen/ScreenFlatList.js +8 -15
- package/dist/elements/Screen/ScreenScrollContext.js +9 -14
- package/dist/elements/Screen/ScreenScrollView.js +8 -15
- package/dist/elements/Screen/StickySubHeader.js +20 -47
- package/dist/elements/Screen/constants.js +5 -8
- package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.js +10 -14
- package/dist/elements/Screen/hooks/useListenForScreenScroll.js +10 -14
- package/dist/elements/Screen/index.js +29 -46
- package/dist/elements/SearchInput/SearchInput.js +6 -10
- package/dist/elements/SearchInput/index.js +1 -17
- package/dist/elements/Separator/Separator.js +9 -15
- package/dist/elements/Separator/Separator.stories.js +6 -10
- package/dist/elements/Separator/ShadowSeparator.js +3 -9
- package/dist/elements/Separator/index.js +2 -18
- package/dist/elements/SimpleMessage/SimpleMessage.js +9 -16
- package/dist/elements/SimpleMessage/index.js +1 -17
- package/dist/elements/Skeleton/Skeleton.js +16 -45
- package/dist/elements/Skeleton/Skeleton.stories.js +10 -14
- package/dist/elements/Skeleton/index.js +1 -17
- package/dist/elements/Spacer/Spacer.js +3 -7
- package/dist/elements/Spacer/Spacer.stories.js +15 -20
- package/dist/elements/Spacer/index.js +1 -17
- package/dist/elements/Spinner/Spinner.js +15 -23
- package/dist/elements/Spinner/index.js +1 -17
- package/dist/elements/Switch/Switch.js +8 -12
- package/dist/elements/Switch/Switch.stories.js +11 -15
- package/dist/elements/Switch/index.js +1 -17
- package/dist/elements/Tabs/SubTabBar.js +11 -15
- package/dist/elements/Tabs/TabFlashList.js +8 -12
- package/dist/elements/Tabs/TabFlatList.js +8 -12
- package/dist/elements/Tabs/TabMasonry.js +8 -12
- package/dist/elements/Tabs/TabScrollView.js +8 -12
- package/dist/elements/Tabs/Tabs.js +24 -27
- package/dist/elements/Tabs/Tabs.stories.js +11 -13
- package/dist/elements/Tabs/TabsContainer.js +15 -19
- package/dist/elements/Tabs/TabsWithHeader.js +8 -12
- package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js +8 -12
- package/dist/elements/Tabs/index.js +1 -17
- package/dist/elements/Text/LinkText.js +3 -7
- package/dist/elements/Text/Text.js +15 -21
- package/dist/elements/Text/Text.stories.js +18 -27
- package/dist/elements/Text/Text.tests.js +3 -5
- package/dist/elements/Text/helpers.js +5 -10
- package/dist/elements/Text/index.js +3 -19
- package/dist/elements/ToolTip/ToolTip.js +29 -34
- package/dist/elements/ToolTip/ToolTip.stories.js +11 -13
- package/dist/elements/ToolTip/ToolTip.tests.js +7 -9
- package/dist/elements/ToolTip/ToolTipFlyout.js +19 -47
- package/dist/elements/ToolTip/index.js +1 -17
- package/dist/elements/Touchable/Touchable.js +12 -19
- package/dist/elements/Touchable/Touchable.stories.js +9 -13
- package/dist/elements/Touchable/TouchableHighlightColor.js +6 -10
- package/dist/elements/Touchable/TouchableWithScale.js +7 -11
- package/dist/elements/Touchable/index.js +3 -19
- package/dist/elements/VisualClue/VisualClue.stories.js +6 -8
- package/dist/elements/VisualClue/VisualClueDot.js +6 -10
- package/dist/elements/VisualClue/VisualClueText.js +9 -13
- package/dist/elements/VisualClue/index.js +2 -18
- package/dist/elements/index.js +45 -61
- package/dist/index.js +10 -26
- package/dist/setupJest.js +2 -7
- package/dist/storybook/decorators.js +20 -28
- package/dist/storybook/helpers.js +6 -12
- package/dist/svgs/AddCircleFillIcon.js +6 -10
- package/dist/svgs/AddCircleIcon.js +6 -10
- package/dist/svgs/AddIcon.js +6 -10
- package/dist/svgs/AlertCircleFillIcon.js +6 -10
- package/dist/svgs/AlertIcon.js +6 -10
- package/dist/svgs/ArrowCircleFillIcons.js +7 -12
- package/dist/svgs/ArrowDownCircleIcon.js +6 -10
- package/dist/svgs/ArrowDownIcon.js +6 -10
- package/dist/svgs/ArrowLeftCircleIcon.js +6 -10
- package/dist/svgs/ArrowLeftIcon.js +6 -10
- package/dist/svgs/ArrowRightCircleIcon.js +6 -10
- package/dist/svgs/ArrowRightIcon.js +6 -10
- package/dist/svgs/ArrowUpCircleIcon.js +6 -10
- package/dist/svgs/ArrowUpIcon.js +6 -10
- package/dist/svgs/ArtsyLogoBlackIcon.js +6 -10
- package/dist/svgs/ArtsyLogoWhiteIcon.js +4 -8
- package/dist/svgs/ArtsyMarkBlackIcon.js +6 -10
- package/dist/svgs/ArtsyMarkWhiteIcon.js +4 -8
- package/dist/svgs/ArtworkIcon.js +6 -10
- package/dist/svgs/AuctionIcon.js +6 -10
- package/dist/svgs/BellFillIcon.js +6 -10
- package/dist/svgs/BellIcon.js +6 -10
- package/dist/svgs/BlueChipIcon.js +6 -10
- package/dist/svgs/BoltCircleFill.js +6 -10
- package/dist/svgs/BoltFill.js +6 -10
- package/dist/svgs/BookmarkFill.js +6 -10
- package/dist/svgs/BriefcaseIcon.js +6 -10
- package/dist/svgs/CertificateIcon.js +6 -10
- package/dist/svgs/CheckCircleFillIcon.js +6 -10
- package/dist/svgs/CheckCircleIcon.js +6 -10
- package/dist/svgs/CheckIcon.js +6 -10
- package/dist/svgs/ChevronIcon.js +11 -15
- package/dist/svgs/ClockFill.js +6 -10
- package/dist/svgs/CloseCircleFillIcon.js +6 -10
- package/dist/svgs/CloseCircleIcon.js +6 -10
- package/dist/svgs/CloseIcon.js +6 -10
- package/dist/svgs/CollapseIcon.js +6 -10
- package/dist/svgs/CreditCardIcon.js +14 -18
- package/dist/svgs/DecreaseIcon.js +6 -10
- package/dist/svgs/DocumentIcon.js +6 -10
- package/dist/svgs/DownloadIcon.js +6 -10
- package/dist/svgs/EditIcon.js +6 -10
- package/dist/svgs/EmptyCheckCircleIcon.js +6 -10
- package/dist/svgs/EnterIcon.js +6 -10
- package/dist/svgs/EnvelopeIcon.js +6 -10
- package/dist/svgs/EstablishedIcon.js +6 -10
- package/dist/svgs/ExclamationMarkCircleFill.js +6 -10
- package/dist/svgs/ExpandIcon.js +6 -10
- package/dist/svgs/EyeClosedIcon.js +6 -10
- package/dist/svgs/EyeOpenedIcon.js +6 -10
- package/dist/svgs/FacebookIcon.js +6 -10
- package/dist/svgs/FairIcon.js +6 -10
- package/dist/svgs/FilterIcon.js +6 -10
- package/dist/svgs/FullWidthIcon.js +6 -10
- package/dist/svgs/GenomeIcon.js +6 -10
- package/dist/svgs/GraphIcon.js +6 -10
- package/dist/svgs/GridIcon.js +6 -10
- package/dist/svgs/GuaranteeIcon.js +7 -11
- package/dist/svgs/HeartFillIcon.js +6 -10
- package/dist/svgs/HeartIcon.js +6 -10
- package/dist/svgs/HideIcon.js +6 -10
- package/dist/svgs/HomeIcon.js +6 -10
- package/dist/svgs/Icon.js +15 -30
- package/dist/svgs/ImageIcon.js +6 -10
- package/dist/svgs/ImageSetIcon.js +6 -10
- package/dist/svgs/IncreaseIcon.js +6 -10
- package/dist/svgs/InfoCircleIcon.js +6 -10
- package/dist/svgs/InstagramAppIcon.js +3 -7
- package/dist/svgs/InstitutionIcon.js +6 -10
- package/dist/svgs/LinkIcon.js +6 -10
- package/dist/svgs/LoaderIcon.js +6 -10
- package/dist/svgs/LockIcon.js +6 -10
- package/dist/svgs/LogoutIcon.js +6 -10
- package/dist/svgs/MagnifyingGlassIcon.js +6 -10
- package/dist/svgs/MapPinIcon.js +6 -10
- package/dist/svgs/MenuIcon.js +6 -10
- package/dist/svgs/MessageIcon.js +7 -11
- package/dist/svgs/MessagesAppIcon.js +4 -8
- package/dist/svgs/MoneyCircleIcon.js +6 -10
- package/dist/svgs/MoneyFillIcon.js +6 -10
- package/dist/svgs/MoreIcon.js +6 -10
- package/dist/svgs/MultiplePersonsIcon.js +6 -10
- package/dist/svgs/NoArtworkIcon.js +6 -10
- package/dist/svgs/NoImageIcon.js +6 -10
- package/dist/svgs/PageIcon.js +6 -10
- package/dist/svgs/Payment2Icon.js +6 -10
- package/dist/svgs/PaymentIcon.js +6 -10
- package/dist/svgs/PersonIcon.js +6 -10
- package/dist/svgs/PublicationIcon.js +6 -10
- package/dist/svgs/QuestionCircleIcon.js +6 -10
- package/dist/svgs/ReloadIcon.js +6 -10
- package/dist/svgs/SecureLockIcon.js +6 -10
- package/dist/svgs/SettingsIcon.js +6 -10
- package/dist/svgs/ShareIcon.js +6 -10
- package/dist/svgs/ShieldFilledIcon.js +6 -10
- package/dist/svgs/ShieldIcon.js +6 -10
- package/dist/svgs/StarCircleFill.js +6 -10
- package/dist/svgs/StarCircleIcon.js +6 -10
- package/dist/svgs/Stopwatch.js +6 -10
- package/dist/svgs/Tag2Icon.js +7 -11
- package/dist/svgs/TagIcon.js +6 -10
- package/dist/svgs/TimerIcon.js +6 -10
- package/dist/svgs/TopEmergingIcon.js +6 -10
- package/dist/svgs/TrashIcon.js +6 -10
- package/dist/svgs/TrendingIcon.js +6 -10
- package/dist/svgs/TriangleDown.js +6 -10
- package/dist/svgs/TwitterIcon.js +6 -10
- package/dist/svgs/UserMultiIcon.js +6 -10
- package/dist/svgs/UserSingleIcon.js +6 -10
- package/dist/svgs/VerifiedIcon.js +6 -10
- package/dist/svgs/VerifiedPersonIcon.js +6 -10
- package/dist/svgs/WhatsAppAppIcon.js +4 -8
- package/dist/svgs/WorldGlobeCircleIcon.js +6 -10
- package/dist/svgs/XCircleIcon.js +6 -10
- package/dist/svgs/icons.stories.js +11 -38
- package/dist/svgs/index.js +113 -129
- package/dist/tokens.js +9 -12
- package/dist/types.js +5 -10
- package/dist/utils/Wrap.js +7 -11
- package/dist/utils/colors.stories.js +16 -20
- package/dist/utils/createGeminiUrl.js +6 -10
- package/dist/utils/flattenChildren.js +5 -9
- package/dist/utils/formatLargeNumber.js +1 -5
- package/dist/utils/formatLargeNumbers.tests.js +8 -10
- package/dist/utils/hooks/index.js +4 -20
- package/dist/utils/hooks/useColor.js +2 -6
- package/dist/utils/hooks/useMeasure.js +4 -8
- package/dist/utils/hooks/useScreenDimensions.js +11 -16
- package/dist/utils/hooks/useSpace.js +2 -6
- package/dist/utils/hooks/useTheme.js +6 -10
- package/dist/utils/normalizeText.js +1 -5
- package/dist/utils/space.stories.js +9 -13
- package/dist/utils/tests/renderWithWrappers.js +7 -12
- package/dist/utils/text.js +9 -13
- package/dist/utils/types.js +1 -2
- package/dist/utils/webTokensToMobile.js +4 -9
- package/package.json +14 -14
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const Checkbox_1 = require("./Checkbox");
|
|
6
|
-
const helpers_1 = require("../../storybook/helpers");
|
|
7
|
-
exports.default = {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Checkbox } from "./Checkbox";
|
|
3
|
+
import { List, Row } from "../../storybook/helpers";
|
|
4
|
+
export default {
|
|
8
5
|
title: "Checkbox",
|
|
9
|
-
component:
|
|
6
|
+
component: Checkbox,
|
|
10
7
|
};
|
|
11
|
-
function Variants() {
|
|
12
|
-
return ((
|
|
13
|
-
text` }) }), (
|
|
8
|
+
export function Variants() {
|
|
9
|
+
return (_jsxs(List, { style: { marginLeft: 20 }, children: [_jsx(Row, { children: _jsx(Checkbox, { text: "Default" }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked", checked: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Error", error: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Default with multiline
|
|
10
|
+
text` }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Error with multiline
|
|
14
11
|
text`, subtitle: "With subtitle", error: true }) })] }));
|
|
15
12
|
}
|
|
16
|
-
exports.Variants = Variants;
|
|
@@ -1,18 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./Check"), exports);
|
|
18
|
-
__exportStar(require("./Checkbox"), exports);
|
|
1
|
+
export * from "./Check";
|
|
2
|
+
export * from "./Checkbox";
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
const ClassTheme = ({ theme = "v3", children, }) => {
|
|
7
|
-
const currentTheme = (0, __1.useTheme)();
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(__1.Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme, Theme } from "../../";
|
|
3
|
+
export const ClassTheme = ({ theme = "v3", children, }) => {
|
|
4
|
+
const currentTheme = useTheme();
|
|
5
|
+
return (_jsx(Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
|
|
9
6
|
};
|
|
10
|
-
exports.ClassTheme = ClassTheme;
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./ClassTheme"), exports);
|
|
1
|
+
export * from "./ClassTheme";
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_native_1 = require("react-native");
|
|
6
|
-
const Collapse = ({ opened, children }) => {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
export const Collapse = ({ opened, children }) => {
|
|
7
4
|
if (!opened) {
|
|
8
5
|
return null;
|
|
9
6
|
}
|
|
10
|
-
return (
|
|
7
|
+
return _jsx(View, { children: children });
|
|
11
8
|
};
|
|
12
|
-
exports.Collapse = Collapse;
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const Collapse_1 = require("./Collapse");
|
|
7
|
-
const Text_1 = require("../Text");
|
|
8
|
-
exports.default = {
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Collapse } from "./Collapse";
|
|
4
|
+
import { LinkText, Text } from "../Text";
|
|
5
|
+
export default {
|
|
9
6
|
title: "Collapse",
|
|
10
|
-
component:
|
|
7
|
+
component: Collapse,
|
|
11
8
|
};
|
|
12
|
-
const Something = () => {
|
|
13
|
-
const [opened, setOpened] =
|
|
14
|
-
return ((
|
|
9
|
+
export const Something = () => {
|
|
10
|
+
const [opened, setOpened] = useState(true);
|
|
11
|
+
return (_jsxs(_Fragment, { children: [_jsx(LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), _jsx(Collapse, { opened: opened, children: _jsx(Text, { children: "inside" }) })] }));
|
|
15
12
|
};
|
|
16
|
-
exports.Something = Something;
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./Collapse"), exports);
|
|
1
|
+
export * from "./Collapse";
|
|
@@ -1,28 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const [isCompleted, setIsCompleted] = (0, react_1.useState)(false);
|
|
15
|
-
const componentRef = (0, react_1.useRef)(null);
|
|
16
|
-
(0, react_1.useEffect)(() => {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
3
|
+
import { LayoutAnimation } from "react-native";
|
|
4
|
+
import { CheckCircleIcon, ChevronIcon } from "../../svgs";
|
|
5
|
+
import { Collapse } from "../Collapse";
|
|
6
|
+
import { Flex } from "../Flex";
|
|
7
|
+
import { Text } from "../Text";
|
|
8
|
+
import { Touchable } from "../Touchable";
|
|
9
|
+
export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isExpanded = false, disabled = false, onExpand, onCollapse }, ref) => {
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
11
|
+
const [isCompleted, setIsCompleted] = useState(false);
|
|
12
|
+
const componentRef = useRef(null);
|
|
13
|
+
useEffect(() => {
|
|
17
14
|
setIsOpen(isExpanded);
|
|
18
15
|
}, []);
|
|
19
|
-
|
|
16
|
+
useImperativeHandle(ref, () => ({
|
|
20
17
|
collapse(onAnimationEnd) {
|
|
21
|
-
|
|
18
|
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
|
|
22
19
|
setIsOpen(false);
|
|
23
20
|
},
|
|
24
21
|
expand(onAnimationEnd) {
|
|
25
|
-
|
|
22
|
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
|
|
26
23
|
setIsOpen(true);
|
|
27
24
|
},
|
|
28
25
|
completed() {
|
|
@@ -39,8 +36,8 @@ exports.CollapsibleMenuItem = (0, react_1.forwardRef)(({ children, overtitle, ti
|
|
|
39
36
|
});
|
|
40
37
|
},
|
|
41
38
|
}), [isOpen]);
|
|
42
|
-
return ((
|
|
39
|
+
return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { onPress: () => {
|
|
43
40
|
setIsOpen(!isOpen);
|
|
44
41
|
isOpen ? onCollapse?.() : onExpand?.();
|
|
45
|
-
}, disabled: disabled, children: [!!overtitle && ((
|
|
42
|
+
}, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "black30" : "black100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
|
|
46
43
|
});
|
|
@@ -1,40 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
const Text_1 = require("../Text");
|
|
15
|
-
const ArtworkDetails = ({ handlePress }) => {
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ArtworkDetails content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { storiesOf } from "@storybook/react-native";
|
|
3
|
+
import { useRef, useState } from "react";
|
|
4
|
+
import { ScrollView, View } from "react-native";
|
|
5
|
+
import { CollapsibleMenuItem } from "./CollapsibleMenuItem";
|
|
6
|
+
import { Button } from "../Button";
|
|
7
|
+
import { Flex } from "../Flex";
|
|
8
|
+
import { Join } from "../Join";
|
|
9
|
+
import { Separator } from "../Separator";
|
|
10
|
+
import { Spacer } from "../Spacer";
|
|
11
|
+
import { Text } from "../Text";
|
|
12
|
+
export const ArtworkDetails = ({ handlePress }) => {
|
|
13
|
+
return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ArtworkDetails content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
|
|
17
14
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Upload Photos content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
|
|
15
|
+
export const UploadPhotos = ({ handlePress }) => {
|
|
16
|
+
return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "Upload Photos content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
|
|
21
17
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ContactInformation content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
|
|
18
|
+
export const ContactInformation = ({ handlePress }) => {
|
|
19
|
+
return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ContactInformation content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
|
|
25
20
|
};
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(react_native_2.View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is the collapsible menu content" }) }));
|
|
21
|
+
const CTAButton = ({ onPress, text }) => (_jsx(Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
|
|
22
|
+
export const DisplayContent = () => {
|
|
23
|
+
return (_jsx(View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: _jsx(Text, { children: "This is the collapsible menu content" }) }));
|
|
30
24
|
};
|
|
31
|
-
|
|
32
|
-
const ComponentWithCollapsibleMenu = () => {
|
|
25
|
+
export const ComponentWithCollapsibleMenu = () => {
|
|
33
26
|
const items = [
|
|
34
27
|
{
|
|
35
28
|
overtitle: "Optional overtitle",
|
|
36
29
|
title: "Artwork Details",
|
|
37
|
-
Content: ((
|
|
30
|
+
Content: (_jsx(ArtworkDetails, { handlePress: () => {
|
|
38
31
|
expandCollapsibleMenuContent(1);
|
|
39
32
|
enableStep(1);
|
|
40
33
|
} })),
|
|
@@ -42,7 +35,7 @@ const ComponentWithCollapsibleMenu = () => {
|
|
|
42
35
|
{
|
|
43
36
|
overtitle: "Optional overtitle",
|
|
44
37
|
title: "Upload Photos",
|
|
45
|
-
Content: ((
|
|
38
|
+
Content: (_jsx(UploadPhotos, { handlePress: () => {
|
|
46
39
|
expandCollapsibleMenuContent(2);
|
|
47
40
|
enableStep(2);
|
|
48
41
|
} })),
|
|
@@ -50,15 +43,15 @@ const ComponentWithCollapsibleMenu = () => {
|
|
|
50
43
|
{
|
|
51
44
|
overtitle: "Optional overtitle",
|
|
52
45
|
title: "Contact Information",
|
|
53
|
-
Content: ((
|
|
46
|
+
Content: (_jsx(ContactInformation, { handlePress: () => {
|
|
54
47
|
// navigation.navigate("ArtworkSubmittedScreen")
|
|
55
48
|
// do nothing
|
|
56
49
|
} })),
|
|
57
50
|
},
|
|
58
51
|
];
|
|
59
52
|
const TOTAL_STEPS = items.length;
|
|
60
|
-
const [validSteps, setValidSteps] =
|
|
61
|
-
const stepsRefs =
|
|
53
|
+
const [validSteps, setValidSteps] = useState([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
|
|
54
|
+
const stepsRefs = useRef(new Array(TOTAL_STEPS).fill(null)).current;
|
|
62
55
|
const enableStep = (stepIndex) => {
|
|
63
56
|
const newValidSteps = [...validSteps];
|
|
64
57
|
newValidSteps[stepIndex] = true;
|
|
@@ -77,18 +70,17 @@ const ComponentWithCollapsibleMenu = () => {
|
|
|
77
70
|
}
|
|
78
71
|
});
|
|
79
72
|
};
|
|
80
|
-
return ((
|
|
73
|
+
return (_jsx(View, { style: { margin: 20 }, children: _jsx(Flex, { children: _jsxs(ScrollView, { contentContainerStyle: {
|
|
81
74
|
paddingVertical: 20,
|
|
82
75
|
paddingHorizontal: 20,
|
|
83
76
|
justifyContent: "center",
|
|
84
|
-
}, children: [(
|
|
77
|
+
}, children: [_jsx(Spacer, { y: 4 }), _jsx(Join, { separator: _jsx(Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(({ overtitle, title, Content }, index) => {
|
|
85
78
|
const disabled = !validSteps[index];
|
|
86
|
-
return ((
|
|
79
|
+
return (_jsx(CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
|
|
87
80
|
if (ref) {
|
|
88
81
|
stepsRefs[index] = ref;
|
|
89
82
|
}
|
|
90
83
|
}, children: Content }, index));
|
|
91
84
|
}) })] }) }) }));
|
|
92
85
|
};
|
|
93
|
-
|
|
94
|
-
(0, react_native_1.storiesOf)("Collapsible Menu ", module).add("Collapse Collapse Items", () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(exports.ComponentWithCollapsibleMenu, {}) })));
|
|
86
|
+
storiesOf("Collapsible Menu ", module).add("Collapse Collapse Items", () => (_jsx(_Fragment, { children: _jsx(ComponentWithCollapsibleMenu, {}) })));
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./CollapsibleMenuItem"), exports);
|
|
1
|
+
export * from "./CollapsibleMenuItem";
|
|
@@ -1,22 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const Flex_1 = require("../Flex");
|
|
11
|
-
const Text_1 = require("../Text");
|
|
12
|
-
const Dialog = (props) => {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { Animated, Modal, ScrollView, StyleSheet, TouchableWithoutFeedback } from "react-native";
|
|
4
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
5
|
+
import { useTheme } from "../../utils/hooks/useTheme";
|
|
6
|
+
import { Button } from "../Button";
|
|
7
|
+
import { Flex } from "../Flex";
|
|
8
|
+
import { Text } from "../Text";
|
|
9
|
+
export const Dialog = (props) => {
|
|
13
10
|
const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
|
|
14
|
-
const [visible, setVisible] =
|
|
15
|
-
const { space, color } =
|
|
16
|
-
const value =
|
|
11
|
+
const [visible, setVisible] = useState(isVisible);
|
|
12
|
+
const { space, color } = useTheme();
|
|
13
|
+
const value = useRef(new Animated.Value(Number(isVisible))).current;
|
|
17
14
|
const fadeIn = () => {
|
|
18
15
|
return new Promise((resolve) => {
|
|
19
|
-
|
|
16
|
+
Animated.timing(value, {
|
|
20
17
|
toValue: 1,
|
|
21
18
|
useNativeDriver: true,
|
|
22
19
|
duration: 180,
|
|
@@ -25,14 +22,14 @@ const Dialog = (props) => {
|
|
|
25
22
|
};
|
|
26
23
|
const fadeOut = () => {
|
|
27
24
|
return new Promise((resolve) => {
|
|
28
|
-
|
|
25
|
+
Animated.timing(value, {
|
|
29
26
|
toValue: 0,
|
|
30
27
|
useNativeDriver: true,
|
|
31
28
|
duration: 150,
|
|
32
29
|
}).start(resolve);
|
|
33
30
|
});
|
|
34
31
|
};
|
|
35
|
-
|
|
32
|
+
useEffect(() => {
|
|
36
33
|
if (isVisible) {
|
|
37
34
|
setVisible(true);
|
|
38
35
|
fadeIn();
|
|
@@ -43,17 +40,17 @@ const Dialog = (props) => {
|
|
|
43
40
|
});
|
|
44
41
|
}
|
|
45
42
|
}, [isVisible]);
|
|
46
|
-
const backdrop = ((
|
|
47
|
-
|
|
43
|
+
const backdrop = (_jsx(Animated.View, { style: [
|
|
44
|
+
StyleSheet.absoluteFillObject,
|
|
48
45
|
{ opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
|
|
49
46
|
] }));
|
|
50
|
-
return ((
|
|
47
|
+
return (_jsxs(Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? (_jsx(TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), _jsx(SafeAreaView, { pointerEvents: "box-none", style: {
|
|
51
48
|
flex: 1,
|
|
52
49
|
justifyContent: "center",
|
|
53
50
|
alignItems: "center",
|
|
54
51
|
padding: space(2),
|
|
55
52
|
backgroundColor: "transparent",
|
|
56
|
-
}, children: (
|
|
53
|
+
}, children: _jsxs(Animated.View, { style: {
|
|
57
54
|
width: "100%",
|
|
58
55
|
maxHeight: "100%",
|
|
59
56
|
opacity: value,
|
|
@@ -67,6 +64,5 @@ const Dialog = (props) => {
|
|
|
67
64
|
},
|
|
68
65
|
shadowOpacity: 1,
|
|
69
66
|
shadowRadius: 10,
|
|
70
|
-
}, children: [(
|
|
67
|
+
}, children: [_jsx(Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && (_jsx(ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: _jsx(Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), _jsxs(Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && (_jsx(Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), _jsx(Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
|
|
71
68
|
};
|
|
72
|
-
exports.Dialog = Dialog;
|
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const helpers_1 = require("../../storybook/helpers");
|
|
8
|
-
const Button_1 = require("../Button");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { storiesOf } from "@storybook/react-native";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { Dialog } from ".";
|
|
5
|
+
import { List } from "../../storybook/helpers";
|
|
6
|
+
import { Button } from "../Button";
|
|
9
7
|
const DialogDemo = (props) => {
|
|
10
|
-
const [visible, setVisible] =
|
|
11
|
-
return ((
|
|
8
|
+
const [visible, setVisible] = useState(false);
|
|
9
|
+
return (_jsxs(List, { children: [_jsx(Button, { onPress: () => setVisible(true), children: "Show" }), _jsx(Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
|
|
12
10
|
text: "OK",
|
|
13
11
|
onPress: () => setVisible(false),
|
|
14
12
|
}, ...props })] }));
|
|
15
13
|
};
|
|
16
|
-
|
|
17
|
-
.add("Default", () => (
|
|
18
|
-
.add("With secondary action", () => ((
|
|
14
|
+
storiesOf("Dialog", module)
|
|
15
|
+
.add("Default", () => _jsx(DialogDemo, {}))
|
|
16
|
+
.add("With secondary action", () => (_jsx(DialogDemo, { secondaryCta: {
|
|
19
17
|
text: "Cancel",
|
|
20
18
|
onPress: () => { },
|
|
21
19
|
} })))
|
|
22
|
-
.add("With details", () => ((
|
|
23
|
-
.add("With long details", () => ((
|
|
24
|
-
.add("With background press handler", () => (
|
|
20
|
+
.add("With details", () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." })))
|
|
21
|
+
.add("With long details", () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) })))
|
|
22
|
+
.add("With background press handler", () => _jsx(DialogDemo, { onBackgroundPress: () => { } }));
|
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const Dialog_1 = require("./Dialog");
|
|
6
|
-
const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { fireEvent } from "@testing-library/react-native";
|
|
3
|
+
import { Dialog } from "./Dialog";
|
|
4
|
+
import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
|
|
7
5
|
describe("Dialog", () => {
|
|
8
6
|
it("renders without error", () => {
|
|
9
|
-
const { getByText } =
|
|
7
|
+
const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
|
|
10
8
|
text: "Primary Action Button",
|
|
11
9
|
onPress: jest.fn(),
|
|
12
10
|
} }));
|
|
13
11
|
expect(getByText("title")).toBeTruthy();
|
|
14
12
|
});
|
|
15
13
|
it("should render details if it is passed", () => {
|
|
16
|
-
const { getByText } =
|
|
14
|
+
const { getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
|
|
17
15
|
text: "Primary Action Button",
|
|
18
16
|
onPress: jest.fn(),
|
|
19
17
|
} }));
|
|
@@ -21,18 +19,18 @@ describe("Dialog", () => {
|
|
|
21
19
|
});
|
|
22
20
|
it("should render the primary action button", () => {
|
|
23
21
|
const primaryActionMock = jest.fn();
|
|
24
|
-
const { getByTestId, getByText } =
|
|
22
|
+
const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
|
|
25
23
|
text: "Primary Action Button",
|
|
26
24
|
onPress: primaryActionMock,
|
|
27
25
|
} }));
|
|
28
26
|
const primaryButton = getByTestId("dialog-primary-action-button");
|
|
29
|
-
|
|
27
|
+
fireEvent.press(primaryButton);
|
|
30
28
|
expect(primaryActionMock).toHaveBeenCalled();
|
|
31
29
|
expect(getByText("Primary Action Button")).toBeTruthy();
|
|
32
30
|
});
|
|
33
31
|
it("should render the secondary action button if it is passed", () => {
|
|
34
32
|
const secondaryActionMock = jest.fn();
|
|
35
|
-
const { getByTestId, getByText } =
|
|
33
|
+
const { getByTestId, getByText } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
|
|
36
34
|
text: "Primary Action Button",
|
|
37
35
|
onPress: jest.fn(),
|
|
38
36
|
}, secondaryCta: {
|
|
@@ -40,17 +38,17 @@ describe("Dialog", () => {
|
|
|
40
38
|
onPress: secondaryActionMock,
|
|
41
39
|
} }));
|
|
42
40
|
const secondaryButton = getByTestId("dialog-secondary-action-button");
|
|
43
|
-
|
|
41
|
+
fireEvent.press(secondaryButton);
|
|
44
42
|
expect(secondaryActionMock).toHaveBeenCalled();
|
|
45
43
|
expect(getByText("Secondary Action Button")).toBeTruthy();
|
|
46
44
|
});
|
|
47
45
|
it("should call onBackgroundPress when backdrop is pressed", () => {
|
|
48
46
|
const onBackgroundPressMock = jest.fn();
|
|
49
|
-
const { getByTestId } =
|
|
47
|
+
const { getByTestId } = renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
|
|
50
48
|
text: "Primary Action Button",
|
|
51
49
|
onPress: jest.fn(),
|
|
52
50
|
} }));
|
|
53
|
-
|
|
51
|
+
fireEvent.press(getByTestId("dialog-backdrop"));
|
|
54
52
|
expect(onBackgroundPressMock).toHaveBeenCalled();
|
|
55
53
|
});
|
|
56
54
|
});
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./Dialog"), exports);
|
|
1
|
+
export * from "./Dialog";
|