transform many components to React Functions

Signum.React.Extensions/Alerts/Templates/Alert.tsx

@@ -1,41 +1,37 @@
-import * as React from 'react'
+import * as React from 'react'
 import { ValueLine, EntityLine, EntityCombo } from '@framework/Lines'
 import { TypeContext } from '@framework/TypeContext'
 import { AlertEntity } from '../Signum.Entities.Alerts'
 
-export default class Alert extends React.Component<{ ctx: TypeContext<AlertEntity> }> {
+export default function Alert(p : { ctx: TypeContext<AlertEntity> }){
+  const e = p.ctx;
 
-  render() {
+  const ec = e.subCtx({ labelColumns: { sm: 2 } });
+  const sc = ec.subCtx({ formGroupStyle: "Basic" });
 
-    const e = this.props.ctx;
 
-    const ec = e.subCtx({ labelColumns: { sm: 2 } });
-    const sc = ec.subCtx({ formGroupStyle: "Basic" });
-
-
-    return (
-      <div>
-        {!ec.value.isNew &&
-          <div>
-            <EntityLine ctx={ec.subCtx(e => e.createdBy)} readOnly={true} />
-            <ValueLine ctx={ec.subCtx(e => e.creationDate)} readOnly={true} />
-          </div>
-        }
-        {ec.value.target && <EntityLine ctx={ec.subCtx(n => n.target)} readOnly={true} />}
-        <EntityLine ctx={ec.subCtx(n => n.recipient)} />
-        <hr />
-        <ValueLine ctx={ec.subCtx(n => n.title)} />
-        <EntityCombo ctx={ec.subCtx(n => n.alertType)} />
-        <ValueLine ctx={ec.subCtx(n => n.alertDate)} />
-        <ValueLine ctx={ec.subCtx(n => n.text)} valueHtmlAttributes={{ style: { height: "180px" } }} />
-        {ec.value.state == "Attended" &&
-          <div>
-            <hr />
-            <ValueLine ctx={ec.subCtx(e => e.attendedDate)} readOnly={true} />
-            <EntityLine ctx={ec.subCtx(e => e.attendedBy)} readOnly={true} />
-          </div>
-        }
-      </div>
-    );
-  }
+  return (
+    <div>
+      {!ec.value.isNew &&
+        <div>
+          <EntityLine ctx={ec.subCtx(e => e.createdBy)} readOnly={true} />
+          <ValueLine ctx={ec.subCtx(e => e.creationDate)} readOnly={true} />
+        </div>
+      }
+      {ec.value.target && <EntityLine ctx={ec.subCtx(n => n.target)} readOnly={true} />}
+      <EntityLine ctx={ec.subCtx(n => n.recipient)} />
+      <hr />
+      <ValueLine ctx={ec.subCtx(n => n.title)} />
+      <EntityCombo ctx={ec.subCtx(n => n.alertType)} />
+      <ValueLine ctx={ec.subCtx(n => n.alertDate)} />
+      <ValueLine ctx={ec.subCtx(n => n.text)} valueHtmlAttributes={{ style: { height: "180px" } }} />
+      {ec.value.state == "Attended" &&
+        <div>
+          <hr />
+          <ValueLine ctx={ec.subCtx(e => e.attendedDate)} readOnly={true} />
+          <EntityLine ctx={ec.subCtx(e => e.attendedBy)} readOnly={true} />
+        </div>
+      }
+    </div>
+  );
 }

Signum.React.Extensions/Alerts/Templates/AlertType.tsx

@@ -1,17 +1,14 @@
-import * as React from 'react'
+import * as React from 'react'
 import { ValueLine } from '@framework/Lines'
 import { TypeContext } from '@framework/TypeContext'
 import { AlertTypeEntity } from '../Signum.Entities.Alerts'
 
-export default class AlertType extends React.Component<{ ctx: TypeContext<AlertTypeEntity> }> {
-
-  render() {
-    const ctx = this.props.ctx;
-    const ctx4 = ctx.subCtx({ labelColumns: 2 });
-    return (
-      <div>
-        <ValueLine ctx={ctx4.subCtx(n => n.name)} />
-      </div>
-    );
-  }
+export default function AlertType(p : { ctx: TypeContext<AlertTypeEntity> }){
+  const ctx = p.ctx;
+  const ctx4 = ctx.subCtx({ labelColumns: 2 });
+  return (
+    <div>
+      <ValueLine ctx={ctx4.subCtx(n => n.name)} />
+    </div>
+  );
 }

Signum.React.Extensions/Authorization/Admin/ColoredRadios.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import "./AuthAdmin.css"
@@ -11,26 +11,22 @@ interface ColorRadioProps {
   icon?: IconProp | null;
 }
 
-export class ColorRadio extends React.Component<ColorRadioProps> {
-  render() {
-    return (
-      <a onClick={e => { e.preventDefault(); this.props.onClicked(e); }} title={this.props.title}
-        className="sf-auth-chooser"
-        style={{ color: this.props.checked ? this.props.color : "#aaa" }}>
-        <FontAwesomeIcon icon={this.props.icon || ["far", (this.props.checked ? "dot-circle" : "circle")]} />
-      </a>
-    );
-  }
+export function ColorRadio(p : ColorRadioProps){
+  return (
+    <a onClick={e => { e.preventDefault(); p.onClicked(e); }} title={p.title}
+      className="sf-auth-chooser"
+      style={{ color: p.checked ? p.color : "#aaa" }}>
+      <FontAwesomeIcon icon={p.icon || ["far", (p.checked ? "dot-circle" : "circle")]} />
+    </a>
+  );
 }
 
-export class GrayCheckbox extends React.Component<{ checked: boolean, onUnchecked: () => void }> {
-  render() {
-    return (
-      <span className="sf-auth-checkbox" onClick={this.props.checked ? this.props.onUnchecked : undefined}>
-        <FontAwesomeIcon icon={["far", this.props.checked ? "check-square" : "square"]} />
-      </span>
-    );
-  }
+export function GrayCheckbox(p : { checked: boolean, onUnchecked: () => void }){
+  return (
+    <span className="sf-auth-checkbox" onClick={p.checked ? p.onUnchecked : undefined}>
+      <FontAwesomeIcon icon={["far", p.checked ? "check-square" : "square"]} />
+    </span>
+  );
 }
 
 

Signum.React.Extensions/Authorization/Templates/Role.tsx

@@ -1,23 +1,22 @@
 import * as React from 'react'
 import { RoleEntity, AuthAdminMessage } from '../Signum.Entities.Authorization'
 import { ValueLine, EntityList, TypeContext } from '@framework/Lines'
+import { useForceUpdate } from '@framework/Hooks'
 
-export default class Role extends React.Component<{ ctx: TypeContext<RoleEntity> }> {
+export default function Role(p : { ctx: TypeContext<RoleEntity> }){
+  const forceUpdate = useForceUpdate();
 
-  render() {
-    const ctx = this.props.ctx;
-    return (
-      <div>
-        <ValueLine ctx={ctx.subCtx(e => e.name)} />
-        <ValueLine ctx={ctx.subCtx(e => e.mergeStrategy)} unitText={this.rolesMessage()} onChange={() => this.forceUpdate()} />
-        <EntityList ctx={ctx.subCtx(e => e.roles)} onChange={() => this.forceUpdate()} />
-      </div>
-    );
-  }
-
-  rolesMessage(): string {
+  function rolesMessage() {
     return AuthAdminMessage.NoRoles.niceToString() + " ⇒ " +
-      (this.props.ctx.value.mergeStrategy == "Union" ? AuthAdminMessage.Nothing : AuthAdminMessage.Everything).niceToString();
+      (p.ctx.value.mergeStrategy == "Union" ? AuthAdminMessage.Nothing : AuthAdminMessage.Everything).niceToString();
   }
+  const ctx = p.ctx;
+  return (
+    <div>
+      <ValueLine ctx={ctx.subCtx(e => e.name)} />
+      <ValueLine ctx={ctx.subCtx(e => e.mergeStrategy)} unitText={rolesMessage()} onChange={() => forceUpdate()} />
+      <EntityList ctx={ctx.subCtx(e => e.roles)} onChange={() => forceUpdate()} />
+    </div>
+  );
 }
 

Signum.React.Extensions/Authorization/Templates/User.tsx

@@ -1,79 +1,67 @@
-import * as React from 'react'
+import * as React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { AuthMessage, UserEntity } from '../Signum.Entities.Authorization'
+import { AuthMessage, UserEntity, UserState } from '../Signum.Entities.Authorization'
 import { Binding } from '@framework/Reflection'
 import { ValueLine, EntityLine, EntityCombo, FormGroup, TypeContext } from '@framework/Lines'
 
-export default class User extends React.Component<{ ctx: TypeContext<UserEntity> }, { withPassword: boolean }> {
+export default function User(p: { ctx: TypeContext<UserEntity> }) {
 
-  constructor(props: any) {
-    super(props);
-    this.state = { withPassword: false };
-  }
+  const ctx = p.ctx.subCtx({ labelColumns: { sm: 3 } });
+  const entity = p.ctx.value;
 
-  render() {
-    const ctx = this.props.ctx.subCtx({ labelColumns: { sm: 3 } });
-    const entity = this.props.ctx.value;
+  return (
+    <div>
+      <ValueLine ctx={ctx.subCtx(e => e.state, { readOnly: true })} />
+      <ValueLine ctx={ctx.subCtx(e => e.userName)} />
+      <DoublePassword ctx={new TypeContext<string>(ctx, undefined, undefined as any, Binding.create(ctx.value, v => v.newPassword))} isNew={entity.isNew} /> :
+      <EntityLine ctx={ctx.subCtx(e => e.role)} />
+      <ValueLine ctx={ctx.subCtx(e => e.email)} />
+      <EntityCombo ctx={ctx.subCtx(e => e.cultureInfo)} />
+      <ValueLine ctx={ctx.subCtx(e => e.passwordNeverExpires)} />
+      <ValueLine ctx={ctx.subCtx(e => e.passwordSetDate)} />
+    </div>
+  );
+}
 
-    return (
-      <div>
-        <ValueLine ctx={ctx.subCtx(e => e.state, { readOnly: true })} />
-        <ValueLine ctx={ctx.subCtx(e => e.userName)} />
-        {entity.isNew || this.state.withPassword ?
-          <DoublePassword ctx={new TypeContext<string>(ctx, undefined, undefined as any, Binding.create(ctx.value, v => v.newPassword))} /> :
-          !ctx.readOnly && this.renderButton(ctx)
-        }
-        <EntityLine ctx={ctx.subCtx(e => e.role)} />
-        <ValueLine ctx={ctx.subCtx(e => e.email)} />
-        <EntityCombo ctx={ctx.subCtx(e => e.cultureInfo)} />
-        <ValueLine ctx={ctx.subCtx(e => e.passwordNeverExpires)} />
-        <ValueLine ctx={ctx.subCtx(e => e.passwordSetDate)} />
-      </div>
-    );
-  }
+function DoublePassword(p: { ctx: TypeContext<string>, isNew: boolean }) {
 
-  renderButton(ctx: TypeContext<UserEntity>) {
-    return (
-      <FormGroup labelText={AuthMessage.NewPassword.niceToString()} ctx={ctx}>
-        <a className="btn btn-light btn-sm" onClick={() => this.setState({ withPassword: true })}>
-          <FontAwesomeIcon icon="key" /> {AuthMessage.ChangePassword.niceToString()}
-        </a>
-      </FormGroup>
-    );
-  }
-}
+  const [withPassword, setWithPassword] = React.useState(p.isNew);
 
-class DoublePassword extends React.Component<{ ctx: TypeContext<string> }>{
+  if (!withPassword) {
+    return <FormGroup labelText={AuthMessage.NewPassword.niceToString()} ctx={p.ctx}>
+      <a className="btn btn-light btn-sm" onClick={() => setWithPassword(true)}>
+        <FontAwesomeIcon icon="key" /> {AuthMessage.ChangePassword.niceToString()}
+      </a>
+    </FormGroup>
+  }
 
-  handlePasswordBlur = (event: React.SyntheticEvent<any>) => {
 
-    const ctx = this.props.ctx;
+  function handlePasswordBlur(e: React.SyntheticEvent<any>) {
+    const ctx = p.ctx;
 
-    if (this.newPass.value && this.newPass2.value && this.newPass.value != this.newPass2.value) {
+    if (newPass.current!.value && newPass2.current!.value && newPass.current!.value != newPass2.current!.value) {
       ctx.error = AuthMessage.PasswordsAreDifferent.niceToString()
     }
     else {
       ctx.error = undefined;
-      ctx.value = this.newPass.value;
+      ctx.value = newPass.current!.value;
     }
 
     ctx.frame!.revalidate();
   }
 
-  newPass!: HTMLInputElement;
-  newPass2!: HTMLInputElement;
+  var newPass = React.useRef<HTMLInputElement>(null);
+  var newPass2 = React.useRef<HTMLInputElement>(null);
 
-  render() {
-    return (
-      <div>
-        <FormGroup ctx={this.props.ctx} labelText={AuthMessage.ChangePasswordAspx_NewPassword.niceToString()}>
-          <input type="password" ref={p => this.newPass = p!} className={this.props.ctx.formControlClass} onBlur={this.handlePasswordBlur} />
-        </FormGroup>
-        <FormGroup ctx={this.props.ctx} labelText={AuthMessage.ChangePasswordAspx_ConfirmNewPassword.niceToString()}>
-          <input type="password" ref={p => this.newPass2 = p!} className={this.props.ctx.formControlClass} onBlur={this.handlePasswordBlur} />
-        </FormGroup>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <FormGroup ctx={p.ctx} labelText={AuthMessage.ChangePasswordAspx_NewPassword.niceToString()}>
+        <input type="password" ref={newPass} className={p.ctx.formControlClass} onBlur={handlePasswordBlur} />
+      </FormGroup>
+      <FormGroup ctx={p.ctx} labelText={AuthMessage.ChangePasswordAspx_ConfirmNewPassword.niceToString()}>
+        <input type="password" ref={newPass2} className={p.ctx.formControlClass} onBlur={handlePasswordBlur} />
+      </FormGroup>
+    </div>
+  );
 }