search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.19k stars 808 forks source link

A TypeScript error is produced on an attempt to apply a custom theme using a `ITheme` object with missing properties #8907

Closed JaneSjs closed 2 weeks ago

JaneSjs commented 2 weeks ago

T20166 - Error when trying to customize a theme https://surveyjs.answerdesk.io/internal/ticket/details/T20166

The following TS exception appears on an attempt to apply a custom theme for a survey.

ERROR in src/App.tsx:21:21
TS2345: Argument of type '{ cssVariables: { "--sjs-editorpanel-backcolor": string; "--sjs-editorpanel-cornerRadius": string; "--sjs-corner-radius": string; "--sjs-base-unit": string; "--sjs-shadow-small": string; "--sjs-shadow-inner": string; ... 84 more ...; "--sjs-header-backcolor": string; }; ... 5 more 
...; backgroundOpacity: number; }' is not assignable to parameter of type 'ITheme'.
  Types of property 'header' are incompatible.
    Type '{ inheritWidthFrom: string; textAreaWidth: number; titlePositionY: string; }' is missing the following properties from type 'IHeader': height, overlapEnabled, backgroundImage, backgroundImageOpacity, and 6 more.
    19 | function App() {
    20 |   const survey = new Model(surveyJson);
  > 21 |   survey.applyTheme(customTheme);
       |                     ^^^^^^^^^^^
    22 |   return <Survey model={survey} />;
    23 | }
    24 |
{
    "cssVariables": {
      "--sjs-editorpanel-backcolor": "rgba(255, 255, 255, 1)",
      "--sjs-editorpanel-cornerRadius": "20px",
      "--sjs-corner-radius": "4px",
      "--sjs-base-unit": "8px",
      "--sjs-shadow-small": "inset 0px 1px 4px 0px rgba(175, 172, 172, 0.15)",
      "--sjs-shadow-inner": "0px 0px 2px 1px rgba(1, 59, 71, 0.5)",
      "--sjs-border-default": "rgba(0, 0, 0, 0.16)",
      "--sjs-border-light": "rgba(0, 0, 0, 0.09)",
      "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
      "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
      "--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",
      "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
      "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
      "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
      "--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
      "--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
      "--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
      "--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
      "--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
      "--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
      "--sjs-shadow-small-reset": "inset 0px 0px 0px 0px rgba(175, 172, 172, 0.15)",
      "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
      "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
      "--sjs-shadow-inner-reset": "0px 0px 0px 0px rgba(1, 59, 71, 0.5)",
      "--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
      "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-special-green": "rgba(25, 179, 148, 1)",
      "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
      "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-special-blue": "rgba(67, 127, 217, 1)",
      "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
      "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
      "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
      "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-article-font-xx-large-textDecoration": "none",
      "--sjs-article-font-xx-large-fontWeight": "700",
      "--sjs-article-font-xx-large-fontStyle": "normal",
      "--sjs-article-font-xx-large-fontStretch": "normal",
      "--sjs-article-font-xx-large-letterSpacing": "0",
      "--sjs-article-font-xx-large-lineHeight": "64px",
      "--sjs-article-font-xx-large-paragraphIndent": "0px",
      "--sjs-article-font-xx-large-textCase": "none",
      "--sjs-article-font-x-large-textDecoration": "none",
      "--sjs-article-font-x-large-fontWeight": "700",
      "--sjs-article-font-x-large-fontStyle": "normal",
      "--sjs-article-font-x-large-fontStretch": "normal",
      "--sjs-article-font-x-large-letterSpacing": "0",
      "--sjs-article-font-x-large-lineHeight": "56px",
      "--sjs-article-font-x-large-paragraphIndent": "0px",
      "--sjs-article-font-x-large-textCase": "none",
      "--sjs-article-font-large-textDecoration": "none",
      "--sjs-article-font-large-fontWeight": "700",
      "--sjs-article-font-large-fontStyle": "normal",
      "--sjs-article-font-large-fontStretch": "normal",
      "--sjs-article-font-large-letterSpacing": "0",
      "--sjs-article-font-large-lineHeight": "40px",
      "--sjs-article-font-large-paragraphIndent": "0px",
      "--sjs-article-font-large-textCase": "none",
      "--sjs-article-font-medium-textDecoration": "none",
      "--sjs-article-font-medium-fontWeight": "700",
      "--sjs-article-font-medium-fontStyle": "normal",
      "--sjs-article-font-medium-fontStretch": "normal",
      "--sjs-article-font-medium-letterSpacing": "0",
      "--sjs-article-font-medium-lineHeight": "32px",
      "--sjs-article-font-medium-paragraphIndent": "0px",
      "--sjs-article-font-medium-textCase": "none",
      "--sjs-article-font-default-textDecoration": "none",
      "--sjs-article-font-default-fontWeight": "400",
      "--sjs-article-font-default-fontStyle": "normal",
      "--sjs-article-font-default-fontStretch": "normal",
      "--sjs-article-font-default-letterSpacing": "0",
      "--sjs-article-font-default-lineHeight": "28px",
      "--sjs-article-font-default-paragraphIndent": "0px",
      "--sjs-article-font-default-textCase": "none",
      "--sjs-general-backcolor-dim": "rgba(255, 255, 255, 1)",
      "--sjs-primary-backcolor": "rgba(5, 50, 91, 1)",
      "--sjs-primary-backcolor-dark": "rgba(4, 42, 76, 1)",
      "--sjs-primary-backcolor-light": "rgba(5, 50, 91, 0.1)",
      "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
      "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
      "--sjs-special-red": "rgba(0, 0, 0, 1)",
      "--sjs-special-red-light": "rgba(255, 155, 157, 1)",
      "--sjs-font-surveytitle-family": "Georgia, serif",
      "--sjs-font-surveytitle-weight": "600",
      "--sjs-font-surveytitle-size": "50px",
      "--sjs-font-headertitle-weight": "400",
      "--sjs-font-headertitle-size": "50px",
      "--sjs-font-headertitle-color": "rgba(240, 239, 239, 1)",
      "--sjs-header-backcolor": "#05325B"
    },
    "header": {
      "inheritWidthFrom": "survey",
      "textAreaWidth": 1200,
      "titlePositionY": "middle"
    },
    "headerView": "advanced",
    "isPanelless": true,
    "themeName": "default",
    "colorPalette": "light",
    "backgroundOpacity": 1
  }

image

tsv2013 commented 2 weeks ago

I've made all ITheme properties optionsl