react#SFC TypeScript Examples

The following examples show how to use react#SFC. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Button.stories.tsx    From checklist with MIT License 6 votes vote down vote up 
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>
  </>
)
Example #2
Source File: index.tsx    From phosphor with MIT License 6 votes vote down vote up 
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>
    );
}
Example #3
Source File: index.tsx    From phosphor with MIT License 6 votes vote down vote up 
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>;
}
Example #4
Source File: index.tsx    From phosphor with MIT License 6 votes vote down vote up 
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>;
}
Example #5
Source File: index.tsx    From phosphor with MIT License 5 votes vote down vote up 
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>
    );
}
Example #6
Source File: index.tsx    From phosphor with MIT License 5 votes vote down vote up 
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>
    );
}
Example #7
Source File: LoadingPlaceholder.tsx    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
  <div className="gf-form-group">
    {text} <i className="fa fa-spinner fa-spin" />
  </div>
)
Example #8
Source File: PanelOptionsGrid.tsx    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
PanelOptionsGrid: SFC<Props> = ({ children }) => {
  return <div className="panel-options-grid">{children}</div>;
}