react-devcloud-components

Components

All components require redux so make sure you wrap a Provider component aound your App.

<Provider store={Store}>
  <App />
</Provider>

###Authenticator This component will handle the complete sign in -, challenges -, reset password - and reset Account processes. It also sets tokens in your devcloud-client-lib.

######Redux flags signIn

<Authenticator on={{ signIn: "AUTHENTICATOR::SIGN_IN" }} />

###Block A block element with subheading. Can be used as a paper element.

<Block label="Some" primary>
  Hallo
</Block>

###Browser A simple wrapper with pagination and sorting for data which is not displayed in a table. If you are setting currentPage you are toggling controlled mode (vizeversa for recordsPerPage), then you will have to set onCurrentPageChange (or onRecordsPerPageChange) too.

<Browser
  items={elements}
  element={item => {
    return (
      <div key={item.name}>
        {item.name}, Potential: {item.potential}
      </div>
    );
  }}
  recordsPerPageOptions={[1, 2, 3, 4, 5]}
  filter={element => element}
  sort={{
    function: (a, b, selected) => {
      const { active, order } = selected;
      switch (active) {
        case "Name":
          if (order === "asc")
            return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
          else return a.name < b.name ? 1 : a.name > b.name ? -1 : 0;
        case "Potential":
          if (order === "asc")
            return a.potential < b.potential
              ? -1
              : a.potential > b.potential
              ? 1
              : 0;
          else
            return a.potential < b.potential
              ? 1
              : a.potential > b.potential
              ? -1
              : 0;
        default:
          return 0;
      }
    },
    options: ["Name", "Potential"]
  }}
/>

###Form A unified Form interface.

const actions = formActions => {
  return (
    <button
      onClick={async e => {
        formActions.togglePending();
        await doStuff();
        formActions.togglePending();
      }}
    >
      Submit
    </button>
  );
};
return (
  <Form actions={actions}>
    <Text
      xs={12}
      sm={6}
      label="Text"
      value={this.state.values.text}
      readOnly={this.state.readOnly}
      onChange={value => {
        let newState = { ...this.state };
        newState.values.text = value;
        this.setState(newState);
      }}
      error={this.state.errors.text}
    />
    <Date
      xs={12}
      sm={6}
      label="Date"
      value={this.state.values.date}
      readOnly={this.state.readOnly}
      onChange={value => {
        let newState = { ...this.state };
        newState.values.date = value;
        this.setState(newState);
      }}
      error={this.state.errors.date}
    />
    <MultiSelect
      xs={12}
      sm={6}
      label="Multiselect"
      options={["option 1", "option 2"]}
      value={this.state.values.multiSelect}
      readOnly={this.state.readOnly}
      onChange={value => {
        console.log(value);
        let newState = { ...this.state };
        newState.values.multiSelect = value;
        this.setState(newState);
      }}
      error={this.state.errors.radio}
    />
    <Select
      xs={12}
      sm={6}
      label="Select"
      options={["option 1", "option 2"]}
      value={this.state.values.select}
      readOnly={this.state.readOnly}
      onChange={value => {
        console.log(value);
        let newState = { ...this.state };
        newState.values.select = value;
        this.setState(newState);
      }}
      error={this.state.errors.radio}
    />
    <Time
      xs={12}
      sm={6}
      label="Start"
      value={this.state.values.time}
      readOnly={this.state.readOnly}
      onChange={value => {
        console.log(value);
        let newState = { ...this.state };
        newState.values.time = value;
        this.setState(newState);
      }}
      error={this.state.errors.time}
    />
    <Range
      xs={12}
      sm={6}
      label="Range"
      options={["option 1", "option 2"]}
      value={this.state.values.range}
      readOnly={this.state.readOnly}
      min={0}
      max={10}
      step={1}
      onChange={value => {
        let newState = { ...this.state };
        newState.values.range = value;
        this.setState(newState);
      }}
      error={this.state.errors.range}
    />
    <Radio
      xs={12}
      sm={6}
      label="Text"
      options={[
        { value: "radio 1", label: "option 1" },
        { value: "radio 2", label: "option 2" }
      ]}
      value={this.state.values.radio}
      readOnly={this.state.readOnly}
      onChange={value => {
        console.log(value);
        let newState = { ...this.state };
        newState.values.radio = value;
        this.setState(newState);
      }}
      error={this.state.errors.radio}
    />
    <Chips
      xs={12}
      primary
      options={[
        { label: "test1", value: "some1" },
        { label: "test2", value: "some2" }
      ]}
      readOnly={this.state.readOnly}
      value={pending ? [] : this.state.values.chips}
      onChange={values => {
        console.log(values);
        let newState = { ...this.state };
        newState.values.chips = values;
        this.setState(newState);
      }}
      pending={false}
      select={{ xs: 12, sm: 6, lg: 2 }}
    />
  </Form>
);

###Layouter Sets the basic layout of the current page. You can choose from a preset of layouts.

######Redux flags contentLoaded, signOut

<Layouter
  layout="admin"
  page="Page Title"
  links={[
    {
      path: "/some/path",
      name: "Link 1",
      icon: ""
    }
  ]}
  routing={false}
  on={{
    contentLoaded: "LAYOUTER::CONTENT_LOADED",
    signOut: "LAYOUTER::SIGN_OUT"
  }}
/>

###Router A simple routing component. You can lazy load components if you set component a function.

######Redux flags none

<Router
  groups={["public"]}
  on={{}}
  layouter={{}}
  pages={[
    {
      name: "Login",
      icon: faSignInAlt,
      layout: "emptyPage",
      component: () => {
        //lazy load component
        return import("../views/Authenticator");
      },
      inMenu: false,
      props: { label: "page 1", primary: true },
      display: false,
      group: "public",
      path: "/login",
      aliasPath: ["/"]
    },
    {
      name: "Forms",
      icon: faEdit,
      layout: "admin",
      component: Form, //load simple react component
      props: { label: "page 2", primary: true },
      group: "private",
      path: "/forms"
    }
  ]}
/>