appbaseio / reactivebase Goto Github PK
View Code? Open in Web Editor NEWData components for building reactive UIs
License: Apache License 2.0
Data components for building reactive UIs
License: Apache License 2.0
multiSelect
which defaults to true for switch between multiple select and single select modes.title-true
and title-false
to rbc-title-active
and rbc-title-inactive
.rbc-multiselect-active
and rbc-multiselect-inactive
.Showing sort options in the UI for ResultList
component. We support three options:
appbaseField
prop)appbaseField
prop)Scrolling ResultList component causes the outer page to scroll as well, an undesirable behavior.
Component rename from ResultList
to ReactiveList
. Similarly, PaginatedResultList
will be renamed to PaginatedReactiveList
.
Depending on the placeholder state (whether present or absent), apply rbc-placeholder-active
and rbc-placeholder-inactive
classes.
Applicable components:
A NestedList
component can be useful for displaying a hierarchy of elements.
Example of a Nested List from material-ui.com:
sensorInputId
prop and its related codebase.Replace res.mode from stream
to streaming
.
Look into Elastic docs for a possible workaround.
Implement a DatePicker
component.
RangeSlider
's histogram query / UI freezes when the total range is in few thousands. Ideally, the range should be able to vary up to several hundreds of thousands without freezing.
We can replace sensorId
prop with either id
or componentId
.
Benefits from doing so:
We should apply stable sort before stringifying the objects for a comparison for finding differences.
Implement a DateRangePicker
component.
The current query is passed as a prop called actuate
in the actuator components. It takes in the sensor along with the operator and customQuery spec.
We will revamp the data query format to be sensor specific. Each sensor defines its own query format via the customQuery
and executeQuery
props.
Example Usage:
<SingleList
..
customQuery={this.customQuery}
executeQuery={true}
/>
customQuery
is an optional prop for overriding the default query that the component comes with. It takes a function with one argument value
that contains the sensor's current input state.
executeQuery
is a boolean prop that is set by default to true
. When set to false
, the query is not executed when the sensor value updates.
In the actuator component, we will have a react
prop which takes a dependency Object
of all the sensors it depends on.
The dependency object is formed by boolean clauses: and
, or
, not
as key values which can either have component(s) or a nested boolean clause as their value.
Example#1:
react={{
"and": "citySensor"
}}
Example#2:
react={{
"and": ["citySensor", "searchSensor"]
}}
Example#3:
react={{
"and": {
"or": "geoBoundsSensor",
"and": "citySensor"
}
}}
Example#4:
react={{
"or": {
"and": ["citySensor", "dataSensor"],
"not": "searchSensor"
}
}}
In theory, we can allow any level of nesting using conjunctions. This tree when parsed, should match cleanly to the boolean query in Elasticsearch Query DSL except the filter clause.
multipleSelect
propincludeSelectAll
propdefaultQuery
propsortBy
prop should accept only one of ("count", "asc", "desc") string values.size
prop validation: should accept numeric values between [1, 1000].defaultSelected
prop should be validated as an Array.showCount
prop to false should disable count from view.Typical use-case: Scroll to top (body / ResultList) when page is changed
When multiple options are selected, ButtonGroup composes them under a must
query, i.e. intersecting all the options. It should instead be using a should
clause under the parent must clause that combines different sensor conditions.
A query from reactivemaps example with the meetupblast dataset.
{
"query":{
"bool":{
"should":[
{
"bool":{
"must":[
{
"Term":{
"group.group_city.raw":"San Francisco"
}
},
[
{
"range":{
"guests":{
"gte":0,
"lte":2,
"boost":2
}
}
},
{
"range":{
"guests":{
"gte":2,
"lte":4,
"boost":2
}
}
},
{
"range":{
"guests":{
"gte":4,
"lte":6,
"boost":2
}
}
}
]
]
}
}
],
"minimum_should_match":1
}
},
"size":100,
"from":0
}
Now that we have had a good set of changes in the props for individual components, we should make all the props available in the playground story for each component.
from
prop to be a Number >= 0.size
prop to be a Number >= 1.sortBy
prop to only accept either asc
or desc
values.stream
is true, use css class rbc-stream-active
. When false, use class rbc-stream-inactive
.sortOptions
prop is enabled, a rbc-sortoptions-active
class will be set. When not, a rbc-sortoptions-inactive
class will be set.This is something we have talked once, but it makes sense for keeping a consistent CSS styles API as well as applying theming effects on.
onData
function inside a div with a rbc-list-item
class.Without user having to define onData
prop, the lib should display the results in the order of relevance.
Replace this line in all stories:
import { ReactiveBase, DatePicker, ResultList } from '../app.js';
with a npm package. Additionally, we can configure the npm package in a way that dev branch uses the dev
branch of github for the source and master branch uses the master
branch of github.
rbc-reactiveelement
rbc-title-active / rbc-title-inactive
rbc-placeholder-active / rbc-placeholder-inactive
Compatible with light
and dark
themes.
selectAllLabel
prop. When selecting all, all the list items should be checkbox selected.rbc-count-active
. When set to false, show rbc-count-inactive
in the top level element.searchPlaceholder
prop with placeholder
.size
> 5, replace the individual filter labels with a Clear All
filter label.size
prop to accept values in the range [0, 1000].sortBy
prop to accept one of ("count", "asc", "desc") values.size
and sortBy
props should re-render the component in storybook's playground.A NumberBox UI widget is useful for travel search experience websites like Kayak, as well as in an e-commerce setting for deciding quantities of an item in the cart.
componentId String
id of the component, referenced inside an actuator query.
appbaseField String
sets the DB field to be mapped with the UI component view.
title String
[optional]
sets the title of the the component.
data Object
sets the label
and associated start
and end
values.
labelPosition String
[optional]
sets the label position, available options are "left", "right", "top", "bottom". Defaults to "left".
defaultSelected Number
[optional]
sets the initial value of the NumberBox. Defaults to the start
value in the data object.
State Classes
rbc-title-active
/ rbc-title-inactive
depending on if the title
prop is set.rbc-label-left
/ rbc-label-top
/ rbc-label-bottom
/ rbc-label-right
depending on the labelPosition
prop's value.The component will use a term query behind the scenes to do an exact match on the selected value.
size
prop should be validated to be between [1, 1000].searchPlaceholder
prop with placeholder
.sortBy
prop should be validated to be one of ("asc", "desc", "count") string values.showCount
prop should work.size
and sortBy
props should re-render the component in storybook playground mode.rbc-count-active
. When set to false, show rbc-count-inactive
in the top level element.depends
prop can be replaced with actuate
. What we are really saying here is that an actuator component's view should update when any of the underlying sensor component changes their state(s).
Benefits I see:
actuate
is a fresh word with the right meaning and it also helps that it relates to the word actuator
.ResultList shows list items with an infinite scroll. PaginatedResultList
can allow showing items by page and can have additional props related to page properties.
SingleList
, MultiList
and NestedList
components.size
prop should be validated to be between [1, 1000].sortBy
prop should be validated to be one of ("asc", "desc", "count") string values.showCount
prop should work.placeholder
prop should be implemented similar to MultiDropdownList
component.size
and sortBy
props should re-render the component in storybook playground mode.rbc-count-active
. When set to false, show rbc-count-inactive
in the top level element.selectAllLabel
prop. When selecting all, all the list items should be checkbox selected.rbc-count-active
. When set to false, show rbc-count-inactive
in the top level element.searchPlaceholder
prop with placeholder
.size
prop to accept values in the range [0, 1000].sortBy
prop to accept one of ("count", "asc", "desc") values.size
and sortBy
props should re-render the component in storybook's playground.startThreshold
, endThreshold
with a threshold
object.threshold
prop should be validated for accepting only numeric values in it's start and end keys, and end >= start.Components to implement this in:
prop name should be selectAllLabel
.
Additionally, in MultiList and MultiDropdownList, the "Select All" option should generate tags and / or checkboxes (where applicable) for all the list items.
The tag logic should replace tags if # tags > 5 with a "Clear All" tag instead.
sortOptions
prop. When it is enabled, a rbc-sortoptions-active
class will be set. When not, a rbc-sortoptions-inactive
class will be set.requestOnScroll
prop should not be exposed to the user. It should be set to false internally.componentStyle
prop should be added for adding styles to the top-level component element.from
prop validation: should be a Number
>= 0.size
prop validation: should be Number
>= 1.title
prop.depends
prop.autocomplete
prop which decides whether autocomplete is applied, defaults to true
.appbaseField
should take either a String or an Object Array of valid fields (order not relevant).<DataSearch
appbaseField={["field 1", "field 2", .. , "field n"]}
... />
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.