can set background image

src/expamples/ant5/components/Hero/index.tsx → src/expamples/ant5/components/layouts/Hero/index.tsx

@@ -1,6 +1,7 @@
 import { ConfigProvider, theme } from "antd"
 import { ConfigContext } from "antd/es/config-provider";
 import { forwardRef, memo, CSSProperties, useContext, useMemo } from "react"
+import styled from "styled-components";
 
 export type HeroProps = {
   themeMode?: 'dark' | 'light' | 'inherit'
@@ -9,6 +10,11 @@ export type HeroProps = {
   closeable?: boolean,
 }
 
+const HeroInner = styled.div`
+  padding: 8px 24px 32px 24px;
+  border-radius: 8px;
+`
+
 export const Hero = memo(forwardRef<HTMLDivElement>((props: HeroProps, ref) => {
   const { themeMode = 'inherit', children, ...other } = props
   const config = useContext(ConfigContext)
@@ -29,13 +35,12 @@ export const Hero = memo(forwardRef<HTMLDivElement>((props: HeroProps, ref) => {
         algorithm: algorithm
       }}
     >
-      <div
+      <HeroInner
         ref={ref}
-        className = "rx-hero"
         {...other}
       >
         {children}
-      </div>
+      </HeroInner>
     </ConfigProvider>
   )
 }))

src/expamples/ant5/materials/index.ts

@@ -48,6 +48,7 @@ import { PopconfirmMaterial } from "./popups/Popconfirm";
 import { PopoverMaterial } from "./popups/Popover";
 import { TooltipMaterial } from "./popups/Tooltip";
 import { BadgeMaterial } from "./displays/Badge";
+import { HeroMaterial } from "./layouts/Hero";
 
 export const inputMaterials: IComponentMaterial[] = [
   ButtonMaterial,
@@ -104,6 +105,7 @@ export const layoutMaterials: IComponentMaterial[] = [
   PaperMaterial,
   DividerMaterial,
   BreadcrumbMaterial,
+  HeroMaterial,
 ]
 
 export const businessMaterials: IComponentMaterial[] = [

src/expamples/ant5/materials/layouts/Hero/icon.tsx

@@ -0,0 +1,3 @@
+export const icon = <svg height="1em" width="1em" fill="currentColor" viewBox="0 0 1024 1024">
+  <path d="M840.834 64.951c66.098 0 119.471 50.204 119.44 112.112V848.84c0 62.02-53.462 112.112-119.44 112.112H183.715c-66.096 0-119.44-50.205-119.44-112.14V177.063c0-62.02 53.463-112.112 119.44-112.112h657.12z m55.44 749.797v-603.62c0-45.367-39.67-82.177-88.851-82.177H217.126c-49.093 0-88.851 37.056-88.851 82.177v603.62c0 45.394 39.67 82.203 88.851 82.203h590.297c49.064 0 88.852-37.056 88.852-82.203zM366.275 474h164a8 8 0 0 0 8-8V348.951c0-17.673 14.327-32 32-32 17.674 0 32 14.327 32 32v328c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32V546a8 8 0 0 0-8-8h-164a8 8 0 0 0-8 8v130.951c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32v-328c0-17.673 14.327-32 32-32 17.674 0 32 14.327 32 32V466a8 8 0 0 0 8 8z m332-45.049c17.674 0 32 14.327 32 32v216c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32v-216c0-17.673 14.327-32 32-32z m0-112c17.674 0 32 14.327 32 32v24c0 17.673-14.326 32-32 32-17.673 0-32-14.327-32-32v-24c0-17.673 14.327-32 32-32z"></path>
+</svg>

src/expamples/ant5/materials/layouts/Hero/index.ts

@@ -0,0 +1,28 @@
+import { IComponentMaterial } from "core-react";
+import { icon } from "./icon";
+import { boxLocales, boxResourceLocales } from "./locales";
+import { boxSchema } from "./schema";
+import { Hero } from "expamples/ant5/components/layouts/Hero";
+
+const name = "Hero"
+export const HeroMaterial: IComponentMaterial = {
+  componentName: name,
+  component: Hero,
+  designer: Hero,
+  designerLocales: boxLocales,
+  designerSchema: boxSchema,
+  resource: {
+    name: name,
+    icon: icon,
+    color: "#dfa324",
+    resourceLocales: boxResourceLocales,
+    elements: [
+      {
+        componentName: name,
+      }
+    ]
+  },
+  behaviorRule: {
+    droppable: true,
+  }
+}

src/expamples/ant5/materials/layouts/Hero/locales.ts

@@ -0,0 +1,23 @@
+export const boxLocales = {
+  "zh-CN": {
+    title: "大块屏",
+    settings: {
+    }
+
+  },
+  'en-US': {
+    title: "Hero",
+    settings: {
+    }
+  }
+}
+
+
+export const boxResourceLocales = {
+  "zh-CN": {
+    "Hero": "大块屏",
+  },
+  'en-US': {
+    "Hero": "Hero",
+  }
+}

src/expamples/ant5/materials/layouts/Hero/schema.ts

@@ -0,0 +1,4 @@
+import { INodeSchema } from "core";
+import { createSchema } from "react-shells/ant5/shared/createSchema";
+
+export const boxSchema: INodeSchema = createSchema()

src/react-shells/ant5/SettingsForm/components/BackgroundImageInput/index.tsx

@@ -1,7 +1,8 @@
-import { memo, useCallback, useState } from "react"
+import { memo, useCallback } from "react"
 import { FoldExtraItem } from "../Fold/FoldExtraItem"
 import { Button, Input, Select } from "antd"
 import { createSpecialSizeOption, createUnitType, PolyInput } from "../PolyInput"
+import { ImageSelect } from "../ImageSelect"
 
 export const imageIcon = <svg viewBox="0 0 1024 1024" height="1em" width="1em" fill="currentColor" focusable="false" aria-hidden="true"><path d="M872,32 C938.27417,32 992,85.72583 992,152 L992,872 C992,938.27417 938.27417,992 872,992 L152,992 C85.72583,992 32,938.27417 32,872 L32,152 C32,85.72583 85.72583,32 152,32 L872,32 Z M832,112 L192,112 C148.259048,112 112.717181,147.104457 112.010718,190.677054 L112,192 L112,832 C112,875.740952 147.104457,911.282819 190.677054,911.989282 L192,912 L832,912 C875.740952,912 911.282819,876.895543 911.989282,833.322946 L912,832 L912,192 C912,147.81722 876.18278,112 832,112 Z M378.52279,415.050326 C387.989019,409.358413 400.277122,412.418101 405.969035,421.884331 L405.969035,421.884331 L560.846571,679.46141 C561.920687,681.247773 563.267454,682.855244 564.838099,684.225605 C573.161205,691.487375 585.795242,690.626992 593.057011,682.303887 L593.057011,682.303887 L686.973056,574.661651 C688.336422,573.099024 689.934526,571.757945 691.710072,570.686495 C701.167259,564.979571 713.460201,568.019761 719.167124,577.476949 L719.167124,577.476949 L852.543134,798.500051 C855.365729,803.177494 856.857504,808.536895 856.857504,814 C856.857504,830.568542 843.426047,844 826.857504,844 L826.857504,844 L191.580891,844 C186.553452,844 181.606628,842.736548 177.194928,840.32573 C162.655629,832.380582 157.310013,814.153336 165.255161,799.614037 L165.255161,799.614037 L371.278423,422.599809 C372.980511,419.485057 375.480866,416.879393 378.52279,415.050326 Z M699,213 C756.989899,213 804,260.010101 804,318 C804,375.989899 756.989899,423 699,423 C641.010101,423 594,375.989899 594,318 C594,260.010101 641.010101,213 699,213 Z"></path></svg>
 
@@ -21,51 +22,107 @@ const sizeOptions = [
   createUnitType('vh'),
   createUnitType('em'),
 ]
+
 export const BackgroundImageInput = memo((
   props: {
-    imageTitle?: string,
-    imageSizeTitle?: string,
-    repeatTitle?: string,
-    positionTitle?: string,
+    title?: string,
     value?: string,
     onChange?: (value?: string) => void,
+    marginTop?: number,
+    span?: number,
   }
 ) => {
-  const { imageTitle, imageSizeTitle, repeatTitle, positionTitle, value, onChange } = props
-  const [image, setImage] = useState<string>()
-  const [size, setSize] = useState<string>()
+  const { title, value, onChange, marginTop, span = 24 } = props
+  const handleSelectChange = useCallback((imageUrl?: string) => {
+    if (imageUrl) {
+      onChange?.(`url(${imageUrl})`)
+    } else {
+      onChange?.(undefined)
+    }
+  }, [onChange])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e.target.value)
+  }
+  return (
+    <FoldExtraItem icon={imageIcon} span={span} title={title} marginTop={marginTop}>
+      <Input.Group compact>
+        <Input
+          style={{ width: 'calc(100% - 32px)' }}
+          value={value}
+          onChange={handleChange}
+        />
+        <ImageSelect onChange={handleSelectChange}>
+          <Button icon={cloudUploadIcon}></Button>
+        </ImageSelect>
+      </Input.Group>
+    </FoldExtraItem>
+  )
+})
 
-  const handleSizeChange = useCallback((size?: string | null) => {
+export const BackgroundSizeInput = memo((
+  props: {
+    title?: string,
+    value?: string,
+    onChange?: (value?: string | null) => void
+    marginTop?: number,
+    span?: number,
+  }
+) => {
+  const { title, value, onChange, marginTop = 8, span = 12 } = props
+  return (
+    <FoldExtraItem icon={imageSizeIcon} span={span} title={title} marginTop={marginTop}>
+      <PolyInput polyTypes={sizeOptions} value={value} onChange={onChange} />
+    </FoldExtraItem>
+  )
+})
 
-  }, [])
+export const BackgroundRepeatInput = memo((
+  props: {
+    title?: string,
+    value?: string,
+    onChange?: (value?: string | null) => void
+    marginTop?: number,
+    span?: number,
+  }
+) => {
+  const { title, value, onChange, marginTop = 8, span = 12 } = props
+  return (
+    <FoldExtraItem icon={repeatIcon} span={span} title={title} marginTop={marginTop}>
+      <Select
+        style={{ width: '100%' }}
+        options={[
+          { value: "no-repeat", label: "No Repeat" },
+          { value: "repeat", label: "Repeat" },
+          { value: "repeat-x", label: "Repeat X" },
+          { value: "repeat-y", label: "Repeat Y" },
+          { value: "space", label: "Space" },
+          { value: "round", label: "Round" },
+        ]}
+        placeholder="repeat"
+        value={value}
+        onChange={onChange}
+      />
+    </FoldExtraItem>
+  )
+})
 
+export const BackgroundPositionInput = memo((
+  props: {
+    title?: string,
+    value?: string,
+    onChange?: (value?: string | null) => void
+    marginTop?: number,
+    span?: number,
+  }
+) => {
+  const { title, value, onChange, marginTop = 8, span = 24 } = props
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e.target.value)
+  }
   return (
-    <>
-      <FoldExtraItem icon={imageIcon} span={24} title={imageTitle}>
-        <Input.Group compact>
-          <Input style={{ width: 'calc(100% - 32px)' }} />
-          <Button icon={cloudUploadIcon}></Button>
-        </Input.Group>
-      </FoldExtraItem>
-      <FoldExtraItem icon={imageSizeIcon} span={12} title={imageSizeTitle} marginTop={8}>
-        <PolyInput polyTypes={sizeOptions} value={size} onChange={handleSizeChange} />
-      </FoldExtraItem>
-      <FoldExtraItem icon={repeatIcon} span={12} title={repeatTitle} marginTop={8}>
-        <Select
-          style={{ width: '100%' }}
-          options={[
-            { value: "no-repeat", label: "No Repeat" },
-            { value: "repeat", label: "Repeat" },
-            { value: "repeat-x", label: "Repeat X" },
-            { value: "repeat-y", label: "Repeat Y" },
-            { value: "space", label: "Space" },
-            { value: "round", label: "Round" },
-          ]} placeholder="repeat"
-        />
-      </FoldExtraItem>
-      <FoldExtraItem icon={positionIcon} span={24} title={positionTitle} marginTop={8}>
-        <Input placeholder="center center" />
-      </FoldExtraItem>
-    </>
+    <FoldExtraItem icon={positionIcon} span={span} title={title} marginTop={marginTop}>
+      <Input placeholder="center center" value={value} onChange={handleChange} />
+    </FoldExtraItem>
   )
-})
+})

