Giter Club home page Giter Club logo

deprecated-focus-components-v3's Introduction

focus-components

NPM

Build Status

Throughput Graph

Issue Stats Issue Stats Package Quality 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 Browserstack

deprecated-focus-components-v3's People

Contributors

bender-bending-bot avatar bernardstanislas avatar dimitrimockelyn avatar durandx avatar ephrame avatar fconstantin avatar gideruette avatar gitter-badger avatar gtantoine avatar guenolek avatar hartorn avatar hauwkins avatar jabx avatar jerom138 avatar joanadalmeida avatar johnnp avatar jrlk avatar mariusflorea avatar obtl avatar pierr avatar plepaisant avatar remigrange avatar rodolphev avatar sebez avatar sgoretti avatar skerdudou avatar tomgallon avatar tommass avatar

Stargazers

avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

tomgallon ephrame yangxin1994

deprecated-focus-components-v3's Issues

Liste déroulante coupée par le panel

Current behaviour

Le panel de focus componant coupe la liste déroulante :

image

Pour corriger, virer le overflow: hidden; dans :

.mdl-card__supporting-text {
    color: rgba(0,0,0, 0.54);
    font-size: 1rem;
    line-height: 18px;
    overflow: hidden;
    padding: 16px 16px;
    width: 90%;
}

Versions

Focus-components: [3.2.0]

[selectMdl] no refresh

Current behaviour

When the component receive newProps values, it doesn't update.

Expected behaviour

It will update.

[Select] Add default value management

Add the possibility to define a default value. We would like it to work with the following option table:

[{"id":"EGAL","code":"EGAL","label":"=","key":"EGAL","value":"=","isDefaultValue":false},
{"id":"INFERIEUR","code":"INFERIEUR","label":"<","key":"INFERIEUR","value":"<","isDefaultValue":false},
{"id":"SUPERIEUR","code":"SUPERIEUR","label":">","key":"SUPERIEUR","value":">","isDefaultValue":true}]

In this example, "SUPERIEUR" should be the default value.

[INPUT-TOGGLE] Doesn't have the expected behaviour

Current behaviour

When the toggle has a rawInputValue set from a store (by example usrStore.usr.isAsctive ==> true) the toggle doesn't display the good information. Switching between our users make the input change but never with the good behaviour.
Good to know, when we look at the data, this data is always good

Expected behaviour

To toggle true or false in a good way

Versions

focus4 : 1.5.8-preview1

[Autocomplete] Focus lost with IE when the code resolver is called

Current behaviour

With Internet Explorer, when I choose an option with the keyboard and push "Enter", I can't go to the next field by pushing "TAB" : it seems the focus is lost.
With Google Chrome, it's ok.

Expected behaviour

Could it work with IE ?

Versions

"focus-graph": "3.2.5"
"focus-components": "3.3.1"

[Button] To disable after the first click

Current behaviour

For the moment I can click various times on a button, and the onClick event is called at every click.
It can possibly create multiple instances of an object.

Expected behaviour

I want the button to be disabled at the first click until the action terminates.

Versions

Focus-graph: 3.0.0-beta20
Focus-components: 3.0.6

[Modal] To have a confirm message when I click outside the modal

Current behaviour

When I open a modal, the part of the screen which is not the modal is grey :

image

If I fill some fields and I click on the "grey part", the modal is closed without confirm message.

Expected behaviour

I'd like the possibility to have a confirm message when I click outside, to prevent the user from losing the fields he has already filled.

[select-mdl] hide and translate problem

[select-mdl] hide and translate problem

The options didn't hide when we click on it on a selectFor . @TomGallon has observed translations were missing on the list's options

Expected behaviour

Hide when you click on an option and have its translation

Versions

Focus-components: 3.0.0-rc47

[InputTextarea] Crash when typing

Current behaviour

When I type in an InputTextarea, a crash appears in componentDidUpdate, at the line :

this.refs.inputText.classList.remove('is-invalid');

Expected behaviour

this.refs.inputText is undefined, should it be replaced by this.refs.inputTextarea ?

Versions

Focus-graph: 3.0.0-beta5
Focus-components: 3.0.0-rc46

[Autocomplete-Text] Report Focus V2 changes

Current behaviour

The actual autocomplete-text doesn't have the debounce feature and the PropTypes on the consult is broken due to a bad call

Expected behaviour

It should have a debounce function which calls the server and it should have a custom timeout prop.

Versions

Focus-components: 3.0.0-rc41

[AutocompleteSelect] Call the querysearcher when the user clears the input

Current behaviour

On our project, we override the onFocus method of the autocomplete, to call the querySearcher as soon as the user clicks on the field and to display all the values.

The problem is that, when the user types then clears its input, the querysearcher is not called and the "old" list of values remains. He has to click somewhere else then click on the field to search all values.

The behaviour is here :

https://github.com/get-focus/focus-components/blob/develop/src/autocomplete-select/edit.js#L109

Expected behaviour

We'd like to customize this part of code, and handle freely the empty value ''.

[Modal] Double scroll

Hello,

