@applicaster/zapp-react-native-utils 13.0.0-alpha.4097222141 → 13.0.0-alpha.4118873321

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -0,0 +1,875 @@
+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_type_item_dynamic,
+  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_item_dynamic,
+  },
+  {
+    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;