Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(website): normalize charts properties definition
  • Loading branch information
plouc committed Dec 23, 2021
1 parent bfe8126 commit e944623
Show file tree
Hide file tree
Showing 68 changed files with 3,275 additions and 4,134 deletions.
24 changes: 10 additions & 14 deletions website/src/components/controls/AngleControl.tsx
@@ -1,36 +1,32 @@
import React, { memo, useCallback } from 'react'
import styled from 'styled-components'
import { AngleControlAttrs, Flavor } from '../../types'
import { ChartProperty, Flavor } from '../../types'
import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { TextInput } from './TextInput'
import { Help } from './Help'
import { AngleControlConfig } from './types'

const size = 36
const center = size / 2
const markerSize = 6

interface AngleControlProps {
id: string
property: {
name: string
required?: boolean
help?: string
description?: string
flavors: Flavor[]
}
property: ChartProperty
flavors: Flavor[]
currentFlavor: Flavor
value: number
options: AngleControlAttrs['controlOptions']
onChange: (v: number) => void
config: AngleControlConfig
onChange: (value: number) => void
context?: any
}

export const AngleControl = memo(
({ id, property, flavors, currentFlavor, value, options, onChange }: AngleControlProps) => {
const start = options.start || 0
const min = options.min || 0
const max = options.max || 360
({ id, property, flavors, currentFlavor, value, config, onChange }: AngleControlProps) => {
const start = config.start || 0
const min = config.min || 0
const max = config.max || 360

const handleChange = useCallback(
event => {
Expand Down
50 changes: 22 additions & 28 deletions website/src/components/controls/ArrayControl.tsx
@@ -1,37 +1,31 @@
import React, { memo, Fragment, useMemo, useState, useCallback } from 'react'
import React, { memo, Fragment, useMemo, useState, useCallback, MouseEvent } from 'react'
import styled from 'styled-components'
import { PropertyHeader } from './PropertyHeader'
import ControlsGroup from './ControlsGroup'
import { Cell, Toggle } from './styled'
import { Help } from './Help'
import { Flavor, ChartProperty } from '../../types'
import { ArrayControlConfig } from './types'

interface ArrayControlProps {
/*
property: PropTypes.object.isRequired,
value: PropTypes.array.isRequired,
flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
options: PropTypes.shape({
props: PropTypes.array.isRequired,
shouldCreate: PropTypes.bool,
addLabel: PropTypes.string,
shouldRemove: PropTypes.bool,
removeLabel: PropTypes.string,
defaults: PropTypes.object,
getItemTitle: PropTypes.func,
}).isRequired,
onChange: PropTypes.func.isRequired,
*/
id: string
property: ChartProperty
value: unknown[]
flavors: Flavor[]
currentFlavor: Flavor
config: ArrayControlConfig
onChange: (value: unknown) => void
context?: any
}

const ArrayControl = memo(
export const ArrayControl = memo(
({
property,
flavors,
currentFlavor,
value,
onChange,
options: {
config: {
props,
shouldCreate = false,
addLabel = 'add',
Expand All @@ -40,23 +34,24 @@ const ArrayControl = memo(
defaults = {},
getItemTitle,
},
}) => {
}: ArrayControlProps) => {
const [activeItems, setActiveItems] = useState([0])
const append = useCallback(() => {
onChange([...value, { ...defaults }])
setActiveItems([value.length])
}, [value, onChange, defaults, setActiveItems])

const remove = useCallback(
index => event => {
(index: number) => (event: MouseEvent) => {
event.stopPropagation()
const items = value.filter((v, i) => i !== index)
const items = value.filter((_item: any, i) => i !== index)
setActiveItems([])
onChange(items)
},
[value, onChange, setActiveItems]
)
const change = useCallback(
index => itemValue => {
(index: number) => (itemValue: unknown) => {
onChange(
value.map((v, i) => {
if (i === index) return itemValue
Expand All @@ -67,7 +62,7 @@ const ArrayControl = memo(
[value, onChange]
)
const toggle = useCallback(
index => () => {
(index: number) => () => {
setActiveItems(items => {
if (items.includes(index)) {
return items.filter(i => i !== index)
Expand Down Expand Up @@ -118,7 +113,6 @@ const ArrayControl = memo(
controls={subProps}
settings={item}
onChange={change(index)}
isNested={true}
/>
)}
</Fragment>
Expand All @@ -128,8 +122,6 @@ const ArrayControl = memo(
}
)

export default ArrayControl

const Header = styled(Cell)`
border-bottom: 1px solid ${({ theme }) => theme.colors.borderLight};
Expand All @@ -144,7 +136,9 @@ const Title = styled.div`
color: ${({ theme }) => theme.colors.textLight};
`

const SubHeader = styled(Cell)`
const SubHeader = styled(Cell)<{
isOpened: boolean
}>`
cursor: pointer;
font-weight: 600;
user-select: none;
Expand Down
20 changes: 0 additions & 20 deletions website/src/components/controls/BlendModeControl.js

This file was deleted.

33 changes: 33 additions & 0 deletions website/src/components/controls/BlendModeControl.tsx
@@ -0,0 +1,33 @@
import React from 'react'
// @ts-ignore
import { blendModes } from '@nivo/core'
import { ChoicesControl } from './ChoicesControl'
import { BlendModeControlConfig } from './types'
import { ChartProperty, Flavor } from '../../types'

const choices = blendModes.map((mode: string) => ({
label: mode,
value: mode,
}))

interface BlendModeControlProps {
id: string
property: ChartProperty
flavors: Flavor[]
currentFlavor: Flavor
config: BlendModeControlConfig
value: string
onChange: (value: string) => void
context?: any
}

export const BlendModeControl = ({ config, ...props }: BlendModeControlProps) => (
<ChoicesControl
{...props}
config={{
...config,
type: 'choices',
choices,
}}
/>
)
Expand Up @@ -3,13 +3,15 @@ import styled from 'styled-components'
import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import { ChartProperty, Flavor } from '../../types'
import { BoxAnchorControlConfig } from './types'

const boxWidth = 80
const boxHeight = 50
const boxPadding = 10
const outlineRadius = 8

const anchors = [
const anchors: [string, number, number][] = [
['center', boxWidth / 2, boxHeight / 2],
['top-left', 0, 0],
['top', boxWidth / 2, 0],
Expand All @@ -33,11 +35,15 @@ const Rect = styled.rect`
stroke-opacity: 0.6;
`

const Dot = styled.circle`
const Dot = styled.circle<{
isSelected: boolean
}>`
fill: ${({ isSelected, theme }) => (isSelected ? theme.colors.accent : theme.colors.textLight)};
`

const DotOutline = styled.circle`
const DotOutline = styled.circle<{
isSelected: boolean
}>`
fill: red;
fill-opacity: 0;
stroke-width: 2px;
Expand All @@ -54,7 +60,25 @@ const Value = styled.span`
margin-left: 20px;
`

const BoxAnchorControl = ({ id, property, flavors, currentFlavor, value, onChange }) => {
interface BoxAnchorControlProps {
id: string
property: ChartProperty
flavors: Flavor[]
currentFlavor: Flavor
value: string
config: BoxAnchorControlConfig
onChange: (value: string) => void
context?: any
}

export const BoxAnchorControl = ({
id,
property,
flavors,
currentFlavor,
value,
onChange,
}: BoxAnchorControlProps) => {
return (
<Control
id={id}
Expand Down Expand Up @@ -98,5 +122,3 @@ const BoxAnchorControl = ({ id, property, flavors, currentFlavor, value, onChang
</Control>
)
}

export default BoxAnchorControl
12 changes: 6 additions & 6 deletions website/src/components/controls/ChoicesControl.tsx
Expand Up @@ -4,6 +4,7 @@ import Select from './Select'
import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import { Flavor } from '../../types'
import { ChoicesControlConfig } from './types'

interface ChoicesControlProps {
id: string
Expand All @@ -12,9 +13,8 @@ interface ChoicesControlProps {
currentFlavor: Flavor
value: string | number | boolean
onChange: (value: string | number | boolean) => void
options: {
choices: any
}
config: ChoicesControlConfig
context?: any
}

export const ChoicesControl = memo(
Expand All @@ -24,11 +24,11 @@ export const ChoicesControl = memo(
flavors,
currentFlavor,
value: _value,
options,
config,
onChange,
}: ChoicesControlProps) => {
const handleUpdate = useCallback(value => onChange(value.value), [onChange])
const value = options.choices.find(({ value: v }) => v === _value)
const value = config.choices.find(({ value: v }) => v === _value)

return (
<Control
Expand All @@ -39,7 +39,7 @@ export const ChoicesControl = memo(
supportedFlavors={property.flavors}
>
<PropertyHeader id={id} {...property} />
<Select options={options.choices} value={value} onChange={handleUpdate} />
<Select options={config.choices} value={value} onChange={handleUpdate} />
<Help>{property.help}</Help>
</Control>
)
Expand Down
2 changes: 2 additions & 0 deletions website/src/components/controls/ColorPickerControl.tsx
Expand Up @@ -3,12 +3,14 @@ import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { Help } from './Help'
import { Flavor } from '../../types'
import { ColorPickerControlConfig } from './types'

interface ColorPickerControlProps {
id: string
property: any
flavors: Flavor[]
currentFlavor: Flavor
config: ColorPickerControlConfig
value: string
onChange: (value: string) => void
context: any
Expand Down

0 comments on commit e944623

Please sign in to comment.