InlineInput

tsx

import React from 'react';
import InlineInput from 'intergalactic/inline-input';

const Example = () => {
  return (
    <InlineInput
      onBlurBehavior='cancel'
      onCancel={console.log}
      onChange={console.log}
      onConfirm={console.log}
    >
      <InlineInput.Addon htmlFor='basic-example' tag='label'>
        User name:
      </InlineInput.Addon>
      <InlineInput.Value id='basic-example' defaultValue='John Doe' />
      <InlineInput.ConfirmControl />
      <InlineInput.CancelControl />
    </InlineInput>
  );
};

const Demo = Example;

export default Demo;

import React from 'react';
import InlineInput from 'intergalactic/inline-input';

const Example = () => {
  return (
    <InlineInput
      onBlurBehavior='cancel'
      onCancel={console.log}
      onChange={console.log}
      onConfirm={console.log}
    >
      <InlineInput.Addon htmlFor='basic-example' tag='label'>
        User name:
      </InlineInput.Addon>
      <InlineInput.Value id='basic-example' defaultValue='John Doe' />
      <InlineInput.ConfirmControl />
      <InlineInput.CancelControl />
    </InlineInput>
  );
};

const Demo = Example;

export default Demo;

tsx

import React from 'react';
import InlineInput from 'intergalactic/inline-input';
import InlineEdit from 'intergalactic/inline-edit';
import EditM from 'intergalactic/icon/Edit/m';
import { Text } from 'intergalactic/typography';

const Example = () => {
  const [title, setTitle] = React.useState('Lorem ipsum');
  const [editingTitle, setEditingTitle] = React.useState(false);
  const [savingTitle, setSavingTitle] = React.useState(false);
  const stopEditing = () => setEditingTitle(false);
  const handleTitle = (title) => {
    setSavingTitle(true);
    /** Here we doing some network activities */
    setTimeout(() => {
      setTitle(title);
      setSavingTitle(false);
      setEditingTitle(false);
    }, 3000);
  };

  return (
    <>
      <Text tag='h1'>
        <InlineEdit editable={editingTitle} onEditableChange={setEditingTitle}>
          <InlineEdit.View pr={5}>
            {title} <EditM />
          </InlineEdit.View>
          <InlineEdit.Edit>
            <InlineInput onConfirm={handleTitle} onCancel={stopEditing} loading={savingTitle}>
              <InlineInput.Value autoFocus defaultValue={title} />
              <InlineInput.ConfirmControl />
              <InlineInput.CancelControl />
            </InlineInput>
          </InlineEdit.Edit>
        </InlineEdit>
      </Text>
      dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
      sunt in culpa qui officia deserunt mollit anim id est laborum.
    </>
  );
};

const Demo = Example;

export default Demo;

import React from 'react';
import InlineInput from 'intergalactic/inline-input';
import InlineEdit from 'intergalactic/inline-edit';
import EditM from 'intergalactic/icon/Edit/m';
import { Text } from 'intergalactic/typography';

const Example = () => {
  const [title, setTitle] = React.useState('Lorem ipsum');
  const [editingTitle, setEditingTitle] = React.useState(false);
  const [savingTitle, setSavingTitle] = React.useState(false);
  const stopEditing = () => setEditingTitle(false);
  const handleTitle = (title) => {
    setSavingTitle(true);
    /** Here we doing some network activities */
    setTimeout(() => {
      setTitle(title);
      setSavingTitle(false);
      setEditingTitle(false);
    }, 3000);
  };

  return (
    <>
      <Text tag='h1'>
        <InlineEdit editable={editingTitle} onEditableChange={setEditingTitle}>
          <InlineEdit.View pr={5}>
            {title} <EditM />
          </InlineEdit.View>
          <InlineEdit.Edit>
            <InlineInput onConfirm={handleTitle} onCancel={stopEditing} loading={savingTitle}>
              <InlineInput.Value autoFocus defaultValue={title} />
              <InlineInput.ConfirmControl />
              <InlineInput.CancelControl />
            </InlineInput>
          </InlineEdit.Edit>
        </InlineEdit>
      </Text>
      dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
      sunt in culpa qui officia deserunt mollit anim id est laborum.
    </>
  );
};

const Demo = Example;

export default Demo;

tsx

import React from 'react';
import InlineInput from 'intergalactic/inline-input';

const Example = () => {
  return (
    <div>
      <InlineInput state='valid'>
        <InlineInput.Value aria-label='valid state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
      <br />
      <br />
      <InlineInput state='invalid'>
        <InlineInput.Value aria-label='invalid state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
      <br />
      <br />
      <InlineInput disabled>
        <InlineInput.Value aria-label='disabled state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
      <br />
      <br />
      <InlineInput loading>
        <InlineInput.Value aria-label='loading state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
    </div>
  );
};

const Demo = Example;

export default Demo;

import React from 'react';
import InlineInput from 'intergalactic/inline-input';

const Example = () => {
  return (
    <div>
      <InlineInput state='valid'>
        <InlineInput.Value aria-label='valid state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
      <br />
      <br />
      <InlineInput state='invalid'>
        <InlineInput.Value aria-label='invalid state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
      <br />
      <br />
      <InlineInput disabled>
        <InlineInput.Value aria-label='disabled state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
      <br />
      <br />
      <InlineInput loading>
        <InlineInput.Value aria-label='loading state inline input' />
        <InlineInput.ConfirmControl />
        <InlineInput.CancelControl />
      </InlineInput>
    </div>
  );
};

const Demo = Example;

export default Demo;

tsx

import React from 'react';
import InlineInput from 'intergalactic/inline-input';

const Example = () => {
  return (
    <div>
      <InlineInput>
        <InlineInput.Addon htmlFor='number-example' tag='label'>
          Some score:
        </InlineInput.Addon>
        <InlineInput.NumberValue id='number-example' defaultValue={100} />
        <InlineInput.NumberControls />
        <InlineInput.ConfirmControl />
      </InlineInput>
    </div>
  );
};

const Demo = Example;

export default Demo;

import React from 'react';
import InlineInput from 'intergalactic/inline-input';

const Example = () => {
  return (
    <div>
      <InlineInput>
        <InlineInput.Addon htmlFor='number-example' tag='label'>
          Some score:
        </InlineInput.Addon>
        <InlineInput.NumberValue id='number-example' defaultValue={100} />
        <InlineInput.NumberControls />
        <InlineInput.ConfirmControl />
      </InlineInput>
    </div>
  );
};

const Demo = Example;

export default Demo;