src/react-shells/ant5/SettingsForm/components/ImageSelect/index.tsx

@@ -0,0 +1,88 @@
+import { Col, Modal, Row } from "antd"
+import { useToken } from "antd/es/theme/internal"
+import { useToolsTranslate } from "core-react/hooks/useToolsTranslate"
+import React, { useCallback, useEffect } from "react"
+import { memo, useState } from "react"
+import { ImageView } from "react-shells/ant5/components/ImageView"
+import styled from "styled-components"
+
+const ImageContainer = styled.div.attrs((props: { actived?: boolean, borderColor?: string }) => ({
+  ...props,
+}))`
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  padding:2px;
+  outline: ${props => props.actived ? props.borderColor + " solid 1px" : undefined};
+`
+
+const images = [
+  "/imgs/hero.png",
+  "/imgs/ad.jpg",
+]
+
+export const ImageSelect = memo((
+  props: {
+    children: React.ReactElement,
+    value?: string,
+    onChange?: (value?: string) => void,
+  }
+) => {
+  const { children, value, onChange } = props
+  const [open, setOpen] = useState(false)
+  const [selected, setSelected] = useState<string>()
+  const t = useToolsTranslate()
+  const [, token] = useToken()
+
+  useEffect(()=>{
+    setSelected(value)
+  }, [value])
+
+  const handleClick = useCallback(() => {
+    setOpen(true)
+  }, [])
+
+  const handleOk = useCallback(() => {
+    setOpen(false);
+    onChange?.(selected)
+  }, [onChange, selected]);
+
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      {React.cloneElement(children, { onClick: handleClick })}
+      <Modal
+        title={t('selectImage')}
+        open={open}
+        okText={t("confirm")}
+        cancelText={t("cancel")}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        okButtonProps={{
+          disabled: !selected
+        }}
+      >
+        <Row gutter={16}>
+          {
+            images.map((img, index) => {
+              return (
+                <Col span={6} key={index}>
+                  <ImageContainer
+                    borderColor={token.colorPrimary}
+                    actived={selected === img}
+                    onClick={() => setSelected(img)}
+                  >
+                    <ImageView height="100%" value={img} style={{ borderRadius: 8 }} />
+                  </ImageContainer>
+                </Col>
+              )
+            })
+          }
+        </Row>
+      </Modal>
+    </>
+  )
+})

src/react-shells/ant5/SettingsForm/index.tsx

@@ -33,7 +33,7 @@ import { DisplaySetter } from "./components/DisplaySetter";
 import IconInput from "./components/IconInput";
 import { GutterInput } from "./components/GutterInput";
 import { ColInput } from "./components/ColInput";
-import { BackgroundImageInput } from "./components/BackgroundImageInput";
+import { BackgroundImageInput, BackgroundPositionInput, BackgroundRepeatInput, BackgroundSizeInput } from "./components/BackgroundImageInput";
 
 const propertiesStyle: CSSProperties = {
   flex: 1,
@@ -116,6 +116,9 @@ export const SettingsForm = memo((props: SettingsFormProps) => {
         "Checkbox.Group": Checkbox.Group,
         ColInput,
         BackgroundImageInput,
+        BackgroundSizeInput,
+        BackgroundRepeatInput,
+        BackgroundPositionInput
       }}
     >
       <Fieldy>