{"id":22474661,"url":"https://github.com/smartface/styling-context","last_synced_at":"2025-03-27T16:46:55.685Z","repository":{"id":43731162,"uuid":"438882388","full_name":"smartface/styling-context","owner":"smartface","description":"Smartface Styling Context","archived":false,"fork":false,"pushed_at":"2022-02-21T10:28:19.000Z","size":162,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-02T08:42:47.290Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smartface.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-16T06:23:01.000Z","updated_at":"2021-12-17T17:27:56.000Z","dependencies_parsed_at":"2022-09-05T14:10:28.425Z","dependency_job_id":null,"html_url":"https://github.com/smartface/styling-context","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartface%2Fstyling-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartface%2Fstyling-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartface%2Fstyling-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartface%2Fstyling-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smartface","download_url":"https://codeload.github.com/smartface/styling-context/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245888014,"owners_count":20688893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T13:09:39.414Z","updated_at":"2025-03-27T16:46:55.657Z","avatar_url":"https://github.com/smartface.png","language":"JavaScript","readme":"[![Twitter: @Smartface_io](https://img.shields.io/badge/contact-@Smartface_io-blue.svg?style=flat)](https://twitter.com/smartface_io)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/smartface/contxjs/blob/master/LICENSE)\n![npm version](https://img.shields.io/npm/v/@smartface/contx.svg?style=flat)\n\n# Contxjs\n\n## Styling\nYou may want to take a look at styler [documentation](https://github.com/smartface/styler/blob/master/README.md) \nto have a better understanding of how Context works.\n\n## Context Management\nEach context encapsulates some behaviors and applies theme to decorated components \nwhich are came from outside of the context using Context's actors and reducers.\n\n### Contx/Smartface/pageContext\nPageContext creates stylable Smartface pages and components so that we can manipulate \nthem using style-objects and selectors. Smartface UI-Editor Transpiler connects \nPages and PageContext. To add components dynamically in runtime, (For instance \nthere might be images that should be created after an api call) PageContext's \nactions must be used.\n\n#### Contx/Smartface/pageContext API\n##### FlexLayout::children: object\nWhen PageContext is initialized for the first time then it creates component \nview-tree recursively using FlexLayout's children property.\n\n##### Component::dispatch(action:object)\nTo manipulate Context's states and behaviors, explicitly defined or custom actions \nmust be used so that Context's reducers are triggered.\n\n##### Contx/Smartface/\n\n-  **Action::type = addChild**\nAdds specified component and their children to the PageContext and applies styles \nby class-name selectors.\n\t- *Action::name: string* - Component's name is to use like an unique id. It must be unique only in it's belonging layout.\n\t- *Action::component: object* - Component instance to be added to context.\n\t- *Action::classNames: string* - Class-name of component.\n\t- *Action::userStyle: object* - Initial style of component. (User properties)\n\n- **Action.type =\u003e changeUserStyle** : \nOverwrites component userStyle.\n\t- *Action::userStyle:object*\n\t- :warning: This will change component's current user-style (User properties).\n \t-   ```js\n        myButton.dispatch({\n            type: \"changeUserStyle\",\n            userStyle: {\n                backgroundColor: \"#AABBCC\"\n            }\n        });\n        ```\n    -   ```js\n        myButton.dispatch({\n            type: \"changeUserStyle\",\n            userStyle: (style) =\u003e {\n                style.backgroundColor = \"#AABBCC\";\n                return style;\n            }\n        });\n        ```\n\n- **Action.type =\u003e updateUserStyle** : \nUpdates component userStyle.\n\t- *Action::userStyle:object*\n\t-   ```js\n        myButton.dispatch({\n            type: \"updateUserStyle\",\n            userStyle: {\n                backgroundColor: \"#AABBCC\"\n            }\n        });\n        ```\n\n- **Action.type =\u003e removeChild** : \nRemoves target component and it's children from context.\n    - :warning: This won't remove target component from layout.\n\t-   ```js\n        myLayout.dispatch({\n            type: \"removeChild\"\n        });\n        ```\n\n- **Action.type =\u003e removeChildren** : \nRemoves target component's children from context.\n    - :warning: This won't remove target component's children from layout.\n\t-   ```js\n        myLayout.dispatch({\n            type: \"removeChildren\"\n        });\n        ```\n\n- **Action.type =\u003e pushClassNames** : \nPushes new className selectors to the target component.\n\t- *Action::classNames:string* for one classname\n\t- *Action::classNames:Array* for multiple classnames\n\t- :warning: This action won't work if target component has the class name to \n\tbe added.\n\t-   ```js\n        myButton.dispatch({\n            type: \"pushClassNames\",\n            classNames: [\".foo\", \".bar\"]\n        });\n        ```\n\t-   ```js\n        myButton.dispatch({\n            type: \"pushClassNames\",\n            classNames: \".foo\"\n        });\n        ```\n\n- **Action.type =\u003e removeClassName** :\nRemoves className selector from specified component.\n\t- *Action::className:string* for one classname\n\t- *Action::className:Array* for multiple classnames\n\t-   ```js\n        myButton.dispatch({\n            type: \"removeClassName\",\n            className: [\".foo\", \".bar\"]\n        });\n        ```\n\t-   ```js\n        myButton.dispatch({\n            type: \"removeClassName\",\n            className: \".foo\"\n        });\n        ```\n\n- **Action.type =\u003e invalidate** : \nForces to update Context's actors and applies styles if they are changed.\n\t-   ```js\n        myButton.dispatch({\n            type: \"invalidate\"\n        });\n        ```\n\n- **Action.type =\u003e updateContext** : \nAdds new components to Context or removes ones that doesn't exist in the updated FlexLayout::children.\n\n##### FlexLayout::addChild(childComponent:*, ?contextName: string, ?className: string, ?userStyle:StyleObject=null)\n\nAdds specified component to target layout and if contextName is specified then \ndispatches addPageContextChild action to the Context.\n-   ```js\n    var myButton = new Button();\n    page.layout.addChild(myButton, \"myButton\", \".button\", {\n      width: 250,\n      height: 250\n    });\n    ```\nor\n-   ```js\n    page.layout.addChild(myButton, \"myButton\", \".button\", function(userProps) {\n      userProps.width = 250;\n      userProps.height = 250;\n      return userProps;\n    });\n    ```\n\n#####  FlexLayout::removeChild(childComponent:object)\n\nRemoves specified component from target layout then dispatches removeChild action \nto the Context.\n\n-   ```js\n    // myButton component will be removed from both context and page layout\n    page.layout.removeChild(myButton);\n    ```\n\n##### FlexLayout::removeAll()\n\nRemoves target component's children then dispatches removeChildren action to \nthe Context.\n\n-   ```js\n    // Children of page will be removed from both context and page layout\n    page.layout.removeAll();\n    ```\n\n#### Life-Cycle Events\n\n##### Component::componentDidLeave\n\nWhen a component is removed from the Context and if the component has componentDidLeave \nmethod then it's triggered.\n\n##### Component::componentDidEnter(dispatch:function)\n\nWhen a component initialized in the Context and if the component has componentDidEnter \nmethod and then it's triggered by passing it's dispatch method. If not, dispatch \nmethod will be assigned to component directly.\n\n##### Component::onError(error:Error)\n\nIf an error occcurs while an operation is being performed for a component, for \nexample assignment of new properties, and the component has onError method then \nthe error is passed to onError method of the component. If not and then the \ncontext throws the error.\n\n### Change theme without app reload\n\nIt is possible to change the current theme without the need to reload.\n\n```js\nimport Application from \"@smartface/native/application\");\n// Seamlessly switch between themes\nApplication.theme()({ type: \"changeTheme\", theme: \"yourThemeName\" });\n```\n\n### Connecting components to context\n\nComponent instances created via code are not connected to the context. Therefore they don't have dispatch method for updating user styles \u0026 classes. In order to prevent that, components must be connected to the context manually. Please see the following example.\n\n```js\nconst componentContextPatch = require(\"@smartface/contx/lib/smartface/componentContextPatch\");\n\nlet dialog = new Dialog();\nlet flWait = new FlWait(); // A library component\ncomponentContextPatch(dialog, `dialog`); // Connect component to context\ndialog.layout.addChild(flWait, `flWait`, \".flWait\"); // Child components are connected autmatically\ndialog.layout.applyLayout();\ndialog.show();\n```\n\n### Warning\n\n##### Attributes\n\nSome properties are called [attributes](https://github.com/smartface/contxjs/blob/master/attributes.md).\nContext **does not** handle attribute properties.\n\nIf you want to set an attribute, just set it directly like below:\n\n```js\nbutton.text = \"Text\";\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmartface%2Fstyling-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmartface%2Fstyling-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmartface%2Fstyling-context/lists"}