release 2.3.5 (#162)

* [KFI]fix: Update material-ui-picker and related imports * [KFI]refactor: Improving typesafety * [KFI]refactor: Improve typesafety vol. 2 * [KFI]chore: Update version number and some of the dependencies
SenseNet · Nov 14, 2018 · dba9bfe · dba9bfe
1 parent a19a710
commit dba9bfe
Show file tree

Hide file tree

Showing 39 changed files with 847 additions and 635 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sensenet/controls-react",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "React controls for sensenet",
   "main": "dist/index.js",
   "scripts": {
@@ -54,40 +54,44 @@
   },
   "homepage": "https://sensenet.com",
   "dependencies": {
+    "@date-io/date-fns": "0.0.2",
+    "@date-io/moment": "0.0.2",
     "@material-ui/core": "^3.2.0",
-    "@sensenet/client-core": "^1.3.0",
+    "@sensenet/client-core": "^1.3.1",
     "@sensenet/control-mapper": "^1.0.1",
     "@sensenet/icons-react": "^1.2.3",
     "@sensenet/redux": "^5.1.1",
-    "material-ui-pickers": "^1.0.1",
     "lodash.debounce": "^4.0.8",
+    "material-ui-pickers": "^2.0.1",
     "moment": "^2.22.2",
     "radium": "^0.25.0",
-    "react-number-format": "^3.6.0",
     "react-quill": "^1.3.1",
-    "react-responsive": "^5.0.0",
+    "react-responsive": "^6.0.1",
     "react-select": "^2.0.0"
   },
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.4",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.10.3",
+    "@types/radium": "^0.24.2",
     "@types/react": "^16.4.16",
     "@types/react-dom": "^16.0.7",
     "@types/react-redux": "^6.0.9",
+    "@types/react-responsive": "^3.0.2",
     "autoprefixer": "^9.1.5",
     "chalk": "2.4.1",
     "cpx": "^1.5.0",
-    "date-fns": "^2.0.0-alpha.20",
+    "date-fns": "^2.0.0-alpha.21",
     "dotenv": "6.1.0",
-    "fs-extra": "7.0.0",
+    "fs-extra": "^7.0.1",
     "mocha": "^5.2.0",
     "nyc": "^13.0.1",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "4.1.0",
     "promise": "8.0.2",
-    "react": "^16.5.2",
+    "react": "^16.6.3",
     "react-dev-utils": "^6.0.5",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.6.3",
     "rimraf": "^2.6.2",
     "tslint": "^5.11.0",
     "typescript": "^3.0.3"

diff --git a/src/ReactControlMapper.ts b/src/ReactControlMapper.ts
@@ -26,7 +26,7 @@ import * as ViewControls from './viewcontrols'
 const clientConfigFactory = (fieldSettings: FieldSetting) => {
     const defaultSetting = {} as ReactClientFieldSettingProps
     defaultSetting.key = fieldSettings.Name,
-        defaultSetting.name = fieldSettings.Name,
+        defaultSetting.name = fieldSettings.Name as any,
         defaultSetting.readOnly = fieldSettings.ReadOnly || false,
         defaultSetting.required = fieldSettings.Compulsory || false,
         defaultSetting['data-placeHolderText'] = fieldSettings.DisplayName || ''
@@ -123,7 +123,7 @@ export const reactControlMapper = (repository: Repository) => new ControlMapper(
         const choiceSettings = clientConfigFactory(setting) as ReactChoiceFieldSetting
         choiceSettings['data-allowExtraValue'] = setting.AllowExtraValue,
             choiceSettings['data-allowMultiple'] = setting.AllowMultiple,
-            choiceSettings.options = setting.Options
+            choiceSettings.options = setting.Options || []
         return choiceSettings
     })
     .setupFieldSettingDefault(ReferenceFieldSetting, (setting) => {

diff --git a/src/fieldcontrols/AutoComplete/AutoComplete.tsx b/src/fieldcontrols/AutoComplete/AutoComplete.tsx
@@ -14,7 +14,7 @@ import { ReactReferenceFieldSetting } from '../ReferenceFieldSetting'
 /**
  * Interface for AutoComplete properties
  */
-export interface AutoCompleteProps extends ReactClientFieldSettingProps, ReactClientFieldSetting, ReactReferenceFieldSetting { }
+export interface AutoCompleteProps<T extends GenericContent, K extends keyof T> extends ReactClientFieldSettingProps<T, K>, ReactClientFieldSetting<T, K>, ReactReferenceFieldSetting<T, K> { }
 
 /**
  * State object for the AutoComplete component
@@ -32,11 +32,11 @@ export interface AutoCompleteState<T extends GenericContent> {
 /**
  * Field control that represents a AutoComplete field. Available values will be populated from the FieldSettings.
  */
-export class AutoComplete<T extends GenericContent = GenericContent> extends Component<AutoCompleteProps, AutoCompleteState<T>> {
+export class AutoComplete<T extends GenericContent = GenericContent, K extends keyof T = 'Name'> extends Component<AutoCompleteProps<T, K>, AutoCompleteState<T>> {
     /**
      * returns a content by its id
      */
-    public getContentById = (id) => {
+    public getContentById = (id: number) => {
         return this.props.dataSource ? this.props.dataSource.find((item) => item.Id === id) : null
     }
     /**
@@ -58,16 +58,16 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
     public componentWillUnmount() {
         this.willUnmount = true
     }
-    constructor(props) {
-        super(props)
+    constructor(props: AutoComplete['props']) {
+        super(props as any)
         const handleInputChange = this.handleInputChange.bind(this)
         this.handleInputChange = debounce(handleInputChange, 350)
         this.handleSelect = this.handleSelect.bind(this)
         this.handleClickAway = this.handleClickAway.bind(this)
     }
-    private async handleInputChange(e) {
+    private async handleInputChange(e: React.ChangeEvent) {
         // tslint:disable
-        const term = `*${e.target.value}*`
+        const term = `*${e.target['value']}*`
         const query = new Query((q) => q
             .query((q2) =>
                 q2.equals('Name', term)
@@ -110,19 +110,19 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
             })
         } else {
             try {
-                const values = await this.props.repository.loadCollection({
+                const values = await this.props.repository.loadCollection<T>({
                     path: '/Root',
                     oDataOptions: {
-                        query,
+                        query: query.toString(),
                         select: 'all',
                     },
                 })
                 if (this.willUnmount) {
                     return
                 }
                 this.setState({
-                    items: values,
-                    isOpened: values.length > 0 ? true : false,
+                    items: values.d.results,
+                    isOpened: values.d.results.length > 0 ? true : false,
                 })
 
                 // tslint:disable-next-line:variable-name
@@ -146,7 +146,7 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
             isLoading: false,
         })
         const { name, onChange } = this.props
-        onChange(name, item.Id)
+        onChange(name, item.Id as any)
     }
     /**
      * render
@@ -158,7 +158,7 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
             case 'edit':
             case 'new':
                 return (<div ref={(ref) => ref && this.state.anchorEl !== ref && this.setState({ anchorEl: ref })}>
-                    <FormControl className={this.props.className} key={this.props.name} component="fieldset" required={this.props.required}>
+                    <FormControl className={this.props.className} key={this.props.name as string} component="fieldset" required={this.props.required}>
                         <TextField
                             value={this.state.selected.length > 0 ? this.getContentById(this.state.selected[0])[displayName] : ''}
                             type="text"
@@ -177,8 +177,8 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
                                         <CircularProgress size={16} />
                                     </InputAdornment> : null,
                             }}
-                            name={this.props.name}
-                            id={this.props.name}
+                            name={this.props.name as string}
+                            id={this.props.name as string}
                             className={this.props.className}
                             style={this.props.style}
                             required={this.props.required}
@@ -202,7 +202,7 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
                                 },
                             }}
                         >
-                            {this.state.items.length > 0 ? this.state.items.map((i) => this.state.getMenuItem(i, this.handleSelect)) : <MenuItem>No hits</MenuItem>}
+                            {this.state.items.length > 0 ? this.state.items.map((item: any) => this.state.getMenuItem(item, this.handleSelect)) : <MenuItem>No hits</MenuItem>}
                         </Menu>
                     </FormControl>
                 </div>)
@@ -214,9 +214,9 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
                                 {this.props['data-labelText']}
                             </FormLabel>
                             <FormGroup>
-                                {this.props['data-fieldValue'].map((value) =>
+                                {this.props['data-fieldValue'].map((value: T[K]) =>
                                     <FormControl component="fieldset">
-                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.state.items.find((item) => (item.Id === value))[displayName]} control={<span></span>} key={value} />
+                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.state.items.find((item: any) => (item.Id === value))[displayName]} control={<span></span>} key={this.state.items.find((item) => (item.Id === value)).Name} />
                                     </FormControl>)}
                             </FormGroup>
                         </FormControl> : null
@@ -229,9 +229,9 @@ export class AutoComplete<T extends GenericContent = GenericContent> extends Com
                                 {this.props['data-labelText']}
                             </FormLabel>
                             <FormGroup>
-                                {this.props['data-fieldValue'].map((value) =>
+                                {this.props['data-fieldValue'].map((value: T[K]) =>
                                     <FormControl component="fieldset">
-                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.state.items.find((item) => (item.Id === value))[displayName]} control={<span></span>} key={value} />
+                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.state.items.find((item: any) => (item.Id === value))[displayName]} control={<span></span>} key={this.state.items.find((item) => (item.Id === value)).Name} />
                                     </FormControl>)}
                             </FormGroup>
                         </FormControl> : null

diff --git a/src/fieldcontrols/CheckboxGroup/CheckboxGroup.tsx b/src/fieldcontrols/CheckboxGroup/CheckboxGroup.tsx
@@ -21,21 +21,27 @@ import FormGroup from '@material-ui/core/FormGroup'
 import FormHelperText from '@material-ui/core/FormHelperText'
 import FormLabel from '@material-ui/core/FormLabel'
 import TextField from '@material-ui/core/TextField'
+import { GenericContent } from '@sensenet/default-content-types'
 
 /**
  * Interface for CheckboxGroup properties
  */
-export interface CheckboxGroupProps extends ReactClientFieldSettingProps, ReactClientFieldSetting, ReactChoiceFieldSetting { }
-
+export interface CheckboxGroupProps<T extends GenericContent, K extends keyof T> extends ReactClientFieldSettingProps<T, K>, ReactClientFieldSetting<T, K>, ReactChoiceFieldSetting<T, K> { }
+/**
+ * Interface for CheckboxGroup state
+ */
+export interface CheckboxGroupState<T extends GenericContent, K extends keyof T> {
+    value: any[]
+}
 /**
  * Field control that represents a Choice field. Available values will be populated from the FieldSettings.
  */
-export class CheckboxGroup extends Component<CheckboxGroupProps, { value }> {
+export class CheckboxGroup<T extends GenericContent, K extends keyof T> extends Component<CheckboxGroupProps<T, K>, CheckboxGroupState<T, K>> {
     /**
      * constructor
      * @param {object} props
      */
-    constructor(props) {
+    constructor(props: CheckboxGroup<T, K>['props']) {
         super(props)
         this.state = {
             value: this.props['data-fieldValue'] || this.props['data-defaultValue'] || [],
@@ -45,9 +51,10 @@ export class CheckboxGroup extends Component<CheckboxGroupProps, { value }> {
     /**
      * set selected value
      */
-    public handleChange = (event) => {
+    public handleChange = (event: React.ChangeEvent) => {
         const { value } = this.state
-        const newValue = event.target.value
+        // tslint:disable-next-line:no-string-literal
+        const newValue = event.target['value']
         const checked = value
         const index = value.indexOf(newValue)
         if (this.props['data-allowMultiple']) {
@@ -66,13 +73,13 @@ export class CheckboxGroup extends Component<CheckboxGroupProps, { value }> {
         this.setState({
             value: checked,
         })
-        this.props.onChange(this.props.name, checked)
+        this.props.onChange(this.props.name, checked as any)
     }
     /**
      * returns if an item is checked or not
      * @param {string} item
      */
-    public isChecked(item) {
+    public isChecked(item: number | string) {
         let checked = false
         // tslint:disable-next-line:prefer-for-of
         for (let i = 0; i < this.state.value.length; i++) {
@@ -147,9 +154,9 @@ export class CheckboxGroup extends Component<CheckboxGroupProps, { value }> {
                                 {this.props['data-labelText']}
                             </FormLabel>
                             <FormGroup>
-                                {this.props['data-fieldValue'].map((value) =>
+                                {this.props['data-fieldValue'].map((value: T[K]) =>
                                     <FormControl component="fieldset">
-                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.props.options.find((item) => (item.Value === value)).Text} control={<span></span>} key={value} />
+                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.props.options.find((item) => (item.Value === value)).Text} control={<span></span>} key={this.props.options.find((item) => (item.Value === value)).Name} />
                                     </FormControl>)}
                             </FormGroup>
                         </FormControl> : null
@@ -162,9 +169,9 @@ export class CheckboxGroup extends Component<CheckboxGroupProps, { value }> {
                                 {this.props['data-labelText']}
                             </FormLabel>
                             <FormGroup>
-                                {this.props['data-fieldValue'].map((value) =>
+                                {this.props['data-fieldValue'].map((value: T[K]) =>
                                     <FormControl component="fieldset">
-                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.props.options.find((item) => (item.Value === value)).Text} control={<span></span>} key={value} />
+                                        <FormControlLabel style={{ marginLeft: 0 }} label={this.props.options.find((item) => (item.Value === value)).Text} control={<span></span>} key={this.props.options.find((item) => (item.Value === value)).Name} />
                                     </FormControl>)}
                             </FormGroup>
                         </FormControl> : null

diff --git a/src/fieldcontrols/ChoiceFieldSetting.ts b/src/fieldcontrols/ChoiceFieldSetting.ts
@@ -2,12 +2,13 @@
  * @module FieldControls
  *
  */ /** */
+import { GenericContent } from '@sensenet/default-content-types'
 import { ReactClientFieldSetting } from './ClientFieldSetting'
 
 /**
  * Interface for ChoiceFieldSetting properties
  */
-export interface ReactChoiceFieldSetting extends ReactClientFieldSetting {
+export interface ReactChoiceFieldSetting<T extends GenericContent = GenericContent, K extends keyof T = 'Name'> extends ReactClientFieldSetting<T, K> {
     /**
      * Allows multiple selection
      * @default false

diff --git a/src/fieldcontrols/ClientFieldSetting.ts b/src/fieldcontrols/ClientFieldSetting.ts
@@ -1,15 +1,21 @@
+import { GenericContent } from '@sensenet/default-content-types'
+
 /**
  * @module FieldControls
  *
  */ /** */
 /**
  * Interface for ReactClientFieldSetting properties
  */
-export interface ReactClientFieldSettingProps {
+export interface ReactClientFieldSettingProps<T extends GenericContent = GenericContent,  K extends keyof T = 'Name'> {
     /**
      * Unique name of the field control
      */
-    name?: string
+    name: K
+    /**
+     * Called when the icon is clicked
+     */
+    onChange: (field: keyof T, value: T[K]) => void
     /**
      * Unique key of the field control
      */
@@ -36,16 +42,16 @@ export interface ReactClientFieldSettingProps {
      * @default false
      */
     className?: string,
-    /**
-     * Called when the icon is clicked
-     */
-    onChange
 }
 
 /**
  * Interface for ClientFieldSetting properties
  */
-export interface ReactClientFieldSetting extends ReactClientFieldSettingProps {
+export interface ReactClientFieldSetting<T extends GenericContent = GenericContent, K extends keyof T = 'Name'> extends ReactClientFieldSettingProps<T, K> {
+    /**
+     * Default value of the empty field control
+     */
+    'data-defaultValue'?: T[K],
     /**
      * Display mode of the field control
      * @default browse
@@ -59,10 +65,6 @@ export interface ReactClientFieldSetting extends ReactClientFieldSettingProps {
      * Text of the placeholder
      */
     'data-placeHolderText'?: string
-    /**
-     * Default value of the empty field control
-     */
-    'data-defaultValue'?
     /**
      * Text of the label
      */
@@ -72,7 +74,7 @@ export interface ReactClientFieldSetting extends ReactClientFieldSettingProps {
      */
     'data-errorText'?: string,
     /**
-     * Name of the fildcontrol type
+     * Name of the fieldcontrol type
      */
     'data-typeName'?: string
 }