Commits (57)
REACT_APP_DECORATORS = true;
REACT_APP_BABEL_STAGE_0 = true;
REACT_APP_SASS = true;
REACT_APP_LESS = true;
REACT_APP_STYLUS = true;
REACT_APP_CSS_MODULES = true;
REACT_APP_SASS_MODULES = true;
REACT_APP_STYLUS_MODULES = true;
REACT_APP_LESS_MODULES = true;
STORYBOOK_API_URL = http://swagger-packages-mock.vc1s.4ge.it/v1
STORYBOOK_SWAGGER_URL = http://swagger-packages-mock.vc1s.4ge.it/v1
STORYBOOK_API_URL = http://swagger-packages-mock.vc1s.4ge.it/v1
STORYBOOK_API_APP_URL = <API_APP_URL>
STORYBOOK_TOKEN = <TOKEN>
STORYBOOK_BOOKING_URL = <BOOKING_URL>
// load the default config generator.
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')
const { exec, execSync } = require('child_process')
const Dotenv = require('dotenv-webpack')
const path = require('path')
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env)
const { bail } = config
const { bail, plugins } = config
// add dotenv files
plugins.push(new Dotenv({ path: path.resolve('.env.local') }))
plugins.push(new Dotenv({ path: path.resolve('.env') }))
if (bail) {
execSync('yarn build', { stdio: [0, 1, 2] })
......
{
"lerna": "2.0.0",
"version": "1.36.0",
"version": "1.42.0",
"npmClient": "yarn",
"useWorkspaces": true
}
......@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.41.0"></a>
# [1.41.0](https://gitlab.com/4geit/react-packages/compare/v1.40.1...v1.41.0) (2017-09-22)
### Bug Fixes
* **broadcast-message-component:** changed layout and style, add props for label and text helper ([5a68457](https://gitlab.com/4geit/react-packages/commit/5a68457))
<a name="1.32.2"></a>
## [1.32.2](https://gitlab.com/4geit/react-packages/compare/v1.32.1...v1.32.2) (2017-09-18)
......
{
"name": "@4geit/rct-broadcast-message-component",
"version": "1.32.2",
"version": "1.41.0",
"description": "Broadcast message component to display an input zone for typing and sending messages",
"main": "dist/index.js",
"module": "dist/index.js",
......
......@@ -11,40 +11,46 @@ import compose from 'recompose/compose'
import classNames from 'classnames'
import TextField from 'material-ui/TextField'
import Card, { CardActions, CardContent } from 'material-ui/Card'
import Button from 'material-ui/Button';
import Button from 'material-ui/Button'
import Grid from 'material-ui/Grid'
import './rct-broadcast-message.component.css'
const styles = theme => ({
flexGrow: {
flex: '1 1 auto',
},
form: {
width: '100%'
}
})
// @inject('xyzStore')
@observer
class RctBroadcastMessageComponent extends Component {
render() {
const { classes } = this.props
const { classes, helper, label } = this.props
return (
<div>
<Card>
<CardContent>
<form>
<TextField
id="full-width"
label="Your message"
helperText="Send a message to all chatboxes !"
fullWidth
margin="normal"
/>
</form>
<Grid container align='center' justify='space-between'>
<Grid item xs='11'>
<form className={ classes.form }>
<TextField
label={ label }
helperText={ helper }
fullWidth
margin="normal"
/>
</form>
</Grid>
<Grid item xs='1'>
<Grid container justify='center'>
<Grid item>
<Button dense raised color="primary">Send</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</CardContent>
<CardActions>
<div className={classes.flexGrow} />
<Button dense color="primary">Send</Button>
<Button dense>Cancel</Button>
</CardActions>
</Card>
</div>
)
......@@ -54,6 +60,8 @@ class RctBroadcastMessageComponent extends Component {
RctBroadcastMessageComponent.propTypes = {
classes: PropTypes.object.isRequired,
width: PropTypes.string.isRequired,
helper: PropTypes.string,
label: PropTypes.string.isRequired,
// TBD
}
......
......@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.42.0"></a>
# [1.42.0](https://gitlab.com/4geit/react-packages/compare/v1.41.0...v1.42.0) (2017-09-22)
### Features
* **rct-chatbox-grid-component:** start integrating reorderable-grid-list-component ([9e4febd](https://gitlab.com/4geit/react-packages/commit/9e4febd))
<a name="1.36.0"></a>
# [1.36.0](https://gitlab.com/4geit/react-packages/compare/v1.35.0...v1.36.0) (2017-09-20)
......
{
"name": "@4geit/rct-chatbox-grid-component",
"version": "1.36.0",
"version": "1.42.0",
"description": "chatbox grid component",
"main": "dist/index.js",
"module": "dist/index.js",
......
......@@ -20,13 +20,41 @@ import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import './rct-chatbox-grid.component.css'
import RctReorderableGridListComponent, { ReorderableGridListTile } from '@4geit/rct-reorderable-grid-list-component'
const ItemComponent = props => (
<div>
<List>
<ListItem button dense={true}>
<ListItemText primary="Hello"/>
</ListItem>
<ListItem button dense={true}>
<ListItemText primary="How are you"/>
</ListItem>
</List>
<Grid container align="center" style={ {
height: '40px',
paddingLeft: '10px',
background: '#CCC7C5',
} } >
<Grid item xs>
<Typography align="left">Name</Typography>
</Grid>
<Grid item>
<IconButton>
<DeleteIcon color='#797777'/>
</IconButton>
<Switch
aria-label="checkedA"/>
</Grid>
</Grid>
</div>
)
const styles = theme => ({
typeContainer: {
height: '40px',
paddingLeft: '10px',
background: '#CCC7C5',
}
});
// TBD
})
@observer
@inject('chatboxGridStore')
class RctChatboxGridComponent extends Component {
......@@ -36,40 +64,19 @@ class RctChatboxGridComponent extends Component {
}
render() {
const { classes } = this.props
const { classes, chatboxGridStore } = this.props
const { typeContainer } = classes
const { data } = this.props.chatboxGridStore
const { data, fetchData, setPosition, sortedData } = chatboxGridStore
console.log(data)
return (
<GridList cellHeight={ 180 } className={classes.gridList} >
{data.map(item => (
<GridListTile key={ item.id }>
<List>
<ListItem button dense={true}>
<ListItemText primary="Hello"/>
</ListItem>
<ListItem button dense={true}>
<ListItemText primary="How are you"/>
</ListItem>
</List>
<Grid container align="center" classes={{
typeContainer
}}>
<Grid item xs>
<Typography align="left">{ item.name }
</Typography>
</Grid>
<Grid item>
<IconButton>
<DeleteIcon color='#797777'/>
</IconButton>
<Switch
aria-label="checkedA"/>
</Grid>
</Grid>
</GridListTile>
))}
</GridList>
<RctReorderableGridListComponent
cellHeight={ 180 }
className={ classes.gridList }
handleSetPosition={ setPosition.bind(chatboxGridStore) }
handleFetchData={ fetchData.bind(chatboxGridStore) }
data={ sortedData }
itemComponent={ <ItemComponent/> }
/>
)
}
}
......@@ -86,6 +93,7 @@ RctChatboxGridComponent.propTypes = {
RctChatboxGridComponent.defaultProps = {
listOperationId: 'userChatboxList',
addOperationId: 'addUserChatbox',
editOperationId: 'editUserChatbox',
deleteOperationId: 'deleteUserChatbox',
activateOperationId: 'activateUserChatbox',
unactivateOperationId: 'unactivateUserChatbox',
......
......@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.42.0"></a>
# [1.42.0](https://gitlab.com/4geit/react-packages/compare/v1.41.0...v1.42.0) (2017-09-22)
### Features
* **rct-chatbox-grid-component:** start integrating reorderable-grid-list-component ([9e4febd](https://gitlab.com/4geit/react-packages/commit/9e4febd))
<a name="1.36.0"></a>
# [1.36.0](https://gitlab.com/4geit/react-packages/compare/v1.35.0...v1.36.0) (2017-09-20)
......
{
"name": "@4geit/rct-chatbox-grid-store",
"version": "1.36.0",
"version": "1.42.0",
"description": "store for the chatbox-grid component",
"main": "dist/index.js",
"module": "dist/index.js",
......
import { observable, action, runInAction, toJS } from 'mobx'
import { observable, computed, action, runInAction, toJS } from 'mobx'
import { hashHistory } from 'react-router'
import swaggerClientStore from '@4geit/rct-swagger-client-store'
import notificationStore from '@4geit/rct-notification-store'
class RctChatboxGridStore {
@observable data = []
@computed get sortedData() {
return this.data.slice().sort((a, b) => a.position > b.position)
}
@observable inProgress = false
@action setData(value) {
this.data = value
}
@action async fetchData({ listOperationId, enabledColumns }) {
@action async fetchData({ listOperationId }) {
listOperationId = listOperationId || 'userChatboxList'
this.inProgress = true
try {
const { body } = await swaggerClientStore.client.apis.Account[listOperationId]()
......@@ -27,6 +32,24 @@ class RctChatboxGridStore {
})
}
}
@action async setPosition({ editOperationId }) {
editOperationId = editOperationId || 'editChatboxList'
this.inProgress = true
try {
const { body } = await swaggerClientStore.client.apis.Account[editOperationId]()
if (body.length) {
runInAction(() => {
this.setData( body )
this.inProgress = false
})
}
} catch (err) {
console.error(err)
runInAction(() => {
notificationStore.newMessage(err.message)
})
}
}
@action async addItem({ addOperationId, listOperationId }) {
this.inProgress = true
try {
......@@ -90,5 +113,4 @@ class RctChatboxGridStore {
}
}
export default new RctChatboxGridStore()
......@@ -3,6 +3,23 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.41.0"></a>
# [1.41.0](https://gitlab.com/4geit/react-packages/compare/v1.40.1...v1.41.0) (2017-09-22)
### Bug Fixes
* **Buttons:** Delete and checkbox buttons implementation ([d7e1f4b](https://gitlab.com/4geit/react-packages/commit/d7e1f4b))
* **fix:** code fix ([0d9dee2](https://gitlab.com/4geit/react-packages/commit/0d9dee2))
### Features
* **General Delete Button:** Add a checkbox next to each item of the data datle and a general delete ([ac47fce](https://gitlab.com/4geit/react-packages/commit/ac47fce))
<a name="1.35.0"></a>
# [1.35.0](https://gitlab.com/4geit/react-packages/compare/v1.34.4...v1.35.0) (2017-09-20)
......
{
"name": "@4geit/rct-data-table-component",
"version": "1.35.0",
"version": "1.41.0",
"description": "data table component for react apps",
"main": "dist/index.js",
"module": "dist/index.js",
......
......@@ -5,15 +5,18 @@ import { inject, observer } from 'mobx-react'
import './rct-data-table.component.css'
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table'
import Table, { TableBody, TableCell, TableHead, TableRow, TableSortLabel } from 'material-ui/Table'
import IconButton from 'material-ui/IconButton'
import DeleteIcon from 'material-ui-icons/Delete';
import ViewColumnIcon from 'material-ui-icons/ViewColumn'
import Menu, { MenuItem } from 'material-ui/Menu'
import { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'
import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'
import Switch from 'material-ui/Switch'
import Paper from 'material-ui/Paper'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import Checkbox from 'material-ui/Checkbox'
import FilterListIcon from 'material-ui-icons/FilterList'
@inject('dataTableStore')
@observer
......@@ -39,7 +42,8 @@ class RctDataTableComponent extends Component {
render() {
const { open, element, columns, enabledColumns, data } = this.props.dataTableStore
const { title } = this.props
const { title, ListItem } = this.props
if (!this.props.dataTableStore.data.length) {
return (
<Typography>Loading datatable...</Typography>
......@@ -59,6 +63,9 @@ class RctDataTableComponent extends Component {
>
<ViewColumnIcon/>
</IconButton>
<IconButton>
<DeleteIcon/>
</IconButton>
<Menu
id="columns-menu"
anchorEl={ element }
......@@ -81,18 +88,24 @@ class RctDataTableComponent extends Component {
<Table>
<TableHead>
<TableRow>
{ enabledColumns.map((item, index) => (
<TableCell key={ index }>{item.name}</TableCell>
)) }
<TableCell checkbox>
<Checkbox checked/>
</TableCell>
{ enabledColumns.map((item, index) => (
<TableCell key={ index }>{item.name}</TableCell>
)) }
</TableRow>
</TableHead>
<TableBody>
{ data.map(item => (
<TableRow hover key={ item.id } >
{ enabledColumns.map((column, colIndex) => (
<TableCell key={ colIndex } >{ item[column.name] }</TableCell>
)) }
</TableRow>
{ data.map(item => (
<TableRow hover key={ item.id } >
<TableCell checkbox>
<Checkbox checked/>
</TableCell>
{ enabledColumns.map((column, colIndex) => (
<TableCell key={ colIndex } >{ item[column.name]}</TableCell>
)) }
</TableRow>
)) }
</TableBody>
</Table>
......
# include /dist to `npm publish`
!/dist
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.39.4"></a>
## [1.39.4](https://gitlab.com/4geit/react-packages/compare/v1.39.3...v1.39.4) (2017-09-21)
**Note:** Version bump only for package @4geit/rct-date-picker-component
<a name="1.39.2"></a>
## [1.39.2](https://gitlab.com/4geit/react-packages/compare/v1.39.1...v1.39.2) (2017-09-21)
### Bug Fixes
* **date-picker:** fix proper use of action method of the store ([d90f3d2](https://gitlab.com/4geit/react-packages/commit/d90f3d2))
* **date-picker-component:** fix issue with observable assignment ([5ddf8f4](https://gitlab.com/4geit/react-packages/commit/5ddf8f4))
<a name="1.39.0"></a>
# [1.39.0](https://gitlab.com/4geit/react-packages/compare/v1.38.0...v1.39.0) (2017-09-21)
### Bug Fixes
* **date-picker-component:** remove button and add it to eventListComponent ([d474352](https://gitlab.com/4geit/react-packages/commit/d474352))
* **date-picker-container:** add state and search button ([203155f](https://gitlab.com/4geit/react-packages/commit/203155f))
* **minor:** minor ([0e2f966](https://gitlab.com/4geit/react-packages/commit/0e2f966))
### Features
* **date-picker-component:** add the single date picker component ([697c112](https://gitlab.com/4geit/react-packages/commit/697c112))
# @4geit/rct-date-picker-component [![npm version](//badge.fury.io/js/@4geit%2Frct-date-picker-component.svg)](//badge.fury.io/js/@4geit%2Frct-date-picker-component)
---
date picker component to use with eventListComponent
## Demo
A live storybook is available to see how the component looks like @ http://react-packages.ws3.4ge.it
## Installation
1. A recommended way to install ***@4geit/rct-date-picker-component*** is through [npm](//www.npmjs.com/search?q=@4geit/rct-date-picker-component) package manager using the following command:
```bash
npm i @4geit/rct-date-picker-component --save
```
Or use `yarn` using the following command:
```bash
yarn add @4geit/rct-date-picker-component
```
2. Depending on where you want to use the component you will need to import the class `RctDatePickerComponent` to your project JS file as follows:
```js
import RctDatePickerComponent from '@4geit/rct-date-picker-component'
```
For instance if you want to use this component in your `App.js` component, you can use the RctDatePickerComponent component in the JSX code as follows:
```js
import React from 'react'
// ...
import RctDatePickerComponent from '@4geit/rct-date-picker-component'
// ...
const App = () => (
<div className="App">
<RctDatePickerComponent/>
</div>
)
```