[minor changes] Change type color name

Protofy-xyz · Feb 21, 2024 · 71f9603 · 71f9603
1 parent 4e61e8e
commit 71f9603
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/packages/protoflow/src/dynamicMasks/ColorType.tsx b/packages/protoflow/src/dynamicMasks/ColorType.tsx
@@ -19,7 +19,7 @@ const ToggleItem = ({ onPress = (e) => { }, selected = false, ...props }) => (
  </div>
 )
 
-export const getColorTypes = () => ['color-default']
+export const getColorTypes = () => ['color']
 
 export default ({ nodeData = {}, node, item }) => {
  const rawThemeName = 'dark'
@@ -29,13 +29,13 @@ export default ({ nodeData = {}, node, item }) => {
  const setNodeData = useFlowsStore(state => state.setNodeData)
  const metadata = useFlowsStore(state => state.metadata)
 
- const colors = metadata?.tamagui?.color
+ const themeColors = metadata?.tamagui?.color
  const nodeFontSize = useTheme('nodeFontSize')
  const interactiveColor = useTheme('interactiveColor')
 
  const tones = ['blue', 'gray', 'green', 'orange', 'pink', 'purple', 'red', 'yellow']
 
- const colorArrs = tones.map(t => Object.keys(colors).filter(c => c.startsWith(t) && c.endsWith(THEMENAME)).map(c => colors[c].val)) // [[], []]
+ const colorList = tones.map(t => Object.keys(themeColors).filter(c => c.startsWith(t) && c.endsWith(THEMENAME)).map(c => themeColors[c].val)).flat(1) // [[], []]
 
  const { field, label, type, fieldType } = item
 
@@ -57,14 +57,14 @@ export default ({ nodeData = {}, node, item }) => {
 
  const getInput = () => {
  switch (type) {
- case 'color-default':
+ case 'color':
  default:
  return <>
  <Popover trigger={
  <div
  style={{
  width: "28px", height: "28px", cursor: 'pointer',
- backgroundColor: colors[value + THEMENAME]?.val ?? value,
+ backgroundColor: themeColors[value + THEMENAME]?.val ?? value,
  borderRadius: 4, zIndex: 10, position: 'absolute', marginLeft: '5px',
  border: !value ? '1px solid white' : '', top: '13px'
  }}
@@ -91,17 +91,16 @@ export default ({ nodeData = {}, node, item }) => {
  ?
  <div style={{ height: '280px', marginTop: '5px', overflowY: 'scroll' }}>
  <GithubPicker
- className={"loooll"}
  styles={pickerStyles}
  triangle='hide'
  onChangeComplete={val => {
  const valToFind = convertirHSLAString(val.hsl)
- const matchedKey = Object.keys(colors).find(colorKey => colors[colorKey].val == valToFind && colorKey.endsWith(THEMENAME))
+ const matchedKey = Object.keys(themeColors).find(colorKey => themeColors[colorKey].val == valToFind && colorKey.endsWith(THEMENAME))
  const newColor = matchedKey?.replace(THEMENAME, '')
  onSubmitThemeColor(newColor ?? val.hex)
  }}
  width={'220px'}
- colors={colorArrs.flat(1)}
+ colors={colorList}
  />
  </div>
  : <SketchPicker

diff --git a/packages/protoflow/src/dynamicMasks/DynamicJsxMask.tsx b/packages/protoflow/src/dynamicMasks/DynamicJsxMask.tsx
@@ -9,14 +9,7 @@ import ColorType from './ColorType';
 
 const TypeProp = ({ item, node, nodeData }) => {
  var type = item.type ?? ''
- var category
-
- if (type.startsWith('alignment-')) {
- category = 'alignment'
-
- } else if (type.startsWith('color-')) {
- category = 'color'
- }
+ var category = type.split('-')[0]
 
  switch (category) {
  case 'alignment':

diff --git a/packages/visualui/src/masks/UI.mask.json b/packages/visualui/src/masks/UI.mask.json
@@ -14,7 +14,7 @@
  {
  "label": "backgroundColor",
  "field": "backgroundColor",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {
@@ -65,7 +65,7 @@
  {
  "label": "backgroundColor",
  "field": "backgroundColor",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {
@@ -159,7 +159,7 @@
  {
  "label": "backgroundColor",
  "field": "backgroundColor",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {
@@ -235,7 +235,7 @@
  {
  "label": "color",
  "field": "color",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {
@@ -289,7 +289,7 @@
  {
  "label": "color",
  "field": "color",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {
@@ -349,7 +349,7 @@
  {
  "label": "color",
  "field": "color",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {
@@ -414,7 +414,7 @@
  {
  "label": "color",
  "field": "color",
- "type": "color-default",
+ "type": "color",
  "fieldType": "prop"
  },
  {