Default profile colors

.circleci/config.yml

@@ -24,7 +24,6 @@ jobs:
           - v1-dependencies
 
       - run: yarn
-
       - save_cache:
           paths:
             - node_modules
@@ -33,3 +32,5 @@ jobs:
       # run flow and unit tests!
       - run: yarn run flow
       - run: yarn run jest:coverage
+      - store_artifacts:
+          path: coverage

README.md

@@ -80,16 +80,16 @@ create: (image: Image, options?: Options) => Promise<PaletteInstance>
 
 ##### Creating a palette from a network resource, with 'vibrant' color profile, maximumColorCount = 16 and the whole region of the image (default behaviour) 
 ```js
-import MaterialPalette from "react-native-material-palette";
+import { createMaterialPalette } from "react-native-material-palette";
 
-const palette = await MaterialPalette.create({ uri: 'http://dummySite/images/yummy.jpg' });
+const palette = await createMaterialPalette({ uri: 'http://dummySite/images/yummy.jpg' });
 ```
 
 ##### Creating a palette from an internal image asset, with 'muted' and 'lightVibrant' color profiles, maximumColorCount = 32 and a specific region of the image
 ```js
-import MaterialPalette from "react-native-material-palette";
+import { createMaterialPalette } from "react-native-material-palette";
 
-const palette = await MaterialPalette.create(require('./assets/image.jpg'), {
+const palette = await createMaterialPalette(require('./assets/image.jpg'), {
   region: { top: 0, left: 0, bottom: 50, right: 50},
   maximumColorCount: 32,
   type: ['muted', 'lightVibrant'],

docs/API.md

@@ -2,8 +2,6 @@
 
 ## `MaterialPaletteProvider`
 
-__Also available from the default import:__ `MaterialPalette.PaletteProvider`
-
 ### Example of usage:
 ```javascript
 import React from 'react';
@@ -30,16 +28,6 @@ class App extends React.Component {
 }
 ```
 
-> You can import the component directly, as a named import:
-> ```javascript
-> import { MaterialPaletteProvider } from 'react-native-material-palette';
-> ```
-> or using the default import and accessing the component using `PaletteProvider` property:
-> ```javascript
-> import MaterialPalette from 'react-native-material-palette';
-> // MaterialPalette.PaletteProvider
-> ```
-
 ### Description
 `MaterialPaletteProvider` is a component, which handles palette creation and provides the access to the palette instance for _connected_ components (via `withMaterialPalette`) using context. Ideally, `MaterialPaletteProvider` should be placed at the top of components tree, so that all nested components can _connect_ to it. By default it will render `null` when the palette is being created unless either `forceRender` or `LoaderComponent` is specified.
 
@@ -53,8 +41,7 @@ The concept is very similar to `Provider` component from `react-redux`.
   type Options = {
     region?: { top: number, left: number, bottom: number, right: number },
     maximumColorCount?: number = 16,
-    type?: ColorProfile = 'vibrant',
-    types?: Array<ColorProfile> = []
+    type?: ColorProfile | Array<ColorProfile> = 'vibrant',
   }
   ```
 
@@ -88,16 +75,14 @@ The concept is very similar to `Provider` component from `react-redux`.
 
 * `onInit?: () => void` - (optional) - Init handler, called when the `MaterialPaletteProvider` is just about to start creating the palette.
 
-* `onFinish?: (palette: PaletteInstance, globalDefaults: PaletteDefaults) => void` - (optional) - Finish handler, called when the palette is created, but before it gets propagated to _connected_ components - use it, if you want to mutate the palette instance.
+* `onFinish?: (palette: PaletteInstance) => void` - (optional) - Finish handler, called when the palette is created, but before it gets propagated to _connected_ components - use it, if you want to mutate the palette instance. If some profiles are not available for the provided image, the defaults will apply, taking precedence the ones you passed to the component as `this.props.defaults`.
 
 * `children: React$Element<*>`, - (__required__) - Children elements - the rest of your app's component tree.
 
 --------------
 
 ## `withMaterialPalette`
 
-__Also available from the default import:__ `MaterialPalette.withPalette`
-
 ### Example of usage:
 ```javascript
 import React from 'react';
@@ -112,16 +97,6 @@ export default withMaterialPalette(
 )(Text);
 ```
 
