|
| 1 | +import styled, { css } from "styled-components"; |
| 2 | +import { Section, sectionNames } from "lowcoder-design"; |
| 3 | +import { |
| 4 | + clickEvent, |
| 5 | + eventHandlerControl, |
| 6 | +} from "../../controls/eventHandlerControl"; |
| 7 | +import { StringStateControl } from "../../controls/codeStateControl"; |
| 8 | +import { UICompBuilder, withDefault } from "../../generators"; |
| 9 | +import { |
| 10 | + NameConfig, |
| 11 | + NameConfigHidden, |
| 12 | + withExposingConfigs, |
| 13 | +} from "../../generators/withExposing"; |
| 14 | +import { RecordConstructorToView } from "lowcoder-core"; |
| 15 | +import { useEffect, useRef, useState } from "react"; |
| 16 | +import _ from "lodash"; |
| 17 | +import ReactResizeDetector from "react-resize-detector"; |
| 18 | +import { styleControl } from "comps/controls/styleControl"; |
| 19 | +import { |
| 20 | + ImageStyle, |
| 21 | + ImageStyleType, |
| 22 | + heightCalculator, |
| 23 | + widthCalculator, |
| 24 | +} from "comps/controls/styleControlConstants"; |
| 25 | +import { hiddenPropertyView } from "comps/utils/propertyUtils"; |
| 26 | +import { trans } from "i18n"; |
| 27 | +import { AutoHeightControl } from "comps/controls/autoHeightControl"; |
| 28 | +import { BoolControl } from "comps/controls/boolControl"; |
| 29 | +import { Image as AntImage } from "antd"; |
| 30 | +import { DEFAULT_IMG_URL } from "util/stringUtils"; |
| 31 | +import { |
| 32 | + Button100, |
| 33 | + ButtonCompWrapper, |
| 34 | + ButtonStyleControl, |
| 35 | +} from "./videobuttonCompConstants"; |
| 36 | + |
| 37 | +const Container = styled.div<{ $style: ImageStyleType | undefined }>` |
| 38 | + height: 100%; |
| 39 | + width: 100%; |
| 40 | + display: flex; |
| 41 | + align-items: center; |
| 42 | + justify-content: center; |
| 43 | + .ant-image, |
| 44 | + img { |
| 45 | + width: 100%; |
| 46 | + height: 100%; |
| 47 | + } |
| 48 | +
|
| 49 | + img { |
| 50 | + object-fit: contain; |
| 51 | + pointer-events: auto; |
| 52 | + } |
| 53 | +
|
| 54 | + ${(props) => props.$style && getStyle(props.$style)} |
| 55 | +`; |
| 56 | + |
| 57 | +const getStyle = (style: ImageStyleType) => { |
| 58 | + return css` |
| 59 | + img { |
| 60 | + border: 1px solid ${style.border}; |
| 61 | + border-radius: ${style.radius}; |
| 62 | + margin: ${style.margin}; |
| 63 | + padding: ${style.padding}; |
| 64 | + max-width: ${widthCalculator(style.margin)}; |
| 65 | + max-height: ${heightCalculator(style.margin)}; |
| 66 | + } |
| 67 | +
|
| 68 | + .ant-image-mask { |
| 69 | + border-radius: ${style.radius}; |
| 70 | + } |
| 71 | + `; |
| 72 | +}; |
| 73 | + |
| 74 | +const EventOptions = [clickEvent] as const; |
| 75 | + |
| 76 | +const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => { |
| 77 | + const imgRef = useRef<HTMLDivElement>(null); |
| 78 | + const conRef = useRef<HTMLDivElement>(null); |
| 79 | + const [width, setWidth] = useState(0); |
| 80 | + const [height, setHeight] = useState(0); |
| 81 | + |
| 82 | + const imgOnload = (img: HTMLImageElement) => { |
| 83 | + img.onload = function () { |
| 84 | + setWidth(img.naturalWidth); |
| 85 | + setHeight(img.naturalHeight); |
| 86 | + }; |
| 87 | + }; |
| 88 | + |
| 89 | + useEffect(() => { |
| 90 | + const newImage = new Image(0, 0); |
| 91 | + newImage.src = props.src.value; |
| 92 | + imgOnload(newImage); |
| 93 | + newImage.onerror = function (e) { |
| 94 | + newImage.src = DEFAULT_IMG_URL; |
| 95 | + imgOnload(newImage); |
| 96 | + }; |
| 97 | + }, [props.src.value]); |
| 98 | + |
| 99 | + useEffect(() => { |
| 100 | + if (height && width) { |
| 101 | + onResize(); |
| 102 | + } |
| 103 | + }, [height, width]); |
| 104 | + |
| 105 | + // on safari |
| 106 | + const setStyle = (height: string, width: string) => { |
| 107 | + console.log(width, height); |
| 108 | + |
| 109 | + const img = imgRef.current; |
| 110 | + console.log("img", img); |
| 111 | + const imgDiv = img?.getElementsByTagName("button")[0]; |
| 112 | + console.log("button", imgDiv); |
| 113 | + |
| 114 | + const imgCurrent = img?.getElementsByTagName("button")[0]; |
| 115 | + img!.style.height = height; |
| 116 | + img!.style.width = width; |
| 117 | + imgDiv!.style.height = height; |
| 118 | + imgDiv!.style.width = width; |
| 119 | + // imgCurrent!.style.height = height; |
| 120 | + // imgCurrent!.style.width = width; |
| 121 | + }; |
| 122 | + |
| 123 | + const onResize = () => { |
| 124 | + const img = imgRef.current; |
| 125 | + const container = conRef.current; |
| 126 | + console.log(container?.clientWidth, container?.clientHeight); |
| 127 | + |
| 128 | + if (!img?.clientWidth || !img?.clientHeight || props.autoHeight || !width) { |
| 129 | + return; |
| 130 | + } |
| 131 | + // fixme border style bug on safari |
| 132 | + setStyle(container?.clientHeight + "px", container?.clientWidth + "px"); |
| 133 | + // if ( |
| 134 | + // (_.divide(container?.clientWidth!, container?.clientHeight!) || 0) > |
| 135 | + // (_.divide(Number(width), Number(height)) || 0) |
| 136 | + // ) { |
| 137 | + // setStyle("100%", "auto"); |
| 138 | + // } else { |
| 139 | + // setStyle("auto", "100%"); |
| 140 | + // } |
| 141 | + }; |
| 142 | + return ( |
| 143 | + <ReactResizeDetector onResize={onResize}> |
| 144 | + <Container ref={conRef} $style={props.style}> |
| 145 | + <div |
| 146 | + ref={imgRef} |
| 147 | + style={ |
| 148 | + props.autoHeight ? { width: "100%", height: "100%" } : undefined |
| 149 | + } |
| 150 | + > |
| 151 | + <Button100 |
| 152 | + // $buttonStyle={props.style} |
| 153 | + // loading={props.loading} |
| 154 | + style={ |
| 155 | + props.autoHeight ? { width: "100%", height: "100%" } : undefined |
| 156 | + } |
| 157 | + // disabled={ |
| 158 | + // props.disabled || |
| 159 | + // (!isDefault(props.type) && |
| 160 | + // getForm(editorState, props.form)?.disableSubmit()) |
| 161 | + // } |
| 162 | + // onClick={() => |
| 163 | + // isDefault(props.type) |
| 164 | + // ? props.onEvent("click") |
| 165 | + // : submitForm(editorState, props.form) |
| 166 | + // } |
| 167 | + > |
| 168 | + m |
| 169 | + </Button100> |
| 170 | + </div> |
| 171 | + </Container> |
| 172 | + </ReactResizeDetector> |
| 173 | + ); |
| 174 | +}; |
| 175 | + |
| 176 | +const childrenMap = { |
| 177 | + src: withDefault(StringStateControl, "https://temp.im/350x400"), |
| 178 | + onEvent: eventHandlerControl(EventOptions), |
| 179 | + style: styleControl(ImageStyle), |
| 180 | + autoHeight: withDefault(AutoHeightControl, "fixed"), |
| 181 | + supportPreview: BoolControl, |
| 182 | +}; |
| 183 | + |
| 184 | +let ImageBasicComp = new UICompBuilder(childrenMap, (props) => { |
| 185 | + return <ContainerImg {...props} />; |
| 186 | +}) |
| 187 | + .setPropertyViewFn((children) => { |
| 188 | + return ( |
| 189 | + <> |
| 190 | + <Section name={sectionNames.basic}> |
| 191 | + {children.src.propertyView({ |
| 192 | + label: trans("image.src"), |
| 193 | + })} |
| 194 | + {children.supportPreview.propertyView({ |
| 195 | + label: trans("image.supportPreview"), |
| 196 | + tooltip: trans("image.supportPreviewTip"), |
| 197 | + })} |
| 198 | + </Section> |
| 199 | + |
| 200 | + <Section name={sectionNames.interaction}> |
| 201 | + {children.onEvent.getPropertyView()} |
| 202 | + </Section> |
| 203 | + |
| 204 | + <Section name={sectionNames.layout}> |
| 205 | + {children.autoHeight.getPropertyView()} |
| 206 | + {hiddenPropertyView(children)} |
| 207 | + </Section> |
| 208 | + |
| 209 | + <Section name={sectionNames.style}> |
| 210 | + {children.style.getPropertyView()} |
| 211 | + </Section> |
| 212 | + </> |
| 213 | + ); |
| 214 | + }) |
| 215 | + .build(); |
| 216 | + |
| 217 | +ImageBasicComp = class extends ImageBasicComp { |
| 218 | + override autoHeight(): boolean { |
| 219 | + return this.children.autoHeight.getView(); |
| 220 | + } |
| 221 | +}; |
| 222 | + |
| 223 | +export const VideoContolComp = withExposingConfigs(ImageBasicComp, [ |
| 224 | + new NameConfig("src", trans("image.srcDesc")), |
| 225 | + NameConfigHidden, |
| 226 | +]); |
0 commit comments