/**
* @typedef {Object} Font
* @property {number} weight Font weight
* @property {string} style Font style
* @property {string} ext Font extension
* @property {string} base64 Font value when in base64
*/
/**
* @typedef {Object} FontStyle
* @property {number} size Font size
* @property {string} family Font family
* @property {number} scale Font scale value
*/
/**
* @typedef {Object} Typography
* @property {FontStyle} bodyText
* @property {FontStyle} appHeaderTitle
* @property {FontStyle} appHeadings
* @property {FontStyle} appTabBar
* @property {FontStyle} appMenus
*/
/**
* React Native Style Object. Refer to: {@link https://reactnative.dev/docs/style}
* @typedef RNStyleValue
*/
/**
* @typedef {Function} CssToCssCallback
* @param {string} htmlContentCss
* @param {?Typography} typography
* @return {string}
*/
/**
* @typedef {Object} InputColors
* @property {string} inputPlaceholderColor
* @property {string} inputBorderColor
* @property {string} inputFocusBorderColor
* @property {string} inputIconColor
*/
/**
* @class
* Style Hooks.
* Instance name: cssApi
The hooks are used to modify various styling options for the app.
* @example
* externalCodeSetup.cssApi.METHOD_NAME
*/
export class CssApi {
newGlobalStyles = {};
customColors = {};
auth = {style: undefined};
inputColors = null;
/**
* Adds a new style into global style object.
* Note: styles with same names will be merged by `Object.assign`.
* @method
* @param {String} styleName Name/handle of style
* @param {RNStyleValue} style
* @param {Boolean} replace If `true`, original style will be replaced. Otherwise styleName: [oldStyle, newStyle] will be used
* @example
*
* //In custom_code/index.js
*
* ...
*
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.cssApi.addGlobalStyle("coursesNewStyle", {margin: 10}, false);
* }
*
* //The following below demonstrates how to use the newly added global style:
*
* //In custom_code/components/StyleComponent.js
*
* ...
*
* import { globalStyle } from "@src/styles/global";
*
* const StyleComponent = (props) => {
* const globalStyles = useSelector((state) => globalStyle(state.config.styles))
* const { colors, global } = globalStyles;
* return <Text style={global.coursesNewStyle}> Margin 10 </Text>
*
* }
*
* export default StyleComponent
*
*/
addGlobalStyle = (styleName, style, replace) => {
this.newGlobalStyles[styleName] = {
style,
replace
};
};
/**
* Adds a new color into a global colors object that is accessible in components through redux `store.config.styles.colors`.
* If an existing color name is used to add a new color (ex: successColor), this will overwrite the value of the existing color.
* @method
* @param {Object<String,String>} newCustomColors Object with new colors
* @example
* //In custom_code/index.js
*
* ...
*
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.cssApi.addCustomColors({"courseNewColor": "#800000"});
* }
*
* //The following below demonstrates how to use the newly added global style:
*
* //In custom_code/components/StyleComponent.js
*
* ...
*
* import { globalStyle } from "@src/styles/global";
*
* const StyleComponent = (props) => {
* const globalStyles = useSelector((state) => globalStyle(state.config.styles))
* const { colors, global } = globalStyles;
* return <Text style={{color: colors.courseNewColor}}> Margin 10 </Text>
*
* }
*
* export default StyleComponent
*/
addCustomColors = newCustomColors => {
this.customColors = newCustomColors;
};
/**
* @ignore Social login screen is not available in the app for now
* Allows changing of auth style in social login screen
* @method
* @param {String} style Allowed values: `dark-content` | `light-content`
*
*/
setAuthStyle = style => {
this.auth.style = style;
};
/**
*
* Override colors of certain input fields such as in quiz form, xProfile edit form, manage group details and manage group settings form.
* @method
* @param {InputColors} inputColors
* @example
* externalCodeSetup.cssApi.setInputColors({"inputPlaceholderColor": "red"})
*/
setInputColors = inputColors => {
this.inputColors = inputColors;
};
filterContentCss = (htmlContentCss, typography) => htmlContentCss;
/**
* Sets a callback function `filterContentCss` that is able to change the CSS that is used on post content WebViews. This will also give style to HTML Gutenberg blocks.
* Note: If Gutenberg is not in use, then app fallbacks to WebViews to show content
* @method
* @param {CssToCssCallback} filterContentCss
* @example
*
* externalCodeSetup.cssApi.setFilterContentCss((htmlContentCss, typography) =>
* (`
* body, p {
* font-family: "${typography.bodyText.family}";
* font-size: 100px;
* }
* `)
* );
*/
setFilterContentCss = filterContentCss => {
this.filterContentCss = filterContentCss;
};
}
Source