refactor

resources/assets/src/components/Modal.tsx

@@ -42,7 +42,24 @@ export type ModalResult = {
 }
 
 const Modal: React.FC<ModalOptions & Props> = props => {
-  const [value, setValue] = useState(props.input!)
+  const {
+    mode = 'confirm',
+    title = trans('general.tip'),
+    text = '',
+    input = '',
+    placeholder = '',
+    inputType = 'text',
+    type = 'default',
+    showHeader = true,
+    center = false,
+    okButtonText = trans('general.confirm'),
+    okButtonType = 'primary',
+    cancelButtonText = trans('general.cancel'),
+    cancelButtonType = 'secondary',
+    flexFooter = false,
+  } = props
+
+  const [value, setValue] = useState(input)
   const [valid, setValid] = useState(true)
   const [validatorMessage, setValidatorMessage] = useState('')
   const ref = useRef<HTMLDivElement>(null)
@@ -112,38 +129,32 @@ const Modal: React.FC<ModalOptions & Props> = props => {
   return (
     <div id={props.id} className="modal fade" role="dialog" ref={ref}>
       <div
-        className={`modal-dialog ${
-          props.center ? 'modal-dialog-centered' : ''
-        }`}
+        className={`modal-dialog ${center ? 'modal-dialog-centered' : ''}`}
         role="document"
       >
-        <div className={`modal-content bg-${props.type}`}>
-          <ModalHeader
-            show={props.showHeader}
-            title={props.title}
-            onDismiss={dismiss}
-          />
+        <div className={`modal-content bg-${type}`}>
+          <ModalHeader show={showHeader} title={title} onDismiss={dismiss} />
           <ModalBody
-            text={props.text}
+            text={text}
             dangerousHTML={props.dangerousHTML}
-            showInput={props.mode === 'prompt'}
+            showInput={mode === 'prompt'}
             value={value}
             choices={props.choices}
             onChange={handleInputChange}
-            inputType={props.inputType}
-            placeholder={props.placeholder}
+            inputType={inputType}
+            placeholder={placeholder}
             invalid={!valid}
             validatorMessage={validatorMessage}
           >
             {props.children}
           </ModalBody>
           <ModalFooter
-            showCancelButton={props.mode !== 'alert'}
-            flexFooter={props.flexFooter}
-            okButtonType={props.okButtonType}
-            okButtonText={props.okButtonText}
-            cancelButtonType={props.cancelButtonType}
-            cancelButtonText={props.cancelButtonText}
+            showCancelButton={mode !== 'alert'}
+            flexFooter={flexFooter}
+            okButtonType={okButtonType}
+            okButtonText={okButtonText}
+            cancelButtonType={cancelButtonType}
+            cancelButtonText={cancelButtonText}
             onConfirm={confirm}
             onDismiss={dismiss}
           >
@@ -155,21 +166,4 @@ const Modal: React.FC<ModalOptions & Props> = props => {
   )
 }
 
-Modal.defaultProps = {
-  mode: 'confirm',
-  title: trans('general.tip'),
-  text: '',
-  input: '',
-  placeholder: '',
-  inputType: 'text',
-  type: 'default',
-  showHeader: true,
-  center: false,
-  okButtonText: trans('general.confirm'),
-  okButtonType: 'primary',
-  cancelButtonText: trans('general.cancel'),
-  cancelButtonType: 'secondary',
-  flexFooter: false,
-}
-
 export default Modal

resources/assets/src/components/Viewer.tsx

@@ -33,6 +33,8 @@ const emptyStuff: ViewerStuff = {
 }
 
 const Viewer: React.FC<Props> = props => {
+  const { initPositionZ = 70 } = props
+
   const viewRef: React.MutableRefObject<skinview3d.SkinViewer> = useRef(null!)
   const containerRef = useRef<HTMLDivElement>(null)
   const stuffRef = useRef(emptyStuff)
@@ -61,7 +63,7 @@ const Viewer: React.FC<Props> = props => {
       capeUrl: props.cape || '',
       detectModel: false,
     })
-    viewer.camera.position.z = props.initPositionZ!
+    viewer.camera.position.z = initPositionZ
 
     const animation = new skinview3d.CompositeAnimation()
     stuffRef.current.handles = {
@@ -185,8 +187,4 @@ const Viewer: React.FC<Props> = props => {
   )
 }
 
-Viewer.defaultProps = {
-  initPositionZ: 70,
-}
-
 export default Viewer