Merge branch 'master' into PullRequest48

# Conflicts:
#	muirwik-components/build.gradle.kts
#	muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/ThemeProvider.kt
#	muirwik-testapp/build.gradle.kts

muirwik-components/build.gradle.kts

@@ -3,7 +3,7 @@ import java.io.FileInputStream
 import java.util.*
 
 group = "com.ccfraser.muirwik"
-version = "0.6.3_0"
+version = "0.6.4"
 description = "Muirwik Components - a Material UI React wrapper written in Kotlin"
 
 plugins {

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/Avatar.kt

@@ -14,7 +14,7 @@ private val avatarComponent: RComponent<MAvatarProps, RState> = avatarModule.def
 
 @Suppress("EnumEntryName")
 enum class MAvatarVariant {
-    circle, rounded, square
+    circle, circular, rounded, square
 }
 
 interface MAvatarProps : StyledPropsWithCommonAttributes {
@@ -31,7 +31,7 @@ fun RBuilder.mAvatar(
         src: String? = null,
         alt: String? = null,
         srcSet: String? = null,
-        variant: MAvatarVariant = MAvatarVariant.circle,
+        variant: MAvatarVariant = MAvatarVariant.circular,
         component: String = "div",
         imgProps: RProps? = null,
         sizes: String? = null,

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/ErrorBoundary.kt

@@ -0,0 +1,55 @@
+package com.ccfraser.muirwik.components
+
+import kotlinext.js.jsObject
+import react.*
+
+typealias ErrorBoundaryErrorEvent = (error: Throwable, info: RErrorInfo) -> Unit
+
+interface ErrorBoundaryProps : RProps {
+    /**
+     * Content you want to display on an error (note, we don't want to add this as a child, i.e. don't use the normal RBuilder
+     * in a render (e.g. use a different (or new) RBuilder or for material components, set addAsChild = false if available
+     */
+    var fallbackContent: ReactElement
+
+    /**
+     * If you want to log the error, you can also get notified by using this event
+     */
+    var onError: ErrorBoundaryErrorEvent?
+}
+
+interface ErrorBoundaryState : RState {
+    var hasError: Boolean
+}
+
+class ErrorBoundary(props: ErrorBoundaryProps) : RComponent<ErrorBoundaryProps, ErrorBoundaryState>(props) {
+
+    override fun RBuilder.render() {
+        if (state.hasError) {
+            child(props.fallbackContent)
+        } else {
+            children()
+        }
+    }
+
+    override fun componentDidCatch(error: Throwable, info: RErrorInfo) {
+        props.onError?.let { it(error, info) }
+    }
+
+    companion object : RStatics<ErrorBoundaryProps, ErrorBoundaryState, ErrorBoundary, Nothing>(ErrorBoundary::class) {
+        init {
+            getDerivedStateFromError = {
+                val result: ErrorBoundaryState = jsObject()
+                result.hasError = true
+                result
+            }
+        }
+    }
+}
+
+fun RBuilder.errorBoundary(fallbackContent: ReactElement, onError: ErrorBoundaryErrorEvent? = null, handler: RHandler<RProps>) = child(ErrorBoundary::class) {
+    attrs.fallbackContent = fallbackContent
+    attrs.onError = onError
+    handler()
+}
+

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/Icon.kt

@@ -28,7 +28,7 @@ interface MIconProps : StyledProps {
     var component: String?
 }
 
-var MIconProps.color by EnumPropToString(MIconColor.values())
+var MIconProps.color by EnumPropToStringNullable(MIconColor.values())
 var MIconProps.fontSize by EnumPropToString(MIconFontSize.values())
 
 fun RBuilder.mIcon(

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/TextField.kt

@@ -7,6 +7,7 @@ import react.RBuilder
 import react.RComponent
 import react.RProps
 import react.RState
+import styled.StyledElementBuilder
 import styled.StyledHandler
 
 
@@ -87,25 +88,9 @@ fun RBuilder.mTextField(
 
         className: String? = null,
         handler: StyledHandler<MTextFieldProps>? = null) = createStyled(textFieldComponent) {
-    autoComplete?.let { attrs.autoComplete = it }
-    attrs.autoFocus = autoFocus
-    defaultValue?.let { attrs.defaultValue = defaultValue }
-    attrs.disabled = disabled
-    attrs.error = error
-    attrs.fullWidth = fullWidth
-    helperText?.let { attrs.helperText = helperText }
-    id?.let { attrs.id = it }
-    attrs.label = label
-    attrs.margin = margin
-    attrs.multiline = false
-    name?.let { attrs.name = it }
-    onChange?.let { attrs.onChange = onChange }
-    placeholder?.let { attrs.placeholder = placeholder }
-    attrs.required = required
-    attrs.select = false
-    attrs.type = type.toString()
-    value?.let { attrs.value = value }
-    attrs.variant = variant
+
+    setAttributes(this, autoComplete, autoFocus, defaultValue, disabled, error, fullWidth, helperText, id, label, margin,
+        false, name, onChange, placeholder, required, null, null, false, type, value, variant)
 
     setStyledPropsAndRunHandler(className, handler)
 }
@@ -133,26 +118,9 @@ fun RBuilder.mTextFieldMultiLine(
 
         className: String? = null,
         handler: StyledHandler<MTextFieldProps>? = null) = createStyled(textFieldComponent) {
-    attrs.autoFocus = autoFocus
-    defaultValue?.let { attrs.defaultValue = defaultValue }
-    attrs.disabled = disabled
-    attrs.error = error
-    attrs.fullWidth = fullWidth
-    helperText?.let { attrs.helperText = helperText }
-    id?.let { attrs.id = it }
-    attrs.label = label
-    attrs.margin = margin
-    attrs.multiline = true
-    name?.let { attrs.name = it }
-    onChange?.let { attrs.onChange = onChange }
-    placeholder?.let { attrs.placeholder = placeholder }
-    attrs.required = required
-    rows?.let { attrs.rows = rows }
-    rowsMax?.let { attrs.rowsMax = rowsMax }
-    attrs.select = false
-    attrs.type = InputType.text.toString()
-    value?.let { attrs.value = value }
-    attrs.variant = variant
+
+    setAttributes(this, null, autoFocus, defaultValue, disabled, error, fullWidth, helperText, id, label, margin,
+        true, name, onChange, placeholder, required, rows, rowsMax, false, InputType.text, value, variant)
 
     setStyledPropsAndRunHandler(className, handler)
 }
@@ -182,26 +150,56 @@ fun RBuilder.mTextFieldSelect(
 
         className: String? = null,
         handler: StyledHandler<MTextFieldProps>? = null) = createStyled(textFieldComponent) {
-    autoComplete?.let { attrs.autoComplete = it }
-    attrs.autoFocus = autoFocus
-    defaultValue?.let { attrs.defaultValue = defaultValue }
-    attrs.disabled = disabled
-    attrs.error = error
-    attrs.fullWidth = fullWidth
-    helperText?.let { attrs.helperText = helperText }
-    id?.let { attrs.id = it }
-    attrs.label = label
-    attrs.margin = margin
-    attrs.multiline = true
-    name?.let { attrs.name = it }
-    onChange?.let { attrs.onChange = onChange }
-    placeholder?.let { attrs.placeholder = placeholder }
-    attrs.required = required
-    attrs.select = true
-    attrs.type = InputType.text.toString()
-    value?.let { attrs.value = value }
-    attrs.variant = variant
+
+    setAttributes(this, autoComplete, autoFocus, defaultValue, disabled, error, fullWidth, helperText, id, label, margin,
+        false, name, onChange, placeholder, required, null, null, true, InputType.text, value, variant)
 
     setStyledPropsAndRunHandler(className, handler)
 }
 
+private fun setAttributes(
+    textField: StyledElementBuilder<MTextFieldProps>,
+    autoComplete: String?,
+    autoFocus: Boolean,
+    defaultValue: String?,
+    disabled: Boolean,
+    error: Boolean,
+    fullWidth: Boolean,
+    helperText: String?,
+    id: String?,
+    label: String,
+    margin: MFormControlMargin,
+    multiline: Boolean,
+    name: String?,
+    onChange: ((event: Event) -> Unit)?,
+    placeholder: String?,
+    required: Boolean,
+    rows: Int?,
+    rowsMax: Int?,
+    select: Boolean,
+    type: InputType,
+    value: String?,
+    variant: MFormControlVariant
+) {
+    autoComplete?.let { textField.attrs.autoComplete = it }
+    textField.attrs.autoFocus = autoFocus
+    defaultValue?.let { textField.attrs.defaultValue = it }
+    textField.attrs.disabled = disabled
+    textField.attrs.error = error
+    textField.attrs.fullWidth = fullWidth
+    helperText?.let { textField.attrs.helperText = it }
+    id?.let { textField.attrs.id = it }
+    textField.attrs.label = label
+    textField.attrs.margin = margin
+    textField.attrs.multiline = multiline
+    name?.let { textField.attrs.name = it }
+    onChange?.let { textField.attrs.onChange = it }
+    placeholder?.let { textField.attrs.placeholder = it }
+    textField.attrs.required = required
+    rows?.let { textField.attrs.rows = it }
+    rowsMax?.let { textField.attrs.rowsMax = it }
+    textField.attrs.select = select
+    textField.attrs.type = type.realValue
+    value?.let { textField.attrs.value = it }
+    textField.attrs.variant = variant
+}

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/ThemeProvider.kt

@@ -48,7 +48,10 @@ fun RBuilder.mThemeProvider(theme: Theme = createMuiTheme(), handler: RHandler<R
     if (handler != null) handler()
 }
 
-fun useTheme(): Theme {
-    return useContext(themeContext)
-}
-
+/**
+ * Provides access to the Material UI useTheme hook.
+ */
+@JsModule("@material-ui/core/styles/useTheme")
+private external val useThemeDefault: dynamic
+@Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE")
+fun useTheme(): Theme = useThemeDefault.default() as Theme

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/lab/Rating.kt

@@ -0,0 +1,77 @@
+package com.ccfraser.muirwik.components.lab
+
+import com.ccfraser.muirwik.components.EnumPropToString
+import com.ccfraser.muirwik.components.StyledPropsWithCommonAttributes
+import com.ccfraser.muirwik.components.createStyled
+import com.ccfraser.muirwik.components.setStyledPropsAndRunHandler
+import kotlinext.js.Object
+import react.*
+import styled.StyledHandler
+
+@JsModule("@material-ui/lab/Rating")
+private external val module: dynamic
+
+@Suppress("UnsafeCastFromDynamic")
+private val component: RComponent<MRatingProps, RState> = module.default
+
+@Suppress("EnumEntryName")
+enum class MRatingSize {
+    large, medium, small
+}
+
+interface MRatingProps : StyledPropsWithCommonAttributes {
+    var defaultValue: Number
+    var disabled: Boolean
+    var emptyIcon: ReactElement
+    var emptyLabelText: String
+    var getLabelText: (value: Number) -> String
+    var icon: ReactElement
+    @JsName("IconContainerComponent")
+    var iconContainerComponent: FunctionalComponent<MIconContainerProps>
+    var max: Number
+    var name: String
+    var onChange: (event: Object, newValue: Number) -> Unit
+    var onChangeActive: (event: Object, hoverValue: Number) -> Unit
+    var precision: Number
+    var readOnly: Boolean
+    var value: Number?
+}
+var MRatingProps.size by EnumPropToString(MRatingSize.values())
+
+interface MIconContainerProps : StyledPropsWithCommonAttributes {
+    var value: Int
+}
+
+fun RBuilder.mRating(
+    name: String,
+    value: Number? = null,
+    max: Number = 5,
+    precision: Number = 1,
+    onChange: ((event: Object, newValue: Number) -> Unit)? = null,
+    defaultValue: Number? = null,
+    readOnly: Boolean = false,
+    disabled: Boolean = false,
+    icon: ReactElement? = null,
+    emptyIcon: ReactElement? = null,
+    emptyLabelText: String = "Empty",
+    size: MRatingSize = MRatingSize.medium,
+
+    addAsChild: Boolean = true,
+    className: String? = null,
+    handler: StyledHandler<MRatingProps>? = null
+) = createStyled(component, addAsChild) {
+    defaultValue?.let { attrs.defaultValue = it }
+    attrs.disabled = disabled
+    emptyIcon?.let { attrs.emptyIcon = it }
+    attrs.emptyLabelText = emptyLabelText
+    icon?.let { attrs.icon = icon }
+    attrs.max = max
+    attrs.name = name
+    onChange?.let { attrs.onChange = it }
+    attrs.precision = precision
+    attrs.readOnly = readOnly
+    attrs.size = size
+    value?.let { attrs.value = it }
+
+  setStyledPropsAndRunHandler(className, handler)
+}

muirwik-components/src/main/kotlin/com/ccfraser/muirwik/components/lab/alert/Alert.kt

@@ -19,19 +19,19 @@ private val component: RComponent<MAlertProps, RState> = module.default
 
 @Suppress("EnumEntryName")
 enum class MAlertVariant {
-  filled, outlined, standard
+    filled, outlined, standard
 }
 
 @Suppress("EnumEntryName")
 enum class MAlertSeverity {
-  error, info, success, warning
+    error, info, success, warning
 }
 
 interface MAlertProps : StyledPropsWithCommonAttributes {
-  var action: ReactElement
-  var icon: ReactElement
-  var onClose: (Event) -> Unit
-  var closeText: String
+    var action: ReactElement
+    var icon: ReactElement
+    var onClose: (Event) -> Unit
+    var closeText: String
 }
 
 var MAlertProps.variant by EnumPropToStringNullable(MAlertVariant.values())
@@ -47,13 +47,13 @@ fun RBuilder.mAlert(
 
         className: String? = null,
         handler: StyledHandler<MAlertProps>? = null) = createStyled(component, addAsChild) {
-  message?.let { +message }
-  attrs.variant = variant
-  attrs.severity = severity
-  attrs.closeText = closeText
-  onClose?.let { attrs.onClose = onClose }
+    message?.let { +message }
+    attrs.variant = variant
+    attrs.severity = severity
+    attrs.closeText = closeText
+    onClose?.let { attrs.onClose = onClose }
 
-  setStyledPropsAndRunHandler(className, handler)
+    setStyledPropsAndRunHandler(className, handler)
 }
 
 fun RBuilder.mAlert(
@@ -67,13 +67,13 @@ fun RBuilder.mAlert(
 
         className: String? = null,
         handler: StyledHandler<MAlertProps>? = null) = createStyled(component, addAsChild) {
-  attrs.variant = variant
-  attrs.severity = severity
-  attrs.closeText = closeText
-  onClose?.let { attrs.onClose = onClose }
+    attrs.variant = variant
+    attrs.severity = severity
+    attrs.closeText = closeText
+    onClose?.let { attrs.onClose = onClose }
 
-  +mAlertTitle(title, false)
-  message?.let { +message }
+    +mAlertTitle(title, false)
+    message?.let { +message }
 
-  setStyledPropsAndRunHandler(className, handler)
+    setStyledPropsAndRunHandler(className, handler)
 }