@applicaster/zapp-react-native-utils 13.0.0-alpha.1909212433 → 13.0.0-alpha.1952415373

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -1,875 +0,0 @@
-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 (Beta)", 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;