react#SFC TypeScript Examples

ButtonDemo: SFC<Props> = ({ theme, size, children }) => (
  <>
    <DemoItem>
      <Button theme={theme} size={size}>
        {children}
      </Button>
      <ButtonAsLink theme={theme} size={size} to="./" className="u-margin-left-small">
        Link {children}
      </ButtonAsLink>
      <ButtonAsAnchor theme={theme} size={size} href="./" className="u-margin-left-small">
        Anchor {children}
      </ButtonAsAnchor>
    </DemoItem>
    <DemoItem>
      <Button theme={theme} size={size} disabled>
        Disabled
      </Button>
    </DemoItem>
    <DemoItem>
      <Button theme={theme} size={size}>
        Longer Text or Emphasis
      </Button>
    </DemoItem>
    <DemoItem>
      <Button theme={theme}>
        Improve this checklist
        <Icon name="arrow-right" className="u-margin-left-small" />
      </Button>
    </DemoItem>
  </>
)

Link: SFC<LinkProps> = (props) => {
    const { text, target, className, onClick, onRendered } = props;
    const css = ["__link__", className ? className : null].join(" ").trim();

    // events
    const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => (onClick && onClick(target, e.shiftKey));
    const handleRendered = () => (onRendered && onRendered());

    // this should fire on mount/update
    useEffect(() => handleRendered());

    return (
        <span className={css} onClick={handleClick}>{text}</span>
    );
}

Text: SFC<TextProps> = (props) => {
    const { text, className, onRendered } = props;
    const css = [
        "__text__",
        className ? className : null,
    ].join(" ").trim();

    // events
    const handleRendered = () => (onRendered && onRendered());

    // this should fire on mount/update
    useEffect(() => handleRendered());

    return <div className={css}>{text}</div>;
}

Toggle: SFC<ToggleProps> = (props) => {
    const { className, states, onRendered } = props;
    const css = [
        "__toggle__",
        className ? className : null,
    ].join(" ").trim();

    // find the active state
    const state = states.find(element => element.active === true);
    const text = (state && state.text) || "";

    // set the new active one
    const [active, setActive] = useState(state);

    // events
    const handleRendered = () => (onRendered && onRendered());
    const handleClick = useCallback(() => {
        if (active) {
            // get the active index;
            const index = states.findIndex(element => element === active);
            // unset everything
            states.forEach(element => element.active = false);
            // set the next active element
            const next = states[index + 1 === states.length ? 0 : index + 1];
            next.active = true;
            setActive(next);
        }
    }, [states, active, setActive]);

    // this should fire on mount/update
    useEffect(() => handleRendered());

    return <div className={css} onClick={handleClick}>{text}</div>;
}

Modal: SFC<ModalProps> = (props) => {
    const { text, className, onClose } = props;
    const css = [
        "__modal__",
        className ? className : null,
    ].join(" ").trim();

    const renderContent = () => {
        const content = (typeof text === "string") ? [text] : text;
        return content.map((element, index) => <p key={index}>{element}</p>);
    }

    // add a keyhandler
    const handleKeyDown = useCallback((e: KeyboardEvent) => {
        e.preventDefault();

        const key = e.key.toLowerCase();

        switch (key) {
            case "enter":
            case "escape":
                onClose && onClose();
                break;

            default:
                break;
        }
    }, [onClose]);

    useEffect(() => {
        // mount
        document.body.classList.add("static");
        document.addEventListener("keydown", handleKeyDown);

        // unmount
        return () => {
            document.removeEventListener("keydown", handleKeyDown);
            document.body.classList.remove("static");
        };
    });

    return (
        <section className={css} onClick={onClose}>
            <div className="content">
                {renderContent()}
            </div>
        </section>
    );
}

Prompt: SFC<PromptProps> = (props) => {
    const { disabled, prompt, className, commands, onCommand, onRendered, } = props;
    const ref: RefObject<HTMLSpanElement> = useRef();
    const css = [
        "__prompt__",
        disabled ? "disabled" : null,
        className ? className : null,
    ].join(" ").trim();

    const [value, setValue] = useState("");

    // events
    const handleFocus = () => ref.current.focus();

    const handleCommand = () => {
        if (!onCommand) {
            return;
        }

        const command = commands.find(element => element.command === value);
        setValue("");

        if (command) {
            onCommand(value, command.action);
        }
    };

    const handleKeyDown = (e: KeyboardEvent) => {
        if (disabled) {
            setValue("");
            return;
        }

        e.preventDefault();

        const key = e.key.toLowerCase();
        switch (key) {
            case "backspace":
                value.length && setValue(value.slice(0, -1));
                break;

            case "enter":
                handleCommand();
                break;

            default:
                // support alphanumeric, space, and limited puntuation only
                const re = /[a-z0-9,.<>/?[\]{}'";:*&^%$#@!~]/
                if (key.length === 1 && key.match(re)) {
                    setValue(value + key);
                }
                break;
        }
    };

    // render effects
    useEffect(() => {
        // mount
        onRendered && onRendered();
        document.addEventListener("keydown", handleKeyDown);

        // unmount
        return () => document.removeEventListener("keydown", handleKeyDown);
    });

    return (
        <div className={css} onClick={handleFocus}>
            {prompt && <span className={"prompt"}>{prompt}</span>}
            <span className={"input"} ref={ref}>{value}</span>
        </div>
    );
}

LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
  <div className="gf-form-group">
    {text} <i className="fa fa-spinner fa-spin" />
  </div>
)

PanelOptionsGrid: SFC<Props> = ({ children }) => {
  return <div className="panel-options-grid">{children}</div>;
}