npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@smartface/styling-context

v5.1.7

Published

Smartface Styling Context

Downloads

20

Readme

Twitter: @Smartface_io License: MIT npm version

Contxjs

Styling

You may want to take a look at styler documentation to have a better understanding of how Context works.

Context Management

Each context encapsulates some behaviors and applies theme to decorated components which are came from outside of the context using Context's actors and reducers.

Contx/Smartface/pageContext

PageContext creates stylable Smartface pages and components so that we can manipulate them using style-objects and selectors. Smartface UI-Editor Transpiler connects Pages and PageContext. To add components dynamically in runtime, (For instance there might be images that should be created after an api call) PageContext's actions must be used.

Contx/Smartface/pageContext API

FlexLayout::children: object

When PageContext is initialized for the first time then it creates component view-tree recursively using FlexLayout's children property.

Component::dispatch(action:object)

To manipulate Context's states and behaviors, explicitly defined or custom actions must be used so that Context's reducers are triggered.

Contx/Smartface/
  • Action::type = addChild Adds specified component and their children to the PageContext and applies styles by class-name selectors.

    • Action::name: string - Component's name is to use like an unique id. It must be unique only in it's belonging layout.
    • Action::component: object - Component instance to be added to context.
    • Action::classNames: string - Class-name of component.
    • Action::userStyle: object - Initial style of component. (User properties)
  • Action.type => changeUserStyle : Overwrites component userStyle.

    • Action::userStyle:object
    • :warning: This will change component's current user-style (User properties).
    • myButton.dispatch({
          type: "changeUserStyle",
          userStyle: {
              backgroundColor: "#AABBCC"
          }
      });
    • myButton.dispatch({
          type: "changeUserStyle",
          userStyle: (style) => {
              style.backgroundColor = "#AABBCC";
              return style;
          }
      });
  • Action.type => updateUserStyle : Updates component userStyle.

    • Action::userStyle:object
    • myButton.dispatch({
          type: "updateUserStyle",
          userStyle: {
              backgroundColor: "#AABBCC"
          }
      });
  • Action.type => removeChild : Removes target component and it's children from context.

    • :warning: This won't remove target component from layout.
    • myLayout.dispatch({
          type: "removeChild"
      });
  • Action.type => removeChildren : Removes target component's children from context.

    • :warning: This won't remove target component's children from layout.
    • myLayout.dispatch({
          type: "removeChildren"
      });
  • Action.type => pushClassNames : Pushes new className selectors to the target component.

    • Action::classNames:string for one classname
    • Action::classNames:Array for multiple classnames
    • :warning: This action won't work if target component has the class name to be added.
    • myButton.dispatch({
          type: "pushClassNames",
          classNames: [".foo", ".bar"]
      });
    • myButton.dispatch({
          type: "pushClassNames",
          classNames: ".foo"
      });
  • Action.type => removeClassName : Removes className selector from specified component.

    • Action::className:string for one classname
    • Action::className:Array for multiple classnames
    • myButton.dispatch({
          type: "removeClassName",
          className: [".foo", ".bar"]
      });
    • myButton.dispatch({
          type: "removeClassName",
          className: ".foo"
      });
  • Action.type => invalidate : Forces to update Context's actors and applies styles if they are changed.

    • myButton.dispatch({
          type: "invalidate"
      });
  • Action.type => updateContext : Adds new components to Context or removes ones that doesn't exist in the updated FlexLayout::children.

FlexLayout::addChild(childComponent:*, ?contextName: string, ?className: string, ?userStyle:StyleObject=null)

Adds specified component to target layout and if contextName is specified then dispatches addPageContextChild action to the Context.

  • var myButton = new Button();
    page.layout.addChild(myButton, "myButton", ".button", {
      width: 250,
      height: 250
    });

or

  • page.layout.addChild(myButton, "myButton", ".button", function(userProps) {
      userProps.width = 250;
      userProps.height = 250;
      return userProps;
    });
FlexLayout::removeChild(childComponent:object)

Removes specified component from target layout then dispatches removeChild action to the Context.

  • // myButton component will be removed from both context and page layout
    page.layout.removeChild(myButton);
FlexLayout::removeAll()

Removes target component's children then dispatches removeChildren action to the Context.

  • // Children of page will be removed from both context and page layout
    page.layout.removeAll();

Life-Cycle Events

Component::componentDidLeave

When a component is removed from the Context and if the component has componentDidLeave method then it's triggered.

Component::componentDidEnter(dispatch:function)

When a component initialized in the Context and if the component has componentDidEnter method and then it's triggered by passing it's dispatch method. If not, dispatch method will be assigned to component directly.

Component::onError(error:Error)

If an error occcurs while an operation is being performed for a component, for example assignment of new properties, and the component has onError method then the error is passed to onError method of the component. If not and then the context throws the error.

Change theme without app reload

It is possible to change the current theme without the need to reload.

import Application from "@smartface/native/application");
// Seamlessly switch between themes
Application.theme()({ type: "changeTheme", theme: "yourThemeName" });

Connecting components to context

Component instances created via code are not connected to the context. Therefore they don't have dispatch method for updating user styles & classes. In order to prevent that, components must be connected to the context manually. Please see the following example.

const componentContextPatch = require("@smartface/contx/lib/smartface/componentContextPatch");

let dialog = new Dialog();
let flWait = new FlWait(); // A library component
componentContextPatch(dialog, `dialog`); // Connect component to context
dialog.layout.addChild(flWait, `flWait`, ".flWait"); // Child components are connected autmatically
dialog.layout.applyLayout();
dialog.show();

Warning

Attributes

Some properties are called attributes. Context does not handle attribute properties.

If you want to set an attribute, just set it directly like below:

button.text = "Text";