@up-group-ui/react-controls
Version:
Up shared react controls
1,457 lines (898 loc) • 29.3 kB
Markdown
# ReactControls (version: 2.17.36)
## Main Changes
-UpMenu : Replaced the up-logo-square with new logo up coop.
# ReactControls (version: 2.17.33)
## Main Changes
-icons: Added new svg icons:
-handshake_2.svg
-user_2.svg,
-coins.svg
-house_2.svg
-gift_2.svg
-storefront.svg
# ReactControls (version: 2.17.32)
## Main Changes
- UpSvgIcon: fix - moving svg to illustrations (click-transfer-item.svg)
-
# ReactControls (version: 2.17.31)
## Main Changes
- UpSvgIcon: adding new illustrations (click-transfer-item.svg)
# ReactControls (version: 2.17.29)
## Main Changes
- UpMenu: enablme to change menu icon
# ReactControls (version: 2.17.25)
## Main Changes
- UpMenu: Fix minified icons
- Icons: Adds download icon
# ReactControls (version: 2.17.24)
## Main Changes
- UpMenu: Fix hover effect
# ReactControls (version: 2.17.23)
## Main Changes
- UpMenu: Fix depth 2 submenu
# ReactControls (version: 2.17.21)
## Main Changes
- UpSvgIcon: update illustrations (click-select-item.svg & click-sheet-file.svg)
# ReactControls (version: 2.17.20)
## Main Changes
- add autocomplete attribute UpNumber
# ReactControls (version: 2.17.19)
## Main Changes
- UpSvgIcon: Add Mentor-happy svgIcon
# ReactControls (version: 2.17.18)
## Main Changes
- UpSvgIcon: update illustrations (click-select-item.svg & click-sheet-file.svg)
# ReactControls (version: 2.17.17)
## Main Changes
- Fix Updatagrid selection all
- code refactoring && cleaning code
# ReactControls (version: 2.17.16)
## Main Changes
- UpSvgIcon : Fix ugly default tooltip
- UpSvgIcon : Allow to set title on svg to enjoy tooltip
# ReactControls (version: 2.17.14)
## Main Changes
- add some icons
# ReactControls (version: 0.2.182)
# ReactControls (version: 0.2.187)
# ReactControls (version: 0.2.224
# ReactControls (version: 0.2.233)
## Bug Fixes
- UpButton : Fix hover
# ReactControls (version: 0.2.232)
## Main Changes
- Collapsable : Fix export component
# ReactControls (version: 0.2.231)
## Main Changes
- UpDataGrid : Fixes hovered button styles
# ReactControls (version: 0.2.230)
## Main Changes
- UpDataGrid : Fixes nested style of button for background color prop
# ReactControls (version: 0.2.229)
## Main Changes
- UpDataGrid : allow users to override the actions background colors
# ReactControls (version: 0.2.228)
## Main Changes
- UpTagsSelect : allow or disallow multiple selection
# ReactControls (version: 0.2.227)
## Main Changes
- Hooks : moves the useTheme hook to its right folder
- Tags : Fixes the styles of the tags with an outline instead of a border
# ReactControls (version: 0.2.226)
## Main Changes
- Collapsable : Add the collapsable component
- TagsSelect : Allow default selection of the component
# ReactControls (version: 0.2.225)
## Main Changes
- UpTagsSelect : Add tags select component
# ReactControls (version: 0.2.224)
## Main Changes
- UpSelect : Add tags display style
# ReactControls (version: 0.2.223)
## Main Changes
- UpButton : remove border-bottom dotted
# ReactControls (version: 0.2.222)
## Main Changes
- UpSelect : clean code (remove console.log)
# ReactControls (version: 0.2.221)
## Main Changes
- UpCurrency : Change the default colors
# ReactControls (version: 0.2.220)
## Bug Fixes
- UpCurrency : Fix nefative value display and colors props
## Main Changes
- UpDataGrid : Change the way to handle selection on multi pages
# ReactControls (version: 0.2.216)
## Bug Fixes
- DataGrid: Notify when the row change.
# ReactControls (version: 0.2.215)
## Refacto
- DataGrid: Add check on action.rows to see if it's a function or a promise.
# ReactControls (version: 0.2.214)
## Bug Fixes
- UpSelect: Clean code and remove verification on { ...this.state.extra }
# ReactControls (version: 0.2.213)
## Bug Fixes
- UpSelect: Clean code
# ReactControls (version: 0.2.188)
## Bug Fixes
- UpPagination: Remove focus color on steps
# ReactControls (version: 0.2.187)
## Bug Fixes
- UpPagination: Remove focus color on steps
# ReactControls (version: 0.2.186)
## Bug Fixes
- UpButon: Tooltip based on css
# ReactControls (version: 0.2.185)
## Bug Fixes
- UpSelect : Fix select value to reset inputValue
# ReactControls (version: 0.2.184)
## Bug Fixes
- UpSelect : Fix input when clearing the value
# ReactControls (version: 0.2.183)
## Bug Fixes
- UpDataGrid : Fix selected data
# ReactControls (version: 0.2.182)
## Bug Fixes
- UpButton : Quick fix for tooltip
- UpNavTab : refacto code
# ReactControls (version: 0.2.181)
## Bug Fixes
- UpDataGrid : Add iconName property in Action defintion
# ReactControls (version: 0.2.177)
## Bug Fixes
- UpDataGrid : Fix all selected rows handling
# ReactControls (version: 0.2.176)
## Main Changes
- Object-assign: fix import module
# ReactControls (version: 0.2.175)
## Main Changes
- UpIcon: add NFC off icon
# ReactControls (version: 2.17.12)
## Main Changes
- UpIcon: add NFC off icon
# ReactControls (version: 2.17.11)
## Main Changes
- UpDataGrid: isFromProps parameter for onSelectionChange event
# ReactControls (version: 2.17.10)
## Main Changes
- UpDataGrid: add for onSelectionChange allRows (data) as parameter
# ReactControls (version: 2.17.8)
## Main Changes
- UpDataGrid: fix reset allRowSelected when changing page
# ReactControls (version: 2.17.7)
## Main Changes
- UpGrid: fix Warning: React does not recognize the `rowSpacing` prop on a DOM element
- useSafeState: memoise the new safeSetState returned function
# ReactControls (version: 2.17.5)
## Main Changes
- UpDataGrid: add preslection feature for UpDataGrid component
the data model must match the following pattern **Array<{isSelected: boolean, value: any}>**
# ReactControls (version: 2.17.0)
## Main Changes
- upgrading react 16 to 17
## Main Changes
- UpIcon : Add new icon 'file-edit' | 'user-circle' | 'safe'
# ReactControls (version: 0.2.171)
## Main Changes
- UpIcon : Add icons circle-check and circle-play
# ReactControls (version: 0.2.169)
## Main Changes
- UpIcon : Add new icon 'file-edit' | 'user-circle' | 'safe'
# ReactControls (version: 0.2.168)
## Bug Fixes
- UpDate : fix date clear when value is controlled
- UpDataGrid : clean code
# ReactControls (version: 0.2.167)
## Bug Fixes
- UpDate : fix date clear
- UpDataGrid : fix promise on row action handling
# ReactControls (version: 0.2.166)
## Main Changes
- UpDropfile : add customizable error message
# ReactControls (version: 0.2.165)
## Bugs Fixes
- UpDataGrid : Fix strategy selection
# ReactControls (version: 0.2.164)
## Bugs Fixes
- UpDate : fix reset input value in case of invalid date onBlur
# ReactControls (version: 0.2.162)
## Bugs Fixes
- UpSelect : fix option selection
# ReactControls (version: 0.2.161)
## Main Changes
- UpInput : fix hide clear icon idf input is readonly
# ReactControls (version: 0.2.160)
## Main Changes
- UpDatagrid : unselect row during pagination if the checkbox "All rows" is unchecked
# ReactControls (version: 0.2.159)
## Main Changes
- UpDatagrid : allow to clear the selection by the caller
# ReactControls (version: 0.2.158)
## Main Changes
- UpSelect : fix disable click on label if the component is disabled o readOnly
# ReactControls (version: 0.2.157)
## Main Changes
- UpDataGrid : fix delay tooltip
- Improve responsivity
# ReactControls (version: 0.2.156)
## Main Changes
- UpDate and UpSelect fix sizing
- UpSelect : Make the label not clickable if readOnly is true
- UpInput : Enable to pass a className
- Improve responsivity of UpDataGrid and UpMenu
- UpDataGrid : Fix arrow order
- UpNumber : Enable to define the decimal separator
# ReactControls (version: 0.2.155)
## Main Changes
- Update cookies consent manager
# ReactControls (version: 0.2.151)
## Bugs Fixes
- UpTooltip : fix re-render
- UpInput : fix clear action
# ReactControls (version: 0.2.148)
## Main Changes
- UpCurrency : update behaviour adding animation and style props
# ReactControls (version: 0.2.147)
## Bug Fixes
- UpDate : Fix uncontrolled value
# ReactControls (version: 0.2.145)
## Main Changes
- UpSvgIcon : Add profile3 | group2 | padlock icons
# ReactControls (version: 0.2.140)
## Main Changes
- UpSvgIcon : Add nfc icon
# ReactControls (version: 0.2.137)
## Bug Fixes
- UpSelect : Remove the transparent background when hovering selected option, to prevent a text below from appearing
# ReactControls (version: 0.2.136)
## Main Changes
- Add new component UpCookiesConsent
## Bug Fixes
- UpDataGrid : Fix auto-hide menu af action if none checkbox selected
# ReactControls (version: 0.2.135)
## Main Changes
- UpSvgIcon : Add new illustrations :
"search-glass",
"card-orange-add",
"card-orange-trans"
- UpSvgIcon : Add new mentors :
"sorry-orange"
# ReactControls (version: 0.2.134)
## Main Changes
- UpDataPanel : Add props to define custom class on column
# ReactControls (version: 0.2.133)
## Bug Fixes
- UpDataGrid : Fix selected row after fetching data
# ReactControls (version: 0.2.132)
## Main Changes
- UpModal : Fix testable component props
# ReactControls (version: 0.2.131)
## Main Changes
- UpSvgIcon : Add warning icon
# ReactControls (version: 0.2.130)
## Main Changes
- UpDataGrid : Change status of select all in case only one row can be selected
# ReactControls (version: 0.2.129)
## Main Changes
- UpDataGrid : Change the behaviour for the mode only one row selectable
- Storybook : Upgrade to 6.1.17
# ReactControls (version: 0.2.127)
## Bug Fixes
- UpSelect : Fix No text message
# ReactControls (version: 0.2.126)
## Main Changes
- UpText : Add max xharacters handling.
# ReactControls (version: 0.2.125)
## Bug Fixes
- UpMenu : onClick on sub menu items
# ReactControls (version: 0.2.124)
## Bug Fixes
- UpMenu : onClick throws error if no children
# ReactControls (version: 0.2.123)
## Bug Fixes
- UpToast : Fix IntentType import
# ReactControls (version: 0.2.122)
## Main Changes
- UpNavTab : Reduce selected item sizing
# ReactControls (version: 0.2.121)
## Bug Fixes
- UpSelect : Fix returnType id in multiple case
# ReactControls (version: 0.2.120)
## Bug Fixes
- UpVerticalTimeLine : Fix checkmark alignment
# ReactControls (version: 0.2.119)
## Bug Fixes
- UpDate : Fix height
# ReactControls (version: 0.2.118)
## Main Changes
- UpDataGrid : allow to select only one row
# ReactControls (version: 0.2.116)
## Bug Fixes
- UpDataGrid : Fix row clickable
# ReactControls (version: 0.2.113)
## Main Changes
- UpEntityView : Add new component for displaying data
- UpVerticalTimeLine : Add new component for displaying vertical timeline
# ReactControls (version: 0.2.112)
## Main Changes
- UpDataGrid : Allow select text even if row clickable
# ReactControls (version: 0.2.111)
## Main Changes
- UpMenu : display menu if minified and have children
# ReactControls (version: 0.2.110)
## Main Changes
- UpDataGrid : onSelection change now return also all selected data
# ReactControls (version: 0.2.109)
## Bug Fixes
- UpDataGrid : Fix enabling group action
# ReactControls (version: 0.2.108)
## Main Changes
- UpDataGrid : Fix UpRow enable full width layout
# ReactControls (version: 0.2.107)
## Bug Fixes
- UpDataGrid : Fix selected data on group action
# ReactControls (version: 0.2.106)
## Main Changes
- UpDate : add more denied characters
## Bug Fixes
- UpDropFile : Fix reset error notification on change
# ReactControls (version: 0.2.105)
## Bug Fixes
- UpDropFile : Reset error notification on change
# ReactControls (version: 0.2.104)
## Main Changes
- UpDate : only allow valid characters
# ReactControls (version: 0.2.103)
## Bug Fixes
- SvgIcon : add icons eye-open2 file3 and invoice
# ReactControls (version: 0.2.102)
## Bug Fixes
- UpDataGrid : Fix Select all through pages
# ReactControls (version: 0.2.101)
## Bug Fixes
- UpDataGrid : Fix selection through pages and align checkbox
# ReactControls (version: 0.2.100)
## Main Changes
- UpDataPanelItem : Not show column if field is null or undefined
# ReactControls (version: 0.2.98)
## Main Changes
- UpModal : Add prop to center the modal
# ReactControls (version: 0.2.94)
## Bug Fixes
- UpDataGrid : Fix handling action cells
# ReactControls (version: 0.2.93)
## Main Changes
- UpDataGrid : Manage selection multi-page
# ReactControls (version: 0.2.92)
## Main Changes
- UpDate : Allow to set full width
## Bug Fixes
- UpDate : Compare only date without time
# ReactControls (version: 0.2.91)
## Main Changes
- UpNumber : fix min and max handling
# ReactControls (version: 0.2.90)
## Main Changes
- UpNavTab : Add selected tab props
## Bug Fixes
- UpTooltip : fix hover behaviour
# ReactControls (version: 0.2.89)
## Main Changes
- UpDate : Add date outside range check props
# ReactControls (version: 0.2.88)
## Main Changes
- Input : Increase floating label size
# ReactControls (version: 0.2.87)
## Bug Fixes
- UpNumber : fix button design to increase/decrease value
# ReactControls (version: 0.2.86)
## Bug Fixes
- UpDate : isOutsideRange
# ReactControls (version: 0.2.85)
## Main Changes
- UpMenu : Add CustomStyles props
# ReactControls (version: 0.2.84)
## Bug Fixes
- UpDataGrid : Fix getRowAction
# ReactControls (version: 0.2.83)
## Main Changes
- UpSvgIcon : Add new SVG icon
# ReactControls (version: 0.2.82)
## Main Changes
- UpSvgIcon : Add new SVG icon
# ReactControls (version: 0.2.81)
## Main Changes
- UpDataGrid : Add text-align left props
# ReactControls (version: 0.2.80)
## Main Changes
- Add auto read action bound to the row if none onClick specified and only one action defined
# ReactControls (version: 0.2.79)
## Main Changes
- Add new props to UpRadio in order to provide better rendering of options
# ReactControls (version: 0.2.78)
## Bugs Fixes
- Fix default props for UpBox
# ReactControls (version: 0.2.77)
## Bugs Fixes
- Fix removed prop className on UpPanel
# ReactControls (version: 0.2.76)
## Bugs Fixes
- Fix alignement UpDate in form
# ReactControls (version: 0.2.75)
## Main Changes
- Upgrade to storybook 6
# ReactControls (version: 0.2.74)
## Main Changes
- UpCalendar : upgrade to FullCalendar 5.3.x
# ReactControls (version: 0.2.73)
## Main Changes
- UpCalendar : clean code and exports
# ReactControls (version: 0.2.72)
## Main Changes
- UpCalendar : improve design and add tooltip props
# ReactControls (version: 0.2.71)
## Bug Fixes
- UpDataGrid : fix error when action null
# ReactControls (version: 0.2.70)
## Main Changes
- Improve UpContextMenu closing behaviour
- Add className props to UpCalendar mapped to the viewClassName property of Fullcalendar
# ReactControls (version: 0.2.69)
## Main Changes
- Add isVisble and getProps on row action of an UpDataGrid
# ReactControls (version: 0.2.68)
## Bug Fixes
- Fix null action in a UpDataGridRow
# ReactControls (version: 0.2.67)
## Main changes
- Clean UpToast and UpNotification
- Add readonly on UpCheckbox
- Add documentation on UpToast
- Add arrow back icon
# ReactControls (version: 0.2.66)
## Main changes
- Enable to pass JSX element as title of an UpDataGrid
# ReactControls (version: 0.2.65)
## Bug Fixes
- Fix values for UpDataPanel
# ReactControls (version: 0.2.64)
## Main changes
- Change Header and CloseIcon position for UpModal
# ReactControls (version: 0.2.64)
## Bug Fixes
- Fix null theme in UpLigne
# ReactControls (version: 0.2.63)
## Bug Fixes
- Fix UpModal showing
# ReactControls (version: 0.2.62)
## Main Changes
- Improve UpTooltip closing behaviour
# ReactControls (version: 0.2.61)
## Main Changes
- Enable action factory on UpDataGrid
# ReactControls (version: 0.2.60)
## Main Changes
- Enable to render icon in UpMenu
# ReactControls (version: 0.2.59)
## Bug Fixes
- Avoid UpModal to appear during mount
- Allow to close modal on outside click
- Fix readonly on UpRadio, UpDate and UpText
# ReactControls (version: 0.2.58)
## Main Changes
- Fix title handling for UpDataPanel
# ReactControls (version: 0.2.57)
## Main Changes
- Add get formatter pros on UpDataPanel
# ReactControls (version: 0.2.56)
## Main Changes
- Fix close button on UpModal
# ReactControls (version: 0.2.55)
## Main Changes
- Add new UpModal display mode
# ReactControls (version: 0.2.54)
## Main Cha
- Fix form fields alignment
- Add stories for complex form layout
- Fix margin bottom for DataGrid
# ReactControls (version: 0.2.53)
## Main Changes
- Add placeholder to Textarea
# ReactControls (version: 0.2.52)
## Main Changes
- Improve UI tooltip display
- Improve UpButton borderless display mode
# ReactControls (version: 0.2.51)
## Bug Fixes
- Fix tabindex on RadioButton
# ReactControls (version: 0.2.50)
## Main Changes
- Add UpButton borderless prop
# ReactControls (version: 0.2.49)
## Main Changes
- Upgrade Fullcalendar to v5
# ReactControls (version: 0.2.48)
## Main Changes
- Add tabIndex on all "Input"
# ReactControls (version: 0.2.46)
## Main Changes
- Add component UpDataPanel
# ReactControls (version: 0.2.45)
## Main Changes
UpDataGrid CellFormatter
- Add getter props for cell formatter
# ReactControls (version: 0.2.44)
## Main Changes
UpDataGrid
- Add props for tooltip for Header
# ReactControls (version: 0.2.43)
## Bug Fixes
UpSelect
- fix min height in multiselect mode
# ReactControls (version: 0.2.42)
## Bug Fixes
UpText
- fix style conflict with UpInput
# ReactControls (version: 0.2.41)
## Main changes
UpText
- set full border
# ReactControls (version: 0.2.40)
## Main changes
UpNavTab
- add onSelectedTabChanged handler
# ReactControls (version: 0.2.37)
## Main changes
Improve UpIcon stories
- enable to change color and size
# ReactControls (version: 0.2.36)
## Bug Fixes
Fix setting value in case of using mode returntype "id" UpSelect
# ReactControls (version: 0.2.35)
## Bug Fixes
Fix props autoload for UpSelect
# ReactControls (version: 0.2.33)
## Bug Fixes
Fix props passed to UpPhone and UpEmail
# ReactControls (version: 0.2.32)
## Bug Fixes
Fix UpRadio background color when display as button
# ReactControls (version: 0.2.31)
## Bug Fixes
Fix UpRadio layout in display mode button
# ReactControls (version: 0.2.30)
## Bug Fixes
Fix ok-sign icon
# ReactControls (version: 0.2.29)
## Main changes
Export custom hooks :
- useMountedRef : keep mount and unmount reference
- useSafeState : avoid setState after unmount
- useHoverIntent : enable mouse enter and leave logic
# ReactControls (version: 0.2.28)
## Main changes
Add props onClick, onMouseEnter and onMouseLeave for UpBadge
# React-Controls (version: 0.2.26)
## Bug Fixes
Clean UpBadge
# React-Controls (version: 0.2.25)
## Bug Fixes
Fix svg icon notification
# React-Controls (version: 0.2.24)
## Bug Fixes
Fix icon color when UpButon is disabled
# React-Controls (version: 0.2.23)
## Main changes
- Add new component UpPicture
# React-Controls (version: 0.2.22)
## Bug Fixes
- Fix floating label prop on UpNumber
## Main changes
- Add new prop to UpDataGrid in order to customize the style of a row
# React-Controls (version: 0.2.21)
## Main changes
- Add new prop to UpDataGrid in order to customize the style of a row
# React-Controls (version: 0.2.20)
## Main changes
- Add new prop to UpNotification to define the duration of the animation
# React-Controls (version: 0.2.19)
## Main changes
- Add new props disabled to UpCheckbox
## Bug Fixes
- Fix icon position for UpPaswword with floating label
- In case of using the floating label, the select get now the focus when click on the label
# React-Controls (version: 0.2.16)
## Main changes
- Add floating label to UpSelect
- Improve animation UpNavTab
## Bug Fixes
- Validation phone number of UpPhone
# React-Controls (version: 0.2.13)
## Main changes
- UpCarousel
- Add new props className to UpButton
## UpCarousel
Add new component built with framer in order to dipslay a carousel layout
### General usage
```
<div className={wrapperBoxesStyle}>
<UpCarousel items={["#22cc88", "#ffcc00", "#0099ff", "#ff0055"].map(color => ({key: color, title: 'Title', color}))} />
</div>
```
### With render item
```
<div className={wrapperBoxesStyle}>
<UpCarousel renderItem={(isOpen, item) => {
return <div style={{display: 'flex', height : '100%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-between'}}>
<em style={{ fontWeight : isOpen ? 700 : 500}}>{item.title}</em>
<UpButton intent={'secondary'} className={style({$nest : {'& .up-btn' : {
border: '0 !important', color : 'white !important', background: 'transparent'
}
}})} onClick={(e) => item.action(item) }>...</UpButton>
</div>
}} items={["#22cc88", "#ffcc00", "#0099ff", "#ff0055"].map(color => (
{ key: color,
action: (item) => new Promise((resolve, reject) => resolve(console.log(item))),
title: 'Title',
color}))
} />
</div>
```
# React-Controls (version: 0.2.0)
## Background Info
We are working on a new version of react-controls
## Main changes
- UpPassword
- UpInput
- UpNotification
- UpButton (style update when dropDown === 'down')
- UpTogglen (style update)
- UpDate (style update)
- UpDataGrid
- UpCheckbox (style update)
- UpLoadingIndicator (style update)
## Components
- UpPassword new props :
- `rules?:array` array of objects with the text and and a regex expression
```
const rules = [
{ text: 'Au moins 8 caractères', regex: /^.{8,}$/ },
{ text: 'Au moins une majuscule', regex: /.*[A-Z]/ },
{ text: 'Au moins une minuscule', regex: /.*[a-z]/ },
{ text: 'Au moins 1 chiffre', regex: /.*[0-9].*/ }
]
const rulesAreValid = rulesMatch(value,rules) // function impoted from utils
<UpPassword
value={value}
onChange={(e, v) => setValue(v)}
showPasswordOnClick={false}
rules={rules}
onFocus={(e)=>{
setFocused(true)
setTouched(true)
}}
onBlur={(e)=> setFocused(false)}
focused={focused}
showError={touched && !rulesAreValid}
hasError={touched && !rulesAreValid}
touched={touched}
/>
```
- UpInput new props :
- `hasClearOption ?:boolean` a bolean to show a an icon to clear the input value
- `onClear?:function` fuction to clear the input value if you use the input as a controlledInput
```
const ControlledSeacrhInput = props => {
const [value,setValue] = React.useState('')
const [isLoading,setIsLoading] = React.useState(false);
return (
<UpInput
type='search'
value={value}
onChange={(event,value)=>{
setIsLoading(true)
setValue(value)
setTimeout(() => {
setIsLoading(false)
}, 2000);
}}
onClear={()=>setValue('')}
placeholder='placeholder ...'
iconPosition={'left'}
hasClearOption
isLoading={isLoading}
/>
)
}
```
- UpNotification new props :
- `duration?:number `the duration in seconds of the notification before it disappear
- `withCancelIcon?:boolean` a boolean to add the possibility to cancel a notification
```
<UpNotification
intent="success"
duration={6}
withCancelIcon={boolean('showCancelIcon',true)}
>
<p>Votre opération a été enregistré avec succès !</p>
</UpNotification>
```
- UpDataGrid new props :
- `displayRowActionsWithinCell?:boolean` a bolean to diplay the actions in the first cell
- `rowActions?:array` array of actions (it replaces the `actions` props in the previous version)
- `footerProps?:objectOf` :
- `isPaginationEnabled?:boolean` a props to display the pagination in the footer
- `actionsButtonText?:string` the text of the button that group all the actions
- `actionsDataGrid?:objectOf`:
- `label:string`: label of the validation button
- `intent?:string`: intent of the validation button
- `actions?:ArrayOf`:
- `action:ObjectOf`:
- `label:string`: label of the selected action
- `actionType:string`: the actionType of the selected action
- `onClick:function`: a function that takes an array of the selected rows and return a promise
- `headerProps?:objectOf`:
- `title:?string` : title of the DataGrid
- `buttons:?ReactElement`: it could be anything you want to diplay on the right of the header
```
<UpDataGrid
dataSource={{
query: "https://jsonplaceholder.typicode.com/posts"
}}
displayRowActionsWithinCell={true}
isSelectionEnabled={true}
onSelectionChange={(a, b) => {
console.log(a, b);
}}
className={style({
$nest: {
"&.up-data-grid-container .up-pagination-nav li a": {
border: 0,
fontSize: "10pt"
},
"&.up-data-grid-container .up-pagination-result-message": {
border: 0,
color: "black",
fontSize: "10pt"
},
"& .up-pagination-takes": {
display: "none"
},
"& .up-pagination-page a": {
textDecoration: "underline",
color: "black",
minWidth: "auto",
padding: "4px"
},
"& .up-pagination-page:hover a, & .up-pagination-page.active:hover a, & .up-pagination-page:hover span": {
background: "transparent",
color: UpDefaultTheme.colorMap.primary
},
"& .up-pagination-page.disabled a": {
textDecoration: "none"
},
"& .up-pagination-page.disabled:hover a, & .up-pagination-page.disabled:hover span": {
color: UpDefaultTheme.colorMap.disabledFg
},
"& .up-pagination-page.active a": {
background: "transparent",
color: UpDefaultTheme.colorMap.primary
},
"& .up-row-flex": {
textAlign: "end",
flexDirection: "row-reverse"
}
}
})}
paginationProps={{
paginationNavigationSeparator: "...",
previousLabel: "Précédent",
nextLabel: "Suivant",
renderResultMessage: (
theme: UpThemeInterface,
from: number,
to: number,
total: number
) => (
<span
className={classnames(
"up-pagination-result-message",
paginationCounterStyle({ theme })
)}
>
{total == 0 && <span>Aucun résultat</span>}
{total != 0 && (
<span>
<span>Résultat(s) </span>
<span>{from}</span>
<span> à </span>
<span>{to}</span>
<span> sur </span>
<span>{total}</span>
</span>
)}
</span>
)
}}
rowActions={[
{
action: (values) => {
console.log(values)
},
type: "add",
description: "Ajouter un lien"
},
{
action: () => {},
type: "edit",
description: "Modifier"
},
{
action: () => {},
type: "delete",
description: "Supprimer"
}
]}
paginationPosition="bottom"
isPaginationEnabled={true}
columns={[
{
label: "Titre",
field: "title",
isSortable: true
},
{
label: "Texte",
field: "body",
isSortable: true
},
{
label: "Auteur",
field: "userId",
isSortable: true
}
]}
footerProps={{
isPaginationEnabled: true,
actionsButtonText: 'Groupe actions',
actionsDataGrid: {
label: 'Valider',
intent: 'secondary',
actions: [
{
actionType: 'add',
label: 'Ajouter un lien',
onClick: rows => {
console.log('add', rows);
return new Promise(() => {});
},
},
{
actionType: 'edit',
label: 'Mofifier',
onClick: rows => {
console.log('edit', rows);
return new Promise(() => {});
},
},
{
actionType: 'delete',
label: 'Supprimer',
onClick: rows => {
console.log('delete', rows);
return new Promise(() => {});
},
},
],
},
}}
headerProps={{
title: 'Titre du tableau',
buttons: <><UpButton intent='secondary'>Bouton 1</UpButton><UpButton intent='secondary'>Bouton 2</UpButton></>
}}
/>
```