klee-contrib / focus-components Goto Github PK

Version 2. A set of web components based on material design to build modern interfaces easily. New version 3 is available

Home Page: https://github.com/get-focus

License: MIT License

CSS 18.17% JavaScript 81.10% HTML 0.73%

focus-components's Introduction

focus-components

Components for focus application.

Components

Sources

All the source code is in src.

component spec

Component example structure, with all the directories ans sub directories.

index.js : the component entry point.
style: the style of the component should be written in sass.
assets: all the components assets
example: a example directory for your component, should have an index.html file. (see build section for more informations).
__tests__ : components unit tests

Build

First install the dependencies npm install, in case of any problem with a proxy or with node-gyp have a look at this gist
npm run build to trigger the complete build
npm run build:browser to trigger only the build for the browser

Component catalog

In order to build the catalog, your component must be describe under the components node in the package.json file.

"components": [
    {
      "name": "componentName",
      "path": "componentPath"
    }
  ]

When your component has been added to this list, it will automatically be deployed as a single component and testable through the url: http://localhost:3000 using the static-server.js file. You can launch the examples with the command npm run example.

Unit test

In order to launch unit test: npm run test

CSS

FlexBox/

Lint

npm run lint in order to see your errors.

Browser testing done with Browserstack

focus-components's People

Stargazers

Watchers

focus-components's Issues

[field][valueBehaviourMixin]

/**
  * Get the value from the field.
  */
  getValue: function getValue() {
    return this.refs.input.getValue();
  },

Get an error Uncaught TypeError: Cannot read property 'getValue' of undefined

[component][detail] Null anchor on stickyNavigation

All the title on the stickynavigation component are set to "#null".

[component][search][summary] List summaray (number of results, scope, export link)

[focus-components][table] add new component table

Create a table component in order to display a list with a header.

Override of onChange props

All the onChange props are overriden by Focus. We can't use it. Here's the modification I did on the select component:

     */
    select: function renderSelect() {
        if (this.props.FieldComponent || this.props.InputLabelComponent) {
            return this.renderFieldComponent();
        }
        var selectClassName = `form-control`;
        return (
            <div className ={`input-group ${this._getContentGridClassName()}`}>
                <this.props.SelectComponent
                    style={{class: selectClassName}}
                    id={this.props.name}
                   name={this.props.name}
                    value={this.state.value}
                    values={this.state.values}
                    type={this.props.type}
                    onChange={this.props.onChange  || this.onInputChange}
                    ref="input"
                />
            </div>
        );
    },

[button] Label hard coded

For instance :

buttonEdit: function buttonEdit() {
    var form = this;
    return React.createElement(Button, {
      label: "edit",
      type: "button",
      css: "edit",
      handleOnClick: function handleOnClickEdit() {
        form.setState({ isEdit: !form.state.isEdit });
      }
    });
  }

[detail] Add a global save and validate method

Use _getEntity and call each ref in the detail view.
https://github.com/KleeGroup/focus-components/blob/master/common/form/index.js#L1

[component][common][topic-diplayer] Display a list of topics wich can be unselected

[focus-components][checkbox] display boolean values as chackbox in view mode

Boolean values should be displayed as checkbox instead of label "true"/"false" in view mode.

[build] Creation of the build file.

The build should include:

es6
recat
sass
image-optim

[list][action-bar] Action bar

Content of the action bar

[form] save action behaviour

In common/form/mixin/action-behaviour.js

=> Construct json from form's refs

 _getEntity: function formGetEntity(){
    if(this.getEntity){
      return this.getEntity();
    }
    //Build the entity value from the ref getVaue.
    var htmlData = {};
    for(var r in this.refs){
      //todo @pierr see if this is sufficient.
      if(this.refs[r] && isFunction(this.refs[r].getValue)){
          var key = r;
          if(this.definitionPath) {
              key = key.replace(this.definitionPath + '.', '');
          }
          htmlData[key] = this.refs[r].getValue();
      }
    }
    return assign({}, this.state, htmlData);
  },

Before:

{
  "package.entity.property": value
}

After:

{
  "property": value
}

[component][search] live-filter

This component will be use to filter results after a search.

{
"filters": {
      "filter1": {
        "label": "filterKey",
        "value": "value"
      }
  } 
}

scope
search input
help

 validateInput: function validateInputText() {
    var value = this.getValue();
    if (this.props.isRequired && (value === undefined || value === "")) {
      return this.i18n("field.required", { name: this.i18n(this.props.label) });
    }
    if (this.props.validator) {
      return this.props.validator(value);
    }
    return true;
  },

with

 validateInput: function validateInputText() {
    var value = this.getValue();
    if (this.props.isRequired && (value === undefined || value === "")) {
      return this.i18n("field.required", { name: this.i18n(this.props.label) });
    }
    if (this.props.validator) {
      return this.props.validator(value);
    }
    return true;
  },