-> You can import the function directly, as a named import:
-> ```javascript
-> import { withMaterialPalette } from 'react-native-material-palette';
-> ```
-> or using the default import and accessing the component using `withPalette` property:
-> ```javascript
-> import MaterialPalette from 'react-native-material-palette';
-> // MaterialPalette.withPalette
-> ```
-
 ### Description
 `withMaterialPalette` is a function that returns a Higher Order Component (HOC), which allows to seemlessy _connect_ to the `MaterialPaletteProvider` and get the palette instance via context.
 

example/index.android.js

@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native';
 
-import MaterialPalette from 'react-native-material-palette';
+import { createMaterialPalette } from 'react-native-material-palette';
 
 export default class TestPalette extends Component {
   state = {
@@ -16,7 +16,7 @@ export default class TestPalette extends Component {
   };
 
   async componentDidMount() {
-    const palette = await MaterialPalette.create(
+    const palette = await createMaterialPalette(
       require('./assets/wroclaw.jpg'), // eslint-disable-line global-require
       {
         type: ['lightMuted', 'darkVibrant', 'vibrant'],

package.json

@@ -138,7 +138,7 @@
         "boolean"
       ],
       "flowtype/no-weak-types": 1,
-      "flowtype/require-parameter-type": 2,
+      "flowtype/require-parameter-type": 0,
       "flowtype/require-return-type": [
         0,
         "always",

src/PaletteProvider.js

@@ -3,9 +3,17 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import createEventEmitter from './createEventEmitter';
-import MaterialPalette from './index';
+import { createMaterialPalette } from './index';
+import { defaultSwatches } from './constants/defaults';
+import { validateDefaults } from './utils/validateCreatePaletteArgs';
 
-import type { PaletteInstance, Image, Options, PaletteDefaults } from './types';
+import type {
+  PaletteInstance,
+  Image,
+  Options,
+  PaletteDefaults,
+  ColorProfile,
+} from './types';
 
 export const KEY = '__react-native-material-palette__';
 
@@ -37,10 +45,7 @@ type Props = {
   /**
    * Finish handler, called right after the palette is generated
    */
-  onFinish?: (
-    palette: PaletteInstance,
-    globalDefaults: PaletteDefaults,
-  ) => void,
+  onFinish?: (palette: PaletteInstance) => void,
   /**
    * Render the children regardless whether palette is still being created, does not
    * take effect if `LoaderComponent` is specified
@@ -93,17 +98,62 @@ export default class MaterialPaletteProvider
     };
   }
 
+  _mergeWithDefaults(palette: PaletteInstance) {
+    const globalDefaultsForTypesProvided = ((Object.keys(
+      palette,
+    ): any): ColorProfile[]).reduce(
+      (acc, profile) => ({
+        ...acc,
+        [profile]: defaultSwatches[profile],
+      }),
+      {},
+    );
+
+    const defaults = {
+      ...globalDefaultsForTypesProvided,
+      ...((Object.keys(
+        this.props.defaults || {},
+      ): any): ColorProfile[]).reduce(
+        (acc: *, profile: ColorProfile) => ({
+          ...acc,
+          [profile]: {
+            ...(this.props.defaults && this.props.defaults[profile]
+              ? this.props.defaults[profile]
+              : defaultSwatches[profile]),
+            population: 0,
+          },
+        }),
+        {},
+      ),
+    };
+    return {
+      ...defaults,
+      ...((Object.keys(palette): any): ColorProfile[])
+        .filter((profile: ColorProfile) => !!palette[profile]) // Stripping out unavailable profiles
+        .reduce(
+          (acc: *, profile: ColorProfile) => ({
+            ...acc,
+            [profile]: palette[profile],
+          }),
+          {},
+        ),
+    };
+  }
+
   componentWillMount() {
+    if (this.props.defaults) {
+      validateDefaults(this.props.defaults);
+    }
     execIfFunction(this.props.onInit);
-    MaterialPalette.create(this.props.image, this.props.options)
+    createMaterialPalette(this.props.image, this.props.options)
       .then((palette: PaletteInstance) => {
-        execIfFunction(this.props.onFinish, palette, this.props.defaults);
+        const paletteWithDefaults = this._mergeWithDefaults(palette);
+        execIfFunction(this.props.onFinish, paletteWithDefaults);
         if (!this.props.forceRender) {
-          this.setState({ palette });
+          this.setState({ palette: paletteWithDefaults });
         }
         this.eventEmitter.publish({
-          palette,
-          globalDefaults: this.props.defaults,
+          palette: paletteWithDefaults,
         });
       })
       .catch((error: Error) => {