react#Component TypeScript Examples

The following examples show how to use react#Component. 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: InputString.tsx    From hive with MIT License 6 votes vote down vote up 
class InputString extends Component<Props> {
    change = (e: ChangeEvent<HTMLInputElement>) => {
        const { value, config } = this.props;

        config.changeValue(value.value_id, e.target.value);
    };

    render() {
        const { value } = this.props;

        return (
            <InputCore value={value}>
                <InputGroup
                    id={value.value_id}
                    placeholder={value.label}
                    onChange={this.change}
                    value={value.value as string}
                />
            </InputCore>
        );
    }
}
Example #2
Source File: EditableComponent.tsx    From aem-react-editable-components with Apache License 2.0 6 votes vote down vote up 
/**
 * Returns a component wrapper that provides editing capabilities to the component.
 *
 * @param WrappedComponent
 * @param editConfig
 */
export function withEditable<P extends MappedComponentProperties>(WrappedComponent: ComponentType<P>, editConfig?: EditConfig<P>) {

    const defaultEditConfig: EditConfig<P> = editConfig ? editConfig : { isEmpty: (props: P) => false };

    return class CompositeEditableComponent extends Component<P> {
        public render(): JSX.Element {
            type TypeToUse = EditableComponentProperties<P> & P;

            const computedProps: TypeToUse = {
                ...this.props,
                componentProperties: this.props,
                editConfig: defaultEditConfig,
                wrappedComponent: WrappedComponent
            };

            return <EditableComponent {...computedProps} />;
        }
    };
}
Example #3
Source File: index.tsx    From Figurify with Apache License 2.0 6 votes vote down vote up 
export default class Home extends Component<{}, ChartProp> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Head>
                    <title>{NAME}</title>
                </Head>
                <Nav/>
                <HomePage/>
            </div>
        );
    }
}
Example #4
Source File: Options.tsx    From RPG-Inventory-UI with GNU General Public License v3.0 6 votes vote down vote up 
@observer
class Options extends Component<any, any> {
    constructor(props) {
        super(props)
        this.state = {
            amount : 1
        }

        this.onAmountChange = this.onAmountChange.bind(this);
    }

    componentDidMount() {
        dragStore.amount = this.state.amount
    }

    onAmountChange(e) {
        this.setState({ amount : e.target.value })
        dragStore.amount = e.target.value
    }

    render() {
        const { t } = this.props;

        return (
            <div className="inventory-options">
                <div className="option-panel">
                    <input type="text" className="option-button" value={this.state.amount} onChange={this.onAmountChange} tabIndex={-1}/>
                    <OptionButton name={t("Utiliser")} drop="yes" eventName="useInventory" />
                    <OptionButton name={t("Donner")} drop="yes" eventName="giveInventory" />
                    <OptionButton name={t("Jeter")} drop="yes" eventName="throwInventory" />
                    <OptionButton name={t("Informations")} drop="yes" eventName="infoInventory" />
                    <OptionButton name={t("Renommer")} eventName="renameInventory" />
                </div>
            </div>
        )
    }
}
Example #5
Source File: index.tsx    From hive with MIT License 6 votes vote down vote up 
class Dashboard extends Component<Props> {
    render() {
        return (
            <div className={styles.wrap}>
                <Dots />
                <div className={styles.pagesWrap}>
                    <Pages />
                </div>
            </div>
        );
    }
}
Example #6
Source File: ErrorBoundary.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up 
export class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  componentDidCatch(error: Error, errorInfo: any) {
    this.setState({
      error,
    });

    console.error(errorInfo);
  }

  render() {
    if (this.state.error) {
      return <ErrorView>{this.state.error.toString()}</ErrorView>;
    }

    return this.props.children;
  }
}
Example #7
Source File: Example.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
@observer
export class Example extends Component {

  render() {
    return (
      <Text style={styles.title}>Welcome to <%=project.name%>!</Text>
    );
  }
}
Example #8
Source File: index.tsx    From space-traveling with MIT License 6 votes vote down vote up 
export default class Comments extends Component {
  componentDidMount() {
    const script = document.createElement('script');
    const anchor = document.getElementById('inject-comments-for-uterances');
    script.setAttribute('src', 'https://utteranc.es/client.js');
    script.setAttribute('crossorigin', 'anonymous');
    script.setAttribute('async', 'true');
    script.setAttribute('repo', 'GBDev13/space-traveling');
    script.setAttribute('issue-term', 'pathname');
    script.setAttribute('theme', 'dark-blue');
    anchor.appendChild(script);
  }

  render() {
    return (
      <div
        id="inject-comments-for-uterances"
        style={{ marginBottom: '4rem' }}
      />
    );
  }
}
Example #9
Source File: SettingsTab.d.ts    From react-native-sdk with MIT License 6 votes vote down vote up 
declare class SettingsTab extends Component<Props, State> {
    constructor(props: Props);
    render(): JSX.Element;
    private renderLoggedIn;
    private renderLoggedOut;
    private onLoginTapped;
    private onLogoutTapped;
    private updateState;
}
Example #10
Source File: BaseContainer.tsx    From generator-earth with MIT License 6 votes vote down vote up 
/**
 * 普通container的基类
 * 已包装所在路由的前缀
 */
