chore(web): color bug fix (#843)

Co-authored-by: KaWaite <[email protected]> Co-authored-by: keiya sasaki <[email protected]> Co-authored-by: nina992 <[email protected]> Co-authored-by: nina992 <[email protected]> Co-authored-by: pyshx <[email protected]>
reearth · Dec 1, 2023 · 76f514f · 76f514f
1 parent 17bcc69
commit 76f514f
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 9 deletions.
diff --git a/web/src/beta/components/fields/ColorField/hooks.ts b/web/src/beta/components/fields/ColorField/hooks.ts
@@ -103,13 +103,6 @@ export default ({ value, onChange }: Params) => {
     }
   }, [value]);
 
-  useEffect(() => {
-    if (!value) return;
-    if (rgba && tinycolor(rgba).toHex8String() !== value) {
-      setColor(tinycolor(rgba).toHex8String());
-    }
-  }, [rgba]); // eslint-disable-line react-hooks/exhaustive-deps
-
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent | TouchEvent) => {
       if (open && wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {

diff --git a/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx
@@ -78,7 +78,7 @@ const VectorTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           description={t("Layer of the data source you want to add.")}>
           {layers.map((layer: string, index: number) => (
             <LayerWrapper key={index}>
-              <Input type="text" placeholder={`${layer}`} disabled={true} />
+              <Input type="text" value={`${layer}`} disabled={true} />
               <DeleteLayerIcon icon="bin" size={16} onClick={() => handleDeleteLayer(index)} />
             </LayerWrapper>
           ))}

diff --git a/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx
@@ -78,7 +78,7 @@ const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           description={t("Layer of the data source you want to add.")}>
           {layers.map((layer: string, index: number) => (
             <LayerWrapper key={index}>
-              <Input type="text" placeholder={`${layer}`} disabled={true} />
+              <Input type="text" value={`${layer}`} disabled={true} />
               <DeleteLayerIcon icon="bin" size={16} onClick={() => handleDeleteLayer(index)} />
             </LayerWrapper>
           ))}

diff --git a/web/src/beta/features/Editor/DataSourceManager/utils.tsx b/web/src/beta/features/Editor/DataSourceManager/utils.tsx
@@ -45,6 +45,9 @@ export const Input = styled.input`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  ::placeholder {
+    color: ${({ theme }) => theme.content.weaker};
+  }
 `;
 
 export const AssetWrapper = styled.div`

diff --git a/web/src/beta/lib/core/StoryPanel/hooks/useFieldComponent.tsx b/web/src/beta/lib/core/StoryPanel/hooks/useFieldComponent.tsx
@@ -123,6 +123,7 @@ export const FieldComponent = ({
       <ColorField
         name={field?.title}
         description={field?.description}
+        value={field?.value}
         onChange={handlePropertyValueUpdate(groupId, propertyId, fieldId, field?.type)}
       />
     ) : field?.ui === "selection" || field?.choices ? (