350 lines
14 KiB
TypeScript
350 lines
14 KiB
TypeScript
// Module ID: 4824
|
|
// Function ID: 4825
|
|
// Name: PillWrapper
|
|
// Dependencies: [32, 19, 17, 21, 4819, 4380, 712, 4820, 4108, 4101, 4825, 4826, 4120, 1363, 4830, 1356, 4814, 4818, 2]
|
|
// Exports: ButtonPill
|
|
|
|
// Module 4824 (PillWrapper)
|
|
import ThemesDefault from "Themes" /* 712 */;
|
|
import map from "map" /* 4101 */;
|
|
import ManaContext from "ManaContext" /* 4108 */;
|
|
import _modDef4120 from "module_4120" /* 4120 */;
|
|
import MINIMUM_HIT_AREA2 from "MINIMUM_HIT_AREA" /* 4819 */;
|
|
import styleProperties from "styleProperties" /* 4820 */;
|
|
import LinearGradientDefault from "LinearGradient" /* 4826 */;
|
|
import closure_3 from "_slicedToArray" /* 32 */;
|
|
import closure_4 from "noop" /* 19 */;
|
|
import get_ActivityIndicator from "get ActivityIndicator" /* 17 */;
|
|
import jsxProd from "jsxProd" /* 21 */;
|
|
import MINIMUM_HIT_AREA from "MINIMUM_HIT_AREA" /* 4819 */;
|
|
import createCacheKey from "createCacheKey" /* 4380 */;
|
|
|
|
require = arg1;
|
|
function PillWrapper(expressivePressState) {
|
|
({ children, variant, style, shiny } = expressivePressState);
|
|
if (shiny === undefined) {
|
|
shiny = false;
|
|
}
|
|
expressivePressState = expressivePressState.expressivePressState;
|
|
({ expressiveRiveRef, size } = expressivePressState);
|
|
let obj = styleProperties;
|
|
const buttonPillStyles = obj.useButtonPillStyles(variant, expressivePressState.pressed);
|
|
obj1 = styleProperties;
|
|
const gradientPillStyles = obj1.useGradientPillStyles(variant);
|
|
let obj2 = ManaContext;
|
|
const tmp5 = callback3(variant, size);
|
|
let obj3 = map;
|
|
let items = [obj3.useToken(ThemesDefault.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT), , ];
|
|
let obj4 = map;
|
|
items[1] = obj4.useToken(ThemesDefault.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT_2);
|
|
let obj5 = map;
|
|
items[2] = obj5.useToken(ThemesDefault.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PINK_FOR_GRADIENT);
|
|
const items1 = [ThemesDefault.unsafe_rawColors.PREMIUM_TIER_0_PURPLE_FOR_GRADIENTS, ThemesDefault.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2, ThemesDefault.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS];
|
|
let tmp7 = null;
|
|
if (shiny) {
|
|
obj = { variant: null };
|
|
obj[0] = variant;
|
|
tmp7 = callback2(tmp(4825).ButtonShine, obj);
|
|
}
|
|
if ("experimental_premium-primary" !== variant) {
|
|
if ("experimental_premium-basic" !== variant) {
|
|
let tmp11Result = "expressive" === variant;
|
|
if (tmp11Result) {
|
|
obj = { style: null, children: null };
|
|
const items2 = [closure_6.absoluteFill, tmp5.expressivePill];
|
|
obj[0] = items2;
|
|
obj1 = { withReducedMotion: "short-loop", ref: null, fit: "layout", artboard: null, dataBinding: null };
|
|
obj1[1] = expressiveRiveRef;
|
|
let str = "Mobile Expressive Button Dark Mode";
|
|
if (tmpResult.isThemeLight(obj2.useThemeContext().theme)) {
|
|
str = "Mobile Expressive Button Lightmode";
|
|
}
|
|
obj1[3] = str;
|
|
obj2 = { buttonColor: null, cornerRadius: null };
|
|
obj2[0] = tmp5.expressiveRiveFill.color;
|
|
obj2[1] = tmp5.expressivePill.borderRadius;
|
|
const merged = Object.assign(expressivePressState);
|
|
obj1[4] = obj2;
|
|
obj[1] = callback2(tmp(4108).ExpressiveButtonRive, obj1);
|
|
tmp11Result = tmp11(closure_5, obj);
|
|
const tmp12 = closure_5;
|
|
tmpResult = tmp(1363);
|
|
}
|
|
obj3 = { children: null };
|
|
const items3 = [tmp11Result, ];
|
|
obj4 = { style: null, children: null };
|
|
const items4 = [style, buttonPillStyles];
|
|
obj4[0] = items4;
|
|
const items5 = [children, tmp7];
|
|
obj4[1] = items5;
|
|
items3[1] = tmp9(tmp6(4120).View, obj4);
|
|
obj3[0] = items3;
|
|
}
|
|
return tmp9(tmp10, obj3);
|
|
}
|
|
obj5 = { start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, style: items6, colors: null };
|
|
items6 = [style, gradientPillStyles, closure_6.absoluteFill];
|
|
if ("experimental_premium-basic" === variant) {
|
|
items = items1;
|
|
}
|
|
const obj6 = { children: null };
|
|
obj5[3] = items;
|
|
const items7 = [callback2(LinearGradientDefault, obj5), ];
|
|
const items8 = [style, buttonPillStyles];
|
|
const items9 = [children, tmp7];
|
|
items7[1] = closure_8(_modDef4120.View, { style: items8, children: items9 });
|
|
obj6[0] = items7;
|
|
obj3 = obj6;
|
|
}
|
|
class BasicButtonPill {
|
|
constructor(arg0) {
|
|
str = global.variant;
|
|
({ children, style, pressed } = global);
|
|
if (str === undefined) {
|
|
str = "primary";
|
|
}
|
|
DEFAULT_BUTTON_SIZE = global.size;
|
|
if (DEFAULT_BUTTON_SIZE === undefined) {
|
|
tmp = closure_0;
|
|
tmp2 = closure_2;
|
|
DEFAULT_BUTTON_SIZE = require("MINIMUM_HIT_AREA").DEFAULT_BUTTON_SIZE;
|
|
}
|
|
flag = global.shiny;
|
|
if (flag === undefined) {
|
|
flag = false;
|
|
}
|
|
({ expressiveRiveRef, expressivePressState } = global);
|
|
tmp3 = closure_14(str, DEFAULT_BUTTON_SIZE);
|
|
obj = { variant: str, size: DEFAULT_BUTTON_SIZE, style: items, pressed, shiny: flag, expressiveRiveRef, expressivePressState, children: jsx(View, obj) };
|
|
items = [, ];
|
|
items[0] = tmp3.pill;
|
|
items[1] = style;
|
|
obj = { style: tmp3.childContainer, children };
|
|
return jsx(PillWrapper, obj);
|
|
}
|
|
}
|
|
class LoadingButtonPill {
|
|
constructor(arg0) {
|
|
str = global.variant;
|
|
({ children, style, pressed } = global);
|
|
if (str === undefined) {
|
|
str = "primary";
|
|
}
|
|
DEFAULT_BUTTON_SIZE = global.size;
|
|
if (DEFAULT_BUTTON_SIZE === undefined) {
|
|
tmp = c0;
|
|
tmp2 = closure_2;
|
|
DEFAULT_BUTTON_SIZE = require("MINIMUM_HIT_AREA").DEFAULT_BUTTON_SIZE;
|
|
}
|
|
flag = global.loading;
|
|
if (flag === undefined) {
|
|
flag = false;
|
|
}
|
|
c0 = flag;
|
|
loaderSize = global.loaderSize;
|
|
closure_1 = undefined;
|
|
closure_2 = undefined;
|
|
({ expressiveRiveRef, expressivePressState } = global);
|
|
tmp3 = closure_14(str, DEFAULT_BUTTON_SIZE);
|
|
closure_1 = closure_4.useRef(null);
|
|
tmp4 = closure_3(closure_4.useState(flag), 2);
|
|
[tmp5, closure_2] = tmp4;
|
|
items = [];
|
|
items[0] = flag;
|
|
effect = closure_4.useEffect(() => {
|
|
if (null != ref.current) {
|
|
const _clearTimeout = clearTimeout;
|
|
clearTimeout(tmp.current);
|
|
}
|
|
if (flag) {
|
|
_undefined(true);
|
|
} else {
|
|
const _setTimeout = setTimeout;
|
|
tmp.current = setTimeout(() => {
|
|
callback(false);
|
|
}, 500);
|
|
}
|
|
}, items);
|
|
tmp7 = closure_3(useLoadingStyles(flag, DEFAULT_BUTTON_SIZE), 2);
|
|
obj = { variant: str, size: DEFAULT_BUTTON_SIZE, style: items1, pressed, expressiveRiveRef, expressivePressState, children: null };
|
|
items1 = [, ];
|
|
items1[0] = tmp3.pill;
|
|
items1[1] = style;
|
|
tmp12 = jsx;
|
|
[tmp8, tmp9] = tmp7;
|
|
tmp10 = jsxs;
|
|
tmp11 = PillWrapper;
|
|
tmp13 = closure_2;
|
|
items2 = [, ];
|
|
items2[0] = tmp3.childContainer;
|
|
items2[1] = tmp8;
|
|
items3 = [, ];
|
|
items3[0] = jsx(require("module_4120").View, { style: items2, children });
|
|
obj = { style: items4, children: null };
|
|
items4 = [, ];
|
|
items4[0] = tmp3.ellipsis;
|
|
items4[1] = tmp9;
|
|
if (tmp12Result) {
|
|
tmp14 = c0;
|
|
obj1 = { variant: null, size: null };
|
|
obj1[0] = str;
|
|
if (loaderSize == null) {
|
|
loaderSize = DEFAULT_BUTTON_SIZE;
|
|
}
|
|
obj1[1] = loaderSize;
|
|
tmp12Result = tmp12(require("EllipsisCircle").Ellipsis, obj1);
|
|
}
|
|
obj[1] = tmp12Result;
|
|
items3[1] = tmp12(require("module_4120").View, obj);
|
|
obj[6] = items3;
|
|
return tmp10(tmp11, obj);
|
|
}
|
|
}
|
|
function useLoadingStyles(flag, DEFAULT_BUTTON_SIZE) {
|
|
const _require = flag;
|
|
const enabled = React.useContext(_require(num[15]).AccessibilityPreferencesContext).reducedMotion.enabled;
|
|
num = 12;
|
|
if ("lg" === DEFAULT_BUTTON_SIZE) {
|
|
num = 18;
|
|
}
|
|
let tmpResult = tmp(tmp2[12]);
|
|
const fn = function o() {
|
|
let obj = callback(num[16]);
|
|
num = 1;
|
|
if (callback) {
|
|
num = 0;
|
|
}
|
|
const withSpringResult = obj.withSpring(num, callback(num[17]).SUBTLE_SPRING, "animate-always");
|
|
obj = { opacity: null, transform: null };
|
|
if (enabled) {
|
|
let withDelayResult = withSpringResult;
|
|
if (!tmp3) {
|
|
let tmpResult = tmp(tmp2[12]);
|
|
withDelayResult = tmpResult.withDelay(closure_1_10, withSpringResult);
|
|
}
|
|
obj[0] = withDelayResult;
|
|
const items = [{ translateY: 0 }];
|
|
obj[1] = items;
|
|
let tmp6 = obj;
|
|
} else {
|
|
obj[0] = withSpringResult;
|
|
tmpResult = tmp(tmp2[16]);
|
|
let num2 = 0;
|
|
if (tmp3) {
|
|
num2 = -1 * num;
|
|
}
|
|
obj = { translateY: null };
|
|
obj[0] = tmpResult.withSpring(num2, tmp(tmp2[17]).SUBTLE_SPRING);
|
|
const items1 = [obj];
|
|
obj[1] = items1;
|
|
tmp6 = obj;
|
|
}
|
|
return tmp6;
|
|
};
|
|
let obj = { withSpring: tmp(tmp2[16]).withSpring, loading: flag, SUBTLE_SPRING: tmp(tmp2[17]).SUBTLE_SPRING, useReducedMotion: enabled, withDelay: tmp(tmp2[12]).withDelay, FADE_DELAY: c10, offsetY: num };
|
|
fn.__closure = obj;
|
|
fn.__workletHash = 9388603334085;
|
|
fn.__initData = closure_18;
|
|
let items = [tmpResult.useAnimatedStyle(fn), ];
|
|
tmpResult = tmp(tmp2[12]);
|
|
const fn2 = function l() {
|
|
let obj = callback(num[16]);
|
|
num = 0;
|
|
if (callback) {
|
|
num = 1;
|
|
}
|
|
const withSpringResult = obj.withSpring(num, callback(num[17]).SUBTLE_SPRING, "animate-always");
|
|
obj = { opacity: null, transform: null };
|
|
if (enabled) {
|
|
let withDelayResult = withSpringResult;
|
|
if (tmp3) {
|
|
let tmpResult = tmp(tmp2[12]);
|
|
withDelayResult = tmpResult.withDelay(closure_1_10, withSpringResult);
|
|
}
|
|
obj[0] = withDelayResult;
|
|
const items = [{ translateY: 0 }];
|
|
obj[1] = items;
|
|
let tmp5 = obj;
|
|
} else {
|
|
obj[0] = withSpringResult;
|
|
tmpResult = tmp(tmp2[16]);
|
|
let num2 = 0;
|
|
if (!tmp3) {
|
|
num2 = num;
|
|
}
|
|
obj = { translateY: null };
|
|
obj[0] = tmpResult.withSpring(num2, tmp(tmp2[17]).SUBTLE_SPRING);
|
|
const items1 = [obj];
|
|
obj[1] = items1;
|
|
tmp5 = obj;
|
|
}
|
|
return tmp5;
|
|
};
|
|
obj = { withSpring: tmp(tmp2[16]).withSpring, loading: flag, SUBTLE_SPRING: tmp(tmp2[17]).SUBTLE_SPRING, useReducedMotion: enabled, withDelay: tmp(tmp2[12]).withDelay, FADE_DELAY: c10, offsetY: num };
|
|
fn2.__closure = obj;
|
|
fn2.__workletHash = 8255420825872;
|
|
fn2.__initData = closure_19;
|
|
items[1] = tmpResult.useAnimatedStyle(fn2);
|
|
return items;
|
|
}
|
|
({ View: c5, StyleSheet: closure_6 } = get_ActivityIndicator);
|
|
({ jsx: error, jsxs: closure_8, Fragment: c9 } = jsxProd);
|
|
let c10 = 300;
|
|
const buttonPadding = MINIMUM_HIT_AREA.getButtonPadding(require("MINIMUM_HIT_AREA").SMALL_BUTTON_HEIGHT, require("MINIMUM_HIT_AREA").SMALL_BUTTON_ICON_SIZE);
|
|
const buttonPadding2 = MINIMUM_HIT_AREA.getButtonPadding(require("MINIMUM_HIT_AREA").MEDIUM_BUTTON_HEIGHT, require("MINIMUM_HIT_AREA").MEDIUM_BUTTON_ICON_SIZE);
|
|
const buttonPadding3 = MINIMUM_HIT_AREA.getButtonPadding(require("MINIMUM_HIT_AREA").LARGE_BUTTON_HEIGHT, require("MINIMUM_HIT_AREA").LARGE_BUTTON_ICON_SIZE);
|
|
let closure_14 = createCacheKey.createStyles((arg0, arg1) => {
|
|
if ("sm" === arg1) {
|
|
let obj = { minHeight: null, minWidth: null, paddingHorizontal: null, paddingVertical: null };
|
|
obj[0] = MINIMUM_HIT_AREA2.SMALL_BUTTON_HEIGHT;
|
|
obj[1] = MINIMUM_HIT_AREA2.SMALL_BUTTON_HEIGHT;
|
|
obj[2] = MINIMUM_HIT_AREA2.SMALL_BUTTON_HORIZONTAL_PADDING;
|
|
obj[3] = closure_11;
|
|
} else if ("md" === arg1) {
|
|
obj = { minHeight: null, minWidth: null, paddingHorizontal: null, paddingVertical: null };
|
|
obj[0] = MINIMUM_HIT_AREA2.MEDIUM_BUTTON_HEIGHT;
|
|
obj[1] = MINIMUM_HIT_AREA2.MEDIUM_BUTTON_HEIGHT;
|
|
obj[2] = MINIMUM_HIT_AREA2.MEDIUM_BUTTON_HORIZONTAL_PADDING;
|
|
obj[3] = closure_12;
|
|
} else {
|
|
obj = {};
|
|
if ("lg" === arg1) {
|
|
obj1 = { minHeight: null, minWidth: null, paddingHorizontal: null, paddingVertical: null };
|
|
obj1[0] = MINIMUM_HIT_AREA2.LARGE_BUTTON_HEIGHT;
|
|
obj1[1] = MINIMUM_HIT_AREA2.LARGE_BUTTON_HEIGHT;
|
|
obj1[2] = MINIMUM_HIT_AREA2.LARGE_BUTTON_HORIZONTAL_PADDING;
|
|
obj1[3] = closure_13;
|
|
obj = obj1;
|
|
}
|
|
}
|
|
let obj3 = MINIMUM_HIT_AREA2;
|
|
const buttonBorderRadius = obj3.getButtonBorderRadius(arg1);
|
|
const obj2 = { pill: null, expressivePill: null, expressiveRiveFill: null, childContainer: null, ellipsis: null };
|
|
obj3 = { flexDirection: "row", alignItems: "center", justifyContent: "center", overflow: "hidden", borderWidth: MINIMUM_HIT_AREA2.BUTTON_BORDER_WIDTH, borderRadius: buttonBorderRadius };
|
|
const merged = Object.assign(obj);
|
|
obj2[0] = obj3;
|
|
obj2[1] = { overflow: "hidden", borderRadius: buttonBorderRadius };
|
|
obj2[2] = { color: ThemesDefault.colors.CONTROL_EXPRESSIVE_BACKGROUND_DEFAULT };
|
|
obj2[3] = { flexDirection: "row", alignItems: "center", justifyContent: "center", flexGrow: 1, maxWidth: "100%" };
|
|
obj2[4] = { position: "absolute", height: "100%", width: "100%", justifyContent: "center", alignItems: "center" };
|
|
return obj2;
|
|
});
|
|
let closure_18 = { code: "function ButtonPillNativeTsx1(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?0:1,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?opacityTransition:withDelay(FADE_DELAY,opacityTransition),transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?-1*offsetY:0,SUBTLE_SPRING)}]};}" };
|
|
let closure_19 = { code: "function ButtonPillNativeTsx2(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?1:0,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?withDelay(FADE_DELAY,opacityTransition):opacityTransition,transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?0:offsetY,SUBTLE_SPRING)}]};}" };
|
|
const result = require("set").fileFinishedImporting("design/components/Button/native/ButtonPill.native.tsx");
|
|
|
|
export const ButtonPill = function ButtonPill(loading) {
|
|
if (null == loading.loading) {
|
|
let obj = {};
|
|
const merged = Object.assign(loading);
|
|
let tmp6 = callback2(BasicButtonPill, obj);
|
|
} else {
|
|
obj = {};
|
|
const merged1 = Object.assign(loading);
|
|
tmp6 = callback2(LoadingButtonPill, obj);
|
|
}
|
|
return tmp6;
|
|
};
|
|
export { BasicButtonPill };
|
|
export { LoadingButtonPill };
|
|
export { useLoadingStyles };
|