export default class BaseContainer<P={}, S={}> extends Component<P & RouteComponentProps, S> {
    
    static contextType = BaseContext
    
    /**
     * 可以使用  this.context.CONTAINER_ROUTE_PREFIX 获取 routeContainerHOC提供的路径前缀
     * 如
    instanceMethod() {
        console.log(this.context.CONTAINER_ROUTE_PREFIX)
    }
     */
    
    sleep(n=0) {
        return new Promise(resolve=>{
            setTimeout( ()=>resolve(), n )
        })
    }
}
Example #11
Source File: Startup.tsx    From hive with MIT License 6 votes vote down vote up 
class Startup extends Component<Props> {
    componentDidMount() {
        const { authService } = this.props;

        authService.loginLan();
    }

    render() {
        const { initialized } = this.props;

        if (!initialized) return null;

        return (
            <Router>
                <Switch>
                    <Redirect exact from={constants.paths.base} to={constants.paths.dashboard} />
                    <AnonymousRoute path={constants.paths.login} component={LoginComp} />
                    <AuthorizedRoute path={constants.paths.base} component={AuthorizedComp} />
                </Switch>
            </Router>
        );
    }
}
Example #12
Source File: index.tsx    From pola-web with MIT License 6 votes vote down vote up 
class ClickOutsideComponent extends Component<IClickOutsideComponentProps> {
  handleClickOutside = (evt: FormEvent) => {
    this.props.clickOutsideHandler && this.props.clickOutsideHandler();
  };

  public render() {
    return <div className="click-outside">{this.props.children}</div>;
  }
}
Example #13
Source File: Title.tsx    From sc2-planner with MIT License 6 votes vote down vote up 
export default class Title extends Component {
    render(): JSX.Element {
        return (
            <div>
                <div>
                    <a
                        className={CLASSES.title}
                        href="https://burnysc2.github.io/sc2-planner/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        SC2-Planner - The StarCraft II Build Planner
                    </a>
                </div>
                <div>
                    <a
                        className={CLASSES.titleVersion}
                        href="https://liquipedia.net/starcraft2/Patch_5.0.9"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        For patch 5.0.9
                    </a>
                </div>
            </div>
        )
    }
}
Example #14
Source File: Checkout.tsx    From tutorial-cloudflare-bookstore with Apache License 2.0 6 votes vote down vote up 
export default class Checkout extends Component {
  render() {
    return (
      <div>
        <CategoryNavBar />
        <div className="well-bs">
          <div className="white-box no-margin-top no-margin-bottom">
            <h3>Checkout</h3>
          </div>
        </div>
        <CheckoutForm />
      </div>
    );
  }
}
Example #15
Source File: ErrorMessage.tsx    From sc2-planner with MIT License 6 votes vote down vote up 
export default class ErrorMessage extends Component<MyProps> {
    render(): JSX.Element {
        return (
            <div>
                <label className={CLASSES.errorLabel}>{this.props.gamelogic.errorMessage}</label>
            </div>
        )
    }
}
Example #16
Source File: SearchView.tsx    From tutorial-cloudflare-bookstore with Apache License 2.0 6 votes vote down vote up 
export default class SearchView extends Component<SearchViewProps> {
  render() {
    return (
      <div className="Category">
        <CategoryNavBar />
        <SearchGallery match={this.props.match} />
      </div>
    );
  }
}
Example #17
Source File: index.tsx    From metaflow-ui with Apache License 2.0 6 votes vote down vote up 
//
// Basic error boundary. Used in multiple parts of app
//

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
  };

  public static getDerivedStateFromError(_: Error): State {
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Uncaught error:', error, errorInfo);
    this.setState({ hasError: true });
    const warning = `${error.name}: ${error.message}, ${errorInfo.componentStack?.split('\n')[1]}`;
    console.log(warning);
  }

  public render(): React.ReactNode {
    if (this.state.hasError) {
      return <p>{this.props.message}</p>;
    }

    return this.props.children;
  }
}
Example #18
Source File: ErrorBoundary.tsx    From firebase-react-typescript-project-template with MIT License 6 votes vote down vote up 
export class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): ErrorBoundaryState {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render(): ReactElement {
    if (this.state.hasError) {
      return <div />;
    }
    return this.props.children;
  }
}
Example #19
Source File: ErrorBoundary.tsx    From hypertext with GNU General Public License v3.0 6 votes vote down vote up 
export default class ErrorBoundary extends Component<{ fallback: ReactNode; children: ReactNode }> {
  state = { hasError: false, error: null }
  static getDerivedStateFromError(error: Error): { hasError: boolean; error: Error } {
    return {
      hasError: true,
      error,
    }
  }
  render(): ReactNode {
    if (this.state.hasError) {
      return this.props.fallback
    }
    return this.props.children
  }
}