The css fix that you gave me worked for Chrome, but the problem is still present in Internet Explorer : when I open a modal, I can still scroll down the form "under" the modal.

Header not expanded does not appear after F5

Current behaviour

If located at the middle or bottom of the page, and press F5, the not expanded header is not appearing.

image

Expected behaviour

The expected behaviour is to have the not expanded header appearing.

[If you judge it necessary, add a screenshot]
image

Explanation of the origine of the issue

You need while initialisation, to detected in which position of the page we are located, and based on this information, decide whether to show the expanded Header or the small Header,
So var isNotFixedOrExpanded = isFixed ? false : isExpanded; is not accurate since it doesn't care about the postion of the page.

Versions

Focus-core: v3
Focus-components: Header

[Input text area] Old value is back

Current behaviour

I open a modal with an input text area, I type text inside.
If I close the modal and I re-open it, the text is still inside, but in the store the rawInputValue and formattedInputValue are null.

Expected behaviour

I want the text to disappear when I close the modal.

[Modal] icon close visibility

Current behaviour

The current behaviour is that the closing icon is hidden in popin panel. which is due to it's position in the DOM.

image

Expected behaviour

The closing icon must appear.

image

[Autocomplete] Value truncated when the label contains ':'

Current behaviour

When a label contains ':', the option displayed in the autocomplete truncates the label and only the part after the ':' is displayed.

Example : I Have a "Zone géographique" named AVANT : APRES

image

On my autocomplete, only the text APRES is displayed

image

Expected behaviour

I want the complete label to be displayed.

[Menu]

Split the 2 menus.
And rewrite it to avoid useless rerendering (it now render itself each time)

Choix icon menu

Current behaviour

Pour l'instant on ne peut parametrer le type d'icon à afficher dans le cas où on a un tableau primary vide et un tableau secondary contenant au moins un élément.

Expected behaviour

Ca serait très utile si on arrive à renseigner le type des icon à afficher en renseignant un tableau secondary sans renseigner le tableau primary.

Versions

Focus-core: [version]
Focus-components: [version]

[Autocomplete-select] Resolve the value on blur

Current behaviour

For the moment, if the user types exactly the label of an option in the autocomplete, the value is resolved only with a click or a choice with key down.

Expected behaviour

It would be great if we could have a function onBlur in the component, in which the value is automatically resolved if the text typed is exactly the same as the only value in the list of options.

[Autocomplete] To have the possibility not to resolve the code

Current behaviour

For the moment, every time I choose an option in my autocomplete, the code is resolved and the label is displayed on my field.

autocomplete_evol

Expected behaviour

I'd like the possibility not to resolve the code on the field autocomplete (in my example, i'd like the code 0122 to stay).

"focus-components": "3.0.6"

[DatePicker] have min-max dates props to limit user range.

From @sgoretti on August 19, 2016 8:1

Current behaviour

User can select any date he wants.
Example:
In Linkit there are jobs with a start and end date. Inside these jobs a user can create a service, whose dates must be within the job. At the moment, the user can select any date he wants and when saving an error will display.

Expected behaviour

I want to be able to prevent dates from being selectes outside a range / afrter / before a given date.
Just as in captaintrain, when you select a departure date, your return date can't be before (and the departure date can't be before today).

Versions

Focus-core: 0.15.0
Focus-components: 0.15.0

Copied from original issue: klee-contrib/focus-components#1241

[Autcomplete-Select] Error on bad input is not correctly managed

Current behaviour

The error case in not correctly managed. In fact, focus-graph when the user enters a bad input

Expected behaviour

Focus-Graph to manage the error when the user enter a bad input from the application

[If you judge it necessary, add a screenshot]

[modal] Help request: hideBodyOverflow

On Diane, we have many list where clicking on a line open a modal. Currently, we control modal with, for each line:

{this.state.openPopin &&
  <EditionPopin
    onModalClose={this._onPopinClose.bind(this)}
    open
    type="from-right"
  >
    <PopinContent />
  </EditionPopin>
}

This way, all the popin don't surcharge the DOM.
The problem is that as togglePopin() is not use, _hideBodyOverflow() method is never called.
Can you help me with that?

[SnackBar] Center the snackbar

Current Behaviour

The Snackbar is not properly centered. It is the left border of the snackbar that is centered:
snackbarnotcentered

Expected behaviour

Center the SnackBar:
snackbarcentered

Analysis

By default, the mdl snackbar is centered thanks to: 'transform: translate(-50%,0);'.
But this translate is overridden by the class: animated slideInUp.
A solution would be to add a container within the mdl snackbar and give it the property: 'transform: translate(-50%,0);'.

[Menu] Close sub-menu on click on another menu button.

Current behaviour

When the sub-menu is open, and I click on another button in the menu, the sub-menu don't close.
It is okay if this second button open a sub-menu too. But it feels wrong if this second button is a route action.

submenuanimation

Expected behaviour

In this example, I expect the sub-menu to be closed when I click on the search icon.

Versions

Focus-core: 0.17.0-beta1
Focus-components: 3.0.0-rc22

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.