@chief-editor/brick-control/es/brick/SlideSize/Brick.js

Control Brick for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,a=1,n=arguments.length;a<n;a++)for(var l in t=arguments[a])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e}).apply(this,arguments)};import React,{useCallback,useEffect,useState}from"react";import{InputNumber,Select}from"@chief-editor/ui";import{useRefCallback}from"@rc-hooks/use";export var slideSizeTypeMap={screen4x3:[1024,768],screen16x9:[1280,720],screenA4Vertical:[1240,1754],custom:null};export var SlideSizeComponent=function(e){var t=e.value,a=e.onValueChange,n=e.style,l=useState(t.type),i=l[0],r=l[1],c=useRefCallback(a);useEffect((function(){return r(t.type)}),[t.type]);var s=useCallback((function(e,a){void 0===a&&(a=!1);var n=t.width,l=t.height;a?l=e:n=e,c(__assign(__assign({},t),{width:n,height:l}))}),[t,i]),u=useRefCallback((function(e){var a,n=e,l=t.width,i=t.height;"custom"!==e&&(l=(a=slideSizeTypeMap[n])[0],i=a[1]),c({type:n,width:l,height:i})})),o=useCallback((function(e){return s(e)}),[t,i]),p=useCallback((function(e){return s(e,!0)}),[t,i]);return React.createElement("div",{style:__assign({display:"flex",flex:"none",flexDirection:"column"},n)},React.createElement(Select,{value:i,onValueChange:u},React.createElement(Select.Option,{value:"screen16x9",label:"宽屏幕 16:9"}),React.createElement(Select.Option,{value:"screen4x3",label:"标准 4:3"}),React.createElement(Select.Option,{value:"custom",label:"自定义"})),React.createElement("div",{style:{marginTop:14,display:"flex",alignItems:"center"}},React.createElement(InputNumber,{prefix:"W",onValueChange:o,min:0,disabled:"custom"!==i,value:t.width,style:{marginRight:"9px",width:100,flex:"none"}}),React.createElement(InputNumber,{prefix:"H",onValueChange:p,value:t.height,disabled:"custom"!==i,min:0,style:{marginRight:"4px",width:100,flex:"none"}})))};export function SlideSizeBrick(e){var t=e.styles,a=e.setValue,n=e.layout,l=e.value,i=e.creator;return React.createElement("div",{"data-id":i,style:__assign({display:"flex"},n)},React.createElement(SlideSizeComponent,{style:t,value:l,onValueChange:a}))}