{"ScriptPreparationCode":"const NS = \u0022dhx\u0022\r\n\r\nconst BUTTON = \u0060${NS}_button\u0060\r\nconst BUTTON_DANGER = \u0060${NS}_button--color_danger\u0060\r\nconst BUTTON_SECONDARY = \u0060${NS}_button--color_secondary\u0060\r\nconst BUTTON_PRIMARY = \u0060${NS}_button--color_primary\u0060\r\nconst BUTTON_SUCCESS = \u0060${NS}_button--color_success\u0060\r\nconst BUTTON_SMALL = \u0060${NS}_button--size_small\u0060\r\nconst BUTTON_MEDIUM = \u0060${NS}_button--size_medium\u0060\r\nconst BUTTON_FLAT = \u0060${NS}_button--view_flat\u0060\r\nconst BUTTON_LINK = \u0060${NS}_button--view_link\u0060\r\nconst BUTTON_FULL = \u0060${NS}_button--width_full\u0060\r\nconst BUTTON_CIRCLE = \u0060${NS}_button--circle\u0060\r\nconst BUTTON_LOADING = \u0060${NS}_button--loading\u0060\r\nconst BUTTON_ICON = \u0060${NS}_button--icon\u0060\r\n\r\nfunction custom(props) {\r\n let css = \u0060${BUTTON} \u0060\r\n\r\n switch (props.color) {\r\n case \u0022danger\u0022:\r\n css \u002B= BUTTON_DANGER;\r\n break\r\n case \u0022secondary\u0022:\r\n css \u002B= BUTTON_SECONDARY;\r\n break\r\n case \u0022primary\u0022:\r\n css \u002B= BUTTON_PRIMARY;\r\n break\r\n case \u0022success\u0022:\r\n css \u002B= BUTTON_SUCCESS;\r\n break\r\n }\r\n css \u002B= \u0022 \u0022\r\n\r\n if (props.size === \u0022small\u0022) {\r\n css \u002B= BUTTON_SMALL\r\n } else {\r\n css \u002B= BUTTON_MEDIUM\r\n }\r\n css \u002B= \u0022 \u0022\r\n\r\n if (props.view === \u0022flat\u0022) {\r\n css \u002B= BUTTON_FLAT\r\n } else {\r\n css \u002B= BUTTON_LINK\r\n }\r\n css \u002B= \u0022 \u0022\r\n\r\n if (props.full) css \u002B= \u0060 ${BUTTON_FULL}\u0060\r\n if (props.circle) css \u002B= \u0060 ${BUTTON_CIRCLE}\u0060\r\n if (props.loading) css \u002B= \u0060 ${BUTTON_LOADING}\u0060\r\n if (props.icon) css \u002B= \u0060 ${BUTTON_ICON}\u0060\r\n\r\n return css;\r\n}\r\n\r\nfunction native(props) {\r\n const colorsCss = {\r\n danger: \u0022 dhx_button--color_danger\u0022,\r\n secondary: \u0022 dhx_button--color_secondary\u0022,\r\n primary: \u0022 dhx_button--color_primary\u0022,\r\n success: \u0022 dhx_button--color_success\u0022,\r\n } [props.color] || \u0022 dhx_button--color_primary\u0022\r\n\r\n const sizeCss = {\r\n small: \u0022 dhx_button--size_small\u0022,\r\n medium: \u0022 dhx_button--size_medium\u0022,\r\n } [props.size] || \u0022 dhx_button--size_medium\u0022\r\n\r\n const viewCss = {\r\n flat: \u0022 dhx_button--view_flat\u0022,\r\n link: \u0022 dhx_button--view_link\u0022,\r\n } [props.view] || \u0022 dhx_button--view_flat\u0022\r\n\r\n const fullCss = props.full ? \u0022 dhx_button--width_full\u0022 : \u0022\u0022\r\n const circleCss = props.circle ? \u0022 dhx_button--circle\u0022 : \u0022\u0022\r\n const loadingCss = props.loading ? \u0022 dhx_button--loading\u0022 : \u0022\u0022\r\n const iconViewCss = props.icon \u0026\u0026 !props.text ? \u0022 dhx_button--icon\u0022 : \u0022\u0022\r\n\r\n return \u0060dhx_button${colorsCss}${sizeCss}${viewCss}${fullCss}${circleCss}${loadingCss}${iconViewCss}\u0060\r\n}","TestCases":[{"Name":"custom","Code":"const cls = custom({color: \u0022danger\u0022})","IsDeferred":false},{"Name":"native","Code":"const cls = native({color: \u0022danger\u0022})","IsDeferred":false}]}