fix(website): fix InheritedColorControl

plouc · May 9, 2019 · 862fa0b · 862fa0b
1 parent a54ac59
commit 862fa0b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/website/src/components/controls/InheritedColorControl.js b/website/src/components/controls/InheritedColorControl.js
@@ -23,6 +23,8 @@ const themeProperties = ['background', 'grid.line.stroke', 'labels.text.fill'].m
     value: prop,
 }))
 
+const defaultInheritableProperties = ['color']
+
 const InheritedColorControl = ({
     id,
     property,
@@ -32,8 +34,8 @@ const InheritedColorControl = ({
     defaultCustomColor,
     defaultThemeProperty,
     defaultFrom,
-    inheritableProperties,
     onChange,
+    options: { inheritableProperties = defaultInheritableProperties } = {},
 }) => {
     const [customColor, setCustomColor] = useState(isString(value) ? value : defaultCustomColor)
     const [themeProp, setThemeProp] = useState(
@@ -64,6 +66,16 @@ const InheritedColorControl = ({
         },
         [onChange, setThemeProp]
     )
+    const handleFromPropertyChange = useCallback(
+        value => {
+            setFromProp(value.value)
+            onChange({
+                from: value.value,
+                modifiers,
+            })
+        },
+        [onChange, setThemeProp]
+    )
     const handleModifierChange = useCallback(
         index => modifier => {
             const newModifiers = [...modifiers]
@@ -117,7 +129,7 @@ const InheritedColorControl = ({
                     <Select
                         options={propertyOptions}
                         value={propertyOptions.find(prop => prop.value === value.from)}
-                        //onChange={handleThemePropertyChange}
+                        onChange={handleFromPropertyChange}
                     />
                     <SubLabel>modifiers</SubLabel>
                     {modifiers.length === 0 && <NoModifiers>No modifier.</NoModifiers>}
@@ -173,17 +185,18 @@ InheritedColorControl.propTypes = {
     flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
     currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
     onChange: PropTypes.func.isRequired,
-    inheritableProperties: PropTypes.arrayOf(PropTypes.string).isRequired,
     defaultCustomColor: PropTypes.string.isRequired,
     defaultThemeProperty: PropTypes.string.isRequired,
     defaultFrom: PropTypes.string.isRequired,
     value: inheritedColorPropType.isRequired,
+    options: PropTypes.shape({
+        inheritableProperties: PropTypes.arrayOf(PropTypes.string),
+    }),
 }
 InheritedColorControl.defaultProps = {
     defaultCustomColor: 'black',
     defaultThemeProperty: 'background',
     defaultFrom: 'color',
-    inheritableProperties: ['color'],
 }
 
 export default InheritedColorControl

diff --git a/website/src/data/components/network/props.js b/website/src/data/components/network/props.js
@@ -147,6 +147,7 @@ const props = [
         group: 'Nodes',
         type: 'string | object | (link: Link) => string',
         help: `Control nodes' border color.`,
+        defaultValue: NetworkDefaultProps.nodeBorderColor,
         controlType: 'inheritedColor',
     },
     {
@@ -158,6 +159,17 @@ const props = [
         defaultValue: NetworkDefaultProps.linkThickness,
         controlType: 'lineWidth',
     },
+    {
+        key: 'linkColor',
+        group: 'Links',
+        type: 'string | (link: Link) => string',
+        help: `Control links' color.`,
+        defaultValue: NetworkDefaultProps.linkColor,
+        controlType: 'inheritedColor',
+        controlOptions: {
+            inheritableProperties: ['source.color', 'target.color'],
+        },
+    },
     {
         key: 'layers',
         group: 'Customization',

diff --git a/website/src/pages/network/canvas.js b/website/src/pages/network/canvas.js
@@ -32,6 +32,7 @@ const initialProperties = Object.freeze({
     nodeBorderWidth: 1,
     nodeBorderColor: { theme: 'background' },
 
+    linkColor: NetworkCanvasDefaultProps.linkColor,
     linkThickness: 1,
 
     isInteractive: true,

diff --git a/website/src/pages/network/index.js b/website/src/pages/network/index.js
@@ -32,6 +32,7 @@ const initialProperties = Object.freeze({
         modifiers: [['darker', 0.8]],
     },
 
+    linkColor: NetworkDefaultProps.linkColor,
     linkThickness: link => (2 - link.source.depth) * 2,
 
     isInteractive: true,