@applicaster/zapp-react-native-utils
Version:
Applicaster Zapp React Native utilities package
875 lines (865 loc) • 19.7 kB
JavaScript
const {
fieldsGroup,
} = require("@applicaster/zapp-react-native-utils/manifestUtils");
const {
generateFontConfiguration,
createVariationFields,
conditional_horizontal_type,
conditional_vertical_type,
conditional_horizontal_type_item_fixed,
conditional_horizontal_asset_on,
conditional_horizontal_display_type_fixed,
} = require("./utils");
const TRANSPARENT = "rgba(0, 0, 0, 0)";
const fontFamily = "Ubuntu-Medium";
const componentConfigurationFields = [
{
type: "select",
key: "screen_picker_type",
label: "Screen picker type",
initial_value: "vertical",
options: [
{ text: "Vertical", value: "vertical" },
{ text: "Horizontal", value: "horizontal" },
],
},
{
type: "select",
key: "screen_picker_horizontal_display_type",
label: "Display",
initial_value: "fixed",
options: [
{ text: "Fixed", value: "fixed" },
{ text: "Dynamic", value: "dynamic" },
],
...conditional_horizontal_type,
},
{
type: "select",
label: "Alignment for Picker container",
key: "screen_picker_items_alignment",
initial_value: "left",
options: [
{ text: "Left", value: "left" },
{ text: "Right", value: "right" },
{ text: "Center", value: "center" },
],
...conditional_horizontal_type,
},
{
type: "select",
label: "Alignment for Picker container items",
key: "screen_picker_horizontal_items_alignment_inner",
initial_value: "left",
options: [
{ text: "Left", value: "left" },
{ text: "Right", value: "right" },
{ text: "Center", value: "center" },
],
...conditional_horizontal_display_type_fixed,
},
{
type: "number_input",
label: "Width",
key: "screen_picker_vertical_width",
initial_value: 300,
...conditional_vertical_type,
},
{
type: "number_input",
label: "Width",
key: "screen_picker_horizontal_width",
initial_value: 1920,
...conditional_horizontal_display_type_fixed,
},
...createVariationFields({
label: "X position",
key: "x_position",
variants: [
{
initial_value: 124,
},
{
initial_value: 0,
},
],
}),
...createVariationFields({
label: "Y position",
key: "y_position",
variants: [
{
initial_value: 200,
},
{
initial_value: 200,
},
],
}),
{
type: "number_input",
label: "Padding Top",
key: "component_padding_top",
initial_value: 0,
...conditional_horizontal_type,
},
{
type: "number_input",
label: "Padding Right",
key: "component_padding_right",
initial_value: 124,
...conditional_horizontal_type,
},
{
type: "number_input",
label: "Padding Bottom",
key: "component_padding_bottom",
initial_value: 0,
...conditional_horizontal_type,
},
{
type: "number_input",
label: "Padding Left",
key: "component_padding_left",
initial_value: 124,
},
{
type: "color_picker_rgba",
label: "Background color",
key: "screen_picker_background_color",
initial_value: TRANSPARENT,
...conditional_horizontal_type,
},
{
type: "uploader",
label: "Background image",
key: "screen_picker_background_image",
initial_value: null,
...conditional_horizontal_type,
},
{
type: "color_picker_rgba",
label: "Border color",
key: "screen_picker_border_color",
initial_value: TRANSPARENT,
...conditional_horizontal_type,
},
{
type: "number_input",
label: "Border thickness",
key: "screen_picker_border_thickness",
initial_value: 0,
...conditional_horizontal_type,
},
{
type: "number_input",
label: "Corner Radius",
key: "screen_picker_corner_radius",
initial_value: 0,
...conditional_horizontal_type,
},
/* Disabled due to blocker issues with Android TV
Task: https://applicaster.monday.com/boards/1615228456/pulses/4130776042
Discussion: https://applicaster.monday.com/boards/1615228456/pulses/4130775820/posts/2031049491
*/
// ...loopFields
];
const assetFields = [
{
type: "switch",
key: "screen_picker_asset_switch",
label: "Enable",
initial_value: false,
...conditional_horizontal_type,
},
{
type: "text_input",
key: "screen_picker_asset_key",
label: "Default data key",
initial_value: "image_base",
...conditional_horizontal_asset_on,
},
{
type: "switch",
key: "screen_picker_asset_focused_switch",
label: "Enable focused asset",
initial_value: false,
...conditional_horizontal_asset_on,
},
{
type: "text_input",
key: "screen_picker_asset_focused_key",
label: "Focused data key",
initial_value: "thumb_1",
...conditional_horizontal_asset_on,
},
{
type: "switch",
key: "screen_picker_asset_selected_switch",
label: "Enable selected asset",
initial_value: false,
...conditional_horizontal_asset_on,
},
{
type: "text_input",
key: "screen_picker_asset_selected_key",
label: "Selected data key",
initial_value: "thumb_2",
...conditional_horizontal_asset_on,
},
{
type: "switch",
key: "screen_picker_asset_selectedfocused_switch",
label: "Enable selected & focused asset",
initial_value: false,
...conditional_horizontal_asset_on,
},
{
type: "text_input",
key: "screen_picker_asset_selectedfocused_key",
label: "Selected & Focused data key",
initial_value: "thumb_3",
...conditional_horizontal_asset_on,
},
{
type: "number_input",
key: "screen_picker_asset_width",
label: "Width",
initial_value: 40,
...conditional_horizontal_asset_on,
},
{
type: "number_input",
key: "screen_picker_asset_height",
label: "Height",
initial_value: 40,
...conditional_horizontal_asset_on,
},
{
type: "number_input",
key: "screen_picker_asset_margin_top",
label: "Margin Top",
initial_value: 0,
...conditional_horizontal_asset_on,
},
{
type: "number_input",
key: "screen_picker_asset_margin_right",
label: "Margin Right",
initial_value: 16,
...conditional_horizontal_asset_on,
},
{
type: "number_input",
key: "screen_picker_asset_margin_bottom",
label: "Margin Bottom",
initial_value: 0,
...conditional_horizontal_asset_on,
},
{
type: "number_input",
key: "screen_picker_asset_margin_left",
label: "Margin Left",
initial_value: 0,
...conditional_horizontal_asset_on,
},
{
type: "select",
label: "Alignment",
key: "screen_picker_asset_alignment",
initial_value: "left",
options: [
{ text: "Top", value: "top" },
{ text: "Right", value: "right" },
{ text: "Bottom", value: "bottom" },
{ text: "Left", value: "left" },
],
...conditional_horizontal_asset_on,
},
];
const screenPickerItemsFields = [
...createVariationFields({
key: "gutter",
variants: [
{
label: "Vertical gutter",
initial_value: 10,
},
{
label: "Horizontal gutter",
initial_value: 80,
},
],
}),
{
type: "select",
label: "Item Size",
key: "screen_picker_item_size",
initial_value: "dynamic",
options: [
{ text: "Dynamic", value: "dynamic" },
{ text: "Fixed", value: "fixed" },
],
...conditional_horizontal_type,
},
{
type: "number_input",
label: "Item Width",
key: "screen_picker_item_width",
initial_value: 200,
...conditional_horizontal_type_item_fixed,
},
{
type: "select",
label: "Alignment for item content",
key: "screen_picker_item_alignment",
initial_value: "left",
options: [
{ text: "Left", value: "left" },
{ text: "Right", value: "right" },
{ text: "Center", value: "center" },
],
...conditional_horizontal_type_item_fixed,
},
];
const titleFields = [
{
type: "switch",
label: "Enable",
key: "title_enable",
initial_value: true,
...conditional_horizontal_type,
},
// font color
...createVariationFields({
prefix: "default",
type: "color_picker_rgba",
label: "Default font color",
key: "font_color",
variants: [
{
initial_value: "rgba(239, 239, 239, 0.5)",
},
{
initial_value: "rgba(239, 239, 239, 0.5)",
},
],
}),
...createVariationFields({
prefix: "focused",
type: "color_picker_rgba",
label: "Focused font color",
key: "font_color",
variants: [
{
initial_value: "rgba(239, 239, 239, 1)",
},
{
initial_value: "rgba(254, 20, 72, 1)",
},
],
}),
...createVariationFields({
prefix: "selected",
type: "color_picker_rgba",
label: "Selected font color",
key: "font_color",
variants: [
{
initial_value: "rgba(239, 239, 239, 1)",
},
{
initial_value: "rgba(239, 239, 239, 1)",
},
],
}),
...createVariationFields({
prefix: "selected_focused",
type: "color_picker_rgba",
label: "Selected & Focused font color",
key: "font_color",
variants: [
{
initial_value: "rgba(239, 239, 239, 1)",
},
{
initial_value: "rgba(254, 20, 72, 1)",
},
],
}),
// fonts
{
type: "tvos_font_selector",
label: "tvOS Font Family",
key: "tvos_font_family",
initial_value: fontFamily,
},
{
type: "android_font_selector",
label: "Android TV Font Family",
key: "android_tv_font_family",
initial_value: fontFamily,
},
{
type: "lg_tv_font_selector",
label: "LG TV Font Family",
key: "lg_tv_font_family",
initial_value: fontFamily,
},
{
type: "samsung_font_selector",
label: "Samsung TV Font Family",
key: "samsung_tv_font_family",
initial_value: fontFamily,
},
{
type: "vizio_font_selector",
label: "Vizio TV Font Family",
key: "vizio_font_family",
initial_value: fontFamily,
},
...generateFontConfiguration(),
// text transform
{
type: "select",
label: "Text Transform",
key: "text_transform",
initial_value: "uppercase",
options: ["default", "uppercase", "lowercase", "capitalize"],
},
// number of lines
{
type: "number_input",
label: "number of lines",
key: "number_of_lines",
initial_value: 1,
...conditional_vertical_type,
},
];
const itemFields = [
// underline color
...createVariationFields({
prefix: "default",
type: "color_picker_rgba",
label: "Default underline color",
key: "underline_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "focused",
type: "color_picker_rgba",
label: "Focused underline color",
key: "underline_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: "rgba(254, 20, 72, 1)",
},
],
}),
...createVariationFields({
prefix: "selected",
type: "color_picker_rgba",
label: "Selected underline color",
key: "underline_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: "rgba(239, 239, 239, 1)",
},
],
}),
...createVariationFields({
prefix: "selected_focused",
type: "color_picker_rgba",
label: "Selected & Focused underline color",
key: "underline_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: "rgba(254, 20, 72, 1)",
},
],
}),
// underline thickness
...createVariationFields({
prefix: "",
label: "Underline Thickness",
key: "underline_thickness",
variants: [
{
initial_value: 0,
},
{
initial_value: 6,
},
],
}),
// underline corner radius
...createVariationFields({
prefix: "",
label: "Underline corner radius",
key: "underline_corner_radius",
variants: [
{
initial_value: 0,
},
{
initial_value: 3,
},
],
}),
// text bg color
{
type: "color_picker_rgba",
label: "Default Text Background color",
key: "default_text_background_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
{
type: "color_picker_rgba",
label: "Focused Text Background color",
key: "focused_text_background_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
{
type: "color_picker_rgba",
label: "Selected Text Background color",
key: "selected_text_background_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
{
type: "color_picker_rgba",
label: "Selected & Focused Text Background color",
key: "selected_focused_text_background_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
// text item border_thickness
{
type: "number_input",
label: "Text Item border thickness",
key: "text_border_thickness",
initial_value: 0,
...conditional_vertical_type,
},
// text item corner radius
{
type: "number_input",
label: "Text Item corner radius",
key: "text_corner_radius",
initial_value: 0,
...conditional_vertical_type,
},
// text border color
{
type: "color_picker_rgba",
label: "Default Text border color",
key: "default_text_border_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
{
type: "color_picker_rgba",
label: "Focused Text border color",
key: "focused_text_border_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
{
type: "color_picker_rgba",
label: "Selected Text border color",
key: "selected_text_border_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
{
type: "color_picker_rgba",
label: "Selected & Focused Text border color",
key: "selected_focused_text_border_color",
initial_value: TRANSPARENT,
...conditional_vertical_type,
},
// item margin
{
type: "number_input",
label: "Item Margin top",
key: "item_margin_top",
initial_value: 0,
},
{
type: "number_input",
label: "Item Margin Right",
key: "item_margin_right",
initial_value: 0,
},
{
type: "number_input",
label: "Item Margin Bottom",
key: "item_margin_bottom",
initial_value: 0,
},
{
type: "number_input",
label: "Item Margin Left",
key: "item_margin_left",
initial_value: 0,
},
// text item padding
{
type: "number_input",
label: "Text Item Padding Top",
key: "item_padding_top",
initial_value: 12,
...conditional_vertical_type,
},
{
type: "number_input",
label: "Text Item Padding Right",
key: "item_padding_right",
initial_value: 24,
...conditional_vertical_type,
},
{
type: "number_input",
label: "Text Item Padding Bottom",
key: "item_padding_bottom",
initial_value: 12,
...conditional_vertical_type,
},
{
type: "number_input",
label: "Text Item Padding Left",
key: "item_padding_left",
initial_value: 24,
...conditional_vertical_type,
},
// text padding
...createVariationFields({
prefix: "text",
type: "number_input",
label: "Text Padding Top",
key: "padding_top",
variants: [
{
initial_value: 0,
},
{
initial_value: 12,
},
],
}),
...createVariationFields({
prefix: "text",
type: "number_input",
label: "Text Padding Right",
key: "padding_right",
variants: [
{
initial_value: 0,
},
{
initial_value: 0,
},
],
}),
...createVariationFields({
prefix: "text",
type: "number_input",
label: "Text Padding Bottom",
key: "padding_bottom",
variants: [
{
initial_value: 0,
},
{
initial_value: 12,
},
],
}),
...createVariationFields({
prefix: "text",
type: "number_input",
label: "Text Padding Left",
key: "padding_left",
variants: [
{
initial_value: 0,
},
{
initial_value: 0,
},
],
}),
// item bg color
...createVariationFields({
prefix: "default",
type: "color_picker_rgba",
label: "Default Item background color",
key: "item_background_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "focused",
type: "color_picker_rgba",
label: "Focused Item background color",
key: "item_background_color",
variants: [
{
initial_value: "rgba(254, 20, 72, 1)",
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "selected",
type: "color_picker_rgba",
label: "Selected Item background color",
key: "item_background_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "selected_focused",
type: "color_picker_rgba",
label: "Selected & Focused Item background color",
key: "item_background_color",
variants: [
{
initial_value: "rgba(254, 20, 72, 1)",
},
{
initial_value: TRANSPARENT,
},
],
}),
// item border color
...createVariationFields({
prefix: "default",
type: "color_picker_rgba",
label: "Default Item border color",
key: "item_border_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "focused",
type: "color_picker_rgba",
label: "Focused Item border color",
key: "item_border_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "selected",
type: "color_picker_rgba",
label: "Selected Item border color",
key: "item_border_color",
variants: [
{
initial_value: "rgba(239, 239, 239, 0.5)",
},
{
initial_value: TRANSPARENT,
},
],
}),
...createVariationFields({
prefix: "selected_focused",
type: "color_picker_rgba",
label: "Selected & Focused Item border color",
key: "item_border_color",
variants: [
{
initial_value: TRANSPARENT,
},
{
initial_value: TRANSPARENT,
},
],
}),
// item border thickness
...createVariationFields({
prefix: "",
label: "Item Border Thickness",
key: "item_border_thickness",
variants: [
{
initial_value: 2,
},
{
initial_value: 0,
},
],
}),
// item corner radius
...createVariationFields({
prefix: "",
label: "Item Corner radius",
key: "item_corner_radius",
variants: [
{
initial_value: 8,
},
{
initial_value: 0,
},
],
}),
];
const stylesFields = [
fieldsGroup(
"Component Configuration",
"",
componentConfigurationFields,
false
),
fieldsGroup("Screen Picker Items", "", screenPickerItemsFields, false),
fieldsGroup("Asset", "", assetFields, false),
fieldsGroup("Title", "", titleFields, false),
fieldsGroup("Item", "", itemFields, false),
];
module.exports = stylesFields;